/* ═══ Unread row indicator + bell shake (invoices, patients, appointments) ═══ */
.ic2-unread td { background: #f0fdf4; }
.ic2-unread td:first-child { border-left: 3px solid #059669; }
.ic2-bell-shake { color:#d97706; font-size:.75rem; margin-right:.25rem; animation:ic2BellShake .6s ease-in-out infinite; }
@keyframes ic2BellShake { 0%,100%{transform:rotate(0)} 20%{transform:rotate(15deg)} 40%{transform:rotate(-15deg)} 60%{transform:rotate(8deg)} 80%{transform:rotate(-8deg)} }

/* ── Touch devices: always show hover-reveal elements ── */
@media (hover: none) and (pointer: coarse) {
  .notif-mark-read-btn { opacity: 1 !important; }
  .notif-item .notif-actions { opacity: 1 !important; }
  [data-tooltip]::after { display: none; }
  .btn-clinical-ghost { opacity: 1; }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   WetzelMed — Premium Green Design System
   Brand: Light Green · White · Gold
   Inspired by premium healthcare & wellness SaaS
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Design Tokens ── */
:root {
  /* Base Colors — white-dominant, spa-clean */
  --bg: #f8fafb;
  --bg-subtle: #eef2f0;
  --bg-elevated: #ffffff;
  --bg-hover: #f0f6f2;
  --bg-active: #dce8e0;
  --bg-sidebar: #0f172a;
  --bg-sidebar-hover: #1e293b;
  --bg-sidebar-active: #1a2332;
  --bg-topbar: #ffffff;
  --bg-mobile-nav: #0f172a;

  /* Text — rich, readable */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #94a3b8;
  --text-inverse: #ffffff;
  --text-link: #059669;
  --text-sidebar: #94a3b8;
  --text-sidebar-active: #4ade80;

  /* Borders — clean, sharp */
  --border: #e2e8f0;
  --border-hover: #cbd5e1;
  --border-active: #059669;
  --border-light: #eef2f0;

  /* Accent Colors */
  --accent-green: #059669;
  --accent-green-hover: #047857;
  --accent-green-light: #d1fae5;
  --accent-blue: #2563eb;
  --accent-blue-hover: #1d4ed8;
  --accent-blue-light: #dbeafe;
  --accent-purple: #7c3aed;
  --accent-purple-light: #ede9fe;
  --accent-amber: #d97706;
  --accent-amber-light: #fef3c7;
  --accent-red: #dc2626;
  --accent-red-hover: #b91c1c;
  --accent-red-light: #fee2e2;
  --accent-pink: #db2777;
  --accent-pink-light: #fce7f3;
  --accent-cyan: #0891b2;
  --accent-cyan-light: #cffafe;
  --accent-gray: #64748b;

  /* Gold Accent — premium touch */
  --accent-gold: #d97706;
  --accent-gold-hover: #b45309;
  --accent-gold-light: #fef3c7;
  --accent-gold-lighter: #fffbeb;

  /* Badge Colors */
  --green-bg: #d1fae5;
  --green-text: #047857;
  --blue-bg: #dbeafe;
  --blue-text: #1d4ed8;
  --amber-bg: #fef3c7;
  --amber-text: #92400e;
  --red-bg: #fee2e2;
  --red-text: #991b1b;
  --purple-bg: #ede9fe;
  --purple-text: #5b21b6;
  --pink-bg: #fce7f3;
  --pink-text: #9d174d;
  --cyan-bg: #cffafe;
  --cyan-text: #155e75;
  --gray-bg: #f1f5f9;
  --gray-text: #475569;
  --gold-bg: #fef3c7;
  --gold-text: #92400e;

  /* Radius */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md: 0 4px 8px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.08), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl: 0 20px 48px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.06);
  --shadow-card: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
  --shadow-card-hover: 0 8px 24px rgba(5,150,105,.08), 0 2px 4px rgba(0,0,0,.04);
  --shadow-sidebar: 1px 0 8px rgba(0,0,0,.06);
  --shadow-topbar: 0 1px 3px rgba(0,0,0,.04);
  --shadow-btn: 0 1px 2px rgba(0,0,0,.06);
  --shadow-btn-hover: 0 4px 12px rgba(5,150,105,.25);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Cascadia Code', monospace;

  /* Spacing */
  --sidebar-w: 260px;
  --sidebar-w-collapsed: 64px;
  --topbar-h: 56px;
  --mobile-nav-h: 56px;

  /* Transitions */
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --ease-out: cubic-bezier(.4,0,.2,1);
  --transition-fast: all .12s var(--ease-out);
  --transition: all .2s var(--ease-out);
  --transition-slow: all .3s var(--ease-out);
  --transition-spring: all .35s var(--ease-spring);

  /* Z-index layers */
  --z-sidebar: 100;
  --z-topbar: 50;
  --z-mobile-nav: 90;
  --z-overlay: 99;
  --z-modal: 200;
  --z-command-palette: 500;
  --z-toast: 300;
  --z-dropdown: 150;
  --z-tooltip: 400;
}

/* ── Dark Mode Tokens (class-based for user toggle) ── */
html.dark-mode {
  --bg: #0d1117;
  --bg-subtle: #161b22;
  --bg-elevated: #1a1f2e;
  --bg-hover: #1c2333;
  --bg-active: #252d3d;
  --bg-sidebar: #0d1117;
  --bg-sidebar-hover: #161b22;
  --bg-sidebar-active: #1a2332;
  --bg-topbar: #161b22;
  --bg-mobile-nav: #161b22;

  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-tertiary: #6e7681;
  --text-inverse: #0d1117;
  --text-link: #4ade80;
  --text-sidebar: #8b949e;
  --text-sidebar-active: #4ade80;

  --border: #21262d;
  --border-hover: #30363d;
  --border-active: #4ade80;
  --border-light: #21262d;

  --accent-green: #22c55e;
  --accent-green-hover: #16a34a;
  --accent-green-light: #052e16;
  --accent-blue: #3b82f6;
  --accent-blue-hover: #2563eb;
  --accent-blue-light: #0c1929;
  --accent-purple: #a78bfa;
  --accent-purple-light: #1a0a2e;
  --accent-amber: #fbbf24;
  --accent-amber-light: #2a1f00;
  --accent-red: #ef4444;
  --accent-red-hover: #dc2626;
  --accent-red-light: #2a0a0a;
  --accent-pink: #f472b6;
  --accent-pink-light: #2a0a1a;
  --accent-cyan: #22d3ee;
  --accent-cyan-light: #0a1a2a;
  --accent-gray: #94a3b8;

  --accent-gold: #fbbf24;
  --accent-gold-hover: #f59e0b;
  --accent-gold-light: #2a1f00;
  --accent-gold-lighter: #1a1400;

  --green-bg: #052e16;
  --green-text: #4ade80;
  --blue-bg: #0c1929;
  --blue-text: #60a5fa;
  --amber-bg: #2a1f00;
  --amber-text: #fbbf24;
  --red-bg: #2a0a0a;
  --red-text: #fca5a5;
  --purple-bg: #1a0a2e;
  --purple-text: #c4b5fd;
  --pink-bg: #2a0a1a;
  --pink-text: #f9a8d4;
  --cyan-bg: #0a1a2a;
  --cyan-text: #67e8f9;
  --gray-bg: #161b22;
  --gray-text: #94a3b8;
  --gold-bg: #2a1f00;
  --gold-text: #fbbf24;

  --shadow-xs: 0 1px 2px rgba(0,0,0,.2);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 8px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.5);
  --shadow-xl: 0 20px 48px rgba(0,0,0,.6);
  --shadow-card: 0 1px 3px rgba(0,0,0,.2);
  --shadow-card-hover: 0 8px 24px rgba(0,0,0,.4);
  --shadow-sidebar: 1px 0 8px rgba(0,0,0,.3);
  --shadow-topbar: 0 1px 3px rgba(0,0,0,.3);
  --shadow-btn: 0 1px 2px rgba(0,0,0,.3);
  --shadow-btn-hover: 0 4px 12px rgba(22,163,74,.4);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; scroll-behavior: smooth; }
html.dark-mode { color-scheme: dark; }
html.dark-mode body { background: var(--bg); color: var(--text-primary); }
body { font-family: var(--font-sans); font-size: .875rem; line-height: 1.5715; color: var(--text-primary); background: var(--bg); min-height: 100vh; overflow-x: hidden; }
a { color: var(--text-link); text-decoration: none; transition: var(--transition); }
a:hover { text-decoration: underline; }
img, video, iframe, embed, object { max-width: 100%; height: auto; display: block; }
svg { display: block; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
::selection { background: var(--accent-green-light); color: var(--accent-green); }

/* ── Typography ── */
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; color: var(--text-primary); }
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 1.25rem; letter-spacing: -.02em; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
.text-sm { font-size: .8125rem; }
.text-xs { font-size: .75rem; }
.text-2xs { font-size: .6875rem; }
.text-muted { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.leading-tight { line-height: 1.25; }
.leading-normal { line-height: 1.5; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.break-words { word-break: break-word; }

/* ── Layout ── */
.wrapper { display: flex; min-height: 100vh; max-width: 100vw; overflow-x: hidden; }
.page-wrapper { margin-left: var(--sidebar-w); flex: 1; min-width: 0; max-width: 100vw; display: flex; flex-direction: column; transition: margin-left .3s var(--ease-out); }

/* ── Sidebar ── */
.sidebar {
  position: fixed; top: 0; left: 0; width: var(--sidebar-w); height: 100vh;
  background: linear-gradient(180deg, #0f172a 0%, #0b1120 40%, #080e1a 100%);
  z-index: var(--z-sidebar); display: flex; flex-direction: column;
  transition: width .3s var(--ease-out), transform .3s var(--ease-out);
  overflow: hidden; border-right: 1px solid #1e293b;
  box-shadow: 8px 0 32px rgba(0,0,0,.15), inset -1px 0 0 rgba(255,255,255,.03);
  will-change: transform;
}
.sidebar::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 400px 200px at 50% 0%, rgba(5,150,105,.06) 0%, transparent 70%),
              radial-gradient(ellipse 300px 300px at 80% 100%, rgba(5,150,105,.04) 0%, transparent 70%);
  pointer-events: none;
}
.sidebar-brand {
  position: relative; padding: 1rem 1rem .75rem;
  display: flex; align-items: center; gap: .75rem;
  border-bottom: 1px solid rgba(255,255,255,.06); flex-shrink: 0;
}
.sidebar-brand .logo {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, #059669, #34d399, #6ee7b7);
  display: grid; place-items: center; color: #fff; font-size: 1.0625rem;
  flex-shrink: 0; box-shadow: 0 3px 10px rgba(5,150,105,.35);
  position: relative; overflow: hidden;
}
.sidebar-brand .logo::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.25) 0%, transparent 50%);
  pointer-events: none;
}
.sidebar-brand .brand-text { font-size: .875rem; font-weight: 700; color: #f1f5f9; line-height: 1.2; white-space: nowrap; overflow: hidden; }
.sidebar-brand .brand-text small { display: block; font-size: .625rem; font-weight: 500; color: #64748b; letter-spacing: .5px; text-transform: uppercase; }
.sidebar-search { padding: .75rem 1rem; flex-shrink: 0; position: relative; }
.sidebar-search .search-wrap { position: relative; }
.sidebar-search .search-wrap i { position: absolute; left: .625rem; top: 50%; transform: translateY(-50%); color: #475569; font-size: .75rem; pointer-events: none; transition: var(--transition); }
.sidebar-search .search-wrap input {
  width: 100%; padding: .5rem .75rem .5rem 1.75rem;
  border: 1.5px solid rgba(255,255,255,.08); border-radius: 10px;
  background: rgba(255,255,255,.04); color: #e2e8f0;
  font-size: .8125rem; outline: none; transition: all .2s;
}
.sidebar-search .search-wrap input:focus { border-color: rgba(74,222,128,.4); background: rgba(255,255,255,.06); box-shadow: 0 0 0 3px rgba(74,222,128,.08); }
.sidebar-search .search-wrap input::placeholder { color: #475569; }
.search-results { position: absolute; top: 100%; left: 0; right: 0; background: #1a2332; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.4); z-index: calc(var(--z-sidebar) + 1); max-height: 320px; overflow-y: auto; display: none; margin-top: 4px; }
.search-results.show { display: block; }
.search-results .result-item { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem; cursor: pointer; transition: var(--transition); border-bottom: 1px solid rgba(255,255,255,.05); }
.search-results .result-item:last-child { border-bottom: none; }
.search-results .result-item:hover { background: rgba(255,255,255,.04); }
.search-results .result-item .name { font-weight: 500; font-size: .8125rem; color: #e2e8f0; }
.search-results .result-item .detail { font-size: .6875rem; color: #64748b; }

/* Sidebar Navigation */
.sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: .375rem .625rem; position: relative; }
.sidebar-scroll::-webkit-scrollbar { width: 3px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: #334155; border-radius: 100px; }
.sidebar-nav .nav-label {
  font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: #334155; padding: .75rem .75rem .375rem;
  white-space: nowrap; overflow: hidden; position: relative;
  display: flex; align-items: center; gap: .5rem;
}
.sidebar-nav .nav-label::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), transparent);
}
.sidebar-nav .nav-link {
  display: flex; align-items: center; gap: .625rem;
  padding: .4375rem .75rem; border-radius: 10px;
  color: #64748b; font-size: .8125rem; text-decoration: none;
  transition: all .15s; cursor: pointer; position: relative;
  white-space: nowrap; overflow: hidden;
}
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.04); color: #cbd5e1; text-decoration: none; }
.sidebar-nav .nav-link.active {
  background: linear-gradient(135deg, rgba(5,150,105,.12) 0%, rgba(5,150,105,.04) 100%);
  color: #4ade80; font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.sidebar-nav .nav-link.active::before {
  content: ''; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 4px 4px 0;
  background: linear-gradient(180deg, #4ade80, #059669);
  box-shadow: 0 0 8px rgba(74,222,128,.4);
}
.sidebar-nav .nav-link i { width: 20px; text-align: center; font-size: .875rem; flex-shrink: 0; }
.sidebar-nav .nav-link .nav-badge {
  margin-left: auto; font-size: .625rem; padding: .125rem .375rem;
  border-radius: var(--radius-full); background: #dc2626; color: #fff;
  font-weight: 600; flex-shrink: 0; display: inline-block;
  box-shadow: 0 1px 4px rgba(220,38,38,.3);
}
.sidebar-nav .nav-item-group { display: flex; align-items: center; gap: 0; }
.sidebar-nav .nav-item-group .nav-link { flex: 1; }
.sidebar-nav .nav-add-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: none;
  color: #475569; cursor: pointer; border-radius: 8px;
  transition: all .15s; flex-shrink: 0; font-size: .75rem;
  opacity: 0; margin-right: .25rem;
}
.sidebar-nav .nav-item-group:hover .nav-add-btn { opacity: 1; }
.sidebar-nav .nav-add-btn:hover { background: rgba(255,255,255,.06); color: #4ade80; }
.sidebar-collapsed .sidebar-nav .nav-item-group .nav-add-btn { display: none; }

/* Sidebar Footer / User */
.sidebar-footer {
  padding: .625rem 1rem; border-top: 1px solid rgba(255,255,255,.06);
  display: flex; align-items: center; gap: .625rem; flex-shrink: 0;
  position: relative;
}
.sidebar-footer::before {
  content: ''; position: absolute; top: 0; left: 1rem; right: 1rem;
  height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
}
.sidebar-footer .user-avatar {
  width: 32px; height: 32px; border-radius: 10px;
  display: grid; place-items: center; color: #fff;
  font-size: .75rem; font-weight: 700; flex-shrink: 0;
  background: linear-gradient(135deg, #059669, #34d399);
  box-shadow: 0 2px 6px rgba(5,150,105,.25);
}
.sidebar-footer .user-info { flex: 1; min-width: 0; }
.sidebar-footer .user-info .name { font-size: .8125rem; font-weight: 600; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-footer .user-info .role { font-size: .6875rem; color: #475569; text-transform: capitalize; }
.sidebar-footer .logout-link {
  width: 32px; height: 32px; border-radius: 8px;
  display: grid; place-items: center; color: #475569;
  transition: all .15s; border: none; background: none;
  cursor: pointer; font-size: .875rem; text-decoration: none !important; flex-shrink: 0;
}
.sidebar-footer .logout-link:hover { background: rgba(220,38,38,.12); color: #f87171; }

/* Collapsed Sidebar */
.sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); background: linear-gradient(180deg, #0f172a 0%, #0b1120 100%); }
.sidebar-collapsed .page-wrapper { margin-left: var(--sidebar-w-collapsed); }
.sidebar-collapsed .sidebar-brand .brand-text,
.sidebar-collapsed .sidebar-search,
.sidebar-collapsed .sidebar-nav .nav-label,
.sidebar-collapsed .sidebar-nav .nav-link .nav-text,
.sidebar-collapsed .sidebar-nav .nav-link .nav-badge,
.sidebar-collapsed .sidebar-footer .user-info,
.sidebar-collapsed .sidebar-footer .logout-link span,
.sidebar-collapsed .sidebar-nav .nav-link.active::before { display: none; }
.sidebar-collapsed .sidebar-footer { justify-content: center; padding: .75rem .5rem; }
.sidebar-collapsed .sidebar-nav .nav-link { justify-content: center; padding: .5rem; }
.sidebar-collapsed .sidebar-nav .nav-link i { width: auto; font-size: 1.125rem; }
.sidebar-collapsed .sidebar-brand { justify-content: center; padding: 1rem .5rem; }
.sidebar-collapsed .sidebar-brand .logo { width: 38px; height: 38px; }
.sidebar-collapsed .sidebar-nav .nav-link.active { background: transparent; }
.sidebar-collapsed .sidebar-nav .nav-link.active i { color: var(--accent-green); }

.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: calc(var(--z-sidebar) - 1); display: none; }
.sidebar-overlay.open { display: block; }

/* ── Topbar ── */
.topbar {
  height: var(--topbar-h); padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg-topbar);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: var(--z-topbar); gap: .5rem;
}

.topbar-left { display: flex; align-items: center; gap: .5rem; min-width: 0; flex: 1; }

.topbar-title-wrap { min-width: 0; flex: 1; }

.topbar-title {
  font-size: 1.125rem; font-weight: 800;
  letter-spacing: -.025em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-primary); margin: 0;
  display: flex; align-items: center; gap: .5rem;
}
.topbar-title .tt-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  flex-shrink: 0; font-size: .8125rem;
}

.topbar-breadcrumb { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--text-tertiary); }
.topbar-breadcrumb a { color: var(--text-tertiary); text-decoration: none; }
.topbar-breadcrumb a:hover { color: var(--text-primary); }
.topbar-breadcrumb .sep { color: var(--border); font-size: .75rem; }

.topbar-right { display: flex; align-items: center; gap: .125rem; flex-shrink: 0; }

/* Topbar button base — rounded, clean, with subtle hover lift */
.topbar-btn,
.sidebar-toggle {
  width: 36px; height: 36px; border: none; background: transparent;
  color: var(--text-secondary); display: grid; place-items: center;
  cursor: pointer; transition: all .2s var(--ease-spring);
  font-size: .9375rem; position: relative;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}

.topbar-btn:hover,
.sidebar-toggle:hover { background: var(--bg-hover); color: var(--text-primary); transform: translateY(-1px); }

.topbar-btn:active,
.sidebar-toggle:active { transform: scale(.92) translateY(0); }

/* Theme toggle — pill shape, spring animation */
.theme-toggle { border-radius: var(--radius-full); overflow: hidden; transition: all .25s var(--ease-spring); }
.theme-toggle:hover { background: var(--bg-hover); color: var(--accent-gold); box-shadow: 0 0 16px rgba(217,119,6,.15); transform: rotate(12deg) scale(1.1) translateY(-1px); }
.theme-toggle:active { transform: rotate(0deg) scale(.92); }
.theme-toggle i { transition: transform .3s var(--ease-spring); }
html.dark-mode .theme-toggle:hover { color: var(--accent-green); box-shadow: 0 0 16px rgba(5,150,105,.15); }

/* Date and clinic labels */
.topbar-date { font-size: .75rem; color: var(--text-tertiary); display: flex; align-items: center; gap: .375rem; white-space: nowrap; }
.topbar-clinic {
  display: flex; align-items: center; gap: .375rem;
  font-size: .75rem; color: var(--accent-green);
  padding: .1875rem .625rem;
  background: var(--accent-green-light); border-radius: 100px;
  font-weight: 600;
}
.topbar-clinic i { font-size: .6875rem; }

/* Checked-in badge in topbar */
.topbar-checkin {
  font-size: .6875rem; white-space: nowrap;
  border-radius: 100px; padding: .1875rem .625rem;
  font-weight: 600;
}

/* Mobile nav toggle (bottom) */
.mobile-toggle { display: none; }
.mobile-toggle:active { background: var(--bg-hover); }

.main-content { padding: 1.5rem; flex: 1; }

/* ── Flash / Alert Banner ── */
.flash-alert { display: flex; align-items: center; gap: .5rem; padding: .625rem 1rem; margin: 0 1.5rem 0; border-radius: var(--radius-md); background: var(--accent-green-light); color: var(--accent-green); font-size: .8125rem; border: 1px solid rgba(22,163,74,.15); }

/* ── Cards ── */
.card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); transition: var(--transition); }
.card:hover { box-shadow: var(--shadow-card-hover); }
.card-header { padding: .875rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-header-title { font-size: .8125rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; color: var(--text-primary); }
.card-body { padding: 1.25rem; }
.card-footer { padding: .75rem 1.25rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }
.card-header-tabs { display: flex; gap: .25rem; }
.card-header-tabs .tab { padding: .375rem .75rem; border-radius: var(--radius-sm); font-size: .8125rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition); border: none; background: none; white-space: nowrap; }
.card-header-tabs .tab:hover { background: var(--bg-hover); }
.card-header-tabs .tab.active { background: var(--bg-active); color: var(--text-primary); font-weight: 500; }
.card-grid { display: grid; gap: 1rem; }

/* ── Stats Cards ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .875rem; margin-bottom: 1.5rem; }
.stat-card { padding: 1.125rem 1.25rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-elevated); transition: var(--transition); cursor: default; }
.stat-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.stat-card .stat-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.stat-card .stat-icon-wrap, .stat-card .stat-icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 1.125rem; flex-shrink: 0; transition: var(--transition); }
.stat-card:hover .stat-icon-wrap, .stat-card:hover .stat-icon { transform: scale(1.05); }
.stat-card .stat-value { font-size: 1.625rem; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; color: var(--text-primary); }
.stat-card .stat-label { font-size: .75rem; color: var(--text-tertiary); font-weight: 500; margin-top: .125rem; text-transform: uppercase; letter-spacing: .03em; }
.stat-card .stat-change { font-size: .6875rem; font-weight: 600; margin-top: .5rem; display: flex; align-items: center; gap: .25rem; }

/* ── Tables ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-md); }
table { width: 100%; border-collapse: separate; border-spacing: 0; }
table th { padding: .625rem .875rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; background: var(--bg-subtle); position: sticky; top: 0; z-index: 1; }
table th:first-child { border-radius: var(--radius-md) 0 0 0; }
table th:last-child { border-radius: 0 var(--radius-md) 0 0; }
table td { padding: .75rem .875rem; font-size: .8125rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
table tr:last-child td { border-bottom: none; }
table tr { transition: var(--transition); }
table tr.clickable { cursor: pointer; }
table tr.clickable:hover { background: var(--bg-hover); }
table tr.clickable:active { background: var(--bg-active); }
table .cell-actions { display: flex; gap: .25rem; justify-content: flex-end; }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .375rem; padding: .5rem 1rem; border-radius: var(--radius-sm); font-size: .8125rem; font-weight: 500; line-height: 1.4; cursor: pointer; transition: var(--transition); border: 1px solid transparent; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-btn); user-select: none; }
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }
.btn-primary { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }
.btn-primary:hover { background: var(--accent-green-hover); border-color: var(--accent-green-hover); box-shadow: var(--shadow-btn-hover); }
.btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); }
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-hover); box-shadow: var(--shadow-md); }
.btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; box-shadow: none; }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-danger { background: var(--accent-red); color: #fff; border-color: var(--accent-red); }
.btn-danger:hover { background: var(--accent-red-hover); border-color: var(--accent-red-hover); box-shadow: 0 4px 12px rgba(220,38,38,.25); }
.btn-success { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }
.btn-success:hover { background: var(--accent-green-hover); border-color: var(--accent-green-hover); box-shadow: var(--shadow-btn-hover); }
.btn-gold { background: var(--accent-gold); color: #fff; border-color: var(--accent-gold); }
.btn-gold:hover { background: var(--accent-gold-hover); border-color: var(--accent-gold-hover); box-shadow: 0 4px 12px rgba(217,119,6,.25); }
.btn-outline-primary { background: transparent; color: var(--accent-green); border-color: var(--accent-green); box-shadow: none; }
.btn-outline-primary:hover { background: var(--accent-green); color: #fff; }
.btn-outline-danger { background: transparent; color: var(--accent-red); border-color: var(--accent-red); box-shadow: none; }
.btn-outline-danger:hover { background: var(--accent-red); color: #fff; }
.btn-outline { background: transparent; color: var(--text-tertiary); border-color: var(--border); box-shadow: none; }
.btn-outline:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--text-tertiary); }
.btn-sm { padding: .375rem .75rem; font-size: .75rem; }
.btn-lg { padding: .625rem 1.25rem; font-size: .875rem; border-radius: var(--radius-md); }
.btn-xl { padding: .75rem 1.5rem; font-size: .9375rem; border-radius: var(--radius-md); }
.btn-icon { width: 34px; height: 34px; padding: 0; display: grid; place-items: center; }
.btn-group { display: inline-flex; gap: .25rem; }
.btn .spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: spin .6s linear infinite; display: none; }
.btn.loading .spinner { display: inline-block; }
.btn.loading .btn-text { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Badges ── */
.badge { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: var(--radius-full); font-size: .6875rem; font-weight: 500; white-space: nowrap; line-height: 1.4; }
.badge-green { background: var(--green-bg); color: var(--green-text); }
.badge-blue { background: var(--blue-bg); color: var(--blue-text); }
.badge-amber { background: var(--amber-bg); color: var(--amber-text); }
.badge-red { background: var(--red-bg); color: var(--red-text); }
.badge-purple { background: var(--purple-bg); color: var(--purple-text); }
.badge-pink { background: var(--pink-bg); color: var(--pink-text); }
.badge-cyan { background: var(--cyan-bg); color: var(--cyan-text); }
.badge-gray { background: var(--gray-bg); color: var(--gray-text); }
.badge-gold { background: var(--gold-bg); color: var(--gold-text); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.badge-sm { font-size: .625rem; padding: .0625rem .375rem; }

.badge-status { display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem; border-radius: var(--radius-full); font-size: .6875rem; font-weight: 500; white-space: nowrap; line-height: 1.4; background: var(--gray-bg); color: var(--gray-text); }
.badge-status-cancellation_requested { background: var(--amber-bg); color: var(--amber-text); }
.badge-status-cancelled { background: var(--red-bg); color: var(--red-text); }
.badge-status-scheduled { background: var(--blue-bg); color: var(--blue-text); }
.badge-status-confirmed { background: var(--green-bg); color: var(--green-text); }
.badge-status-checked_in { background: var(--amber-bg); color: var(--amber-text); }
.badge-status-in_treatment { background: var(--purple-bg); color: var(--purple-text); }
.badge-status-completed { background: var(--green-bg); color: var(--green-text); }
.badge-status-no_show { background: var(--pink-bg); color: var(--pink-text); }
.badge-status-reschedule_requested { background: var(--amber-bg); color: var(--amber-text); }
.badge-status-draft { background: var(--gray-bg); color: var(--gray-text); }
.badge-status-sent { background: var(--amber-bg); color: var(--amber-text); }
.badge-status-paid { background: var(--green-bg); color: var(--green-text); }
.badge-status-overdue { background: var(--red-bg); color: var(--red-text); }

/* ── Forms ── */
.form-section { background: var(--bg-subtle); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1rem; }
.form-section-title { font-size: .8125rem; font-weight: 600; color: var(--text-primary); margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.form-group { margin-bottom: 1rem; }
.form-group:last-child { margin-bottom: 0; }
.form-label { display: block; font-size: .75rem; font-weight: 600; color: var(--text-secondary); margin-bottom: .375rem; letter-spacing: .01em; }
.form-label .required { color: var(--accent-red); margin-left: 1px; }
.form-label .optional { color: var(--text-tertiary); font-weight: 400; font-size: .6875rem; margin-left: .25rem; }

.form-input, .form-select, .form-textarea {
  width: 100%; padding: .625rem .875rem; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--text-primary); font-size: .875rem; line-height: 1.5;
  outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color: var(--accent-green); box-shadow: 0 0 0 3px rgba(22,163,74,.12);
  background: var(--bg-elevated);
}
.form-input::placeholder, .form-textarea::placeholder { color: var(--text-tertiary); }
.form-input:disabled, .form-select:disabled, .form-textarea:disabled { opacity: .5; background: var(--bg-subtle); cursor: not-allowed; }
.form-input.readonly, .form-input[readonly] { background: var(--bg-subtle); }
.form-input.is-error, .form-select.is-error, .form-textarea.is-error { border-color: var(--accent-red); }
.form-input.is-error:focus, .form-select.is-error:focus, .form-textarea.is-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
.form-input.is-success, .form-select.is-success, .form-textarea.is-success { border-color: var(--accent-green); }
.form-input.is-success:focus, .form-select.is-success:focus, .form-textarea.is-success:focus { box-shadow: 0 0 0 3px rgba(22,163,74,.1); }
.form-error { font-size: .6875rem; color: var(--accent-red); margin-top: .25rem; display: flex; align-items: center; gap: .25rem; }
.form-help { font-size: .6875rem; color: var(--text-tertiary); margin-top: .25rem; display: flex; align-items: center; gap: .25rem; }
.form-input-sm, .form-select-sm { padding: .375rem .625rem; font-size: .75rem; }
.form-textarea { resize: vertical; min-height: 88px; line-height: 1.6; }
.form-textarea-sm { min-height: 60px; padding: .5rem .75rem; font-size: .8125rem; }
.form-select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3e%3cpath fill='none' stroke='%239da4b0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 3l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 14px; padding-right: 2.5rem;
}
.input-icon-wrap { position: relative; }
.input-icon-wrap .input-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-tertiary); font-size: .875rem; pointer-events: none; transition: color .15s ease; }
.input-icon-wrap .form-input, .input-icon-wrap .form-select { padding-left: 2.25rem; }
.input-icon-wrap .form-input:focus ~ .input-icon, .input-icon-wrap .form-select:focus ~ .input-icon { color: var(--accent-green); }

.form-check { display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .25rem 0; }
.form-check input[type="checkbox"], .form-check input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.form-check .check-visual { position: relative; width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 4px; flex-shrink: 0; transition: all .15s ease; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); }
.form-check .check-visual svg { opacity: 0; width: 10px; height: 10px; transition: opacity .15s ease; }
.form-check input[type="checkbox"]:checked + .check-visual { background: var(--accent-green); border-color: var(--accent-green); }
.form-check input[type="checkbox"]:checked + .check-visual svg { opacity: 1; }
.form-check input[type="checkbox"]:focus-visible + .check-visual { box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.form-check .check-visual-radio { border-radius: 50%; }
.form-check .check-visual-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-green); opacity: 0; transition: opacity .15s ease; }
.form-check input[type="radio"]:checked + .check-visual-radio { border-color: var(--accent-green); }
.form-check input[type="radio"]:checked + .check-visual-radio::after { opacity: 1; }
.form-check-inline { display: inline-flex; margin-right: 1rem; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem 1rem; }
.form-actions { display: flex; gap: .5rem; margin-top: 1.25rem; align-items: center; flex-wrap: wrap; }
.form-actions .ml-auto { margin-left: auto; }

.form-switch { position: relative; display: inline-flex; align-items: center; gap: .625rem; cursor: pointer; padding: .25rem 0; }
.form-switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.form-switch .slider { width: 40px; height: 22px; background: var(--border); border-radius: 100px; transition: background .2s ease; position: relative; flex-shrink: 0; }
.form-switch .slider::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: #fff; top: 2px; left: 2px; transition: transform .2s ease; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.form-switch input:checked + .slider { background: var(--accent-green); }
.form-switch input:checked + .slider::before { transform: translateX(18px); }
.form-switch input:focus-visible + .slider { box-shadow: 0 0 0 3px rgba(22,163,74,.15); }
.form-switch .switch-label { font-size: .8125rem; color: var(--text-primary); cursor: pointer; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   Form Panel — inline sidebar form (replaces modals)
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.form-panel {
  display: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: calc(var(--topbar-h) + 1.5rem);
  align-self: start;
  transition: box-shadow .2s ease;
}
.form-panel.open { display: block; }
.form-panel:hover {
  box-shadow: var(--shadow-card-hover);
}
.form-panel-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .625rem;
}
.form-panel-header h3 {
  font-size: .875rem;
  font-weight: 600;
  margin: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.form-panel-close {
  width: 32px; height: 32px;
  border-radius: var(--radius-full);
  border: none;
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all .15s ease;
  font-size: .8125rem;
  flex-shrink: 0;
}
.form-panel-close:hover {
  background: var(--accent-red-light);
  color: var(--accent-red);
  transform: rotate(90deg);
}
.form-panel-body {
  padding: 1.25rem;
}
.form-panel-footer {
  padding: .75rem 1.25rem 1.125rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
}

/* ── Toast / Flash ── */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: var(--z-toast); display: flex; flex-direction: column; gap: .5rem; pointer-events: none; }
.toast { padding: .75rem 1rem; border-radius: var(--radius-md); background: var(--bg-elevated); border: 1px solid var(--border); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .5rem; font-size: .8125rem; animation: toastSlideIn .3s var(--ease-out); pointer-events: auto; min-width: 300px; max-width: 420px; }
.toast-success { border-left: 3px solid var(--accent-green); }
.toast-error { border-left: 3px solid var(--accent-red); }
.toast-info { border-left: 3px solid var(--accent-blue); }
@keyframes toastSlideIn { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }

/* ── Timeline ── */
.timeline { position: relative; padding-left: 1.5rem; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 4px; bottom: 4px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: 1.125rem; padding-left: 1rem; border-left: 2px solid transparent; margin-left: -1.5rem; padding-left: 2rem; }
.timeline-item::before { content: ''; position: absolute; left: -5px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--accent-green); box-shadow: 0 0 0 2px var(--bg-elevated); }
.timeline-item:last-child { padding-bottom: 0; }

/* ── Avatar ── */
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .8125rem; font-weight: 600; flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 28px; height: 28px; font-size: .625rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
.avatar-xl { width: 72px; height: 72px; font-size: 1.5rem; }

/* ── Appointment Card ── */
.appointment-card { padding: .875rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: .5rem; transition: var(--transition); border-left: 3px solid transparent; background: var(--bg-elevated); }
.appointment-card:hover { box-shadow: var(--shadow-card-hover); }
.appointment-card .appt-time { font-size: .8125rem; font-weight: 600; display: flex; align-items: center; gap: .375rem; }
.appointment-card .appt-patient { font-weight: 600; }
.appointment-card .appt-service { font-size: .75rem; color: var(--text-secondary); }
.appointment-card .appt-actions { display: flex; gap: .25rem; align-items: center; }
.appointment-card .appt-status { flex-shrink: 0; }

/* ── Empty State ── */
.empty-state { text-align: center; padding: 3rem 1.5rem; color: var(--text-tertiary); }
.empty-state > i { font-size: 2.5rem; margin-bottom: .75rem; display: block; opacity: .3; }
.empty-state img { margin: 0 auto; opacity: .3; }
.empty-state p { font-size: .875rem; margin: 0; color: var(--text-tertiary); }

/* ── Keyboard Shortcut Hint ── */
kbd { display: inline-flex; align-items: center; justify-content: center; padding: .125rem .375rem; font-family: var(--font-mono); font-size: .6875rem; background: var(--bg-hover); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); min-width: 22px; box-shadow: 0 1px 0 var(--border); }

/* ── Loading Skeleton ── */
.skeleton { background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border-light) 50%, var(--bg-hover) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 14px; margin-bottom: .5rem; }
.skeleton-text-sm { height: 10px; width: 60%; }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; }
.skeleton-card { height: 120px; border-radius: var(--radius-md); }
.skeleton-table-row { height: 48px; margin-bottom: 4px; border-radius: var(--radius-sm); }
.skeleton-button { width: 80px; height: 32px; border-radius: var(--radius-md); }

/* ── Progress Bar ── */
.progress-bar { height: 6px; border-radius: 100px; background: var(--bg-active); overflow: hidden; }
.progress-bar .progress-fill { height: 100%; border-radius: 100px; transition: width 1s ease; background: var(--accent-green); }

/* ── Loading Spinner ── */
.spinner { width: 20px; height: 20px; border: 2.5px solid var(--border); border-top-color: var(--accent-green); border-radius: 50%; animation: spin .6s linear infinite; display: inline-block; }
.spinner-sm { width: 14px; height: 14px; border-width: 2px; }
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }
.spinner-white { border-color: rgba(255,255,255,.2); border-top-color: #fff; }

/* ── Patient Header ── */
.patient-header { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.patient-header .patient-info { flex: 1; min-width: 0; }
.patient-header .patient-info h2 { font-weight: 700; font-size: 1.25rem; margin-bottom: .25rem; }
.patient-header .patient-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .8125rem; color: var(--text-secondary); }
.patient-header .patient-consent { display: flex; gap: .375rem; flex-wrap: wrap; }
.patient-actions { display: flex; gap: .375rem; flex-wrap: wrap; }

/* ── Login Page ── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f8fafb 0%, #d1fae5 50%, #f8fafb 100%); padding: 1.5rem; position: relative; }
.login-page::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--accent-green), #34d399, var(--accent-gold)); }
.login-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem 2.25rem; width: min(420px, 100%); box-shadow: var(--shadow-xl); }
.login-logo { width: 56px; height: 56px; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--accent-green), #34d399); display: grid; place-items: center; margin: 0 auto 1.25rem; font-size: 1.5rem; color: #fff; box-shadow: 0 4px 16px rgba(5,150,105,.3); }
.login-card h2 { text-align: center; font-weight: 700; margin-bottom: .25rem; font-size: 1.375rem; }
.login-card .login-subtitle { text-align: center; color: var(--text-tertiary); font-size: .875rem; margin-bottom: 1.75rem; }
.login-logo-img { max-height: 56px; display: block; margin: 0 auto 1.25rem; }
.login-logo-purple { background: linear-gradient(135deg, var(--accent-purple, #a855f7), #7c3aed) !important; box-shadow: 0 4px 16px rgba(124,58,237,.3) !important; }
.login-logo-amber { background: linear-gradient(135deg, var(--accent-amber, #f59e0b), #f59e0b) !important; box-shadow: 0 4px 16px rgba(245,158,11,.3) !important; }
.login-logo-blue { background: linear-gradient(135deg, var(--accent-blue, #3b82f6), #3b82f6) !important; box-shadow: 0 4px 16px rgba(59,130,246,.3) !important; }
.login-footer { font-size: .8125rem; color: var(--text-tertiary); text-align: center; margin-top: 1.25rem; }
.toast-static { position: static; animation: none; }
.login-logo--success { background: linear-gradient(135deg, #10b981, #059669) !important; box-shadow: 0 4px 16px rgba(5,150,105,.3) !important; }
.login-logo--danger { background: linear-gradient(135deg, #ef4444, #dc2626) !important; box-shadow: 0 4px 16px rgba(220,38,38,.3) !important; }
.login-logo--warning { background: linear-gradient(135deg, #f59e0b, #d97706) !important; box-shadow: 0 4px 16px rgba(245,158,11,.3) !important; }
.login-logo--info { background: linear-gradient(135deg, #0ea5e9, #6366f1) !important; box-shadow: 0 4px 16px rgba(14,165,233,.3) !important; }
.action-title { font-weight: 700; margin-bottom: .5rem; }
.action-pending-info { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--accent-amber); font-size: .875rem; margin-bottom: .75rem; }
.action-next-steps { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: .75rem; text-align: left; font-size: .8125rem; }
.action-next-steps ul { margin: 0; padding-left: 1.25rem; color: var(--text-tertiary); }
.cancel-reason-label { font-size: .75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
.cancel-reason-option { display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem; cursor: pointer; font-size: .875rem; }
.cancel-reason-radio { width: 18px; height: 18px; accent-color: var(--accent-green); cursor: pointer; }
.cancel-info-box { background: var(--amber-bg); border-radius: var(--radius-sm); padding: .625rem .875rem; font-size: .8125rem; display: flex; align-items: flex-start; gap: .5rem; margin-bottom: .75rem; text-align: left; }
.checked-in-icon { margin-top: 1.5rem; color: #10b981; font-size: 3rem; }
.patient-link-details { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: .75rem; display: inline-block; width: 100%; max-width: 320px; }
.patient-link-day { font-size: 1.25rem; font-weight: 700; }
.text-link { color: var(--primary, #059669); cursor: pointer; text-decoration: none; }
.text-link:hover { text-decoration: underline; }
.form-checkbox { width: 18px; height: 18px; accent-color: var(--primary, #059669); cursor: pointer; }
.form-checkbox-label { margin: 0; cursor: pointer; }

/* ── Portal / Guest Pages ── */
.guest-page { min-height: 100vh; display: grid; place-items: center; padding: 1.5rem; background: linear-gradient(135deg, #f8fafb 0%, #d1fae5 50%, #f8fafb 100%); }
.guest-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2rem; width: min(500px, 100%); box-shadow: var(--shadow-xl); }
.guest-card h3 { font-weight: 700; text-align: center; margin-bottom: .25rem; }
.guest-card .guest-subtitle { text-align: center; color: var(--text-tertiary); font-size: .8125rem; margin-bottom: 1.5rem; }

/* ── Pre-Check-in / Digital Intake ── */
.pc-progress { display: flex; align-items: center; justify-content: center; gap: .25rem; }
.pc-step { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.pc-step-number { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .8125rem; font-weight: 700; background: var(--bg-secondary); color: var(--text-tertiary); border: 2px solid var(--border); transition: all .2s; }
.pc-step--active .pc-step-number { background: var(--accent-green); color: #fff; border-color: var(--accent-green); }
.pc-step-label { font-size: .6875rem; color: var(--text-tertiary); font-weight: 500; }
.pc-step--active .pc-step-label { color: var(--text-primary); }
.pc-step-connector { width: 32px; height: 2px; background: var(--border); margin-top: -20px; }
.pc-step-connector--done { background: var(--accent-green); }
.pc-complete-info { background: var(--bg-secondary); border-radius: var(--radius-sm); padding: .75rem 1rem; display: inline-block; width: 100%; max-width: 320px; }
.pc-complete-row { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-size: .875rem; }
.pc-complete-checkmark { margin-top: 1rem; color: #10b981; font-size: 3rem; }
.pc-checkbox-group { display: flex; flex-direction: column; gap: .375rem; }
.pc-checkbox-label { display: flex; align-items: center; gap: .5rem; font-size: .875rem; cursor: pointer; padding: .25rem 0; }
.pc-checkbox-label input[type="checkbox"] { flex-shrink: 0; }

.pc-body-map { text-align: center; }
.pc-body-svg { max-width: 200px; cursor: pointer; display: inline-block; }
.pc-body-svg .body-part { transition: fill .15s ease; cursor: pointer; }
.pc-body-svg .body-part:hover { fill: #93c5fd; stroke: #2563eb; stroke-width: 2; }
.pc-body-svg .body-part[fill="#ef4444"]:hover { fill: #ef4444; }
.pc-consent-section { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .75rem 1rem; margin-bottom: .75rem; text-align: left; }
.pc-consent-header { font-weight: 600; font-size: .9375rem; margin-bottom: .5rem; }
.pc-consent-text { font-size: .8125rem; color: var(--text-tertiary); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: .625rem .75rem; max-height: 160px; overflow-y: auto; margin-bottom: .625rem; line-height: 1.5; white-space: pre-line; }
.pc-consent-checkbox { display: flex; align-items: flex-start; gap: .5rem; font-size: .875rem; cursor: pointer; }
.pc-consent-checkbox input[type="checkbox"] { margin-top: 2px; flex-shrink: 0; }
.pc-signature-pad { background: #1e1e2e; border: 2px dashed var(--border); border-radius: var(--radius-sm); padding: 1rem; }
.pc-signature-canvas { display: block; width: 100%; height: 100px; border-radius: var(--radius-xs); cursor: crosshair; touch-action: none; }
.pc-signature-actions { display: flex; gap: .5rem; margin-top: .5rem; justify-content: center; }
.pc-signature-input { font-family: 'Georgia', serif; font-size: 1.25rem; text-align: center; border: none; background: transparent; width: 100%; outline: none; }
.pc-signature-input:focus { border: none; box-shadow: none; background: transparent; }
.pc-signature-typed { margin-top: .5rem; }
.pc-detail-timeline { display: flex; flex-direction: column; gap: .5rem; }
.pc-detail-step { display: flex; align-items: center; gap: .5rem; }
.pc-detail-step-icon { width: 20px; text-align: center; font-size: .875rem; flex-shrink: 0; }
.pc-detail-step-info { display: flex; flex-direction: column; }
.pc-detail-step-label { font-size: .8125rem; font-weight: 500; }
.pc-detail-step-time { font-size: .6875rem; }
.pc-detail-step--done .pc-detail-step-label { color: var(--accent-green); }

/* ── Bio Data Resume ── */
.resume-page { min-height: 100vh; padding: 1.5rem; background: linear-gradient(135deg, #f8fafb 0%, #d1fae5 50%, #f8fafb 100%); }
.resume-card { max-width: 900px; margin: 0 auto; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.resume-header { padding: 2rem 2rem 4rem; position: relative; background: linear-gradient(135deg, var(--accent-green), #34d399); color: #fff; }
.resume-header::after { content: ''; position: absolute; top: 0; right: 0; width: 300px; height: 300px; background: rgba(255,255,255,.06); border-radius: 50%; transform: translate(30%, -30%); }
.resume-stats { margin: -2rem 2rem 0; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .75rem; }
.resume-body { padding: 1.5rem 2rem 2rem; }

/* ── Portal Login ── */
.portal-login { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f8fafb 0%, #d1fae5 50%, #f8fafb 100%); padding: 1.5rem; }
.portal-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem 2.25rem; width: min(400px, 100%); box-shadow: var(--shadow-xl); }
.portal-card h2 { text-align: center; margin: 0 0 .25rem; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.portal-card .subtitle { text-align: center; color: var(--text-tertiary); font-size: .875rem; margin-bottom: 1.75rem; }
.portal-footer { text-align: center; margin-top: 1.25rem; font-size: .8125rem; color: var(--text-tertiary); }
.error-msg { background: #fef2f2; color: var(--accent-red); padding: .625rem .875rem; border-radius: var(--radius-sm); font-size: .8125rem; margin-bottom: 1rem; text-align: center; }

/* ── Portal Dashboard ── */
.pd-wrap { max-width: 960px; margin: 0 auto; padding: 1.5rem; }
.pd-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pd-header h1 { font-size: 1.25rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
.pd-logout { color: var(--text-tertiary); font-size: .8125rem; text-decoration: none; }
.pd-logout:hover { color: var(--accent-red); }
.pd-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 1rem; overflow: hidden; }
.pd-card-header { display: flex; align-items: center; gap: .5rem; padding: .875rem 1.125rem; border-bottom: 1px solid var(--border-light); }
.pd-card-header h3 { margin: 0; font-size: .9375rem; font-weight: 600; flex: 1; }
.pd-card-body { padding: .875rem 1.125rem; }
.pd-card-body.p-0 { padding: 0; }
.pd-empty { text-align: center; padding: 2rem; color: var(--text-tertiary); font-size: .875rem; }
.pd-empty i { font-size: 1.5rem; display: block; margin-bottom: .5rem; opacity: .5; }
.pd-appt { display: flex; gap: 1rem; padding: .75rem 1.125rem; border-bottom: 1px solid var(--border-light); align-items: center; }
.pd-appt:last-child { border-bottom: none; }
.pd-appt-date { text-align: center; min-width: 48px; }
.pd-appt-date .day { font-size: 1.125rem; font-weight: 700; display: block; line-height: 1; }
.pd-appt-date .mon { font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; }
.pd-appt-info { flex: 1; }
.pd-appt-info .service { font-weight: 600; font-size: .875rem; }
.pd-appt-info .meta { font-size: .75rem; color: var(--text-secondary); margin-top: .125rem; }
.pd-prescription { display: flex; gap: .75rem; padding: .75rem 1.125rem; border-bottom: 1px solid var(--border-light); align-items: center; }
.pd-prescription:last-child { border-bottom: none; }
.pd-presc-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent-green-light); display: flex; align-items: center; justify-content: center; color: var(--accent-green); flex-shrink: 0; }
.pd-presc-info { flex: 1; }
.pd-presc-info .pos { font-weight: 600; font-size: .875rem; }
.pd-presc-info .meta { font-size: .75rem; color: var(--text-secondary); }
.pd-presc-stats { font-size: .75rem; color: var(--text-secondary); white-space: nowrap; }

/* ── Portal Resume / Profile ── */
.pd-profile-header { display: flex; align-items: center; gap: 1.25rem; padding: 1.5rem; flex-wrap: wrap; }
.pd-avatar-wrap { flex-shrink: 0; }
.pd-avatar { width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 3px solid var(--border); background: var(--bg-subtle); }
.pd-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pd-avatar-initials { display: grid; place-items: center; font-size: 1.75rem; font-weight: 800; color: var(--text-secondary); }
.pd-header-info { flex: 1; min-width: 0; }
.pd-header-info h2 { margin: 0 0 .125rem; font-size: 1.375rem; font-weight: 700; color: var(--text-primary); }
.pd-header-meta { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; font-size: .8125rem; color: var(--text-secondary); }
.pd-header-meta span { display: inline-flex; align-items: center; gap: .375rem; }
.pd-header-meta i { width: 15px; text-align: center; }
.pd-badges { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1.125rem 1rem; }
.pd-badge { display: inline-flex; align-items: center; gap: .4375rem; padding: .4375rem .8125rem; border-radius: 8px; font-size: .8125rem; font-weight: 500; }
.pd-badge-primary { background: var(--blue-bg); color: var(--blue-text); }
.pd-badge-secondary { background: var(--bg-subtle); color: var(--text-secondary); }
.pd-badge-danger { background: var(--red-bg); color: var(--red-text); }
.pd-clinic { font-size: .8125rem; color: var(--text-secondary); padding: 0 1.125rem 1rem; display: flex; align-items: center; gap: .5rem; }
.pd-clinic img { height: 20px; }
.pd-notes { display: flex; flex-direction: column; }
.pd-note { padding: 1rem 1.125rem; border-bottom: 1px solid var(--border-light); }
.pd-note:last-child { border-bottom: none; }
.pd-note-hdr { display: flex; align-items: center; gap: .625rem; margin-bottom: .375rem; flex-wrap: wrap; }
.pd-note-hdr strong { font-size: .8125rem; display: inline-flex; align-items: center; gap: .3125rem; }
.pd-note-hdr strong i { color: var(--accent-green); }
.pd-note-type { font-size: .75rem; padding: .125rem .5rem; border-radius: 4px; background: var(--bg-subtle); color: var(--text-secondary); font-weight: 500; }
.pd-note-date { font-size: .75rem; color: var(--text-tertiary); margin-left: auto; }
.pd-note p { font-size: .8125rem; color: var(--text-primary); margin: .25rem 0; line-height: 1.6; }
.pd-pain { font-size: .75rem; display: inline-flex; align-items: center; gap: .3125rem; padding: .1875rem .5625rem; border-radius: 4px; background: var(--amber-bg); color: var(--amber-text); font-weight: 500; }
.pd-prescriptions { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 1.125rem; }
.pd-footer-info { text-align: center; padding: 1rem; font-size: .75rem; color: var(--text-tertiary); display: flex; align-items: center; justify-content: center; gap: .4375rem; }

/* ── Portal Booking ── */
.pb-wrap { max-width: 720px; margin: 0 auto; padding: 1.5rem; }
.pb-header { margin-bottom: 1.5rem; }
.pb-header h1 { font-size: 1.25rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
.pb-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 1rem; overflow: hidden; }
.pb-card-header { padding: .875rem 1.125rem; border-bottom: 1px solid var(--border-light); }
.pb-card-header h3 { margin: 0; font-size: .9375rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.pb-card-body { padding: 1rem 1.125rem; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.back-link { text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.back-link:hover { text-decoration: underline; }

/* ── Portal Print Styles ── */
@media print {
  .pd-wrap { max-width: 100% !important; padding: 0 !important; }
  .pd-header, .pd-print-hide { display: none !important; }
  .pd-card { border: 1.5px solid #94a3b8 !important; border-radius: 6px !important; box-shadow: none !important; break-inside: avoid; }
  .pd-card-header { background: #e2e8f0 !important; padding: .5rem .75rem !important; }
  .pd-card-header h3 { font-size: .9375rem !important; }
  .rd-table { font-size: 9pt !important; }
  .rd-table th { background: #e2e8f0 !important; padding: .375rem .5rem !important; }
  .rd-table td { padding: .3125rem .5rem !important; }
  .pd-note { border: 1px solid #cbd5e1 !important; margin-bottom: .5rem !important; border-radius: 4px !important; }
  .pd-note-hdr strong { font-size: .8125rem !important; }
  .pd-note p { font-size: .8125rem !important; }
  .pd-footer-info { font-size: .6875rem !important; padding: .5rem .75rem !important; border-top: 1px solid #94a3b8 !important; text-align: center !important; color: #64748b !important; }
}

/* ── Portal Responsive ── */
@media (max-width: 768px) {
  .pd-profile-header { flex-direction: column; align-items: center; text-align: center; padding: 1rem; }
  .pd-avatar, .pd-avatar-initials { width: 60px; height: 60px; font-size: 1.375rem; }
  .pd-header-info h2 { font-size: 1.25rem; }
  .pd-header-meta { justify-content: center; font-size: .8125rem; gap: .25rem .75rem; }
  .pd-badges { flex-direction: column; padding: 0 .75rem .75rem; }
  .pd-badge { width: 100%; justify-content: center; }
  .pd-notes { gap: 0; }
  .pd-note-hdr { flex-direction: column; align-items: flex-start; gap: .25rem; }
  .pd-note-date { margin-left: 0; }
}

/* ── Dropdown ── */
.dropdown { position: relative; display: inline-block; }
.dropdown-menu { position: absolute; top: 100%; right: 0; min-width: 200px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); padding: .375rem; display: none; margin-top: 4px; }
.dropdown-menu.open { display: block; }
.dropdown-menu .dropdown-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--radius-sm); font-size: .8125rem; color: var(--text-primary); cursor: pointer; transition: var(--transition); text-decoration: none; border: none; background: none; width: 100%; text-align: left; }
.dropdown-menu .dropdown-item:hover { background: var(--bg-hover); text-decoration: none; }
.dropdown-menu .dropdown-item i { width: 16px; color: var(--text-tertiary); flex-shrink: 0; }
.dropdown-divider { height: 1px; background: var(--border); margin: .25rem 0; }

/* ── Tooltip ── */
[data-tooltip] { position: relative; }
[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding: .25rem .5rem; background: var(--text-primary); color: var(--text-inverse); font-size: .6875rem; border-radius: var(--radius-sm); white-space: nowrap; opacity: 0; pointer-events: none; transition: var(--transition); margin-bottom: 4px; }
[data-tooltip]:hover::after { opacity: 1; }

/* ── Tabs ── */
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.tabs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs-scroll::-webkit-scrollbar { display: none; }
.tab-item { padding: .5rem 1rem; font-size: .8125rem; font-weight: 500; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; transition: var(--transition); white-space: nowrap; }
.tab-item:hover { color: var(--text-primary); }
.tab-item.active { color: var(--accent-green); border-bottom-color: var(--accent-green); }

/* ── Modal ── */
.modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal, 200); background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; padding: 1.5rem; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s ease; }
.modal-overlay[style*="display: flex"], .modal-overlay[style*="display:flex"] { opacity: 1; }
.modal { background: var(--bg-elevated); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 680px; max-height: 88vh; display: flex; flex-direction: column; animation: modalIn .3s cubic-bezier(.16,1,.3,1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(20px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1.5rem 1.5rem 0; gap: 1rem; }
.modal-header h3 { font-size: 1.0625rem; font-weight: 600; margin: 0; line-height: 1.35; }
.modal-close { background: none; border: none; font-size: 1.25rem; color: var(--text-tertiary); cursor: pointer; padding: 0; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius-sm); transition: var(--transition); flex-shrink: 0; margin-top: 2px; }
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; }
.modal-body > :last-child { margin-bottom: 0; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
@media (max-width: 640px) { .modal-overlay { padding: 0; align-items: flex-end; backdrop-filter: blur(2px); } .modal { border-radius: var(--radius-xl) var(--radius-xl) 0 0; max-height: 92vh; } }

/* ── Drawer (Slide-in Panel) ── */
.drawer-overlay { position: fixed; inset: 0; z-index: calc(var(--z-modal, 200) + 1); background: rgba(0,0,0,.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility .3s ease; }
.drawer-overlay.open { opacity: 1; visibility: visible; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: 480px; max-width: 100vw; background: var(--bg-elevated); box-shadow: var(--shadow-xl); z-index: calc(var(--z-modal, 200) + 2); display: flex; flex-direction: column; overflow: hidden; transform: translateX(100%); transition: transform .35s cubic-bezier(.16,1,.3,1); }
.drawer-overlay.open .drawer { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; gap: 1rem; flex-shrink: 0; border-bottom: 1px solid var(--border); }
.drawer-header h3 { font-size: 1.0625rem; font-weight: 600; margin: 0; line-height: 1.35; }
.drawer-body { padding: 1.5rem; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.drawer-body::-webkit-scrollbar { width: 4px; }
.drawer-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.drawer-body > :last-child { margin-bottom: 0; }
.drawer-footer { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); flex-shrink: 0; }

/* ── Channel Cards (Visual Radio) ── */
.channel-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .625rem; }
.channel-card { display: flex; align-items: center; gap: .75rem; padding: .875rem 1rem; border: 1.5px solid var(--border); border-radius: var(--radius-lg); cursor: pointer; transition: all .2s ease; position: relative; user-select: none; }
.channel-card:hover { border-color: var(--border-hover); background: var(--bg-subtle); }
.channel-card.active { border-color: var(--accent-green); background: var(--green-bg); }
.channel-card input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.channel-card-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; font-size: 17px; flex-shrink: 0; transition: transform .2s ease; }
.channel-card.active .channel-card-icon { transform: scale(1.08); }
.channel-card-info { flex: 1; min-width: 0; }
.channel-card-label { font-size: .8125rem; font-weight: 600; color: var(--text-primary); line-height: 1.3; }
.channel-card-desc { font-size: .6875rem; color: var(--text-tertiary); line-height: 1.3; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-card.active .channel-card-desc { color: var(--text-secondary); }
.channel-card-indicator { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; display: grid; place-items: center; transition: all .25s ease; }
.channel-card.active .channel-card-indicator { border-color: var(--accent-green); background: var(--accent-green); box-shadow: 0 2px 6px rgba(5,150,105,.3); }
.channel-card-indicator i { font-size: 10px; color: #fff; opacity: 0; transform: scale(0); transition: all .25s cubic-bezier(.34,1.56,.64,1); }
.channel-card.active .channel-card-indicator i { opacity: 1; transform: scale(1); }
@media (max-width: 640px) { .drawer { width: 100%; } .channel-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; } .channel-card { padding: .75rem .75rem; } }

/* ── Pagination ── */
.pagination { display: flex; gap: .25rem; }
.page-item { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 .5rem; font-size: .75rem; font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-sm); transition: var(--transition); text-decoration: none; }
.page-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.page-item.active { background: var(--accent-green); color: #fff; }

/* ── Grid Layouts ── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; }
.grid-sidebar { display: grid; grid-template-columns: 1fr 380px; gap: 1.5rem; }
@media (max-width: 1024px) { .grid-sidebar { grid-template-columns: 1fr; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .grid-4 { grid-template-columns: 1fr; } }

/* ── Dividers ── */
.divider { height: 1px; background: var(--border); margin: 1rem 0; }
.divider-text { display: flex; align-items: center; gap: .75rem; color: var(--text-tertiary); font-size: .75rem; }
.divider-text::before, .divider-text::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ── Inline Editing ── */
.inline-edit { padding: .25rem .375rem; border: 1px solid transparent; border-radius: var(--radius-sm); transition: var(--transition); cursor: text; }
.inline-edit:hover { border-color: var(--border); background: var(--bg-hover); }
.inline-edit:focus { border-color: var(--border-active); background: var(--bg-elevated); outline: none; box-shadow: 0 0 0 3px rgba(22,163,74,.1); }

/* ── Animations ── */
.fade-in { animation: fadeIn .3s ease both; }
.slide-up { animation: slideUp .4s ease both; }
.scale-in { animation: scaleIn .3s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
.delay-1 { animation-delay: .05s; }
.delay-2 { animation-delay: .1s; }
.delay-3 { animation-delay: .15s; }
.delay-4 { animation-delay: .2s; }
.delay-5 { animation-delay: .25s; }
.delay-6 { animation-delay: .3s; }
.delay-7 { animation-delay: .35s; }
.delay-8 { animation-delay: .4s; }

/* ── Entrance Animations ── */
.animate-slide { animation: slideUp .4s ease both; }
.animate-fade { animation: fadeIn .3s ease both; }
.animate-fade-up { animation: fadeUp .5s ease both; }
.animate-scale-in { animation: scaleIn .35s ease both; }
.animate-delay-1 { animation-delay: .05s; }
.animate-delay-2 { animation-delay: .1s; }
.animate-delay-3 { animation-delay: .15s; }
.animate-delay-4 { animation-delay: .2s; }
.animate-delay-5 { animation-delay: .25s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.entrance-hidden { opacity: 0; transform: translateY(16px); }
.entrance-visible { opacity: 1; transform: translateY(0); transition: all .5s var(--ease-out); }

/* ── Enhanced Animations & Effects ── */
.animate-bounce-in { animation: bounceIn .5s var(--ease-spring) both; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-pulse-once { animation: pulse 1s ease-in-out 3; }
.animate-pop { animation: pop .35s var(--ease-spring) both; }
.animate-shake { animation: shake .5s ease both; }
.animate-glide { animation: glide .6s var(--ease-out) both; }
.animate-stagger > * { opacity: 0; animation: fadeUp .5s ease forwards; }
.animate-stagger > *:nth-child(1) { animation-delay: .03s; }
.animate-stagger > *:nth-child(2) { animation-delay: .06s; }
.animate-stagger > *:nth-child(3) { animation-delay: .09s; }
.animate-stagger > *:nth-child(4) { animation-delay: .12s; }
.animate-stagger > *:nth-child(5) { animation-delay: .15s; }
.animate-stagger > *:nth-child(6) { animation-delay: .18s; }
.animate-stagger > *:nth-child(7) { animation-delay: .21s; }
.animate-stagger > *:nth-child(8) { animation-delay: .24s; }
.animate-stagger > *:nth-child(9) { animation-delay: .27s; }
.animate-stagger > *:nth-child(10) { animation-delay: .3s; }

@keyframes bounceIn { 0% { opacity: 0; transform: scale(.8); } 50% { transform: scale(1.05); } 100% { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.7); } 70% { transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } 20%, 40%, 60%, 80% { transform: translateX(3px); } }
@keyframes glide { 0% { opacity: 0; transform: translateY(30px) scale(.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* Status dot pulse */
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot-pulse { animation: dotPulse 1.5s ease-in-out infinite; }
@keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.4); opacity: 1; } }

/* Avatar hover effect */
.avatar { transition: transform var(--transition-spring), box-shadow var(--transition); }
.avatar:hover { transform: scale(1.08); box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* Appointment card hover lift */
.appointment-card { transition: transform var(--transition-spring), box-shadow var(--transition); }
.appointment-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* Sidebar nav icon hover effect — vibrant with subtle glow */
.sidebar-nav .nav-link i { transition: transform var(--transition-spring), filter var(--transition), color var(--transition); }
.sidebar-nav .nav-link:hover i { transform: scale(1.18); filter: brightness(1.3); }
.sidebar-nav .nav-link.active i { filter: brightness(1.4) drop-shadow(0 0 4px currentColor); }

/* Table row hover glow */
tr.clickable { transition: background var(--transition); }
tr.clickable:hover { background: var(--bg-hover) !important; }

/* Stat card hover lift */
.stat-card { transition: transform var(--transition-spring), box-shadow var(--transition); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Flash alert slide-in */
.flash-alert { animation: flashSlideIn .4s var(--ease-out) both; }
@keyframes flashSlideIn { 0% { opacity: 0; transform: translateY(-16px) scale(.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } }

/* Badge entrance */
.badge { transition: transform var(--transition-spring), box-shadow var(--transition); }
.badge-status-cancellation_requested .dot { animation: dotPulse 1.5s ease-in-out infinite; }

/* Tooltip fade */
[data-tooltip]::after { animation: tooltipIn .15s ease both; }
@keyframes tooltipIn { 0% { opacity: 0; transform: translateX(-50%) translateY(4px); } 100% { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Card content fade-in */
.card .card-body { animation: bodyFadeIn .3s ease both; }
@keyframes bodyFadeIn { 0% { opacity: .97; } 100% { opacity: 1; } }

/* Smooth page transition on main-content */
.main-content { animation: pageEnter .35s var(--ease-out) both; }
@keyframes pageEnter { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }

/* ── Mobile Bottom Navigation ── */
.mobile-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--mobile-nav-h); background: var(--bg-mobile-nav); border-top: 1px solid #1e293b; z-index: var(--z-mobile-nav); display: none; grid-template-columns: repeat(5, 1fr); padding: 0; box-shadow: 0 -2px 8px rgba(0,0,0,.04); }
.mobile-bottom-nav .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: .25rem 0; color: #64748b; text-decoration: none; font-size: .625rem; background: none; border: none; cursor: pointer; font-family: inherit; }
.mobile-bottom-nav .mobile-nav-item i { font-size: 1.25rem; margin-bottom: 2px; }
.mobile-bottom-nav .mobile-nav-item span { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mobile-bottom-nav .mobile-nav-item.active { color: var(--accent-green); }
.mobile-bottom-nav .mobile-nav-item.active i { color: var(--accent-green); }
.mobile-add-btn { display: flex; align-items: center; justify-content: center; background: var(--accent-green); color: #fff; border: none; border-radius: 50%; width: 44px; height: 44px; font-size: 1.25rem; cursor: pointer; align-self: center; justify-self: center; box-shadow: 0 4px 12px rgba(5,150,105,.35); transition: all .15s ease; margin-top: -12px; }
.mobile-add-btn:hover { transform: scale(1.08); background: #059669; box-shadow: 0 6px 16px rgba(5,150,105,.4); }
.mobile-add-btn:active { transform: scale(.95); }

/* ── Utilities ── */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.gap-0 { gap: 0; }
.gap-0-5 { gap: .125rem; }
.gap-1 { gap: .25rem; }
.gap-2 { gap: .5rem; }
.gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.shrink-0 { flex-shrink: 0; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: .25rem; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.ml-auto { margin-left: auto; }
.mr-1 { margin-right: .25rem; }
.mr-2 { margin-right: .5rem; }
.ml-1 { margin-left: .25rem; }
.ml-2 { margin-left: .5rem; }
.ms-auto { margin-left: auto; }
.me-1 { margin-right: .25rem; }
.me-2 { margin-right: .5rem; }
.ms-1 { margin-left: .25rem; }
.ms-2 { margin-left: .5rem; }
.p-0 { padding: 0; }
.p-1 { padding: .25rem; }
.p-2 { padding: .5rem; }
.p-3 { padding: .75rem; }
.p-4 { padding: 1rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.ps-4 { padding-left: 1rem; }
.pe-2 { padding-right: .5rem; }
.w-full { width: 100%; }
.w-auto { width: auto; }
.hidden { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.relative { position: relative; }
.absolute { position: absolute; }
.rounded { border-radius: var(--radius-md); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }
.border { border: 1px solid var(--border); }
.border-0 { border: none; }
.bg-elevated { background: var(--bg-elevated); }
.bg-subtle { background: var(--bg-subtle); }
.shadow { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-green { color: var(--accent-green); }
.text-blue { color: var(--accent-blue); }
.text-red { color: var(--accent-red); }
.text-amber { color: var(--accent-amber); }
.text-purple { color: var(--accent-purple); }
.text-cyan { color: var(--accent-cyan); }
.text-pink { color: var(--accent-pink); }
.text-white { color: #fff; }
.text-gold { color: var(--accent-gold); }
.text-warning { color: var(--accent-amber); }
.text-info { color: var(--accent-cyan); }
.text-success { color: var(--accent-green); }
.text-danger { color: var(--accent-red); }
.text-light { color: var(--bg-elevated); }
.text-dark { color: var(--text-primary); }

/* ── Colored Icon Utilities ── */
.icon-green { color: var(--accent-green); }
.icon-blue { color: var(--accent-blue); }
.icon-red { color: var(--accent-red); }
.icon-amber { color: var(--accent-amber); }
.icon-purple { color: var(--accent-purple); }
.icon-cyan { color: var(--accent-cyan); }
.icon-pink { color: var(--accent-pink); }
.icon-gray { color: var(--text-tertiary); }
.icon-white { color: #fff; }
.icon-gold { color: var(--accent-gold); }

/* ── Gradient Header Classes ── */
.gradient-green { background: linear-gradient(135deg, var(--accent-green), #22c55e); color: #fff; }
.gradient-gold { background: linear-gradient(135deg, var(--accent-gold), #f59e0b); color: #fff; }
.gradient-blue { background: linear-gradient(135deg, var(--accent-blue), #4f8cff); color: #fff; }
.gradient-purple { background: linear-gradient(135deg, var(--accent-purple), #8b5cf6); color: #fff; }
.gradient-cyan { background: linear-gradient(135deg, var(--accent-cyan), #22d3ee); color: #fff; }
.gradient-pink { background: linear-gradient(135deg, var(--accent-pink), #f472b6); color: #fff; }
.gradient-orange { background: linear-gradient(135deg, var(--accent-amber), #f59e0b); color: #fff; }
.gradient-red { background: linear-gradient(135deg, var(--accent-red), #ef4444); color: #fff; }
.gradient-gray { background: linear-gradient(135deg, #64748b, #94a3b8); color: #fff; }

/* ── Bootstrap-Compat Utility Aliases ── */
.row { display: flex; flex-wrap: wrap; }
.col, .col-lg-6, .col-lg-7, .col-lg-5, .col-md-6, .col { flex: 1 0 0%; min-width: 0; }
.col-lg-6 { flex: 0 0 50%; max-width: 50%; }
.col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; }
.col-lg-5 { flex: 0 0 41.667%; max-width: 41.667%; }
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.g-2, .gx-2 { gap: .5rem; }
.g-4, .gx-4 { gap: 1rem; }
.d-flex { display: flex; }
.d-inline-flex { display: inline-flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-none { display: none; }
.d-block { display: block; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.fw-normal { font-weight: 400; }
.text-decoration-none { text-decoration: none; }
.text-decoration-none:hover { text-decoration: none; }
.text-danger { color: var(--accent-red); }
.text-success { color: var(--accent-green); }
.w-100 { width: 100%; }
.rounded-pill { border-radius: 100px; }
.rounded-circle { border-radius: 50%; }
.rounded-1 { border-radius: var(--radius-sm); }
.rounded-2 { border-radius: var(--radius-md); }
.rounded-3 { border-radius: var(--radius-lg); }
.rounded-4 { border-radius: 16px; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; }
.fs-1 { font-size: 2rem; }
.fs-2 { font-size: 1.5rem; }
.fs-3 { font-size: 1.25rem; }
.fs-4 { font-size: 1.125rem; }
.fs-5 { font-size: 1rem; }
.fs-6 { font-size: .875rem; }
.alert { padding: .75rem 1rem; border-radius: var(--radius-md); border: 1px solid transparent; display: flex; align-items: center; gap: .5rem; }
.alert-warning { background: var(--amber-bg); color: var(--amber-text); border-color: #fde68a; }
.alert-info { background: var(--blue-bg); color: var(--blue-text); border-color: rgba(26,115,232,.15); }
.alert-success { background: var(--green-bg); color: var(--green-text); border-color: rgba(22,163,74,.15); }
.alert-danger { background: var(--red-bg); color: var(--red-text); border-color: rgba(220,38,38,.15); }
.border-bottom { border-bottom: 1px solid var(--border); }
.small { font-size: .8125rem; }
.min-w-0 { min-width: 0; }
.cursor-pointer { cursor: pointer; }
.select-none { user-select: none; }
.no-underline { text-decoration: none; }
.no-underline:hover { text-decoration: none; }
.opacity-50 { opacity: .5; }
.overflow-auto { overflow: auto; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; }
.overflow-hidden { overflow: hidden; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed { position: fixed; }
.inset-0 { inset: 0; }

/* Background opacity composites */
.bg-white { background: #fff; }
.bg-light { background: var(--bg-subtle); }
.bg-primary { background: var(--accent-green); }
.bg-success { background: var(--accent-green); }
.bg-danger { background: var(--accent-red); }
.bg-secondary { background: var(--text-tertiary); }
.bg-warning { background: var(--accent-amber); }
.bg-gold { background: var(--accent-gold); }
.bg-opacity-10 { }
.bg-primary.bg-opacity-10 { background: color-mix(in srgb, var(--accent-green) 10%, transparent); }
.bg-success.bg-opacity-10 { background: color-mix(in srgb, var(--accent-green) 10%, transparent); }
.bg-danger.bg-opacity-10 { background: color-mix(in srgb, var(--accent-red) 10%, transparent); }
.bg-secondary.bg-opacity-10 { background: color-mix(in srgb, #64748b 10%, transparent); }
.bg-warning.bg-opacity-10 { background: color-mix(in srgb, var(--accent-amber) 10%, transparent); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 100px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hover); }

/* ── Print ── */
@media print {
  .sidebar, .topbar, .mobile-toggle, .sidebar-overlay, .mobile-bottom-nav, .no-print, .sidebar-toggle { display: none !important; }
  .page-wrapper { margin-left: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #e2e8f0 !important; }
  body { background: #fff !important; }
  .main-content { padding: 1rem !important; }
}

/* ── Tablet (768px–1024px) ── */
@media (max-width: 1024px) {
  .sidebar { width: var(--sidebar-w-collapsed); }
  .sidebar .brand-text,
  .sidebar .sidebar-search,
  .sidebar .nav-label,
  .sidebar .nav-link .nav-text,
  .sidebar .nav-link .nav-badge,
  .sidebar .nav-link.active::before,
  .sidebar .user-info,
  .sidebar .logout-link span { display: none; }
  .sidebar .sidebar-footer { justify-content: center; padding: .75rem .5rem; }
  .sidebar .nav-link { justify-content: center; padding: .5rem; }
  .sidebar .nav-link i { width: auto; font-size: 1.125rem; }
  .sidebar .sidebar-brand { justify-content: center; padding: 1rem .5rem; }
  .sidebar .nav-link.active { background: transparent; }
  .sidebar .nav-link.active i { color: var(--accent-green); }
  .page-wrapper { margin-left: var(--sidebar-w-collapsed); }
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .grid-sidebar { grid-template-columns: 1fr; }
}

/* ── Mobile (≤767.98px) ── */
@media (max-width: 767.98px) {
  .pagination { flex-wrap: wrap; gap: .25rem; justify-content: center; }
  .page-item { min-width: 28px; height: 28px; font-size: .6875rem; }
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w); }
  .sidebar.open { transform: translateX(0); }
  .sidebar.open .brand-text,
  .sidebar.open .sidebar-search,
  .sidebar.open .nav-label,
  .sidebar.open .nav-link .nav-text,
  .sidebar.open .nav-link .nav-badge,
  .sidebar.open .sidebar-footer .user-info { display: block; }
  .sidebar.open .nav-link { justify-content: flex-start; }
  .sidebar.open .sidebar-footer { justify-content: flex-start; padding: .75rem 1rem; }
  .sidebar.open .sidebar-brand { justify-content: flex-start; padding: 1rem; }
  .sidebar.open .nav-link i { width: 20px; font-size: .875rem; }
  .sidebar.open .nav-link.active { background: var(--bg-sidebar-active); }

  .sidebar-overlay.open { display: block; }
  .page-wrapper { margin-left: 0; padding-bottom: var(--mobile-nav-h); }

  .mobile-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: none; background: var(--bg-elevated); color: var(--text-primary); font-size: 1rem; cursor: pointer; border-radius: var(--radius-sm); box-shadow: 0 1px 3px rgba(0,0,0,.08); -webkit-tap-highlight-color: transparent; touch-action: manipulation; flex-shrink: 0; }
  .mobile-toggle.open { color: var(--accent-green); background: var(--accent-green-light); }
  .sidebar-toggle { width: 32px; height: 32px; font-size: .875rem; }
  .mobile-bottom-nav { display: grid; }

  .topbar { padding: 0 .75rem; }
  .topbar-left { gap: .375rem; }
  .topbar-title { font-size: 1rem; }
  .topbar-right { gap: 0; }
  .topbar-btn { width: 32px; height: 32px; font-size: .875rem; }
  .theme-toggle { width: 32px; height: 32px; font-size: .875rem; }
  .topbar-date { display: none; }
  .topbar-clinic { display: none; }
  .topbar-checkin { font-size: .6875rem; padding: .125rem .375rem; }
  .main-content { padding: 1rem; padding-bottom: calc(1rem + var(--mobile-nav-h)); }
  .flash-alert { margin: 0 .875rem; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem; }
  .stat-card { padding: .875rem 1rem; }
  .stat-card .stat-value { font-size: 1.25rem; }
  .stat-card .stat-icon-wrap, .stat-card .stat-icon { width: 36px; height: 36px; font-size: .875rem; }

  .card-body { padding: 1rem; }
  .card-header { flex-wrap: wrap; }

  .settings-nav { gap: .125rem; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .settings-nav a { font-size: .75rem; padding: .375rem .5rem; white-space: nowrap; }

  .col-lg-6, .col-lg-7, .col-lg-5, .col-md-6 { flex: 0 0 100%; max-width: 100%; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .patient-header { flex-direction: column; }
  .form-row { grid-template-columns: 1fr; }
  .resume-stats { grid-template-columns: repeat(2, 1fr); }
  .entity-grid { grid-template-columns: 1fr; }
  .guest-card { padding: 1.5rem; }
  .login-card { padding: 1.75rem 1.5rem; }
  .login-page::before { height: 3px; }
  .cmd-palette { top: 10%; }

  /* Responsive Tables: convert to card layout */
  .table-wrap table, .table-wrap thead, .table-wrap tbody, .table-wrap th, .table-wrap td, .table-wrap tr { display: block; }
  .table-wrap thead { display: none; }
  .table-wrap td { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: none; min-height: 36px; word-break: break-word; }
  .table-wrap td::before { content: attr(data-label); font-weight: 600; font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; min-width: 80px; flex-shrink: 0; }
  .table-wrap td:empty::before { display: none; }
  .table-wrap tr { border-bottom: 1px solid var(--border); padding: .375rem 0; }
  .table-wrap tr:last-child { border-bottom: none; }
  .table-wrap .empty-state td { display: block; text-align: center; }
  .table-wrap .empty-state td::before { display: none; }

  .form-section { padding: 1rem; }

  /* Clinical tables: convert to card layout on mobile */
  .clinical-table-wrap table, .clinical-table-wrap thead, .clinical-table-wrap tbody, .clinical-table-wrap th, .clinical-table-wrap td, .clinical-table-wrap tr { display: block; }
  .clinical-table-wrap thead { display: none; }
  .clinical-table-wrap td { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: none; min-height: 36px; word-break: break-word; }
  .clinical-table-wrap td::before { content: attr(data-label); font-weight: 600; font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; min-width: 80px; flex-shrink: 0; }
  .clinical-table-wrap td:empty::before { display: none; }
  .clinical-table-wrap tr { border-bottom: 1px solid var(--border); padding: .375rem 0; }
  .clinical-table-wrap tr:last-child { border-bottom: none; }

  /* Service table: convert to card layout on mobile */
  .service-table thead { display: none; }
  .service-table, .service-table tbody, .service-table tr, .service-table td { display: block; }
  .service-table td { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: none; min-height: 36px; }
  .service-table td::before { content: attr(data-label); font-weight: 600; font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; min-width: 80px; flex-shrink: 0; }
  .service-table tr { border-bottom: 1px solid var(--border); padding: .375rem 0; }

  /* DTA table responsive */
  .dta-table thead { display: none; }
  .dta-table, .dta-table tbody, .dta-table tr, .dta-table td { display: block; }
  .dta-table td { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: none; min-height: 36px; }
  .dta-table td::before { content: attr(data-label); font-weight: 600; font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; min-width: 80px; flex-shrink: 0; }
  .dta-table tr { border-bottom: 1px solid var(--border); padding: .375rem 0; }

  /* Rezept session table responsive */
  .rezept-session-table thead { display: none; }
  .rezept-session-table, .rezept-session-table tbody, .rezept-session-table tr, .rezept-session-table td { display: block; }
  .rezept-session-table td { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-bottom: none; min-height: 36px; }
  .rezept-session-table td::before { content: attr(data-label); font-weight: 600; font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; min-width: 80px; flex-shrink: 0; }
  .rezept-session-table tr { border-bottom: 1px solid var(--border); padding: .375rem 0; }

  /* Prevent iOS zoom on input focus */
  select, input, textarea { font-size: 16px; }

  /* Always show hover-reveal buttons on touch */
  .notif-mark-read-btn { opacity: 1 !important; }
  .notif-item .notif-actions { opacity: 1 !important; }
}

/* ── Page Header ── */
.page-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.page-header h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.page-header .page-header-actions { display: flex; gap: .5rem; align-items: center; }
.page-header .page-header-subtitle { font-size: .8125rem; color: var(--text-tertiary); margin-top: .125rem; }

/* ── Entity Cards (Therapists/Locations/Rooms) ── */
.entity-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: .875rem; }
.entity-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.125rem 1.25rem; transition: all .25s var(--ease-spring); display: flex; align-items: flex-start; gap: .875rem; cursor: default; }
.entity-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-hover); transform: translateY(-1px); }
.entity-card .entity-avatar { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 1.125rem; flex-shrink: 0; }
.entity-card .entity-avatar-circle { border-radius: 50%; }
.entity-card .entity-avatar-lg { width: 48px; height: 48px; font-size: 1.25rem; }
.entity-card .entity-info { flex: 1; min-width: 0; }
.entity-card .entity-name { font-weight: 600; font-size: .875rem; color: var(--text-primary); display: flex; align-items: center; gap: .5rem; }
.entity-card .entity-detail { font-size: .8125rem; color: var(--text-secondary); display: flex; align-items: center; gap: .375rem; margin-top: .125rem; }
.entity-card .entity-detail i { width: 14px; text-align: center; color: var(--text-tertiary); font-size: .75rem; flex-shrink: 0; }
.entity-card .entity-tags { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .5rem; }
.entity-card .entity-actions { display: flex; gap: .25rem; align-items: center; flex-shrink: 0; }
.entity-card .entity-badge-row { display: flex; gap: .375rem; flex-wrap: wrap; margin-top: .5rem; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   SETTINGS PAGE — Premium Redesign
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Page Layout ── */
.settings-page { max-width: 1120px; margin: 0 auto; }

@media (min-width: 1024px) {
  .settings-page { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; }
}

/* ── Sidebar Panel ── */
.settings-sidebar {
  position: sticky; top: calc(var(--topbar-h) + 1.5rem); align-self: start;
}

.settings-sidebar-inner {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .75rem .5rem;
  box-shadow: var(--shadow-sm);
}

.settings-sidebar-header {
  padding: .5rem .75rem 1rem;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: .5rem;
}
.settings-sidebar-header h2 { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; letter-spacing: -.01em; }
.settings-sidebar-header p { font-size: .75rem; color: var(--text-tertiary); margin: .1875rem 0 0; }

.settings-nav { display: flex; flex-direction: column; gap: 1px; }

.settings-nav-item {
  display: flex; align-items: center; gap: .6875rem;
  padding: .5625rem .75rem;
  font-size: .8125rem; font-weight: 500;
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  text-decoration: none;
  position: relative;
  transition: all .12s ease;
}
.settings-nav-item:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}
.settings-nav-item.active {
  background: color-mix(in srgb, var(--accent-green) 8%, transparent);
  color: var(--accent-green);
  font-weight: 600;
}
.settings-nav-item.active::before {
  content: ''; position: absolute; left: -9px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px;
  border-radius: 0 3px 3px 0;
  background: var(--accent-green);
}
.settings-nav-item i {
  width: 18px; text-align: center; font-size: .875rem;
  flex-shrink: 0; color: var(--text-tertiary);
}
.settings-nav-item:hover i { color: var(--text-primary); }
.settings-nav-item.active i { color: var(--accent-green); }

/* Sidebar secondary section */
.settings-sidebar-secondary {
  margin-top: 1rem; padding-top: .75rem;
  border-top: 1px solid var(--border-light);
  padding-left: .25rem; padding-right: .25rem;
}

/* ── Mobile: scrollable pills ── */
@media (max-width: 1023.98px) {
  .settings-sidebar-inner {
    background: none; border: none; border-radius: 0; padding: 0;
    box-shadow: none;
  }
  .settings-sidebar-header { display: none; }
  .settings-nav {
    flex-direction: row; overflow-x: auto;
    gap: .375rem; padding: .5rem 0 .75rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-item {
    white-space: nowrap; padding: .5rem .875rem; font-size: .8125rem;
    border: 1px solid var(--border); background: var(--bg-elevated);
    flex-shrink: 0;
  }
  .settings-nav-item.active {
    background: var(--accent-green); color: #fff;
    border-color: var(--accent-green);
    box-shadow: 0 2px 8px rgba(5,150,105,.25);
  }
  .settings-nav-item.active::before { display: none; }
  .settings-nav-item.active i { color: #fff; }
  .settings-sidebar-secondary { display: none; }
}

/* ── Content Area ── */
.settings-content { min-width: 0; }

/* ── Section Header ── */
.settings-section-header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-light);
}
.settings-section-header h2 {
  font-size: 1.25rem; font-weight: 700; margin: 0;
  color: var(--text-primary);
  display: flex; align-items: center; gap: .625rem;
  letter-spacing: -.02em;
}
.settings-section-header p {
  font-size: .8125rem; color: var(--text-tertiary);
  margin: .25rem 0 0; line-height: 1.5;
}

/* ── Settings Cards ── */
.settings-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.settings-card:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--border-hover);
}

.settings-card-header {
  display: flex; align-items: center; gap: .875rem;
  padding: 1.125rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  position: relative;
}
.settings-card-header::before {
  content: ''; position: absolute; top: 0;
  left: 1.5rem; right: 1.5rem;
  height: 2px; background: var(--accent-green);
  border-radius: 0 0 2px 2px; opacity: 0;
  transition: opacity .2s ease;
}
.settings-card:hover .settings-card-header::before { opacity: 1; }

.settings-card-header-icon {
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: .9375rem; flex-shrink: 0;
}

.settings-card-header-text { flex: 1; min-width: 0; }
.settings-card-header-text h3 {
  font-size: .9375rem; font-weight: 600; margin: 0;
  color: var(--text-primary);
}
.settings-card-header-text p {
  font-size: .75rem; color: var(--text-tertiary);
  margin: .125rem 0 0; line-height: 1.4;
}

.settings-card-header-actions {
  display: flex; gap: .5rem; align-items: center; flex-shrink: 0;
}
.settings-card-header-actions .count-badge { font-size: .75rem; padding: .125rem .625rem; }

.settings-card-body { padding: 1.5rem; }
.settings-card-body-p0 { padding: 0; }

.settings-card-footer {
  display: flex; align-items: center;
  justify-content: flex-end; gap: .5rem;
  padding: .875rem 1.5rem;
  border-top: 1px solid var(--border-light);
}

/* ── Icon Colors ── */
.settings-icon-green { background: var(--accent-green-light); color: var(--accent-green); }
.settings-icon-blue { background: var(--accent-blue-light); color: var(--accent-blue); }
.settings-icon-purple { background: var(--accent-purple-light); color: var(--accent-purple); }
.settings-icon-amber { background: var(--accent-amber-light); color: var(--accent-amber); }
.settings-icon-red { background: var(--accent-red-light); color: var(--accent-red); }
.settings-icon-pink { background: var(--accent-pink-light); color: var(--accent-pink); }
.settings-icon-cyan { background: var(--accent-cyan-light); color: var(--accent-cyan); }
.settings-icon-gray { background: var(--bg-subtle); color: var(--text-secondary); }

/* ── Form Fields ── */
.settings-field { margin-bottom: 1.125rem; }
.settings-field:last-child { margin-bottom: 0; }

.settings-label {
  display: block; font-size: .8125rem; font-weight: 600;
  color: var(--text-primary); margin-bottom: .375rem;
}
.settings-label .required { color: var(--accent-red); margin-left: .125rem; }

.settings-help {
  font-size: .75rem; color: var(--text-tertiary);
  margin-top: .375rem; line-height: 1.4;
}
.settings-help code {
  font-size: .6875rem; background: var(--bg-subtle);
  padding: .0625rem .375rem; border-radius: 3px;
}

/* ── Form Row ── */
.settings-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 640px) { .settings-row { grid-template-columns: 1fr; } }

/* ── Icon-prefixed inputs ── */
.settings-input-icon { position: relative; }
.settings-input-icon .input-icon {
  position: absolute; left: .75rem; top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary); font-size: .8125rem;
  pointer-events: none; z-index: 1;
}
.settings-input-icon .form-input { padding-left: 2.375rem; }

/* ── Form Switch Wrapper (with separator) ── */
.form-switch-wrap {
  padding: .6875rem 0;
  border-bottom: 1px solid var(--border-light);
}
.form-switch-wrap:last-child { border-bottom: none; }
.form-switch-wrap .form-switch { margin: 0; }

/* ── Toggles ── */
.settings-toggle {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--border-light);
}
.settings-toggle:last-child { border-bottom: none; }
.settings-toggle-label {
  font-size: .875rem; font-weight: 500; color: var(--text-primary);
}
.settings-toggle-desc {
  font-size: .75rem; color: var(--text-tertiary); margin-top: .125rem;
}

/* ── Audit Filter Bar ── */
.settings-filter {
  display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.settings-filter .form-input,
.settings-filter .form-select { min-width: 130px; }
@media (max-width: 640px) {
  .settings-filter { flex-direction: column; align-items: stretch; }
  .settings-filter .form-input,
  .settings-filter .form-select { min-width: 0; }
}

/* ── Role Tabs ── */
.settings-role-tabs {
  display: flex; gap: .375rem; margin-bottom: 1.25rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.settings-role-tabs::-webkit-scrollbar { display: none; }
.settings-role-tab {
  padding: .5rem 1rem; font-size: .8125rem; font-weight: 500;
  border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--text-secondary); border-radius: var(--radius-md);
  cursor: pointer; transition: all .15s ease; white-space: nowrap;
}
.settings-role-tab:hover { border-color: var(--border-hover); color: var(--text-primary); }
.settings-role-tab.active {
  background: var(--accent-green-light); color: var(--accent-green);
  border-color: var(--accent-green-light); font-weight: 600;
}

/* ── Permission Pilze ── */
.settings-perms { display: flex; flex-wrap: wrap; gap: .5rem; }
.settings-perm {
  display: flex; align-items: center; gap: .375rem;
  padding: .375rem .75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: .8125rem; cursor: pointer;
  transition: all .15s ease;
}
.settings-perm:hover { border-color: var(--border-hover); background: var(--bg-hover); }
.settings-perm input[type="checkbox"] {
  width: .875rem; height: .875rem; accent-color: var(--accent-green);
}
.settings-perm span { user-select: none; }

/* ── Status Card ── */
.settings-status { display: flex; align-items: center; gap: 1rem; }
.settings-status-icon {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: grid; place-items: center; font-size: 1.25rem; flex-shrink: 0;
}
.settings-status-text { font-size: .875rem; font-weight: 600; color: var(--text-primary); }
.settings-status-sub { font-size: .75rem; color: var(--text-tertiary); margin-top: .125rem; }

/* ── Logo Upload ── */
.settings-logo-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.settings-logo-preview {
  max-height: 56px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); padding: 4px;
  background: var(--bg-elevated);
}

/* ── Empty State ── */
.settings-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--text-tertiary); }
.settings-empty i { font-size: 2rem; opacity: .3; display: block; margin-bottom: .75rem; }
.settings-empty h4 { font-size: .9375rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 .25rem; }
.settings-empty p { font-size: .8125rem; margin: 0; }

/* ── Business Hours ── */
.settings-hours-row {
  display: flex; align-items: center; gap: .625rem;
  padding: .4375rem 0;
}
.settings-hours-row + .settings-hours-row {
  border-top: 1px solid var(--border-light);
}
.settings-hours-row .hours-icon {
  color: var(--text-tertiary); width: 18px; text-align: center; flex-shrink: 0;
}
.settings-hours-row .hours-label {
  font-size: .8125rem; font-weight: 500; min-width: 90px;
  text-transform: capitalize; color: var(--text-primary);
}
.settings-hours-row .form-input { flex: 1; }

/* ── Services Table ── */
.settings-services-table { width: 100%; border-collapse: collapse; }
.settings-services-table th {
  text-align: left; padding: .75rem 1rem; font-size: .6875rem;
  font-weight: 600; color: var(--text-tertiary);
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--bg-subtle); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.settings-services-table td {
  padding: .5rem .625rem; border-bottom: 1px solid var(--border-light); vertical-align: middle;
}
.settings-services-table tbody tr:hover { background: var(--bg-hover); }

/* ── Auto-submit inline form ── */
.settings-auto-form { display: inline-flex; align-items: center; gap: .375rem; }

/* ── Notifications ── */
.notif-wrap { position: relative; }
.notif-bell { position: relative; }
.notif-badge { position: absolute; top: -3px; right: -3px; min-width: 16px; height: 16px; background: var(--accent-red, #ef4444); color: #fff; font-size: .625rem; font-weight: 700; border-radius: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; line-height: 1; border: 2px solid var(--bg-topbar); pointer-events: none; }
.notif-dropdown { position: absolute; top: calc(100% + 6px); right: 0; width: 360px; max-height: 440px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: 1000; display: none; flex-direction: column; overflow: hidden; }
.notif-dropdown.open { display: flex; }
.notif-header { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
.notif-title { font-weight: 600; font-size: .875rem; color: var(--text-primary); }
.notif-mark-all { background: none; border: none; color: var(--accent-green); font-size: .75rem; cursor: pointer; padding: 0; }
.notif-mark-all:hover { text-decoration: underline; }
.notif-list { flex: 1; overflow-y: auto; padding: .25rem 0; }
.notif-item { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem 1rem; cursor: pointer; transition: background .15s; border-bottom: 1px solid var(--border-light); }
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-hover); }
.notif-item.unread { background: var(--accent-green-light); border-left: 3px solid var(--accent-green); }
.notif-item.unread:hover { background: var(--bg-hover); }
.notif-icon { width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; font-size: .8125rem; flex-shrink: 0; }
.notif-icon.info { background: #e0f2fe; color: #0284c7; }
.notif-icon.warning { background: #fef3c7; color: #d97706; }
.notif-icon.danger { background: #fee2e2; color: #dc2626; }
.notif-icon.success { background: #dcfce7; color: #16a34a; }
.dark-mode .notif-icon.info { background: #0c4a6e; color: #7dd3fc; }
.dark-mode .notif-icon.warning { background: #78350f; color: #fbbf24; }
.dark-mode .notif-icon.danger { background: #7f1d1d; color: #fca5a5; }
.dark-mode .notif-icon.success { background: #14532d; color: #86efac; }
.notif-body { flex: 1; min-width: 0; }
.notif-msg { font-size: .8125rem; color: var(--text-primary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notif-time { font-size: .6875rem; color: var(--text-tertiary); margin-top: 2px; }
.notif-empty { padding: 2rem 1rem; text-align: center; color: var(--text-tertiary); font-size: .8125rem; }
@media (max-width: 480px) { .notif-dropdown { position: fixed; top: var(--topbar-h); left: 0; right: 0; width: 100%; max-height: calc(100vh - var(--topbar-h) - var(--mobile-nav-h)); border-radius: 0; box-shadow: var(--shadow-lg); } }

/* ── Mobile Notification Dot ── */
.mobile-nav-item { position: relative; }
.notif-dot { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; background: var(--accent-red, #ef4444); border-radius: 50%; border: 2px solid #0f172a; z-index: 1; }



/* ── Service Table Inline Edit ── */
.service-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.service-table th { padding: .5rem .75rem; font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--text-tertiary); text-align: left; border-bottom: 2px solid var(--border); white-space: nowrap; background: transparent; }
.service-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.service-table td .form-input-sm { min-width: 0; }
.service-table tr:last-child td { border-bottom: none; }
.service-table .service-check { width: 18px; height: 18px; accent-color: var(--accent-green); cursor: pointer; }

/* ── Notification Dropdown Enhancements ── */
.notif-dd-group {  }
.notif-dd-label { font-size:.625rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); padding:.5rem 1rem .25rem; border-bottom:1px solid var(--border-light); }
.notif-item { cursor:pointer; }
.notif-item .notif-body { cursor:pointer; }
.notif-item .notif-body .notif-meta { display:flex; align-items:center; gap:.25rem; margin-top:2px; }
.notif-meta .notif-sep { color:var(--text-tertiary); font-size:.5rem; }
.notif-meta .notif-module { font-size:.625rem; color:var(--text-tertiary); }
.notif-meta .notif-priority { font-size:.5625rem; padding:.0625rem .375rem; border-radius:100px; font-weight:600; }
.notif-meta .notif-priority.urgent { background:var(--red-bg); color:var(--red-text); }
.notif-meta .notif-priority.high { background:var(--amber-bg); color:var(--amber-text); }
.notif-mark-read-btn { opacity:0; width:24px; height:24px; border:none; background:var(--bg-subtle); color:var(--accent-green); border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:all .15s; flex-shrink:0; font-size:.625rem; }
.notif-item:hover .notif-mark-read-btn { opacity:1; }
.notif-mark-read-btn:hover { background:var(--green-bg); transform:scale(1.1); }

/* ── Notification Toast ── */
.notif-toast { position:fixed; bottom:calc(var(--mobile-nav-h, 0px) + 1rem); right:1rem; max-width:380px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-xl); display:flex; align-items:flex-start; gap:.625rem; padding:.75rem 1rem; z-index:calc(var(--z-toast) + 1); transform:translateX(120%); transition:transform .35s var(--ease-spring); cursor:pointer; }
.notif-toast.show { transform:translateX(0); }
.notif-toast-icon { width:32px; height:32px; border-radius:var(--radius-full); display:flex; align-items:center; justify-content:center; font-size:.8125rem; flex-shrink:0; }
.notif-toast-icon.info { background:var(--blue-bg); color:var(--blue-text); }
.notif-toast-icon.success { background:var(--green-bg); color:var(--green-text); }
.notif-toast-icon.warning { background:var(--amber-bg); color:var(--amber-text); }
.notif-toast-icon.danger { background:var(--red-bg); color:var(--red-text); }
.notif-toast-body { flex:1; min-width:0; }
.notif-toast-msg { font-size:.8125rem; color:var(--text-primary); line-height:1.4; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.notif-toast-time { font-size:.6875rem; color:var(--text-tertiary); margin-top:2px; }
.notif-toast-close { width:20px; height:20px; border:none; background:none; color:var(--text-tertiary); cursor:pointer; display:grid; place-items:center; font-size:.6875rem; flex-shrink:0; border-radius:50%; transition:all .15s; }
.notif-toast-close:hover { background:var(--bg-hover); color:var(--text-primary); }
@media (max-width:480px) { .notif-toast { left:.5rem; right:.5rem; max-width:none; bottom:calc(var(--mobile-nav-h) + .5rem); } }

/* ── Badge Pulse Animation ── */
@keyframes badgePulse { 0%{transform:scale(.7)}50%{transform:scale(1.15)}100%{transform:scale(1)} }

/* ── Notification Center Page Overrides ── */
.notif-group-label { font-size:.6875rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); padding:.75rem 1.25rem .375rem; border-bottom:1px solid var(--border-light); }
.notif-sep { color:var(--text-tertiary); font-size:.625rem; }
.notif-item .notif-actions { opacity:0; transition:opacity .15s; }
.notif-item:hover .notif-actions { opacity:1; }
@media (max-width:767.98px) {
  .notif-item .notif-actions { opacity:1; }
}

/* ── Idle Session Timeout Warning ── */
.idle-warning { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; animation: idleSlideIn .3s var(--ease-out); }
.idle-warning-content { display: flex; align-items: center; gap: .75rem; padding: .875rem 1.125rem; background: var(--bg-elevated); border: 1px solid var(--accent-amber); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); font-size: .875rem; color: var(--text-primary); }
.idle-warning-content i.fa-clock { color: var(--accent-amber); font-size: 1.125rem; }
.idle-warning-content p { margin: 0; white-space: nowrap; }
@keyframes idleSlideIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   ENTERPRISE UPGRADE — Premium Design Additions
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Card Premium ── */
.card-premium { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: all .25s var(--ease-out); }
.card-premium:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-hover); }
.card-premium-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.card-premium-header h3 { font-size: .875rem; font-weight: 600; margin: 0; display: flex; align-items: center; gap: .5rem; }
.card-premium-body { padding: 1.25rem; }
.card-premium-body-p0 { padding: 0; }
.card-premium-footer { padding: .75rem 1.25rem; border-top: 1px solid var(--border-light); display: flex; align-items: center; justify-content: flex-end; gap: .5rem; }

/* ── Premium Stats Cards ── */
.stats-grid-premium { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .875rem; margin-bottom: 1.5rem; }
.stat-premium { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.125rem 1.25rem; display: flex; flex-direction: column; gap: .375rem; position: relative; overflow: hidden; transition: all .25s var(--ease-out); }
.stat-premium-body { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.stat-premium-info { flex: 1; min-width: 0; }
.stat-premium:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); border-color: var(--border-hover); }
.stat-premium-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.stat-premium-icon { width: 42px; height: 42px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: 1rem; flex-shrink: 0; transition: transform .2s; }
.stat-premium:hover .stat-premium-icon { transform: scale(1.08); }
.stat-premium-icon--blue { background: var(--blue-bg); color: var(--accent-blue); }
.stat-premium-icon--amber { background: var(--amber-bg); color: var(--accent-amber); }
.stat-premium-icon--green { background: var(--green-bg); color: var(--accent-green); }
.stat-premium-icon--red { background: var(--red-bg); color: var(--accent-red); }
.stat-premium-progress { flex: 1; min-width: 120px; max-width: 200px; justify-content: center; }
.progress-bar-wrap { height: 8px; width: 100%; }
.progress-bar-fill { height: 100%; border-radius: 100px; background: var(--accent-green); transition: width 1s ease; }
.progress-bar-flex { flex: 1; max-width: 100px; }
.tpe-card-list { padding: .75rem; display: flex; flex-direction: column; gap: .5rem; }
.detail-ul { margin: 0; padding-left: 1.25rem; }
.detail-p { margin: 0; }
.stat-premium-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; color: var(--text-primary); }
.stat-premium-label { font-size: .75rem; color: var(--text-tertiary); font-weight: 500; margin-top: .125rem; }
.stat-premium-trend { display: flex; align-items: center; gap: .25rem; font-size: .6875rem; font-weight: 600; padding-top: .5rem; border-top: 1px solid var(--border-light); margin-top: .375rem; }
.stat-premium-trend.up { color: var(--accent-green); }
.stat-premium-trend.down { color: var(--accent-red); }
.stat-premium-trend.neutral { color: var(--text-tertiary); }
.stat-premium-bar { height: 3px; border-radius: 2px; background: var(--border-light); overflow: hidden; margin-top: .5rem; }
.stat-premium-bar-fill { height: 100%; border-radius: 2px; transition: width .6s var(--ease-out); }

/* ── Page Action Bar ── */
.page-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.page-actions .btn { flex-shrink: 0; }

/* ── Filter Bar ── */
.filter-bar { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; padding: .75rem 1rem; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 1.25rem; }
.filter-bar .filter-group { display: flex; align-items: center; gap: .375rem; }
.filter-bar .filter-label { font-size: .75rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
.filter-bar .filter-input { padding: .375rem .625rem; font-size: .8125rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-primary); min-width: 140px; }
.filter-bar .filter-input:focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 0 2px var(--accent-green-light); }
.filter-bar .filter-btn { padding: .375rem .75rem; font-size: .75rem; border-radius: var(--radius-sm); }
.filter-bar .filter-count { font-size: .75rem; color: var(--text-tertiary); margin-left: auto; white-space: nowrap; }
@media (max-width: 767.98px) {
  .filter-bar { flex-direction: column; align-items: stretch; gap: .5rem; }
  .filter-bar .filter-group { flex-wrap: wrap; }
  .filter-bar .filter-input { min-width: 0; flex: 1; }
  .filter-bar .filter-count { margin-left: 0; }
}

/* ── Summary Bar (for list page headers) ── */
.summary-bar { display: flex; align-items: center; gap: 1rem; padding: .625rem 0; flex-wrap: wrap; }
.summary-bar .summary-item { display: flex; flex-direction: column; }
.summary-bar .summary-value { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.summary-bar .summary-label { font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.summary-bar .summary-divider { width: 1px; height: 28px; background: var(--border); }
@media (max-width: 480px) { .summary-bar { gap: .5rem; } .summary-bar .summary-divider { display: none; } }

/* ── Status Badges (enhanced) ── */
.badge-status { display: inline-flex; align-items: center; gap: .25rem; padding: .1875rem .5625rem; border-radius: var(--radius-full); font-size: .6875rem; font-weight: 600; white-space: nowrap; line-height: 1.4; }
.badge-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* ── Empty State (enhanced) ── */
.empty-state-modern { text-align: center; padding: 3rem 1.5rem; color: var(--text-tertiary); }
.empty-state-modern i { font-size: 2.5rem; display: block; margin-bottom: .75rem; opacity: .25; }
.empty-state-modern h4 { font-size: 1rem; font-weight: 600; color: var(--text-secondary); margin: 0 0 .25rem; }
.empty-state-modern p { font-size: .8125rem; margin: 0 0 1rem; }
.empty-state-modern .btn { display: inline-flex; }

/* ── Mobile Card (responsive table fallback) ── */
.mobile-card { display: none; }
@media (max-width: 767.98px) {
  .desktop-table { display: none; }
  .mobile-card { display: block; }
  .mobile-card-item { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); padding: .875rem 1rem; margin-bottom: .5rem; transition: all .15s; }
  .mobile-card-item:active { transform: scale(.98); }
  .mobile-card-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .25rem 0; }
  .mobile-card-row + .mobile-card-row { border-top: 1px solid var(--border-light); }
  .mobile-card-label { font-size: .6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; }
  .mobile-card-value { font-size: .8125rem; color: var(--text-primary); text-align: right; word-break: break-word; }
}

/* ── Tabs (enhanced) ── */
.tabs-modern { display: flex; gap: .25rem; background: var(--bg-subtle); border-radius: var(--radius-lg); padding: .375rem; margin-bottom: 1.25rem; border: 1px solid var(--border); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs-modern .tab-item { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem .875rem; font-size: .8125rem; font-weight: 500; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-md); transition: all .15s; white-space: nowrap; text-decoration: none; }
.tabs-modern .tab-item:hover { color: var(--text-primary); background: var(--bg-hover); text-decoration: none; }
.tabs-modern .tab-item.active { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.tabs-modern .tab-item i { font-size: .8125rem; }

/* ── Modal Improvements ── */
.modal-overlay { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ── Header Count Badge ── */
.count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--accent-green-light); color: var(--accent-green); font-size: .6875rem; font-weight: 700; padding: 0 6px; }

/* ── Responsive Table Enhancements ── */
.rd-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.rd-table th { text-align: left; padding: .625rem .75rem; font-size: .6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; background: var(--bg-subtle); border-bottom: 1px solid var(--border); white-space: nowrap; }
.rd-table td { padding: .625rem .75rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; color: var(--text-primary); }
.rd-table tbody tr:hover { background: var(--bg-hover); }
.rd-table tbody tr:last-child td { border-bottom: none; }
@media (max-width: 767.98px) {
  .rd-table thead { display: none; }
  .rd-table, .rd-table tbody, .rd-table tr, .rd-table td { display: block; }
  .rd-table td { display: flex; align-items: center; gap: .5rem; padding: .5625rem .75rem; border-bottom: none; min-height: 38px; word-break: break-word; }
  .rd-table td::before { content: attr(data-label); font-weight: 600; font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; min-width: 90px; flex-shrink: 0; }
  .rd-table td:empty::before { display: none; }
  .rd-table tr { border-bottom: 1px solid var(--border); padding: .375rem 0; }
  .rd-table tr:last-child { border-bottom: none; }
  .rd-table .empty-state td { display: block; text-align: center; }
  .rd-table .empty-state td::before { display: none; }
}

/* ── Avatar initials improvements ── */
.avatar-initials { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .8125rem; font-weight: 700; flex-shrink: 0; overflow: hidden; }
.avatar-initials-sm { width: 28px; height: 28px; font-size: .625rem; }
.avatar-initials-lg { width: 44px; height: 44px; font-size: 1rem; }

/* ── Quick action grid ── */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .5rem; }
.quick-grid-item { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); text-decoration: none; color: var(--text-primary); transition: all .2s; cursor: pointer; text-align: center; }
.quick-grid-item:hover { border-color: var(--accent-green); background: var(--accent-green-light); color: var(--accent-green); transform: translateY(-2px); text-decoration: none; }
.quick-grid-item i { font-size: 1.25rem; color: var(--text-tertiary); transition: color .2s; }
.quick-grid-item:hover i { color: var(--accent-green); }
.quick-grid-item span { font-size: .75rem; font-weight: 500; }
.quick-grid-item .quick-grid-sub { font-size: .625rem; color: var(--text-tertiary); font-weight: 400; }

/* ── Filter Bar Search (icon-inside input) ── */
.filter-bar-search { position: relative; display: inline-flex; align-items: center; min-width: 200px; flex: 1; }
.filter-bar-search .fa-search { position: absolute; left: .75rem; color: var(--text-tertiary); font-size: .8125rem; pointer-events: none; z-index: 1; }
.filter-bar-search input { padding-left: 2.25rem; }

/* ── Card Premium Footer Pages (pagination wraps) ── */
.card-premium-footer-pages { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }

/* ── Settings Pagination ── */
.settings-pagination {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .375rem;
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}

/* ── Modal size variant: medium ── */
.modal-md { max-width: 520px; }

/* ── Role Permissions Form ── */
.role-permissions-form { margin-top: .5rem; }
.settings-perm-group { margin-bottom: 1.25rem; }
.settings-perm-group:last-child { margin-bottom: 0; }
.settings-perm-group-title {
  font-size: .75rem; font-weight: 600; color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: .625rem;
}

/* ── Form Check Small ── */
.form-check-sm { font-size: .8125rem; gap: .375rem; }
.form-check-sm input[type="checkbox"] { width: .875rem; height: .875rem; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   CLINICAL ASSESSMENT FLOW
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Assessment/Treatment/Patient Clinical Detail ── */
.detail-label { font-size:.6875rem;font-weight:600;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.125rem; }
.detail-value { font-size:.875rem;color:var(--text-primary);font-weight:500; }
.form-row-3 { display:grid;grid-template-columns:1fr 1fr 1fr;gap:.625rem;margin-bottom:.75rem; }
@media (max-width:640px) {
  .form-row-3 { grid-template-columns:1fr; }
}

/* ── Treatment Plan Exercise Cards ── */
.tpe-card{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:.75rem .875rem;transition:all .15s}
.tpe-card:hover{border-color:var(--border-hover)}
.tpe-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.625rem;margin-bottom:.5rem}
.tpe-card-info{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.tpe-card-name{font-size:.8125rem;font-weight:600;color:var(--text-primary);word-break:break-word}
.tpe-card-meta{display:flex;align-items:center;gap:.25rem;flex-wrap:wrap}
.tpe-card-bottom{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.4375rem;border-top:1px solid var(--border-light)}
.tpe-card-sets{font-size:.75rem;color:var(--text-secondary);display:inline-flex;align-items:center;gap:.3125rem}
@media(max-width:768px){
  .tpe-card-top{flex-direction:column}
  .tpe-card-bottom{flex-wrap:wrap}
  .tpe-card-bottom .btn{width:100%;justify-content:center}
}

/* ── Patient Exercise Cards (in patient show) ── */
.pex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.625rem;padding:.75rem}
.pex-card{background:var(--bg-elevated);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:.875rem 1rem;transition:all .15s}
.pex-card:hover{border-color:var(--border-hover);box-shadow:0 2px 8px rgba(0,0,0,.04)}
.pex-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.pex-card-name{font-size:.875rem;font-weight:600;color:var(--text-primary);margin:0;word-break:break-word}
.pex-card-details{display:flex;flex-wrap:wrap;gap:.25rem .5rem;font-size:.75rem;color:var(--text-secondary);margin-bottom:.375rem}
.pex-card-details span{display:inline-flex;align-items:center;gap:.25rem}
.pex-card-details i{font-size:.6875rem;color:var(--text-tertiary)}
.pex-card-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-top:.5rem;border-top:1px solid var(--border-light);font-size:.75rem;color:var(--text-tertiary)}
.pex-card-footer a{font-size:.75rem;color:var(--accent-blue);text-decoration:none}
.pex-card-footer a:hover{text-decoration:underline}
@media(max-width:768px){
  .pex-grid{grid-template-columns:1fr;padding:.5rem}
  .pex-card-top{flex-direction:column}
}

/* ── Patient Show Sidebar Exercise Items ── */
.ex-sidebar-item{background:var(--bg-subtle);border-radius:var(--radius-sm);padding:.5rem .625rem;margin-bottom:.375rem}
.ex-sidebar-item:last-child{margin-bottom:0}
.ex-sidebar-top{display:flex;align-items:center;justify-content:space-between;gap:.375rem;margin-bottom:.25rem}
.ex-sidebar-top strong{font-size:.8125rem;color:var(--text-primary);font-weight:600;word-break:break-word}
.ex-sidebar-meta{display:flex;align-items:center;gap:.375rem;flex-wrap:wrap;font-size:.6875rem;color:var(--text-secondary)}
.ex-sidebar-meta span{display:inline-flex;align-items:center;gap:.1875rem}
.ex-sidebar-meta i{font-size:.625rem;color:var(--text-tertiary)}
@media(max-width:768px){.ex-sidebar-top{flex-direction:column;align-items:flex-start}}

/* ── Exercise Library (ex-*) ── */
.ex-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1.25rem;flex-wrap:wrap}
.ex-header h1{font-size:1.25rem;font-weight:700;margin:0;display:flex;align-items:center;gap:.5rem}
.ex-header h1 i{color:var(--accent-green)}
.ex-header-sub{font-size:.8125rem;color:var(--text-tertiary)}
.ex-filter{display:flex;align-items:center;gap:.5rem;padding:.625rem .875rem;background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-lg);margin-bottom:1.25rem;flex-wrap:wrap;position:relative}
.ex-filter .ex-search{position:relative;flex:1;min-width:160px}
.ex-filter .ex-search i{position:absolute;left:.625rem;top:50%;transform:translateY(-50%);color:var(--text-tertiary);font-size:.8125rem;pointer-events:none}
.ex-filter .ex-search input{width:100%;padding:.4375rem .625rem .4375rem 1.875rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--text-primary);font-size:.8125rem;outline:none;transition:var(--transition-fast)}
.ex-filter .ex-search input:focus{border-color:var(--accent-green);box-shadow:0 0 0 2px var(--accent-green-light)}
.ex-filter select{padding:.4375rem .625rem;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--text-primary);font-size:.8125rem;outline:none;cursor:pointer;min-width:130px}
.ex-filter .ex-filter-clear{display:inline-flex;align-items:center;gap:.25rem;padding:.375rem .625rem;border-radius:var(--radius-sm);font-size:.75rem;color:var(--text-tertiary);background:none;border:1px solid var(--border);cursor:pointer;transition:var(--transition-fast);text-decoration:none}
.ex-filter .ex-filter-clear:hover{color:var(--accent-red);border-color:var(--accent-red-light);background:var(--red-bg)}
.ex-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:.75rem}
.ex-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:all .2s ease;overflow:hidden;display:flex;flex-direction:column;user-select:none;-webkit-tap-highlight-color:transparent}
.ex-card:active{transform:scale(.98)}
.ex-card:hover{border-color:var(--accent-green);box-shadow:0 4px 16px rgba(5,150,105,.1)}
.ex-card-body{padding:1rem 1.125rem;flex:1;display:flex;flex-direction:column}
.ex-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem;margin-bottom:.5rem}
.ex-card-name{font-size:.875rem;font-weight:600;color:var(--text-primary);margin:0;line-height:1.3;word-break:break-word}
.ex-card-desc{font-size:.75rem;color:var(--text-secondary);margin-bottom:.625rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ex-card-meta{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.75rem;color:var(--text-secondary);margin-top:auto;padding-top:.5rem;border-top:1px solid var(--border-light)}
.ex-card-meta span{display:inline-flex;align-items:center;gap:.3125rem}
.ex-card-meta i{font-size:.6875rem;color:var(--text-tertiary)}
.ex-card-equip{margin-left:auto;font-size:.6875rem;color:var(--text-tertiary);display:inline-flex;align-items:center;gap:.25rem}
.ex-empty{grid-column:1/-1;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-lg);padding:3rem 1.5rem;text-align:center;color:var(--text-tertiary)}
.ex-empty i{font-size:2.5rem;display:block;margin-bottom:.75rem;opacity:.3}
.ex-empty h4{font-size:1rem;font-weight:600;color:var(--text-secondary);margin:0 0 .25rem}
.ex-empty p{font-size:.8125rem;margin:0}
.ex-pages{display:flex;align-items:center;justify-content:center;gap:.375rem;margin-top:1.25rem;flex-wrap:wrap}
.ex-pages a,.ex-pages span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 .5rem;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:500;text-decoration:none;transition:var(--transition-fast)}
.ex-pages a{color:var(--text-secondary);border:1px solid var(--border);background:var(--bg-elevated)}
.ex-pages a:hover{color:var(--accent-green);border-color:var(--accent-green)}
.ex-pages .ex-page-active{background:var(--accent-green);color:#fff;border-color:var(--accent-green);font-weight:600}
.ex-pages .ex-page-dots{color:var(--text-tertiary);border:none;min-width:24px}
.ex-pages .ex-page-arrow{font-size:.75rem}
.ex-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:10000;display:none;align-items:center;justify-content:center;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:exFadeIn .15s ease}
.ex-overlay.show{display:flex}
@keyframes exFadeIn{from{opacity:0}to{opacity:1}}
.ex-drawer{background:var(--bg-elevated);width:100%;max-width:520px;border-radius:var(--radius-lg);box-shadow:0 16px 48px rgba(0,0,0,.2);animation:exSlideUp .25s ease;display:flex;flex-direction:column;max-height:95vh}
@keyframes exSlideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}
.ex-drawer-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.875rem 1.25rem;border-bottom:1px solid var(--border-light);flex-shrink:0}
.ex-drawer-header h3{margin:0;font-size:.9375rem;font-weight:600;display:flex;align-items:center;gap:.5rem}
.ex-steps{display:flex;align-items:center;justify-content:center;gap:.375rem;padding:.625rem 1.25rem .5rem;flex-shrink:0}
.ex-step-dot{width:8px;height:8px;border-radius:50%;background:var(--border);transition:all .2s}
.ex-step-dot.active{background:var(--accent-green);width:24px;border-radius:4px}
.ex-step-dot.done{background:var(--accent-green-light)}
.ex-step-label{font-size:.75rem;font-weight:600;color:var(--text-secondary);text-align:center;padding:0 1.25rem .25rem;flex-shrink:0}
.ex-wizard-body{flex:1;display:flex;overflow:hidden;position:relative;min-height:0}
.ex-wizard-track{display:flex;transition:transform .3s ease;flex:1}
.ex-step{width:100%;flex-shrink:0;padding:.75rem 1.25rem 0;display:flex;flex-direction:column;overflow-y:auto}
.ex-step-content{flex:1;display:flex;flex-direction:column;justify-content:center;gap:.5rem;padding-bottom:.75rem}
.ex-field label{display:block;font-size:.75rem;font-weight:600;color:var(--text-secondary);margin-bottom:.1875rem}
.ex-field .ex-input,.ex-field .ex-select{width:100%;padding:.4375rem .6875rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.8125rem;color:var(--text-primary);background:var(--bg-elevated);outline:none;transition:var(--transition-fast);box-sizing:border-box}
.ex-field .ex-input:focus,.ex-field .ex-select:focus{border-color:var(--accent-green);box-shadow:0 0 0 2px var(--accent-green-light)}
.ex-field .ex-textarea{width:100%;padding:.4375rem .6875rem;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:.8125rem;color:var(--text-primary);background:var(--bg-elevated);outline:none;transition:var(--transition-fast);box-sizing:border-box;resize:none;font-family:inherit}
.ex-field .ex-textarea:focus{border-color:var(--accent-green);box-shadow:0 0 0 2px var(--accent-green-light)}
.ex-field-row{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.ex-field-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
.ex-check-wrap{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.8125rem;color:var(--text-primary);user-select:none;padding:.25rem 0}
.ex-check-wrap input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent-green);cursor:pointer}
.ex-drawer-footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1.25rem;border-top:1px solid var(--border-light);flex-shrink:0}
.ex-drawer-footer .ex-footer-left{display:flex;align-items:center;gap:.375rem;flex:1}
.ex-drawer-footer .ex-footer-right{display:flex;align-items:center;gap:.375rem}
.ex-delete-btn{display:none;color:var(--accent-red);background:none;border:none;cursor:pointer;font-size:.75rem;font-weight:500;padding:.375rem .5rem;border-radius:var(--radius-sm);transition:var(--transition-fast)}
.ex-delete-btn:hover{background:var(--red-bg)}
@media(max-width:768px){
  .ex-header h1{font-size:1.125rem}
  .ex-filter{padding:.5rem .625rem;flex-direction:column;align-items:stretch;gap:.375rem}
  .ex-filter .ex-search{min-width:0}
  .ex-filter select{min-width:0;width:100%}
  .ex-grid{grid-template-columns:1fr;gap:.5rem}
  .ex-card-body{padding:.75rem .875rem}
  .ex-overlay{align-items:flex-end}
  .ex-drawer{max-width:100%;max-height:100%;height:100%;border-radius:0}
  .ex-step{padding:.625rem 1rem 0}
  .ex-field-row,.ex-field-row-3{grid-template-columns:1fr}
  .ex-pages a,.ex-pages span{min-width:40px;height:40px;font-size:.875rem}
}

/* ── Patient Clinical Header ── */
.patient-show { max-width: 1280px; margin: 0 auto; }
.patient-clinical-header {
  background: var(--bg-elevated); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem; box-shadow: var(--shadow-sm);
}
.patient-clinical-top { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.patient-clinical-avatar { flex-shrink: 0; }
.avatar-circle {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.125rem; font-weight: 700; color: #fff;
}
.patient-clinical-info { flex: 1; min-width: 0; }
.patient-clinical-name-row { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.patient-clinical-name-row h1 { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--text-primary); }
.patient-clinical-id { font-size: .75rem; color: var(--text-tertiary); font-weight: 500; }
.risk-badge {
  display: inline-flex; align-items: center; gap: .25rem; padding: .125rem .5rem;
  border-radius: var(--radius-full); font-size: .6875rem; font-weight: 600; white-space: nowrap;
}
.risk-badge.risk-red { background: var(--red-bg); color: var(--red-text); }
.risk-badge.risk-green { background: var(--green-bg); color: var(--green-text); }
.patient-clinical-demographics {
  display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; margin-top: .5rem;
}
.demo-chip {
  display: inline-flex; align-items: center; gap: .3125rem;
  font-size: .75rem; color: var(--text-secondary); background: var(--bg-subtle);
  padding: .1875rem .5625rem; border-radius: var(--radius-full);
}
.patient-clinical-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.patient-stat-bar {
  display: flex; align-items: center; gap: .75rem; margin-top: 1rem;
  padding-top: .75rem; border-top: 1px solid var(--border-light); flex-wrap: wrap;
}
.stat-item { display: flex; flex-direction: column; gap: .125rem; padding: 0 .25rem; }
.stat-value { font-size: 1rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.stat-label { font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.stat-divider { width: 1px; height: 24px; background: var(--border); }
@media (max-width: 768px) {
  .patient-clinical-top { flex-direction: column; align-items: stretch; }
  .patient-clinical-actions { width: 100%; justify-content: flex-start; }
  .patient-stat-bar { gap: .5rem; }
  .stat-divider { display: none; }
  .stat-item { flex: 1; min-width: 60px; }
}

/* ── Patient Layout: Tabs + Content ── */
.patient-layout {
  display: flex; gap: 1.25rem; align-items: flex-start;
}
.patient-tabs {
  width: 180px; flex-shrink: 0;
  display: flex; flex-direction: column; gap: .125rem;
  position: sticky; top: calc(var(--topbar-h) + 1rem);
}
.tab-link {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; font-size: .8125rem; font-weight: 500;
  color: var(--text-secondary); text-decoration: none;
  border-radius: var(--radius-md); transition: all .12s;
}
.tab-link:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.tab-link.active { background: var(--accent-green-light); color: var(--accent-green); font-weight: 600; }
.tab-link i { width: 16px; text-align: center; font-size: .8125rem; flex-shrink: 0; color: var(--text-tertiary); }
.tab-link.active i { color: var(--accent-green); }
.tab-badge {
  margin-left: auto; font-size: .6875rem; font-weight: 600;
  color: var(--text-tertiary); background: var(--bg-subtle);
  padding: .0625rem .4375rem; border-radius: var(--radius-full);
}
.tab-link.active .tab-badge { background: var(--accent-green-light); color: var(--accent-green); }
.patient-content { flex: 1; min-width: 0; }
.content-section { display: none; }
.content-section.active { display: block; }
@media (max-width: 900px) {
  .patient-layout { flex-direction: column; }
  .patient-tabs {
    width: 100%; flex-direction: row; overflow-x: auto; position: static;
    gap: .375rem; padding: 0 0 .5rem;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .patient-tabs::-webkit-scrollbar { display: none; }
  .tab-link { white-space: nowrap; flex-shrink: 0; border: 1px solid var(--border); }
  .tab-link.active { border-color: transparent; }
}

/* ── Clinical Cards ── */
.clinical-card {
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-radius: var(--radius-lg); margin-bottom: 1rem;
  box-shadow: var(--shadow-sm); overflow: hidden;
}
.clinical-card-header {
  display: flex; align-items: center; gap: .625rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--border-light);
  flex-wrap: wrap;
}
.clinical-card-icon { font-size: .9375rem; flex-shrink: 0; }
.clinical-card-header h3 { font-size: .875rem; font-weight: 600; margin: 0; color: var(--text-primary); flex: 1; }
.clinical-card-header .btn-clinical { margin-left: auto; }
.clinical-card-body { padding: .75rem 1rem; }
.clinical-card-body.p-0 { padding: 0; }
.clinical-card-action { font-size: .75rem; color: var(--accent-blue); text-decoration: none; white-space: nowrap; }
.clinical-card-action:hover { text-decoration: underline; }

/* ── Clinical Badges ── */
.clinical-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .125rem .5rem; border-radius: var(--radius-full);
  font-size: .6875rem; font-weight: 600; white-space: nowrap;
  background: var(--accent-blue-light); color: var(--accent-blue);
}
.clinical-badge-green { background: var(--green-bg); color: var(--green-text); }

/* ── Clinical Fields ── */
.clinical-field { display: flex; flex-direction: column; gap: .125rem; margin-bottom: .375rem; }
.cf-label { font-size: .6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; }
.cf-value { font-size: .8125rem; color: var(--text-primary); }
.risk-badge-sm {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .0625rem .375rem; border-radius: var(--radius-full);
  font-size: .625rem; font-weight: 600;
}
.tag-sm {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .0625rem .4375rem; border-radius: 3px;
  font-size: .6875rem; font-weight: 500; background: var(--bg-subtle); color: var(--text-secondary);
}
.empty-clinical {
  text-align: center; padding: 2rem 1rem; color: var(--text-tertiary);
}
.empty-clinical i { font-size: 1.5rem; display: block; margin-bottom: .5rem; opacity: .3; }
.empty-clinical p { font-size: .8125rem; margin: 0; }

/* ── Today Appointment ── */
.today-appt {
  display: flex; align-items: center; gap: .75rem;
  padding: .625rem .75rem; background: var(--accent-green-light);
  border-radius: var(--radius-md); border: 1px solid var(--accent-green-light);
}
.today-appt-time { font-size: .8125rem; font-weight: 600; color: var(--accent-green); white-space: nowrap; }
.today-appt-dur { font-size: .6875rem; color: var(--text-tertiary); }
.today-appt-info { flex: 1; min-width: 0; }
.today-appt-service { font-size: .8125rem; font-weight: 500; color: var(--text-primary); }
.today-appt-provider { font-size: .6875rem; color: var(--text-tertiary); }

/* ── Note Rows (overview) ── */
.note-row {
  display: flex; flex-direction: column; gap: .25rem;
  padding: .5rem 0; border-bottom: 1px solid var(--border-light);
}
.note-row:last-child { border-bottom: none; }
.note-row-header { display: flex; align-items: center; gap: .5rem; }
.note-row-type { font-size: .6875rem; font-weight: 600; color: var(--accent-blue); text-transform: uppercase; letter-spacing: .04em; }
.note-row-date { font-size: .6875rem; color: var(--text-tertiary); margin-left: auto; }
.note-row-text { font-size: .75rem; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.note-row-meta { display: flex; align-items: center; gap: .375rem; flex-wrap: wrap; }
.meta-chip { display: inline-flex; align-items: center; gap: .1875rem; padding: .0625rem .375rem; border-radius: 3px; font-size: .625rem; font-weight: 600; }
.pain-chip { background: var(--amber-bg); color: var(--amber-text); }
.ai-chip { background: var(--purple-bg); color: var(--purple-text); }

/* ── Clinical Table ── */
.clinical-table-wrap { overflow-x: auto; }
.clinical-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.clinical-table th {
  text-align: left; padding: .5rem .75rem; font-size: .6875rem;
  font-weight: 600; color: var(--text-tertiary); text-transform: uppercase;
  letter-spacing: .04em; border-bottom: 1px solid var(--border);
  background: var(--bg-subtle); white-space: nowrap;
}
.clinical-table td { padding: .5rem .75rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; color: var(--text-primary); }
.clinical-table tbody tr:hover { background: var(--bg-hover); }
.clinical-table tbody tr:last-child td { border-bottom: none; }
.fw-600 { font-weight: 600; }
.tr-warning { border-left: 3px solid var(--accent-amber); }

/* ── Clinical Buttons ── */
.btn-clinical {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: .375rem .75rem; font-size: .75rem; font-weight: 500;
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: var(--bg-elevated); color: var(--text-secondary);
  cursor: pointer; transition: all .12s; text-decoration: none;
}
.btn-clinical:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; }
.btn-clinical-sm { padding: .25rem .5rem; font-size: .6875rem; }
.btn-clinical-ghost { background: none; border-color: transparent; color: var(--text-secondary); }
.btn-clinical-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-clinical-primary { background: var(--accent-green); border-color: var(--accent-green); color: #fff; }
.btn-clinical-primary:hover { background: #047857; border-color: #047857; color: #fff; }

/* ── Clinical Timeline ── */
.clinical-timeline { display: flex; flex-direction: column; gap: 0; }
.tl-item { display: flex; gap: .75rem; padding: .5rem 0; }
.tl-line { width: 3px; flex-shrink: 0; border-radius: 2px; }
.tl-content { flex: 1; min-width: 0; }
.tl-header { display: flex; align-items: center; gap: .5rem; margin-bottom: .125rem; }
.tl-title { font-size: .8125rem; font-weight: 600; color: var(--text-primary); }
.tl-meta { display: flex; flex-wrap: wrap; gap: .25rem .375rem; font-size: .6875rem; color: var(--text-tertiary); }
.tl-meta span { display: inline-flex; align-items: center; gap: .1875rem; }
.tl-preview { font-size: .75rem; color: var(--text-secondary); margin-top: .1875rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Notes Layout ── */
.notes-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .notes-layout { grid-template-columns: 1fr; } }
.notes-list { display: flex; flex-direction: column; gap: .5rem; }
.notes-composer { position: sticky; top: calc(var(--topbar-h) + 1rem); }

/* ── Note Card Clinical (SOAP) ── */
.note-card-clinical {
  background: var(--bg-elevated); border: 1px solid var(--border-light);
  border-radius: var(--radius-md); overflow: hidden;
}
.note-card-clinical + .note-card-clinical { margin-top: .5rem; }
.nc-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
}
.nc-info { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.nc-type { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--accent-blue); }
.nc-therapist { font-size: .6875rem; color: var(--text-secondary); }
.nc-date { font-size: .6875rem; color: var(--text-tertiary); margin-left: auto; white-space: nowrap; }
.nc-body { padding: .625rem .75rem; display: flex; flex-direction: column; gap: .5rem; }
.nc-field { display: flex; flex-direction: column; gap: .125rem; }
.ncf-label { font-size: .625rem; font-weight: 700; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; }
.nc-field p { font-size: .75rem; color: var(--text-primary); margin: 0; line-height: 1.5; white-space: pre-wrap; }
.nc-footer { display: flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-top: 1px solid var(--border-light); }

/* ── Overview Grid ── */
.overview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.overview-col-main { display: flex; flex-direction: column; gap: 1rem; }
.overview-col-side { display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 1100px) { .overview-grid { grid-template-columns: 1fr; } }

/* ── Quick Action Button ── */
.quick-action-btn {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; padding: .625rem .75rem; font-size: .8125rem;
  color: var(--text-primary); background: var(--bg-elevated);
  border: 1px solid var(--border-light); border-radius: var(--radius-md);
  cursor: pointer; transition: all .12s; text-decoration: none;
}
.quick-action-btn:hover { border-color: var(--accent-green); background: var(--accent-green-light); color: var(--accent-green); text-decoration: none; }
.quick-action-btn i { width: 20px; text-align: center; color: var(--text-tertiary); }
.quick-action-btn:hover i { color: var(--accent-green); }

/* ── Consent Grid ── */
.consent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.consent-cell { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-secondary); }
.consent-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.consent-dot.granted { background: var(--accent-green); }
.consent-dot.denied { background: var(--accent-red); }
.consent-check-row { display: flex; flex-direction: column; gap: .5rem; }
.form-check-clinical {
  display: flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: .8125rem; color: var(--text-primary); user-select: none;
}
.form-check-clinical input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-green); cursor: pointer; }
.form-check-clinical .check-visual { width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 3px; display: grid; place-items: center; flex-shrink: 0; }
.form-check-clinical input:checked + .check-visual { background: var(--accent-green); border-color: var(--accent-green); }
.form-check-clinical input:checked + .check-visual::after { content: '\\2713'; color: #fff; font-size: 11px; font-weight: 700; }
@media (max-width: 640px) { .consent-grid { grid-template-columns: 1fr; } }

/* ── Drawer (Patient Edit) ── */
.drawer-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.4); z-index: 9999; display: none; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.drawer-overlay.open { display: block; }
.drawer {
  position: fixed; top: 0; right: 0; height: 100vh; z-index: 10000;
  background: var(--bg-elevated); box-shadow: var(--shadow-xl);
  transform: translateX(100%); transition: transform .25s cubic-bezier(.16,1,.3,1);
  overflow-y: auto; display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); flex-shrink: 0; position: sticky; top: 0; background: var(--bg-elevated); z-index: 1; }
.drawer-header h3 { margin: 0; font-size: .9375rem; font-weight: 600; }
.drawer-body { flex: 1; padding: 1.25rem; overflow-y: auto; }
.drawer-footer { padding: .75rem 1.25rem; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .5rem; flex-shrink: 0; }
.drawer-section { margin-bottom: 1.25rem; }
.drawer-section:last-child { margin-bottom: 0; }
.drawer-section h4 { font-size: .75rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 .625rem; padding-bottom: .375rem; border-bottom: 1px solid var(--border-light); }

/* ── Toast Notifications ── */
.toast-clinical {
  padding: .625rem .875rem; border-radius: var(--radius-md);
  font-size: .8125rem; font-weight: 500; display: flex; align-items: center; gap: .5rem;
}
.toast-success { background: var(--green-bg); color: var(--green-text); border: 1px solid var(--green-bg); }
.toast-error { background: var(--red-bg); color: var(--red-text); border: 1px solid var(--red-bg); }
.toast-warning { background: var(--amber-bg); color: var(--amber-text); border: 1px solid var(--amber-bg); }

/* ── Status Dots ── */
.status-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.status-dot.status-scheduled { background: var(--accent-blue); }
.status-dot.status-confirmed { background: var(--accent-green); }
.status-dot.status-checked_in { background: var(--accent-amber); }
.status-dot.status-in_treatment { background: var(--accent-purple); }
.status-dot.status-completed { background: var(--accent-green); }
.status-dot.status-cancelled { background: var(--accent-red); }
.status-dot.status-no_show { background: var(--accent-pink); }
.status-dot.status-draft { background: var(--text-tertiary); }
.status-dot.status-active { background: var(--accent-green); }

/* ── Responsive Overrides for Clinical Views ── */
@media (max-width: 900px) {
  .patient-tabs { flex-direction: row; overflow-x: auto; position: static; gap: .375rem; }
  .patient-tabs::-webkit-scrollbar { display: none; }
  .tab-link { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 768px) {
  .clinical-card-header { flex-wrap: wrap; }
  .clinical-card-header .btn-clinical { width: 100%; justify-content: center; }
  .clinical-table th { display: none; }
  .clinical-table td { display: flex; gap: .5rem; padding: .375rem .625rem; border-bottom: none; }
  .clinical-table td::before { content: attr(data-label); font-weight: 600; font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; min-width: 90px; flex-shrink: 0; }
  .clinical-table tr { display: block; border-bottom: 1px solid var(--border); padding: .25rem 0; }
  .clinical-table tr:last-child { border-bottom: none; }
  .clinical-table td:empty::before { display: none; }
  .today-appt { flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .patient-clinical-header { padding: .875rem 1rem; }
  .patient-clinical-name-row h1 { font-size: 1.125rem; }
  .demo-chip { font-size: .6875rem; }
  .stat-value { font-size: .875rem; }
  .consent-grid { grid-template-columns: 1fr; }
  .drawer { width: 100vw !important; }
}
@media (max-width: 480px) {
  .patient-show .stat-item { min-width: 0; }
  .clinical-card-body { padding: .5rem; }
}

/* ── Global Drawer Responsive ── */
.drawer { width: 520px; max-width: 100vw; }

/* ── Global Responsive Overrides ── */
@media (max-width: 768px) {
  .drawer { width: 100vw !important; }
  .drawer-overlay.open ~ .drawer, .drawer.open { width: 100vw; }
  .detail-row { flex-wrap: wrap; gap: .25rem; }
  .detail-row .detail-label { width: 100% !important; font-size: .75rem; }
  .form-row-3 { grid-template-columns: 1fr; }
  .page-actions { flex-direction: column; align-items: stretch; gap: .5rem; }
  .page-actions-title { font-size: 1.125rem; }
  div[style*="display:flex"][style*="justify-content:flex-end"] { flex-wrap: wrap; }
  .card-premium-body div[style*="display:grid;grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  .content-section .card-premium-header { flex-wrap: wrap; }
  .content-section .card-premium-header .btn { width: 100%; justify-content: center; }
}
@media (max-width: 480px) {
  .stats-grid-premium { grid-template-columns: 1fr 1fr; }
  .stat-premium-value { font-size: 1.25rem; }
  .page-header { flex-direction: column; align-items: stretch; }
  .page-header .flex { flex-wrap: wrap; gap: .5rem; }
  .card-premium-body { padding: .875rem; }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   ROOMS — Premium Design
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.rooms-page { max-width: 1100px; margin: 0 auto; }

.rooms-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.rooms-header-left { display: flex; align-items: center; gap: .875rem; }
.rooms-header-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--accent-blue), #1d4ed8); color: #fff; font-size: 1.125rem; flex-shrink: 0; }
.rooms-header-title { font-size: 1.375rem; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.3; }
.rooms-header-subtitle { font-size: .8125rem; color: var(--text-secondary); margin: .125rem 0 0; }
.rooms-header-actions { flex-shrink: 0; }

.rooms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .75rem; }

.room-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all .15s; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.room-card:hover { border-color: var(--border-hover); box-shadow: 0 4px 16px rgba(0,0,0,.06); }

.room-card-type-badge { display: flex; align-items: center; justify-content: center; width: 100%; padding: .75rem; font-size: 1.25rem; border-bottom: 1px solid var(--border-light); }

.room-card-body { padding: .875rem 1rem; flex: 1; }
.room-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.room-card-name { font-size: .9375rem; font-weight: 600; color: var(--text-primary); word-break: break-word; }
.room-card-status { flex-shrink: 0; }

.room-badge { display: inline-flex; align-items: center; gap: .35rem; font-size: .6875rem; font-weight: 600; padding: .125rem .5rem; border-radius: 999px; line-height: 1.4; }
.room-badge .dot { width: 5px; height: 5px; border-radius: 50%; }
.room-badge-active { color: var(--accent-green); background: var(--green-bg); }
.room-badge-active .dot { background: var(--accent-green); }
.room-badge-inactive { color: var(--text-tertiary); background: var(--bg-subtle); }
.room-badge-inactive .dot { background: var(--text-tertiary); }

.room-card-meta { font-size: .75rem; color: var(--text-secondary); margin-top: .25rem; display: flex; align-items: center; gap: .35rem; }
.room-card-type { margin-top: .5rem; }
.room-type-tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .6875rem; font-weight: 600; padding: .125rem .5rem; border-radius: var(--radius-sm); line-height: 1.5; }

.room-card-actions { display: flex; align-items: center; gap: .25rem; padding: .5rem 1rem; border-top: 1px solid var(--border-light); background: var(--bg-subtle); }
.room-action-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: .75rem; transition: all .12s; }
.room-action-btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-hover); }
.room-action-btn--danger:hover { color: var(--accent-red); border-color: var(--accent-red-light); background: var(--red-bg); }

.room-empty { text-align: center; padding: 3rem 1.5rem; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.room-empty-icon { font-size: 2.5rem; color: var(--text-tertiary); margin-bottom: .75rem; }
.room-empty-title { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); margin: 0 0 .375rem; }
.room-empty-text { font-size: .8125rem; color: var(--text-secondary); max-width: 360px; margin: 0 auto 1rem; }

@media (max-width: 768px) {
  .rooms-page div[style*="display:flex"][style*="gap:1.25rem"][style*="align-items:flex-start"] { flex-direction: column; }
  .rooms-grid { grid-template-columns: 1fr; }
  .rooms-header { flex-direction: column; align-items: stretch; text-align: center; }
  .rooms-header-left { flex-direction: column; text-align: center; }
  .room-card-actions { justify-content: center; }
}

@media (max-width: 768px) {
  .form-panel { position: fixed; inset: 0; z-index: 1000; border-radius: 0; overflow-y: auto; }
  .form-panel-header { position: sticky; top: 0; }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   ANALYTICS — Enterprise Design
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.ana-page { max-width: 1360px; margin: 0 auto; padding: 0 0 2rem; }

.ana-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ana-header-left h1 { font-size: 1.375rem; font-weight: 700; margin: 0 0 .25rem; display: flex; align-items: center; gap: .5rem; }
.ana-header-sub { font-size: .8125rem; color: var(--text-tertiary); margin: 0; }
.ana-header-right { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

.ana-date-pills { display: flex; background: var(--bg-subtle); border-radius: var(--radius-md); padding: 2px; border: 1px solid var(--border); }
.ana-date-pills .pill { padding: .375rem .75rem; font-size: .8125rem; font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-sm); text-decoration: none; transition: all .15s; cursor: pointer; }
.ana-date-pills .pill:hover { color: var(--text-primary); background: var(--bg-hover); text-decoration: none; }
.ana-date-pills .pill.active { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-sm); }

.ana-export-dropdown { position: relative; }
.ana-export-btn { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .875rem; font-size: .8125rem; font-weight: 500; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; transition: all .15s; }
.ana-export-btn:hover { background: var(--bg-hover); border-color: var(--border-hover); }
.ana-export-menu { position: absolute; top: 100%; right: 0; min-width: 200px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: .375rem; display: none; z-index: 50; margin-top: 4px; }
.ana-export-menu.open { display: block; }
.ana-export-menu a { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; font-size: .8125rem; color: var(--text-primary); border-radius: var(--radius-sm); text-decoration: none; transition: all .1s; }
.ana-export-menu a:hover { background: var(--bg-hover); text-decoration: none; }
.ana-export-menu a i { width: 16px; text-align: center; color: var(--text-tertiary); }

.ana-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .75rem; margin-bottom: 1.5rem; }
.kpi-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: .375rem; position: relative; overflow: hidden; transition: box-shadow .2s, transform .2s; }
.kpi-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }
.kpi-card-sm { padding: .875rem 1rem; }
.kpi-icon { width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; font-size: .9375rem; flex-shrink: 0; }
.kpi-body { flex: 1; }
.kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -.03em; color: var(--text-primary); }
.kpi-label { font-size: .75rem; color: var(--text-tertiary); font-weight: 500; margin-top: .125rem; }
.kpi-trend { display: flex; align-items: center; gap: .25rem; font-size: .6875rem; font-weight: 600; padding-top: .375rem; border-top: 1px solid var(--border-light); margin-top: .375rem; }
.kpi-trend-up { color: var(--accent-green); }
.kpi-trend-down { color: var(--accent-red); }
.kpi-trend-neutral { color: var(--text-tertiary); }
.kpi-bar { height: 3px; border-radius: 2px; background: var(--border-light); overflow: hidden; margin-top: .375rem; }
.kpi-bar-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }

.ana-kpi-subgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; margin-top: 1rem; }

.ana-tabs { display: flex; gap: .25rem; background: var(--bg-subtle); border-radius: var(--radius-lg); padding: .375rem; margin-bottom: 1.25rem; flex-wrap: wrap; border: 1px solid var(--border); }
.ana-tabs .atab { display: inline-flex; align-items: center; gap: .375rem; padding: .5rem .875rem; font-size: .8125rem; font-weight: 500; border: none; background: none; color: var(--text-secondary); cursor: pointer; border-radius: var(--radius-md); transition: all .15s; white-space: nowrap; }
.ana-tabs .atab:hover { color: var(--text-primary); background: var(--bg-hover); }
.ana-tabs .atab.active { background: var(--bg-elevated); color: var(--text-primary); font-weight: 600; box-shadow: var(--shadow-sm); }
.ana-tabs .atab i { font-size: .8125rem; }

.atab-content { display: none; }
.atab-content.active { display: block; }

.ana-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow .2s; }
.ana-card:hover { box-shadow: var(--shadow-card-hover); }
.ana-card-h { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .875rem 1.125rem; border-bottom: 1px solid var(--border-light); font-size: .875rem; font-weight: 600; }
.ana-card-h span { display: flex; align-items: center; gap: .5rem; }
.ana-card-h i { font-size: .9375rem; }
.ana-badge { font-size: .6875rem; font-weight: 500; color: var(--text-tertiary); background: var(--bg-subtle); padding: .1875rem .5rem; border-radius: var(--radius-full); white-space: nowrap; }
.ana-card-b { padding: 1.125rem; }
.ana-card-b-p0 { padding: 0; }

.ana-chart-grid { display: grid; gap: 1rem; margin-bottom: 1rem; }
.ana-chart-grid-2 { grid-template-columns: 1fr 1fr; }
.ana-chart-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.ana-card-full { grid-column: 1 / -1; }
.ana-chart { width: 100%; }
@media (max-width: 900px) { .ana-chart-grid-2, .ana-chart-grid-3 { grid-template-columns: 1fr; } }

.ana-empty { text-align: center; padding: 2rem 1rem; color: var(--text-tertiary); }
.ana-empty i { font-size: 1.5rem; display: block; margin-bottom: .5rem; opacity: .5; }
.ana-empty p { font-size: .8125rem; margin: 0; }

.ana-table-wrap { overflow-x: auto; }
.ana-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.ana-table th { text-align: left; padding: .625rem .875rem; font-size: .6875rem; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; background: var(--bg-subtle); border-bottom: 1px solid var(--border); white-space: nowrap; }
.ana-table td { padding: .625rem .875rem; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.ana-table tr:last-child td { border-bottom: none; }
.ana-table tr:hover td { background: var(--bg-hover); }
.ana-therapist { display: flex; align-items: center; gap: .625rem; }
.ana-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: .625rem; font-weight: 700; flex-shrink: 0; }
.ana-code { font-family: var(--font-mono); font-size: .6875rem; padding: .125rem .375rem; background: var(--bg-subtle); border-radius: var(--radius-xs); color: var(--text-secondary); }
.ana-progress-wrap { display: flex; align-items: center; gap: .5rem; }
.ana-progress { flex: 1; max-width: 100px; height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; }
.ana-progress-fill { height: 100%; border-radius: 3px; transition: width .4s; }
.ana-progress-label { font-size: .75rem; font-weight: 600; white-space: nowrap; }
.ana-ns { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; border-radius: var(--radius-full); font-size: .75rem; font-weight: 600; }
.ana-ns-green { background: var(--green-bg); color: var(--green-text); }
.ana-ns-amber { background: var(--amber-bg); color: var(--amber-text); }
.ana-ns-red { background: var(--red-bg); color: var(--red-text); }
.ana-pct { font-weight: 600; font-size: .8125rem; }
.pct-green { color: var(--green-text); }
.pct-amber { color: var(--amber-text); }
.pct-red { color: var(--red-text); }

.ana-metrics { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.ana-metric { text-align: center; }
.ana-metric-divider { width: 1px; background: var(--border-light); }
.am-value { font-size: 1.75rem; font-weight: 800; line-height: 1.2; }
.am-label { font-size: .8125rem; font-weight: 600; color: var(--text-primary); margin-top: .25rem; }
.am-desc { font-size: .6875rem; color: var(--text-tertiary); margin-top: .125rem; }
@media (max-width: 600px) { .ana-metrics { grid-template-columns: 1fr; } .ana-metric-divider { display: none; } .ana-metric { padding: .5rem 0; } }

.ana-reason-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; }
.ana-reason-row + .ana-reason-row { border-top: 1px solid var(--border-light); }
.ana-reason-label { font-size: .8125rem; font-weight: 500; min-width: 100px; color: var(--text-primary); }
.ana-reason-bar-wrap { flex: 1; display: flex; align-items: center; gap: .625rem; }
.ana-reason-bar { flex: 1; height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden; }
.ana-reason-fill { height: 100%; background: var(--accent-red); border-radius: 3px; transition: width .4s; }
.ana-reason-count { font-size: .75rem; font-weight: 600; color: var(--text-secondary); white-space: nowrap; min-width: 60px; text-align: right; }

.ana-risk-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; border-radius: 50%; background: var(--accent-red); color: #fff; font-size: .6875rem; font-weight: 700; margin-left: .25rem; }
.ana-risk-row { display: flex; align-items: center; gap: .625rem; padding: .625rem .875rem; transition: background .1s; }
.ana-risk-row:hover { background: var(--bg-hover); }
.ana-risk-row + .ana-risk-row { border-top: 1px solid var(--border-light); }
.ana-risk-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ana-risk-high { background: var(--accent-red); box-shadow: 0 0 0 3px var(--red-bg); }
.ana-risk-medium { background: var(--accent-amber); box-shadow: 0 0 0 3px var(--amber-bg); }
.ana-risk-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ana-risk-name { font-size: .8125rem; font-weight: 600; color: var(--text-primary); }
.ana-risk-meta { font-size: .6875rem; color: var(--text-tertiary); }
.ana-risk-count { font-size: .75rem; font-weight: 700; color: var(--accent-red); }

.fw-600 { font-weight: 600; }

@media (max-width: 768px) {
  .ana-header { flex-direction: column; }
  .ana-header-right { width: 100%; }
  .ana-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .ana-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .ana-tabs .atab { flex-shrink: 0; }
}
@media (max-width: 480px) {
  .ana-kpi-grid { grid-template-columns: 1fr; }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   TREATMENT PLAN DETAIL — Tabs & Layout
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.plan-detail-layout { display:flex; gap:1.25rem; align-items:flex-start; }
.plan-detail-tabs { flex-shrink:0; width:180px; display:flex; flex-direction:column; gap:.125rem; position:sticky; top:calc(var(--topbar-h) + 1rem); }
.plan-detail-tabs .tab-item { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; font-size:.8125rem; font-weight:500; color:var(--text-secondary); text-decoration:none; border-radius:var(--radius-md); transition:all .12s; }
.plan-detail-tabs .tab-item:hover { background:var(--bg-hover); color:var(--text-primary); text-decoration:none; }
.plan-detail-tabs .tab-item.active { background:var(--accent-green-light); color:var(--accent-green); font-weight:600; }
.plan-detail-tabs .tab-item i { width:16px; text-align:center; font-size:.8125rem; color:var(--text-tertiary); }
.plan-detail-tabs .tab-item.active i { color:var(--accent-green); }
.plan-detail-tabs .tab-item .count-badge { margin-left:auto; }
.plan-detail-content { flex:1; min-width:0; }
.plan-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
@media (max-width:900px) {
  .plan-detail-layout { flex-direction:column; }
  .plan-detail-tabs { width:100%; flex-direction:row; overflow-x:auto; position:static; gap:.375rem; }
  .plan-detail-tabs::-webkit-scrollbar { display:none; }
  .plan-detail-tabs .tab-item { white-space:nowrap; flex-shrink:0; }
}
@media (max-width:640px) {
  .plan-detail-grid { grid-template-columns:1fr; }
  .stats-grid-premium { grid-template-columns:1fr 1fr; }
}

/* ── Treatment Plan List — Global Standard Redesign ── */

/* ── Controls (Search + Status Filters) ── */
.tplan-controls { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }

.tplan-search-wrap { display: flex; align-items: center; gap: .5rem; position: relative; }
.tplan-search-icon { position: absolute; left: .875rem; color: var(--text-tertiary); font-size: .875rem; pointer-events: none; z-index: 1; }
.tplan-search-input { flex: 1; padding: .5625rem .875rem .5625rem 2.5rem; font-size: .875rem; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); color: var(--text-primary); transition: all .2s ease; width: 100%; min-width: 0; }
.tplan-search-input:focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 0 3px var(--accent-green-light); }
.tplan-search-input::placeholder { color: var(--text-tertiary); }

.tplan-filters { display: flex; align-items: center; gap: .375rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.tplan-filters::-webkit-scrollbar { display: none; }

.tplan-filter-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .8125rem; font-size: .8125rem; font-weight: 500; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-full); white-space: nowrap; text-decoration: none; transition: all .15s ease; cursor: pointer; flex-shrink: 0; line-height: 1.4; }
.tplan-filter-pill:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; border-color: var(--border-hover); }
.tplan-filter-pill.active { background: var(--accent-green); color: #fff; border-color: var(--accent-green); box-shadow: 0 2px 8px rgba(5,150,105,.25); }
.tplan-filter-pill.active:hover { background: var(--accent-green-hover); }
.tplan-filter-pill i { font-size: .6875rem; }

.tplan-count { font-size: .8125rem; color: var(--text-tertiary); margin-left: auto; white-space: nowrap; flex-shrink: 0; }

/* ── Card Grid — responsive ── */
.tplan-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .tplan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tplan-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1400px) { .tplan-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── Card ── */
.tplan-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all .25s var(--ease-out); position: relative; }
.tplan-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-hover); transform: translateY(-2px); }

.tplan-card-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; }
.tplan-card-link:hover { text-decoration: none; }

/* 4px colored left status accent */
.tplan-card-accent { position: absolute; top: 0; left: 0; width: 4px; height: 100%; border-radius: 4px 0 0 4px; }
.tplan-card--active .tplan-card-accent { background: var(--accent-green); }
.tplan-card--draft .tplan-card-accent { background: var(--text-tertiary); }
.tplan-card--completed .tplan-card-accent { background: var(--accent-blue); }
.tplan-card--on_hold .tplan-card-accent { background: var(--accent-amber); }

.tplan-card-inner { padding: 1rem 1.125rem 1rem calc(1.125rem + 4px); display: flex; flex-direction: column; gap: .625rem; flex: 1; }

/* ── Card Header ── */
.tplan-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.tplan-card-patient { display: flex; align-items: center; gap: .625rem; min-width: 0; flex: 1; }
.tplan-card-patient .avatar-initials { flex-shrink: 0; width: 36px; height: 36px; font-size: .75rem; border-radius: var(--radius-md); }
.tplan-card-patient-info { min-width: 0; }
.tplan-card-name { font-size: .875rem; font-weight: 600; color: var(--text-primary); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.35; }
.tplan-card-therapist { font-size: .6875rem; color: var(--text-tertiary); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.tplan-card .badge-status { flex-shrink: 0; }

/* ── Card Meta Rows ── */
.tplan-card-meta { display: flex; flex-direction: column; gap: .375rem; padding: .375rem 0; }

.tplan-card-meta-item { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-secondary); line-height: 1.4; min-width: 0; }
.tplan-card-meta-item i { width: 14px; text-align: center; font-size: .75rem; color: var(--text-tertiary); flex-shrink: 0; }
.tplan-card-meta-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Card Progress ── */
.tplan-card-progress { display: flex; align-items: center; gap: .5rem; padding-top: .625rem; border-top: 1px solid var(--border-light); margin-top: auto; }
.tplan-card-progress-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--bg-active); overflow: hidden; min-width: 0; }
.tplan-card-progress-fill { height: 100%; border-radius: 4px; background: var(--accent-green); transition: width .6s var(--ease-out); }
.tplan-card--completed .tplan-card-progress-fill { background: var(--accent-blue); }
.tplan-card--draft .tplan-card-progress-fill { background: var(--text-tertiary); opacity: .4; }
.tplan-card-progress-label { font-size: .6875rem; font-weight: 600; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; }
.tplan-card-arrow { font-size: .625rem; color: var(--text-tertiary); flex-shrink: 0; transition: transform .2s ease, color .2s ease; }
.tplan-card:hover .tplan-card-arrow { transform: translateX(3px); color: var(--accent-green); }

/* ── Responsive Card ── */
@media (max-width: 639px) {
  .tplan-card-inner { padding: .75rem .875rem .75rem calc(.875rem + 4px); gap: .5rem; }
  .tplan-card-meta { gap: .25rem; padding: .25rem 0; }
  .tplan-card-meta-item { font-size: .75rem; }
  .tplan-card-name { font-size: .8125rem; }
  .tplan-card-patient .avatar-initials { width: 32px; height: 32px; font-size: .6875rem; }
  .tplan-card-progress { padding-top: .5rem; }
}

/* ── Empty State ── */
.tplan-empty { text-align: center; padding: 3rem 1.5rem; }
.tplan-empty-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: var(--radius-xl); background: var(--green-bg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accent-green); }
.tplan-empty h4 { font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); margin: 0 0 .375rem; }
.tplan-empty p { font-size: .8125rem; color: var(--text-tertiary); margin: 0 0 1.25rem; max-width: 360px; margin-left: auto; margin-right: auto; }

/* ── Pagination ── */
.tplan-pagination { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-top: 1.5rem; flex-wrap: wrap; }
.tplan-pagination .page-info { font-size: .8125rem; color: var(--text-tertiary); margin-right: .75rem; white-space: nowrap; }

@media (max-width: 480px) {
  .tplan-filters { gap: .25rem; }
  .tplan-filter-pill { font-size: .75rem; padding: .3125rem .625rem; }
  .tplan-count { font-size: .75rem; }
  .tplan-search-input { font-size: .8125rem; padding: .5rem .75rem .5rem 2.25rem; }
  .tplan-pagination .page-info { width: 100%; text-align: center; margin-right: 0; margin-bottom: .25rem; }
  .tplan-pagination .btn { min-width: 36px; height: 36px; font-size: .8125rem; }
  .tplan-empty { padding: 2rem 1rem; }
  .tplan-empty-icon { width: 48px; height: 48px; font-size: 1.125rem; }
}

/* ── Treatment Plan Detail ── */
.detail-row-icon { width: 20px; text-align: center; flex-shrink: 0; }
.goal-item { display: flex; align-items: flex-start; gap: .5rem; padding: .375rem 0; font-size: .8125rem; }
.goal-item i { color: var(--accent-green); margin-top: 2px; flex-shrink: 0; }
.session-pain-up { color: var(--accent-green); }
.session-pain-down { color: var(--accent-red); }
.session-pain-flat { color: var(--text-tertiary); }
.soap-section { border: 1px solid var(--border-light); border-radius: var(--radius-md); margin-bottom: .5rem; overflow: hidden; }
.soap-section summary { display: flex; align-items: center; gap: .5rem; padding: .625rem .875rem; font-size: .8125rem; font-weight: 600; cursor: pointer; background: var(--bg-subtle); transition: background .15s; }
.soap-section summary:hover { background: var(--bg-hover); }
.soap-section summary i { width: 18px; text-align: center; }
.soap-section[open] summary { border-bottom: 1px solid var(--border-light); }
.soap-section .soap-body { padding: .75rem .875rem; }
.assessment-score-bar { height: 4px; border-radius: 4px; background: var(--border-light); overflow: hidden; min-width: 60px; }
.assessment-score-fill { height: 100%; border-radius: 4px; transition: width .4s ease; }
.stats-days { display: flex; flex-direction: column; gap: 2px; }
.stats-days .stat-premium-value { font-size: 1.25rem; }
.stats-days .stat-premium-label { font-size: .6875rem; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   CALENDAR — Appointment Calendar
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.calendar-grid { display:grid; grid-template-columns:60px repeat(7,1fr); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; font-size:.8rem; }
.calendar-time-header { border-bottom:1px solid var(--border); background:var(--bg-secondary); }
.calendar-day-header { padding:.5rem; text-align:center; border-bottom:1px solid var(--border); background:var(--bg-secondary); font-weight:600; }
.calendar-day-header.today { color:var(--primary); }
.calendar-day-header .day-name { display:block; font-size:.65rem; text-transform:uppercase; color:var(--text-tertiary); }
.calendar-day-header.today .day-name { color:var(--primary); }
.calendar-time-slot { padding:.25rem .5rem; font-size:.7rem; color:var(--text-tertiary); border-bottom:1px solid var(--border); text-align:right; background:var(--bg-secondary); }
.calendar-cell { min-height:60px; padding:2px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); background:var(--bg-primary); }
.calendar-cell.today { background:rgba(22,163,74,0.03); }
.calendar-cell:nth-child(8n) { border-right:none; }
.calendar-event { display:block; padding:2px 4px; margin:1px 0; border-left:3px solid; border-radius:var(--radius-sm); background:var(--bg-secondary); text-decoration:none; font-size:.7rem; line-height:1.3; transition:background .15s; }
.calendar-event:hover { background:var(--bg-hover); }
.event-time { font-weight:600; color:var(--text-primary); }
.event-patient { display:block; color:var(--text-primary); }
.event-therapist { display:block; color:var(--text-tertiary); font-size:.65rem; }
@media (max-width: 767.98px) { .calendar-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .calendar-grid { font-size:.7rem; min-width:700px; } }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   CANCELLATIONS — Cancellation Requests
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.cancel-request { padding:1rem 1.25rem;border-bottom:1px solid var(--border-light);transition:background .15s; }
.cancel-request:last-child { border-bottom:none; }
.cancel-request:hover { background:var(--bg-hover); }
.cancel-icon { width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0; }
.cancel-reason { margin-top:.5rem;padding:.5rem .75rem;border-radius:var(--radius-md);border-left:3px solid; }

/* ???????????????????????????????????????????????????
   2026 DASHBOARD � Modern Glass/Bento Redesign
   Asymmetric bento grid, timeline, glassmorphism
   ??????????????????????????????????????????????????? */

/* ?? Hero Header ?? */
.dash-hero {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--bg-subtle) 100%);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}

.dash-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(5, 150, 105, 0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.dash-hero-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.dash-hero-greeting {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.dash-hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent-green), #34d399);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25);
  flex-shrink: 0;
}

.dash-hero-title {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: -.03em;
  color: var(--text-primary);
}

.dash-hero-subtitle {
  font-size: .8125rem;
  color: var(--text-tertiary);
  margin: .25rem 0 0;
}

.dash-hero-date {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: .75rem 1.25rem;
  box-shadow: var(--shadow-sm);
}

.dash-hero-day {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -.02em;
}

.dash-hero-month {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.dash-hero-year {
  font-size: .6875rem;
  color: var(--text-tertiary);
  padding-left: .75rem;
  border-left: 1px solid var(--border);
}

.dash-hero-stats {
  display: flex;
  align-items: center;
  gap: .75rem;
  position: relative;
  z-index: 1;
}

.dash-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .125rem;
  padding: .625rem 1.25rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex: 1;
}

.dash-hero-stat-value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -.02em;
}

.dash-hero-stat-label {
  font-size: .6875rem;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.dash-hero-stat-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
}

/* ?? Bento Grid Stats ?? */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.bento-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.25rem;
  position: relative;
  overflow: hidden;
  transition: all .25s var(--ease-out);
  box-shadow: var(--shadow-xs);
}

.bento-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bento-accent, var(--accent-green));
  opacity: 0;
  transition: opacity .25s ease;
}

.bento-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
  border-color: var(--border-hover);
}

.bento-card:hover::before {
  opacity: 1;
}

.bento-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.bento-card-header h3 {
  font-size: .8125rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  letter-spacing: -.01em;
  color: var(--text-primary);
}

.bento-card-header h3 i {
  font-size: .875rem;
}

.bento-card-body {
  position: relative;
}

.bento-value {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text-primary);
  line-height: 1.1;
}

.bento-label {
  font-size: .75rem;
  color: var(--text-tertiary);
  font-weight: 500;
  margin-top: .25rem;
}

.bento-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border-light);
}

.bento-trend {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .6875rem;
  font-weight: 700;
  padding: .125rem .5rem;
  border-radius: var(--radius-full);
}

.bento-trend.up {
  background: var(--green-bg);
  color: var(--green-text);
}

.bento-trend.down {
  background: var(--red-bg);
  color: var(--red-text);
}

.bento-compare {
  font-size: .6875rem;
  color: var(--text-tertiary);
}

.bento-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 1.25rem;
  flex-shrink: 0;
  transition: transform .25s var(--ease-spring);
}

.bento-card:hover .bento-icon {
  transform: scale(1.1) rotate(-5deg);
}

.bento-skeleton {
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border-light) 50%, var(--bg-hover) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 20px;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ?? Main Layout ?? */
.dash-bento-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.25rem;
  align-items: start;
}

.dash-main-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dash-side-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ?? Modern Cards ?? */
.card-bento {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: all .25s var(--ease-out);
}

.card-bento:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-hover);
}

.card-bento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-subtle) 100%);
}

.card-bento-header h3 {
  font-size: .875rem;
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .5rem;
  letter-spacing: -.01em;
}

.card-bento-header h3 i {
  font-size: .9375rem;
}

.card-bento-body {
  padding: 1.25rem;
}

.btn-ghost-sm {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .375rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .15s ease;
  text-decoration: none;
}

.btn-ghost-sm:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
  text-decoration: none;
}

/* ?? Timeline View ?? */
.timeline-view {
  position: relative;
  padding-left: 1.5rem;
}

.timeline-view::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--border);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  padding-bottom: 1rem;
}

.timeline-item:last-child {
  padding-bottom: 0;
}

.timeline-marker {
  position: absolute;
  left: -1.5rem;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid var(--bg-elevated);
  box-shadow: 0 0 0 2px var(--bg-elevated);
  z-index: 1;
}

.timeline-time {
  position: absolute;
  left: -4.5rem;
  top: -2px;
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-tertiary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.timeline-card {
  margin-left: .5rem;
  padding: 1rem;
  border-radius: 16px;
  border-left: 3px solid var(--accent-blue);
  border-top: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  transition: all .15s ease;
}

.timeline-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateX(2px);
}

.timeline-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}

.timeline-patient {
  font-size: .875rem;
  font-weight: 700;
  color: var(--text-primary);
  text-decoration: none;
  transition: color .15s ease;
}

.timeline-patient:hover {
  color: var(--accent-green);
  text-decoration: none;
}

.timeline-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .75rem;
  font-size: .75rem;
  color: var(--text-secondary);
}

.timeline-meta-item {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.timeline-meta-item i {
  font-size: .6875rem;
  color: var(--text-tertiary);
}

.timeline-checkin {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: .5rem;
  padding: .375rem .75rem;
  background: var(--green-bg);
  color: var(--green-text);
  border-radius: var(--radius-full);
  font-size: .6875rem;
  font-weight: 600;
}

/* ?? Upcoming List ?? */
.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.upcoming-item {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .75rem;
  border-radius: 12px;
  transition: all .15s ease;
}

.upcoming-item:hover {
  background: var(--bg-hover);
}

.upcoming-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  padding: .5rem;
  background: var(--bg-subtle);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.upcoming-dow {
  font-size: .625rem;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: .05em;
}

.upcoming-day {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.2;
}

.upcoming-info {
  flex: 1;
  min-width: 0;
}

.upcoming-patient {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .125rem;
}

.upcoming-meta {
  font-size: .75rem;
  color: var(--text-secondary);
}

/* ?? Tasks ?? */
.task-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.task-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .75rem;
  border-radius: 12px;
  transition: all .15s ease;
}

.task-item:hover {
  background: var(--bg-hover);
}

.task-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg-elevated);
}

.task-content {
  flex: 1;
  min-width: 0;
}

.task-name {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: .125rem;
}

.task-note {
  font-size: .6875rem;
  color: var(--text-secondary);
}

/* ?? Notifications ?? */
.notif-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem;
  border-radius: 12px;
  transition: all .15s ease;
}

.notif-item:hover {
  transform: translateX(2px);
}

.notif-item i {
  flex-shrink: 0;
  font-size: .875rem;
  margin-top: .125rem;
}

.notif-content {
  flex: 1;
  min-width: 0;
}

.notif-text {
  font-size: .8125rem;
  color: var(--text-primary);
  text-decoration: none;
  line-height: 1.4;
}

.notif-text:hover {
  text-decoration: underline;
}

/* ?? Check-in Card ?? */
.card-bento-green {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--green-bg) 100%);
  border-color: rgba(5, 150, 105, 0.2);
}

.card-bento-accent {
  background: linear-gradient(135deg, var(--bg-elevated) 0%, var(--purple-bg) 100%);
  border-color: rgba(124, 58, 237, 0.15);
}

.checkin-content {
  text-align: center;
  padding: .5rem 0;
}

.checkin-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--accent-green);
  letter-spacing: -.04em;
  line-height: 1;
}

.checkin-label {
  font-size: .75rem;
  color: var(--text-secondary);
  margin-top: .25rem;
  margin-bottom: .75rem;
}

.checkin-bar {
  height: 8px;
  background: var(--bg-elevated);
  border-radius: 100px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.checkin-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-green), #34d399);
  border-radius: 100px;
  transition: width .6s var(--ease-out);
  box-shadow: 0 0 8px rgba(5, 150, 105, 0.3);
}

/* ?? Action Dock ?? */
.action-dock {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .625rem;
}

.action-dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem .75rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-elevated);
  text-decoration: none;
  color: var(--text-primary);
  transition: all .2s var(--ease-out);
  cursor: pointer;
  text-align: center;
}

.action-dock-item:hover {
  border-color: var(--accent-green);
  background: var(--accent-green-light);
  color: var(--accent-green);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

.action-dock-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.125rem;
  transition: all .2s var(--ease-spring);
}

.action-dock-item:hover .action-dock-icon {
  transform: scale(1.1) rotate(-5deg);
}

.action-dock-item span {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: -.01em;
}

/* ?? Activity Stream ?? */
.activity-skeleton {
  padding: .75rem 0;
  border-bottom: 1px solid var(--border-light);
}

.activity-skeleton:last-child {
  border-bottom: none;
}

.skeleton-line {
  height: 14px;
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border-light) 50%, var(--bg-hover) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
  margin-bottom: .5rem;
}

.skeleton-line-sm {
  height: 10px;
  width: 60%;
  background: linear-gradient(90deg, var(--bg-hover) 25%, var(--border-light) 50%, var(--bg-hover) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ?? Empty States ?? */
.empty-state-bento {
  text-align: center;
  padding: 2.5rem 1.5rem;
  color: var(--text-tertiary);
}

.empty-state-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto .75rem;
  border-radius: 16px;
  background: var(--bg-subtle);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  opacity: .5;
}

.empty-state-bento h4 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 .25rem;
}

.empty-state-bento p {
  font-size: .8125rem;
  margin: 0;
}

/* ?? Responsive ?? */
@media (max-width: 1200px) {
  .dash-bento-layout {
    grid-template-columns: 1fr 340px;
    gap: 1rem;
  }

  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 1024px) {
  .dash-bento-layout {
    grid-template-columns: 1fr;
  }

  .dash-main-col {
    order: 1;
  }

  .dash-side-col {
    order: 2;
  }

  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .dash-hero {
    padding: 1.25rem;
    border-radius: 20px;
  }

  .dash-hero-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .dash-hero-date {
    align-self: flex-start;
    padding: .5rem .875rem;
  }

  .dash-hero-day {
    font-size: 1.25rem;
  }

  .dash-hero-stats {
    flex-wrap: wrap;
  }

  .dash-hero-stat {
    flex: 1 1 calc(50% - .5rem);
    padding: .5rem .75rem;
  }

  .dash-hero-stat-divider {
    display: none;
  }

  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: .75rem;
  }

  .bento-card {
    padding: 1rem;
    border-radius: 16px;
  }

  .bento-value {
    font-size: 1.5rem;
  }

  .dash-bento-layout {
    gap: 1rem;
  }

  .card-bento {
    border-radius: 16px;
  }

  .card-bento-header {
    padding: .875rem 1rem;
  }

  .card-bento-body {
    padding: 1rem;
  }

  .timeline-view {
    padding-left: 1.25rem;
  }

  .timeline-view::before {
    left: 6px;
  }

  .timeline-time {
    display: none;
  }

  .timeline-card {
    margin-left: 0;
    padding: .875rem;
  }

  .action-dock {
    gap: .5rem;
  }

  .action-dock-item {
    padding: .875rem .625rem;
  }

  .action-dock-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .bento-grid {
    grid-template-columns: 1fr 1fr;
    gap: .625rem;
  }

  .bento-card {
    padding: .875rem;
    border-radius: 14px;
  }

  .bento-value {
    font-size: 1.375rem;
  }

  .bento-label {
    font-size: .6875rem;
  }

  .dash-hero-title {
    font-size: 1.25rem;
  }

  .dash-hero-avatar {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
  }

  .checkin-number {
    font-size: 2rem;
  }

  .action-dock-item span {
    font-size: .6875rem;
  }
}

/* ???????????????????????????????????????????????????
   INVOICES � Detail & Print
   ??????????????????????????????????????????????????? */
.invoice-layout { display: flex; gap: 1.25rem; align-items: flex-start; }
.details-grid, .payments-grid { display: grid; grid-template-columns: 1fr 340px; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { .details-grid, .payments-grid { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .invoice-layout { flex-direction: column; }
  .tabs-modern { flex-direction: row; width: 100%; overflow-x: auto; position: static; }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   REZEPTE — Prescription Detail
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.detail-row { display:flex; padding:.5rem 0; border-bottom:1px solid var(--border-light); gap:1rem; }
.detail-row:last-child { border-bottom:none; }
.detail-label { width:120px; flex-shrink:0; font-size:.8125rem; color:var(--text-tertiary); }
.detail-value { font-size:.875rem; color:var(--text-primary); }
.rezept-icd-badge { background:var(--blue-bg); color:var(--accent-blue); padding:.125rem .375rem; border-radius:4px; font-family:monospace; font-size:.75rem; margin-right:.375rem; }
@media print { .btn, .btn-ghost, form { display:none !important; } }
@media(max-width:640px){.detail-row{flex-wrap:wrap;gap:.25rem}.detail-label{width:100%;font-size:.75rem}.rezept-show-grid{grid-template-columns:1fr!important}}
@media(max-width:640px){.rezept-form-actions{flex-direction:column!important;align-items:stretch!important}.rezept-form-actions .btn{width:100%;justify-content:center}}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   RESPONSIVE GRID HELPERS
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
@media(max-width:768px){.ic-card-actions{flex-direction:column;align-items:stretch}}
@media(max-width:768px){.dta-grid{grid-template-columns:1fr!important}}
@media(max-width:768px){.assistant-grid{grid-template-columns:1fr!important}.chat-messages{max-height:240px}}
@media(max-width:768px){div[style*="display:flex;gap:1.25rem;align-items:start"]{flex-direction:column}.entity-grid{grid-template-columns:1fr}.form-panel{position:fixed;inset:0;z-index:1000;border-radius:0;overflow-y:auto}.form-panel-header{position:sticky;top:0}}

/* ── Appointments Calendar ── */
.calendar-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.calendar-grid { display: grid; grid-template-columns: 60px repeat(7, 1fr); min-width: 700px; }
.calendar-time-header { border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.calendar-day-header { padding: .5rem; text-align: center; border-bottom: 1px solid var(--border); background: var(--bg-subtle); font-size: .75rem; font-weight: 600; }
.calendar-day-header.today { background: var(--accent-green-light); color: var(--accent-green); }
.calendar-day-header .day-name { display: block; text-transform: uppercase; color: var(--text-tertiary); font-size: .625rem; }
.calendar-day-header .day-num { font-size: 1.125rem; font-weight: 700; }
.calendar-time-slot { padding: .375rem .5rem; font-size: .6875rem; color: var(--text-tertiary); text-align: right; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border-light); }
.calendar-cell { min-height: 60px; border-bottom: 1px solid var(--border-light); padding: 2px; background: var(--bg); }
.calendar-cell.today { background: rgba(5,150,105,.03); }
.calendar-event { display: block; padding: 2px 4px; margin-bottom: 1px; border-left: 3px solid var(--accent-blue); border-radius: 2px; font-size: .6875rem; line-height: 1.3; text-decoration: none; color: var(--text-primary); background: var(--bg-elevated); }
.calendar-event:hover { background: var(--bg-hover); }
.calendar-event .event-time { font-weight: 600; display: block; }
.calendar-event .event-patient { font-weight: 600; display: block; }
.calendar-event .event-therapist { color: var(--text-tertiary); font-size: .625rem; }
.appointment-card { padding: .75rem 1rem; border-left: 4px solid var(--accent-blue); background: var(--bg-elevated); border-radius: var(--radius-sm); margin-bottom: .5rem; border: 1px solid var(--border); border-left-width: 4px; }
.appt-status-select { width: auto; font-size: .75rem; padding: .25rem .5rem; }
.appt-date-input { width: auto; }

/* ── Insurance Claims — Global Standard Redesign ── */

/* ── Controls ── */
.ic-controls { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.ic-search-wrap { display: flex; align-items: center; gap: .5rem; position: relative; }
.ic-search-icon { position: absolute; left: .875rem; color: var(--text-tertiary); font-size: .875rem; pointer-events: none; z-index: 1; }
.ic-search-input { flex: 1; padding: .5625rem .875rem .5625rem 2.5rem; font-size: .875rem; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); color: var(--text-primary); transition: all .2s ease; width: 100%; min-width: 0; }
.ic-search-input:focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 0 3px var(--accent-green-light); }
.ic-search-input::placeholder { color: var(--text-tertiary); }

.ic-filters { display: flex; align-items: center; gap: .375rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px; }
.ic-filters::-webkit-scrollbar { display: none; }
.ic-filter-pill { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .8125rem; font-size: .8125rem; font-weight: 500; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-full); white-space: nowrap; text-decoration: none; transition: all .15s ease; flex-shrink: 0; line-height: 1.4; }
.ic-filter-pill:hover { background: var(--bg-hover); color: var(--text-primary); text-decoration: none; border-color: var(--border-hover); }
.ic-filter-pill.active { background: var(--accent-green); color: #fff; border-color: var(--accent-green); box-shadow: 0 2px 8px rgba(5,150,105,.25); }
.ic-filter-pill.active:hover { background: var(--accent-green-hover); }
.ic-filter-pill i { font-size: .6875rem; }
.ic-count { font-size: .8125rem; color: var(--text-tertiary); margin-left: auto; white-space: nowrap; flex-shrink: 0; }

/* ── Card Grid ── */
.ic-grid { display: grid; gap: .75rem; }
@media (min-width: 640px) { .ic-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ic-grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Card ── */
.ic-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: all .25s var(--ease-out); position: relative; }
.ic-card:hover { box-shadow: var(--shadow-card-hover); border-color: var(--border-hover); transform: translateY(-2px); }
.ic-card-inner { padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: .625rem; }
.ic-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.ic-card-ref { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ic-card-number { font-weight: 600; font-size: .875rem; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-card-amount { font-size: 1rem; font-weight: 700; color: var(--accent-green); line-height: 1.3; }
.ic-card .badge-status { flex-shrink: 0; }

.ic-card-meta { display: flex; flex-direction: column; gap: .375rem; padding: .375rem 0; }
.ic-card-meta-item { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--text-secondary); line-height: 1.4; min-width: 0; }
.ic-card-meta-item i { width: 14px; text-align: center; font-size: .75rem; color: var(--text-tertiary); flex-shrink: 0; }
.ic-card-meta-item span, .ic-card-meta-item a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-card-meta-item a { color: var(--accent-green); text-decoration: none; }
.ic-card-meta-item a:hover { text-decoration: underline; }
.ic-card-meta-item .ic-date { margin-left: auto; font-size: .75rem; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; }

/* ── Card Actions (status dropdown + view) ── */
.ic-card-actions { display: flex; align-items: center; gap: .5rem; padding-top: .625rem; border-top: 1px solid var(--border-light); margin-top: auto; }
.ic-card-actions form { flex: 1; min-width: 0; }
.ic-card-actions select { width: 100%; font-size: .75rem; padding: .3125rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-elevated); color: var(--text-primary); cursor: pointer; }
.ic-card-actions select:focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 0 2px var(--accent-green-light); }

/* ── Empty State ── */
.ic-empty { text-align: center; padding: 3rem 1.5rem; }
.ic-empty-icon { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: var(--radius-xl); background: var(--blue-bg); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--accent-blue); }
.ic-empty h4 { font-size: 1.0625rem; font-weight: 600; color: var(--text-primary); margin: 0 0 .375rem; }
.ic-empty p { font-size: .8125rem; color: var(--text-tertiary); margin: 0 0 1.25rem; max-width: 360px; margin-left: auto; margin-right: auto; }

/* ── Pagination ── */
.ic-pagination { display: flex; align-items: center; justify-content: center; gap: .25rem; margin-top: 1.5rem; flex-wrap: wrap; }
.ic-pagination .page-info { font-size: .8125rem; color: var(--text-tertiary); margin-right: .75rem; white-space: nowrap; }

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
  .ic-card-actions { flex-direction: column; align-items: stretch; }
  .ic-card-actions .btn { width: 100%; justify-content: center; min-height: 36px; }
  .ic-card-actions select { min-height: 36px; font-size: .8125rem; padding: .375rem .625rem; }
}
@media (max-width: 480px) {
  .ic-filters { gap: .375rem; padding-bottom: 4px; }
  .ic-filter-pill { font-size: .8125rem; padding: .4375rem .75rem; min-height: 36px; }
  .ic-count { font-size: .75rem; }
  .ic-search-wrap { flex-wrap: wrap; }
  .ic-search-icon { left: .75rem; }
  .ic-search-input { font-size: .875rem; padding: .5625rem .75rem .5625rem 2.25rem; }
  .ic-search-btn { flex: 1; min-width: 0; justify-content: center; }
  .ic-reset-btn { min-width: 36px; justify-content: center; }
  .ic-card-inner { padding: .75rem .875rem; gap: .5rem; }
  .ic-card-meta { gap: .375rem; padding: .25rem 0; }
  .ic-card-meta-item { font-size: .8125rem; }
  .ic-card-meta-item i { font-size: .8125rem; width: 16px; }
  .ic-card-number { font-size: .8125rem; }
  .ic-card-amount { font-size: .875rem; }
  .ic-pagination .page-info { width: 100%; text-align: center; margin-right: 0; margin-bottom: .375rem; }
  .ic-pagination .btn { min-width: 40px; height: 40px; font-size: .875rem; }
  .ic-empty { padding: 2rem 1rem; }
  .ic-empty-icon { width: 48px; height: 48px; font-size: 1.125rem; }
}
@media (max-width: 380px) {
  .ic-card-top { flex-wrap: wrap; gap: .375rem; }
  .ic-card-top .badge-status { width: 100%; }
  .ic-filter-pill { font-size: .75rem; padding: .375rem .5625rem; min-height: 34px; }
  .ic-card-meta-item { font-size: .75rem; }
  .stats-grid-premium { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .stat-premium { padding: .75rem .875rem; }
  .stat-premium-value { font-size: 1.125rem; }
  .stat-premium-label { font-size: .625rem; }
  .stat-premium-icon { width: 32px; height: 32px; font-size: .8125rem; }
}

/* ── DTA ── */
.dta-grid { display: grid; grid-template-columns: 380px 1fr; gap: 1rem; align-items: start; }
.dta-stats { display: flex; gap: 1rem; padding: .625rem .75rem; background: var(--bg-subtle); border-radius: var(--radius-sm); margin-bottom: .75rem; font-size: .8125rem; }
.dta-warning { background: var(--amber-bg); border-color: var(--accent-amber-light); }
.dta-warning-icon { font-size: 1.25rem; color: var(--accent-amber); flex-shrink: 0; margin-top: 1px; }
.goae-form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .75rem; }
.dta-table { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.dta-table th { text-align: left; padding: .5rem .75rem; font-size: .6875rem; color: var(--text-tertiary); text-transform: uppercase; background: var(--bg-subtle); }
.dta-table td { padding: .5rem .75rem; border-top: 1px solid var(--border); }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   PATIENTS — List, Duplicates & General
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
.filter-bar-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .5rem; width: 100%; }
.dup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
.dup-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   PATIENTS — Mobile Responsive
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
@media (max-width: 900px) {
  .page-actions-buttons { display: flex; flex-wrap: wrap; gap: .375rem; }
  .page-actions-buttons .btn { flex: 1; min-width: 0; justify-content: center; white-space: nowrap; font-size: .75rem; padding: .4375rem .625rem; }
}
@media (max-width: 768px) {
  .dup-grid { grid-template-columns: 1fr !important; }
  .dup-actions { flex-direction: column; align-items: stretch; }
  .dup-actions .btn { width: 100%; justify-content: center; }
  .card-premium-footer { flex-direction: column; gap: .5rem; align-items: center; text-align: center; }
  .card-premium-footer .flex { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; }
  .dup-grid dl { word-break: break-word; }
}
@media (max-width: 640px) {
  .filter-bar-form { flex-direction: column; }
  .filter-bar-search { width: 100%; min-width: 0; }
  .filter-bar-form select { width: 100%; }
  .filter-bar-form .btn { width: 100%; justify-content: center; }
  .rd-table td { word-break: break-word; overflow-wrap: break-word; }
  .rd-table td .flex.items-center.gap-2 { flex-wrap: wrap; }
  .filter-bar-search input { font-size: .8125rem; }
}
@media (max-width: 480px) {
  .page-actions-buttons { gap: .25rem; }
  .page-actions-buttons .btn { font-size: .6875rem; padding: .3125rem .375rem; min-height: 34px; }
  .page-actions-title { font-size: 1rem; }
  .page-actions-subtitle { font-size: .75rem; }
  .card-premium-body { padding: .5rem; }
  .card-premium-footer { padding: .5rem .75rem; }
  .empty-state-modern { padding: 2rem 1rem; }
  .empty-state-modern i { font-size: 1.75rem; margin-bottom: .5rem; }
  .empty-state-modern h4 { font-size: .875rem; }
  .empty-state-modern .btn { font-size: .75rem; padding: .375rem .625rem; }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   2026 DESIGN ENHANCEMENTS
   Glassmorphism, subtle gradients, micro-interactions
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */

/* ── Glassmorphism Sidebar ── */
.sidebar {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: linear-gradient(180deg, rgba(15,23,42,.97) 0%, rgba(11,17,32,.97) 40%, rgba(8,14,26,.97) 100%);
}

/* ── Glassmorphism Topbar ── */
.topbar {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 1px 0 var(--border), 0 4px 20px rgba(0,0,0,.04);
}

html.dark-mode .topbar {
  background: rgba(22, 27, 34, 0.88);
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 20px rgba(0,0,0,.15);
}

/* ── Glassmorphism Mobile Nav ── */
.mobile-bottom-nav {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(15, 23, 42, 0.92);
}

/* ── Subtle Card Gradients ── */
.card-premium {
  background: var(--bg-elevated);
  position: relative;
}

.card-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}

html.dark-mode .card-premium::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
}

.stat-premium {
  background: var(--bg-elevated);
  position: relative;
}

.stat-premium::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: linear-gradient(135deg, rgba(5, 150, 105, 0.03) 0%, transparent 60%);
  pointer-events: none;
  border-radius: inherit;
}

html.dark-mode .stat-premium::before {
  background: linear-gradient(135deg, rgba(74, 222, 128, 0.05) 0%, transparent 60%);
}

/* ── Enhanced Hover Effects ── */
.card-premium {
  position: relative;
  overflow: hidden;
}

.card-premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
  transition: left 0.6s ease;
}

.card-premium:hover::after {
  left: 100%;
}

.stat-premium {
  position: relative;
  overflow: hidden;
}

.stat-premium::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  transition: left 0.6s ease;
}

.stat-premium:hover::after {
  left: 100%;
}

/* ── Modern Focus States ── */
.btn:focus-visible,
.topbar-btn:focus-visible,
.sidebar-toggle:focus-visible,
.quick-grid-item:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

/* ── Smooth Transitions ── */
.dash-appt,
.dash-upcoming,
.dash-activity-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border-light);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dash-activity-item:last-child {
  border-bottom: none;
}

.dash-activity-item:hover {
  background: var(--bg-hover);
}

.dash-task,
.dash-notif,
.dash-activity-item {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Improved Empty States ── */
.empty-state-modern {
  position: relative;
}

.empty-state-modern i {
  opacity: 0.2;
  transition: opacity 0.3s ease;
}

.empty-state-modern:hover i {
  opacity: 0.35;
}

/* ── Badge Enhancements ── */
.badge {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.15s ease;
}

.badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* ── Search Modal Glassmorphism ── */
.search-modal {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html.dark-mode .search-modal {
  background: rgba(26, 31, 46, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Dropdown Glassmorphism ── */
.dropdown-menu {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html.dark-mode .dropdown-menu {
  background: rgba(26, 31, 46, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Notification Dropdown ── */
.notif-dropdown {
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html.dark-mode .notif-dropdown {
  background: rgba(26, 31, 46, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Scrollbar Styling ── */
.sidebar-scroll::-webkit-scrollbar {
  width: 4px;
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ── Selection Styling ── */
::selection {
  background: rgba(5, 150, 105, 0.2);
  color: var(--accent-green);
}

html.dark-mode ::selection {
  background: rgba(74, 222, 128, 0.2);
  color: var(--accent-green);
}

/* ── Print Styles ── */
@media print {
  .sidebar,
  .topbar,
  .mobile-toggle,
  .sidebar-overlay,
  .mobile-bottom-nav,
  .no-print,
  .sidebar-toggle {
    display: none !important;
  }
  .page-wrapper {
    margin-left: 0 !important;
  }
  .card {
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
  }
  body {
    background: #fff !important;
  }
  .main-content {
    padding: 1rem !important;
  }
}

/* ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝
   GLOBAL HOVER ENHANCEMENTS
   Subtle hover effects for elements missing them.
   Only on devices that support hover (not touch).
   ╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝╝ */
@media (hover: hover) {
  /* ── Table rows (general catch-all) ── */
  table:not(.no-hover) tbody:not(.no-hover) tr:not(.no-hover):hover {
    background: var(--bg-hover);
  }

  /* ── Entity cards (rooms, locations, etc.) ── */
  .entity-card {
    cursor: default;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out);
  }
  .entity-card:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-hover);
  }

  /* ── ID stat cards (invoice detail) ── */
  .id-stat {
    cursor: default;
    transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  }
  .id-stat:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
  }

  /* ── Payment timeline items ── */
  .pay-item {
    transition: background .15s ease;
    border-radius: var(--radius-sm);
    margin: 0 -.25rem;
    padding: 0 .25rem .25rem;
  }
  .pay-item:hover {
    background: var(--bg-hover);
  }
  .pay-item:hover .pay-amount {
    color: var(--accent-green-hover);
  }

  /* ── Invoice line items ── */
  .id-tbl tbody tr:hover {
    background: var(--bg-hover);
  }

  /* ── Portal items ── */
  .pd-appt, .pd-prescription {
    transition: background .15s ease, transform .15s ease;
  }
  .pd-appt:hover, .pd-prescription:hover {
    background: var(--bg-hover);
  }

  /* ── Form check labels ── */
  .form-check:hover, .form-switch-wrap:hover {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
  }

  /* ── Summary bar items ── */
  .summary-bar .summary-item {
    transition: background .15s ease;
    padding: .25rem .5rem;
    border-radius: var(--radius-sm);
    cursor: default;
  }
  .summary-bar .summary-item:hover {
    background: var(--bg-hover);
  }

  /* ── Filter pills (general) ── */
  .filter-bar .filter-group {
    transition: background .15s ease;
    padding: .125rem .375rem;
    border-radius: var(--radius-sm);
  }
  .filter-bar .filter-group:hover {
    background: var(--bg-hover);
  }

  /* ── NC item (notification center) ── */
  .nc-item {
    transition: background .15s ease, border-color .15s ease;
  }
  .nc-item:hover {
    background: var(--bg-hover);
  }

  /* ── Mobile card items ── */
  .mobile-card-item:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
  }

  /* ── TPE card ── */
  .tpe-card:hover {
    background: var(--bg-hover);
  }

  /* ── PEX card ── */
  .pex-card:hover {
    background: var(--bg-hover);
  }

  /* ── Exercise sidebar item ── */
  .ex-sidebar-item:hover {
    background: var(--bg-active);
  }

  /* ── Goal items ── */
  .goal-item {
    transition: background .15s ease;
    border-radius: var(--radius-sm);
    padding: .375rem .5rem;
  }
  .goal-item:hover {
    background: var(--bg-hover);
  }

  /* ── Settings toggle items ── */
  .settings-toggle:hover {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
  }

  /* ── Settings hours row ── */
  .settings-hours-row:hover {
    background: var(--bg-hover);
    border-radius: var(--radius-sm);
    padding-left: .375rem;
    padding-right: .375rem;
  }

  /* ── Form switch wrap ── */
  .form-switch-wrap:hover {
    background: var(--bg-hover);
    border-radius: var(--radius-xs);
  }

  /* ── Detail rows in rezept/patient show ── */
  .detail-row {
    transition: background .15s ease;
    padding: .5rem .5rem;
    border-radius: var(--radius-xs);
  }
  .detail-row:hover {
    background: var(--bg-hover);
  }

  /* ── Clinical note cards ── */
  .note-card-clinical {
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .note-card-clinical:hover {
    border-color: var(--border-hover);
    box-shadow: var(--shadow-sm);
  }

  /* ── DTA table rows ── */
  .dta-table tbody tr:hover {
    background: var(--bg-hover);
  }

  /* ── Service table rows ── */
  .service-table tbody tr:hover {
    background: var(--bg-hover);
  }

  /* ── Rezept session table rows ── */
  .rezept-session-table tbody tr:hover {
    background: var(--bg-hover);
  }

  /* ── Settings services table rows ── */
  .settings-services-table tbody tr:hover {
    background: var(--bg-hover);
  }

  /* ── Room card action buttons ── */
  .room-action-btn {
    transition: all .12s ease;
  }
  .room-action-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
    transform: translateY(-1px);
  }

  /* ── Cancel request items ── */
  .cancel-request {
    cursor: default;
  }

  /* ── Ana risk rows ── */
  .ana-risk-row {
    cursor: default;
  }

  /* ── Search results items ── */
  .search-results .result-item {
    transition: background .15s ease, transform .15s ease;
  }
  .search-results .result-item:hover {
    background: rgba(255,255,255,.06);
    transform: translateX(2px);
  }

  /* ── Authored/designed items that should feel tappable ── */
  .consent-cell:hover,
  .pd-badge:hover,
  .clinical-badge:hover,
  .meta-chip:hover {
    opacity: .85;
    transition: opacity .15s ease;
    cursor: default;
  }

  /* ── Soap details ── */
  .soap-section summary {
    cursor: pointer;
  }
}