/* ============================================================
   LUNETTERIE EYEMED OPTICAL — Design System v4.0
   Inspired by modern clinical dashboards
   ============================================================ */

/* ── 1. Design Tokens ──────────────────────────────────────── */
:root {
  --primary:         #059669;
  --primary-hover:   #047857;
  --primary-light:   #D1FAE5;
  --primary-dark:    #064E3B;
  --secondary:       #6366F1;
  --secondary-light: #EEF2FF;
  --accent:          #0EA5E9;
  --accent-light:    #E0F2FE;

  --success:       #10B981; --success-light: #D1FAE5;
  --warning:       #F59E0B; --warning-light: #FEF3C7;
  --danger:        #EF4444; --danger-light:  #FEE2E2;
  --info:          #0EA5E9; --info-light:    #E0F2FE;
  --purple:        #8B5CF6; --purple-light:  #EDE9FE;
  --pink:          #EC4899; --pink-light:    #FCE7F3;
  --orange:        #F97316; --orange-light:  #FFEDD5;
  --teal:          #14B8A6; --teal-light:    #CCFBF1;
  --rose:          #F43F5E; --rose-light:    #FFE4E6;

  --bg:            #EEF2F7;
  --surface:       #FFFFFF;
  --surface-2:     #F8FAFC;
  --surface-hover: #F1F5F9;

  --border:        #E2E8F0;
  --border-strong: #CBD5E1;

  --text:          #1A202C;
  --text-secondary:#4A5568;
  --text-muted:    #A0AEC0;
  --text-disabled: #CBD5E1;

  --shadow-xs: 0 1px 3px rgba(0,0,0,.06);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
  --shadow:    0 4px 16px rgba(0,0,0,.08);
  --shadow-md: 0 8px 24px rgba(0,0,0,.10);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.12);
  --shadow-xl: 0 24px 60px rgba(0,0,0,.16);

  /* Sidebar — light in light mode */
  --sidebar-bg:       #FFFFFF;
  --sidebar-hover:    rgba(5,150,105,.08);
  --sidebar-active:   var(--primary);
  --sidebar-text:     #64748B;
  --sidebar-text-h:   #1A202C;
  --sidebar-section:  #94A3B8;
  --sidebar-border:   #E2E8F0;
  --sidebar-logo-bg:  #F8FAFC;
  --sidebar-scroll:   rgba(0,0,0,.15);
  --sidebar-w: 255px;
  --header-h:  64px;

  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --transition:      all .18s cubic-bezier(.4,0,.2,1);
  --transition-slow: all .35s cubic-bezier(.4,0,.2,1);
  --font: 'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  /* ── Bootstrap variable bridge (light mode) ──────────────────
     Wires Bootstrap's --bs-* system to our design tokens so that
     Bootstrap components (card, form-control, etc.) follow themes */
  --bs-body-bg:              var(--bg);
  --bs-body-color:           var(--text);
  --bs-secondary-color:      var(--text-secondary);
  --bs-tertiary-color:       var(--text-muted);
  --bs-border-color:         var(--border);
  --bs-border-color-translucent: var(--border);
  --bs-secondary-bg:         var(--surface-2);
  --bs-tertiary-bg:          var(--surface-2);
  --bs-card-bg:              var(--surface);
  --bs-card-cap-bg:          var(--surface-2);
  --bs-card-border-color:    var(--border);
  --bs-primary:              var(--primary);
  --bs-link-color:           var(--primary);
  --bs-link-hover-color:     var(--primary-hover);
  --bs-form-valid-color:     var(--success);
  --bs-form-invalid-color:   var(--danger);
}

/* ── 2. Dark Mode ──────────────────────────────────────────── */
[data-theme="dark"] {
  --bg:            #0D1117;
  --surface:       #161B27;
  --surface-2:     #1E2535;
  --surface-hover: #222D42;

  --border:        #2D3748;
  --border-strong: #4A5568;

  --text:          #EDF2F7;
  --text-secondary:#CBD5E1;
  --text-muted:    #64748B;
  --text-disabled: #4A5568;

  --primary-light:   #022C22;
  --secondary-light: #1E1B4B;
  --accent-light:    #082F49;
  --success-light:   #022C22;
  --warning-light:   #1C1300;
  --danger-light:    #2D0A0A;
  --info-light:      #082F49;
  --purple-light:    #1E1040;
  --pink-light:      #2D0A1A;
  --orange-light:    #1A0B00;
  --teal-light:      #022924;
  --rose-light:      #2D0A12;

  --shadow-xs: 0 1px 3px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.5);
  --shadow-xl: 0 24px 60px rgba(0,0,0,.6);

  /* Sidebar — dark in dark mode */
  --sidebar-bg:       #0F172A;
  --sidebar-hover:    rgba(255,255,255,.07);
  --sidebar-active:   var(--primary);
  --sidebar-text:     rgba(255,255,255,.6);
  --sidebar-text-h:   rgba(255,255,255,1);
  --sidebar-section:  rgba(255,255,255,.28);
  --sidebar-border:   rgba(255,255,255,.08);
  --sidebar-logo-bg:  rgba(255,255,255,.04);
  --sidebar-scroll:   rgba(255,255,255,.15);

  /* ── Bootstrap variable bridge (dark mode) ───────────────────*/
  --bs-body-bg:              var(--bg);
  --bs-body-color:           var(--text);
  --bs-secondary-color:      var(--text-secondary);
  --bs-tertiary-color:       var(--text-muted);
  --bs-border-color:         var(--border);
  --bs-border-color-translucent: rgba(255,255,255,.1);
  --bs-secondary-bg:         var(--surface-2);
  --bs-tertiary-bg:          var(--surface-2);
  --bs-card-bg:              var(--surface);
  --bs-card-cap-bg:          var(--surface-2);
  --bs-card-border-color:    var(--border);
}

/* ── 3. Reset / Base ───────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  font-size:.875rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background-color .3s ease,color .3s ease;
}
a{color:var(--primary);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--primary-hover)}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;color:var(--text);margin-bottom:0}
img{max-width:100%;height:auto}
hr{border-color:var(--border);opacity:1}

/* ── 4. Layout ─────────────────────────────────────────────── */
.sidebar{
  position:fixed;top:0;left:0;
  width:var(--sidebar-w);height:100vh;
  background:var(--sidebar-bg);
  border-right:1px solid var(--sidebar-border);
  display:flex;flex-direction:column;
  z-index:900;overflow-y:auto;overflow-x:hidden;
  transition:transform .3s cubic-bezier(.4,0,.2,1),background .3s,border-color .3s;
  box-shadow:1px 0 0 var(--sidebar-border);
}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:var(--sidebar-scroll);border-radius:4px}

.main-content{
  margin-left:var(--sidebar-w);
  min-height:100vh;
  background:var(--bg);
  display:flex;flex-direction:column;
}
.sidebar-overlay{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.55);z-index:850;
}

/* ── 5. Sidebar Content ────────────────────────────────────── */
.logo{
  padding:1.4rem 1.25rem 1.2rem;
  border-bottom:1px solid var(--sidebar-border);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--sidebar-logo-bg);
}
.logo img{max-height:40px;max-width:160px;width:auto;height:auto;object-fit:contain;display:block;}
[data-theme="dark"] .logo img{filter:brightness(1.15) saturate(.9);}

.sidebar-content{padding:.75rem .875rem 2rem;flex:1}

.sidebar-content h6{
  font-size:.65rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sidebar-section);
  padding:1.2rem .625rem .4rem;margin:0;
}

.nav-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.6rem .875rem;
  border-radius:var(--radius-sm);
  color:var(--sidebar-text);
  font-size:.845rem;font-weight:500;
  cursor:pointer;transition:var(--transition);
  margin-bottom:2px;white-space:nowrap;overflow:hidden;
}
.nav-item:hover{background:var(--sidebar-hover);color:var(--sidebar-text-h)}
.nav-item i{
  width:18px;height:18px;text-align:center;font-size:.875rem;flex-shrink:0;
  color:var(--sidebar-text);transition:var(--transition);
  display:inline-flex;align-items:center;justify-content:center;
}
.nav-item:hover i{color:var(--sidebar-text-h)}
.nav-item.active{
  background:var(--primary);
  color:#fff;font-weight:600;
  box-shadow:0 2px 8px rgba(5,150,105,.35);
}
.nav-item.active i{color:#fff !important}
.sidebar-content a{display:block;text-decoration:none;color:inherit}

.nav-badge{
  margin-left:auto;flex-shrink:0;
  background:var(--orange)!important;color:#fff;
  font-size:.68rem;font-weight:700;line-height:1;
  padding:.22rem .42rem;border-radius:var(--radius-full);
  min-width:1.1rem;text-align:center;
  box-shadow:0 0 0 1px rgba(0,0,0,.06);
}

/* ── 6. Top Header ─────────────────────────────────────────── */
.top-header{
  height:var(--header-h);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.75rem;gap:1rem;
  position:sticky;top:0;z-index:800;flex-shrink:0;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.header-left{
  display:flex;align-items:center;gap:.875rem;
  font-size:.84rem;color:var(--text-muted);flex:1;min-width:0;
}
.header-breadcrumb{
  display:flex;align-items:center;gap:.4rem;font-size:.82rem;
  color:var(--text-muted);
}
.header-breadcrumb span{color:var(--text);font-weight:600}
.header-right{display:flex;align-items:center;gap:.75rem;flex-shrink:0}

.profile-avatar{
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(135deg,var(--primary) 0%,#0D9488 100%);
  display:flex;align-items:center;justify-content:center;
  font-size:.75rem;font-weight:700;color:white;flex-shrink:0;
  box-shadow:0 2px 8px rgba(5,150,105,.35);
}
.theme-toggle{
  width:36px;height:36px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);background:var(--surface);
  color:var(--text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:.9rem;transition:var(--transition);
}
.theme-toggle:hover{background:var(--surface-2);color:var(--primary);border-color:var(--primary)}

/* ── 7. Page Header ────────────────────────────────────────── */
.page-header,.header-section{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:1.75rem;
  flex-wrap:wrap;gap:1rem;
}
.page-header h3,.header-section h3,
.page-header h4,.header-section h4{
  font-size:1.3rem;font-weight:800;color:var(--text);margin:0;
}
.page-header small,.header-section small{
  font-size:.78rem;color:var(--text-muted);display:block;margin-top:2px;
}
.page-header .btn-light,.header-section .btn-light{
  background:var(--surface);border-color:var(--border);color:var(--text-secondary);
}
.page-header .btn-light:hover,.header-section .btn-light:hover{
  background:var(--surface-2);color:var(--text);border-color:var(--border-strong);
}

/* ── 8. Cards ──────────────────────────────────────────────── */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);
}
.card-body{padding:1.4rem}
.card-header{
  padding:1rem 1.4rem;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  font-weight:700;font-size:.875rem;color:var(--text);
  border-radius:var(--radius-md) var(--radius-md) 0 0 !important;
  display:flex;align-items:center;gap:.5rem;
}
.card-footer{
  padding:.875rem 1.4rem;border-top:1px solid var(--border);
  background:var(--surface-2);
  border-radius:0 0 var(--radius-md) var(--radius-md);
}

/* Detail rows */
.detail-row{display:flex;gap:1rem;align-items:flex-start;padding:.6rem 0;border-bottom:1px solid var(--border)}
.detail-row:last-child{border-bottom:none}
.detail-label{font-size:.77rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);min-width:140px;flex-shrink:0;padding-top:2px}
.detail-value{font-size:.875rem;color:var(--text);font-weight:500}
.detail-value.empty{color:var(--text-muted);font-style:italic;font-weight:400}

/* ── 9. Tables ─────────────────────────────────────────────── */
.table{color:var(--text);font-size:.845rem;border-color:var(--border);margin-bottom:0}
.table thead th{
  background:var(--surface-2);color:var(--text-muted);
  font-size:.71rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;
  border-bottom:2px solid var(--border);border-top:none;
  padding:.75rem 1rem;white-space:nowrap;
}
.table tbody tr{border-bottom:1px solid var(--border);transition:background-color .12s ease}
.table tbody tr:last-child{border-bottom:none}
.table tbody tr:hover{background-color:var(--surface-hover)}
.table tbody td{padding:.875rem 1rem;vertical-align:middle;border:none;color:var(--text-secondary)}
.table tbody td strong{color:var(--text)}
.table-responsive{
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-xs);
  overflow:hidden;
}
.admin-table-container{
  background:var(--surface);border-radius:var(--radius-md);
  border:1px solid var(--border);box-shadow:var(--shadow-xs);overflow:hidden;
}

/* ── Data Card ───────────────────────────────────────────────── */
.data-card{
  background:var(--surface);border-radius:var(--radius-md);
  border:1px solid var(--border);box-shadow:var(--shadow-xs);overflow:hidden;
}
.data-card-header{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;
  padding:.9rem 1.25rem;border-bottom:1px solid var(--border);
}
.data-card-title{font-size:.9rem;font-weight:700;color:var(--text)}
.data-card-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  background:var(--primary-light);color:var(--primary);
  border-radius:var(--radius-full);font-size:.68rem;font-weight:700;margin-left:.4rem;
}

/* ── Patient Stats strip ─────────────────────────────────────── */
.pt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.pt-stat-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  padding:1rem 1.25rem;display:flex;align-items:center;gap:.9rem;
  box-shadow:var(--shadow-xs);transition:var(--transition-slow);
}
.pt-stat-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.pt-stat-icon{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.pt-stat-body{min-width:0}
.pt-stat-num{font-size:1.6rem;font-weight:800;line-height:1;color:var(--text);letter-spacing:-.02em}
.pt-stat-lbl{font-size:.73rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem}
.pt-stat-sub{font-size:.72rem;color:var(--success);font-weight:600;margin-top:.15rem}
[data-theme="dark"] .pt-stat-icon{filter:brightness(.85)}
.pt-icon-primary{background:var(--primary-light);color:var(--primary)}
.pt-icon-success{background:var(--success-light);color:var(--success)}
.pt-icon-info{background:var(--info-light);color:var(--info)}
.pt-icon-danger{background:var(--danger-light);color:var(--danger)}
.pt-icon-warning{background:var(--warning-light);color:var(--warning)}

/* ── Patient Table ───────────────────────────────────────────── */
.pt-table-wrap{overflow-x:auto}
.pt-table{width:100%;table-layout:auto;margin:0;border-collapse:collapse}
.pt-table thead th{
  background:var(--surface-2);color:var(--text-muted);
  font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  padding:.65rem 1rem;border-bottom:1px solid var(--border);border-top:none;
  white-space:nowrap;
}
.pt-table tbody tr{border-bottom:1px solid var(--border);transition:background .12s}
.pt-table tbody tr:last-child{border-bottom:none}
.pt-table tbody tr:hover{background:var(--surface-hover)}
.pt-table tbody td{
  padding:.7rem 1rem;vertical-align:middle;border:none;
  color:var(--text);
}
[data-theme="dark"] .pt-table thead th{background:var(--surface-2)}
[data-theme="dark"] .pt-table tbody tr{background:var(--surface)}
[data-theme="dark"] .pt-table tbody tr:nth-child(even){background:var(--surface-2)}
[data-theme="dark"] .pt-table tbody tr:hover{background:var(--surface-hover)}
[data-theme="dark"] .pt-table-wrap{background:var(--surface)}
[data-theme="dark"] .data-card{background:var(--surface)}
[data-theme="dark"] .pt-stat-card{background:var(--surface)}

/* ── Patient cell components ─────────────────────────────────── */
.pt-code{font-family:monospace;font-size:.77rem;color:var(--text-secondary);letter-spacing:.02em;white-space:nowrap}
.pt-identity{display:flex;align-items:center;gap:.65rem;min-width:0}
.pt-avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:.78rem;font-weight:700;
}
.pt-info{min-width:0;flex:1}
.pt-name{
  font-size:.845rem;font-weight:600;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pt-email{
  font-size:.72rem;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-top:1px;max-width:220px;
}
.pt-age{font-size:.82rem;color:var(--text);white-space:nowrap}
.pt-visit-date{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.8rem;color:var(--text);white-space:nowrap;
}
.pt-visit-date.overdue{color:var(--danger);font-weight:600}
.pt-visit-empty{color:var(--text-secondary);font-size:.82rem}

/* Status pill */
.pt-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.71rem;font-weight:700;padding:.25rem .65rem;
  border-radius:var(--radius-full);letter-spacing:.02em;white-space:nowrap;
}
.pt-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0}
.pt-pill-active{background:var(--success-light);color:var(--success)}
.pt-pill-active .pt-dot{background:var(--success)}
.pt-pill-inactive{background:var(--danger-light);color:var(--danger)}
.pt-pill-inactive .pt-dot{background:var(--danger)}
.pt-pill-warn{background:var(--warning-light);color:var(--warning)}
.pt-pill-warn .pt-dot{background:var(--warning)}

/* Actions cell */
.pt-actions-cell{text-align:center;padding:.75rem .5rem !important}
.pt-menu-btn{
  width:28px;height:28px;border-radius:6px;
  background:transparent;border:none;
  color:var(--text-muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.78rem;transition:var(--transition);
}
.pt-menu-btn:hover,.pt-menu-btn.pt-menu-open{
  background:var(--surface-2);color:var(--text);
}

/* Body-level floating dropdown */
.pt-dropdown{
  position:absolute;z-index:9999;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:.3rem;min-width:180px;
  animation:dropIn .12s ease;
}
@keyframes dropIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.pt-dropdown-item{
  display:flex;align-items:center;gap:.55rem;
  padding:.48rem .65rem;border-radius:var(--radius-sm);
  font-size:.8rem;font-weight:500;color:var(--text-secondary);
  text-decoration:none;transition:background .1s;
  cursor:pointer;background:none;border:none;width:100%;text-align:left;
}
.pt-dropdown-item:hover{background:var(--surface-2);color:var(--text)}
.pt-dropdown-item i{width:13px;text-align:center;font-size:.73rem;flex-shrink:0}
.pt-dropdown-danger{color:var(--danger) !important}
.pt-dropdown-danger:hover{background:var(--danger-light) !important}
.pt-dropdown-divider{height:1px;background:var(--border);margin:.25rem 0}

/* keep old classes for other pages */
.row-menu-wrap{position:relative;display:inline-block}
.row-menu-btn{width:30px;height:30px;border-radius:var(--radius-sm);background:transparent;border:none;color:var(--text-muted);display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;cursor:pointer;transition:var(--transition)}
.row-menu-btn:hover{background:var(--surface-2);color:var(--text)}
.row-menu-item{display:flex;align-items:center;gap:.6rem;padding:.5rem .7rem;border-radius:var(--radius-sm);font-size:.8rem;font-weight:500;color:var(--text-secondary);text-decoration:none;transition:var(--transition);cursor:pointer;background:none;border:none;width:100%;text-align:left}
.row-menu-item:hover{background:var(--surface-2);color:var(--text)}
.row-menu-danger{color:var(--danger)!important}
.row-menu-danger:hover{background:var(--danger-light)!important;color:var(--danger)!important}
.row-menu-divider{height:1px;background:var(--border);margin:.25rem 0}
.table-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.4rem;border-bottom:1px solid var(--border);
  background:var(--surface);gap:1rem;flex-wrap:wrap;
}
.table-header h5{font-size:.9rem;font-weight:700;color:var(--text)}

/* ── 10. Forms ─────────────────────────────────────────────── */
.form-label{font-size:.79rem;font-weight:600;color:var(--text-secondary);margin-bottom:.35rem;display:block}
.form-control,.form-select{
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);color:var(--text);
  font-size:.875rem;padding:.5rem .875rem;height:40px;
  transition:var(--transition);font-family:var(--font);
}
textarea.form-control{height:auto;min-height:90px;resize:vertical}
.form-control:focus,.form-select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(5,150,105,.12);
  background:var(--surface);color:var(--text);outline:none;
}
.form-control::placeholder{color:var(--text-muted)}
.form-control:disabled,.form-select:disabled{background:var(--surface-2);color:var(--text-muted);cursor:not-allowed}
.form-text{font-size:.75rem;color:var(--text-muted);margin-top:.25rem}
.form-check-input:checked{background-color:var(--primary);border-color:var(--primary)}
.form-check-input:focus{box-shadow:0 0 0 3px rgba(5,150,105,.15);border-color:var(--primary)}

.search-bar{
  display:flex;align-items:center;gap:.5rem;
  background:var(--surface);border:1.5px solid var(--border);
  border-radius:var(--radius-sm);padding:.4rem .875rem;
  transition:var(--transition);min-width:220px;height:40px;
}
.search-bar:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px rgba(5,150,105,.1)}
.search-bar i{color:var(--text-muted);font-size:.8rem;flex-shrink:0}
.search-bar input{border:none;background:transparent;outline:none;font-size:.855rem;color:var(--text);width:100%;font-family:var(--font)}
.search-bar input::placeholder{color:var(--text-muted)}

/* ── 11. Buttons ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  font-size:.845rem;font-weight:600;padding:.5rem 1.1rem;
  border-radius:var(--radius-sm);transition:var(--transition);
  border:1.5px solid transparent;cursor:pointer;white-space:nowrap;
  font-family:var(--font);line-height:1.4;text-decoration:none;height:40px;
}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn:disabled,.btn.disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn-sm{font-size:.78rem;padding:.35rem .8rem;height:32px}
.btn-lg{font-size:.95rem;padding:.65rem 1.4rem;height:46px}

.btn-primary{background:var(--primary);border-color:var(--primary);color:white}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:white;box-shadow:0 4px 14px rgba(5,150,105,.4)}

.btn-secondary{background:var(--surface);border-color:var(--border);color:var(--text-secondary)}
.btn-secondary:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}

.btn-success{background:var(--success)!important;border-color:var(--success)!important;color:white!important}
.btn-success:hover{background:#059669!important;border-color:#059669!important;color:white!important;box-shadow:0 4px 14px rgba(16,185,129,.4)!important}

.btn-danger{background:var(--danger);border-color:var(--danger);color:white}
.btn-danger:hover{background:#DC2626;border-color:#DC2626;color:white;box-shadow:0 4px 14px rgba(239,68,68,.35)}

.btn-warning{background:var(--warning);border-color:var(--warning);color:white}
.btn-warning:hover{background:#D97706;border-color:#D97706;color:white}

.btn-info{background:var(--info);border-color:var(--info);color:white}
.btn-info:hover{background:#0284C7;border-color:#0284C7;color:white}

.btn-light{background:var(--surface);border-color:var(--border);color:var(--text-secondary)}
.btn-light:hover{background:var(--surface-2);color:var(--text);border-color:var(--border-strong)}

.btn-outline-primary{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn-outline-primary:hover{background:var(--primary);color:white;box-shadow:0 4px 14px rgba(5,150,105,.3)}

.btn-outline-secondary{background:transparent;border-color:var(--border-strong);color:var(--text-secondary)}
.btn-outline-secondary:hover{background:var(--surface-2);color:var(--text)}

.btn-outline-danger{background:transparent;border-color:var(--danger);color:var(--danger)}
.btn-outline-danger:hover{background:var(--danger);color:white}

.btn-outline-info{background:transparent;border-color:var(--info);color:var(--info)}
.btn-outline-info:hover{background:var(--info);color:white}

.action-btn{
  width:32px;height:32px;border-radius:var(--radius-sm);
  border:1.5px solid var(--border);background:var(--surface);
  color:var(--text-muted);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.8rem;transition:var(--transition);text-decoration:none;padding:0;flex-shrink:0;
}
.action-btn:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary)}
.action-btn.text-danger:hover{background:var(--danger-light);color:var(--danger);border-color:var(--danger)}
.fw-600{font-weight:600!important}

/* ── 12. Status Badges ──────────────────────────────────────── */
.status-badge,.badge{
  display:inline-flex;align-items:center;gap:.3rem;
  padding:.3rem .7rem;border-radius:var(--radius-full);
  font-size:.71rem;font-weight:700;letter-spacing:.03em;white-space:nowrap;
}
.status-active,.badge-success   {background:var(--success-light);color:#065F46}
.status-inactive,.badge-danger  {background:var(--danger-light); color:#991B1B}
.status-scheduled,.badge-info   {background:var(--info-light);   color:#075985}
.status-pending,.badge-warning  {background:var(--warning-light);color:#92400E}
.status-discharged              {background:var(--secondary-light);color:#3730A3}
.status-deceased                {background:var(--surface-2);color:var(--text-muted)}
.status-paid                    {background:var(--success-light);color:#065F46}
.status-partial                 {background:var(--warning-light);color:#92400E}
.status-unpaid                  {background:var(--danger-light); color:#991B1B}
.status-cancelled               {background:var(--danger-light); color:#991B1B}
.status-completed               {background:var(--success-light);color:#065F46}
.status-confirmed               {background:var(--info-light);   color:#075985}
.status-low-stock               {background:var(--warning-light);color:#92400E}
.status-out-of-stock            {background:var(--danger-light); color:#991B1B}
.status-in-stock                {background:var(--success-light);color:#065F46}
/* appointment request statuses */
.s-pending   {background:var(--warning-light);color:#92400E}
.s-confirmed {background:var(--info-light);   color:#075985}
.s-completed {background:var(--success-light);color:#065F46}
.s-cancelled {background:var(--danger-light); color:#991B1B}
.appt-status {display:inline-flex;align-items:center;padding:.3rem .7rem;border-radius:var(--radius-full);font-size:.71rem;font-weight:700;white-space:nowrap}

.bg-success{background-color:var(--success)!important}
.bg-danger {background-color:var(--danger)!important}
.bg-warning{background-color:var(--warning)!important}
.bg-info   {background-color:var(--info)!important}
.bg-primary{background-color:var(--primary)!important}

/* ── 13. Stat Cards (circular icons, inspired by screenshot) ── */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1.25rem;
  margin-bottom:1.75rem;
}

.stat-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:1.4rem 1.4rem 1.3rem;
  box-shadow:var(--shadow-xs);
  display:flex;align-items:center;gap:1.1rem;
  transition:var(--transition-slow);
  cursor:default;
}
.stat-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}

/* Circular icon containers */
.stat-icon{
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;flex-shrink:0;
}
.stat-icon.green  {background:linear-gradient(135deg,#10B981,#059669);color:white;box-shadow:0 6px 16px rgba(5,150,105,.35)}
.stat-icon.blue   {background:linear-gradient(135deg,#38BDF8,#0EA5E9);color:white;box-shadow:0 6px 16px rgba(14,165,233,.35)}
.stat-icon.purple {background:linear-gradient(135deg,#A78BFA,#7C3AED);color:white;box-shadow:0 6px 16px rgba(124,58,237,.35)}
.stat-icon.orange {background:linear-gradient(135deg,#FB923C,#EA580C);color:white;box-shadow:0 6px 16px rgba(234,88,12,.35)}
.stat-icon.red    {background:linear-gradient(135deg,#F87171,#DC2626);color:white;box-shadow:0 6px 16px rgba(220,38,38,.35)}
.stat-icon.teal   {background:linear-gradient(135deg,#2DD4BF,#0D9488);color:white;box-shadow:0 6px 16px rgba(13,148,136,.35)}
.stat-icon.indigo {background:linear-gradient(135deg,#818CF8,#4F46E5);color:white;box-shadow:0 6px 16px rgba(79,70,229,.35)}
.stat-icon.pink   {background:linear-gradient(135deg,#F472B6,#DB2777);color:white;box-shadow:0 6px 16px rgba(219,39,119,.35)}
.stat-icon.yellow {background:linear-gradient(135deg,#FBBF24,#D97706);color:white;box-shadow:0 6px 16px rgba(217,119,6,.35)}
.stat-icon.cyan   {background:linear-gradient(135deg,#22D3EE,#0891B2);color:white;box-shadow:0 6px 16px rgba(8,145,178,.35)}

.stat-content{flex:1;min-width:0}
.stat-number{
  font-size:1.75rem;font-weight:800;line-height:1;
  color:var(--text);letter-spacing:-.02em;margin-bottom:.25rem;
}
.stat-label{font-size:.78rem;color:var(--text-muted);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.stat-sub{font-size:.75rem;color:var(--success);font-weight:600;margin-top:.3rem;display:flex;align-items:center;gap:.25rem}

/* ── 14. Dashboard Components ──────────────────────────────── */
.dashboard-columns{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;margin-bottom:1.75rem}
.dashboard-column{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);box-shadow:var(--shadow-xs);
  display:flex;flex-direction:column;
}
.dashboard-column-header{
  padding:1rem 1.4rem;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
}
.dashboard-column-header h6{font-size:.855rem;font-weight:700;color:var(--text);margin:0}
.dashboard-column-body{padding:.5rem;overflow-y:auto;flex:1;max-height:340px}
.dashboard-column-body::-webkit-scrollbar{width:4px}
.dashboard-column-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}

#columnsMenu{scrollbar-width:thin;scrollbar-color:var(--text-muted) transparent}
#columnsMenu::-webkit-scrollbar{width:6px}
#columnsMenu::-webkit-scrollbar-track{background:transparent}
#columnsMenu::-webkit-scrollbar-thumb{background:var(--text-muted);border-radius:4px}
#columnsMenu::-webkit-scrollbar-thumb:hover{background:var(--text)}

.appointment-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.65rem .75rem;border-radius:var(--radius-sm);
  transition:var(--transition);
}
.appointment-item:hover{background:var(--surface-hover)}
.appt-time{font-size:.75rem;font-weight:700;color:var(--primary);min-width:48px;text-align:right}
.appt-info{flex:1;min-width:0}
.appt-name{font-size:.845rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt-service{font-size:.75rem;color:var(--text-muted);margin-top:1px}

/* ── Dashboard Hero ─────────────────────────────────────────── */
.dash-hero{
  background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark,#064e3b) 100%);
  border-radius:var(--radius-lg);padding:1.75rem 2rem;
  display:flex;align-items:center;justify-content:space-between;
  box-shadow:0 8px 32px rgba(var(--primary-rgb,5,150,105),.28);
  position:relative;overflow:hidden;gap:1.25rem;
}
.dash-hero::before{
  content:'';position:absolute;width:280px;height:280px;border-radius:50%;
  background:rgba(255,255,255,.06);top:-80px;right:60px;pointer-events:none;
}
.dash-hero::after{
  content:'';position:absolute;width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.04);bottom:-60px;right:10px;pointer-events:none;
}
.dash-hero-left{position:relative;z-index:1;}
.dash-hero-greeting{
  font-size:1.6rem;font-weight:800;color:#fff;
  margin-bottom:.3rem;letter-spacing:-.01em;line-height:1.2;
}
.dash-hero-greeting .hero-name{color:rgba(255,255,255,.9);}
.dash-hero-sub{font-size:.875rem;color:rgba(255,255,255,.72);font-weight:400;}
.dash-hero-badges{display:flex;gap:.5rem;margin-top:.85rem;flex-wrap:wrap;}
.dash-hero-badge{
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(255,255,255,.15);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-full);
  color:#fff;font-size:.76rem;font-weight:600;padding:.28rem .75rem;
}
.dash-hero-date{
  display:flex;align-items:center;gap:.9rem;
  position:relative;z-index:1;flex-shrink:0;
}
.dash-hero-day{
  font-size:3.5rem;font-weight:900;color:#fff;line-height:1;
  text-shadow:0 2px 12px rgba(0,0,0,.15);
}
.dash-hero-month{
  font-size:.8rem;font-weight:700;color:rgba(255,255,255,.9);
  text-transform:uppercase;letter-spacing:.07em;
}
.dash-hero-weekday{font-size:.75rem;color:rgba(255,255,255,.65);margin-top:.1rem;}
.dash-hero-clock{
  font-size:1rem;font-weight:700;color:rgba(255,255,255,.85);
  font-variant-numeric:tabular-nums;letter-spacing:.03em;margin-top:.2rem;
}
@media(max-width:600px){
  .dash-hero{flex-direction:column;align-items:flex-start;gap:.75rem;}
  .dash-hero-date{display:none;}
  .dash-hero-greeting{font-size:1.3rem;}
}

/* ── Quick Actions ──────────────────────────────────────────── */
.quick-actions{
  display:flex;flex-wrap:wrap;gap:.625rem;
}
.qa-card{
  display:flex;align-items:center;gap:.6rem;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:.6rem 1rem;
  text-decoration:none;color:var(--text-secondary);font-size:.82rem;font-weight:600;
  transition:var(--transition-slow);box-shadow:var(--shadow-xs);white-space:nowrap;
}
.qa-card:hover{transform:translateY(-2px);box-shadow:var(--shadow);color:var(--text);border-color:var(--primary)}
.qa-icon{
  width:28px;height:28px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;flex-shrink:0;
}

/* ── Dashboard Item rows ─────────────────────────────────────── */
.dash-item{
  display:flex;align-items:center;gap:.75rem;
  padding:.7rem .875rem;border-radius:var(--radius-sm);
  transition:var(--transition);
}
.dash-item:hover{background:var(--surface-hover)}
.dash-item-avatar{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;
}
.dash-item-body{flex:1;min-width:0}
.dash-item-name{font-size:.845rem;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-item-meta{font-size:.73rem;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.dash-item-meta i{font-size:.65rem;opacity:.7}
.dash-item-badge{
  font-size:.68rem;font-weight:700;padding:.2rem .55rem;
  border-radius:var(--radius-full);flex-shrink:0;
}
.badge-today{background:var(--primary);color:#fff}
.badge-date{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}
.badge-warn{background:var(--warning-light);color:var(--warning)}

.dash-empty{text-align:center;padding:2.5rem 1.5rem;color:var(--text-muted)}
.dash-empty i{font-size:2rem;opacity:.25;display:block;margin-bottom:.75rem}
.dash-empty p{font-size:.82rem;margin:0}

.view-all-link{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.75rem;border-top:1px solid var(--border);
  font-size:.8rem;font-weight:600;color:var(--primary);
  text-decoration:none;transition:var(--transition);
  border-radius:0 0 var(--radius-md) var(--radius-md);
}
.view-all-link:hover{background:var(--primary-light);color:var(--primary)}

/* keep old classes for other pages */
.quick-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.875rem;margin-bottom:1.75rem}
.quick-link-card{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:1.1rem;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  text-align:center;text-decoration:none;color:var(--text-secondary);
  font-size:.82rem;font-weight:600;transition:var(--transition-slow);box-shadow:var(--shadow-xs);
}
.quick-link-card:hover{
  border-color:var(--primary);background:var(--primary-light);color:var(--primary);
  transform:translateY(-3px);box-shadow:var(--shadow-md);
}
.quick-link-card i{font-size:1.4rem;color:var(--primary)}

/* ── 15. Modals ─────────────────────────────────────────────── */
.modal-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-xl)}
.modal-header{border-bottom:1px solid var(--border);padding:1.2rem 1.5rem}
.modal-title{font-size:.95rem;font-weight:700;color:var(--text)}
.modal-body{padding:1.4rem 1.5rem}
.modal-footer{border-top:1px solid var(--border);padding:.9rem 1.5rem;background:var(--surface-2);border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* ── 16. Toasts ─────────────────────────────────────────────── */
.toast-container-fixed{
  position:fixed;top:1.5rem;right:1.5rem;z-index:1100;
  display:flex;flex-direction:column;gap:.5rem;
  pointer-events:none;width:320px;
}
.toast-item{
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:.9rem 1rem;
  display:flex;align-items:flex-start;gap:.75rem;
  box-shadow:var(--shadow-lg);pointer-events:all;
  animation:slideInRight .25s ease;
}
.toast-item-icon{font-size:1rem;margin-top:1px}
.toast-item.toast-success .toast-item-icon{color:var(--success)}
.toast-item.toast-error   .toast-item-icon{color:var(--danger)}
.toast-item.toast-warning .toast-item-icon{color:var(--warning)}
.toast-item.toast-info    .toast-item-icon{color:var(--info)}
.toast-item-body{flex:1;min-width:0}
.toast-item-title{font-size:.845rem;font-weight:700;color:var(--text)}
.toast-item-msg  {font-size:.8rem;color:var(--text-secondary);margin-top:2px}
.toast-item-close{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:1.1rem;line-height:1;padding:0;margin-top:-2px;flex-shrink:0}

/* ── 17. Empty States ────────────────────────────────────────── */
.empty-state{text-align:center;padding:3.5rem 2rem;color:var(--text-muted)}
.empty-state i{font-size:2.75rem;opacity:.3;display:block;margin-bottom:1rem}
.empty-state p{font-size:.9rem;color:var(--text-muted);margin:0}
.empty-state .empty-title{font-size:1rem;font-weight:700;color:var(--text-secondary);margin-bottom:.4rem}

/* ── 18. Alerts ─────────────────────────────────────────────── */
.alert{border-radius:var(--radius-md);padding:.9rem 1.1rem;font-size:.855rem;font-weight:500;border:none}
.alert-success{background:var(--success-light);color:#065F46;border:1px solid rgba(16,185,129,.25)}
.alert-danger {background:var(--danger-light); color:#991B1B;border:1px solid rgba(239,68,68,.25)}
.alert-warning{background:var(--warning-light);color:#92400E;border:1px solid rgba(245,158,11,.25)}
.alert-info   {background:var(--info-light);   color:#075985;border:1px solid rgba(14,165,233,.25)}

/* ── 19. Dropdowns ──────────────────────────────────────────── */
.dropdown-menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:.4rem}
.dropdown-item{color:var(--text-secondary);border-radius:var(--radius-sm);padding:.5rem .875rem;font-size:.845rem;transition:var(--transition)}
.dropdown-item:hover{background:var(--surface-hover);color:var(--text)}
.dropdown-divider{border-color:var(--border);margin:.3rem 0}

/* ── 20. Nav Pills / Tabs ───────────────────────────────────── */
.nav-pills .nav-link{color:var(--text-secondary);border-radius:var(--radius-sm);font-size:.845rem;font-weight:500;padding:.5rem 1rem;transition:var(--transition);background:transparent}
.nav-pills .nav-link:hover{background:var(--surface-hover);color:var(--text)}
.nav-pills .nav-link.active{background:var(--primary);color:white;box-shadow:0 4px 12px rgba(5,150,105,.3)}

/* ── 21. Pagination ─────────────────────────────────────────── */
.page-link{background:var(--surface);border-color:var(--border);color:var(--text-secondary);font-size:.845rem;padding:.4rem .75rem;transition:var(--transition)}
.page-link:hover{background:var(--surface-hover);color:var(--text);border-color:var(--border)}
.page-item.active .page-link{background:var(--primary);border-color:var(--primary);color:white}
.page-item.disabled .page-link{background:var(--surface-2);color:var(--text-disabled)}

/* ── 22. DataTables overrides ───────────────────────────────── */
.dataTables_wrapper{padding:0}
.dataTables_filter{display:none!important}
.dataTables_wrapper .dataTables_empty{padding:3rem;text-align:center;color:var(--text-muted);font-style:italic}

/* Show-entries row */
.dataTables_wrapper .dataTables_length{padding:.65rem 1rem}
.dataTables_wrapper .dataTables_length label{
  display:flex;align-items:center;gap:.4rem;margin:0;
  font-size:.8rem;color:var(--text-muted);font-family:var(--font);
}
.dataTables_wrapper .dataTables_length select{
  height:30px;padding:0 .5rem;font-size:.78rem;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);color:var(--text);font-family:var(--font);
  outline:none;cursor:pointer;
}
.dataTables_wrapper .dataTables_length select:focus{border-color:var(--primary)}

/* Info row */
.dataTables_wrapper .dataTables_info{
  padding:.65rem 1rem;font-size:.78rem;color:var(--text-muted);
  border-top:1px solid var(--border);
}

/* ── Pagination (Bootstrap 5 DataTables generates .pagination/.page-link) */
.dataTables_wrapper .dataTables_paginate{
  padding:.65rem 1rem;border-top:1px solid var(--border);
}
/* Reset Bootstrap pagination styles */
.dataTables_paginate .pagination{
  gap:3px;margin:0;flex-wrap:wrap;
}
.dataTables_paginate .page-item .page-link{
  min-width:34px;height:34px;
  padding:0 .6rem;
  display:inline-flex!important;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:600;
  color:var(--text)!important;
  background:var(--surface)!important;
  border:1px solid var(--border)!important;
  border-radius:var(--radius-sm)!important;
  box-shadow:none!important;
  transition:var(--transition);
  line-height:1;
}
.dataTables_paginate .page-item .page-link:hover{
  background:var(--surface-2)!important;
  border-color:var(--border-strong)!important;
  color:var(--text)!important;
}
.dataTables_paginate .page-item.active .page-link{
  background:var(--primary)!important;
  border-color:var(--primary)!important;
  color:#fff!important;
}
.dataTables_paginate .page-item.disabled .page-link{
  background:var(--surface)!important;
  border-color:var(--border)!important;
  color:var(--text-muted)!important;
  opacity:.5;cursor:default;pointer-events:none;
}
/* Remove Bootstrap's aggressive rounded corners on first/last items */
.dataTables_paginate .page-item:first-child .page-link,
.dataTables_paginate .page-item:last-child .page-link{
  border-radius:var(--radius-sm)!important;
}

/* Dark mode */
[data-theme="dark"] .dataTables_wrapper .dataTables_length select{
  background:var(--surface-2);border-color:var(--border);color:var(--text);
}
[data-theme="dark"] .dataTables_paginate .page-item .page-link{
  background:var(--surface-2)!important;
  border-color:var(--border)!important;
  color:var(--text)!important;
}
[data-theme="dark"] .dataTables_paginate .page-item .page-link:hover{
  background:var(--surface-hover)!important;
}
[data-theme="dark"] .dataTables_paginate .page-item.disabled .page-link{
  background:var(--surface)!important;color:var(--text-muted)!important;
}
/* Sorting headers — prevent DT from overriding pt-table thead background */
table.dataTable thead>tr>th.sorting,
table.dataTable thead>tr>th.sorting_asc,
table.dataTable thead>tr>th.sorting_desc,
table.dataTable thead>tr>th.sorting_asc_disabled,
table.dataTable thead>tr>th.sorting_desc_disabled{
  background-color:var(--surface-2)!important;color:var(--text-muted)!important;
}

/* ── 23. Misc Utility ───────────────────────────────────────── */
.form-section{padding-left:1.75rem}
.text-primary{color:var(--primary)!important}
.text-success{color:var(--success)!important}
.text-danger {color:var(--danger)!important}
.text-warning{color:var(--warning)!important}
.text-info   {color:var(--info)!important}
.text-muted  {color:var(--text-muted)!important}

/* ── 24. Bootstrap component overrides (all modes) ──────────── */
/* Form controls — use our tokens so they follow every theme/branding change */
.form-control,.form-select,.input-group-text{
  background:var(--surface);border-color:var(--border);color:var(--text);
}
.form-control:focus,.form-select:focus{
  background:var(--surface);border-color:var(--primary);color:var(--text);
  box-shadow:0 0 0 3px var(--primary-light);
}
.form-control::placeholder{color:var(--text-muted)}
.form-control:disabled,.form-select:disabled{
  background:var(--surface-2);color:var(--text-disabled);border-color:var(--border);
}
.input-group-text{background:var(--surface-2);border-color:var(--border);color:var(--text-secondary)}
/* Table */
.table{color:var(--text);border-color:var(--border)}
.table thead th,.table>thead>tr>th{
  background:var(--surface-2);color:var(--text-muted);border-color:var(--border);
}
.table>tbody>tr>td,.table>tbody>tr>th{border-color:var(--border);color:var(--text)}
.table-hover>tbody>tr:hover>*{background:var(--surface-hover)}
/* Alert colours that reference Bootstrap */
.alert{border-color:var(--border)}
.alert-danger{background:var(--danger-light);color:var(--danger);border-color:var(--danger)}
.alert-success{background:var(--success-light);color:var(--success);border-color:var(--success)}
.alert-warning{background:var(--warning-light);color:var(--warning);border-color:var(--warning)}
.alert-info{background:var(--info-light);color:var(--info);border-color:var(--info)}
/* Dropdown menu */
.dropdown-menu{
  background:var(--surface);border-color:var(--border);color:var(--text);
  box-shadow:var(--shadow-md);
}
.dropdown-item{color:var(--text)}
.dropdown-item:hover,.dropdown-item:focus{background:var(--surface-hover);color:var(--text)}
/* Modal */
.modal-content{background:var(--surface);border-color:var(--border);color:var(--text)}
.modal-header,.modal-footer{border-color:var(--border)}
/* List group */
.list-group-item{background:var(--surface);border-color:var(--border);color:var(--text)}
.list-group-item.active{background:var(--primary);border-color:var(--primary);color:#fff}

/* ── Dark mode extra tweaks ──────────────────────────────────── */
[data-theme="dark"] .table thead th{background:var(--surface-2)}
[data-theme="dark"] .form-control::placeholder{color:var(--text-muted)}
[data-theme="dark"] .modal-content{background:var(--surface)}
[data-theme="dark"] .modal-footer{background:var(--surface-2)}
[data-theme="dark"] .modal-header{border-color:var(--border)}
[data-theme="dark"] .dropdown-menu{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .btn-secondary{background:var(--surface-2);border-color:var(--border);color:var(--text-secondary)}
[data-theme="dark"] .btn-light{background:var(--surface-2);border-color:var(--border);color:var(--text)}
[data-theme="dark"] .btn-close{filter:invert(1)}
[data-theme="dark"] .card{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .card-header{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .card-footer{background:var(--surface-2)}
[data-theme="dark"] .table-responsive,[data-theme="dark"] .admin-table-container{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .table-header{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .search-bar{background:var(--surface-2);border-color:var(--border)}
[data-theme="dark"] .search-bar:focus-within{background:var(--surface)}
[data-theme="dark"] .top-header{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .alert-success{background:var(--success-light);color:#6EE7B7}
[data-theme="dark"] .alert-danger {background:var(--danger-light); color:#FCA5A5}
[data-theme="dark"] .alert-warning{background:var(--warning-light);color:#FCD34D}
[data-theme="dark"] .alert-info   {background:var(--info-light);   color:#7DD3FC}
[data-theme="dark"] .page-link{background:var(--surface);border-color:var(--border);color:var(--text-secondary)}
[data-theme="dark"] .page-link:hover{background:var(--surface-2)}
[data-theme="dark"] .page-item.disabled .page-link{background:var(--surface-2);color:var(--text-disabled);border-color:var(--border)}
[data-theme="dark"] .action-btn{background:var(--surface-2);border-color:var(--border)}
[data-theme="dark"] select option{background:var(--surface);color:var(--text)}
[data-theme="dark"] .nav-pills .nav-link:hover{background:var(--surface-2)}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button{background:var(--surface-2)!important;border-color:var(--border)!important;color:var(--text-secondary)!important}
[data-theme="dark"] .dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--surface-hover)!important}
[data-theme="dark"] hr{border-color:var(--border)}
[data-theme="dark"] .stat-card{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .quick-link-card{background:var(--surface);border-color:var(--border)}
[data-theme="dark"] .dashboard-column{background:var(--surface);border-color:var(--border)}

/* ── 25. Mobile ─────────────────────────────────────────────── */
.menu-toggle{
  display:none;position:fixed;top:.875rem;left:.875rem;z-index:1200;
  width:38px;height:38px;background:var(--primary);color:#fff;
  border:none;border-radius:var(--radius-sm);align-items:center;
  justify-content:center;cursor:pointer;font-size:1rem;
  box-shadow:var(--shadow-md);transition:var(--transition);
}

/* ── 26. Animations ─────────────────────────────────────────── */
@keyframes slideInRight{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes fadeOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.fade-in{animation:fadeIn .3s ease}
.skeleton{
  background:linear-gradient(90deg,var(--surface-2) 25%,var(--border) 50%,var(--surface-2) 75%);
  background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radius-sm);
}

/* ── 27. Responsive ─────────────────────────────────────────── */
@media(max-width:1280px){.dashboard-columns{grid-template-columns:1fr 1fr}}
@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:270px}
  .sidebar.open{transform:translateX(0);box-shadow:var(--shadow-xl)}
  .sidebar-overlay.active{display:block}
  .main-content{margin-left:0}
  .menu-toggle{display:flex}
  .top-header{padding:0 1rem 0 3.75rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .dashboard-columns{grid-template-columns:1fr}
  .quick-links{grid-template-columns:repeat(2,1fr)}
  .container-fluid{padding-left:1rem!important;padding-right:1rem!important}
}
@media(max-width:520px){
  .stats-grid{grid-template-columns:1fr}
  .table-header{flex-direction:column;align-items:stretch}
  .search-bar{min-width:unset;width:100%}
  .page-header{flex-direction:column;align-items:flex-start}
}

/* ── 28. Print ──────────────────────────────────────────────── */
@media print{
  .sidebar,.top-header,.menu-toggle,.no-print,
  .toast-container-fixed,.theme-toggle{display:none!important}
  .main-content{margin-left:0!important}
  body{background:white!important;color:black!important}
  .card,.table-responsive{box-shadow:none!important;border:1px solid #ccc!important}
  a{color:inherit!important;text-decoration:none!important}
}