/* AirawatOS shared design system — the one stylesheet every app + shell <link>s (host-served, no build, CSP-safe:
   style-src 'self' allows a same-origin <link>). Design TOKENS as CSS custom properties + accessible base
   components, keyed by [data-theme] so themes are switchable at runtime (AOS.theme()). Target: WCAG 2.2 AA — every
   theme's tokens are contrast-checked (≥4.5:1 text, ≥3:1 UI), status is never colour-only, focus is always visible,
   motion respects prefers-reduced-motion. Apps drop their inline base <style> and keep only app-specific tweaks. */

/* ---------- TOKENS ---------- */
:root {                                   /* DARK — the platform default */
  --bg:#0b0f14; --panel:#141a22; --panel2:#0f1620; --line:#222b36; --line2:#2f3d4d;
  --ink:#e6edf3; --dim:#9aa7b4; --accent:#3fb970; --pri:#0b7a39; --pri-ink:#ffffff;
  --good:#3fb950; --warn:#e0a13a; --danger:#ff7b72; --focus:#8cc4ff;
  --radius:12px; --radius-sm:8px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
/* Dark is the unconditional default (per product decision). Light applies ONLY on explicit user choice
   (data-theme="light") — we do NOT auto-switch on prefers-color-scheme. */
:root[data-theme="light"] {
  --bg:#f6f8fa; --panel:#ffffff; --panel2:#f0f3f7; --line:#d6dce3; --line2:#c2cad3;
  --ink:#161c24; --dim:#586372; --accent:#127a45; --pri:#0e7a3c; --pri-ink:#ffffff;
  --good:#1a7f37; --warn:#9a6700; --danger:#b42318; --focus:#0a5cc2;
}
:root[data-theme="dark"] {
  --bg:#0b0f14; --panel:#141a22; --panel2:#0f1620; --line:#222b36; --line2:#2f3d4d;
  --ink:#e6edf3; --dim:#9aa7b4; --accent:#3fb970; --pri:#0b7a39; --pri-ink:#ffffff;
  --good:#3fb950; --warn:#e0a13a; --danger:#ff7b72; --focus:#8cc4ff;
}
:root[data-theme="high-contrast"] {       /* accessibility theme: max contrast, thick borders, bright accents */
  --bg:#000000; --panel:#000000; --panel2:#0a0a0a; --line:#ffffff; --line2:#ffffff;
  --ink:#ffffff; --dim:#f2f2f2; --accent:#ffd400; --pri:#004a99; --pri-ink:#ffffff;
  --good:#4ce07a; --warn:#ffd400; --danger:#ff9a91; --focus:#ffd400;
}
:root[data-theme="high-contrast"] .btn,
:root[data-theme="high-contrast"] .card,
:root[data-theme="high-contrast"] input,
:root[data-theme="high-contrast"] select,
:root[data-theme="high-contrast"] textarea { border-width:2px; }

/* ---------- BASE ---------- */
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:14px/1.5 var(--sans)}
a{color:var(--focus)}
.muted,.sub,.dim{color:var(--dim)}
.err{color:var(--danger);font-size:12px;margin-top:8px}

/* visible focus for EVERYONE using the keyboard (WCAG 2.4.7 / 2.4.11) */
:where(a,button,input,select,textarea,[tabindex],[role="button"],[role="tab"],[role="option"]):focus-visible{
  outline:3px solid var(--focus); outline-offset:2px; border-radius:6px;
}
/* screen-reader-only text (for accessible names / status not shown visually) */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* skip-link — first focusable thing; jumps to <main> / #main (WCAG 2.4.1) */
.aos-skip{position:absolute;left:8px;top:-48px;z-index:99999;background:var(--pri);color:var(--pri-ink);
  padding:8px 14px;border-radius:8px;transition:top .12s}
.aos-skip:focus{top:8px}

/* ---------- LAYOUT ---------- */
.wrap{display:flex;height:100%}
.nav{width:180px;flex:0 0 auto;border-right:1px solid var(--line);padding:14px 10px;background:var(--panel2)}
.nav h1{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin:2px 8px 12px}
.nav a{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;color:var(--ink);cursor:pointer;margin-bottom:3px;font-weight:500;text-decoration:none}
.nav a:hover{background:var(--panel)}
.nav a.on,.nav a[aria-current="page"]{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.nav a .c{margin-left:auto;font-size:11px;color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:0 7px}
.main{flex:1;min-width:0;overflow:auto;padding:20px 24px}
.head{display:flex;align-items:center;margin-bottom:14px}
.head h2{margin:0;font-size:18px}
.head .sub{color:var(--dim);margin-left:10px;font-size:12px}
.right{margin-left:auto;display:flex;gap:8px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid.g3{grid-template-columns:1fr 1fr 1fr}
.row{margin-bottom:12px}

/* ---------- COMPONENTS ---------- */
.btn{border:1px solid var(--line2);background:var(--panel);color:var(--ink);border-radius:var(--radius-sm);
  padding:7px 13px;font:13px var(--sans);cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.pri{background:var(--pri);border-color:var(--pri);color:var(--pri-ink)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.ghost{background:none}
.btn.sm{padding:3px 9px;font-size:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden}
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--dim);margin:0 0 4px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-sm);padding:8px 10px;font:13px var(--sans)}
input::placeholder,textarea::placeholder{color:var(--dim)}

table{width:100%;border-collapse:collapse}
caption{text-align:left;color:var(--dim);font-size:12px;padding:6px 12px}
th,td{text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);font-size:13px}
th{color:var(--dim);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--panel2)}
tr.sub td{background:var(--panel2);color:var(--ink)}
tfoot td{border-top:2px solid var(--line2)}

.pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:1px 8px;border-radius:20px;border:1px solid var(--line2);color:var(--dim)}
/* status pills carry an icon (::before) as well as colour — never colour alone (WCAG 1.4.1) */
.pill.posted,.pill.ok,.pill.active{color:var(--good);border-color:color-mix(in srgb,var(--good) 55%,transparent)}
.pill.posted::before,.pill.ok::before,.pill.active::before{content:"✓"}
.pill.committed,.pill.pending,.pill.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.pill.committed::before,.pill.pending::before,.pill.warn::before{content:"◷"}
.pill.err,.pill.rejected,.pill.danger{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 55%,transparent)}
.pill.err::before,.pill.rejected::before,.pill.danger::before{content:"✕"}
/* ADR-0106 S4: "Under Development" marking for sandbox artifacts (environment==development).
   Icon + text (never colour alone, WCAG 1.4.1). Used across Studio · City Scan · Jan Seva. */
.dev-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:1px 8px;border-radius:20px;
  color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);
  background:color-mix(in srgb,var(--warn) 12%,transparent);white-space:nowrap}
.dev-badge::before{content:"🚧"}
.dev-ribbon{position:absolute;top:8px;right:8px;z-index:2}

.bar{height:7px;border-radius:6px;background:var(--bg);border:1px solid var(--line);overflow:hidden;min-width:120px}
.bar > i{display:block;height:100%;background:linear-gradient(90deg,var(--good),var(--warn))}
.empty{color:var(--dim);padding:24px;text-align:center;border:1px dashed var(--line);border-radius:var(--radius)}

/* modal — AOS.modal adds role="dialog"/aria-modal + focus trap; this is the skin */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:flex-start;justify-content:center;padding:5vh 16px;z-index:9998}
.modal.open{display:flex}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;width:600px;max-width:100%;max-height:90vh;overflow:auto}
.sheet h3{margin:0 0 14px}

/* toast — AOS.toast wraps this in an aria-live region so it's announced */
#toast,#aosToast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--good);color:var(--ink);padding:10px 16px;border-radius:10px;z-index:9999;opacity:0;transition:opacity .3s}
#aosToast.err{border-color:var(--danger)}

/* ---------- MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}