/* ============================================================
   AO2 portal — OTS Console theme (Terminal / Direction A).
   Tokens from reference/tokens.css; every component styled THROUGH
   tokens. Dark-first, with light + explicit-override theme layers.
   Keep this file in sync with the admin app's copy.
   ============================================================ */
:root{
  --bg:#F4F0ED; --bg-grain:#EEE8E4; --elev:#FBF9F7; --surface:#FFFFFF; --surface-2:#F6F0EC;
  --border:#E5DCD6; --border-strong:#D6C8C0; --line:#EDE5E0;
  --text:#241C18; --dim:#6B5F58; --faint:#9C8E86;
  --accent:#7A1F17; --accent-2:#641E16; --accent-ghost:rgba(122,31,23,.09); --on-accent:#FBEEEA;
  --good:#1E8A5A; --good-bg:rgba(30,138,90,.12); --warn:#B5791A; --warn-bg:rgba(181,121,26,.13);
  --down:#C24138; --down-bg:rgba(194,65,56,.11); --info:#2F6F9E; --info-bg:rgba(47,111,158,.11);
  --shadow:0 1px 2px rgba(60,30,20,.05), 0 10px 28px -14px rgba(60,30,20,.22);
  --shadow-lg:0 24px 60px -24px rgba(50,20,14,.4);
  --logo-fill:#641E16; --logo-uri:url("/static/logo.png"); --radius:12px; --radius-sm:9px;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,"Helvetica Neue",sans-serif;
  /* back-compat aliases so legacy rules retint with the theme */
  --card:var(--surface); --muted:var(--surface-2); --sub:var(--dim);
  --red:var(--accent); --red2:var(--down); --green:var(--good);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#141110; --bg-grain:#181413; --elev:#1C1714; --surface:#201A17; --surface-2:#262019;
  --border:#332B26; --border-strong:#41352E; --line:#2A231F;
  --text:#EEE6E1; --dim:#A99B92; --faint:#6F645D;
  --accent:#B23A2C; --accent-2:#8A2A20; --accent-ghost:rgba(178,58,44,.15); --on-accent:#FCEEEA;
  --good:#4CB782; --good-bg:rgba(76,183,130,.15); --warn:#E0A340; --warn-bg:rgba(224,163,64,.15);
  --down:#E0645C; --down-bg:rgba(224,100,92,.15); --info:#78ABD0; --info-bg:rgba(120,171,208,.15);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -28px rgba(0,0,0,.8); --logo-fill:#C6483A;
}}
:root[data-theme="light"]{
  --bg:#F4F0ED; --bg-grain:#EEE8E4; --elev:#FBF9F7; --surface:#FFFFFF; --surface-2:#F6F0EC;
  --border:#E5DCD6; --border-strong:#D6C8C0; --line:#EDE5E0;
  --text:#241C18; --dim:#6B5F58; --faint:#9C8E86;
  --accent:#7A1F17; --accent-2:#641E16; --accent-ghost:rgba(122,31,23,.09); --on-accent:#FBEEEA;
  --good:#1E8A5A; --good-bg:rgba(30,138,90,.12); --warn:#B5791A; --warn-bg:rgba(181,121,26,.13);
  --down:#C24138; --down-bg:rgba(194,65,56,.11); --info:#2F6F9E; --info-bg:rgba(47,111,158,.11);
  --shadow:0 1px 2px rgba(60,30,20,.05), 0 10px 28px -14px rgba(60,30,20,.22);
  --shadow-lg:0 24px 60px -24px rgba(50,20,14,.4); --logo-fill:#641E16;
}
:root[data-theme="dark"]{
  --bg:#141110; --bg-grain:#181413; --elev:#1C1714; --surface:#201A17; --surface-2:#262019;
  --border:#332B26; --border-strong:#41352E; --line:#2A231F;
  --text:#EEE6E1; --dim:#A99B92; --faint:#6F645D;
  --accent:#B23A2C; --accent-2:#8A2A20; --accent-ghost:rgba(178,58,44,.15); --on-accent:#FCEEEA;
  --good:#4CB782; --good-bg:rgba(76,183,130,.15); --warn:#E0A340; --warn-bg:rgba(224,163,64,.15);
  --down:#E0645C; --down-bg:rgba(224,100,92,.15); --info:#78ABD0; --info-bg:rgba(120,171,208,.15);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 34px -16px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -28px rgba(0,0,0,.8); --logo-fill:#C6483A;
}

*{box-sizing:border-box}
body{font-family:var(--mono); background:var(--bg); color:var(--text)}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.h1{font-size:1.5rem; font-weight:700} .h2{font-size:1.125rem; font-weight:600; margin-top:1rem}

/* theme-aware brand mark (OTS logo as a mask filled per theme) */
.logo{-webkit-mask:var(--logo-uri) center/contain no-repeat;mask:var(--logo-uri) center/contain no-repeat;
  background:var(--logo-fill);display:inline-block}

table{width:100%; border-collapse:collapse; font-size:.95rem}
table thead tr{border-bottom:1px solid var(--border)}
table th{font-weight:600; letter-spacing:.12em; text-transform:uppercase; font-size:.7rem; color:var(--faint); padding-bottom:14px}
table td{font-size:.92rem; color:var(--text)}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.card.shadow{box-shadow:var(--shadow); border-color:var(--border)}
.card-title{font-weight:600; color:var(--accent)}

.btn{display:inline-block; padding:8px 12px; border-radius:var(--radius-sm); border:1px solid var(--border-strong);
  background:var(--surface-2); color:var(--text); cursor:pointer; font-family:var(--mono); font-size:.9rem; text-decoration:none}
.btn:hover{border-color:var(--border-strong); background:var(--accent-ghost)}
.btn-primary{border-color:var(--accent); background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-2); text-decoration:none}
.btn-danger{border-color:var(--down-bg); background:transparent; color:var(--down)}
.btn-danger:hover{background:var(--down-bg)}
.btn-success{border-color:var(--good); background:transparent; color:var(--good)}
.btn-secondary{border-color:var(--border); background:var(--surface-2); color:var(--text)}
.btn-secondary:hover{border-color:var(--accent); background:var(--accent-ghost); color:var(--text)}
.btn-secondary.action-edit:hover,.btn-secondary.action-reset:hover,.btn-ghost.action-detail:hover{background:var(--accent-ghost); color:var(--accent)}
.btn-ghost{border:1px solid transparent; background:transparent; color:var(--dim)}
.btn-ghost:hover{background:var(--surface-2)}

.input, .codebox{width:100%; padding:10px 12px; border:1px solid var(--border); background:var(--surface-2);
  color:var(--text); border-radius:var(--radius-sm); outline:none; font-family:var(--mono)}
.input:focus, .codebox:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ghost)}
.codebox{background:var(--bg-grain)}
.textarea{min-height:120px}
.label{display:block; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-bottom:6px}
select.input{appearance:none}

.table{display:grid; gap:6px}
.row{display:grid; grid-template-columns:1fr 120px 1fr; gap:8px; padding:8px; background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm)}
.row.head{background:var(--bg-grain); font-weight:600}

.pill{display:inline-block; padding:.32em .6em; border-radius:20px; font-size:.8rem; border:1px solid var(--border);
  color:var(--faint); background:var(--surface-2); font-weight:600}
.pill.ok{color:var(--good); border-color:transparent; background:var(--good-bg)}
.pill.warn{color:var(--warn); border-color:transparent; background:var(--warn-bg)}
.pill.down{color:var(--down); border-color:transparent; background:var(--down-bg)}

.flash{padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2)}
.flash.ok{border-color:transparent; background:var(--good-bg)}
.flash.err{border-color:transparent; background:var(--down-bg)}

.max-w-6xl{max-width:72rem} .max-w-5xl{max-width:64rem} .mx-auto{margin:0 auto}
.px-4{padding-left:1rem;padding-right:1rem} .py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem} .py-8{padding-top:2rem;padding-bottom:2rem}
.mt-2{margin-top:.5rem} .mt-3{margin-top:.75rem} .mt-4{margin-top:1rem} .mt-6{margin-top:1.5rem} .mt-8{margin-top:2rem} .mb-4{margin-bottom:1rem}
.grid{display:grid} .gap-3{gap:.75rem} .gap-4{gap:1rem} .gap-6{gap:1.5rem} .md\:grid-cols-2{grid-template-columns:repeat(1, minmax(0,1fr))}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between} .justify-end{justify-content:flex-end} .gap-2{gap:.5rem}
@media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2, minmax(0,1fr))}}
.w-full{width:100%}
.list-reset{list-style:none; padding:0; margin:0}
.tree ul{margin-left:1rem; padding-left:1rem; border-left:1px solid var(--border)}
.tree li{margin:.25rem 0}
.tag{display:inline-block; background:var(--surface-2); border-radius:6px; padding:4px 8px; font-size:.8rem; color:var(--dim)}
.row-actions{display:flex; gap:.5rem; justify-content:flex-end; align-items:center}
.badge{display:inline-block; padding:2px 6px; border-radius:20px; font-size:.75rem; background:var(--surface-2); color:var(--info)}
.badge-ok{background:var(--good-bg); border:1px solid transparent; color:var(--good)}
.badge-warn{background:var(--warn-bg); border:1px solid transparent; color:var(--warn)}
.table-scroll{overflow-x:auto}
/* Licenses tables hold 64-hex hardware keys; don't wrap mid-token — let .table-scroll scroll. */
#alltab td, #lictab td{white-space:nowrap}

.status-dot{display:inline-flex; width:10px; height:10px; border-radius:20px; background:var(--info)}
.status-dot.ok{background:var(--good)} .status-dot.warn{background:var(--down)}

.checkbox-row{display:flex; align-items:center; gap:.5rem}
.page-heading{display:flex; flex-direction:column; gap:.75rem; margin-bottom:1.25rem}
.text-muted{color:var(--dim); font-size:.9rem}
.section-title{font-size:1.1rem; font-weight:600; margin-bottom:.5rem}
.input-textarea{min-height:96px; resize:vertical}
.checkbox{display:flex; align-items:center; gap:.5rem}
@media (min-width:768px){.page-heading{flex-direction:row; align-items:center; justify-content:space-between}}

.table-sort{display:inline-flex; align-items:center; gap:.25rem; color:inherit}
.table-sort:hover{color:var(--accent)}
.sort-indicator{font-size:.75rem; opacity:.7}
form.inline{display:inline}

.user-table{border-collapse:collapse; width:100%; font-family:var(--mono)}
.user-row>td{border-bottom:1px solid var(--line); padding:10px}
.user-table tbody tr:first-child td{padding-top:16px}
.user-field:hover{color:var(--accent)}
.user-row:last-child{border-bottom:none}
.user-field.is-disabled{color:var(--down)}
.user-field.is-disabled:hover{color:var(--down)}
.user-disabled{background:var(--down-bg)}

.group-membership{display:flex; flex-direction:column; gap:1rem}
.group-controls{display:flex; align-items:center; gap:.75rem; max-width:26rem}
.group-controls .btn{padding:.55rem .9rem}
.group-chip-list{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.5rem}
.group-chip{display:inline-flex; align-items:center; gap:.5rem; background:var(--surface-2); border:1px solid var(--border); border-radius:20px; padding:.35rem .7rem; font-size:.85rem}
.group-chip-remove{background:transparent; border:none; color:var(--dim); cursor:pointer; font-size:1rem; line-height:1; padding:0}
.group-chip-remove:hover{color:var(--accent)}
.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}
.group-row-focus{background:var(--accent-ghost); box-shadow:inset 0 0 0 2px var(--accent)}
.chart-area{position:relative; min-height:320px}
.chart-area canvas{max-width:100%; max-height:320px}

.activity-log{max-height:260px; overflow-y:auto; padding-right:8px}
.activity-log::-webkit-scrollbar{width:8px}
.activity-log::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px}
.activity-log::-webkit-scrollbar-track{background:transparent}

.multi-select{position:relative}
.multi-select-toggle{width:100%; display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; font-size:.95rem}
.multi-select-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.multi-select.is-open .multi-select-toggle{border-color:var(--accent)}
.multi-select-panel{position:absolute; top:calc(100% + 8px); left:0; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px; box-shadow:var(--shadow-lg); z-index:30}
.multi-select-panel[hidden]{display:none}
.multi-select-controls{margin-bottom:12px}
.multi-select-options{max-height:240px; overflow:auto; border:1px solid var(--border); border-radius:var(--radius-sm); padding:4px}
.multi-select-option{display:flex; align-items:center; gap:.65rem; padding:6px 8px; border-radius:8px; cursor:pointer; font-size:.9rem}
.multi-select-option:hover{background:var(--accent-ghost)}
.multi-select-option.is-hidden{display:none}
.multi-select-option input[type="checkbox"]{width:16px; height:16px; accent-color:var(--accent)}
.multi-select-actions{display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:12px}

.site-brand{display:flex; flex-direction:column; align-items:flex-start; gap:.4rem}
.site-brand-logo{height:48px; width:auto; display:block}
.site-brand-name{display:inline-block; line-height:1.1}

.btn-sm{font-size:.8rem;padding:6px 9px}

/* ---- app shell: left sidebar rail + sticky topbar (OTS Console) ---- */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}
.sidebar{background:var(--elev);border-right:1px solid var(--border);padding:1.1rem .75rem;display:flex;flex-direction:column;gap:.3rem;position:sticky;top:0;height:100vh;overflow-y:auto}
.sidebar .brand{display:flex;align-items:center;gap:.5rem;padding:.3rem .5rem 1rem}
.sidebar .brand .logo{width:78px;height:22px}
.sidebar .brand small{color:var(--faint);letter-spacing:.14em;font-size:10px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:.55rem;padding:.6rem .7rem;border-radius:var(--radius-sm);color:var(--dim);font-family:var(--mono);font-size:13px;text-decoration:none;border:0;background:transparent;width:100%;text-align:left;cursor:pointer}
.nav-item:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.nav-item[aria-current="page"]{background:var(--accent-ghost);color:var(--accent);font-weight:600}
.sidebar .foot{margin-top:auto;padding:.6rem .5rem;font-family:var(--mono);font-size:11px;color:var(--faint);line-height:1.7}
.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:.7rem;padding:.8rem 1.4rem;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar .title{font:600 14px/1.2 var(--mono);color:var(--text)}
.topbar .who{display:flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:12px;color:var(--dim)}
.topbar .avatar{width:28px;height:28px;border-radius:50%;background:var(--accent-ghost);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:12px;flex:none}
.panel{padding:1.4rem;min-width:0}
@media (max-width:900px){
 .shell{grid-template-columns:1fr}
 .sidebar{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.4rem;border-right:0;border-bottom:1px solid var(--border)}
 .sidebar .brand{padding:.2rem .5rem}
 .sidebar .foot{margin:0 0 0 auto;padding:.3rem .5rem}
 .nav-item{width:auto}
}

/* ---- split-hero login (circuit-trace motif) ---- */
.field{display:flex;flex-direction:column;gap:.35rem}
.eyebrow{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.hero{position:relative;background:var(--bg-grain);overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:3rem}
.hero canvas{position:absolute;inset:0;width:100%;height:100%}
.hero .inner{position:relative;z-index:1;max-width:440px}
.hero .inner .logo{width:150px;height:41px;display:block;margin-bottom:.5rem}
.hero h1{font:700 30px/1.15 var(--mono);letter-spacing:-.01em;margin:.6rem 0;color:var(--text)}
.hero p{color:var(--dim);font-size:14px;max-width:42ch;margin:0}
.hero .pills{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1.4rem}
.loginpane{display:flex;align-items:center;justify-content:center;padding:2.5rem;background:var(--bg)}
.loginform{width:100%;max-width:340px;display:flex;flex-direction:column;gap:1rem}
.loginform h2{font:600 18px/1.2 var(--mono);color:var(--text)}
.loginform .btn{display:block;width:100%;text-align:center;padding:.7rem}
.loginform .foot-note{font-size:11px;text-align:center;color:var(--faint);margin:0}
.mfa-code{text-align:center;font-size:1.4rem;letter-spacing:.4rem}
.qr{background:#fff;padding:12px;border-radius:8px;display:inline-block;margin:.25rem auto}
.qr svg{width:190px;height:190px;display:block}
.secret{font-size:.8rem;color:var(--dim);word-break:break-all}
.muted{color:var(--dim);font-size:.9rem}
.err{color:var(--down);text-align:center;font-size:.9rem}
.loginform .qr,.loginform .secret,.loginform .muted{align-self:center;text-align:center}
@media (max-width:760px){.login{grid-template-columns:1fr}.hero{min-height:200px;padding:2rem}.loginpane{padding:2rem}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}