:root{
  --bg:#eef2fb; --surface:#ffffff; --surface-2:#f6f8fe; --fg:#141b2d; --muted:#5b6b8c;
  --line:#e2e8f5; --accent:#5b6cff; --accent-2:#a06eff; --ok:#12a150; --warn:#d99000; --err:#e5484d;
  --sidebar:#0e1530; --sidebar-fg:#c7d0ea; --sidebar-active:#1b2547;
  --shadow:0 10px 30px rgba(20,27,45,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1020; --surface:#121a33; --surface-2:#0f1730; --fg:#e8ecf7; --muted:#9aa6c4;
    --line:#25314f; --accent:#6ea8fe; --accent-2:#a06eff; --sidebar:#0a0f22; --sidebar-fg:#aeb9d8;
    --sidebar-active:#1b2547; --shadow:0 16px 40px rgba(0,0,0,.4);
  }
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial}
a{color:inherit}
button{font:inherit;cursor:pointer}

/* ---------- login ---------- */
.login{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,#1b2547 0%,var(--bg) 60%)}
.login .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:40px;width:min(92vw,420px);text-align:center;box-shadow:var(--shadow)}
.brandmark{width:56px;height:56px;border-radius:14px;margin:0 auto 14px;display:grid;place-items:center;font-size:26px;font-weight:800;color:#0b1020;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.btn{border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:9px 14px;border-radius:10px;transition:.15s;white-space:nowrap}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));border:none;color:#0b1020;font-weight:700}
.btn.primary:hover{filter:brightness(1.05);color:#0b1020}
.btn.sm{padding:5px 10px;font-size:12.5px;border-radius:8px}
.btn.danger:hover{border-color:var(--err);color:var(--err)}

/* ---------- app shell ---------- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:var(--sidebar);color:var(--sidebar-fg);display:flex;flex-direction:column;padding:18px 14px;gap:6px}
.sidebar .logo{display:flex;align-items:center;gap:11px;padding:6px 8px 16px;font-weight:700;color:#fff;font-size:16px}
.sidebar .logo .mk{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:800;color:#0b1020;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:6px}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--sidebar-fg);font-weight:500}
.nav a .ic{width:18px;text-align:center;opacity:.9}
.nav a:hover{background:rgba(255,255,255,.05);color:#fff}
.nav a.active{background:var(--sidebar-active);color:#fff}
.sidebar .spacer{flex:1}
.sidebar .foot{font-size:12px;color:#6b779c;padding:8px}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.topbar h1{font-size:17px;margin:0;font-weight:650}
.topbar .grow{flex:1}
.tenant-pill{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:13px}
.tenant-pill select{border:none;background:transparent;color:var(--fg);font:inherit;outline:none}
.usermenu{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.avatar{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#0b1020;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.content{padding:24px;overflow:auto}

/* ---------- cards / tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px;margin-bottom:22px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.tile.clickable{cursor:pointer;transition:.15s}
.tile.clickable:hover{border-color:var(--accent);transform:translateY(-1px)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch;margin-top:18px}
@media (max-width:900px){.cols2{grid-template-columns:1fr}}
.tile .k{color:var(--muted);font-size:12.5px;text-transform:uppercase;letter-spacing:.04em}
.tile .v{font-size:30px;font-weight:750;margin-top:6px}
.tile .s{font-size:12.5px;color:var(--muted);margin-top:2px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:6px}
.dot.ok{background:var(--ok)} .dot.err{background:var(--err)} .dot.warn{background:var(--warn)}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.panel .phead{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.panel .phead h2{font-size:15px;margin:0;font-weight:650}
.panel .phead .grow{flex:1}
.search{display:flex;align-items:center;gap:8px;background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:7px 11px;min-width:220px}
.search input{border:none;background:transparent;outline:none;color:var(--fg);font:inherit;width:100%}

/* ---------- power-table toolbar ---------- */
.tbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px;border-bottom:1px solid var(--line)}
.tbar .grow{flex:1}
.tbar .t-count{font-size:12.5px;white-space:nowrap}
select.t-f{padding:7px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--fg);font:inherit;outline:none;cursor:pointer;max-width:220px}
select.t-f:focus{border-color:var(--accent)}
.bulkbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.bulkbar .grow{flex:1}
th.selcol,td.selcol{width:40px;text-align:center;padding-left:14px;padding-right:0}
.rowsel,.selall{width:16px;height:16px;cursor:pointer;accent-color:var(--accent);vertical-align:middle}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em;background:var(--surface-2)}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--accent)}
th.sorted{color:var(--accent)}
tbody tr:hover{background:var(--surface-2)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;border:1px solid var(--line)}
.badge.green{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 40%,transparent)}
.badge.red{color:var(--err);border-color:color-mix(in srgb,var(--err) 40%,transparent)}
.badge.gray{color:var(--muted)}
.badge.amber{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.rowactions{display:flex;gap:6px}
.check{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--fg);cursor:pointer}
.check input{margin:0}
.check.inline{display:inline-flex;margin-right:10px;font-size:12.5px;color:var(--muted)}
.pickresults{max-height:210px;overflow:auto}
.pickrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;margin-bottom:6px;background:var(--surface-2)}
.pickrow span{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.actfeed{display:flex;flex-direction:column}
.actrow{display:flex;gap:10px;align-items:flex-start;padding:10px 16px;border-top:1px solid var(--line)}
.actrow:first-child{border-top:none}
.actapp{flex:0 0 auto;margin-top:1px;text-transform:capitalize}
.actbody{min-width:0;font-size:13px;line-height:1.45}
.muted{color:var(--muted)}
.right{text-align:right}
.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:12px 16px;color:var(--muted);font-size:13px}

.empty{padding:44px;text-align:center;color:var(--muted)}
.spinner{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin:30px auto}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--sidebar);color:#fff;padding:11px 18px;border-radius:10px;box-shadow:var(--shadow);z-index:50;font-size:13.5px}
.toast.err{background:var(--err)}

/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(4,8,20,.55);display:grid;place-items:center;z-index:40}
.modal{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:22px;width:min(92vw,440px);box-shadow:var(--shadow);max-height:90vh;overflow:auto}
/* Wide modals carry a row per imported user with an error column; 820px wrapped addresses
   across several lines. Set as WIDTH, not max-width: the base .modal pins an explicit width, and
   a max-width cannot widen something already pinned narrower. */
.modal.wide{width:min(94vw,1180px)}
.modal.wide .tbar{padding:0 0 12px 0;border:none}
/* one scroll container = the modal itself; no nested scrollbars, cells wrap instead of scrolling sideways */
.modal .t-results{overflow:visible;max-height:none}
.modal .tablewrap{overflow-x:hidden}
.modal .tablewrap th,.modal .tablewrap td{white-space:normal;word-break:break-word}
/* member/user add picker */
.picker{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:5;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:240px;overflow:auto}
.pick{padding:9px 12px;cursor:pointer;font-size:13px;border-bottom:1px solid var(--line)}
.pick:last-child{border-bottom:none}
.pick:hover{background:var(--surface-2)}
.modal h3{margin:0 0 14px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}
.field input,.field select{width:100%;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--fg);font:inherit;outline:none}
.section-label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:16px 0 10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:560px){.grid2{grid-template-columns:1fr}}
.field input:focus{border-color:var(--accent)}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.note{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--muted);margin-bottom:12px}

/* toggle switch */
.switch{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0;position:absolute}
.switch .track{position:absolute;inset:0;border-radius:999px;background:var(--line);border:1px solid var(--line);transition:background .15s,border-color .15s;cursor:pointer}
.switch .track::before{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch input:checked + .track{background:var(--accent);border-color:var(--accent)}
.switch input:checked + .track::before{transform:translateX(16px)}
.switch input:focus-visible + .track{outline:2px solid var(--accent);outline-offset:2px}

/* editable settings rows (advanced mail policy) */
.setrow{display:grid;grid-template-columns:minmax(0,1fr) 190px;align-items:center;gap:10px 14px;padding:9px 4px;border-bottom:1px solid var(--line)}
.setrow:last-child{border-bottom:none}
.setrow .skey{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--fg);word-break:break-all}
.setrow.dirty .skey{color:var(--accent);font-weight:600}
.setrow .sctl{justify-self:end;width:100%;display:flex;justify-content:flex-end}
.setrow .sctl input[type=text],.setrow .sctl input[type=number]{width:100%;padding:6px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--fg);font:inherit;font-size:13px;outline:none;text-align:right}
.setrow .sctl input:focus{border-color:var(--accent)}
@media (max-width:560px){.setrow{grid-template-columns:1fr}.setrow .sctl{justify-self:stretch}}

/* structured policy editor (authentication policies) */
.plist{padding:2px 16px 6px}
.prow{display:grid;grid-template-columns:minmax(0,1fr) 172px;align-items:center;gap:6px 16px;padding:13px 0;border-bottom:1px solid var(--line)}
.prow:last-child{border-bottom:none}
.prow .pl{font-size:13.5px;color:var(--fg);font-weight:600}
.prow .ph{font-size:12px;color:var(--muted);margin-top:2px;font-weight:400;line-height:1.35}
.prow .pc{justify-self:end;display:flex;align-items:center;gap:10px;width:100%;justify-content:flex-end}
.prow .pc .unit{font-size:12px;color:var(--muted)}
.prow .pc input[type=number]{width:92px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--fg);font:inherit;font-variant-numeric:tabular-nums;text-align:right;outline:none}
.prow .pc input[type=number]:focus{border-color:var(--accent)}
.prow .pc input:disabled{opacity:.45;cursor:not-allowed}
.prow.off{opacity:.5}
.prow.off .pc .primary-switch{opacity:1}
.policy-raw{margin:2px 16px 14px;font-size:12px;color:var(--muted)}
.policy-raw code{display:block;margin-top:6px;padding:9px 11px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;color:var(--fg);word-break:break-all;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* expandable "Advanced …" section (visible, obviously interactive) */
details.xpndr{border-top:1px solid var(--line)}
details.xpndr>summary{list-style:none;cursor:pointer;user-select:none;display:flex;align-items:center;gap:10px;
  padding:13px 16px;font-size:13px;font-weight:650;color:var(--fg)}
details.xpndr>summary::-webkit-details-marker{display:none}
details.xpndr>summary::before{content:'▸';font-size:11px;color:var(--accent);transition:transform .2s ease}
details.xpndr[open]>summary::before{transform:rotate(90deg)}
details.xpndr>summary:hover{background:var(--surface-2)}

/* audit filter bar */
.filterbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;padding:10px 16px 4px;border-bottom:1px solid var(--line)}
.filterbar .field{margin:0}
.filterbar .field label{display:block;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.filterbar .field input{padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--fg);font:inherit;outline:none}
.filterbar .field input:focus{border-color:var(--accent)}
.filterbar .btn{margin-bottom:1px}

/* storage utilisation bar */
.usebar{display:inline-block;vertical-align:middle;width:120px;height:8px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden;margin-right:8px}
.usebar span{display:block;height:100%;background:var(--accent);border-radius:6px}
.usebar span.warm{background:#d9a441}
.usebar span.hot{background:#d9534f}

/* access identity card */
.idcard{display:flex;align-items:center;gap:16px;padding:18px 16px}
.idcard .big{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:20px;color:#0b1020;background:linear-gradient(135deg,var(--accent),var(--accent-2));flex:0 0 auto}
.idcard .who{min-width:0}
.idcard .who .nm{font-size:16px;font-weight:700}
.idcard .who .sub{font-size:12px;color:var(--muted);word-break:break-all}
.idcard .chips{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;max-width:55%}

/* ── sidebar product section header ── */
.navsec{display:flex;align-items:center;gap:8px;margin:16px 10px 6px;padding-top:13px;border-top:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.navsec-mk{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto}
.navsec-mk svg{width:14px;height:14px}

/* ── dashboard product launcher ── */
.hub-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.hub-eyebrow{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.hub-title{font-size:26px;font-weight:800;margin:6px 0 4px;letter-spacing:-.02em}
.hub-sub{color:var(--muted);font-size:13.5px;max-width:62ch;line-height:1.5}
.tenant-hero{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:12px;color:var(--muted);box-shadow:var(--shadow)}
.tenant-hero span{display:block;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;margin-bottom:3px}
.tenant-hero b{font-size:16px;color:var(--fg)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.pcard{display:flex;flex-direction:column;gap:14px;padding:20px;background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);text-decoration:none;color:var(--fg);transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;position:relative;overflow:hidden}
.pcard:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(20,27,45,.14);border-color:transparent}
.pcard.featured{background:linear-gradient(160deg,var(--surface),var(--surface-2));border-color:color-mix(in srgb,#CD3333 42%,var(--line))}
.pcard.disabled{opacity:.6;cursor:default;pointer-events:none}
.plogo{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;box-shadow:0 6px 16px rgba(20,27,45,.18)}
.plogo svg{width:27px;height:27px}
.pmeta{flex:1}
.pname{font-size:16.5px;font-weight:750;letter-spacing:-.01em}
.ptag{font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);margin-top:2px}
.pdesc{color:var(--muted);font-size:13px;line-height:1.5;margin-top:8px;max-width:46ch}
.pgo{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:650;color:var(--fg)}
.pgo .arw{transition:transform .14s ease}
.pcard:hover .pgo .arw{transform:translateX(3px)}
.pcard-main{display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.plinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;padding-top:12px;border-top:1px solid var(--line)}
.plink{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--accent);text-decoration:none;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:5px 10px}
.plink:hover{border-color:var(--accent)}
.plink .arw{font-size:11px}

/* Zenith365 parent nav item + collapsible submenu */
.nav-parent{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;text-decoration:none;color:var(--sidebar-fg);font-weight:600;cursor:pointer;margin-top:10px}
.nav-parent:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-parent.active{background:var(--sidebar-active);color:#fff}
.nav-parent.open{color:#fff}
.nav-mk{width:23px;height:23px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto;box-shadow:0 2px 6px rgba(0,0,0,.28)}
.nav-mk svg{width:13px;height:13px}
.navsec-t{flex:1}
.navsec-caret{font-size:11px;opacity:.7;transition:transform .2s ease}
.nav-parent.open .navsec-caret{transform:rotate(90deg)}
.navsub{overflow:hidden;max-height:0;transition:max-height .24s ease;margin:2px 0 0 22px;border-left:1px solid rgba(255,255,255,.09)}
.navsub.open{max-height:1000px}   /* room for every Zenith365 page; 460px clipped the twelfth */
.navsub a{padding-left:15px}

/* ── analytics charts (inline SVG) ── */
.analytics-row{display:grid;grid-template-columns:210px 1fr;gap:18px;align-items:center;padding:14px 16px 6px}
.ac-chart{display:flex;flex-direction:column;align-items:center;gap:10px}
.ac-bars{min-width:0}
.ac-cap{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:9px}
.donut{width:134px;height:134px}
.donut-c{font-size:19px;font-weight:800;fill:var(--fg)}
.donut-s{font-size:8.5px;fill:var(--muted);text-transform:uppercase;letter-spacing:.09em}
.legend{display:flex;flex-direction:column;gap:5px;width:100%}
.legend>div{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--muted)}
.legend b{margin-left:auto;color:var(--fg);font-variant-numeric:tabular-nums}
.dotc{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.hbars{display:flex;flex-direction:column;gap:9px}
.hbar{display:grid;grid-template-columns:120px 1fr auto;gap:10px;align-items:center;font-size:12.5px}
.hbar-l{color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hbar-t{height:9px;background:var(--surface-2);border-radius:6px;overflow:hidden}
.hbar-t span{display:block;height:100%;border-radius:6px;transition:width .3s ease}
.hbar-v{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ac-foot{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:12px 16px 4px;border-top:1px solid var(--line);margin-top:8px}
.ac-foot>div{display:flex;flex-direction:column;gap:2px}
.ac-foot span{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.ac-foot b{font-size:16px;font-variant-numeric:tabular-nums}

@media (max-width:680px){
  .pcard.featured{grid-column:span 1}
  .analytics-row{grid-template-columns:1fr}
  .hbar{grid-template-columns:92px 1fr auto}
  .ac-foot{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:820px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;z-index:30;width:248px;height:100%;transform:translateX(-100%);transition:.2s}
  .sidebar.open{transform:none}
  .hamburger{display:inline-flex!important}
}
.hamburger{display:none;border:none;background:transparent;font-size:20px;color:var(--fg)}

/* ── Modal tabs ──────────────────────────────────────────────────────────────
   The user detail modal had seven stacked sections and loaded all of them at
   once. Tabs partition it by feature and let each panel load only when it is
   first opened, so opening a user no longer fires six requests to render one
   screen. */
.mtabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:0 0 16px;overflow-x:auto;scrollbar-width:none}
.mtabs::-webkit-scrollbar{display:none}
.mtab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);
      font:600 13px/1 inherit;padding:10px 13px;cursor:pointer;white-space:nowrap;border-radius:8px 8px 0 0;
      display:flex;align-items:center;gap:7px}
.mtab:hover{color:var(--fg);background:var(--surface-2)}
.mtab.active{color:var(--accent);border-bottom-color:var(--accent)}
.mtab .mtab-c{font-size:11px;font-weight:700;padding:1px 6px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.mtab.active .mtab-c{background:var(--accent);color:#fff}
.mpanel{display:none}
.mpanel.active{display:block}
/* Inside a tab the first section label has nothing above it to separate from. */
.mpanel > .section-label:first-child{margin-top:0}

/* ── Searchable tenant picker ────────────────────────────────────────────────
   Replaces a <select>, which stops being usable once a deployment has more than
   a handful of tenants. */
.tenant-pill{position:relative}
.tenant-pill button{appearance:none;background:var(--surface-2);border:1px solid var(--line);color:var(--fg);
  font:600 13px/1 inherit;padding:7px 11px;border-radius:9px;cursor:pointer;max-width:230px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tenant-pill button:hover{border-color:var(--accent)}
.tpicker{position:absolute;top:calc(100% + 6px);right:0;z-index:50;width:min(88vw,320px);
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);
  padding:8px;max-height:60vh;display:flex;flex-direction:column;gap:6px}
.tpicker input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:9px;
  background:var(--surface-2);color:var(--fg);font:13px inherit;outline:none}
.tpicker input:focus{border-color:var(--accent)}
.tpicker > div{overflow:auto}
.tpick{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 10px;
  border-radius:9px;cursor:pointer;font-size:13.5px}
.tpick:hover{background:var(--surface-2)}
.tpick.on{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent)}
.tpick .muted{font-size:12px}

/* ---- CSV import: file drop, file summary, chunked progress ---------------- */
/* Large imports used to freeze the dialog with no feedback. The work is now sent
   in batches, so this progress bar reflects rows actually applied rather than a
   spinner that only means "still waiting". */
.dropzone {
  margin-top: 12px; padding: 22px 18px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--line); border-radius: 12px; background: var(--surface-2);
  display: grid; gap: 6px; justify-items: center;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--surface); color: var(--accent); }
.dropzone svg { width: 26px; height: 26px; opacity: .75; }

.filemeta {
  margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-2); font-size: 13px; line-height: 1.5;
}
.filemeta code { font: 12px ui-monospace, monospace; opacity: .85; }

.prog { margin-top: 12px; }
.prog-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; margin-bottom: 6px; }
.prog-track { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--line); }
.prog-bar { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .25s ease; }

/* An expanded domain row lives inside a table that is wider than the screen, so its contents
   inherited that width and the controls sat off to the right -- reachable only by scrolling
   sideways, which is where the Run buttons were effectively invisible. Pinning the panel to the
   left edge of the scroll container (and sizing it to that container in JS on expand) keeps the
   whole panel on screen no matter how wide the summary table gets. */
/* Nothing here scrolls sideways. Cells wrap instead of forcing width, so the table shrinks to
   whatever space it has -- which is why no pinning or width-measuring is needed: an element that
   always fits never needs to be dragged back into view. */
.table-fit{table-layout:auto}
.table-fit th,.table-fit td{white-space:normal;overflow-wrap:anywhere}
/* Wrapping is for prose and long values, never for a status. A badge broken across lines is
   unreadable, so it stays on one line and the column gives it the width it needs. */
.table-fit .badge,.table-fit .chip{white-space:nowrap;overflow-wrap:normal}
.table-fit td:has(> .badge){white-space:nowrap}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{display:inline-block;padding:2px 6px;border-radius:5px;font-size:11px;font-weight:700;
      letter-spacing:.02em;border:1px solid var(--line);color:var(--muted)}
.chip.green{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 8%,transparent)}
.chip.red{color:var(--err);border-color:color-mix(in srgb,var(--err) 45%,transparent);background:color-mix(in srgb,var(--err) 8%,transparent)}
.chip.amber{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.chip.gray{color:var(--muted)}
.steprow{display:flex;gap:14px;align-items:flex-start;padding:11px 2px;border-top:1px solid var(--line)}
.steprow:first-child{border-top:0}
.steprow .smain{flex:1 1 auto;min-width:0}          /* min-width:0 lets long text wrap instead of widening the row */
.steprow .sact{flex:0 0 auto;padding-top:1px}
.steprow .shead{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

/* A disabled control has to LOOK disabled. Without this a button that cannot be pressed is
   pixel-identical to one that can, so "Nothing to retry" read as an action going unanswered. */
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;filter:grayscale(35%)}
.btn:disabled:hover,.btn[disabled]:hover{border-color:var(--line);color:inherit}

/* The row table in a task's detail. Without explicit widths the error text -- which can be a
   whole sentence from Keycloak -- takes as much room as it likes and squeezes the username into
   a column two characters wide, wrapping an address across four lines. The identity IS the thing
   being scanned, so it gets the room and the error wraps instead. */
.rowtable td.who{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:0}
.rowtable td:last-child{font-size:12.5px;line-height:1.45}
/* The line-number column: 44px could not hold three digits once cell padding was counted, and
   .table-fit lets anything wrap, so "120" broke across lines. Narrow columns need the wrapping
   turned back off, not just a width. */
.rowtable th:first-child,.rowtable td:first-child{white-space:nowrap;overflow-wrap:normal;
  padding-left:12px;padding-right:8px;text-align:right;font-variant-numeric:tabular-nums}
.rowtable th:nth-child(3),.rowtable th:nth-child(4),.rowtable th:nth-child(5),
.rowtable td:nth-child(3),.rowtable td:nth-child(4),.rowtable td:nth-child(5){white-space:nowrap}


/* A callout, for the one line on a page that must not be skimmed past. Distinct from .note --
   which is background information -- by a warning tone and a marker, because "your credentials
   disappear in 24 hours" is a deadline, not a description. */
.callout{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:10px;
  border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  background:color-mix(in srgb,var(--warn) 9%,transparent);font-size:13px;line-height:1.5}
.callout-mark{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  background:var(--warn);color:#fff;font-weight:700;font-size:13px;line-height:1}

/* session policy: a duration is a number and a unit, which needs more room than the 172px control column */
.ss-panel .plist{padding:2px 0 6px}
.ss-panel .prow{grid-template-columns:minmax(0,1fr) auto}
.ss-panel .prow .pc{gap:6px}
.ss-panel .prow .pc input[type=number]{width:72px}
.ss-panel .prow .pc select{padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--fg);font:inherit}
.field textarea{width:100%;box-sizing:border-box;font:inherit;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2);color:var(--fg);outline:none;resize:vertical}
.field textarea:focus{border-color:var(--accent)}

/* service health */
.hl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding:14px 16px 16px}
.hl-card{border:1px solid var(--line);border-radius:12px;padding:14px;background:var(--surface)}
.hl-card.hl-down{border-color:color-mix(in srgb,var(--err, #d64545) 55%,var(--line))}
.hl-strip{display:grid;grid-template-columns:repeat(48,1fr);gap:2px;margin-top:12px;height:22px}
.hl-strip i{border-radius:2px;background:var(--line)}
.hl-strip i.t-ok{background:var(--ok, #2f9e6e)}
.hl-strip i.t-partial{background:var(--warn, #c98a1b)}
.hl-strip i.t-down{background:var(--err, #d64545)}
.hl-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:3px}
.hl-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin-top:10px}
.hl-kv span{display:block;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.hl-kv b{font-variant-numeric:tabular-nums}

/* ---- tenant management (BRD §5.2) ---- */
.tenant-banner{margin:16px 26px 0;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 12%,var(--surface));font-size:13px}
.tenant-banner a{margin-left:6px}
.tm-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.tm-head .tm-name{display:flex;align-items:center;gap:8px}
.tm-head h2{margin:0;font-size:20px}
.tm-step{display:flex;align-items:center;gap:16px;justify-content:space-between;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tm-step .btn{flex-shrink:0}
.tm-danger{padding:12px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--err) 40%,transparent);background:color-mix(in srgb,var(--err) 8%,var(--surface))}
.tb-logo{width:150px;height:64px;border:1px dashed var(--line);border-radius:10px;display:grid;place-items:center;background:var(--surface-2);overflow:hidden}
.tb-logo img{max-width:140px;max-height:56px}
.tb-sw{display:inline-block;width:12px;height:12px;border-radius:3px;border:1px solid var(--line);vertical-align:-1px;margin-right:6px}
.tb-target+.tb-target{border-top:1px solid var(--line)}
tr.tb-diff td:first-child{box-shadow:inset 3px 0 0 var(--warn)}
@media (max-width:700px){.tenant-banner{margin:12px 14px 0}.tm-step{flex-direction:column;align-items:flex-start}}
a.btn{text-decoration:none;display:inline-flex;align-items:center}

/* ---- webhooks (BRD §6) ---- */
.wh-groups{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;max-height:46vh;overflow:auto;padding:2px}
.wh-group{padding:8px 10px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.wh-g{display:flex;gap:8px;align-items:center;cursor:pointer}
.wh-g code,.wh-exact code{font-size:11.5px;color:var(--muted)}
.wh-exact{display:grid;gap:4px;margin:6px 0 2px}
.wh-exact label{display:flex;gap:6px;align-items:center;font-size:12.5px}
.wh-pre{background:var(--surface-2);border:1px solid var(--line);border-radius:10px;padding:12px;overflow:auto;max-height:40vh;font-size:12px;white-space:pre-wrap;overflow-wrap:anywhere}
.sm-select{padding:6px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface-2);color:var(--fg);font:inherit;font-size:12.5px}
@media (max-width:760px){.wh-groups{grid-template-columns:1fr}}

/* ---- bulk purge: the mailbox option reads as a decision, not a checkbox in a row of text ---- */
.purge-mail{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:10px;cursor:pointer}
.purge-mail input{margin-top:2px}
.purge-mail span{display:block;font-size:13px}
.purge-mail .muted{margin-top:3px;font-size:12.5px}
.callout.err{border-color:color-mix(in srgb,var(--err) 45%,transparent);background:color-mix(in srgb,var(--err) 9%,var(--surface))}
.callout.err .callout-mark{background:var(--err);color:#fff}