/* ═══════════════════════════════════════════════════════════
   AIOU — GLOBAL THEME
   One design system for every page. Load this BEFORE any
   page-specific <style> block so pages can still override.

     <link rel="stylesheet" href="/static/theme.css">

   Contents
     1. External resources  — Google Fonts + Font Awesome
     2. Tokens              — the only place colours/sizes live
     3. App shell           — sidebar + content container
     4. Sidebar             — canonical nav, used by #app-nav
     5. Page primitives     — page head, cards, empty/error states
     6. Accessibility       — focus rings, reduced motion
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   0. EXTERNAL RESOURCES (loaded once globally)
   ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* ─────────────────────────────────────────────
   1. TOKENS
   ───────────────────────────────────────────── */
:root {
  /* Brand */
  --primary:        #2563eb;
  --primary-dark:   #1d4ed8;
  --primary-light:  #60a5fa;
  --primary-dim:    rgba(0, 159, 60, .12);
  --navy:           #052e16;

  /* Ink */
  --slate:          #052e16;
  --text:           #052e16;
  --text-2:         #475569;
  --text-3:         #94a3b8;
  --muted:          #64748b;

  /* Surfaces */
  --bg-1:           #ffffff;
  --bg-2:           #f1f5f9;
  --bg-3:           #e2e8f0;
  --bg-hover:       #f8fafc;
  --bg-page:        #f1f5f9;
  --border:         #e2e8f0;
  --border-2:       #cbd5e1;

  /* Status — one colour, one meaning */
  --success:        #16A34A;
  --warning:        #D97706;
  --error:          #DC2626;
  --info:           #2563eb;
  --green-dim:      rgba(22, 163, 74, .12);
  --yellow-dim:     rgba(217, 119, 6, .15);
  --red-dim:        rgba(220, 38, 38, .12);
  --blue-dim:       rgba(0, 159, 60, .12);
  --gray-dim:       rgba(107, 114, 128, .15);

  /* Sidebar */
  --nav-bg:         #080f1e;
  --nav-text:       rgba(255,255,255,.60);
  --nav-text-hover: #ffffff;
  --nav-active:     #2563eb;
  --nav-group:      rgba(255,255,255,.38);
  --nav-line:       rgba(255,255,255,.08);

  /* Spacing — 4pt grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;

  /* Radius */
  --r-sm:    4px;
  --radius:  8px;
  --r-lg:    12px;
  --r-xl:    12px;
  --radius-lg: 12px;
  --r-pill:  999px;

  /* Type */
  --f-display: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-body:    'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono:    Consolas, 'SF Mono', Menlo, monospace;
  --text-xs:   10px;
  --text-sm:   11.5px;
  --text-base: 13px;
  --text-md:   15px;
  --text-lg:   20px;
  --text-xl:   26px;
  --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* Elevation */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow:    0 2px 8px rgba(28, 28, 30, .06), 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-lg: 0 8px 28px rgba(28, 28, 30, .12);

  /* Motion */
  --t-fast:   80ms ease;
  --t-normal: 160ms ease;
  --t-slow:   300ms ease;

  /* Layering (Master Guide scale) */
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-dropdown: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-alert: 600;

  /* Alias guide token names → existing palette */
  --c-primary: var(--primary);
  --c-success: var(--success);
  --c-warn:    var(--warning);
  --c-danger:  var(--error);
  --c-info:    var(--primary);

  /* Command-center accents */
  --c-admit-accent:   #2563eb;
  --c-fee-accent:     #16A34A;
  --c-results-accent: #1d4ed8;
  --shadow-card:  0 1px 2px rgba(0,0,0,.06), 0 4px 12px rgba(28,28,30,.08);
  --shadow-hover: 0 2px 4px rgba(0,0,0,.08), 0 8px 24px rgba(28,28,30,.12);

  /* Layout */
  --nav-w:         240px;
  --nav-rail:      64px;
  --header-height: 64px;
}

/* ─────────────────────────────────────────────
   2. APP SHELL
   ───────────────────────────────────────────── */
body {
  font-family: var(--f-display);
  color: var(--slate);
  margin: 0;
  min-height: 100vh;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* The frame that holds nav + content side by side. */
.app-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

.app-main {
  flex: 1;
  min-width: 0;
  background: var(--bg-page);
  overflow-x: hidden;
}

.app-page {
  padding: 28px 32px 40px;
}

/* ─────────────────────────────────────────────
   3. SIDEBAR — canonical, rendered by sidebar.js
   ───────────────────────────────────────────── */
#app-nav {
  width: var(--nav-w);
  min-width: var(--nav-w);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: #080f1e;
  border-right: 1px solid var(--nav-line);
  box-shadow: 2px 0 12px rgba(0,0,0,0.12);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}

/* sidebar.js picks one of these based on whether the parent is a flex row. */
#app-nav.nav-fixed {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: var(--z-sidebar);
}
#app-nav.nav-inflow { position: static; }

/* Pages that use the fixed rail offset their content by the rail width. */
#app-nav.nav-fixed ~ .main,
#app-nav.nav-fixed ~ .wrap,
#app-nav.nav-fixed ~ .app-main { margin-left: var(--nav-w); }
#app-nav::-webkit-scrollbar       { width: 4px; }
#app-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 4px; }

/* Brand */
#app-nav .snav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 16px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--nav-line);
  margin-bottom: 4px;
  background: #052e16;
}
#app-nav .snav-mark {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 159, 60, 0.35);
}
#app-nav .snav-brand-name {
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: #ffffff;
  letter-spacing: -.3px;
}
#app-nav .snav-brand-sub {
  font-size: 10px;
  color: rgba(255,255,255,.45);
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* Group label */
#app-nav .snav-group {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--nav-group);
  padding: 18px 18px 5px;
  pointer-events: none;
  user-select: none;
}
#app-nav .snav-group:first-of-type { padding-top: 8px; }

/* Nav item — same shape whether <a> or <button> */
#app-nav .tab {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 18px;
  border: none;
  border-left: 3px solid transparent;
  background: none;
  color: var(--nav-text);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: var(--fw-medium);
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
#app-nav .tab:hover {
  background: rgba(0, 159, 60, .12);
  color: var(--nav-text-hover);
}
#app-nav .tab.active {
  background: rgba(0, 159, 60, .16);
  color: #ffffff;
  font-weight: var(--fw-semibold);
  border-left-color: #2563eb;
}
#app-nav .tab i {
  width: 15px;
  font-size: 14px;
  text-align: center;
  flex-shrink: 0;
  color: var(--text-3);
}
#app-nav .tab.active i,
#app-nav .tab[aria-selected="true"] i { 
  color: var(--nav-active);
}

/* Count chip on a nav item */
#app-nav .nav-count {
  margin-left: auto;
  min-width: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--error);
  color: #fff;
  font-size: 9.5px;
  font-weight: var(--fw-bold);
  line-height: 16px;
  text-align: center;
}

/* Footer */
#app-nav .snav-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px 20px;
  border-top: 1px solid var(--nav-line);
  background: #052e16;
}
#app-nav .snav-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1d4ed8, #2563eb);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base);
  font-weight: var(--fw-bold);
  color: #fff;
  flex-shrink: 0;
}
#app-nav .snav-user-name { font-size: 12px;         font-weight: var(--fw-semibold); color: #ffffff; }
#app-nav .snav-user-role { font-size: var(--text-xs); color: rgba(255, 255, 255, .45); margin-top: 1px; }

/* Icon rail on narrow screens */
@media (max-width: 1024px) {
  #app-nav { width: var(--nav-rail); min-width: var(--nav-rail); }
  #app-nav .tab span,
  #app-nav .snav-brand,
  #app-nav .snav-who,
  #app-nav .snav-group { display: none; }
  #app-nav .tab       { justify-content: center; padding: 11px 0; }
  #app-nav .snav-logo,
  #app-nav .snav-footer { justify-content: center; padding-left: 0; padding-right: 0; }
  #app-nav.nav-fixed ~ .main,
  #app-nav.nav-fixed ~ .wrap,
  #app-nav.nav-fixed ~ .app-main { margin-left: var(--nav-rail); }
}

/* ─────────────────────────────────────────────
   4. PAGE PRIMITIVES
   ───────────────────────────────────────────── */

/* ── Page header ──────────────────────────────────────────
   Every page and every in-page tab opens with this block.
   Two markup shapes exist in the app and both are supported,
   so no template HTML has to change:

     <div class="page-header">
       <div><h2>Title</h2><div class="subtitle">Sub</div></div>
     </div>

     <div class="page-header">
       <div>
         <div class="page-header-title"><i class="fas fa-users"></i> Title</div>
         <div class="page-header-subtitle">Sub</div>
       </div>
     </div>

   Anything after the first child floats to the right as actions.
   ───────────────────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0 0 14px;
  margin: 0 0 18px;
  background: none;
  border: none;
  border-bottom: 1.5px solid var(--border);
  border-radius: 0;
}

/* Optional leading icon chip. Colour it per page with a modifier. */
.page-header-icon {
  width: 38px; height: 38px;
  border-radius: 11px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-md);
  background: var(--blue-dim);
  color: var(--primary);
}
.page-header-icon.is-green  { background: var(--green-dim);  color: var(--success); }
.page-header-icon.is-amber  { background: var(--yellow-dim); color: var(--warning); }
.page-header-icon.is-red    { background: var(--red-dim);    color: var(--error);   }
.page-header-icon.is-purple { background: rgba(124,58,237,.12); color: #7c3aed;     }

/* Title — both shapes land on the same type. */
.page-header h2,
.page-header-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--slate);
  letter-spacing: -.25px;
  line-height: 1.25;
}
.page-header h2 i,
.page-header-title i {
  font-size: 14px;
  color: var(--primary);
  flex-shrink: 0;
}

/* Subtitle — both shapes, one voice. */
.page-header .subtitle,
.page-header-subtitle {
  margin-top: 2px;
  font-size: var(--text-sm);
  font-weight: var(--fw-normal);
  color: var(--muted);
  line-height: 1.4;
}

/* Actions sit right; an explicit .page-actions wins, otherwise the last
   child is treated as the action slot (covers legacy markup). */
.page-header > :last-child:not(:first-child) { margin-left: auto; }
.page-header > .page-actions { margin-left: auto; }
.page-header > .page-actions ~ * { margin-left: 0; }

/* Action cluster in a page header. */
.page-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Read-only status chip — shows state, never clickable. */
.meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* Quiet button — secondary actions that must not compete with the page. */
.btn.btn-quiet {
  background: var(--bg-1);
  border: 1.5px solid var(--border);
  color: var(--text-2);
  font-weight: var(--fw-semibold);
  transition: border-color var(--t-fast), color var(--t-fast);
}
.btn.btn-quiet:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Pills */
.admin-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  background: var(--blue-dim);
  color: var(--primary);
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .4px;
}
.section-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.stat-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--bg-2);
  color: var(--text-2);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
}

/* Empty + error states — every async region needs both. */
.empty-state {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 44px 24px;
  gap: 8px;
  text-align: center;
}
.empty-state i { font-size: 26px; opacity: .35; color: var(--muted); }
.empty-state p { margin: 0; font-size: var(--text-base); color: var(--text-2); }

.error-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--red-dim);
  border: 1px solid rgba(239, 68, 68, .25);
  color: #b91c1c;
  font-size: var(--text-base);
}
.error-banner .btn-retry {
  margin-left: auto;
  padding: 4px 10px;
  border-radius: 7px;
  background: #fff;
  border: 1px solid rgba(239, 68, 68, .35);
  color: var(--error);
  font-family: inherit;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

/* ─────────────────────────────────────────────
   5. ACCESSIBILITY
   ───────────────────────────────────────────── */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
button:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ─────────────────────────────────────────────
   6. COMMAND CENTER — Master Guide components
   ───────────────────────────────────────────── */

/* KPI strip (sticky vitals) */
.kpi-strip {
  display: flex;
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--border);
  box-shadow: 0 1px 0 rgba(30, 58, 138, .04);
}
.kpi-tile {
  flex: 1;
  min-width: 0;
  padding: 10px var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--t-fast);
  position: relative;
  text-decoration: none;
  color: inherit;
}
.kpi-tile:last-child { border-right: none; }
.kpi-tile:hover { background: var(--bg-hover); }
.kpi-num {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--slate);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color var(--t-fast);
}
.kpi-num.blue  { color: var(--primary); }
.kpi-num.red   { color: var(--error); }
.kpi-num.amber { color: var(--warning); }
.kpi-num.green { color: var(--success); }
.kpi-lbl {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .55px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-sub {
  font-size: var(--text-xs);
  color: var(--text-3);
  margin-top: 1px;
}
.kpi-dot {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.kpi-num.kpi-flash { animation: kpi-flash .5s ease; }
@keyframes kpi-flash {
  0%, 100% { opacity: 1; }
  40%       { opacity: .4; color: var(--primary); }
}

/* Badge pills (renderBadge) */
.badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--r-pill);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .35px;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.badge-success { background: var(--green-dim);  color: var(--success); }
.badge-warn    { background: var(--yellow-dim); color: var(--warning); }
.badge-danger  { background: var(--red-dim);    color: var(--error);   }
.badge-info    { background: var(--blue-dim);   color: var(--primary); }
.badge-neutral { background: var(--bg-2);      color: var(--text-2);  }
.badge-running {
  background: var(--blue-dim);
  color: var(--primary);
  animation: pulse-badge 1.6s ease-in-out infinite;
}
@keyframes pulse-badge {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}

/* Data tables */
.data-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  color: var(--slate);
}
.data-table thead tr {
  background: var(--bg-2);
  position: sticky;
  top: 0;
  z-index: 10;
}
.data-table th {
  padding: 9px 14px;
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .55px;
  border-bottom: 1.5px solid var(--border-2);
  white-space: nowrap;
}
.data-table th.num-col { text-align: right; }
.data-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tbody tr:nth-child(even) td { background: rgba(241, 245, 249, .55); }
.data-table tbody tr:hover td {
  background: rgba(0, 159, 60, .06);
  cursor: pointer;
}
.data-table td.num-col { text-align: right; }

/* Buttons (guide system) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 8px 14px;
  border-radius: var(--r-sm);
  font-size: var(--text-base);
  font-weight: var(--fw-semibold);
  font-family: var(--f-display);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  line-height: 1;
}
.btn:active   { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }
.btn-sm { padding: 5px 10px; font-size: var(--text-xs); }
.btn-secondary {
  background: transparent;
  color: var(--slate);
  border-color: var(--border-2);
}
.btn-secondary:hover { background: var(--bg-2); }
.btn-danger-ghost {
  background: transparent;
  color: var(--error);
  border-color: rgba(239, 68, 68, .35);
}
.btn-danger-ghost:hover { background: var(--red-dim); }

/* Skeleton shimmer */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-2) 25%,
    rgba(203, 213, 225, .65) 50%,
    var(--bg-2) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r-sm);
  display: block;
}
@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
.sk-line-lg { height: 22px; width: 60%; margin-bottom: var(--s-2); }
.sk-line-md { height: 14px; width: 80%; margin-bottom: var(--s-2); }
.sk-line-sm { height: 11px; width: 45%; }

/* Refresh card state machine */
@keyframes pulse-dot {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%       { opacity: .55; transform: scale(1.25); }
}
.rc-card[data-state="running"].blue-card,
.rc-card[data-state="running"].green-card,
.rc-card[data-state="running"].purple-card { border-top-color: var(--primary) !important; }
.rc-card[data-state="done"].blue-card,
.rc-card[data-state="done"].green-card,
.rc-card[data-state="done"].purple-card    { border-top-color: var(--success) !important; }
.rc-card[data-state="failed"].blue-card,
.rc-card[data-state="failed"].green-card,
.rc-card[data-state="failed"].purple-card  { border-top-color: var(--error) !important; }
.rc-card[data-state="running"] .rc-status-dot:not(.paused) {
  background: var(--success) !important;
  animation: pulse-dot 1.4s ease-in-out infinite;
}
.rc-card[data-state="done"] .rc-status-dot   { background: var(--success) !important; animation: none; }
.rc-card[data-state="failed"] .rc-status-dot { background: var(--error) !important; animation: none; }

/* Accordion — smooth grid expand */
.acc-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-slow);
}
.acc-content > * { overflow: hidden; }
.acc-content.open { grid-template-rows: 1fr; }

/* Toast container layering */
#toast-container { z-index: var(--z-toast); }
#global-alert    { z-index: var(--z-alert); }
.modal-overlay,
#progress-modal  { z-index: var(--z-modal); }

/* ── CONFIRM MODAL ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: modal-fade-in 0.2s ease;
}

.modal-box {
  background: var(--bg-1);
  border-radius: var(--r-lg);
  padding: 28px 24px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: modal-scale-in 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  text-align: center;
}

.modal-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--yellow-dim);
  color: var(--warning);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}

.modal-message {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.6;
  margin: 0 0 24px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.modal-btn {
  flex: 1;
  padding: 11px 20px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--t-fast);
}

.modal-btn-cancel {
  background: var(--bg-2);
  color: var(--text-2);
  border: 1px solid var(--border);
}

.modal-btn-cancel:hover {
  background: var(--bg-hover);
  border-color: var(--border-2);
}

.modal-btn-confirm {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 159, 60, 0.4);
}

.modal-btn-confirm:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 159, 60, 0.5);
}

.modal-btn-confirm:active {
  transform: translateY(0);
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-scale-in {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ── COMMON ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.fade-up { animation: fadeUp 0.4s ease-out; }
.card-in { animation: cardIn 0.3s ease-out; }

/* ── ROW HOVER EFFECTS ── */
.row-hover {
  cursor: pointer;
  transition: background var(--t-fast);
}

.row-hover:hover {
  background: var(--bg-hover) !important;
}

.row-hover-alt {
  cursor: pointer;
  transition: background var(--t-fast);
}

.row-hover-alt:hover {
  background: #eef4ff !important;
}

/* ── UTILITY CLASSES (spacing, sizing, colors) ── */
.p-0  { padding: 0 !important; }
.p-2  { padding: 8px !important; }
.p-3  { padding: 12px !important; }
.p-4  { padding: 16px !important; }
.p-5  { padding: 20px !important; }
.p-6  { padding: 24px !important; }

.px-2 { padding-left: 8px !important; padding-right: 8px !important; }
.px-3 { padding-left: 12px !important; padding-right: 12px !important; }
.px-4 { padding-left: 16px !important; padding-right: 16px !important; }

.py-2 { padding-top: 8px !important; padding-bottom: 8px !important; }
.py-3 { padding-top: 12px !important; padding-bottom: 12px !important; }
.py-4 { padding-top: 16px !important; padding-bottom: 16px !important; }

.m-0  { margin: 0 !important; }
.m-2  { margin: 8px !important; }
.m-3  { margin: 12px !important; }
.m-4  { margin: 16px !important; }

.mb-2 { margin-bottom: 8px !important; }
.mb-3 { margin-bottom: 12px !important; }
.mb-4 { margin-bottom: 16px !important; }
.mt-2 { margin-top: 8px !important; }
.mt-3 { margin-top: 12px !important; }
.mt-4 { margin-top: 16px !important; }

.gap-2 { gap: 8px !important; }
.gap-3 { gap: 12px !important; }
.gap-4 { gap: 16px !important; }

.text-primary { color: var(--primary) !important; }
.text-success { color: var(--success) !important; }
.text-warning { color: var(--warning) !important; }
.text-error   { color: var(--error) !important; }
.text-muted   { color: var(--text-2) !important; }

.bg-primary { background: var(--primary) !important; }
.bg-success { background: var(--success) !important; }
.bg-warning { background: var(--warning) !important; }
.bg-error   { background: var(--error) !important; }

.r-sm { border-radius: var(--r-sm) !important; }
.r-md { border-radius: var(--r) !important; }
.r-lg { border-radius: var(--r-lg) !important; }

.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.items-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }

.w-full { width: 100% !important; }
.h-full { height: 100% !important; }

.cursor-pointer { cursor: pointer !important; }
.font-bold { font-weight: 700 !important; }
.font-semibold { font-weight: 600 !important; }

.text-xs { font-size: 10px !important; }
.text-sm { font-size: 11.5px !important; }
.text-base { font-size: 13px !important; }
.text-lg { font-size: 15px !important; }

/* ── DASHBOARD HEADER (enhanced design) ── */
.dashboard-header {
  background: #ffffff;
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  border-radius: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

.dashboard-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}

.dashboard-header-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(0, 159, 60, 0.32);
}

.dashboard-header-text h1 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 2px 0;
  line-height: 1.2;
}

.dashboard-header-text p {
  font-size: 12px;
  color: var(--text-2);
  margin: 0;
  font-weight: 500;
}

.dashboard-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-header-right .conn-pill {
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.8);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.dashboard-header-right .conn-pill.connected {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.3);
  color: var(--success);
}

.dashboard-header-right .admin-pill {
  background: rgba(0, 159, 60, 0.12);
  color: #1d4ed8;
  border: 1px solid rgba(0, 159, 60, 0.22);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.dashboard-header-right .header-time {
  font-size: 11.5px;
  color: var(--text-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  background: rgba(255,255,255,0.6);
  border-radius: 8px;
  border: 1px solid var(--border);
}

@media (max-width: 700px) {
  .kpi-strip { flex-wrap: wrap; }
  .kpi-tile  { flex: 1 1 33%; min-width: 100px; }
}