/* ═══════════════════════════════════════════════════════════════════════════
   AstraGeneral — Unified Design System  (ag-design-system.css)
   Single source of truth for tokens, typography and shared components.
   Linked LAST in <head> so it harmonises every page's variable-based styles.
   Canonical palette is derived from the Policy Central sign-in reference.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
  /* ---- Surfaces ---- */
  --ag-bg:#04081a;        --ag-bg2:#060b1e;       --ag-bg3:#080e22;      --ag-bg4:#0a1228;
  --ag-card:#0a1124;      --ag-card2:#0d1530;     --ag-card3:#101838;
  --ag-line:rgba(255,255,255,.09);   --ag-line2:rgba(255,255,255,.14);
  --ag-surface:rgba(255,255,255,.05);   --ag-surface-hover:rgba(255,255,255,.09);
  --ag-chrome:#060b1e;   --ag-chrome2:#0b1229;
  /* ---- Brand accent (orange) ---- */
  --ag-accent:#ff6b00;    --ag-accent2:#ff8c33;   --ag-accent3:#ffaa66;
  --ag-accent-soft:rgba(255,107,0,.12);   --ag-accent-line:rgba(255,107,0,.30);
  --ag-accent-grad:linear-gradient(135deg,#ff6b00,#ff8c33);
  --ag-accent-text:#ff9050;
  /* ---- Text ---- */
  --ag-text:#f0f4ff;      --ag-text2:#a8b4d0;     --ag-text3:#6a7a9a;    --ag-text4:#455066;
  /* ---- Status ---- */
  --ag-green:#22c55e;     --ag-green2:#16a34a;
  --ag-red:#ef4444;       --ag-red2:#dc2626;
  --ag-amber:#f59e0b;     --ag-blue:#3b82f6;      --ag-blue2:#60a5fa;    --ag-purple:#8b5cf6;
  /* ---- Type ---- */
  --ag-fh:'Manrope','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ag-fb:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ag-mono:'JetBrains Mono','SF Mono',ui-monospace,'Courier New',monospace;
  /* ---- Geometry ---- */
  --ag-radius:12px;   --ag-radius-sm:8px;   --ag-radius-lg:18px;
  --ag-shadow:0 4px 24px rgba(0,0,0,.4);   --ag-shadow-lg:0 24px 64px rgba(0,0,0,.55);
  --ag-glow:0 0 40px rgba(255,107,0,.12);
  --ag-transition:all .18s ease;
  /* ---- Spacing scale ---- */
  --ag-s1:4px; --ag-s2:8px; --ag-s3:12px; --ag-s4:16px; --ag-s5:24px; --ag-s6:32px; --ag-s7:48px;

  /* ═══ LEGACY ALIASES — every historical token name resolves to canonical ═══
     This is what unifies the previously-divergent per-page palettes.        */
  --bg:var(--ag-bg);        --bg2:var(--ag-bg2);     --bg3:var(--ag-bg3);    --bg4:var(--ag-bg4);
  --card:var(--ag-card);    --card2:var(--ag-card2); --card3:var(--ag-card3);
  --border:var(--ag-line);  --border2:var(--ag-accent-line);  --border3:var(--ag-line2);  --border-o:var(--ag-accent-line);  --line:var(--ag-line);
  --orange:var(--ag-accent);   --orange2:var(--ag-accent2);   --orange3:var(--ag-accent3);
  --accent:var(--ag-accent);   --accent2:var(--ag-accent2);   --accent3:var(--ag-accent-soft);
  --primary:var(--ag-accent);  --primary2:var(--ag-accent2);
  --text:var(--ag-text);    --text1:var(--ag-text);  --text2:var(--ag-text2);  --text3:var(--ag-text3);  --text4:var(--ag-text4);
  --green:var(--ag-green);  --green2:var(--ag-green2);
  --red:var(--ag-red);      --gold:var(--ag-amber);  --amber:var(--ag-amber);
  --blue:var(--ag-blue);    --cyan:#06b6d4;          --purple:var(--ag-purple);
  --fh:var(--ag-fh);        --fb:var(--ag-fb);
  --radius:var(--ag-radius);
  --shadow:var(--ag-shadow);   --glow:var(--ag-glow);   --transition:var(--ag-transition);
}

/* ═══ LIGHT THEME — same variable names, light values. Toggled via
   <html data-theme="light">. Any page using var(--ag-*) or the legacy
   aliases above repaints automatically; pages with hardcoded hex/rgba
   colors (not yet on the shared design system) will not. ═══ */
html[data-theme="light"]{
  --ag-bg:#f4f6fb;        --ag-bg2:#eef1f8;       --ag-bg3:#e7ebf4;      --ag-bg4:#e0e5f0;
  --ag-card:#ffffff;      --ag-card2:#ffffff;     --ag-card3:#f8f9fc;
  --ag-line:rgba(15,23,42,.10);   --ag-line2:rgba(15,23,42,.16);
  --ag-surface:rgba(15,23,42,.045);   --ag-surface-hover:rgba(15,23,42,.08);
  --ag-chrome:#ffffff;   --ag-chrome2:#ffffff;
  --ag-accent:#ff6b00;    --ag-accent2:#e8630a;   --ag-accent3:#ffaa66;
  --ag-accent-soft:rgba(255,107,0,.08);   --ag-accent-line:rgba(255,107,0,.28);
  --ag-accent-grad:linear-gradient(135deg,#ff6b00,#ff8c33);
  --ag-accent-text:#a8460a;
  --ag-text:#0f172a;      --ag-text2:#47536b;     --ag-text3:#5f6b85;    --ag-text4:#aeb8cc;
  --ag-green:#16a34a;     --ag-green2:#15803d;
  --ag-red:#dc2626;       --ag-red2:#b91c1c;
  --ag-amber:#d97706;     --ag-blue:#2563eb;      --ag-blue2:#1d4ed8;    --ag-purple:#7c3aed;
  --ag-shadow:0 4px 24px rgba(15,23,42,.08);   --ag-shadow-lg:0 24px 64px rgba(15,23,42,.12);
  --ag-glow:0 0 40px rgba(255,107,0,.08);
}
html[data-theme="light"] ::selection{background:rgba(255,107,0,.22);color:#0f172a}
html[data-theme="light"] *{scrollbar-color:rgba(15,23,42,.18) transparent}
html[data-theme="light"] *::-webkit-scrollbar-thumb{background:rgba(15,23,42,.16)}
html[data-theme="light"] *::-webkit-scrollbar-thumb:hover{background:rgba(15,23,42,.26)}
html{transition:background-color .15s ease}
body{transition:background-color .15s ease,color .15s ease}

/* ═══ GLOBAL BASE ═══ */
html{background:var(--ag-bg);-webkit-text-size-adjust:100%}
body{font-family:var(--ag-fb);color:var(--ag-text);background:var(--ag-bg);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3,h4,h5,h6{font-family:var(--ag-fh);letter-spacing:-.01em}

/* Consistent, quiet scrollbars everywhere */
*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.16) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:8px;border:2px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}

/* Uniform text selection + focus ring for accessibility */
::selection{background:rgba(255,107,0,.28);color:#fff}
a{color:var(--ag-accent2)}
:focus-visible{outline:2px solid var(--ag-accent2);outline-offset:2px;border-radius:4px}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible{outline-offset:1px}

/* ═══ SHARED COMPONENT UTILITIES (opt-in via .ag- classes) ═══ */
.ag-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:44px;padding:0 20px;border:none;border-radius:var(--ag-radius);
  background:var(--ag-accent-grad);color:#fff;font-family:var(--ag-fh);
  font-size:14px;font-weight:700;cursor:pointer;transition:var(--ag-transition);text-decoration:none;line-height:1}
.ag-btn:hover{filter:brightness(1.07);box-shadow:0 6px 20px rgba(255,107,0,.32);transform:translateY(-1px)}
.ag-btn:active{transform:translateY(0)}
.ag-btn.ag-btn-ghost{background:rgba(255,255,255,.05);border:1px solid var(--ag-line2);color:var(--ag-text2);box-shadow:none}
.ag-btn.ag-btn-ghost:hover{background:rgba(255,255,255,.09);color:var(--ag-text);filter:none;box-shadow:none}
.ag-btn-sm{height:34px;padding:0 14px;font-size:12.5px;border-radius:var(--ag-radius-sm)}

.ag-card{background:var(--ag-card);border:1px solid var(--ag-line);border-radius:var(--ag-radius-lg);
  box-shadow:var(--ag-shadow)}
.ag-input{width:100%;height:44px;padding:0 14px;background:rgba(255,255,255,.04);
  border:1px solid var(--ag-line);border-radius:var(--ag-radius);color:var(--ag-text);
  font-family:var(--ag-fb);font-size:14px;outline:none;transition:var(--ag-transition)}
.ag-input:focus{border-color:var(--ag-accent2);box-shadow:0 0 0 3px rgba(255,107,0,.12)}

.ag-badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  padding:3px 10px;border-radius:50px;letter-spacing:.3px}
.ag-badge.ok{color:var(--ag-green);background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.3)}
.ag-badge.warn{color:var(--ag-amber);background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3)}
.ag-badge.err{color:var(--ag-red);background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.3)}

/* Uniform data-table look wherever .ag-table is applied */
.ag-table{width:100%;border-collapse:collapse}
.ag-table th{background:rgba(255,255,255,.04);padding:12px 16px;text-align:left;
  font-size:11.5px;font-weight:700;color:var(--ag-text3);text-transform:uppercase;
  letter-spacing:.6px;border-bottom:1px solid var(--ag-line)}
.ag-table td{padding:13px 16px;font-size:13.5px;color:var(--ag-text2);border-bottom:1px solid rgba(255,255,255,.05)}
.ag-table tr:hover td{background:rgba(255,255,255,.03)}

/* Shared app top-bar (used by the module shell / breadcrumb header) */
.ag-appbar{position:sticky;top:0;z-index:600;display:flex;align-items:center;gap:16px;
  height:60px;padding:0 24px;background:rgba(4,8,26,.9);backdrop-filter:blur(22px);
  border-bottom:1px solid var(--ag-line)}
.ag-appbar .ag-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ag-text);font-family:var(--ag-fh);font-weight:800;font-size:15px}
.ag-appbar .ag-brand .m{width:34px;height:34px;border-radius:9px;background:var(--ag-accent-grad);
  display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff}
.ag-crumbs{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ag-text3)}
.ag-crumbs a{color:var(--ag-text3);text-decoration:none}
.ag-crumbs a:hover{color:var(--ag-accent2)}
.ag-crumbs .sep{opacity:.5}

/* Reduced-motion respect */
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}