/* Workspace Manager — shared design system (single source of truth).
   Page templates extend base.html and keep only page-specific rules inline. */

:root{
  /* palette (light) */
  --bg:#f5f7fa; --bg-soft:#eef1f5; --card:#ffffff; --panel:#ffffff;
  --border:#e6eaf0; --border-strong:#d8dee6;
  --text:#1f2328; --muted:#5b6673; --faint:#8a94a2;
  --accent:#1a73e8; --accent-hover:#1557b0; --accent-soft:#e8f0fe;
  --danger:#c5221f; --danger-soft:#fce8e6;
  --ok:#137333; --ok-soft:#e6f4ea;
  --warn:#9a6700; --warn-soft:#fef7e0;
  --purple:#8250df; --purple-soft:#f3e8fd;
  --blue:#4285F4; --red:#EA4335; --yellow:#FBBC04; --green:#34A853;
  /* shape */
  --radius:14px; --radius-sm:10px; --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(16,24,40,.05);
  --shadow:0 1px 2px rgba(16,24,40,.04),0 4px 16px rgba(16,24,40,.06);
  --shadow-pop:0 12px 34px rgba(16,24,40,.16);
  --ring:0 0 0 3px rgba(26,115,232,.28);
  --font:'Google Sans','Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sidebar-w:252px;
}
[data-theme="dark"]{
  --bg:#0e1116; --bg-soft:#171b22; --card:#171b22; --panel:#171b22;
  --border:#242a33; --border-strong:#333b46;
  --text:#e7ebf1; --muted:#99a2b0; --faint:#6a7480;
  --accent:#5b9bf6; --accent-hover:#7cb0f8; --accent-soft:#15233b;
  --danger:#f08f8a; --danger-soft:#3a1c1b;
  --ok:#6fcf8e; --ok-soft:#14321f;
  --warn:#e8c468; --warn-soft:#352d14;
  --purple:#c3a0f5; --purple-soft:#2a2140;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.35);
  --shadow-pop:0 14px 40px rgba(0,0,0,.5);
  --ring:0 0 0 3px rgba(91,155,246,.35);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14.5px/1.55 var(--font);-webkit-font-smoothing:antialiased}

/* ===== app layout (sidebar + main) ===== */
.layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px 13px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-brand{display:flex;align-items:center;gap:11px;padding:6px 8px 14px;text-decoration:none;color:var(--text)}
.sb-brand .mk{width:30px;height:30px;flex:0 0 auto}
.sb-brand .nm{font-weight:700;font-size:15.5px;letter-spacing:-.2px;line-height:1.1}
.sb-brand .nm small{display:block;font-weight:500;font-size:10.5px;color:var(--faint);letter-spacing:.22em}

.sb-group{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:14px 10px 6px}
.snav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:9px;color:var(--muted);text-decoration:none;font-weight:500;font-size:13.5px;margin-bottom:1px}
.snav a svg{width:18px;height:18px;stroke:currentColor;stroke-width:1.9;fill:none;flex:0 0 auto}
.snav a:hover{background:var(--bg);color:var(--text)}
.snav a.active{background:var(--accent-soft);color:var(--accent);font-weight:600}
.snav a .count{margin-left:auto;background:var(--danger-soft);color:var(--danger);font-size:11px;font-weight:700;padding:1px 7px;border-radius:var(--radius-pill)}

.sb-foot{margin-top:auto;border-top:1px solid var(--border);padding-top:12px;display:flex;align-items:center;gap:10px}
.sb-foot .av{width:30px;height:30px;border-radius:50%;background:var(--purple-soft);color:var(--purple);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex:0 0 auto}
.sb-foot .u{flex:1;min-width:0;font-size:12.5px}
.sb-foot .u b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-foot .u span{display:block;color:var(--faint);font-size:11px}
.sb-foot a.out{color:var(--faint);display:flex}
.sb-foot a.out svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none}

/* workspace switcher in sidebar */
.ws-switcher{margin:2px 2px 4px;display:block}
.ws-switcher label{display:none}
.ws-switcher select{
  width:100%;font:inherit;font-size:13px;font-weight:600;padding:9px 30px 9px 12px;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238a94a2' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") no-repeat right 11px center;
  -webkit-appearance:none;appearance:none;cursor:pointer;color:var(--text)
}
.ws-switcher select:hover{border-color:var(--accent)}

/* ===== main column ===== */
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:flex-start;gap:16px;padding:24px 32px 0}
.topbar .titles{min-width:0}
.topbar h1{font-size:23px;letter-spacing:-.4px;margin:0}
.topbar .sub{color:var(--muted);font-size:13.5px;margin-top:3px}
.topbar .spacer{flex:1}
.topbar .actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.content{padding:22px 32px 44px}

.themer{display:inline-flex;align-items:center;gap:2px;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--radius-pill);padding:3px}
.themer button{border:none;background:none;width:30px;height:28px;border-radius:var(--radius-pill);cursor:pointer;font-size:14px;color:var(--faint);display:flex;align-items:center;justify-content:center}
.themer button.on{background:var(--accent-soft);color:var(--accent)}

/* ===== stat tiles ===== */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.tile .lbl{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.tile .dot{width:9px;height:9px;border-radius:50%}
.tile .val{font-size:28px;font-weight:700;letter-spacing:-.5px;margin-top:10px}
.tile .val small{font-size:14px;font-weight:600;color:var(--faint)}
.tile .delta{font-size:12px;margin-top:4px;color:var(--muted)}
.bar{height:6px;border-radius:var(--radius-pill);background:var(--border);margin-top:12px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--radius-pill)}

/* ===== legacy top-bar/nav (kept for auth pages & graceful fallback) ===== */
.wrap{max-width:1080px;margin:26px auto;padding:0 20px}
.wrap.narrow{max-width:720px}
.appbar{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.appbar .brand{font-weight:700;font-size:15px;letter-spacing:-.01em;display:flex;align-items:center;gap:8px}
.appbar .brand::before{content:"";width:24px;height:24px;flex:0 0 auto;background:url("logo-mark.svg") center/contain no-repeat}
.appbar .who2{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px}
.appbar .who2 a{color:var(--accent);text-decoration:none}
.appbar .who2 a:hover{text-decoration:underline}
.appbar .who2 .uemail{color:var(--muted)}
.rolechip{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;padding:2px 8px;border-radius:var(--radius-pill);background:var(--purple-soft);color:var(--purple)}
.nav,.topnav{display:flex;gap:2px;margin-bottom:20px;border-bottom:1px solid var(--border);align-items:center;flex-wrap:wrap}
.nav a,.topnav a{padding:9px 14px;color:var(--muted);text-decoration:none;font-weight:600;border-bottom:2px solid transparent;font-size:14px;margin-bottom:-1px;border-radius:var(--radius-sm) var(--radius-sm) 0 0}
.nav a:hover,.topnav a:hover{color:var(--text);background:var(--bg-soft)}
.nav a.active,.topnav a.active{color:var(--accent);border-bottom-color:var(--accent);background:transparent}
.nav .adminlink,.topnav .adminlink{margin-left:auto;font-size:13px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;color:var(--muted)}
.nav .adminlink:hover,.topnav .adminlink:hover{background:var(--bg-soft);color:var(--text)}

/* ===== headings / text ===== */
h1{font-size:22px;margin:0 0 4px;letter-spacing:-.02em}
.sub{color:var(--muted);margin-bottom:18px}
.meta{color:var(--muted);font-size:13px;margin-bottom:14px}
.meta b{color:var(--text)}
.hint{color:var(--muted);font-size:13px}

/* ===== cards ===== */
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}
.card.pad{padding:20px}
.card+.card{margin-top:16px}
.card>h2,.card-h{font-size:14.5px;margin:0;padding:15px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.card>h2 .tag,.card-h .tag{margin-left:auto;font-size:12px;color:var(--faint);font-weight:500}

/* ===== toolbar / filters ===== */
.toolbar{display:flex;gap:10px;align-items:center;padding:13px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.chips{display:flex;gap:6px;margin-right:auto;flex-wrap:wrap}
.chip{background:var(--card);color:var(--muted);cursor:pointer;font-size:13px;padding:6px 12px;border-radius:var(--radius-pill);border:1px solid var(--border)}
.chip:hover{border-color:var(--border-strong);color:var(--text)}
.chip.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft)}
.chip b{font-weight:700}
.range-btns{display:flex;gap:4px}
.range-btns button{font:inherit;padding:5px 10px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);cursor:pointer;font-size:12px;color:var(--muted)}
.range-btns button:hover{border-color:var(--border-strong);color:var(--text)}
.range-btns button.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft)}

/* ===== forms ===== */
label{display:block;font-weight:600;font-size:13px;margin-bottom:6px}
input,select,textarea{font:inherit;padding:8px 11px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--card);color:var(--text);transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring)}
input::placeholder,textarea::placeholder{color:var(--faint)}
textarea{resize:vertical}
input[type="search"]{-webkit-appearance:none}
input[type="checkbox"],input[type="radio"]{width:auto;accent-color:var(--accent);cursor:pointer}
.row{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.row>div{flex:1}
.search{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:8px 12px;color:var(--faint);font-size:13px}
.search input{border:none;background:none;padding:0;color:var(--text);width:100%}
.search input:focus{box-shadow:none}

/* ===== buttons ===== */
button,.btn{font:inherit;font-weight:600;padding:9px 15px;border-radius:var(--radius-sm);border:1px solid var(--accent);background:var(--accent);color:#fff;cursor:pointer;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;display:inline-flex;align-items:center;gap:7px}
button:hover,.btn:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
button:focus-visible,.btn:focus-visible{outline:none;box-shadow:var(--ring)}
button:disabled,.btn:disabled{opacity:.5;cursor:default}
button.ghost,.btn.ghost,.btn-ghost{background:var(--card);color:var(--text);border-color:var(--border-strong)}
button.ghost:hover,.btn.ghost:hover,.btn-ghost:hover{background:var(--bg-soft);border-color:var(--border-strong)}
button.primary,.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
button.primary:hover,.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
button.danger,.btn-danger{background:var(--card);color:var(--danger);border-color:var(--border-strong);padding:5px 11px;font-size:13px}
button.danger:hover,.btn-danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
button.run{background:var(--danger);border-color:var(--danger)}
button.run:hover{background:#a81d1a;border-color:#a81d1a}
.refresh{font:inherit;padding:7px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);cursor:pointer;background:var(--card);font-size:13px;color:var(--text);font-weight:600}
.refresh:hover{background:var(--bg-soft)}
.refresh:disabled{opacity:.5;cursor:default}

/* ===== tables ===== */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:12px 18px;border-bottom:1px solid var(--border)}
th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:600;background:var(--bg-soft)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--bg-soft)}
.right{text-align:right}

/* ===== badges ===== */
.badge{font-size:11.5px;padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap;background:#eef1f5;color:var(--muted);font-weight:600}
[data-theme="dark"] .badge{background:#2a2f39}
.badge.off{background:var(--danger-soft);color:var(--danger)}
.badge.boot{background:var(--warn-soft);color:var(--warn)}
.badge.sso{background:var(--accent-soft);color:var(--accent)}
.badge.role-admin{background:var(--purple-soft);color:var(--purple)}
.badge.role-operator{background:var(--accent-soft);color:var(--accent)}
.badge.role-viewer{background:#eef1f5;color:var(--muted)}
.badge.totp-on{background:var(--ok-soft);color:var(--ok)}
.badge.totp-off{background:var(--danger-soft);color:var(--danger)}
.b-enforced,.badge.b-enforced{background:var(--ok-soft);color:var(--ok)}
.b-enrolled,.badge.b-enrolled{background:var(--accent-soft);color:var(--accent)}
.b-gap,.badge.b-gap{background:var(--warn-soft);color:var(--warn)}
.b-off,.badge.b-off{background:var(--danger-soft);color:var(--danger)}
.b-active,.badge.b-active{background:#eef1f5;color:var(--muted)}
.b-susp,.badge.b-susp{background:var(--warn-soft);color:#bc4c00}
.b-admin,.badge.b-admin{background:var(--purple-soft);color:var(--purple)}

/* ===== avatar ===== */
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex:0 0 auto}

/* ===== status text ===== */
.status,#status,#cfgStatus,#pwStatus,#totpStatus,#wsStatus,#ownedStatus,#msg,#pfMsg,#saMsg{font-size:14px;min-height:18px;margin-top:8px}
.status.error,.error-text,#status.error,#pwStatus.error,#totpStatus.error,#msg.error,#pfMsg.error{color:var(--danger)}
.status.ok,.ok-text,#status.ok,#pwStatus.ok,#totpStatus.ok,#msg.ok,#pfMsg.ok{color:var(--ok)}

/* ===== misc ===== */
.empty{color:var(--muted);padding:26px;text-align:center}
.em{font-size:12px;color:var(--muted)}
.nm{font-weight:600}
code{font-family:var(--mono);font-size:.92em}
a.back{color:var(--accent);text-decoration:none;font-size:14px}
a.back:hover{text-decoration:underline}
hr{border:none;border-top:1px solid var(--border);margin:20px 0}

/* modal */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(16,24,40,.5);z-index:100;align-items:center;justify-content:center}
.modal-bg.open{display:flex}
.modal{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow-pop);padding:24px 26px;width:420px;max-width:94vw}
.modal h3{margin:0 0 16px;font-size:18px}

/* View-as (impersonation) banner */
.imp-bar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:12px;
  padding:9px 18px;background:#7a4f00;color:#fff;font-size:13.5px;font-weight:500}
[data-theme="dark"] .imp-bar{background:#8a5a00}
.imp-bar .imp-eye{font-size:16px;line-height:1}
.imp-bar b{font-weight:700}
.imp-bar button{margin-left:auto;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  background:#fff;color:#7a4f00;border:none;border-radius:7px;padding:5px 12px}
.imp-bar button:hover{background:#ffe9c2}

/* role-based hiding */
[data-role="viewer"] .op-only{display:none!important}
/* .admin-only = admin-tier (manager + admin) controls; hidden for operator/viewer */
[data-role="viewer"] .admin-only,[data-role="operator"] .admin-only{display:none!important}
/* .fulladmin-only = full-admin-only controls; also hidden from managers */
[data-role="viewer"] .fulladmin-only,[data-role="operator"] .fulladmin-only,[data-role="manager"] .fulladmin-only{display:none!important}

/* ===== responsive ===== */
.sb-toggle{display:none}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;z-index:200;transform:translateX(-100%);transition:transform .2s;width:var(--sidebar-w)}
  .sidebar.open{transform:translateX(0)}
  .sb-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--card);color:var(--text)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .topbar,.content{padding-left:18px;padding-right:18px}
}
@media (max-width:640px){
  .tiles{grid-template-columns:1fr}
  th,td{padding:10px 12px}
}