/* AuthGuard Redesign — visual layer (v2)
 *
 * Token additions specific to this layer (not in tokens.css). */
:root {
  --teal: #0d9488;
  --teal-bg: rgba(13, 148, 136, .14);
}
/*
 *
 * Re-skins the live dashboard chrome using the design-system tokens defined
 * in tokens.css. Loaded AFTER tailwind.css, components.css, AND
 * widget-system.css so it wins the cascade.
 *
 * Targets the real markup that ships in production today:
 *   - <aside class="sidebar fixed top-0 left-0 h-full bg-white dark:bg-gray-900 ..."> (dashboard/base.html L737)
 *   - <header class="fixed top-0 right-0 z-20 bg-white ...">                         (dashboard/base.html L747)
 *   - sidebar nav <a> uses Tailwind utilities INLINE for active+hover state
 *     (sidebar.html L138, L183) — no .active class to hook, so we override
 *     the specific Tailwind utilities in scope.
 *   - widget-card / widget-gradient / widget-{devices,users,service,alerts,
 *     purple,teal,gray} (widget-system.css line 403+ + sections/_*.html)
 *
 * Direction tokens come from tokens.css (quiet=light, premium=dark). The
 * .dark class on <html> is kept in lockstep with data-dir by the FOUC
 * guards in the base templates.
 *
 * Hard rules from docs/design-system/project/README.md:
 *   - Sentence case in product UI
 *   - No exclamation marks
 *   - No gradients on product chrome (sidebar / topnav / cards)
 *   - 4px spacing grid
 *   - Token-driven colors only
 */

/* ──────────────────────────────────────────────────────────────────────
   PAGE BACKGROUND — light "Quiet" gray (uses --bg-2 token, not literal)
   ────────────────────────────────────────────────────────────────────── */
html[data-dir="quiet"] body {
  background: var(--bg-2);
  color: var(--fg);
}
html[data-dir="quiet"] main#main-content {
  background: var(--bg-2);
}

/* ──────────────────────────────────────────────────────────────────────
   SIDEBAR — aside.sidebar
   ────────────────────────────────────────────────────────────────────── */

/* Root container */
aside.sidebar {
  background: var(--side, #ffffff) !important;
  border-right: 1px solid var(--line) !important;
  color: var(--side-fg, var(--fg-2));
  box-shadow: none !important;
}

/* Logo strip — kill the "from-white via-blue-50/30 to-blue-100/20" gradient */
aside.sidebar > div > div.h-16.border-b,
aside.sidebar .h-16.border-b.border-gray-200 {
  background: var(--bg) !important;
  border-bottom: 1px solid var(--line) !important;
  background-image: none !important;
}
aside.sidebar .logo-text,
aside.sidebar span.logo-text {
  color: var(--fg) !important;
}
aside.sidebar a.flex.items-center.group:hover .logo-text {
  color: var(--accent) !important;
}

/* Toggle button — match the topnav iconbtn style */
aside.sidebar .toggle-button {
  background: transparent !important;
  border-color: transparent !important;
  border-radius: var(--radius);
  transition: background-color .15s ease;
}
aside.sidebar .toggle-button:hover {
  background: var(--bg-hover) !important;
  border-color: var(--line) !important;
}
aside.sidebar .toggle-button svg {
  color: var(--fg-3) !important;
}

/* Tab strip (school vs service) — soft hover, accent on active */
aside.sidebar .category-tab {
  border-radius: var(--radius);
  transition: background-color .15s ease;
}
aside.sidebar .category-tab[class*="bg-blue-100"],
aside.sidebar .category-tab[class*="bg-indigo-100"] {
  background: var(--accent-bg) !important;
}
aside.sidebar .category-tab > div.bg-blue-100,
aside.sidebar .category-tab > div.bg-indigo-200 {
  background: color-mix(in srgb, var(--accent) 16%, transparent) !important;
  color: var(--accent) !important;
}

/* Group headings — eyebrow style per design system */
aside.sidebar h3.text-xs.font-semibold.uppercase {
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  color: var(--fg-3) !important;
  text-transform: uppercase;
}
aside.sidebar h3.text-xs.font-semibold.uppercase.text-gray-500,
aside.sidebar h3.text-xs.font-semibold.uppercase.dark\:text-gray-400 {
  color: var(--fg-3) !important;
}

/* Group toggle row — Alpine `@click` attribute is escaped differently across
   parsers. Use the `x-data*="toggleGroup"` parent attribute instead, which
   sidebar.html sets on the wrapping <div> for every collapsible group. */
aside.sidebar div[x-data*="toggleGroup"] > div[role="button"]:hover,
aside.sidebar div[x-data*="toggleGroup"] > div.cursor-pointer:hover {
  background: var(--bg-hover) !important;
}

/* Sidebar nav <a> — IDLE state (text-gray-600 / dark:text-gray-400)
   Scoped with `nav` so it only matches inside the actual nav container,
   not the logo anchor at the top of the sidebar. */
aside.sidebar nav a.flex.items-center.gap-3 {
  border-radius: var(--radius-lg, 10px);
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

/* Sidebar nav <a> — IDLE text color override */
aside.sidebar a.flex.items-center.gap-3.text-gray-600 {
  color: var(--fg-2) !important;
}

/* Sidebar nav <a> — HOVER override (Tailwind hover:bg-gray-50) */
aside.sidebar a.flex.items-center.gap-3:hover,
aside.sidebar a.flex.items-center.gap-3.text-gray-600:hover {
  background: var(--bg-hover) !important;
  color: var(--fg) !important;
}
aside.sidebar a.flex.items-center.gap-3:hover .text-sm.font-medium {
  color: var(--fg) !important;
}

/* Sidebar nav <a> — ACTIVE state (Tailwind bg-blue-50 text-blue-700)
   Replaced with token Quiet treatment: white card lift + accent text. */
aside.sidebar nav a.flex.items-center.gap-3.bg-blue-50,
aside.sidebar nav a.flex.items-center.gap-3[class*="bg-blue-50"] {
  background: var(--side-active-bg, #ffffff) !important;
  color: var(--accent) !important;
  box-shadow: var(--side-active-shadow, 0 0 0 1px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04)) !important;
  font-weight: 600 !important;
}
aside.sidebar nav a.flex.items-center.gap-3.bg-blue-50 p,
aside.sidebar nav a.flex.items-center.gap-3.bg-blue-50 .text-sm.font-medium {
  color: var(--accent) !important;
  font-weight: 600 !important;
}

/* Sidebar item icon chip — IDLE */
aside.sidebar a .flex-shrink-0.w-10.h-10.bg-gray-100 {
  background: var(--bg-3) !important;
  color: var(--fg-2) !important;
}
/* Sidebar item icon chip — HOVER (group-hover:bg-gray-200) */
aside.sidebar a:hover .flex-shrink-0.w-10.h-10.bg-gray-100,
aside.sidebar a.group:hover > div.bg-gray-100 {
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-3)) !important;
  color: var(--fg) !important;
}
/* Sidebar item icon chip — ACTIVE (bg-blue-100 text-blue-600) */
aside.sidebar a.bg-blue-50 > div.bg-blue-100,
aside.sidebar a.bg-blue-50 .flex-shrink-0.w-10.h-10[class*="bg-blue-100"] {
  background: var(--accent-bg) !important;
  color: var(--accent) !important;
}

/* Loading skeletons */
aside.sidebar .h-12.bg-gray-200 {
  background: var(--bg-3) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   TOPNAV — header.fixed (the unified dashboard header)
   min-height (not height) so dropdown content can extend the bar without
   being clipped.
   ────────────────────────────────────────────────────────────────────── */
main#main-content > header.fixed {
  background: var(--topbar-bg, var(--bg)) !important;
  border-bottom: 1px solid var(--topbar-line, var(--line)) !important;
  min-height: 64px;
  box-shadow: none !important;
}

/* Notification + icon buttons in topnav */
main#main-content > header .notification-btn {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: var(--radius);
  width: 40px;
  height: 40px;
  transition: background-color .15s ease, color .15s ease;
}
main#main-content > header .notification-btn:hover {
  background: var(--bg-hover) !important;
}

/* Notification icon chip backgrounds — drop the colored fill, use a token chip */
main#main-content > header .notification-btn .w-8.h-8.rounded-full {
  background: var(--bg-3) !important;
}
main#main-content > header .notification-btn[data-color="orange"] .w-8.h-8 {
  background: color-mix(in srgb, var(--warn) 16%, transparent) !important;
  color: var(--warn) !important;
}
main#main-content > header .notification-btn[data-color="purple"] .w-8.h-8 {
  background: var(--accent-bg) !important;
  color: var(--accent) !important;
}
main#main-content > header .notification-btn[data-color="orange"] svg { color: var(--warn) !important; }
main#main-content > header .notification-btn[data-color="purple"] svg { color: var(--accent) !important; }

/* Search input in topnav */
main#main-content > header input[type="text"][placeholder*="Search" i],
main#main-content > header input[type="search"] {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--fg) !important;
}
main#main-content > header input[type="text"][placeholder*="Search" i]:focus,
main#main-content > header input[type="search"]:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 2px var(--accent-bg, rgba(91,95,199,.18)) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   DASHBOARD WIDGETS — widget-card / widget-gradient / widget-{variant}
   ──────────────────────────────────────────────────────────────────────
   widget-system.css ships a heavy "glass + colored gradient" treatment.
   The design system explicitly retired gradients on product chrome, so we
   override to the Quiet stat-card pattern: white card + 3px colored left
   stripe + tinted icon chip + dark readable text.
   ────────────────────────────────────────────────────────────────────── */

a.widget-card,
.widget-card {
  background: var(--bg) !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: var(--fg) !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-1) !important;
  position: relative;
  overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

a.widget-card:hover,
.widget-card:hover {
  box-shadow: var(--shadow-2) !important;
  transform: translateY(-1px) !important;
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line)) !important;
}

/* Kill the widget-system.css gradient halo overlay */
.widget-card::before {
  display: none !important;
}

/* widget-gradient = "this is a stat tile" — strip its white text + gradient bg */
.widget-card.widget-gradient {
  color: var(--fg) !important;
  background: var(--bg) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
}

/* Inner labels stripped of "color:white" inheritance */
.widget-card .widget-label,
.widget-card.widget-gradient .widget-label,
.widget-card .widget-subtitle {
  color: var(--fg-3) !important;
  opacity: 1 !important;
}
.widget-card .widget-value,
.widget-card.widget-gradient .widget-value {
  color: var(--fg) !important;
  letter-spacing: -.02em !important;
}

/* Generic icon chip default */
.widget-card .widget-icon-container {
  background: var(--bg-3) !important;
  color: var(--fg-2) !important;
  border-radius: var(--radius);
  width: 40px !important;
  height: 40px !important;
}
.widget-card .widget-icon-container .widget-icon,
.widget-card .widget-icon-container i {
  color: inherit !important;
  opacity: 1 !important;
}

/* Per-variant: 3px colored left stripe + tinted icon chip */
.widget-card.widget-devices,
.widget-card.widget-users,
.widget-card.widget-service,
.widget-card.widget-alerts,
.widget-card.widget-purple,
.widget-card.widget-teal,
.widget-card.widget-gray {
  padding-left: 18px;
}
.widget-card.widget-devices::after,
.widget-card.widget-users::after,
.widget-card.widget-service::after,
.widget-card.widget-alerts::after,
.widget-card.widget-purple::after,
.widget-card.widget-teal::after,
.widget-card.widget-gray::after {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  display: block !important;
}
.widget-card.widget-devices::after { background: var(--info); }
.widget-card.widget-users::after   { background: var(--ok); }
.widget-card.widget-service::after { background: var(--warn); }
.widget-card.widget-alerts::after  { background: var(--crit); }
.widget-card.widget-purple::after  { background: var(--accent); }
.widget-card.widget-teal::after    { background: var(--teal, #0d9488); }
.widget-card.widget-gray::after    { background: var(--fg-3); }

/* Tinted icon chip per variant */
.widget-card.widget-devices .widget-icon-container { background: color-mix(in srgb, var(--info) 14%, transparent) !important; color: var(--info) !important; }
.widget-card.widget-users   .widget-icon-container { background: color-mix(in srgb, var(--ok)  14%, transparent) !important; color: var(--ok)   !important; }
.widget-card.widget-service .widget-icon-container { background: color-mix(in srgb, var(--warn) 16%, transparent) !important; color: var(--warn) !important; }
.widget-card.widget-alerts  .widget-icon-container { background: color-mix(in srgb, var(--crit) 14%, transparent) !important; color: var(--crit) !important; }
.widget-card.widget-purple  .widget-icon-container { background: var(--accent-bg) !important; color: var(--accent) !important; }
.widget-card.widget-teal    .widget-icon-container { background: var(--teal-bg, rgba(13,148,136,.14)) !important; color: var(--teal, #0d9488) !important; }
.widget-card.widget-gray    .widget-icon-container { background: var(--bg-3) !important; color: var(--fg-2) !important; }

/* Alert pulse badge */
.widget-alert-badge {
  background: var(--crit) !important;
  color: #fff !important;
}

/* Trend / delta blocks inside widgets */
.widget-card .text-green-600,
.widget-card .text-green-500 { color: var(--ok) !important; }
.widget-card .text-red-600,
.widget-card .text-red-500   { color: var(--crit) !important; }
.widget-card .text-yellow-600,
.widget-card .text-amber-500 { color: var(--warn) !important; }

/* ──────────────────────────────────────────────────────────────────────
   DASHBOARD SECTIONS — header strip above each grid of widgets
   ────────────────────────────────────────────────────────────────────── */
main#main-content .dashboard-section > h2,
main#main-content .dashboard-section > .section-title,
main#main-content .dashboard-section > div > h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--fg-3);
}

/* ──────────────────────────────────────────────────────────────────────
   DARK MODE — keyed on plain `html.dark`. The `[data-dir]` qualifier was
   too tight: marketing pages can flip `.dark` before Alpine syncs `data-dir`,
   causing a flash of un-tokenized colors. `html.dark` always matches.
   ────────────────────────────────────────────────────────────────────── */
html.dark {
  --bg: #0b0d12;
  --bg-2: #11141b;
  --bg-3: #161922;
  --bg-hover: #1a1d27;
  --bg-sunk: #080a0f;
  --side: #0b0d12;
  --side-fg: #e5e7eb;
  --side-muted: #6b7280;
  --side-active-bg: #1a1d27;
  --side-active-fg: #ffffff;
  --side-active-shadow: inset 2px 0 0 #f5b800;
  --fg: #f5f5f7;
  --fg-2: #d1d5db;
  --fg-3: #9ca3af;
  --fg-4: #6b7280;
  --line: #1f232d;
  --line-2: #161922;
  --accent: #f5b800;
  --accent-fg: #0b0d12;
  --accent-bg: rgba(245,184,0,.10);
  --ok:   #34d399;
  --warn: #fbbf24;
  --crit: #f87171;
  --info: #60a5fa;
  --topbar-bg: #0b0d12;
  --topbar-line: #1f232d;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.4);
}

/* Hard kills for legacy white/gray Tailwind utilities in dark mode */
html.dark body { background: #0a0c11 !important; color: var(--fg); }
html.dark main#main-content { background: #0a0c11 !important; }
html.dark .bg-white { background: var(--bg) !important; }
html.dark .bg-gray-50 { background: var(--bg-2) !important; }
html.dark .bg-gray-100 { background: var(--bg-3) !important; }
html.dark .bg-gray-200 { background: var(--bg-3) !important; }
html.dark .text-gray-900 { color: var(--fg) !important; }
html.dark .text-gray-700, html.dark .text-gray-600 { color: var(--fg-2) !important; }
html.dark .text-gray-500, html.dark .text-gray-400 { color: var(--fg-3) !important; }
html.dark .border-gray-200, html.dark .border-gray-100, html.dark .border-gray-300 { border-color: var(--line) !important; }

/* Active sidebar item in dark — gold inset stripe */
html.dark aside.sidebar a.flex.items-center.gap-3.bg-blue-50,
html.dark aside.sidebar a.flex.items-center.gap-3[class*="bg-blue-50"] {
  background: var(--side-active-bg) !important;
  color: var(--accent) !important;
  box-shadow: inset 2px 0 0 var(--accent) !important;
}
html.dark aside.sidebar a.flex.items-center.gap-3.bg-blue-50 p {
  color: var(--accent) !important;
}

/* Dark widget */
html.dark .widget-card {
  background: var(--bg-2) !important;
  border-color: var(--line) !important;
}
html.dark .widget-card .widget-icon-container {
  background: var(--bg-3) !important;
}

/* ──────────────────────────────────────────────────────────────────────
   THEME-SWITCHING jank suppression — keeps the toggle instant
   ────────────────────────────────────────────────────────────────────── */
html.theme-switching * {
  transition-duration: 0s !important;
}

/* ──────────────────────────────────────────────────────────────────────
   BUTTONS (light dusting; full button system later)
   ────────────────────────────────────────────────────────────────────── */
button.btn-primary,
.btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
}
button.btn-primary:hover,
.btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  border-color: color-mix(in srgb, var(--accent) 88%, #000);
}

/* ──────────────────────────────────────────────────────────────────────
   PAGE HEADER (components/_page_header.html)
   Reference: docs/design-system/project/preview/page-header.html
   ────────────────────────────────────────────────────────────────────── */
.ag-page-header {
  padding: 22px 28px 18px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.ag-crumbs {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-3);
  margin-bottom: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.ag-crumbs a {
  color: var(--fg-3);
  text-decoration: none;
  transition: color .15s ease;
}
.ag-crumbs a:hover { color: var(--accent); }
.ag-crumbs-sep { color: var(--fg-4); }
.ag-crumbs-current { color: var(--fg-2); font-weight: 600; }

.ag-page-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ag-page-header-text { flex: 1; min-width: 0; }
.ag-page-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.ag-page-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--fg-3);
}
.ag-meta {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.ag-pill {
  background: var(--bg-3);
  color: var(--fg-2);
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}
.ag-pill-mono {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

.ag-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--radius-pill, 999px);
  font-size: 11px;
  font-weight: 600;
}
.ag-status-pill .ag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.ag-status-ok   { background: color-mix(in srgb, var(--ok) 14%, transparent);   color: var(--ok); }
.ag-status-info { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.ag-status-warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.ag-status-crit { background: color-mix(in srgb, var(--crit) 14%, transparent); color: var(--crit); }
.ag-status-ok   .ag-dot { background: var(--ok); }
.ag-status-info .ag-dot { background: var(--info); }
.ag-status-warn .ag-dot { background: var(--warn); }
.ag-status-crit .ag-dot { background: var(--crit); }

.ag-page-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Page-header buttons — reuses .ag-btn family */
.ag-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  font-family: inherit;
}
.ag-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-bg);
}
.ag-btn-primary {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}
.ag-btn-primary:hover {
  background: color-mix(in srgb, var(--accent) 88%, #000);
  border-color: color-mix(in srgb, var(--accent) 88%, #000);
  color: var(--accent-fg);
}
.ag-btn-secondary {
  background: var(--bg);
  color: var(--fg-2);
  border-color: var(--line);
}
.ag-btn-secondary:hover {
  background: var(--bg-hover);
  color: var(--fg);
  border-color: color-mix(in srgb, var(--line) 70%, var(--fg-3));
}
.ag-btn-danger {
  background: var(--crit);
  color: #fff;
  border-color: var(--crit);
}
.ag-btn-danger:hover {
  background: color-mix(in srgb, var(--crit) 90%, #000);
  border-color: color-mix(in srgb, var(--crit) 90%, #000);
}

/* ──────────────────────────────────────────────────────────────────────
   ICON helper — make {% icon %} svgs respect color + alignment
   ────────────────────────────────────────────────────────────────────── */
.ag-icon {
  display: inline-block;
  vertical-align: -0.15em;
  flex-shrink: 0;
  color: currentColor;
}

/* ──────────────────────────────────────────────────────────────────────
   DASHBOARD HOME — animations + ancillary widgets ported out of the
   inline <style> block in dashboard_home.html so all widget CSS is
   token-aware in one place.
   ────────────────────────────────────────────────────────────────────── */
.dashboard-section {
  animation: ag-fadeInUp 0.3s ease-out;
}
@keyframes ag-fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ag-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}
@keyframes ag-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* Small status pip used at corner of widget tiles */
.priority-dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  z-index: 10;
}
.priority-dot.has-urgent {
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--warn) 40%, transparent);
  animation: ag-pulse 2s infinite;
}

/* "Live" pip + label used by the Active Users widget */
.live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 9999px);
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  color: var(--ok);
  font-size: 10px;
  font-weight: 600;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ok);
  animation: ag-pulse 2s infinite;
}
.live-text {
  text-transform: uppercase;
  letter-spacing: .05em;
}
.widget-icon-pulse  { animation: ag-pulse  1.5s infinite; }
.widget-icon-bounce { animation: ag-bounce 2s   infinite; }

/* Widget header strip used at the top of multi-card widgets in the
   support / monitoring / activity sections. Token-aware. */
.widget-header-standard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  color: var(--fg);
}
.widget-title-container {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--fg);
}
.widget-icon-box {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-fg, #fff);
  flex-shrink: 0;
  font-size: 11px;
  background: var(--accent);
}
.widget-action-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  transition: color .15s ease;
  text-decoration: none;
}
.widget-action-link:hover {
  color: color-mix(in srgb, var(--accent) 85%, #000);
  text-decoration: underline;
}

/* Quick-action chip inside widget headers */
.widget-quick-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-2);
  background: var(--bg-3);
  padding: 4px 10px;
  border-radius: var(--radius);
  transition: background-color .15s ease, color .15s ease;
}
.widget-quick-action:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

/* Inner widget body padding (was set in dashboard_home.html inline style) */
.widget-body {
  padding: 16px;
}

/* Widget label / value / subtitle — token-driven typography */
.widget-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--fg-3);
}
.widget-value {
  font-weight: 700;
  line-height: 1.2;
  color: var(--fg);
  letter-spacing: -.02em;
}
.widget-value-lg {
  font-size: 28px;
}
.widget-subtitle {
  font-size: 11px;
  color: var(--fg-3);
  margin-top: 4px;
}
.widget-icon {
  font-size: 18px;
}

/* ──────────────────────────────────────────────────────────────────────
   EYEBROW — small uppercase section label used above section <h2>s
   ────────────────────────────────────────────────────────────────────── */
.ag-eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

/* ──────────────────────────────────────────────────────────────────────
   STAT CARD (components/_stat_card.html)
   Reference: preview/stat-cards.html
   ────────────────────────────────────────────────────────────────────── */
.ag-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 10px);
  padding: 16px 16px 16px 20px;
  text-decoration: none;
  color: var(--fg);
  box-shadow: var(--shadow-1);
  transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
a.ag-stat:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 20%, var(--line));
}
.ag-stat::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.ag-stat-info::before   { background: var(--info); }
.ag-stat-ok::before     { background: var(--ok); }
.ag-stat-warn::before   { background: var(--warn); }
.ag-stat-crit::before   { background: var(--crit); }
.ag-stat-accent::before { background: var(--accent); }
.ag-stat-teal::before   { background: var(--teal, #0d9488); }
.ag-stat-gray::before   { background: var(--fg-3); }

.ag-stat-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.ag-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
}
.ag-stat-info   .ag-stat-icon { background: color-mix(in srgb, var(--info) 14%, transparent); color: var(--info); }
.ag-stat-ok     .ag-stat-icon { background: color-mix(in srgb, var(--ok)   14%, transparent); color: var(--ok); }
.ag-stat-warn   .ag-stat-icon { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.ag-stat-crit   .ag-stat-icon { background: color-mix(in srgb, var(--crit) 14%, transparent); color: var(--crit); }
.ag-stat-accent .ag-stat-icon { background: var(--accent-bg); color: var(--accent); }
.ag-stat-teal   .ag-stat-icon { background: var(--teal-bg, rgba(13,148,136,.14)); color: var(--teal, #0d9488); }
.ag-stat-gray   .ag-stat-icon { background: var(--bg-3); color: var(--fg-2); }

.ag-stat-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.ag-stat-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.ag-stat-subtitle {
  font-size: 11px;
  color: var(--fg-3);
}
.ag-stat-delta {
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ag-stat-delta-up   { color: var(--ok); }
.ag-stat-delta-down { color: var(--crit); }
.ag-stat-delta-flat { color: var(--fg-3); }

/* ──────────────────────────────────────────────────────────────────────
   EMPTY STATE (components/_empty_state.html)
   Reference: preview/empty-states.html
   ────────────────────────────────────────────────────────────────────── */
.ag-empty {
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg, 10px);
  padding: 48px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--fg-2);
}
.ag-empty-compact {
  padding: 24px 16px;
  gap: 8px;
}
.ag-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-lg, 10px);
  background: var(--bg-3);
  color: var(--fg-3);
  display: grid;
  place-items: center;
}
.ag-empty-illustration {
  width: 96px;
  height: 96px;
  object-fit: contain;
}
.ag-empty-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}
.ag-empty-description {
  margin: 0;
  max-width: 480px;
  font-size: 13px;
  color: var(--fg-3);
  line-height: 1.5;
}
.ag-empty-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ──────────────────────────────────────────────────────────────────────
   MODAL — preview/modal.html spec
   Opt-in via .ag-modal / .ag-modal-overlay. Existing Bootstrap modals
   get a soft visual upgrade via the shell rules below.
   ────────────────────────────────────────────────────────────────────── */

.ag-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 16px;
}

.ag-modal {
  background: var(--bg);
  color: var(--fg);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-3, 0 4px 24px rgba(0,0,0,.15));
  max-width: 560px;
  width: 100%;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.ag-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}

.ag-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--fg);
}

.ag-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .15s ease;
}
.ag-modal-close:hover {
  background: var(--bg-hover);
  color: var(--fg);
}

.ag-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.ag-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--bg-2);
}

/* ──────────────────────────────────────────────────────────────────────
   TOASTS / ALERTS — preview/toasts.html spec
   4px left-edge accent stripe is unique to this surface (per design rules).
   ────────────────────────────────────────────────────────────────────── */

.ag-toast {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--info);
  border-radius: var(--radius-lg, 10px);
  padding: 12px 14px;
  box-shadow: var(--shadow-2);
  color: var(--fg);
  max-width: 420px;
  font-size: 13px;
  line-height: 1.45;
}

.ag-toast-info { border-left-color: var(--info); }
.ag-toast-ok,
.ag-toast-success { border-left-color: var(--ok); }
.ag-toast-warn,
.ag-toast-warning { border-left-color: var(--warn); }
.ag-toast-crit,
.ag-toast-error,
.ag-toast-danger { border-left-color: var(--crit); }

.ag-toast-title {
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--fg);
}

.ag-toast-body {
  color: var(--fg-2);
}

.ag-toast-close {
  background: transparent;
  border: 0;
  color: var(--fg-3);
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  align-self: flex-start;
}
.ag-toast-close:hover { color: var(--fg); }

/* Stack container */
.ag-toast-stack {
  position: fixed;
  bottom: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1100;
}

/* ──────────────────────────────────────────────────────────────────────
   TABLE SYSTEM — preview/table-devices.html spec
   Token-aware. Opt-in by adding `.ag-table` to <table>s, or
   `.ag-table-shell` to the surrounding card.
   ────────────────────────────────────────────────────────────────────── */
.ag-table-shell {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 10px);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.ag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--fg);
}
.ag-table thead th {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.ag-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line-2, var(--line));
  vertical-align: middle;
}
.ag-table tbody tr:last-child td { border-bottom: 0; }
.ag-table tbody tr {
  transition: background-color .12s ease;
}
.ag-table tbody tr:hover {
  background: var(--bg-hover);
}
.ag-table .ag-table-num {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}
.ag-table .ag-table-actions {
  text-align: right;
  white-space: nowrap;
}
.ag-table-compact tbody td { padding: 8px 12px; }
.ag-table-compact thead th { padding: 8px 12px; }
.ag-table .ag-table-check {
  width: 36px;
  padding-left: 14px;
  padding-right: 0;
}
.ag-table .ag-table-check input[type="checkbox"] {
  accent-color: var(--accent);
}
.ag-bulk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--accent-bg);
  color: var(--fg);
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  font-weight: 500;
}
.ag-bulk-toolbar .ag-bulk-count {
  font-weight: 600;
  color: var(--accent);
}
.ag-bulk-toolbar .ag-bulk-actions {
  display: flex;
  gap: 8px;
}

/* ──────────────────────────────────────────────────────────────────────
   FORM FIELDS — preview/form-fields.html spec
   ────────────────────────────────────────────────────────────────────── */
.ag-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.ag-field-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-2);
}
.ag-field-help {
  font-size: 11px;
  color: var(--fg-3);
}
.ag-field-error {
  font-size: 11px;
  color: var(--crit);
}
.ag-input,
.ag-textarea,
.ag-select {
  font: inherit;
  width: 100%;
  background: var(--bg);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.4;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ag-textarea {
  min-height: 96px;
  resize: vertical;
  font-family: inherit;
}
.ag-input:focus,
.ag-textarea:focus,
.ag-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg, rgba(91,95,199,.18));
}
.ag-input:disabled,
.ag-textarea:disabled,
.ag-select:disabled {
  background: var(--bg-2);
  color: var(--fg-3);
  cursor: not-allowed;
}
.ag-input.is-error,
.ag-textarea.is-error,
.ag-select.is-error {
  border-color: var(--crit);
}
.ag-input.is-error:focus,
.ag-textarea.is-error:focus,
.ag-select.is-error:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--crit) 18%, transparent);
}
.ag-checkbox,
.ag-radio {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.ag-checkbox-label,
.ag-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.ag-field-inline {
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.ag-field-inline .ag-field-label { min-width: 140px; }

/* ──────────────────────────────────────────────────────────────────────
   PAGINATION — preview/pagination.html spec
   ────────────────────────────────────────────────────────────────────── */
.ag-pagination {
  display: flex;
  gap: 4px;
  align-items: center;
  padding: 12px 0;
  font-size: 13px;
}
.ag-pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg-2);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.ag-pagination-btn:hover:not(.is-disabled):not(.is-active) {
  background: var(--bg-hover);
  color: var(--fg);
}
.ag-pagination-btn.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}
.ag-pagination-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.ag-pagination-ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  color: var(--fg-3);
}
.ag-pagination-info {
  margin-left: auto;
  color: var(--fg-3);
  font-size: 12px;
}
