/*
 * AquaWatch Admin — Design System
 * Single source of truth. Every color is a variable. Every component has one pattern.
 */

/* ═══════════════════════════════════════════════════
   1. THEME TOKENS
   ═══════════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --bg:         #09090b;
  --bg-card:    #18181b;
  --bg-sidebar: #111113;
  --bg-input:   #09090b;
  --bg-thead:   #131316;
  --bg-hover:   rgba(255,255,255,.04);
  --bg-topbar:  rgba(9,9,11,.85);

  /* Borders */
  --border:       #27272a;
  --border-input: #3f3f46;

  /* Text */
  --fg:      #f4f4f5;
  --fg-2:    #e4e4e7;
  --fg-3:    #a1a1aa;
  --fg-4:    #71717a;
  --fg-5:    #52525b;

  /* Brand */
  --accent:       #0284c7;
  --accent-hover: #0369a1;
  --accent-fg:    #38bdf8;
  --accent-bg:    rgba(14,165,233,.1);

  /* Semantic */
  --green:    #34d399; --green-bg: rgba(16,185,129,.12);
  --red:      #f87171; --red-bg:   rgba(239,68,68,.12);
  --amber:    #fbbf24; --amber-bg: rgba(245,158,11,.12);
  --blue:     #38bdf8; --blue-bg:  rgba(14,165,233,.12);
  --violet:   #a78bfa; --violet-bg:rgba(139,92,246,.12);
  --cyan:     #22d3ee; --cyan-bg:  rgba(6,182,212,.12);
  --muted:    #a1a1aa; --muted-bg: rgba(113,113,122,.12);

  /* Shadows */
  --shadow-sm:  0 1px 2px rgba(0,0,0,.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,.25);
  --shadow-lg:  0 20px 48px rgba(0,0,0,.4);

  /* Chart */
  --chart-grid: rgba(63,63,70,.3);

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:         #f8fafc;
  --bg-card:    #ffffff;
  --bg-sidebar: #f1f5f9;
  --bg-input:   #ffffff;
  --bg-thead:   #f8fafc;
  --bg-hover:   rgba(0,0,0,.035);
  --bg-topbar:  rgba(255,255,255,.88);

  --border:       #e2e8f0;
  --border-input: #cbd5e1;

  --fg:      #0f172a;
  --fg-2:    #1e293b;
  --fg-3:    #64748b;
  --fg-4:    #94a3b8;
  --fg-5:    #cbd5e1;

  --accent-fg:  #0284c7;
  --accent-bg:  rgba(14,165,233,.08);

  --green:  #059669; --green-bg: rgba(16,185,129,.08);
  --red:    #dc2626; --red-bg:   rgba(239,68,68,.08);
  --amber:  #d97706; --amber-bg: rgba(245,158,11,.08);
  --blue:   #0284c7; --blue-bg:  rgba(14,165,233,.08);
  --violet: #7c3aed; --violet-bg:rgba(139,92,246,.08);
  --cyan:   #0891b2; --cyan-bg:  rgba(6,182,212,.08);
  --muted:  #64748b; --muted-bg: rgba(100,116,139,.08);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.1);

  --chart-grid: rgba(203,213,225,.5);

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════
   2. RESET
   ═══════════════════════════════════════════════════ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
body { font-family:'Inter',system-ui,-apple-system,sans-serif; line-height:1.5; background:var(--bg); color:var(--fg); -webkit-font-smoothing:antialiased; transition:background .2s,color .2s; -webkit-user-select:none; -moz-user-select:none; user-select:none }
input,textarea,select,[contenteditable="true"],.cell-mono,.font-mono { -webkit-user-select:text; -moz-user-select:text; user-select:text }
a { color:inherit; text-decoration:none }
table { border-collapse:collapse; width:100% }
button,input,select,textarea { font:inherit; color:inherit; background:transparent; border:none; outline:none }
img { max-width:100%; display:block }
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:3px }

/* ═══════════════════════════════════════════════════
   3. LAYOUT SHELL
   ═══════════════════════════════════════════════════ */

/* Sidebar */
.sidebar { width:16rem; background:var(--bg-sidebar); border-right:1px solid var(--border); display:flex; flex-direction:column; position:fixed; height:100%; z-index:30; transition:transform .25s ease }
.sidebar-logo { padding:1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.75rem }
.sidebar-logo-icon { width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg,#0ea5e9,#0369a1); display:flex; align-items:center; justify-content:center; flex-shrink:0; box-shadow:0 4px 12px rgba(14,165,233,.2) }
.sidebar-logo-title { font-size:1rem; font-weight:700; color:var(--fg) }
.sidebar-logo-title span { color:var(--accent-fg) }
.sidebar-logo-sub { font-size:.6rem; font-weight:600; color:var(--fg-5); text-transform:uppercase; letter-spacing:.08em; margin-top:-.125rem }

.sidebar-nav { flex:1; overflow-y:auto; padding:.75rem }
.sidebar-label { font-size:.625rem; font-weight:600; color:var(--fg-5); text-transform:uppercase; letter-spacing:.1em; padding:.75rem .75rem .375rem }
.sidebar-link { display:flex; align-items:center; gap:.625rem; padding:.5625rem .75rem; border-radius:8px; font-size:.8125rem; font-weight:500; color:var(--fg-4); transition:all .15s; position:relative; margin-bottom:1px }
.sidebar-link:hover { color:var(--fg-2); background:var(--bg-hover) }
.sidebar-link.active { color:var(--accent-fg); background:var(--accent-bg) }
.sidebar-link.active::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:0 3px 3px 0; background:#0ea5e9 }
.sidebar-link svg { width:18px; height:18px; flex-shrink:0 }

.sidebar-footer { padding:1rem 1.25rem; border-top:1px solid var(--border); display:flex; align-items:center; gap:.625rem }
.sidebar-avatar { width:32px; height:32px; border-radius:8px; background:var(--accent-bg); color:var(--accent-fg); display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0 }
.sidebar-name { font-size:.8125rem; font-weight:600; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sidebar-role { font-size:.6875rem; color:var(--fg-5); text-transform:capitalize }
.sidebar-logout { width:30px; height:30px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--fg-5); transition:all .15s; flex-shrink:0 }
.sidebar-logout:hover { background:var(--red-bg); color:var(--red) }

/* Mobile sidebar */
.sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:25 }
@media(min-width:1024px) {
    .sidebar { transform:translateX(0) }
    .main-wrap { margin-left:16rem; transition:margin-left .3s ease }
    body.sidebar-collapsed .sidebar { transform:translateX(-100%) }
    body.sidebar-collapsed .main-wrap { margin-left:0 }
}
@media(max-width:1023px) {
    .sidebar { transform:translateX(-100%) }
    .sidebar.open { transform:translateX(0) }
    .sidebar.open + .sidebar-overlay { display:block }
}

/* Topbar */
.topbar { position:sticky; top:0; z-index:20; background:var(--bg-topbar); backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:0 1.5rem; height:56px; display:flex; align-items:center; gap:1rem }
.topbar-hamburger { color:var(--fg-4); cursor:pointer; padding:4px; border:none; background:none; display:flex; align-items:center; border-radius:6px }
.topbar-hamburger:hover { color:var(--fg-2); background:var(--bg-hover) }
.topbar-title { font-size:1rem; font-weight:600; color:var(--fg); flex:1 }
.topbar-right { display:flex; align-items:center; gap:.75rem }
.topbar-time { font-size:.75rem; color:var(--fg-5) }

/* Theme toggle */
.theme-btn { width:34px; height:34px; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:1px solid var(--border); background:var(--bg-card); color:var(--fg-4); transition:all .2s }
.theme-btn:hover { color:var(--fg); border-color:var(--border-input) }
.theme-btn svg { width:18px; height:18px }

/* Main content */
.main-wrap { min-height:100vh; display:flex; flex-direction:column }
.main-content { flex:1; padding:1.5rem }
@media(max-width:767px) { .main-content { padding:1rem } }

/* ═══════════════════════════════════════════════════
   4. PAGE HEADER (every list page)
   ═══════════════════════════════════════════════════ */
.pg-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap }
.pg-header-left { display:flex; align-items:center; gap:.875rem }
.pg-icon { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.pg-icon svg { width:20px; height:20px }
.pg-icon.blue   { background:var(--blue-bg);   color:var(--blue)   }
.pg-icon.cyan   { background:var(--cyan-bg);   color:var(--cyan)   }
.pg-icon.green  { background:var(--green-bg);  color:var(--green)  }
.pg-icon.amber  { background:var(--amber-bg);  color:var(--amber)  }
.pg-icon.violet { background:var(--violet-bg); color:var(--violet) }
.pg-icon.red    { background:var(--red-bg);    color:var(--red)    }
.pg-title { font-size:1.25rem; font-weight:700; color:var(--fg); line-height:1.3 }
.pg-sub { font-size:.8125rem; color:var(--fg-4); margin-top:.0625rem }
.pg-actions { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap }
@media(max-width:1023px) { .pg-header { flex-direction:column; align-items:stretch } }

/* ═══════════════════════════════════════════════════
   5. CARDS
   ═══════════════════════════════════════════════════ */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:.75rem; overflow:hidden; box-shadow:var(--shadow-sm) }
.card-head { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.card-head h3 { font-size:.875rem; font-weight:600; color:var(--fg-2) }
.card-body { padding:1.25rem }
.card-body.flush { padding:0 }

/* Stat cards */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem }
.stat { position:relative; background:var(--bg-card); border:1px solid var(--border); border-radius:.75rem; padding:1.125rem; display:flex; align-items:flex-start; gap:.875rem; box-shadow:var(--shadow-sm); transition:border-color .2s }
.stat:hover { border-color:var(--border-input) }
.stat.wide { grid-column:span 2 }
.stat-icon { width:42px; height:42px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.stat-icon svg { width:20px; height:20px }
.stat-label { font-size:.6875rem; font-weight:600; color:var(--fg-4); text-transform:uppercase; letter-spacing:.04em }
.stat-val { font-size:1.5rem; font-weight:700; color:var(--fg); line-height:1.3; margin-top:.125rem }
.stat-tag { position:absolute; top:.75rem; right:.75rem; font-size:.625rem; font-weight:600; padding:.125rem .5rem; border-radius:99px }

@media(max-width:1023px) { .stats { grid-template-columns:repeat(2,1fr) } .stat.wide { grid-column:span 2 } }
@media(max-width:639px)  { .stats { grid-template-columns:repeat(2,1fr); gap:.625rem } .stat.wide { grid-column:span 2 } .stat { padding:.75rem; gap:.5rem; flex-direction:column; align-items:flex-start } .stat-icon { width:32px; height:32px; border-radius:8px } .stat-icon svg { width:16px; height:16px } .stat-val { font-size:1.25rem } .stat-tag { top:.5rem; right:.5rem } }

/* ═══════════════════════════════════════════════════
   6. TABLES
   ═══════════════════════════════════════════════════ */
.tbl { overflow-x:auto }
.tbl table { width:100% }
.tbl th { padding:.625rem 1rem; text-align:left; font-size:.6875rem; font-weight:600; color:var(--fg-4); text-transform:uppercase; letter-spacing:.06em; background:var(--bg-thead); border-bottom:1px solid var(--border) }
.tbl td { padding:.625rem 1rem; font-size:.8125rem; color:var(--fg-2); border-bottom:1px solid var(--border); vertical-align:middle }
.tbl tr:last-child td { border-bottom:none }
.tbl tr:hover td { background:var(--bg-hover) }
.tbl .right { text-align:right }
.tbl .center { text-align:center }

/* Table cells */
.cell-user { display:flex; align-items:center; gap:.75rem }
.cell-avatar { width:32px; height:32px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:.6875rem; font-weight:700; flex-shrink:0 }
.cell-name { font-size:.8125rem; font-weight:600; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cell-sub { font-size:.6875rem; color:var(--fg-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.cell-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.75rem; color:var(--fg-3); background:var(--bg-hover); padding:.125rem .5rem; border-radius:4px }
.cell-actions { display:flex; align-items:center; gap:.25rem; justify-content:flex-end }

/* Action button (icon) — min 36px for touch targets */
.act { width:36px; height:36px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; color:var(--fg-4); cursor:pointer; border:none; background:transparent; transition:all .15s }
.act:hover { background:var(--bg-hover); color:var(--fg-2) }
.act.danger:hover { background:var(--red-bg); color:var(--red) }
.act svg { width:15px; height:15px }

/* Table footer */
.tbl-foot { padding:.625rem 1rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end }

@media(max-width:639px) { .cell-sub { display:none } }

/* ═══════════════════════════════════════════════════
   7. BADGES
   ═══════════════════════════════════════════════════ */
.badge { display:inline-flex; align-items:center; padding:.125rem .5rem; border-radius:99px; font-size:.6875rem; font-weight:600; letter-spacing:.02em }
.badge.green  { background:var(--green-bg);  color:var(--green)  }
.badge.red    { background:var(--red-bg);    color:var(--red)    }
.badge.amber  { background:var(--amber-bg);  color:var(--amber)  }
.badge.blue   { background:var(--blue-bg);   color:var(--blue)   }
.badge.violet { background:var(--violet-bg); color:var(--violet) }
.badge.muted  { background:var(--muted-bg);  color:var(--muted)  }

/* Status dot */
.dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:.375rem; vertical-align:middle }
.dot.green { background:var(--green); box-shadow:0 0 6px rgba(52,211,153,.4) }
.dot.red   { background:var(--red);   box-shadow:0 0 6px rgba(248,113,113,.4) }
.dot.amber { background:var(--amber); box-shadow:0 0 6px rgba(251,191,36,.4) }
.dot.off   { background:var(--fg-5) }

/* ═══════════════════════════════════════════════════
   8. BUTTONS
   ═══════════════════════════════════════════════════ */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.5rem 1rem; border-radius:.5rem; font-size:.8125rem; font-weight:600; cursor:pointer; transition:all .15s; border:none }
.btn svg { width:16px; height:16px }
.btn-primary { background:var(--accent); color:#fff }
.btn-primary:hover { background:var(--accent-hover) }
.btn-ghost { color:var(--fg-3); border:1px solid var(--border) }
.btn-ghost:hover { background:var(--bg-hover); color:var(--fg) }
.btn-danger { color:var(--red); background:var(--red-bg); border:1px solid transparent }
.btn-danger:hover { border-color:var(--red) }
.btn-sm { padding:.375rem .75rem; font-size:.75rem }

/* ═══════════════════════════════════════════════════
   9. FORMS
   ═══════════════════════════════════════════════════ */
.field { margin-bottom:1rem }
.field-label { display:block; font-size:.6875rem; font-weight:600; color:var(--fg-3); margin-bottom:.375rem; text-transform:uppercase; letter-spacing:.06em }
.field-input, .field-select { width:100%; padding:.625rem .875rem; background:var(--bg-input); border:1px solid var(--border-input); border-radius:.5rem; color:var(--fg); font-size:.875rem; transition:border-color .15s, box-shadow .15s }
.field-input:focus, .field-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(2,132,199,.15); outline:none }
.field-input::placeholder { color:var(--fg-5) }
.field-select { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .75rem center; padding-right:2rem }

/* Search */
.search { position:relative; display:flex; align-items:center }
.search svg { position:absolute; left:.75rem; color:var(--fg-5); pointer-events:none; width:16px; height:16px }
.search input { padding:.5rem .75rem .5rem 2.25rem; background:var(--bg-input); border:1px solid var(--border-input); border-radius:8px; color:var(--fg); font-size:.8125rem; width:260px; transition:border-color .15s, box-shadow .15s }
.search input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(2,132,199,.12); outline:none }
.search input::placeholder { color:var(--fg-5) }
@media(max-width:1023px) { .search input { width:100% } }

/* Grid helpers for forms */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem }
@media(max-width:639px) { .grid-2, .grid-3 { grid-template-columns:1fr } }

/* ═══════════════════════════════════════════════════
   10. MODALS
   ═══════════════════════════════════════════════════ */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(4px); z-index:40; display:none; align-items:center; justify-content:center }
.modal-bg.active { display:flex }
.modal { background:var(--bg-card); border:1px solid var(--border); border-radius:.875rem; width:calc(100% - 2rem); max-width:480px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg); animation:fadeUp .2s ease-out }
.modal-head { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.modal-head h3 { font-size:.875rem; font-weight:600; color:var(--fg-2) }
.modal-body { padding:1.25rem }
.modal-foot { padding:1rem 1.25rem; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:.5rem }
.modal-x { width:28px; height:28px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:var(--fg-4); cursor:pointer; border:none; background:transparent; font-size:1.25rem; line-height:1 }
.modal-x:hover { background:var(--bg-hover); color:var(--fg-2) }

/* Detail grid (inside modals) */
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem }
.detail-label { font-size:.6875rem; font-weight:600; color:var(--fg-4); text-transform:uppercase; letter-spacing:.06em }
.detail-val { font-size:.875rem; color:var(--fg-2); margin-top:.125rem }
@media(max-width:639px) { .detail-grid { grid-template-columns:1fr } }

/* ═══════════════════════════════════════════════════
   11. TOAST & FLASH
   ═══════════════════════════════════════════════════ */
.toast { position:fixed; top:1rem; right:1rem; z-index:50; padding:.75rem 1rem; border-radius:.5rem; font-size:.8125rem; font-weight:500; box-shadow:var(--shadow-md); animation:slideIn .3s ease-out }
.toast.success { background:var(--green-bg); color:var(--green); border:1px solid var(--green) }
.toast.error   { background:var(--red-bg);   color:var(--red);   border:1px solid var(--red) }

.flash { display:flex; align-items:center; gap:.625rem; padding:.75rem 1rem; border-radius:10px; font-size:.8125rem; margin-bottom:1.25rem; animation:fadeUp .3s ease-out }
.flash svg { width:16px; height:16px; flex-shrink:0 }
.flash.success { background:var(--green-bg); border:1px solid var(--green); color:var(--green) }
.flash.error   { background:var(--red-bg);   border:1px solid var(--red);   color:var(--red) }

/* ═══════════════════════════════════════════════════
   12. PAGINATION
   ═══════════════════════════════════════════════════ */
.pager { display:flex; align-items:center; gap:.25rem }
.pager a, .pager .cur { padding:.375rem .75rem; border-radius:7px; font-size:.75rem; font-weight:500; color:var(--fg-3); transition:all .15s; text-decoration:none }
.pager a:hover { background:var(--bg-hover); color:var(--fg) }
.pager .cur { background:var(--accent); color:#fff }

/* ═══════════════════════════════════════════════════
   13. DASHBOARD-SPECIFIC
   ═══════════════════════════════════════════════════ */
.greeting { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap }
.greeting-title { font-size:1.375rem; font-weight:700; color:var(--fg) }
.greeting-sub { font-size:.875rem; color:var(--fg-4); margin-top:.125rem }
.greeting-date { display:flex; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--fg-4); background:var(--bg-card); border:1px solid var(--border); border-radius:.5rem; padding:.5rem .875rem }

/* Chart cards */
.charts { display:grid; grid-template-columns:1fr 340px; gap:1rem; margin-bottom:1.5rem }
.chart-card { background:var(--bg-card); border:1px solid var(--border); border-radius:.75rem; overflow:hidden; box-shadow:var(--shadow-sm) }
.chart-head { padding:1.125rem 1.25rem .625rem; display:flex; align-items:flex-start; justify-content:space-between }
.chart-title { font-size:.9375rem; font-weight:600; color:var(--fg-2) }
.chart-sub { font-size:.75rem; color:var(--fg-4); margin-top:.125rem }
.chart-body { padding:.5rem 1.25rem 1.25rem }
.chart-body canvas { max-width:100% }
.chart-legend { display:flex; align-items:center; font-size:.75rem; color:var(--fg-3); gap:.375rem }
.chart-dot { width:8px; height:8px; border-radius:50%; display:inline-block }

.donut-legend { display:flex; gap:1.5rem; padding:.5rem 0; justify-content:center }
.donut-item { display:flex; align-items:center; gap:.5rem; font-size:.8125rem }
.donut-swatch { width:10px; height:10px; border-radius:50% }
.donut-label { color:var(--fg-3) }
.donut-val { color:var(--fg-2); font-weight:600 }

@media(max-width:1279px) { .charts { grid-template-columns:1fr } }
@media(max-width:767px)  { .greeting { flex-direction:column; align-items:flex-start } .greeting-date { display:none } }

/* Dashboard tables */
.dash-tables { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1.5rem }
.dash-card { background:var(--bg-card); border:1px solid var(--border); border-radius:.75rem; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm) }
.dash-card-head { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between }
.dash-card-head h3 { font-size:.9375rem; font-weight:600; color:var(--fg-2) }
.dash-card-link { display:inline-flex; align-items:center; gap:.375rem; font-size:.8125rem; color:var(--accent-fg); font-weight:500 }
.dash-card-body { flex:1; overflow-y:auto; max-height:420px }

/* User rows */
.user-row { display:flex; align-items:center; gap:.75rem; padding:.75rem 1.25rem; transition:background .12s }
.user-row:hover { background:var(--bg-hover) }
.user-avatar { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.75rem; font-weight:700; flex-shrink:0 }
.user-info { flex:1; min-width:0 }
.user-name { display:block; font-size:.8125rem; font-weight:600; color:var(--fg-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.user-sub { display:block; font-size:.6875rem; color:var(--fg-4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.user-meta { display:flex; flex-direction:column; align-items:flex-end; gap:.25rem; flex-shrink:0 }
.user-time { font-size:.6875rem; color:var(--fg-5) }

/* Timeline */
.timeline-item { display:flex; gap:.75rem; padding:.75rem 1.25rem; position:relative; transition:background .12s }
.timeline-item:hover { background:var(--bg-hover) }
.timeline-item::after { content:''; position:absolute; left:2.25rem; top:2.75rem; bottom:-.75rem; width:1px; background:var(--border) }
.timeline-item:last-child::after { display:none }
.tl-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; z-index:1 }
.tl-icon svg { width:16px; height:16px }
.tl-body { flex:1; min-width:0 }
.tl-head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-bottom:.25rem }
.tl-type { font-size:.8125rem; font-weight:600; color:var(--fg-2) }
.tl-time { font-size:.6875rem; color:var(--fg-5); flex-shrink:0 }
.tl-msg { font-size:.8125rem; color:var(--fg-3); line-height:1.5; margin-bottom:.375rem }
.tl-device { display:inline-flex; align-items:center; gap:.375rem; font-size:.6875rem; color:var(--fg-4); background:var(--bg-hover); padding:.125rem .5rem; border-radius:.25rem }
.tl-device svg { width:12px; height:12px }

/* Empty state */
.empty { padding:3rem 1rem; text-align:center; color:var(--fg-5) }
.empty svg { margin:0 auto .75rem; opacity:.4 }
.empty p { font-size:.875rem }

@media(max-width:1023px) { .dash-tables { grid-template-columns:1fr } }
@media(max-width:639px)  { .user-meta { display:none } }

/* ═══════════════════════════════════════════════════
   14. LOGIN PAGE
   ═══════════════════════════════════════════════════ */
.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative }

/* Animated orbs */
.login-bg { position:fixed; inset:0; z-index:0; overflow:hidden }
.login-bg::before { content:''; position:absolute; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(14,165,233,.08) 0%,transparent 70%); top:-200px; right:-100px; animation:drift1 20s ease-in-out infinite }
.login-bg::after  { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(139,92,246,.06) 0%,transparent 70%); bottom:-150px; left:-100px; animation:drift2 25s ease-in-out infinite }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-80px,60px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(60px,-80px)} }

.login-grid { position:fixed; inset:0; z-index:0; background-image:linear-gradient(rgba(128,128,128,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(128,128,128,.02) 1px,transparent 1px); background-size:64px 64px }

.login-wrap { position:relative; z-index:1; width:100%; max-width:420px; padding:1.5rem }

.login-logo { display:flex; align-items:center; justify-content:center; gap:.875rem; margin-bottom:2.5rem }
.login-logo-icon { width:52px; height:52px; border-radius:16px; background:linear-gradient(135deg,#0ea5e9,#0369a1); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 32px rgba(14,165,233,.25) }
.login-logo-text { font-size:1.625rem; font-weight:700; letter-spacing:-.02em; color:var(--fg) }
.login-logo-text span { color:var(--accent-fg) }

.login-card { background:var(--bg-card); backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:20px; padding:2.25rem; box-shadow:var(--shadow-lg); animation:fadeUp .5s ease-out }
.login-card h2 { font-size:1.375rem; font-weight:700; color:var(--fg) }
.login-card .subtitle { color:var(--fg-4); font-size:.875rem; margin:.375rem 0 1.75rem }

.login-error { display:flex; align-items:center; gap:.625rem; background:var(--red-bg); border:1px solid var(--red); color:var(--red); border-radius:10px; padding:.75rem 1rem; font-size:.8125rem; margin-bottom:1.25rem }
.login-error svg { flex-shrink:0; width:16px; height:16px }

.login-field { margin-bottom:1.125rem }
.login-label { display:block; font-size:.75rem; font-weight:600; color:var(--fg-3); margin-bottom:.375rem; text-transform:uppercase; letter-spacing:.06em }
.login-input { width:100%; padding:.75rem 1rem; background:var(--bg-input); border:1px solid var(--border-input); border-radius:10px; color:var(--fg); font-size:.875rem; transition:border-color .2s, box-shadow .2s }
.login-input:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(2,132,199,.15); outline:none }
.login-input::placeholder { color:var(--fg-5) }

.login-pw { position:relative }
.login-pw input { padding-right:2.75rem }
.login-pw-toggle { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--fg-5); cursor:pointer; padding:4px; display:flex; align-items:center }
.login-pw-toggle:hover { color:var(--fg-3) }
.login-pw-toggle svg { width:18px; height:18px }

.login-btn { width:100%; padding:.8125rem; border-radius:10px; border:none; background:linear-gradient(135deg,var(--accent),var(--accent-hover)); color:#fff; font-size:.875rem; font-weight:600; cursor:pointer; margin-top:.5rem; box-shadow:0 4px 16px rgba(2,132,199,.25); transition:transform .15s, box-shadow .15s }
.login-btn:hover { transform:translateY(-1px); box-shadow:0 6px 24px rgba(2,132,199,.35) }
.login-btn:active { transform:translateY(0) }

.login-footer { text-align:center; margin-top:2rem; font-size:.75rem; color:var(--fg-5) }

/* ═══════════════════════════════════════════════════
   15. SETTINGS PAGE
   ═══════════════════════════════════════════════════ */
.settings-grid { display:grid; grid-template-columns:1fr 320px; gap:1.5rem }
@media(max-width:1023px) { .settings-grid { grid-template-columns:1fr } }

.color-picker { display:flex; align-items:center; gap:.75rem }
.color-picker input[type=color] { width:40px; height:40px; border-radius:8px; border:1px solid var(--border); cursor:pointer; background:transparent; padding:2px }

/* ═══════════════════════════════════════════════════
   16. UTILITIES
   ═══════════════════════════════════════════════════ */
.hidden { display:none !important }
.flex { display:flex } .flex-1 { flex:1 } .items-center { align-items:center }
.justify-between { justify-content:space-between } .justify-end { justify-content:flex-end }
.gap-1 { gap:.25rem } .gap-2 { gap:.5rem } .gap-3 { gap:.75rem } .gap-4 { gap:1rem }
.grid { display:grid }
.mb-0 { margin-bottom:0 } .mb-4 { margin-bottom:1rem } .mb-6 { margin-bottom:1.5rem }
.mt-4 { margin-top:1rem }
.w-full { width:100% }
.text-right { text-align:right }
.text-center { text-align:center }
.inline { display:inline }
.font-mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }

/* Semantic text helpers (replace inline styles) */
.caption { color:var(--fg-4); font-size:.8125rem }
.muted   { color:var(--fg-4) }
.faint   { color:var(--fg-5) }
.accent  { color:var(--accent-fg) }
.fw-600  { font-weight:600 }
.fg-2    { color:var(--fg-2) }

/* ═══════════════════════════════════════════════════
   17. ANIMATIONS
   ═══════════════════════════════════════════════════ */
@keyframes fadeUp   { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
@keyframes slideIn  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:none} }