/* Algorvis website admin - same design system as mohammadi.algorvis.com (Algorvis HMS):
   teal primary, soft cards, colour per module, Inter, light + "Night Shift" dark theme. */
:root {
  --radius: 1rem;
  --background: 200 33% 98%; --foreground: 202 40% 13%;
  --card: 0 0% 100%; --primary: 190 85% 33%; --primary-foreground: 0 0% 100%;
  --secondary: 199 60% 95%; --secondary-foreground: 199 70% 24%;
  --muted: 200 25% 95%; --muted-foreground: 202 15% 44%;
  --accent: 172 66% 94%; --destructive: 350 84% 58%; --success: 158 64% 38%; --warning: 32 95% 48%;
  --border: 200 20% 89%; --ring: 190 85% 33%;
  --mod-content: 210 85% 48%; --mod-website: 158 64% 38%; --mod-leads: 32 95% 48%; --mod-admin: 222 35% 42%; --mod-home: 190 85% 33%; --mod-media: 260 60% 55%;
  --shadow-card: 0 1px 2px hsl(200 30% 20% / .04), 0 4px 16px hsl(200 30% 20% / .05);
  --shadow-card-hover: 0 2px 4px hsl(200 30% 20% / .06), 0 8px 24px hsl(200 30% 20% / .08);
}
html.dark {
  --background: 202 32% 8%; --foreground: 200 20% 96%; --card: 202 28% 12%;
  --primary: 188 75% 50%; --primary-foreground: 202 32% 8%; --secondary: 202 22% 18%; --secondary-foreground: 199 60% 88%;
  --muted: 202 22% 18%; --muted-foreground: 200 12% 68%; --accent: 172 45% 18%; --destructive: 350 78% 60%; --success: 158 55% 46%; --warning: 32 88% 55%;
  --border: 202 18% 22%; --ring: 188 75% 50%;
  --mod-content: 210 85% 62%; --mod-website: 158 55% 50%; --mod-leads: 32 88% 58%; --mod-admin: 222 30% 65%; --mod-home: 188 75% 50%; --mod-media: 260 65% 68%;
  --shadow-card: 0 1px 2px hsl(0 0% 0% / .3), 0 4px 16px hsl(0 0% 0% / .25);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; border-color: hsl(var(--border)); }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-feature-settings: "rlig" 1, "calt" 1;
  background: hsl(var(--background)); color: hsl(var(--foreground)); -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.5; }
a { color: hsl(var(--primary)); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table td, table th, .num { font-variant-numeric: tabular-nums; }
[data-lucide], .lucide { width: 16px; height: 16px; stroke-width: 2; flex: 0 0 auto; }
.muted { color: hsl(var(--muted-foreground)); }
.hide { display: none !important; }
.scrollbar-thin { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar-thin::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 9999px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: none; } }
@keyframes ecg { 0% { stroke-dashoffset: 400; } 100% { stroke-dashoffset: 0; } }
@keyframes shimmer { 100% { transform: translateX(100%); } }
@keyframes zoom-in { from { opacity: 0; transform: translate(-50%, -48%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- shell: sidebar + topbar + content + footer ---------- */
.app { display: flex; min-height: 100vh; background: linear-gradient(to bottom, hsl(var(--secondary) / .4), hsl(var(--background)) 40%, hsl(var(--background))); }
.side { position: fixed; inset: 0 auto 0 0; z-index: 40; width: 256px; height: 100vh; display: flex; flex-direction: column; flex-shrink: 0; background: hsl(var(--card));
  border-right: 1px solid hsl(var(--border)); box-shadow: 0 10px 30px rgba(0,0,0,.12); transform: translateX(-100%); transition: transform .2s ease, width .2s ease; }
.side.open { transform: none; }
@media (min-width: 1024px) { .side { position: sticky; top: 0; transform: none; box-shadow: none; } .app.collapsed .side { width: 64px; } }
.side-brand { height: 64px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 8px; border-bottom: 1px solid hsl(var(--border)); padding: 0 12px; cursor: pointer; }
.side-brand img { height: 40px; max-width: 100%; object-fit: contain; border-radius: 8px; }
.side-brand .mark { display: none; height: 32px; width: 32px; }
.app.collapsed .side-brand .full { display: none; } .app.collapsed .side-brand .mark { display: block; }
.side-nav { flex: 1; overflow-y: auto; padding: 12px; }
.nav-group + .nav-group { margin-top: 4px; }
.nav-group-h { display: flex; width: 100%; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; padding: 12px 10px 4px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--g)); }
.nav-group-h .dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--g)); }
.nav-group-h span:nth-child(2) { flex: 1; text-align: left; }
.nav-group-h .lucide { width: 14px; height: 14px; transition: transform .15s; }
.nav-group.closed .nav-group-h .lucide { transform: rotate(-90deg); } .nav-group.closed .nav-items { display: none; }
.nav-items { display: grid; gap: 4px; margin-top: 4px; }
.nav-link { position: relative; display: flex; align-items: center; gap: 10px; border-radius: 12px; padding: 8px 10px; font-size: 14px; font-weight: 500; color: hsl(var(--muted-foreground)); transition: all .15s; }
.nav-link:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); transform: scale(1.02); }
.nav-link .tile { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: hsl(var(--g) / .1); color: hsl(var(--g)); transition: background .15s; }
.nav-link .tile .lucide { width: 14px; height: 14px; transition: transform .15s; } .nav-link:hover .tile .lucide { transform: scale(1.1); }
.nav-link .lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-link.active { background: hsl(var(--g) / .1); color: hsl(var(--g)); box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.nav-link.active .tile { background: hsl(var(--g)); color: #fff; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 9999px; background: hsl(var(--destructive)); color: #fff; font-size: 11px; font-weight: 600; }
.app.collapsed .nav-group-h { display: none; } .app.collapsed .nav-group.closed .nav-items { display: grid; }
.app.collapsed .nav-link { justify-content: center; padding: 8px; } .app.collapsed .nav-link .lbl { display: none; }
.app.collapsed .nav-link .count { position: absolute; right: -6px; top: -4px; min-width: 16px; height: 16px; font-size: 9px; padding: 0 4px; }
.side-foot { display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid hsl(var(--border)); padding: 10px 8px; font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); }
.side-foot img { width: 20px; height: 20px; object-fit: contain; } .side-foot:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.app.collapsed .side-foot span { display: none; }
.side-btn { display: flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-top: 1px solid hsl(var(--border)); background: none; padding: 8px; font-size: 12px; color: hsl(var(--muted-foreground)); cursor: pointer; }
.side-btn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.side-btn.collapse { display: none; } @media (min-width: 1024px) { .side-btn.collapse { display: flex; } .side-btn.close { display: none; } }
.app.collapsed .side-btn.collapse span { display: none; }
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.3); backdrop-filter: blur(1px); display: none; } .scrim.show { display: block; } @media (min-width: 1024px) { .scrim { display: none !important; } }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.top { position: sticky; top: 0; z-index: 20; height: 56px; display: flex; align-items: center; gap: 4px; padding: 0 8px; border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card) / .75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 2px rgba(0,0,0,.04); }
@media (min-width: 640px) { .top { gap: 8px; padding: 0 16px; } }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; min-width: 36px; padding: 0 8px; border-radius: 8px; border: 0; background: transparent; cursor: pointer; color: hsl(var(--foreground)); font-size: 14px; font-weight: 500; }
.icon-btn:hover { background: hsl(var(--accent)); } .icon-btn .lucide { width: 18px; height: 18px; }
.only-mobile { display: inline-flex; } .only-desktop { display: none; }
@media (min-width: 1024px) { .only-mobile.lg { display: none; } }
@media (min-width: 768px) { .only-mobile:not(.lg) { display: none; } .only-desktop { display: inline-flex; } }
.top .grow { flex: 1; }
.gsearch { position: relative; flex: 1; max-width: 520px; margin: 0 auto; display: none; }
@media (min-width: 768px) { .gsearch { display: block; } }
.gsearch.mobile-open { display: block; position: absolute; inset: 8px 52px 8px 8px; max-width: none; z-index: 5; }
.gsearch input { width: 100%; height: 38px; border: 1px solid hsl(var(--border)); border-radius: 9999px; background: hsl(var(--muted) / .6); padding: 0 14px 0 38px; font-size: 14px; outline: 0; transition: border-color .15s, box-shadow .15s, background .15s; }
.gsearch input:focus { background: hsl(var(--card)); border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .15); }
.gsearch > .lucide { position: absolute; left: 13px; top: 11px; color: hsl(var(--muted-foreground)); }
.gsearch kbd { position: absolute; right: 10px; top: 9px; font: 600 11px Inter, sans-serif; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); border-radius: 6px; padding: 1px 6px; background: hsl(var(--card)); }
.gresults { position: absolute; left: 0; right: 0; top: calc(100% + 6px); max-height: 70vh; overflow: auto; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.14); padding: 6px; display: none; }
.gresults.show { display: block; animation: fade-up .15s ease-out; }
.gresults .grp { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: hsl(var(--muted-foreground)); }
.gresults a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; color: hsl(var(--foreground)); }
.gresults a:hover, .gresults a.on { background: hsl(var(--primary) / .08); }
.gresults a small { display: block; color: hsl(var(--muted-foreground)); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gresults .empty { padding: 18px; text-align: center; color: hsl(var(--muted-foreground)); }
.clock { display: none; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 6px; font-size: 12px; color: hsl(var(--muted-foreground)); }
@media (min-width: 640px) { .clock { display: inline-flex; } } .clock .lucide { width: 14px; height: 14px; }
.menu { position: relative; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 12px; box-shadow: 0 14px 34px rgba(0,0,0,.14); padding: 4px; display: none; z-index: 50; }
.menu-pop.show { display: block; animation: fade-in .12s; }
.menu-pop .lbl { padding: 8px 10px; font-weight: 600; } .menu-pop .lbl small { display: block; font-weight: 400; font-size: 12px; color: hsl(var(--muted-foreground)); }
.menu-pop hr { border: 0; border-top: 1px solid hsl(var(--border)); margin: 4px -4px; }
.menu-pop button, .menu-pop a { display: flex; width: 100%; align-items: center; gap: 8px; padding: 8px 10px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-size: 14px; color: hsl(var(--foreground)); text-align: left; }
.menu-pop button:hover, .menu-pop a:hover { background: hsl(var(--accent)); }
.subhead { position: sticky; top: 56px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 6px 16px; border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--card) / .75); backdrop-filter: blur(10px); font-size: 12px; }
.subhead b { display: inline-flex; align-items: center; gap: 6px; color: hsl(var(--primary)); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.subhead b::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--primary)); }
.subhead span { color: hsl(var(--muted-foreground)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content { position: relative; flex: 1; padding: 12px; overflow-x: auto; }
@media (min-width: 640px) { .content { padding: 16px; } } @media (min-width: 1024px) { .content { padding: 24px; } }
.page { animation: fade-up .22s ease-out both; display: grid; gap: 16px; }
.foot { border-top: 1px solid hsl(var(--border)); padding: 8px 16px 96px; text-align: center; font-size: 13px; color: hsl(var(--muted-foreground)); }
@media (min-width: 1024px) { .foot { padding-bottom: 8px; } }
.foot b { color: hsl(var(--primary)); } .foot a { color: inherit; text-decoration: underline; }
.bnav { position: fixed; inset: auto 0 0 0; z-index: 30; display: flex; justify-content: space-around; border-top: 1px solid hsl(var(--border)); background: hsl(var(--card) / .95); backdrop-filter: blur(10px);
  box-shadow: 0 -4px 16px rgba(0,0,0,.06); padding: 0 8px env(safe-area-inset-bottom); }
@media (min-width: 1024px) { .bnav { display: none; } }
.bnav a, .bnav button { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border: 0; background: none; font-size: 11px; font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; }
.bnav .ico { position: relative; display: flex; align-items: center; justify-content: center; height: 32px; width: 48px; border-radius: 9999px; transition: background .15s; }
.bnav .ico .lucide { width: 20px; height: 20px; } .bnav .ico .count { position: absolute; right: -4px; top: -4px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
.bnav .on { color: hsl(var(--primary)); } .bnav .on .ico { background: hsl(var(--primary) / .1); }
.bnav span:last-child { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- page header, cards, stat tiles ---------- */
.ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ph-l { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ph-ico { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.ph-ico .lucide { width: 24px; height: 24px; }
.ph h1 { margin: 0; font-size: 20px; font-weight: 600; line-height: 1.25; } .ph p { margin: 0; font-size: 14px; color: hsl(var(--muted-foreground)); }
.ph-r { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.back { width: 36px; height: 36px; border-radius: 8px; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: hsl(var(--foreground)); }
.back:hover { background: hsl(var(--accent)); }
.card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: 12px; box-shadow: var(--shadow-card); transition: box-shadow .2s; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid hsl(var(--border)); }
.card-h h2, .card-h h3 { margin: 0; font-size: 15px; font-weight: 600; } .card-b { padding: 16px; }
.stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { position: relative; overflow: hidden; display: flex; gap: 12px; align-items: flex-start; padding: 16px; color: inherit; }
.stat:hover { box-shadow: var(--shadow-card-hover); }
.stat .s-ico { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: hsl(var(--g) / .12); color: hsl(var(--g)); flex-shrink: 0; }
.stat .s-ico .lucide { width: 20px; height: 20px; }
.stat .s-l { font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); } .stat .s-v { font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.stat .s-s { font-size: 12px; color: hsl(var(--muted-foreground)); } 
.grid2 { display: grid; gap: 16px; } @media (min-width: 1100px) { .grid2 { grid-template-columns: 3fr 2fr; } }

/* ---------- buttons, inputs, badges, switch ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 6px; border: 1px solid transparent; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background .15s, opacity .15s, box-shadow .15s; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 2px hsl(var(--background)), 0 0 0 4px hsl(var(--ring)); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 1px 3px rgba(0,0,0,.12); } .btn-primary:hover { background: hsl(var(--primary) / .9); }
.btn-outline { background: hsl(var(--background)); border-color: hsl(var(--border)); color: hsl(var(--foreground)); box-shadow: 0 1px 2px rgba(0,0,0,.04); } .btn-outline:hover { background: hsl(var(--accent)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); } .btn-ghost:hover { background: hsl(var(--accent)); }
.btn-danger { background: hsl(var(--destructive)); color: #fff; } .btn-danger:hover { background: hsl(var(--destructive) / .9); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; } .btn-icon { width: 32px; height: 32px; padding: 0; }
.btn .spin { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
.field { display: grid; gap: 6px; } .field label, .lbl-t { font-size: 14px; font-weight: 500; } .field .hint { font-size: 12px; color: hsl(var(--muted-foreground)); } .req { color: hsl(var(--destructive)); }
.input, .select, .textarea { width: 100%; min-height: 36px; border: 1px solid hsl(var(--border)); border-radius: 6px; background: transparent; padding: 6px 12px; font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.03); outline: 0; transition: border-color .15s, box-shadow .15s; }
.textarea { min-height: 88px; resize: vertical; line-height: 1.5; } .select { appearance: auto; background: hsl(var(--card)); }
.input:focus, .select:focus, .textarea:focus { border-color: hsl(var(--ring)); box-shadow: 0 0 0 3px hsl(var(--ring) / .15); }
.input.bad, .textarea.bad, .select.bad { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / .12); }
.err { font-size: 12px; color: hsl(var(--destructive)); }
.with-ico { position: relative; } .with-ico .lucide { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: hsl(var(--muted-foreground)); pointer-events: none; } .with-ico .input { padding-left: 34px; }
.form-grid { display: grid; gap: 14px; } @media (min-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } .span-2 { grid-column: 1 / -1; } }
.badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; padding: 2px 10px; font-size: 12px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.b-success { background: hsl(var(--success) / .12); color: hsl(var(--success)); } .b-warning { background: hsl(var(--warning) / .14); color: hsl(var(--warning)); }
.b-muted { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); } .b-primary { background: hsl(var(--primary) / .1); color: hsl(var(--primary)); } .b-danger { background: hsl(var(--destructive) / .1); color: hsl(var(--destructive)); }
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .tr { width: 36px; height: 20px; border-radius: 9999px; background: hsl(var(--border)); position: relative; transition: background .15s; flex-shrink: 0; box-shadow: inset 0 1px 2px rgba(0,0,0,.06); }
.switch .tr::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.switch input:checked + .tr { background: hsl(var(--success)); } .switch input:checked + .tr::after { transform: translateX(16px); }
.switch input:focus-visible + .tr { box-shadow: 0 0 0 3px hsl(var(--ring) / .25); } .switch input:disabled + .tr { opacity: .5; }

/* ---------- toolbar + table ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid hsl(var(--border)); }
.toolbar .with-ico { flex: 1 1 220px; max-width: 360px; } .toolbar .select { width: auto; min-width: 140px; }
.toolbar .spacer { flex: 1; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: hsl(var(--muted-foreground)); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--success)); box-shadow: 0 0 0 0 hsl(var(--success) / .5); animation: livepulse 2s infinite; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 6px hsl(var(--success) / 0); } 100% { box-shadow: 0 0 0 0 hsl(var(--success) / 0); } }
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl thead { background: hsl(var(--secondary) / .6); }
.tbl th { height: 40px; padding: 0 12px; text-align: left; font-weight: 500; color: hsl(var(--muted-foreground)); white-space: nowrap; border-bottom: 1px solid hsl(var(--border)); }
.tbl td { padding: 10px 12px; vertical-align: middle; border-bottom: 1px solid hsl(var(--border)); }
.tbl tbody tr { transition: background .15s; } .tbl tbody tr:nth-child(even) { background: hsl(var(--muted) / .3); } .tbl tbody tr:hover { background: hsl(var(--primary) / .06); }
.tbl tbody tr:last-child td { border-bottom: 0; } .tbl tr.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0% { background: hsl(var(--warning) / .22); } 100% { background: transparent; } }
.tbl .thumb { width: 56px; height: 40px; border-radius: 8px; object-fit: cover; background: hsl(var(--muted)); display: block; border: 1px solid hsl(var(--border)); }
.tbl .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: hsl(var(--muted)); }
.tbl .t-main { font-weight: 600; } .tbl .t-sub { font-size: 12px; color: hsl(var(--muted-foreground)); max-width: 420px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl .acts { display: flex; gap: 4px; justify-content: flex-end; white-space: nowrap; }
.empty-state { padding: 48px 16px; text-align: center; color: hsl(var(--muted-foreground)); }
.empty-state .lucide { width: 40px; height: 40px; color: hsl(var(--primary) / .5); margin-bottom: 8px; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid hsl(var(--border)); font-size: 13px; color: hsl(var(--muted-foreground)); }
.skel { position: relative; overflow: hidden; background: hsl(var(--muted)); border-radius: 6px; height: 14px; }
.skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, hsl(var(--card) / .6), transparent); animation: shimmer 1.4s infinite; }
/* phones: table rows become cards */
@media (max-width: 720px) {
  .tbl.cards thead { display: none; } .tbl.cards, .tbl.cards tbody, .tbl.cards tr, .tbl.cards td { display: block; width: 100%; }
  .tbl.cards tr { padding: 10px 12px; border-bottom: 1px solid hsl(var(--border)); } .tbl.cards tbody tr:nth-child(even) { background: transparent; }
  .tbl.cards td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
  .tbl.cards td[data-l]::before { content: attr(data-l); font-size: 12px; color: hsl(var(--muted-foreground)); flex-shrink: 0; }
  .tbl.cards td.t-first { display: flex; justify-content: flex-start; } .tbl.cards .acts { justify-content: flex-start; padding-top: 6px; }
  .tbl .t-sub { max-width: 220px; }
}

/* ---------- dialog (modal), confirm, toast, loader ---------- */
.dlg-back { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); animation: fade-in .15s; }
.dlg { position: fixed; left: 50%; top: 50%; z-index: 51; transform: translate(-50%, -50%); width: calc(100% - 2rem); max-width: 672px; max-height: 90vh; display: flex; flex-direction: column;
  overflow: hidden; background: hsl(var(--background)); border: 1px solid hsl(var(--border)); border-radius: 12px; box-shadow: 0 25px 50px rgba(0,0,0,.25); animation: zoom-in .18s ease-out; }
.dlg.lg { max-width: 980px; } .dlg.sm { max-width: 440px; }
.dlg-h { display: flex; align-items: flex-start; gap: 12px; padding: 18px 56px 12px 20px; border-bottom: 1px solid hsl(var(--border)); }
.dlg-h .ph-ico { width: 40px; height: 40px; } .dlg-h h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; } .dlg-h p { margin: 2px 0 0; font-size: 13px; color: hsl(var(--muted-foreground)); }
.dlg-x { position: absolute; right: 14px; top: 14px; width: 32px; height: 32px; border-radius: 8px; border: 0; background: hsl(var(--muted) / .8); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: hsl(var(--muted-foreground)); transition: background .15s, color .15s, transform .15s; }
.dlg-x:hover { background: hsl(var(--primary)); color: #fff; transform: rotate(90deg); }
.dlg-b { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px; display: grid; gap: 14px; }
.dlg-f { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; padding: 12px 20px; border-top: 1px solid hsl(var(--border)); background: hsl(var(--muted) / .35); }
.dlg-f .left { margin-right: auto; }
@media (max-width: 640px) { .dlg { width: 100%; max-width: none; max-height: 92vh; top: auto; bottom: 0; left: 0; transform: none; border-radius: 16px 16px 0 0; animation: sheet .2s ease-out; } .dlg-f .btn { flex: 1; } }
@keyframes sheet { from { transform: translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 10px; background: hsl(var(--muted)); overflow-x: auto; }
.tabs button { flex: 1; border: 0; background: none; border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 500; color: hsl(var(--muted-foreground)); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; justify-content: center; }
.tabs button.on { background: hsl(var(--card)); color: hsl(var(--foreground)); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.tabs button .err-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--destructive)); }
.drop { border: 1.5px dashed hsl(var(--border)); border-radius: 12px; padding: 18px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; color: hsl(var(--muted-foreground)); }
.drop:hover, .drop.over { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .04); }
.drop .lucide { width: 28px; height: 28px; color: hsl(var(--primary)); } .drop b { color: hsl(var(--foreground)); }
.previews { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.previews .pv { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 4/3; background: hsl(var(--muted)); border: 1px solid hsl(var(--border)); }
.previews img { width: 100%; height: 100%; object-fit: cover; display: block; }
.previews .rm { position: absolute; right: 4px; top: 4px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: rgba(0,0,0,.6); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.previews .rm .lucide { width: 14px; height: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { border-radius: 9999px; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); font-size: 12px; font-weight: 600; padding: 3px 10px; }
.toasts { position: fixed; right: 0; bottom: 64px; z-index: 100; display: flex; flex-direction: column; gap: 10px; padding: 16px; width: 100%; max-width: 420px; pointer-events: none; }
@media (min-width: 1024px) { .toasts { bottom: 0; } }
.toast { pointer-events: auto; position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 14px 36px 14px 14px; border-radius: 8px; border: 1px solid rgba(0,0,0,.1); box-shadow: 0 20px 25px -5px rgba(0,0,0,.15);
  font-size: 14px; animation: slide-in-right .2s ease-out both; background: hsl(var(--primary)); color: #fff; }
.toast.success { background: hsl(var(--success)); } .toast.error { background: hsl(var(--destructive)); } .toast.info { background: hsl(var(--card)); color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.toast b { display: block; font-weight: 600; } .toast .x { position: absolute; right: 8px; top: 8px; border: 0; background: none; color: inherit; opacity: .8; cursor: pointer; padding: 2px; }
.toast .lucide { width: 18px; height: 18px; margin-top: 1px; }
.ecg { display: flex; flex-direction: column; align-items: center; gap: 8px; color: hsl(var(--primary)); }
.ecg svg { width: 128px; height: 40px; } .ecg polyline { stroke-dasharray: 400; animation: ecg 1.6s linear infinite; } .ecg span { font-size: 12px; font-weight: 500; color: hsl(var(--muted-foreground)); }
.page-loader { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: hsl(var(--background) / .82); backdrop-filter: blur(2px); transition: opacity .2s; }
.page-loader.gone { opacity: 0; pointer-events: none; }
.block-load { display: flex; justify-content: center; padding: 40px 0; }

/* ---------- login ---------- */
.bg-medical-pattern { background-color: hsl(var(--background)); background-size: 48px 48px, 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M22 17h4v5h5v4h-5v5h-4v-5h-5v-4h5z' fill='%230e7490' fill-opacity='0.06'/%3E%3C/svg%3E"), linear-gradient(135deg, hsl(var(--primary) / .06) 0%, transparent 50%, hsl(var(--accent) / .3) 100%); }
.auth { min-height: 100vh; display: grid; align-items: center; gap: 32px; padding: 32px 16px; max-width: 1120px; margin: 0 auto; }
@media (min-width: 960px) { .auth { grid-template-columns: 1fr 380px; gap: 64px; padding: 40px 24px; } }
.auth-mk { animation: fade-up .3s ease-out both; } .auth-mk .logo { height: 50px; border-radius: 10px; }
.auth-mk h1 { margin: 12px 0 4px; font-size: 36px; font-weight: 800; letter-spacing: -.02em; color: hsl(var(--primary)); line-height: 1.1; }
.auth-mk .tag { font-style: italic; color: hsl(var(--muted-foreground)); font-size: 16px; margin: 6px 0 18px; }
.auth-mk .feat { max-width: 420px; border-bottom: 1px solid hsl(var(--border)); padding: 8px 0; } .auth-mk .feat small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: hsl(var(--primary)); text-transform: uppercase; }
.auth-mk .feat span { font-size: 14px; color: hsl(var(--muted-foreground)); }
.auth-mk .follow { margin-top: 16px; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: hsl(var(--muted-foreground)); }
.auth-mk .socials { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.auth-mk .socials a { width: 32px; height: 32px; border-radius: 50%; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); display: inline-flex; align-items: center; justify-content: center; color: hsl(var(--muted-foreground)); transition: all .15s; }
.auth-mk .socials a:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary)); transform: translateY(-1px); } .auth-mk .socials .lucide { width: 14px; height: 14px; }
@media (max-width: 959px) { .auth-mk { order: 2; text-align: center; } .auth-mk .feat { margin: 0 auto; } .auth-mk .socials { justify-content: center; } .auth-mk h1 { font-size: 28px; } }
.auth-card { padding: 24px; border-radius: 24px; animation: fade-up .3s .05s ease-out both; box-shadow: 0 10px 40px hsl(200 30% 20% / .1); }
.auth-card .brand { text-align: center; margin-bottom: 14px; } .auth-card .brand img { height: 48px; }
.auth-card .brand h2 { margin: 8px 0 2px; font-size: 20px; font-weight: 700; } .auth-card .brand p { margin: 0; font-size: 12px; color: hsl(var(--muted-foreground)); }
.auth-card .brand small { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: hsl(var(--primary)); letter-spacing: .04em; }
.auth-card .input { height: 40px; border-radius: 12px; } .auth-card .btn { width: 100%; height: 40px; border-radius: 12px; margin-top: 4px; }
.auth-card .eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: none; color: hsl(var(--muted-foreground)); cursor: pointer; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.auth-card .eye .lucide { position: static; transform: none; }
.alert { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; font-size: 13px; background: hsl(var(--destructive) / .08); color: hsl(var(--destructive)); border: 1px solid hsl(var(--destructive) / .2); }
.alert.info { background: hsl(var(--primary) / .08); color: hsl(var(--primary)); border-color: hsl(var(--primary) / .2); }

/* nothing may push the page wider than the screen (phones) */
.page > *, .grid2 > *, .stats > *, .stat > div, .ph-l > div { min-width: 0; }
.ph p { white-space: normal; }
.stat .s-s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .stat { padding: 12px; gap: 10px; } .stat .s-ico { width: 34px; height: 34px; } .stat .s-v { font-size: 20px; } .ph h1 { font-size: 18px; } }
.tbl .t-main { overflow-wrap: anywhere; }

/* Algorvis loader (logo in a spinning ring) - replaces the heartbeat line */
.page-loader { background: hsl(var(--background)); backdrop-filter: none; }
.aw-load { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.aw-load .ring { position: relative; width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.aw-load .ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid hsl(var(--primary) / .15); border-top-color: hsl(var(--primary)); border-right-color: hsl(var(--mod-content)); animation: spin .9s linear infinite; }
.aw-load .ring img { width: 40px; height: 40px; border-radius: 50%; animation: aw-pulse 1.8s ease-in-out infinite; }
.aw-load .txt { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: hsl(var(--muted-foreground)); }
@keyframes aw-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.9); opacity: .75; } }