/* TorEndpoint console — "Administrator - Bright" design system (from Figma). */
:root {
  --blue: #0079C4;      /* top bar */
  --blue-link: #0093EE; /* links / active */
  --green: #4ECE3D;     /* positive / actions */
  --text: #3F536E;      /* primary text */
  --muted: #8DABC4;     /* secondary text */
  --bg: #ECF5FD;        /* page background */
  --card: #FFFFFF;
  --border: #E5EEF5;
  --border2: #C5D9E8;
  --rail: #2C405A;      /* dark icon rail */
  --danger: #FF151F;
  --warn: #F5A623;
  --input-border: #A8C6DF; /* Figma "Inputs 42px" stroke */
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.05);
  --radius: 6px;        /* cards */
  --radius-ctrl: 4px;   /* Figma controls (buttons/inputs) corner radius */
  --radius-lg: 12px;    /* elevated surfaces (modals, floating cards) */
}
/* Canonical form controls — match the Figma "Inputs 42px" component
   (radius 4, #A8C6DF border, Heebo, #8DABC4 placeholder). */
input:not([type=checkbox]):not([type=radio]), select, textarea {
  font-family: inherit; color: var(--text);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: 'Heebo', system-ui, 'Segoe UI', sans-serif;
  color: var(--text); background: var(--bg); font-size: 15px; line-height: 1.5;
}
a { color: var(--blue-link); text-decoration: none; }
button { font-family: inherit; }

/* ── Top bar ── */
.topbar {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 60px; z-index: 30;
  background: var(--blue); color: #fff; display: flex; align-items: center; gap: 18px; padding-inline: 20px;
}
.topbar .logo { font-size: 20px; letter-spacing: .5px; white-space: nowrap; }
.topbar .logo b { font-weight: 800; }
.topbar .logo span { font-weight: 300; opacity: .95; }
.topbar .search {
  flex: 1; max-width: 780px; height: 36px; display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16); border-radius: 4px; padding-inline: 14px; color: #fff;
}
.topbar .search input { flex: 1; background: transparent; border: 0; outline: 0; color: #fff; font-size: 15px; }
.topbar .search input::placeholder { color: rgba(255,255,255,.6); }
.topbar .spacer { flex: 1; }
.topbar .user { display: flex; align-items: center; gap: 12px; }
.topbar .avatar { width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.2); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.topbar .logout { color: #fff; opacity: .85; background: none; border: 0; cursor: pointer; font-size: 13px; }

/* ── Shell (RTL: rail+nav on the right, detail on the left) ── */
.shell { position: fixed; inset-block-start: 60px; inset-inline: 0; inset-block-end: 0; display: flex; overflow: hidden; }
.rail { width: 60px; background: var(--rail); display: flex; flex-direction: column; align-items: center; padding-block: 16px; gap: 6px; }
.rail .ico { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: #8CA6BE; cursor: pointer; font-size: 18px; }
.rail .ico.active, .rail .ico:hover { color: #fff; background: rgba(255,255,255,.08); }
.rail .grow { flex: 1; }

.sidebar { width: 210px; background: var(--card); border-inline-start: 1px solid var(--border); border-inline-end: 2px solid var(--rail); padding: 22px 14px; overflow-y: auto; position: relative; z-index: 30; }
.sidebar .nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar .nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; color: var(--text); font-weight: 500; cursor: pointer;
}
.sidebar .nav a .dot { width: 8px; height: 8px; border-radius: 50%; }
.sidebar .nav a:hover { background: var(--bg); }
.sidebar .nav a.active { background: #EAF4FC; color: var(--blue-link); }
.sidebar .label { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin: 20px 12px 8px; }

.content { flex: 1; overflow-y: auto; padding: 26px 30px; }
.content-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.content-head h1 { font-size: 22px; font-weight: 700; margin: 0; }
.content-head .sub { color: var(--muted); font-size: 13px; }

/* ── Cards, table ── */
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: start; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  font-weight: 700; padding: 16px 20px; border-bottom: 1px solid var(--border);
}
tbody td { padding: 15px 20px; border-bottom: 1px solid var(--border); font-size: 15px; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: #F7FBFE; }
tbody tr.selected { background: #EAF4FC; }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 13px; color: var(--text); }
.muted { color: var(--muted); }
.green { color: var(--green); font-weight: 600; }

/* ── Pills / badges ── */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.online { color: #2AA31F; background: rgba(78,206,61,.14); }
.pill.offline { color: #7E95A7; background: rgba(141,171,196,.16); }
.pill.revoked { color: var(--danger); background: rgba(255,21,31,.10); }
.sev { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: .5px; }
.sev.error, .sev.critical { color: var(--danger); background: rgba(255,21,31,.10); }
.sev.warning { color: #B9770E; background: rgba(245,166,35,.15); }
.sev.info { color: var(--blue-link); background: rgba(0,147,238,.12); }
.sev.warn { color: #B9770E; background: rgba(245,166,35,.15); }
.sev.ok { color: var(--green); background: rgba(78,206,61,.14); }

/* ── Buttons ── */
/* Buttons — Figma "Button 42 px" system (Heebo Medium 15/22, radius 4). */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding-inline: 22px; border-radius: 4px; border: 0; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 22px; cursor: pointer; transition: filter .12s, background .12s; }
.btn-blue { background: var(--blue-link); color: #fff; box-shadow: inset -1px 1px 0 rgba(255,255,255,.06); }
.btn-blue:hover { filter: brightness(.95); }
.btn-blue:active { filter: brightness(.9); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { filter: brightness(.96); }
/* Stroked (secondary): white, light border, BLUE label — per Figma. */
.btn-ghost { background: #fff; color: var(--blue-link); border: 1px solid var(--border2); }
.btn-ghost:hover { background: #F5FAFE; }
.btn-danger { background: #fff; color: var(--danger); border: 1px solid rgba(255,21,31,.3); }
.btn-sm { height: 36px; padding-inline: 16px; font-size: 14px; }
.btn:disabled { opacity: .5; cursor: default; }
.iconbtn { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border2); background: #fff; cursor: pointer; display: grid; place-items: center; color: var(--muted); }

/* Deployment card — the ready-to-Intune download surface. */
.deploy { padding: 20px 22px; margin-bottom: 18px; }
.deploy .row { display: flex; align-items: center; gap: 18px; }
.deploy .txt { flex: 1; min-width: 0; }
.deploy .t { font-size: 16px; font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 10px; }
.deploy .s { color: var(--muted); font-size: 13px; margin-top: 3px; }
.deploy .links { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); flex-wrap: wrap; }
.deploy .hint { color: var(--muted); font-size: 12px; margin-inline-start: auto; align-self: center; }

/* ── Detail panel ── */
.detail { width: 380px; background: var(--card); border-inline-end: 1px solid var(--border); overflow-y: auto; display: none; }
.detail.open { display: block; }
/* Endpoint detail opens as a FULL PAGE that OVERLAYS the content area (absolute, over
   the endpoint list) so it can slide in like a curtain without reflowing the flex
   layout. It sits after the rail(60)+sidebar(210) on the inline-start side and
   stretches to the inline-end edge. */
.detail.open.full {
  position: absolute; inset-block: 0; inset-inline-start: 270px; inset-inline-end: 0;
  width: auto; z-index: 20; border-inline-end: 0;
  box-shadow: -14px 0 36px -22px rgba(20,45,70,.45);
  animation: curtainIn .3s cubic-bezier(.33, 0, .2, 1); will-change: transform;
}
/* Open: slide in FROM THE LEFT (moves right into place). Close: slide back out LEFT. */
.detail.open.full.closing { animation: curtainOut .26s cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes curtainIn  { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes curtainOut { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.detail.open.full .dbody { padding: 24px clamp(24px, 4vw, 56px); }
/* Full-page: keep info rows tidy (left-aligned label/value) instead of stretching
   the label and value to opposite edges of a very wide page. */
.detail.open.full .kv { justify-content: flex-start; gap: 20px; max-width: 900px; }
.detail.open.full .kv .k { min-width: 180px; flex: none; }
.detail.open.full .kv .v { text-align: start; }
/* Give the wide page a comfortable top toolbar feel. */
.detail.open.full .dhead { padding-inline: clamp(24px, 4vw, 56px); }
/* Full page: tint the body so the white section cards read as distinct panels. */
.detail.open.full .dbody { background: var(--bg); }
.detail.open.full .dbody > .dsec { max-width: 1180px; }
/* Section card — one clear panel per area, with an accented, divided header. */
.dsec { position: relative; background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px 18px; margin-bottom: 16px; box-shadow: 0 1px 3px rgba(20,45,70,.05), 0 8px 24px -20px rgba(20,45,70,.12); }
/* Item-count pill in the header of each foldable section (visible collapsed too). */
.dsec-count { position: absolute; top: 15px; inset-inline-end: 30px; min-width: 20px; height: 20px; padding: 0 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; border-radius: 10px; background: rgba(127,127,127,.16); color: var(--muted, #8a94a6); }
.dsec-count.warn { background: rgba(240,170,20,.2); color: #9a6b00; }
.dsec-count.bad { background: rgba(220,50,40,.16); color: #b0281f; }
.dsec-count.ok { background: rgba(40,167,69,.16); color: #1f8a3b; }
.dsec-h { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--border); }
.dsec-h svg { width: 18px; height: 18px; color: var(--blue, #4f6ef7); flex: none; }
.dsub-h { font-weight: 700; font-size: 12px; letter-spacing: .3px; color: var(--muted, #8a94a6); text-transform: uppercase; margin: 18px 0 9px; }
.dsec-kvs .kv:last-child { border-bottom: 0; padding-bottom: 0; }
/* Sub-section blocks (licenseCard / Office / installs / printers / tasks) render their
   own `.label` as the first child — style it as the card header (overrides inline margins). */
.dsec > .label:first-child { margin: 0 0 14px !important; padding: 0 0 12px; font-size: 15px; font-weight: 700; color: var(--text); letter-spacing: normal; text-transform: none; border-bottom: 1px solid var(--border); }
/* Collapsible section cards: click the header to fold/unfold. */
.dsec-fold > .dsec-h, .dsec-fold > .label:first-child { cursor: pointer; position: relative; padding-inline-end: 76px; user-select: none; }
.dsec-fold > .dsec-h::after, .dsec-fold > .label:first-child::after { content: '▾'; position: absolute; inset-inline-end: 2px; top: 1px; color: var(--muted, #8a94a6); font-size: 11px; transition: transform .12s; }
.dsec-fold.collapsed > .dsec-h::after, .dsec-fold.collapsed > .label:first-child::after { content: '▸'; }
.dsec-fold > .dsec-h:hover, .dsec-fold > .label:first-child:hover { color: var(--blue, #4f6ef7); }
.dsec.collapsed > :not(:first-child):not(.dsec-count) { display: none; }
.dsec.collapsed { padding-bottom: 16px; }
.dsec.collapsed > .dsec-h, .dsec.collapsed > .label:first-child { margin-bottom: 0 !important; padding-bottom: 0; border-bottom: 0; }
.detail .dhead { padding: 20px 22px; border-bottom: 1px solid var(--border); display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.detail .dhead h2 { margin: 0; font-size: 18px; }
.detail .tabs { display: flex; border-bottom: 1px solid var(--border); }
.detail .tabs button { flex: 1; background: none; border: 0; padding: 12px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.detail .tabs button.active { color: var(--blue-link); border-bottom-color: var(--blue-link); }
.detail .dbody { padding: 20px 22px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.kv .k { color: var(--muted); }
.kv .v { font-weight: 600; text-align: end; }
.finding { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
.finding h4 { margin: 6px 0 4px; font-size: 14px; }
.finding p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.close { background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; line-height: 1; }

.empty { padding: 40px; text-align: center; color: var(--muted); }
.spinner { width: 18px; height: 18px; border: 2px solid rgba(0,0,0,.12); border-top-color: var(--blue-link); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Live command-progress panel (real-time stage + percent while a command runs) */
.cmdprog { margin-top: 16px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: linear-gradient(180deg,#F7FBFE,#fff); }
.cmdprog .cp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.cmdprog .cp-stage { font-weight: 700; font-size: 14px; color: var(--text); }
.cmdprog .cp-pct { font-weight: 700; font-size: 14px; color: var(--blue-link); font-variant-numeric: tabular-nums; }
.cmdprog .cp-bar { position: relative; height: 8px; border-radius: 6px; background: #E3EEF7; overflow: hidden; margin: 9px 0 8px; }
.cmdprog .cp-bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg,var(--blue-link),#38C6F0); transition: width .45s cubic-bezier(.4,0,.2,1); }
.cmdprog .cp-bar.done > i { background: var(--green); }
.cmdprog .cp-bar.err > i { background: var(--danger); }
/* Queued: a sheen sweeps the partially-filled bar so it reads as "working". */
.cmdprog .cp-bar.indet > i { position: relative; }
.cmdprog .cp-bar.indet > i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation: cpsheen 1.1s ease-in-out infinite; }
@keyframes cpsheen { 0% { transform: translateX(-100%); } 100% { transform: translateX(200%); } }
.cmdprog .cp-meta { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmdprog .cp-note { margin-top: 8px; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Package editor (Intune app builder) */
.pkgform .frow { display: flex; gap: 10px; flex-wrap: wrap; }
.pkgform .fld { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 130px; margin-top: 8px; }
.pkgform .fld > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.pkgform input, .pkgform select, .pkgform textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--input-border); border-radius: var(--radius-ctrl); background: #fff; color: var(--text); width: 100%; }
.pkgform textarea { width: 100%; resize: vertical; }
.pkgform .codebox { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; background: #0F2233; color: #D7E7F4; border-color: #0F2233; direction: ltr; text-align: left; white-space: pre; overflow-wrap: normal; }
.pkgform .hint { font-size: 12px; color: var(--muted); margin: 8px 0 4px; }

/* Script / Remediation package editor + Intune guide */
.scriptbox { width: 100%; box-sizing: border-box; min-height: 170px; resize: vertical; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; background: #0F2233; color: #D7E7F4; border: 1px solid #0F2233; border-radius: 8px; padding: 10px 12px; direction: ltr; text-align: left; white-space: pre; }
.pkin { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 6px; font: inherit; background: #fff; color: var(--text); }
.pkfld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pkfld > span { font-size: 12px; color: var(--muted); font-weight: 600; }
.pkfld select, .pkfld input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--input-border); border-radius: 6px; font: inherit; background: #fff; color: var(--text); }
.guidebox { background: var(--tint); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; font-size: 13px; line-height: 1.65; }
.guidebox h3, .guidebox h4, .guidebox h5 { margin: 12px 0 6px; font-size: 14px; font-weight: 700; }
.guidebox h3:first-child { margin-top: 0; }
.guidebox code { background: rgba(15,34,51,.09); padding: 1px 5px; border-radius: 4px; font-family: ui-monospace, monospace; font-size: 12px; direction: ltr; }
.guidebox ul { margin: 6px 0; padding-inline-start: 20px; }
.guidebox li { margin: 3px 0; }
.guidebox p { margin: 6px 0; }
.guidebox blockquote { margin: 8px 0; padding: 8px 12px; background: rgba(245,166,35,.1); border-inline-start: 3px solid #F5A623; border-radius: 6px; }
.guidebox hr { border: 0; border-top: 1px solid var(--border); margin: 12px 0; }
.pkgform .buildbar { padding: 11px 13px; border-radius: 10px; font-size: 13px; font-weight: 600; background: #F0F7FC; border: 1px solid var(--border); margin-bottom: 12px; }
.pkgform .buildbar.ok { background: rgba(78,206,61,.12); border-color: rgba(78,206,61,.4); color: #2E7D22; }
.pkgform .buildbar.warn { background: rgba(245,166,35,.12); border-color: rgba(245,166,35,.4); color: #8A5A00; }
.pkgform .buildbar.muted { color: var(--muted); font-weight: 500; }
.pkgform .buildbar .dlrow { display: flex; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.pkgform .chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pkgform .chip { font: inherit; font-size: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid var(--border2); background: #fff; color: var(--blue-link); cursor: pointer; }
.pkgform .chip:hover { background: #EAF4FC; }
.pkgform .pkgactions { display: flex; gap: 8px; align-items: center; margin: 18px 0 6px; flex-wrap: wrap; }
/* Remote file browser modal */
.fbmodal { width: min(900px, 96vw); height: min(80vh, 720px); }
.fbbar { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.fbbar input { flex: 1; min-width: 160px; font: inherit; padding: 7px 10px; border: 1px solid var(--input-border); border-radius: var(--radius-ctrl); }
.fbbar #fbpath { direction: ltr; text-align: left; }
.fbdrives { display: flex; gap: 6px; padding: 8px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; background: #F7FBFE; }
.fbdrive { font: inherit; font-size: 12px; padding: 5px 10px; border: 1px solid var(--border2); background: #fff; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.fbdrive:hover { background: #EAF4FC; }
.fbbody { padding: 10px 16px; overflow: auto; flex: 1; }
.fbcrumbs { direction: ltr; text-align: left; font-size: 13px; margin-bottom: 6px; word-break: break-all; }
.fbcrumb { color: var(--blue-link); cursor: pointer; } .fbcrumb:hover { text-decoration: underline; }
.fbsep { color: var(--muted); margin: 0 2px; }
.fbstat { font-size: 12px; color: var(--muted); margin-bottom: 8px; display: flex; align-items: center; }
.fbtable { width: 100%; }
.fbtable td { padding: 5px 8px; border-bottom: 1px solid var(--border); font-size: 13px; vertical-align: middle; }
.fbtable td:first-child { display: flex; align-items: center; gap: 7px; }
.fbtable svg { flex: none; }
.fbtable tr.fbdir { cursor: pointer; } .fbtable tr.fbdir:hover { background: #EAF4FC; }
.fbtable td:last-child { text-align: end; width: 40px; }
.fbdl { border: 1px solid var(--border2); background: #fff; color: var(--blue-link); width: 28px; height: 26px; border-radius: var(--radius-ctrl); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.fbdl:hover { background: #EAF4FC; }
.fbdl svg { width: 15px; height: 15px; }
.fbtable tr[data-path] { cursor: pointer; } .fbtable tr[data-path]:hover { background: #EAF4FC; }

/* Fixed upload-progress cards (visible regardless of view) */
#upstack { position: fixed; bottom: 18px; inset-inline-start: 18px; z-index: 300; display: flex; flex-direction: column; gap: 10px; width: min(380px, calc(100vw - 36px)); }
.upcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 12px 14px; }
.upcard .cp-top { display: flex; justify-content: space-between; align-items: baseline; }
.upcard .cp-stage { font-weight: 700; font-size: 13px; color: var(--text); }
.upcard .cp-pct { font-weight: 700; font-size: 13px; color: var(--blue-link); font-variant-numeric: tabular-nums; }
.upcard .cp-bar { position: relative; height: 8px; border-radius: 6px; background: #E3EEF7; overflow: hidden; margin: 8px 0 7px; }
.upcard .cp-bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg,var(--blue-link),#38C6F0); transition: width .3s ease; }
.upcard .cp-bar.done > i { background: var(--green); }
.upcard .cp-bar.err > i { background: var(--danger); }
.upcard .cp-bar.indet > i { position: relative; }
.upcard .cp-bar.indet > i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); animation: cpsheen 1.1s ease-in-out infinite; }
.upcard .cp-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.upcard .cp-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 55%; }
.upcard .upx { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; border-radius: 4px; }
.upcard .upx:hover { color: var(--danger); background: rgba(255,21,31,.08); }

.pkgform .extras { display: flex; flex-direction: column; gap: 4px; }
.pkgform .extra-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #F7FBFE; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }
.pkgform .extra-row > .mono { flex: 1; word-break: break-all; }
.pkgform .extra-row .gf-copy { width: 24px; height: 24px; color: var(--danger); border-color: var(--border2); }

/* Endpoint view toggle + groups (folders) */
.viewtoggle { display: inline-flex; border: 1px solid var(--border2); border-radius: 9px; overflow: hidden; background: #fff; }
.viewtoggle button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.viewtoggle button.active { background: var(--blue-link); color: #fff; }
.viewtoggle button:not(.active):hover { background: #EAF4FC; color: var(--text); }
.viewtoggle svg { width: 16px; height: 16px; }
.groupsec { margin-bottom: 14px; }
/* Nested folders: indent a sub-folder (and its table) under its parent, with a guide line. */
.groupsec[style*="--depth"] { margin-inline-start: calc(var(--depth, 0) * 22px); }
.groupsec[style*="--depth"]:not([style*="--depth:0"]) { border-inline-start: 2px solid var(--border2); padding-inline-start: 8px; }
/* Country-flag icons (real images — Windows can't render emoji flags) */
.gflag { height: 15px; width: auto; border-radius: 2px; vertical-align: -3px; box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.grouphead .gh-ic .gflag { height: 18px; vertical-align: -4px; }
.gmove .gflag { height: 16px; }
.gic-flag { display: inline-flex; align-items: center; justify-content: center; padding: 0; overflow: hidden; }
.gic-flag img { height: 22px; width: auto; border-radius: 2px; display: block; }
.grouphead { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: #EAF2F9; border: 1px solid var(--border2); border-radius: 10px 10px 0 0; cursor: pointer; user-select: none; font-weight: 700; color: var(--text); }
.grouphead.collapsed { border-radius: 10px; }
.grouphead.droptarget { background: #D6EAFB; outline: 2px dashed var(--blue-link); outline-offset: -2px; }
.grouphead .gh-caret { color: var(--muted); width: 12px; }
.grouphead .gh-name { font-size: 14px; }
.grouphead .gh-count { font-size: 12px; color: var(--muted); font-weight: 500; }
.grouphead svg { width: 16px; height: 16px; flex: none; }
.gh-btn { border: 0; background: none; cursor: pointer; font-size: 13px; color: var(--muted); padding: 2px 5px; border-radius: 5px; }
.gh-btn:hover { background: rgba(0,0,0,.06); color: var(--text); }
.groupsec .card { border-top-left-radius: 0; border-top-right-radius: 0; }
.grp-select { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--input-border); border-radius: var(--radius-ctrl); background: #fff; color: var(--text); max-width: 150px; }
tr[data-id] { cursor: pointer; }
tr.dragging { opacity: .5; }

/* Intune read-only view tabs */
#itabs { display: flex; gap: 4px; margin: 0 0 14px; border-bottom: 1px solid var(--border); }
#itabs button { background: none; border: 0; padding: 10px 16px; font: inherit; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
#itabs button.active { color: var(--blue-link); border-bottom-color: var(--blue-link); }
#itabs button:hover { color: var(--text); }

/* Deployment-guide modal (full Intune Win32 form walkthrough) */
.modal-backdrop { position: fixed; inset: 0; background: rgba(20,40,60,.45); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 24px; }
.modal { background: #fff; width: min(760px, 96vw); max-height: 90vh; border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.3); display: flex; flex-direction: column; overflow: hidden; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-head h2 { font-size: 17px; color: var(--blue); display: flex; align-items: center; gap: 8px; }
.modal-sub { padding: 12px 20px; font-size: 12.5px; color: var(--muted); line-height: 1.55; background: #F7FBFE; border-bottom: 1px solid var(--border); }
/* Guide body reads left-to-right (English Intune field names + values). */
.modal-body { padding: 8px 20px 16px; overflow: auto; direction: ltr; text-align: left; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--border); }
.gtab { margin-top: 16px; }
.gt-head { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: var(--text); padding-bottom: 6px; border-bottom: 2px solid var(--blue-link); margin-bottom: 8px; }
.gt-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue-link); color: #fff; font-size: 12px; flex: none; }
.gfield { padding: 8px 0; border-bottom: 1px dashed var(--border); }
.gf-name { font-weight: 600; color: var(--text); font-size: 13px; }
.gf-req { display: inline-block; margin-inline-start: 8px; font-size: 10px; font-weight: 700; color: var(--danger); background: rgba(255,21,31,.1); border-radius: 4px; padding: 1px 6px; }
.gf-valrow { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.gf-val { font-size: 13px; color: #0B5C93; background: #EAF4FC; border: 1px solid var(--border2); border-radius: 6px; padding: 5px 9px; }
.gf-val.mono { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.gf-copy { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 1px solid var(--border2); background: #fff; color: var(--blue-link); border-radius: 6px; cursor: pointer; }
.gf-copy:hover { background: #EAF4FC; }
.gf-copy.copied { color: var(--green); border-color: var(--green); }
.gf-hint { margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.45; unicode-bidi: plaintext; }

/* ── Login gate ── */
.login { position: fixed; inset: 0; background: var(--bg); display: grid; place-items: center; z-index: 50; }
.login .box { background: #fff; border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.12); width: 380px; padding: 30px; text-align: center; }
.login .brand { font-size: 24px; margin-bottom: 6px; color: var(--blue); }
.login .brand b { font-weight: 800; }
.login .brand span { font-weight: 300; }
.login input { width: 100%; height: 42px; border: 1px solid var(--input-border); border-radius: var(--radius-ctrl); padding-inline: 14px; font-size: 15px; margin: 16px 0 12px; }
.login .btn { width: 100%; justify-content: center; }
.login .err { color: var(--danger); font-size: 13px; min-height: 18px; margin-top: 10px; }
.btn-ms { background: #fff; color: #3F536E; border: 1px solid var(--border2); }
.btn-ms:hover { background: #F7FBFE; }
.linklike { background: none; border: 0; color: var(--blue-link); cursor: pointer; font-size: 13px; margin-top: 12px; font-family: inherit; }
.hidden { display: none !important; }
.toast { position: fixed; inset-block-end: 24px; inset-inline-start: 24px; background: var(--text); color: #fff; padding: 12px 18px; border-radius: 8px; box-shadow: var(--shadow); z-index: 60; font-size: 14px; }

/* ── Remote Access viewer (remote desktop + control) ── */
.rv-backdrop { align-items: stretch; justify-content: stretch; padding: 0; }
.rv { display: flex; flex-direction: column; width: 100%; height: 100%; background: #0f1720; }
.rv-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 14px; background: #0079C4; color: #fff; flex-wrap: wrap; }
.rv-title { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.rv-title svg { stroke: #fff; }
.rv-state { opacity: .85; font-size: 13px; font-weight: 400; }
.rv-presence { font-size: 12px; font-weight: 600; color: #fff; background: #7c3aed; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.rv-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rv-seg { display: inline-flex; border: 1px solid rgba(255,255,255,.5); border-radius: 6px; overflow: hidden; }
.rv-seg button { background: transparent; color: #fff; border: 0; padding: 6px 12px; cursor: pointer; font-size: 13px; font-family: inherit; }
.rv-seg button.on { background: #fff; color: #0079C4; font-weight: 600; }
.rv-slider { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #eaf4fb; }
.rv-slider input { width: 90px; accent-color: #fff; }
.rv-sel { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 6px; padding: 5px 8px; font-size: 12px; font-family: inherit; }
.rv-sel option { color: #16323f; }
.rv-stat { font-size: 12px; color: #cfe6f6; font-variant-numeric: tabular-nums; min-width: 150px; text-align: center; }
.rv-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: auto; background: #0b1118; }
.rv-stage:fullscreen { background: #000; }
/* Clean connecting overlay (animated loading bar) shown until the first frame paints. */
.rv-loading { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: radial-gradient(130% 130% at 50% 28%, #133b5c, #0b1f33 55%, #07141f 100%); transition: opacity .35s ease; }
.rv-loading.hide { opacity: 0; pointer-events: none; visibility: hidden; }
.rvl-card { text-align: center; color: #e8f1fb; width: 320px; max-width: 82%; padding: 20px; }
.rvl-ring { width: 66px; height: 66px; margin: 0 auto 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #bfe0f7; position: relative; }
.rvl-ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: #0A8AE0; border-right-color: #4ECE3D; animation: rvl-spin .9s linear infinite; }
@keyframes rvl-spin { to { transform: rotate(360deg); } }
.rvl-title { font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.rvl-host { font-size: 13px; color: #8fb6cc; margin-top: 4px; direction: ltr; }
.rvl-bar { position: relative; height: 6px; border-radius: 99px; background: rgba(255,255,255,.12); overflow: hidden; margin: 18px 0 9px; }
.rvl-bar i { position: absolute; top: 0; height: 100%; width: 38%; border-radius: 99px; background: linear-gradient(90deg, #0A8AE0, #4ECE3D); animation: rvl-slide 1.25s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes rvl-slide { 0% { inset-inline-start: -40%; } 100% { inset-inline-start: 100%; } }
.rvl-sub { font-size: 12.5px; color: #8fb6cc; min-height: 16px; }
#rvcanvas { max-width: 100%; max-height: 100%; outline: none; cursor: crosshair; box-shadow: 0 0 40px rgba(0,0,0,.6); image-rendering: auto; }
.rv-hint { position: absolute; inset-block-end: 16px; inset-inline-start: 50%; transform: translateX(50%); background: rgba(0,0,0,.6); color: #fff; padding: 8px 16px; border-radius: 20px; font-size: 13px; pointer-events: none; }
.rv-clip { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 300px; background: #16323f; color: #eaf4fb; border: 1px solid #2a5a70; border-radius: 10px; padding: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.5); z-index: 5; }
.rv-clip-h { font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.rv-clip-h .muted { font-weight: 400; font-size: 11px; color: #8fb6cc; }
.rv-clip textarea { width: 100%; height: 90px; resize: vertical; background: #0f242e; color: #eaf4fb; border: 1px solid #2a5a70; border-radius: 6px; padding: 6px; font-size: 12px; font-family: inherit; box-sizing: border-box; }
.rv-clip-actions { display: flex; gap: 6px; margin-top: 6px; }
.rv-clipfiles { margin-top: 8px; border-top: 1px solid #2a5a70; padding-top: 8px; display: flex; flex-direction: column; gap: 5px; max-height: 180px; overflow-y: auto; }
.rv-cf-h { font-size: 12px; color: #8fb6cc; }
.rv-cf-row { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 12px; color: #eaf4fb; }
.rv-cf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-cf-sz { color: #8fb6cc; font-size: 11px; white-space: nowrap; }
.rv-cf-dl { background: #0079C4; color: #fff; border: 0; border-radius: 6px; width: 28px; height: 24px; cursor: pointer; font-size: 13px; }
.rv-cf-dl:hover { background: #0a84ff; }
.rv-chat { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 320px; display: flex; flex-direction: column; max-height: 60%; background: #16323f; color: #eaf4fb; border: 1px solid #2a5a70; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.5); z-index: 6; overflow: hidden; }
.rv-chat-h { display: flex; align-items: center; justify-content: space-between; font-size: 13px; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid #2a5a70; background: #12293440; }
.rv-chat-x { background: none; border: none; color: #8fb6cc; font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; }
.rv-chat-x:hover { color: #eaf4fb; }
.rv-chat-log { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.rv-chat-empty { color: #7ba3ba; font-size: 12px; text-align: center; margin: auto; }
.rv-chat-msg { display: flex; flex-direction: column; gap: 2px; max-width: 85%; }
.rv-chat-msg.me { align-self: flex-start; }
.rv-chat-msg.them { align-self: flex-end; }
.rv-chat-who { font-size: 10px; color: #8fb6cc; padding: 0 2px; }
.rv-chat-txt { background: #0f242e; border: 1px solid #2a5a70; border-radius: 10px; padding: 7px 10px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.rv-chat-msg.me .rv-chat-txt { background: #0079C4; border-color: #0079C4; color: #fff; }
.rv-chat-in { display: flex; gap: 6px; padding: 8px; border-top: 1px solid #2a5a70; }
.rv-chat-in input { flex: 1; background: #0f242e; color: #eaf4fb; border: 1px solid #2a5a70; border-radius: 8px; padding: 7px 10px; font-size: 13px; font-family: inherit; box-sizing: border-box; }
@media (max-width: 720px) { .rv-chat { inset: auto 8px 8px 8px; width: auto; max-height: 55%; } }
/* ── Drag-and-drop file upload ── */
.rv-drop { position: absolute; inset: 0; z-index: 14; display: none; align-items: center; justify-content: center; background: rgba(11,25,36,.55); backdrop-filter: blur(2px); pointer-events: none; }
.rv-drop-box { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 40px; border: 3px dashed #57b7f0; border-radius: 18px; background: rgba(27,43,59,.92); color: #eaf4fb; font-size: 16px; font-weight: 600; box-shadow: 0 18px 60px -12px rgba(0,0,0,.7); text-align: center; max-width: 80%; }
.rv-drop-ic { font-size: 40px; line-height: 1; color: #57b7f0; animation: rvdropb 1.1s ease-in-out infinite; }
@keyframes rvdropb { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
.rv-uploads { position: absolute; inset-block-end: 12px; inset-inline-start: 12px; width: 300px; max-width: 70%; display: flex; flex-direction: column; gap: 6px; z-index: 12; }
.rv-up-row { background: #1B2B3B; border: 1px solid #2c4055; border-radius: 10px; padding: 8px 10px; color: #eaf4fb; font-size: 12px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); display: grid; grid-template-columns: 1fr auto; gap: 3px 8px; align-items: center; }
.rv-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rv-up-meta { color: #8fb6cc; font-size: 11px; white-space: nowrap; }
.rv-up-bar { grid-column: 1 / -1; height: 4px; background: #0f242e; border-radius: 3px; overflow: hidden; }
.rv-up-bar i { display: block; height: 100%; width: 0; background: #0079C4; transition: width .15s; }
.rv-up-row.done .rv-up-bar i { background: #34c759; } .rv-up-row.done .rv-up-meta { color: #34c759; }
.rv-up-row.err .rv-up-bar i { background: #ff453a; } .rv-up-row.err .rv-up-meta { color: #ff6961; }
@media (max-width: 720px) { .rv-uploads { inset-inline: 8px; width: auto; max-width: none; } }
.rhtbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.rhtbl th, .rhtbl td { text-align: start; padding: 7px 8px; border-bottom: 1px solid var(--line, #E9EEF3); }
.rhtbl th { color: var(--muted, #6B7B8C); font-weight: 600; font-size: 12px; }
.rhtbl .empty { text-align: center; color: var(--muted, #6B7B8C); padding: 18px; }

/* ── Agent Intune deploy guide ── */
.ghi { background: #FFF7E6; border: 1px solid #F5C36B; color: #7A5B12; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
.gstep { border: 1px solid var(--line, #E9EEF3); border-radius: 8px; padding: 10px 12px; margin: 8px 0; }
.gstep-h { font-weight: 600; font-size: 14px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.gstep-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--blue, #0079C4); color: #fff; font-size: 12px; }
.gstep-t { font-size: 13px; color: var(--text, #16323f); margin-bottom: 4px; }
.gkv { display: flex; align-items: baseline; gap: 8px; font-size: 13px; padding: 3px 0; flex-wrap: wrap; }
.gkv .gk { color: var(--muted, #6B7B8C); min-width: 210px; }
.gkv .gv { font-weight: 600; font-family: monospace; }
.gkv .ghint { color: var(--muted, #6B7B8C); font-size: 12px; }
.gnote { background: #F4F8FB; border-radius: 8px; padding: 9px 12px; font-size: 12.5px; margin-top: 8px; color: #274; }
.gnote.gok { background: #EAF7EE; color: #1B6B33; }

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN ELEVATION v2 — "Administrator · Bright" (Figma) premium pass
   Refines the base above: airier type, layered cards, KPI stat widgets,
   avatar identity, refined tables/top-bar/detail — cohesive & modern.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  --shadow-card: 0 1px 2px rgba(20,45,70,.05), 0 8px 24px -12px rgba(20,45,70,.18);
  --shadow-pop:  0 12px 40px -8px rgba(20,45,70,.28);
  --tint: #F4F9FD;      /* faint blue wash */
  --tint2: #EAF4FC;     /* active/selected wash */
}

/* Smoother global feel + refined scrollbars */
* { -webkit-tap-highlight-color: transparent; }
.content, .sidebar, .detail, .modal-body, .fbbody, .dbody { scrollbar-width: thin; scrollbar-color: #C7D9E8 transparent; }
.content::-webkit-scrollbar, .sidebar::-webkit-scrollbar, .detail::-webkit-scrollbar { width: 9px; height: 9px; }
.content::-webkit-scrollbar-thumb, .sidebar::-webkit-scrollbar-thumb, .detail::-webkit-scrollbar-thumb { background: #CBDBE9; border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
.content::-webkit-scrollbar-thumb:hover { background: #AEC6DA; background-clip: content-box; }
:focus-visible { outline: 2px solid var(--blue-link); outline-offset: 2px; border-radius: 4px; }

/* Top bar — subtle depth + gradient, crisper controls */
.topbar { height: 62px; background: linear-gradient(180deg, #0086D6, var(--blue)); box-shadow: 0 2px 10px rgba(0,74,124,.25); gap: 22px; }
.topbar .logo { font-size: 21px; }
.topbar .search { height: 38px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); border-radius: 8px; transition: background .15s, border-color .15s; }
.topbar .search:focus-within { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.5); }
.topbar .avatar { border-radius: 10px; background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.topbar .logout { padding: 7px 12px; border-radius: 7px; transition: background .15s; }
.topbar .logout:hover { background: rgba(255,255,255,.14); opacity: 1; }

/* Rail + sidebar — cleaner active states */
.rail .ico { transition: background .15s, color .15s, transform .1s; }
.rail .ico:active { transform: scale(.94); }
.rail .ico.active { background: rgba(255,255,255,.14); box-shadow: inset 2px 0 0 #61C6FF; }
.sidebar { width: 216px; padding-top: 20px; }
.sidebar .nav a { transition: background .14s, color .14s; }
.sidebar .nav a.active { box-shadow: inset 2px 0 0 var(--blue-link); font-weight: 600; }

/* Page header — larger, lighter, more elegant (Figma display heading) */
.content { padding: 28px 34px 40px; }
.content-head { margin-bottom: 20px; gap: 14px; }
.content-head h1 { font-size: 27px; font-weight: 400; letter-spacing: -.01em; color: var(--text); }
.content-head .sub { font-size: 13.5px; margin-top: 3px; line-height: 1.5; max-width: 900px; }
.iconbtn { width: 38px; height: 38px; border-radius: 10px; transition: background .15s, color .15s, border-color .15s; }
.iconbtn:hover { background: var(--tint2); color: var(--blue-link); border-color: var(--border2); }

/* KPI stat widgets — the signature Figma dashboard cards */
.kpirow { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-card); position: relative; overflow: hidden; transition: transform .14s, box-shadow .14s; }
.kpi:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(20,45,70,.06), 0 16px 34px -14px rgba(20,45,70,.28); }
.kpi::after { content: ''; position: absolute; inset-inline-start: 0; inset-block: 0; width: 4px; background: var(--blue-link); opacity: .0; }
.kpi-ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--tint2); color: var(--blue-link); }
.kpi-ic svg { width: 22px; height: 22px; }
.kpi-val { font-size: 27px; font-weight: 700; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 500; }
.kpi.green .kpi-ic { background: rgba(78,206,61,.16); color: #2AA31F; }
.kpi.green .kpi-val { color: #23901A; }
.kpi.muted .kpi-ic { background: rgba(141,171,196,.18); color: #6E8AA3; }
.kpi.danger .kpi-ic { background: rgba(255,21,31,.10); color: var(--danger); }
.kpi.danger .kpi-val { color: var(--danger); }
.kpi.ok .kpi-ic { background: rgba(78,206,61,.16); color: #2AA31F; }

/* Cards — layered soft shadow, larger radius, subtle hover; card header pattern */
.card { border-radius: 12px; box-shadow: var(--shadow-card); }
.card-head { display: flex; align-items: center; gap: 12px; padding: 16px 20px 14px; border-bottom: 1px solid var(--border); }
.card-head .ct { font-size: 15px; font-weight: 700; color: var(--text); }
.card-head .cs { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.card-head .spacer { flex: 1; }

/* Host identity avatar (rows + cards) */
.hostcell { display: flex; align-items: center; gap: 12px; }
.havatar { position: relative; width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .3px; background: linear-gradient(150deg, hsl(var(--ah) 62% 58%), hsl(var(--ah) 58% 46%)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.havatar i.on { position: absolute; inset-block-end: -2px; inset-inline-end: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }

/* Windows license card (device detail) */
.liccard { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow-card); border-inline-start: 3px solid var(--border2); }
.liccard.ok { border-inline-start-color: var(--green); }
.liccard.warn { border-inline-start-color: #F5A623; }
.liccard.error { border-inline-start-color: var(--danger); }
.liccard .lic-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.liccard .kv { padding: 3px 0; }
.lic-warn { font-size: 12px; font-weight: 600; color: var(--danger); }

/* Endpoint name: single (small) line + a quick-copy square button */
.hn-block { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hn-line { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.hn-status { font-size: 11px; font-weight: 600; line-height: 1.2; }
.hn-status.on { color: var(--green); }
.hn-status.off { color: var(--muted); }
.hn-text { font-size: 12.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hn-copy { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 1px solid rgba(127,127,127,.28); border-radius: 6px; background: transparent; color: var(--muted, #8a94a6); cursor: pointer; opacity: .65; }
.hn-copy:hover { opacity: 1; color: var(--blue, #4f6ef7); border-color: var(--blue, #4f6ef7); background: rgba(79,110,247,.08); }
/* Per-row Sync (accelerate Intune installs) — mirrors the copy button, blue accent. */
.hn-sync { color: var(--blue, #4f6ef7); opacity: .8; }
.hn-sync:hover { opacity: 1; background: rgba(79,110,247,.12); }
.hn-sync:disabled { opacity: .5; cursor: default; }
/* Per-endpoint "collect everything" button. */
.hn-collect { color: #7c4dff; opacity: .85; }
.hn-collect:hover { opacity: 1; color: #7c4dff; border-color: #7c4dff; background: rgba(124,77,255,.1); }
.hn-collect:disabled { opacity: .5; cursor: default; }
/* Installed-software search box. */
.sw-search { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--border2, #c5d9e8); border-radius: 10px; margin-bottom: 10px; background: #fff; }
.sw-search svg { flex: none; color: var(--muted, #8a94a6); }
.sw-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: var(--text); }
.sw-search:focus-within { border-color: var(--blue, #4f6ef7); box-shadow: 0 0 0 3px rgba(79,110,247,.12); }
/* Pending / failed Intune-install badge next to the computer name. */
.inst-badge { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 10px; font-size: 11px; font-weight: 700; cursor: pointer; border: 1px solid transparent; line-height: 1; }
.inst-badge.pend { color: #9a6b00; background: rgba(240,170,20,.16); border-color: rgba(240,170,20,.35); }
.inst-badge.fail { color: #b0281f; background: rgba(220,50,40,.14); border-color: rgba(220,50,40,.32); }
.inst-badge:hover { filter: brightness(.96); }
/* Office outdated / update-pending alert in the main endpoints table. */
.office-badge { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 700; cursor: pointer; border: 1px solid transparent; line-height: 1; white-space: nowrap; }
.office-badge.old { color: #9a6b00; background: rgba(240,170,20,.16); border-color: rgba(240,170,20,.4); }
.office-badge.crash { color: #b0281f; background: rgba(220,50,40,.13); border-color: rgba(220,50,40,.38); }
.office-badge:hover { filter: brightness(.96); }
/* Deployment-findings count badge in the main table (coloured by highest severity). */
.find-badge { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 8px; border-radius: 10px; font-size: 11px; font-weight: 700; cursor: pointer; line-height: 1; white-space: nowrap; border: 1px solid transparent; }
.find-badge.err { color: #b0281f; background: rgba(220,50,40,.13); border-color: rgba(220,50,40,.38); }
.find-badge.warn { color: #9a6b00; background: rgba(240,170,20,.18); border-color: rgba(240,170,20,.4); }
.find-badge.info { color: var(--muted, #8a94a6); background: rgba(127,127,127,.14); }
.find-badge:hover { filter: brightness(.96); }
/* Users / sessions — currently-connected highlight. */
.us-cur { display: flex; flex-direction: column; gap: 5px; margin: 6px 0 4px; }
.us-cur-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; background: rgba(40,167,69,.08); border: 1px solid rgba(40,167,69,.25); font-size: 13px; flex-wrap: wrap; }
.us-cur-row .us-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green,#28a745); box-shadow: 0 0 0 3px rgba(40,167,69,.18); }
/* Pending-installs list inside the detail install card. */
.instrows { display: flex; flex-direction: column; gap: 4px; }
.instrow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; background: rgba(127,127,127,.06); }
.instrow .instname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; }

/* Per-endpoint Scheduled Tasks viewer. */
.st-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.st-search { flex: 1; min-width: 180px; padding: 6px 10px; border: 1px solid rgba(127,127,127,.28); border-radius: 8px; background: transparent; color: inherit; font-size: 12px; }
.st-mstoggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted,#8a94a6); cursor: pointer; user-select: none; }
.st-list { display: flex; flex-direction: column; gap: 4px; max-height: 420px; overflow: auto; }
/* flex:0 0 auto so rows keep their natural height and the list SCROLLS — without it,
   a flex column with a max-height shrinks overflow:hidden items to thin stripes. */
.st-item { flex: 0 0 auto; border: 1px solid rgba(127,127,127,.14); border-radius: 8px; overflow: hidden; }
.st-item.ms { opacity: .82; }
.st-row { display: flex; align-items: center; gap: 8px; padding: 6px 9px; cursor: pointer; }
.st-row:hover { background: rgba(79,110,247,.06); }
.st-caret { flex: none; color: var(--muted,#8a94a6); font-size: 10px; width: 10px; }
.st-name { flex: none; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 600; }
.st-custom { font-size: 9px; font-weight: 700; color: var(--blue,#4f6ef7); border: 1px solid rgba(79,110,247,.4); border-radius: 6px; padding: 0 4px; }
.st-cmd { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted,#8a94a6); }
.st-detail { padding: 8px 12px 10px; border-top: 1px dashed rgba(127,127,127,.2); background: rgba(127,127,127,.04); display: flex; flex-direction: column; gap: 4px; }
.st-kv { display: flex; gap: 8px; font-size: 12px; }
.st-kv > span { flex: none; width: 92px; color: var(--muted,#8a94a6); }
.st-kv > b { min-width: 0; word-break: break-word; font-weight: 600; }
.st-cmdbox { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.st-cmdbox code { flex: 1; min-width: 0; padding: 4px 8px; border-radius: 6px; background: rgba(127,127,127,.1); font-size: 11px; word-break: break-all; }
.st-xmlbox { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.st-xmlbox > button { align-self: flex-start; }
.st-xml { margin: 0; max-height: 260px; overflow: auto; padding: 8px; border-radius: 6px; background: rgba(127,127,127,.12); font-size: 10.5px; white-space: pre; }

/* Office Doctor */
.od-vergrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 16px; padding: 10px 12px; border: 1px solid rgba(127,127,127,.16); border-radius: 10px; background: rgba(127,127,127,.04); }
.od-vergrid .od-k { display: block; font-size: 11px; color: var(--muted,#8a94a6); }
.od-vergrid .od-v { display: block; font-weight: 600; font-size: 13px; margin-top: 2px; }
.od-warnbox { margin-top: 10px; padding: 8px 12px; border: 1px solid rgba(240,170,20,.35); background: rgba(240,170,20,.10); border-radius: 8px; font-size: 12.5px; }
.od-warnbox ul { margin: 6px 0 0; padding-inline-start: 18px; }
.od-warnbox .od-err { color: #b0281f; }
.od-block { margin-top: 12px; }
.od-h { font-weight: 700; font-size: 12.5px; margin-bottom: 5px; }
.od-h.err { color: #b0281f; }
.od-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 7px; background: rgba(127,127,127,.05); margin-bottom: 3px; font-size: 12px; }
.od-row.bad { background: rgba(220,50,40,.09); }
.od-row .od-app { flex: none; font-weight: 700; font-size: 10px; min-width: 62px; color: var(--blue,#4f6ef7); }
.od-row .od-app.err { color: #b0281f; }
.od-row .od-an { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.od-row .od-st { flex: none; font-size: 11px; color: var(--muted,#8a94a6); }
.od-row.bad .od-st { color: #b0281f; font-weight: 600; }
.od-recs { margin-top: 12px; padding: 8px 12px; border: 1px solid rgba(79,110,247,.28); background: rgba(79,110,247,.06); border-radius: 8px; font-size: 12.5px; }
.od-recs ul { margin: 6px 0 0; padding-inline-start: 18px; }
.od-recs li { margin-bottom: 3px; }
.od-ok { margin-top: 10px; color: var(--green,#28a745); font-weight: 600; font-size: 13px; }
/* Office fleet view — newest-version-per-channel chips. */
.off-channels { margin: 12px 2px 2px; font-size: 12px; color: var(--muted,#8a94a6); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.off-chip { display: inline-flex; gap: 6px; align-items: center; padding: 3px 10px; border-radius: 12px; background: rgba(79,110,247,.08); border: 1px solid rgba(79,110,247,.2); color: var(--text); }
.off-chip b { color: var(--blue,#4f6ef7); }

/* Real computer product image (from the ticketing system, by serial) over the avatar */
.devwrap { position: relative; width: 68px; height: 68px; flex: none; }
.devwrap .havatar { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 14px; font-size: 22px; }
.devwrap .devimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; border: 1px solid rgba(127,127,127,.16); border-radius: 12px; padding: 3px; }
.devwrap .dot-on { position: absolute; inset-block-end: -1px; inset-inline-end: -1px; width: 13px; height: 13px; border-radius: 50%; background: var(--green); border: 2px solid #fff; z-index: 2; }
/* Device image in the detail header (keep the fallback avatar filling the wrap) */
.dhh .devwrap { width: 96px; height: 96px; }
.dhh .devwrap .havatar { width: 100%; height: 100%; border-radius: 18px; font-size: 28px; }
.dhh .devwrap .devimg { border-radius: 16px; padding: 4px; }

/* ── org-user avatar (initials + optional tordesk photo) + user-pin picker ── */
.uav { position: relative; width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: #fff; letter-spacing: .2px; background: linear-gradient(150deg, hsl(var(--ah) 62% 58%), hsl(var(--ah) 58% 46%)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); background-size: cover; background-position: center; }
.uav.has-img { color: transparent; text-shadow: none; }
.userpick { display: inline-flex; align-items: center; gap: 11px; max-width: 260px; background: transparent; border: 1px solid transparent; border-radius: 11px; padding: 4px 10px 4px 5px; cursor: pointer; color: inherit; font: inherit; text-align: start; }
.userpick:hover { background: var(--hover, rgba(127,127,127,.1)); border-color: rgba(127,127,127,.18); }
.userpick .up-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The pinned (selected) user's photo — shown large so it's clearly identifiable. */
.userpick.assigned .uav { width: 62px; height: 62px; border-radius: 16px; font-size: 21px; }
.userpick.empty { color: var(--muted, #8a94a6); font-size: 12.5px; font-weight: 500; }
.uppanel { position: fixed; z-index: 1000; width: 300px; max-height: 352px; display: flex; flex-direction: column; background: var(--card, #fff); border: 1px solid rgba(127,127,127,.22); border-radius: 12px; box-shadow: 0 16px 40px rgba(0,0,0,.22); overflow: hidden; }
.up-search { padding: 8px; border-bottom: 1px solid rgba(127,127,127,.14); }
.up-search input { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid rgba(127,127,127,.25); border-radius: 8px; font: inherit; background: var(--bg, #f6f7f9); color: inherit; }
.up-list { overflow-y: auto; padding: 4px; }
.up-row { display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.up-row:hover { background: var(--hover, rgba(127,127,127,.1)); }
.up-row.sel { background: rgba(124,58,237,.12); }
.up-row .uav { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
.up-meta { min-width: 0; }
.up-rn { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-re { font-size: 11.5px; color: var(--muted, #8a94a6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Tenant badge in the user picker — tells the two orgs apart at a glance */
.up-tn { display: inline-block; margin-inline-start: 6px; padding: 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .3px; vertical-align: middle; text-transform: uppercase; }
.up-tn-t1 { background: rgba(0,121,196,.12); color: #0079C4; }
.up-tn-t2 { background: rgba(124,58,237,.12); color: #7C3AED; }
.up-clear { color: #c0392b; font-size: 12.5px; font-weight: 600; }
.up-empty { padding: 18px 12px; text-align: center; color: var(--muted, #8a94a6); font-size: 13px; }

/* Tables — refined rhythm + hover */
thead th { font-size: 10.5px; letter-spacing: 1.2px; padding: 14px 20px; background: #FBFDFF; }
tbody td { padding: 13px 20px; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--tint); }
tbody tr.selected { background: var(--tint2); box-shadow: inset 3px 0 0 var(--blue-link); }

/* Pills / severity — a touch more refined */
.pill { padding: 4px 11px; }
.pill.online { color: #1F9E14; background: rgba(78,206,61,.15); }

/* Buttons — primary gets a soft blue glow, unified easing */
.btn { transition: filter .12s, box-shadow .15s, transform .06s; }
.btn:active { transform: translateY(1px); }
.btn-blue { box-shadow: none; }
.btn-blue:hover { box-shadow: none; filter: none; background: #0A8AE0; }
.btn-green { box-shadow: none; }

/* Deploy hero — premium wash + accent edge */
.card.deploy { background: linear-gradient(180deg, #FBFDFF, #fff); border-inline-start: 3px solid var(--blue-link); }
.deploy .t { font-size: 16.5px; }

/* View toggle — pill-segment refinement */
.viewtoggle { border-radius: 10px; box-shadow: var(--shadow-card); }
.viewtoggle button.active { box-shadow: none; }

/* Detail panel — refined header + tabs */
.detail { width: 388px; box-shadow: -8px 0 30px -20px rgba(20,45,70,.4); }
.detail .dhead { padding: 20px 22px 18px; background: linear-gradient(180deg, var(--tint), #fff); }
.detail .dhead h2 { font-size: 18px; font-weight: 700; }
.detail .tabs button { transition: color .14s, border-color .14s; font-size: 13.5px; }
.detail .tabs button:hover { color: var(--text); }
.kv { padding: 10px 0; }

/* Cards inside the shell breathe a bit more */
.content > .card { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN ELEVATION v3 — polish the remaining screens (login, empty states,
   packages, findings, guides, modals, detail internals) to the same bar.
   ══════════════════════════════════════════════════════════════════════════ */

/* Login gate — a proper branded first impression */
.login { background: radial-gradient(1200px 600px at 70% -10%, #0086D6 0%, #ECF5FD 42%), var(--bg); }
.login .box { width: 400px; padding: 36px 34px; border-radius: 16px; border: 1px solid var(--border); box-shadow: 0 24px 70px -20px rgba(20,45,70,.4); }
.login .brand { font-size: 27px; margin-bottom: 4px; }
.login .box::before { content: ''; display: block; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 15px; background: linear-gradient(150deg, #0A8AE0, var(--blue)); box-shadow: 0 10px 24px -8px rgba(0,120,196,.7); -webkit-mask: url('/favicon.svg') center/30px no-repeat; mask: url('/favicon.svg') center/30px no-repeat; background-clip: padding-box; }
.login input { transition: border-color .15s, box-shadow .15s; }
.login input:focus { border-color: var(--blue-link); box-shadow: 0 0 0 3px rgba(0,147,238,.15); outline: none; }

/* Empty states — centered, roomy, quietly branded (used across every view) */
.empty { padding: 46px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 14px; }
td .empty, .kv .empty { display: inline; padding: 40px 24px; }

/* Package / generic identity chip (mirrors the endpoint avatar) */
.pkgicon { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, #7C4DFF, #5B32D6); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.pkgicon svg { width: 19px; height: 19px; }
.hostcell.hc-sm .havatar { width: 28px; height: 28px; border-radius: 8px; font-size: 11px; }
.hostcell.hc-sm { gap: 9px; }

/* Finding cards (detail panel) — refined, severity-tinted left edge */
.finding { border-radius: 10px; padding: 13px 15px; box-shadow: var(--shadow-card); border-color: var(--border); }
.finding::before { display: none; }
.finding h4 { font-weight: 700; }

/* Deploy guide steps + notes — crisper */
.gstep { border-radius: 10px; box-shadow: var(--shadow-card); border-color: var(--border); transition: box-shadow .15s; }
.gstep:hover { box-shadow: var(--shadow-pop); }
.gstep-n { box-shadow: 0 4px 10px -4px rgba(0,120,196,.8); }
.gnote { border: 1px solid var(--border); }

/* Live-progress + code surfaces */
.cmdprog { border-radius: 12px; box-shadow: var(--shadow-card); }
.pkgform .codebox, .modal-body pre { border-radius: 10px; }
.pkgform input:focus, .pkgform select:focus, .pkgform textarea:focus, .fbbar input:focus { border-color: var(--blue-link); box-shadow: 0 0 0 3px rgba(0,147,238,.13); outline: none; }

/* Modals — deeper elevation, rounded, refined header */
.modal { border-radius: 16px; box-shadow: 0 30px 80px -20px rgba(20,45,70,.55); }
.modal-head { padding: 18px 22px; background: linear-gradient(180deg, var(--tint), #fff); }
.modal-head h2 { font-size: 18px; }
.gf-val { border-radius: 7px; }

/* Intune read-only tabs — segmented, consistent with the app */
#itabs, .detail .tabs { gap: 2px; }
#itabs button.active { background: var(--tint2); border-radius: 8px 8px 0 0; }

/* KV rows a touch more legible */
.kv .v { font-weight: 600; }
.kv:last-child { border-bottom: 0; }

/* Detail action buttons wrap nicely */
.dbody .btn { margin: 2px 0; }

/* Remote viewer bar — match the elevated top bar (gradient + depth) */
.rv-bar { background: linear-gradient(180deg, #0086D6, #0079C4); box-shadow: 0 2px 10px rgba(0,74,124,.3); }
.rv-seg button.on { font-weight: 700; }

/* Toast — softer, elevated */
.toast { border-radius: 10px; box-shadow: 0 14px 40px -10px rgba(20,45,70,.5); padding: 13px 18px; }

/* Sidebar status legend dots a touch bigger */
.sidebar .nav a .dot { width: 9px; height: 9px; }

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN ELEVATION v4 — detail panel (device profile) refinement
   ══════════════════════════════════════════════════════════════════════════ */

/* ============================================================
   Endpoint-detail card HEADER (redesigned) — three-zone hero row:
   device thumb | hostname + meta | assigned user. Scope: .detail .dhead.
   RTL-correct (logical props) · light + dark safe (CSS vars only).
   Figma "Administrator - Bright": Heebo, userpic 48/r12, outlined Tags r100.
   ============================================================ */
.detail .dhead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, var(--tint), transparent);
  font-family: "Heebo", system-ui, -apple-system, sans-serif;
}
/* Zone 1+2 wrapper: device + content, flexes to fill */
.detail .dhead .dhh { display: flex; align-items: center; gap: 16px; flex: 1 1 auto; min-width: 0; padding-inline-end: 34px; }
/* old vertical id-column unwrapped so device sits inline with the title */
.detail .dhead .dhh-idcol { display: contents; }
/* Zone 1 — device thumbnail (56px, supporting) */
.detail .dhead .devwrap { position: relative; width: 56px; height: 56px; flex: none; }
.detail .dhead .devwrap .havatar { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 12px; font-size: 18px; font-weight: 700; letter-spacing: .3px; display: grid; place-items: center; color: #fff; background: linear-gradient(150deg, hsl(var(--ah) 62% 58%), hsl(var(--ah) 58% 46%)); }
.detail .dhead .devwrap .devimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 5px; }
.detail .dhead .devwrap .dot-on { position: absolute; inset-block-end: -2px; inset-inline-end: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--green); border: 2.5px solid var(--tint); z-index: 2; }
/* Zone 2 — content column: hostname (hero) -> meta */
.detail .dhead .dhh-t { display: flex; flex-direction: column; gap: 9px; flex: 1 1 auto; min-width: 0; }
.detail .dhead .dhh-title { display: flex; align-items: flex-start; gap: 6px; min-width: 0; max-width: none; }
.detail .dhead .dhh-title h2 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.22; letter-spacing: -.01em; color: var(--text); min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; }
.detail .dhead .hn-copy { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-block-start: 1px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; transition: opacity .15s ease, background-color .15s ease, color .15s ease; }
.detail .dhead .hn-copy svg { width: 15px; height: 15px; display: block; }
.detail .dhead:hover .hn-copy, .detail .dhead .hn-copy:hover, .detail .dhead .hn-copy:focus-visible { opacity: 1; }
.detail .dhead .hn-copy:hover, .detail .dhead .hn-copy:focus-visible { background: var(--tint); color: var(--blue); }
.detail .dhead .hn-copy:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring, var(--blue)); }
/* line 2 — meta: status pill + IP + device type, as Figma outlined Tags */
.detail .dhead .dhh-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; font-size: 13px; color: var(--muted); }
.detail .dhead .dhh-chip { display: inline-flex; align-items: center; height: 25px; padding: 0 10px; border: 1px solid color-mix(in srgb, var(--text) 24%, transparent); border-radius: 100px; background: transparent; font-size: 13px; font-weight: 500; line-height: 1; color: color-mix(in srgb, var(--text) 78%, transparent); white-space: nowrap; }
.detail .dhead .dhh-chip.mono { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; letter-spacing: -.02em; color: var(--blue); border-color: color-mix(in srgb, var(--blue) 42%, var(--border)); background: color-mix(in srgb, var(--blue) 7%, transparent); }
.detail .dhead .pill { display: inline-flex; align-items: center; gap: 6px; height: 25px; padding: 0 11px; border-radius: 100px; border: 1px solid transparent; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.detail .dhead .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.detail .dhead .pill.online  { color: var(--st-ok-fg);   background: var(--st-ok-bg);   border-color: var(--st-ok-bd); }
.detail .dhead .pill.offline { color: var(--st-mute-fg); background: var(--st-mute-bg); border-color: var(--st-mute-bd); }
.detail .dhead .pill.revoked { color: var(--st-dngr-fg); background: var(--st-dngr-bg); border-color: var(--st-dngr-bd); }
.detail .dhead .dhh-actions { display: flex; gap: 8px; margin-block-start: 2px; }
/* Zone 3 — assigned user (inline-end, own zone via divider) */
.detail .dhead .dhh-user { display: flex; align-items: center; gap: 11px; flex: none; min-width: 0; max-width: 230px; margin: 0; margin-inline-start: auto; padding-inline-start: 20px; border-inline-start: 1px solid var(--border); }
.detail .dhead .dhh-user .uav { position: relative; width: 48px; height: 48px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 17px; font-weight: 700; color: #fff; background: linear-gradient(150deg, hsl(var(--ah) 62% 58%), hsl(var(--ah) 58% 46%)); background-size: cover; background-position: center; box-shadow: 0 0 0 1px var(--border) inset; }
.detail .dhead .dhh-user .uav.has-img { color: transparent; }
.detail .dhead .dhh-user-lines { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: start; }
.detail .dhead .dhh-user-cap { font-size: 10.5px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; line-height: 1; color: var(--muted); }
.detail .dhead .dhh-user-name { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.detail .dhead .dhh-user-mail { font-size: 12px; font-weight: 400; line-height: 1.2; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; direction: ltr; text-align: start; }
/* close button — corner-pinned, out of flow (keeps lanes aligned) */
.detail .dhead .close { position: absolute; inset-block-start: 14px; inset-inline-end: 14px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.detail .dhead .close:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.detail .dhead .close:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring, var(--blue)); }
@media (max-width: 380px) {
  .detail .dhead { flex-wrap: wrap; gap: 14px; padding: 16px 16px; }
  .detail .dhead .dhh { flex: 1 1 100%; gap: 14px; padding-inline-end: 34px; }
  .detail .dhead .devwrap { width: 52px; height: 52px; }
  .detail .dhead .devwrap .havatar { font-size: 17px; }
  .detail .dhead .dhh-title h2 { font-size: 17px; }
  .detail .dhead .dhh-user { flex: 1 1 100%; max-width: none; margin-inline-start: 0; padding-inline-start: 0; padding-block-start: 14px; border-inline-start: 0; border-block-start: 1px solid var(--border); }
  .detail .dhead .close { inset-block-start: 12px; inset-inline-end: 12px; }
}

/* Section labels inside the panel — consistent uppercase muted */
.dbody .label { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 700; }

/* KV rows — quieter dividers, aligned values */
.dbody .kv { padding: 11px 0; border-color: var(--border); }
.dbody .kv .k { font-size: 13px; }
.dbody .kv .v { font-size: 13.5px; }

/* Agent-health mini stat bar (replaces the long KV line) */
.healthbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; padding: 13px; background: var(--tint); border: 1px solid var(--border); border-radius: 12px; }
.healthbar .hm { text-align: center; min-width: 0; }
.healthbar .hm-v { display: block; font-size: 15px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.healthbar .hm-v.good { color: #2AA31F; }
.healthbar .hm-v.bad { color: var(--danger); }
.healthbar .hm-l { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }

/* ── Detail action tiers — uniform 2-col grid, aligned edges, RTL-safe ──────── */
.dgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dgrid .btn { width: 100%; }
/* An odd trailing button spans the full row so the bottom edge never goes ragged */
.dgrid .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* Tier 1 — primary actions (prominent, with icons) */
.dgrid-primary { margin-bottom: 8px; }
.dgrid-primary .btn { height: 40px; font-weight: 600; }
.dgrid-primary .btn svg { width: 16px; height: 16px; }

/* Tier 2 — secondary/diagnostic actions: soft filled, clearly a control (higher
   contrast than the old ghost), consistent light/dark, text-only for a calm grid */
.btn-soft { background: var(--tint2); color: var(--text); border: 1px solid var(--border2); font-weight: 500; }
.btn-soft:hover { background: #fff; border-color: var(--blue-link); color: var(--blue-link); }
.btn-soft:active { filter: brightness(.97); }

/* Tier 3 — destructive: fenced off on its own full-width row so it can't be hit by
   accident; escalates to solid red on hover */
.ddanger { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border2); }
.ddanger .btn-danger { width: 100%; height: 38px; gap: 7px; background: rgba(255,21,31,.05); border: 1px solid rgba(255,21,31,.35); font-weight: 600; }
.ddanger .btn-danger svg { width: 15px; height: 15px; }
.ddanger .btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Windows Autopilot actions: same uniform 2-col grid as every other tier (at least
   two buttons per row). Destructive buttons keep the red escalation; labels wrap so
   longer captions never overflow the narrower grid cells. */
.dgrid-ap { margin-top: 10px; }
.dgrid-ap .btn { height: auto; min-height: 40px; padding: 9px 12px; white-space: normal; line-height: 1.2; text-align: center; }
.dgrid-ap .btn-danger { gap: 7px; background: rgba(255,21,31,.05); border: 1px solid rgba(255,21,31,.35); font-weight: 600; }
.dgrid-ap .btn-danger svg { width: 15px; height: 15px; flex: 0 0 auto; }
.dgrid-ap .btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
/* The fenced revoke, when laid out as a grid, keeps the danger separator spacing */
.ddanger.dgrid { margin-top: 16px; }

/* Narrow panel / mobile — collapse to a single readable column */
@media (max-width: 380px) { .dgrid { grid-template-columns: 1fr; } }

/* Tables inside the panel (printers / policy / activity) — compact + tidy */
.dbody table { font-size: 12.5px; }
.dbody table th { padding: 8px 8px; background: transparent; }
.dbody table td { padding: 7px 8px; }
.dbody details > summary { padding: 4px 0; }

/* Result/diagnostic blocks breathe */
.dbody .label + div { margin-bottom: 2px; }

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN ELEVATION v5 — MOBILE-FIRST responsive + drawer + tab-content polish
   ══════════════════════════════════════════════════════════════════════════ */

/* Hamburger (mobile only) + nav backdrop */
.hamburger { display: none; width: 40px; height: 40px; border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; place-items: center; flex: none; transition: background .15s; }
.hamburger:hover { background: rgba(255,255,255,.22); }
.nav-backdrop { display: none; }

/* Sidebar nav buttons — bigger tap targets + icon sizing (drawer-ready) */
.sidebar .nav a { padding: 11px 13px; }
.sidebar .nav a svg { width: 18px; height: 18px; flex: none; opacity: .9; }
.sidebar .nav a.active svg { opacity: 1; }

/* In-panel (tab) tables — unified, scrollable, tidy header (printers / policy) */
.dbody table thead tr { color: var(--muted); }
.dbody table th { font-size: 10.5px !important; letter-spacing: .8px; text-transform: uppercase; font-weight: 700; border-bottom: 1px solid var(--border); }
.dbody table td { border-bottom: 1px solid var(--border) !important; vertical-align: middle; }
.dbody table tr:last-child td { border-bottom: 0 !important; }
.dbody > div[style*="overflow"] { border: 1px solid var(--border); border-radius: 10px; background: #fff; padding: 2px 4px; box-shadow: var(--shadow-card); margin-top: 2px; }
.dbody details { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin: 4px 0 !important; background: #fff; }
.dbody details[open] { box-shadow: var(--shadow-card); }
.dbody details summary { list-style: none; }
.dbody details summary::-webkit-details-marker { display: none; }

/* ── Tablet / mobile (≤900px): rail+sidebar become an off-canvas drawer ── */
@media (max-width: 900px) {
  .hamburger { display: grid; }
  .topbar { height: 56px; gap: 12px; padding-inline: 14px; }
  .topbar .logo { font-size: 19px; }
  .shell { inset-block-start: 56px; }

  .rail { display: none; }                    /* the drawer carries the nav */
  .sidebar {
    position: fixed; inset-block: 56px 0; inset-inline-start: 0; width: min(280px, 82vw);
    transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
    z-index: 47; box-shadow: -12px 0 40px -12px rgba(20,45,70,.5); border-inline-start: 0;
  }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-backdrop { display: block; position: fixed; inset: 56px 0 0; background: rgba(20,45,70,.42); opacity: 0; pointer-events: none; transition: opacity .26s; z-index: 46; }
  body.nav-open .nav-backdrop { opacity: 1; pointer-events: auto; }

  .content { padding: 18px 16px 32px; }
  .content-head h1 { font-size: 22px; }
  .kpirow { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  /* Detail panel becomes a full-screen sheet */
  .detail.open, .detail.open.full { position: fixed; inset: 56px 0 0; width: 100%; z-index: 45; border-inline-end: 0; box-shadow: none; inset-inline-start: 0; }

  /* Wide tables scroll horizontally inside their card */
  .content .card { overflow-x: auto; }
  .content .card > table { min-width: 620px; }
  .deploy .row { flex-wrap: wrap; }
  .deploy .row .btn { width: 100%; }
}

/* ── Phone (≤560px): single-column, stacked ── */
@media (max-width: 560px) {
  .topbar .search { display: none; }          /* free space; search lives in the list views */
  .topbar .logout { display: none; }          /* avatar tap remains */
  .kpirow { grid-template-columns: 1fr 1fr; }
  .kpi { padding: 13px 14px; gap: 11px; }
  .kpi-ic { width: 40px; height: 40px; }
  .kpi-val { font-size: 23px; }
  .content-head { flex-wrap: wrap; }
  .content-head .viewtoggle { width: 100%; }
  .viewtoggle button { flex: 1; justify-content: center; }
  .dactions .btn { flex: 1 1 100%; }
  .healthbar { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .modal, .modal-backdrop .modal { width: 100%; max-height: 100vh; border-radius: 0; }
  .modal-backdrop { padding: 0; }
}

/* Larger, comfy tap targets on touch devices */
@media (hover: none) and (pointer: coarse) {
  .sidebar .nav a { padding: 13px 14px; }
  tbody td { padding: 15px 16px; }
  .btn-sm { height: 40px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DESIGN ELEVATION v6 — MOBILE polish for the remaining dense sections
   (remote viewer toolbar, package editor, file browser, deploy guide,
    Intune tabs, upload cards, clipboard panel)
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  /* Remote-viewer toolbar — trim to the essentials so it fits one/two rows.
     Advanced sliders/stat hide (auto-quality covers them); core controls stay. */
  .rv-bar { padding: 7px 10px; gap: 8px; }
  .rv-tools { gap: 8px; width: 100%; justify-content: flex-start; }
  .rv-title { width: 100%; font-size: 14px; }
  .rv-slider:has(input[type="range"]) { display: none; }
  .rv-stat { display: none; }
  .rv-sel { padding: 6px 8px; }
  .rv-seg button { padding: 8px 14px; }
  .rv-bar .btn-sm { height: 38px; }
  /* Shared clipboard panel → full-width sheet at the bottom */
  .rv-clip { inset: auto 8px 8px 8px; width: auto; }

  /* Package editor — fields stack full-width */
  .pkgform .frow { flex-direction: column; gap: 0; }
  .pkgform .fld { min-width: 0; }
  .pkgform .pkgactions { flex-wrap: wrap; }
  .pkgform .pkgactions .btn { flex: 1 1 46%; }

  /* File browser modal → full-screen sheet */
  .fbmodal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .fbbar { gap: 6px; }
  .fbbar .btn { flex: 1 1 auto; }

  /* Deploy-guide fields stack cleanly (LTR body) */
  .gf-valrow { flex-wrap: wrap; }
  .gf-val { max-width: 100%; overflow-wrap: anywhere; }
  .gkv { flex-direction: column; gap: 2px; }
  .gkv .gk { min-width: 0; }
  .modal-foot { flex-wrap: wrap; gap: 8px; }
  .modal-foot .btn { flex: 1 1 auto; }

  /* Intune read-only tabs scroll instead of wrapping */
  #itabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #itabs::-webkit-scrollbar { display: none; }
  #itabs button { white-space: nowrap; flex: none; }

  /* Upload progress cards hug the screen */
  #upstack { inset-inline: 12px auto; inset-block-end: 12px; width: calc(100vw - 24px); }

  /* Remote-session history table scrolls */
  .rhtbl { display: block; overflow-x: auto; white-space: nowrap; }

  /* Guide + generic modal bodies breathe less on tiny screens */
  .modal-body { padding: 8px 14px 14px; }
  .modal-head { padding: 14px 16px; }
  .modal-head h2 { font-size: 16px; }
}

/* Very small phones (≤400px): tighten the KPI + header rhythm further */
@media (max-width: 400px) {
  .kpi-val { font-size: 21px; }
  .kpi-lbl { font-size: 11px; }
  .content-head h1 { font-size: 20px; }
  .havatar { width: 34px; height: 34px; }
  .dhh .havatar { width: 42px; height: 42px; }
}

/* Login box fits narrow phones */
@media (max-width: 440px) {
  .login .box { width: calc(100vw - 26px); padding: 30px 22px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   REMOTE SUPPORT TOOLBAR v7 — enterprise grouped toolbar (View/Actions/Files/
   Capture menus + identity + session timer + connection-quality). Dark dropdown
   panels on the blue bar (matches the Figma dark accent).
   ══════════════════════════════════════════════════════════════════════════ */
.rv-bar { display: flex; align-items: center; gap: 14px; padding: 8px 14px; flex-wrap: wrap; }
.rv-id { display: flex; align-items: center; gap: 10px; min-width: 0; color: #fff; }
.rv-id .rv-host { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; white-space: nowrap; }
.rv-id .rv-host svg { stroke: #fff; width: 18px; height: 18px; }
.rv-id .rv-host b { font-weight: 700; }
.rv-id .rv-state { font-size: 12px; opacity: .8; }
.rv-id .rv-timer { font-variant-numeric: tabular-nums; font-size: 12px; background: rgba(255,255,255,.14); padding: 3px 9px; border-radius: 7px; letter-spacing: .5px; }
.rv-q { width: 10px; height: 10px; border-radius: 50%; background: #9fb6c8; box-shadow: 0 0 0 3px rgba(255,255,255,.12); flex: none; }
.rv-q.good { background: #46E05A; box-shadow: 0 0 0 3px rgba(70,224,90,.25); }
.rv-q.ok { background: #F5B942; box-shadow: 0 0 0 3px rgba(245,185,66,.25); }
.rv-q.poor { background: #FF5A5F; box-shadow: 0 0 0 3px rgba(255,90,95,.25); }

.rv-grp { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.rv-seg { display: inline-flex; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; overflow: hidden; }
.rv-seg button { background: transparent; color: #fff; border: 0; padding: 7px 14px; cursor: pointer; font: inherit; font-size: 13px; transition: background .12s; }
.rv-seg button:hover { background: rgba(255,255,255,.12); }
.rv-seg button.on { background: #fff; color: #0079C4; font-weight: 700; }

.rv-md { position: relative; }
.rv-mb { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 8px 13px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background .12s, border-color .12s; }
.rv-mb:hover { background: rgba(255,255,255,.2); }
.rv-md.open .rv-mb { background: #fff; color: #0079C4; border-color: #fff; }
.rv-annobtn.on { background: #ff3b30; border-color: #ff3b30; color: #fff; }
.rv-mb.on { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.45); }
/* Local-input freeze toggle: amber when armed, dimmed/disabled outside control mode */
.rv-blockinput.on { background: #ff9500; border-color: #ff9500; color: #1b2b3b; }
.rv-blockinput:disabled { opacity: .4; cursor: default; }
.rv-blockinput:disabled:hover { background: rgba(255,255,255,.1); }
/* ── Annotation toolbar (floating, over the video) ── */
.rv-anno-bar { position: absolute; inset-block-start: 12px; inset-inline: 0; margin-inline: auto; width: max-content; max-width: 96%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; background: #1B2B3B; border: 1px solid #2c4055; border-radius: 12px; padding: 8px 10px; box-shadow: 0 14px 44px -12px rgba(0,0,0,.65); z-index: 11; }
.rv-anno-g { display: inline-flex; align-items: center; gap: 4px; }
.rv-anno-g + .rv-anno-g { padding-inline-start: 10px; border-inline-start: 1px solid #2c4055; }
.rv-anno-bar button { background: rgba(255,255,255,.08); color: #eaf4fb; border: 1px solid transparent; border-radius: 8px; width: 34px; height: 32px; cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background .12s, border-color .12s; }
.rv-anno-bar button:hover { background: rgba(255,255,255,.18); }
.rv-anno-tools button.on { background: #0079C4; border-color: #57b7f0; color: #fff; }
.rv-anno-colors button { width: 22px; height: 22px; border-radius: 50%; padding: 0; border: 2px solid rgba(255,255,255,.25); }
.rv-anno-colors button.on { border-color: #fff; box-shadow: 0 0 0 2px #0079C4; }
.rv-anno-g input[type=range] { width: 90px; accent-color: #0079C4; }
.rv-anno-share { display: inline-flex; align-items: center; gap: 5px; color: #eaf4fb; font-size: 12px; white-space: nowrap; cursor: pointer; }
.rv-anno-share input { accent-color: #0079C4; }
@media (max-width: 720px) { .rv-anno-bar { inset-block-start: 6px; gap: 6px; padding: 6px; } .rv-anno-g + .rv-anno-g { padding-inline-start: 6px; } .rv-anno-bar button { width: 30px; height: 30px; font-size: 14px; } }
.rv-dd { position: absolute; inset-block-start: calc(100% + 7px); inset-inline-start: 0; min-width: 232px; background: #1B2B3B; border: 1px solid #2c4055; border-radius: 12px; box-shadow: 0 18px 50px -12px rgba(0,0,0,.6); padding: 8px; z-index: 20; display: none; flex-direction: column; gap: 3px; }
.rv-dd { border-color: #2c4055; }
.rv-md.open .rv-dd { display: flex; animation: rvdd .14s ease; }
@keyframes rvdd { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.rv-dd-l { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #7E9BB5; font-weight: 700; padding: 8px 8px 3px; }
.rv-dd-b { display: flex; align-items: center; gap: 8px; width: 100%; text-align: start; background: transparent; color: #EAF2FA; border: 0; border-radius: 8px; padding: 9px 10px; cursor: pointer; font: inherit; font-size: 13.5px; transition: background .12s; }
.rv-dd-b:hover { background: rgba(255,255,255,.09); }
.rv-dd-b.danger { color: #FF8A8E; }
.rv-dd-b.danger:hover { background: rgba(255,90,95,.14); }
.rv-dd .rv-ck { display: flex; align-items: center; gap: 8px; color: #EAF2FA; font-size: 13px; padding: 8px 10px; cursor: pointer; }
.rv-dd .rv-ck input { accent-color: #0093EE; }
.rv-dd .rv-rg { display: flex; align-items: center; gap: 8px; color: #C6D8E8; font-size: 12px; padding: 5px 10px; }
.rv-dd .rv-rg span { min-width: 42px; }
.rv-dd .rv-rg input[type=range] { flex: 1; accent-color: #0093EE; }
.rv-sel2 { width: 100%; background: #0f2233; color: #EAF2FA; border: 1px solid #2c4055; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 13px; margin: 2px 0; }
.rv-sel2 option { color: #16323f; background: #fff; }

.rv-r { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.rv-r .rv-stat { font-size: 12px; color: #cfe6f6; font-variant-numeric: tabular-nums; min-width: 130px; text-align: center; white-space: nowrap; }
.rv-icon { width: 36px; height: 36px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); color: #fff; cursor: pointer; font-size: 16px; display: grid; place-items: center; transition: background .12s; }
.rv-icon:hover { background: rgba(255,255,255,.22); }

/* Mobile: identity condenses, groups wrap, stat hides */
@media (max-width: 820px) {
  .rv-id .rv-state { display: none; }
  .rv-r .rv-stat { display: none; }
  .rv-mb { padding: 8px 11px; }
  .rv-dd { inset-inline-start: auto; inset-inline-end: 0; }
}
@media (max-width: 560px) {
  .rv-id .rv-host b { max-width: 90px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: bottom; }
  .rv-grp { gap: 6px; }
}

/* ── Backstage panel (detail tab) — silent SYSTEM admin ── */
.bs-warn { background: rgba(245,166,35,.12); border: 1px solid rgba(245,166,35,.4); color: #8A5A00; border-radius: 10px; padding: 9px 12px; font-size: 12px; margin-bottom: 12px; line-height: 1.45; }
.bs-tabs { display: inline-flex; gap: 2px; background: var(--tint); border: 1px solid var(--border); border-radius: 10px; padding: 3px; margin-bottom: 12px; }
.bs-tab { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 13px; font-weight: 600; padding: 7px 13px; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s; }
.bs-tab.active { background: #fff; color: var(--blue-link); box-shadow: var(--shadow-card); }
.bs-shellbar { display: flex; gap: 8px; margin-bottom: 10px; }
.bs-cmdinput { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 13px; padding: 8px 11px; border: 1px solid var(--input-border); border-radius: var(--radius-ctrl); direction: ltr; text-align: left; }
.bs-cmdinput:focus { border-color: var(--blue-link); box-shadow: 0 0 0 3px rgba(0,147,238,.13); outline: none; }
.bs-out { background: #0F2233; color: #D7E7F4; border-radius: 10px; padding: 12px 14px; font-family: ui-monospace, Consolas, monospace; font-size: 12px; line-height: 1.5; direction: ltr; text-align: left; white-space: pre-wrap; word-break: break-word; max-height: 46vh; overflow: auto; margin: 0; min-height: 90px; }
.bs-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; }
.bs-x { border: 1px solid rgba(255,21,31,.3); background: #fff; color: var(--danger); width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1; }
.bs-x:hover { background: rgba(255,21,31,.08); }
.bs-svcacts { display: flex; gap: 4px; }
.bs-a { border: 1px solid var(--border2); background: #fff; color: var(--blue-link); width: 28px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 12px; line-height: 1; }
.bs-a:hover { background: var(--tint2); }
.bs-a.danger { color: var(--danger); border-color: rgba(255,21,31,.35); }
.bs-a.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Local Users & Groups (Backstage sub-tab) */
.lu-seg { display: inline-flex; gap: 2px; background: var(--tint); border: 1px solid var(--border); border-radius: 8px; padding: 3px; }
.lu-segb { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 6px; cursor: pointer; }
.lu-segb.active { background: #fff; color: var(--blue-link); box-shadow: 0 1px 3px rgba(20,45,70,.12); }
.lu-acts { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-start; }
.lu-table th:last-child, .lu-table td.lu-acts { width: 1%; white-space: nowrap; }
.lu-btn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border2); background: #fff; color: var(--text); font: inherit; font-size: 11.5px; font-weight: 600; padding: 5px 9px; border-radius: 7px; cursor: pointer; line-height: 1; white-space: nowrap; }
.lu-btn:hover { background: var(--tint2); border-color: var(--blue-link); color: var(--blue-link); }
.lu-btn.danger { color: var(--danger); border-color: rgba(255,21,31,.35); }
.lu-btn.danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.lu-members { max-width: 340px; }
.lu-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--tint2); border: 1px solid var(--border2); border-radius: 999px; padding: 1px 4px 1px 9px; font-size: 11.5px; margin: 2px 0; }
.lu-chipx { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px; border-radius: 50%; }
.lu-chipx:hover { background: var(--danger); color: #fff; }
.lu-form { direction: rtl; text-align: right; display: flex; flex-direction: column; gap: 11px; padding-top: 14px; }
.lu-l { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; color: var(--text); }
.lu-i { font: inherit; font-weight: 400; padding: 8px 10px; border: 1px solid var(--border2); border-radius: 8px; direction: ltr; text-align: left; }
.lu-i:focus { outline: 0; border-color: var(--blue-link); box-shadow: 0 0 0 3px rgba(0,121,196,.15); }
.lu-cb { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer; }
.lu-cb input { width: 15px; height: 15px; }

/* Topbar role chip (RBAC) */
.topbar .rolechip { font-size: 11px; font-weight: 700; color: #fff; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.28); padding: 3px 9px; border-radius: 999px; letter-spacing: .3px; white-space: nowrap; }
@media (max-width: 560px) { .topbar .rolechip { display: none; } }

/* Recording playback controls */
.pb-ctl { display: flex; align-items: center; gap: 12px; flex: 1; }
.pb-ctl .pb-time { font-size: 12px; color: #cfe6f6; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pb-ctl .pb-seek { flex: 1; min-width: 120px; accent-color: #0093EE; cursor: pointer; }
#pbstage canvas { max-width: 100%; max-height: 100%; box-shadow: 0 0 40px rgba(0,0,0,.6); }
@media (max-width: 640px){ .pb-ctl .pb-time { display: none; } }

/* ── Hardening tasks tab (Administrator-Bright, light) ───────────────────── */
.hard-prog { margin: 2px 0 18px; }
.hard-prog-bar { height: 9px; border-radius: 20px; background: rgba(78,206,61,.14); overflow: hidden; }
.hard-prog-bar span { display: block; height: 100%; border-radius: 20px; background: var(--green); transition: width .55s ease; }
.hard-prog-txt { font-size: 12px; color: var(--muted); margin-top: 7px; font-weight: 600; }
.hard-table td { vertical-align: middle; }
.hard-table tbody tr.hard-detail:hover { background: #F7FBFE; } /* keep detail row calm */
.hard-exp { background: none; border: 0; cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 7px; border-radius: 4px; line-height: 1; transition: background .12s, color .12s; }
.hard-exp:hover { color: var(--blue-link); background: var(--bg); }
.hard-title { font-weight: 600; color: var(--text); }
.hard-row.hard-done .hard-title { text-decoration: line-through; color: var(--muted); }
.hard-check { color: var(--green); font-weight: 700; margin-inline-end: 6px; }
.hard-detail > td { background: #F7FBFE; border-bottom: 1px solid var(--border); }
.hard-instr { white-space: pre-wrap; font-size: 13px; line-height: 1.8; color: var(--text); padding: 12px 4px 6px; }
.hard-notes { display: flex; gap: 8px; align-items: center; margin: 4px 4px 14px; flex-wrap: wrap; }
.hard-notes textarea { flex: 1; min-width: 260px; min-height: 42px; resize: vertical; padding: 8px 10px; border-radius: var(--radius-ctrl); border: 1px solid var(--border2); background: #fff; color: var(--text); font: inherit; font-size: 13px; }
.hard-notes textarea:focus { outline: 0; border-color: var(--blue-link); }
.hard-stat { font: inherit; font-size: 12px; font-weight: 600; padding: 6px 12px; border: 1px solid var(--border2); border-radius: var(--radius-ctrl); background: #fff; color: var(--text); cursor: pointer; }
.hard-stat:focus { outline: 0; border-color: var(--blue-link); }
/* rounded outlined pills — matches the "Open" / "Help wanted" labels in the design */
.opill { display: inline-block; padding: 2px 11px; border-radius: 12px; font-size: 11px; font-weight: 700; border: 1px solid currentColor; background: #fff; white-space: nowrap; }
.opill.sev-critical { color: #E8402E; }
.opill.sev-high { color: #EF7A1A; }
.opill.sev-medium { color: #B9770E; }
.opill.sev-low { color: #7E95A7; }
.own { display: inline-block; padding: 2px 11px; border-radius: 12px; font-size: 11px; font-weight: 600; border: 1px solid currentColor; background: #fff; white-space: nowrap; }
.own.own-server { color: var(--blue-link); }
.own.own-agent { color: #EF7A1A; }
.own.own-user { color: #8957E5; }
.au-integrity { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 20px; font-size: 12.5px; font-weight: 700; margin-bottom: 14px; }
.au-integrity.ok { background: rgba(78,206,61,.14); color: #2AA31F; }
.au-integrity.bad { background: rgba(255,21,31,.10); color: var(--danger); }

/* ── Device enrollment tab (Administrator-Bright, light) ─────────────────── */
.enr-create { padding: 18px 20px; }
.enr-form { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: flex-end; }
.enr-f { display: flex; flex-direction: column; gap: 6px; }
.enr-f > span { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); }
.enr-f input, .enr-f select { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--border2); border-radius: var(--radius-ctrl); background: #fff; color: var(--text); min-width: 130px; }
.enr-f input:focus, .enr-f select:focus { outline: 0; border-color: var(--blue-link); }
.enr-grow { flex: 1; min-width: 220px; }
.enr-grow input { width: 100%; }
.enr-seg { display: inline-flex; border: 1px solid var(--border2); border-radius: var(--radius-ctrl); overflow: hidden; background: #fff; }
.enr-seg-b { border: 0; background: #fff; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 9px 16px; cursor: pointer; transition: background .12s; }
.enr-seg-b + .enr-seg-b { border-inline-start: 1px solid var(--border2); }
.enr-seg-b.active { background: var(--blue-link); color: #fff; }
.enr-go { height: 40px; }
.enr-new { margin-top: 16px; border: 1px solid rgba(78,206,61,.35); background: rgba(78,206,61,.08); border-radius: var(--radius); padding: 12px 14px; }
.enr-new-h { font-size: 13px; font-weight: 600; color: #2AA31F; margin-bottom: 8px; }
.enr-new-cmd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.enr-new-cmd code { flex: 1; min-width: 240px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-ctrl); padding: 8px 10px; color: var(--text); word-break: break-all; }
.enr-use { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.enr-bar { flex: 1; height: 6px; border-radius: 20px; background: rgba(141,171,196,.25); overflow: hidden; max-width: 90px; }
.enr-bar span { display: block; height: 100%; border-radius: 20px; background: var(--blue-link); }

/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  UI/UX ELEVATION PASS — 2026-08-15 (10-agent workflow + QA critique)   ║
   ║  Additive; appended last so it wins. Remove this block to revert.     ║
   ╚══════════════════════════════════════════════════════════════════════╝ */
/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN ELEVATION — CONSOLIDATED PASS  ·  "Administrator · Bright" (light, RTL)
   Merged from 10 proposals into ONE conflict-free, additive block. Appended LAST
   so it wins. Reuses existing vars only (no new palette hexes except derived
   button/status states). RTL-safe (logical properties). Order:
     0  Tokens (control + status + progress + focus rings)
     1  Base elements / typography helpers
     2  Buttons & interactive controls
     3  Forms · inputs · selects · textareas
     4  Cards · KPIs · pills/badges · progress bars
     5  Tables & data lists
     6  Navigation (topbar · rail · sidebar · drawer · tabs)
     7  Responsive  — tablet (641–1024) then phone (≤640) then ≤400 then coarse
   NOTE ON BREAKPOINTS: the base sheet turns rail→drawer at ≤900px and hides
   search/logout at ≤560px. This pass re-scopes that: 641–1024 RE-DOCKS the rail
   + sidebar (tablet keeps the rail, drawer becomes a collapse toggle), while the
   off-canvas DRAWER is extended down to ≤640 (phones), and the phone topbar is
   rebuilt (search→icon, avatar kept, logout→power icon).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════ 0 · TOKENS ═══════════════ */
:root {
  /* Control geometry — single source of truth (Figma "42px") */
  --ctrl-h: 42px;              /* buttons */
  --ctrl-h-sm: 36px;
  --ctrl-h-xs: 30px;
  --field-h: 42px;            /* inputs */
  --field-h-sm: 36px;        /* dense inline fields */
  --field-pad-x: 12px;
  --ease-ctrl: cubic-bezier(.4,0,.2,1);
  --press: translateY(1px);

  /* Focus rings — one per intent */
  --ring: 0 0 0 3px rgba(0,147,238,.28);        /* blue (from --blue-link) */
  --ring-soft: 0 0 0 3px rgba(0,147,238,.15);   /* soft field halo */
  --ring-danger: 0 0 0 3px rgba(255,21,31,.24);
  --ring-green: 0 0 0 3px rgba(78,206,61,.30);

  /* Canonical STATUS tokens — the single status-color map (fg on white / soft
     bg tint / outlined border). Reuses the base warn-fg #B9770E. */
  --st-ok-fg:   #1F9E14;  --st-ok-bg:   rgba(78,206,61,.15);   --st-ok-bd:   rgba(78,206,61,.42);
  --st-warn-fg: #B9770E;  --st-warn-bg: rgba(245,166,35,.15);  --st-warn-bd: rgba(245,166,35,.45);
  --st-dngr-fg: #D42027;  --st-dngr-bg: rgba(255,21,31,.10);   --st-dngr-bd: rgba(255,21,31,.35);
  --st-info-fg: #0B78C4;  --st-info-bg: rgba(0,147,238,.12);   --st-info-bd: rgba(0,147,238,.38);
  --st-mute-fg: #6E8AA3;  --st-mute-bg: rgba(141,171,196,.16); --st-mute-bd: rgba(141,171,196,.42);

  /* Progress geometry — one rhythm for every bar */
  --prog-h: 8px;  --prog-r: 999px;  --prog-track: #E3EEF7;

  /* Mobile card-row gap */
  --m-cardgap: 12px;
}

/* ═══════════════ 1 · BASE / HELPERS ═══════════════ */
.mono { font-variant-numeric: tabular-nums; }
.btn-block { width: 100%; }
/* anything clickable looks clickable */
button:not(:disabled), [role="button"], .userpick, .fbcrumb { cursor: pointer; }
button:disabled { cursor: not-allowed; }

/* ═══════════════ 2 · BUTTONS & INTERACTIVE CONTROLS ═══════════════ */
.btn {
  gap: 8px; height: var(--ctrl-h); padding-inline: 22px; border-radius: var(--radius-ctrl);
  border: 1px solid transparent; font-weight: 500; white-space: nowrap; text-decoration: none;
  -webkit-appearance: none; appearance: none; user-select: none;
  transition: background .14s var(--ease-ctrl), border-color .14s var(--ease-ctrl),
              color .14s var(--ease-ctrl), box-shadow .15s var(--ease-ctrl),
              transform .06s var(--ease-ctrl), filter .12s;
}
.btn svg { flex: none; }
.btn:active:not(:disabled) { transform: var(--press); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

/* Primary — filled blue */
.btn-blue { background: var(--blue-link); color: #fff; border-color: var(--blue-link); box-shadow: none; }
.btn-blue:hover:not(:disabled) { background: #0A8AE0; border-color: #0A8AE0; filter: none; }
.btn-blue:active:not(:disabled) { background: var(--blue); border-color: var(--blue); }
.btn-blue:focus-visible { box-shadow: var(--ring), 0 1px 2px rgba(0,74,124,.25); }

/* Confirm — filled green */
.btn-green { background: var(--green); color: #fff; border-color: var(--green); box-shadow: none; }
.btn-green:hover:not(:disabled) { background: #45C132; border-color: #45C132; }
.btn-green:active:not(:disabled) { background: #3BB028; border-color: #3BB028; }
.btn-green:focus-visible { box-shadow: var(--ring-green); }

/* Secondary — stroked white + blue label */
.btn-ghost { background: #fff; color: var(--blue-link); border: 1px solid var(--border2); }
.btn-ghost:hover:not(:disabled) { background: var(--tint2); border-color: var(--blue-link); }
.btn-ghost:active:not(:disabled) { background: #DCEEFB; }

/* Destructive — stroked → solid on hover */
.btn-danger { background: #fff; color: var(--danger); border: 1px solid rgba(255,21,31,.3); }
.btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }
.btn-danger:active:not(:disabled) { background: #E00810; border-color: #E00810; }
.btn-danger:focus-visible { box-shadow: var(--ring-danger); }

/* Neutral M365 */
.btn-ms { background: #fff; color: var(--text); border: 1px solid var(--border2); }
.btn-ms:hover:not(:disabled) { background: var(--tint); border-color: var(--border2); }
.btn-ms:active:not(:disabled) { background: var(--tint2); }

/* Soft (detail panel tier-2) */
.btn-soft:hover:not(:disabled) { background: #fff; border-color: var(--blue-link); color: var(--blue-link); }
.btn-soft:active:not(:disabled) { background: var(--tint2); filter: brightness(.98); }

/* Size modifiers */
.btn-sm { height: var(--ctrl-h-sm); padding-inline: 16px; font-size: 14px; gap: 7px; }
.btn-sm svg { width: 15px; height: 15px; }
.btn-xs { height: var(--ctrl-h-xs); padding-inline: 12px; font-size: 13px; gap: 6px; border-radius: var(--radius-ctrl); }

/* Disabled — one look everywhere */
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; box-shadow: none; transform: none; filter: none; pointer-events: none;
}

/* Icon buttons — one square-button spec + press + keyboard ring */
.hn-copy, .hn-sync, .hn-collect, .fbdl, .gf-copy, .bs-a, .bs-x, .iconbtn, .rv-cf-dl,
.upx, .close, .gh-btn, .up-clear {
  transition: background .14s var(--ease-ctrl), color .14s var(--ease-ctrl),
              border-color .14s var(--ease-ctrl), box-shadow .14s var(--ease-ctrl),
              transform .06s var(--ease-ctrl), opacity .14s;
}
.hn-copy:active, .hn-sync:active, .hn-collect:active, .fbdl:active, .gf-copy:active,
.bs-a:active, .bs-x:active, .iconbtn:active, .upx:active, .close:active, .gh-btn:active,
.up-clear:active, .rv-cf-dl:active { transform: scale(.9); }
.hn-copy:focus-visible, .hn-sync:focus-visible, .hn-collect:focus-visible, .fbdl:focus-visible,
.gf-copy:focus-visible, .bs-a:focus-visible, .iconbtn:focus-visible, .upx:focus-visible,
.gh-btn:focus-visible, .up-clear:focus-visible, .rv-cf-dl:focus-visible {
  outline: none; box-shadow: var(--ring); position: relative; z-index: 1;
}
.bs-x:focus-visible, .close:focus-visible { outline: none; box-shadow: var(--ring-danger); position: relative; z-index: 1; }
.hn-copy, .hn-sync, .hn-collect { width: 24px; height: 24px; border-radius: var(--radius-ctrl); }
.hn-copy:hover, .hn-sync:hover:not(:disabled), .hn-collect:hover:not(:disabled) { opacity: 1; }
.hn-sync:disabled, .hn-collect:disabled { opacity: .4; cursor: not-allowed; transform: none; }
.fbdl { width: 28px; height: 28px; }
.bs-a, .bs-x { width: 28px; height: 26px; }
.close { border-radius: 8px; }
.upx, .up-clear, .gh-btn { border-radius: var(--radius-ctrl); }
.rv-cf-dl:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.45); }

/* Segmented / toggle / tabs — active = blue, consistent hover + focus */
.enr-seg-b, .viewtoggle button { transition: background .14s var(--ease-ctrl), color .14s var(--ease-ctrl); }
.enr-seg-b:hover:not(.active) { background: var(--tint2); color: var(--text); }
.enr-seg-b:active:not(.active), .viewtoggle button:active:not(.active) { background: #DCEEFB; }
.enr-seg-b.active { background: var(--blue-link); color: #fff; }
.enr-seg-b:focus-visible, .viewtoggle button:focus-visible, .bs-tab:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--blue-link); position: relative; z-index: 1;
}
.bs-tab { transition: background .12s, color .12s; }
.bs-tab:hover:not(.active) { color: var(--text); background: rgba(0,147,238,.06); }
.detail .tabs button, #itabs button { transition: color .14s, background .14s, border-color .14s; }
.detail .tabs button:focus-visible, #itabs button:focus-visible {
  outline: none; box-shadow: inset 0 -2px 0 var(--blue-link), var(--ring);
  border-radius: 6px 6px 0 0; position: relative; z-index: 1;
}
#itabs button:not(.active):hover { background: rgba(0,147,238,.05); }

/* Chips / drives / link buttons */
.pkgform .chip, .fbdrive {
  transition: background .14s var(--ease-ctrl), border-color .14s var(--ease-ctrl), color .14s, transform .06s;
}
.pkgform .chip:hover { background: var(--tint2); border-color: var(--blue-link); }
.pkgform .chip:active, .fbdrive:active { transform: translateY(1px); background: #DCEEFB; }
.pkgform .chip:focus-visible, .fbdrive:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--blue-link); }
.fbdrive:hover { border-color: var(--blue-link); }
.linklike { border-radius: 4px; padding: 2px 4px; transition: color .12s, background .12s; }
.linklike:hover { text-decoration: underline; color: #0A8AE0; }
.linklike:focus-visible, .fbcrumb:focus-visible { outline: none; box-shadow: var(--ring); }
.fbcrumb { border-radius: 3px; }

/* Button-like selects / pickers / hardening expander */
.grp-select, .hard-stat { cursor: pointer; transition: border-color .14s var(--ease-ctrl), box-shadow .14s var(--ease-ctrl), background .14s; }
.grp-select:hover, .hard-stat:hover { border-color: var(--blue-link); background: var(--tint); }
.grp-select:focus-visible, .hard-stat:focus-visible { outline: none; border-color: var(--blue-link); box-shadow: var(--ring); }
.userpick { transition: background .14s, border-color .14s, box-shadow .14s; }
.userpick:active { transform: translateY(1px); }
.userpick:focus-visible { outline: none; border-color: var(--blue-link); box-shadow: var(--ring); }
.hard-exp { transition: background .12s, color .12s, transform .06s; }
.hard-exp:active { transform: scale(.94); }
.hard-exp:focus-visible { outline: none; box-shadow: var(--ring); }
.deploy .links .btn { min-height: var(--ctrl-h-sm); }

/* ═══════════════ 3 · FORMS · INPUTS · SELECTS · TEXTAREAS ═══════════════ */
/* Canonical field surface — every text-ish control shares ONE look */
.pkgform input:not([type=checkbox]):not([type=radio]), .pkgform select, .pkgform textarea,
.pkin, .pkfld input, .pkfld select, .enr-f input, .enr-f select,
.hard-notes textarea, .hard-stat, .grp-select, .fbbar input, .login input {
  font-family: inherit; font-size: 15px; line-height: 22px; color: var(--text);
  background: #fff; border: 1px solid var(--input-border); border-radius: var(--radius-ctrl);
  box-shadow: none; transition: border-color .15s, box-shadow .15s, background .15s;
  -webkit-appearance: none; appearance: none;
}
/* Single-line 42px pill */
.pkgform input:not([type=checkbox]):not([type=radio]), .pkin, .pkfld input,
.enr-f input, .fbbar input, .login input {
  height: var(--field-h); padding: 0 var(--field-pad-x); box-sizing: border-box;
}
/* Selects — shared shell + RTL-aware caret (chevron on inline-start for RTL) */
.pkgform select, .pkfld select, .enr-f select, .hard-stat, .grp-select {
  height: var(--field-h); padding-block: 0; padding-inline: 34px var(--field-pad-x); box-sizing: border-box; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238DABC4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left var(--field-pad-x) center;
}
html[dir="ltr"] .pkgform select, html[dir="ltr"] .pkfld select, html[dir="ltr"] .enr-f select,
html[dir="ltr"] .hard-stat, html[dir="ltr"] .grp-select {
  background-position: right var(--field-pad-x) center; padding-inline: var(--field-pad-x) 34px;
}
.pkgform select::-ms-expand, .pkfld select::-ms-expand, .enr-f select::-ms-expand,
.hard-stat::-ms-expand, .grp-select::-ms-expand { display: none; }
/* Textareas */
.pkgform textarea, .hard-notes textarea { min-height: 92px; padding: 10px 12px; line-height: 1.55; resize: vertical; box-sizing: border-box; }
/* Placeholder */
.pkgform input::placeholder, .pkgform textarea::placeholder, .pkin::placeholder, .pkfld input::placeholder,
.enr-f input::placeholder, .hard-notes textarea::placeholder, .fbbar input::placeholder, .login input::placeholder { color: var(--muted); opacity: 1; }
/* Hover */
.pkgform input:not([type=checkbox]):not([type=radio]):hover, .pkgform select:hover, .pkgform textarea:hover,
.pkin:hover, .pkfld input:hover, .pkfld select:hover, .enr-f input:hover, .enr-f select:hover,
.hard-notes textarea:hover, .hard-stat:hover, .grp-select:hover, .fbbar input:hover, .login input:hover { border-color: var(--border2); }
/* Focus — ONE ring */
.pkgform input:focus, .pkgform select:focus, .pkgform textarea:focus, .pkin:focus, .pkfld input:focus, .pkfld select:focus,
.enr-f input:focus, .enr-f select:focus, .hard-notes textarea:focus, .hard-stat:focus, .grp-select:focus,
.fbbar input:focus, .login input:focus { outline: 0; border-color: var(--blue-link); box-shadow: var(--ring-soft); background: #fff; }
/* Disabled / readonly */
.pkgform input:disabled, .pkgform select:disabled, .pkgform textarea:disabled, .pkin:disabled, .pkfld input:disabled, .pkfld select:disabled,
.enr-f input:disabled, .enr-f select:disabled, .hard-notes textarea:disabled, .hard-stat:disabled, .grp-select:disabled,
.fbbar input:disabled, .login input:disabled, .pkin[readonly], .pkgform input[readonly] {
  background: var(--tint); color: var(--muted); border-color: var(--border); box-shadow: none; cursor: not-allowed; -webkit-text-fill-color: var(--muted);
}
.pkin[readonly]:focus { box-shadow: none; border-color: var(--border); }
/* Validation */
.pkin.is-error, .pkgform input.is-error, .pkgform select.is-error, .pkgform textarea.is-error, .pkfld input.is-error,
.enr-f input.is-error, .hard-notes textarea.is-error,
.pkgform input:not(:placeholder-shown):invalid, .enr-f input:not(:placeholder-shown):invalid { border-color: var(--danger); }
.pkin.is-error:focus, .pkgform input.is-error:focus, .pkgform textarea.is-error:focus, .enr-f input.is-error:focus,
.pkgform input:not(:placeholder-shown):invalid:focus, .enr-f input:not(:placeholder-shown):invalid:focus { box-shadow: var(--ring-danger); }
.pkin.is-ok, .pkgform input.is-ok, .enr-f input.is-ok { border-color: var(--green); }
.pkin.is-ok:focus, .pkgform input.is-ok:focus, .enr-f input.is-ok:focus { box-shadow: var(--ring-green); }
.field-err { font-size: 11.5px; font-weight: 600; color: var(--danger); margin-top: 5px; display: flex; align-items: center; gap: 5px; line-height: 1.4; }
.field-err::before { content:'!'; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--danger); color:#fff; font-size: 10px; font-weight: 800; display: inline-grid; place-items: center; }
/* Labels-above — unify onto Figma spec (uppercase 11px tracked muted 700) */
.pkgform .fld > span, .pkfld > span, .enr-f > span {
  font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); line-height: 1.4;
}
.pkgform .fld > span.req::after, .pkfld > span.req::after, .enr-f > span.req::after { content:' *'; color: var(--danger); font-weight: 800; }
.pkgform .fld { gap: 6px; }
.pkfld { gap: 6px; }
/* Login */
.login input { margin: 16px 0 12px; }
.login .err:not(:empty) { margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-ctrl); background: rgba(255,21,31,.08); border: 1px solid rgba(255,21,31,.25); text-align: start; line-height: 1.45; }
/* Roles — adopt the system (ids from app.js) */
#rlEmail { height: var(--field-h); box-sizing: border-box; border: 1px solid var(--input-border); border-radius: var(--radius-ctrl); padding-inline: 14px; background: #fff; color: var(--text); font: inherit; font-size: 15px; direction: ltr; text-align: left; transition: border-color .15s, box-shadow .15s; }
#rlEmail:hover { border-color: var(--border2); }
#rlEmail:focus { outline: 0; border-color: var(--blue-link); box-shadow: var(--ring-soft); }
#rlRole { height: var(--field-h); box-sizing: border-box; background: #fff; color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius-ctrl); -webkit-appearance: none; appearance: none; cursor: pointer; padding-inline: 34px 12px; font: inherit; font-size: 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238DABC4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: left 12px center; }
#rlRole:focus { outline: 0; border-color: var(--blue-link); box-shadow: var(--ring-soft); }
/* Dense inline controls */
.grp-select { height: var(--field-h-sm); font-size: 13px; max-width: 170px; }
.hard-stat { height: var(--field-h-sm); font-size: 13px; padding-inline: 34px 12px; }
.fbbar input { height: var(--field-h-sm); font-size: 14px; }
/* Search-style inputs with a leading icon */
.sw-search, .up-search input, .st-search { transition: border-color .15s, box-shadow .15s; }
.sw-search:focus-within { border-color: var(--blue-link); box-shadow: var(--ring-soft); }
.up-search input:focus, .st-search:focus { outline: 0; border-color: var(--blue-link); box-shadow: var(--ring-soft); background:#fff; }
.st-search { height: var(--field-h-sm); }
/* Segmented control geometry */
.enr-seg { border-color: var(--input-border); border-radius: var(--radius-ctrl); height: var(--field-h); }
.enr-seg-b { display: inline-flex; align-items: center; height: 100%; padding-block: 0; }
.enr-go, .enr-form .btn { height: var(--field-h); }
/* Native checkboxes / radios — Figma blue fill (exclude dark remote-viewer) */
.pkgform input[type=checkbox], .pkgform input[type=radio], .st-mstoggle input[type=checkbox], .hard-notes input[type=checkbox] { accent-color: var(--blue-link); width: 16px; height: 16px; cursor: pointer; }
/* Autofill — keep our white fields */
.pkin:-webkit-autofill, .login input:-webkit-autofill, #rlEmail:-webkit-autofill, .pkgform input:-webkit-autofill, .enr-f input:-webkit-autofill {
  -webkit-text-fill-color: var(--text); -webkit-box-shadow: 0 0 0 40px #fff inset; box-shadow: 0 0 0 40px #fff inset; caret-color: var(--text);
}
/* Number spinners off */
.enr-f input[type=number] { -moz-appearance: textfield; }
.enr-f input[type=number]::-webkit-outer-spin-button, .enr-f input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ═══════════════ 4 · CARDS · KPIs · PILLS/BADGES · PROGRESS ═══════════════ */
/* Cards — unify onto the --radius-lg family */
.card { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.groupsec .card { border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: 0; }
.card.deploy { border-radius: var(--radius-lg); }

/* KPIs — grid (fixes undefined .kpis), body layout, per-tone accent + mapping */
.kpis, .kpirow { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 16px; margin-bottom: 20px; }
.kpi-body { min-width: 0; display: flex; flex-direction: column; }
.kpi-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kpi-lbl { overflow: hidden; text-overflow: ellipsis; }
.kpi::after { opacity: 1; background: var(--st-info-bd); }
.kpi.green::after, .kpi.ok::after { background: var(--st-ok-bd); }
.kpi.danger::after { background: var(--st-dngr-bd); }
.kpi.warn::after { background: var(--st-warn-bd); }
.kpi.muted::after { background: var(--st-mute-bd); }
.kpi.blue::after { background: var(--blue-link); }
.kpi .kpi-ic { background: var(--st-info-bg); color: var(--blue-link); }
.kpi.blue .kpi-ic { background: var(--st-info-bg); color: var(--blue-link); }
.kpi.warn .kpi-ic { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.kpi.warn .kpi-val { color: var(--st-warn-fg); }
.kpi.green .kpi-ic, .kpi.ok .kpi-ic { background: var(--st-ok-bg); color: var(--st-ok-fg); }
.kpi.green .kpi-val, .kpi.ok .kpi-val { color: var(--st-ok-fg); }
.kpi.muted .kpi-ic { background: var(--st-mute-bg); color: var(--st-mute-fg); }
.kpi.danger .kpi-ic { background: var(--st-dngr-bg); color: var(--st-dngr-fg); }
.kpi.danger .kpi-val { color: var(--st-dngr-fg); }

/* Pills / badges — one rounded-outlined status language via the tokens */
.pill, .sev, .opill, .own, .inst-badge, .office-badge, .find-badge, .off-chip, .dsec-count { font-variant-numeric: tabular-nums; letter-spacing: .2px; }
.pill { border-radius: 999px; padding: 4px 11px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.pill.online  { color: var(--st-ok-fg);   background: var(--st-ok-bg);   border-color: var(--st-ok-bd); }
.pill.offline { color: var(--st-mute-fg); background: var(--st-mute-bg); border-color: var(--st-mute-bd); }
.pill.revoked { color: var(--st-dngr-fg); background: var(--st-dngr-bg); border-color: var(--st-dngr-bd); }
.sev.error, .sev.critical { color: var(--st-dngr-fg); background: var(--st-dngr-bg); }
.sev.warning, .sev.warn   { color: var(--st-warn-fg); background: var(--st-warn-bg); }
.sev.info                 { color: var(--st-info-fg); background: var(--st-info-bg); }
.sev.ok                   { color: var(--st-ok-fg);   background: var(--st-ok-bg); }
.opill.sev-critical { color: var(--st-dngr-fg); background: var(--st-dngr-bg); border-color: currentColor; }
.opill.sev-high     { color: #E1720F;           background: rgba(239,122,26,.12); border-color: currentColor; }
.opill.sev-medium   { color: var(--st-warn-fg); background: var(--st-warn-bg); border-color: currentColor; }
.opill.sev-low      { color: var(--st-mute-fg); background: var(--st-mute-bg); border-color: currentColor; }
.own { font-weight: 600; background: #fff; }
.own.own-server { color: var(--blue-link); }
.own.own-agent  { color: #E1720F; }
.own.own-user   { color: #8957E5; }
.dsec-count { border-radius: 999px; font-weight: 700; }
.dsec-count.warn { background: var(--st-warn-bg); color: var(--st-warn-fg); }
.dsec-count.bad  { background: var(--st-dngr-bg); color: var(--st-dngr-fg); }
.dsec-count.ok   { background: var(--st-ok-bg);   color: var(--st-ok-fg); }
.inst-badge, .office-badge, .find-badge { border-radius: 999px; height: 21px; font-weight: 700; padding-inline: 9px; }
.inst-badge.pend,  .office-badge.old,   .find-badge.warn { color: var(--st-warn-fg); background: var(--st-warn-bg); border-color: var(--st-warn-bd); }
.inst-badge.fail,  .office-badge.crash, .find-badge.err  { color: var(--st-dngr-fg); background: var(--st-dngr-bg); border-color: var(--st-dngr-bd); }
.find-badge.info { color: var(--st-info-fg); background: var(--st-info-bg); border-color: var(--st-info-bd); }
.off-chip { border-radius: 999px; background: var(--st-info-bg); border-color: var(--st-info-bd); color: var(--text); }
.off-chip b { color: var(--blue-link); }

/* Progress bars — one geometry + shared semantic fills */
.hard-prog-bar, .cp-bar, .upcard .cp-bar { height: var(--prog-h); border-radius: var(--prog-r); background: var(--prog-track); overflow: hidden; }
.enr-bar { height: 6px; border-radius: var(--prog-r); background: var(--st-mute-bg); overflow: hidden; }
.hard-prog-bar span { border-radius: var(--prog-r); background: linear-gradient(90deg, #43C132, var(--green)); transition: width .55s cubic-bezier(.4,0,.2,1); }
.enr-bar span { border-radius: var(--prog-r); background: linear-gradient(90deg, var(--blue-link), #38C6F0); }
.enr-bar.warn span { background: linear-gradient(90deg, var(--warn), #F5C36B); }
.enr-bar.full span { background: linear-gradient(90deg, var(--danger), #FF5A5F); }
.hard-prog-txt { font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.au-integrity { border-radius: var(--prog-r); font-weight: 700; }
.au-integrity::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.au-integrity.ok  { background: var(--st-ok-bg);   color: var(--st-ok-fg); }
.au-integrity.bad { background: var(--st-dngr-bg); color: var(--st-dngr-fg); }

/* ═══════════════ 5 · TABLES & DATA LISTS ═══════════════ */
/* Canonical shell — wide tables scroll inside the card at ANY width */
.content .card { position: relative; }
.content .card:has(> table) { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #C7D9E8 transparent; }
.content .card > table { min-width: 560px; }
.content .card:has(> table)::-webkit-scrollbar { height: 9px; }
.content .card:has(> table)::-webkit-scrollbar-thumb { background: #CBDBE9; border-radius: 9px; border: 2px solid transparent; background-clip: content-box; }
.content .card:has(> table)::-webkit-scrollbar-thumb:hover { background: #AEC6DA; background-clip: content-box; }
/* Header — uppercase muted tinted STICKY */
.content .card > table > thead > tr > th, #icontent table > thead > tr > th {
  position: sticky; inset-block-start: 0; z-index: 2; background: #FBFDFF; text-align: start;
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
  padding: 13px 20px; white-space: nowrap; border-bottom: 1px solid var(--border); box-shadow: inset 0 -1px 0 var(--border);
}
.groupsec .grouphead { position: sticky; inset-block-start: 0; z-index: 3; }
.groupsec .card > table > thead > tr > th { inset-block-start: 44px; }
/* Body cells — NO zebra, hairline dividers, calm hover + selection */
.content .card > table > tbody > tr > td, #icontent table > tbody > tr > td { padding: 13px 20px; border-bottom: 1px solid var(--border); font-size: 14.5px; vertical-align: middle; }
.content .card > table > tbody > tr:last-child > td, #icontent table > tbody > tr:last-child > td { border-bottom: 0; }
.content .card > table > tbody > tr, #icontent table > tbody > tr { transition: background .12s; }
.content .card > table > tbody > tr:hover, #icontent table > tbody > tr:hover { background: var(--tint); }
.content .card > table > tbody > tr.selected, #icontent table > tbody > tr.selected { background: var(--tint2); box-shadow: inset 3px 0 0 var(--blue-link); }
.content .card > table > tbody > tr[data-id], .content .card > table > tbody > tr[data-pid], .content .card > table > tbody > tr[data-oid],
.content .card > table > tbody > tr[data-lid], #icontent table > tbody > tr[data-iid], #icontent table > tbody > tr[data-sid], #icontent table > tbody > tr[data-rid] { cursor: pointer; }
.content .card > table > tbody > tr:focus-visible, #icontent table > tbody > tr:focus-visible { outline: none; background: var(--tint2); box-shadow: inset 3px 0 0 var(--blue-link), inset 0 0 0 1px rgba(0,147,238,.25); }
/* Numbers / dates */
.content .card > table td.mono, .content .card > table td.muted, #icontent table td.muted { font-variant-numeric: tabular-nums; }
.content .card > table td:last-child.muted { white-space: nowrap; }
/* Truncation */
.content .card > table td[style*="max-width"] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.content .card > table td .hostcell { min-width: 0; }
.content .card > table td .hostcell > div, .content .card > table td .hostcell > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.content .card > table > tbody > tr > td:first-child { color: var(--text); }
/* Empty states */
.content .card > table > tbody > tr > td.empty, #icontent table > tbody > tr > td.empty {
  display: table-cell; padding: 52px 24px; text-align: center; color: var(--muted); font-size: 14px; line-height: 1.6;
  background: radial-gradient(38px 38px at 50% 30px, var(--tint2) 0%, transparent 70%) no-repeat;
}
.content .card > table > tbody > tr > td.empty b { color: var(--text); font-weight: 700; }
/* Ad-hoc inline tables pulled into the system */
#icontent table { width: 100%; border-collapse: collapse; }
#icontent table > tbody > tr > td { padding: 12px 16px; font-size: 14px; }
.dbody table { width: 100%; border-collapse: collapse; }
.dbody table thead th, .dbody div[style*="overflow"] table thead th {
  position: sticky; inset-block-start: 0; z-index: 1; background: #FBFDFF; text-align: start;
  font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 700;
  padding: 9px 10px; white-space: nowrap; border-bottom: 1px solid var(--border); box-shadow: inset 0 -1px 0 var(--border);
}
.dbody table td { padding: 8px 10px; font-size: 12.5px; }
.dbody table td.mono { font-variant-numeric: tabular-nums; }
.dbody table > tbody > tr { transition: background .12s; }
.dbody table > tbody > tr:hover { background: var(--tint); }
.dbody div[style*="overflow"] { max-height: 340px; overflow: auto; }
/* File-browser + remote-history headers */
.fbtable thead th, .rhtbl th { text-align: start; font-size: 10.5px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 9px 8px; border-bottom: 1px solid var(--border); }
.fbtable td, .rhtbl td { font-variant-numeric: tabular-nums; }
.rhtbl tbody tr { transition: background .12s; }
.rhtbl tbody tr:hover { background: var(--tint); }
/* Cell content helpers */
.content .card > table td .pill, .content .card > table td .sev, .content .card > table td .opill, .content .card > table td .own { vertical-align: middle; }
.content .card > table td:has(> .sev + .sev) { line-height: 2; }
.content .card > table td:last-child:has(> .btn-danger), .content .card > table td:last-child:has(> .btn-sm), .content .card > table td:last-child:has(> .bs-x) { text-align: end; white-space: nowrap; }
/* Hardening table */
.hard-table > thead > tr > th { background: #FBFDFF; }
.hard-table td { font-size: 14px; }
.hard-table tr.hard-detail > td { padding: 0 20px; }
.hard-table .hard-stat { min-width: 108px; }

/* ═══════════════ 6 · NAVIGATION ═══════════════ */
.topbar { padding-inline: 22px; border-bottom: 1px solid rgba(255,255,255,.10); box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 2px 12px rgba(0,74,124,.28); }
.topbar .logo { display: inline-flex; align-items: center; user-select: none; }
.topbar .logo::after { content: ''; width: 1px; height: 26px; margin-inline-start: 20px; background: rgba(255,255,255,.18); border-radius: 1px; }
.topbar .search { min-width: 220px; transition: width .2s ease, background .15s, border-color .15s, box-shadow .15s; }
.topbar .search svg { opacity: .7; transition: opacity .15s; flex: none; }
.topbar .search:focus-within svg { opacity: 1; }
.topbar .search:focus-within { box-shadow: 0 0 0 3px rgba(255,255,255,.14); }

/* ═══════════════ 7 · RESPONSIVE ═══════════════ */

/* ─────────── TABLET (641–1024) — re-dock rail + sidebar (override base ≤900 drawer) ─────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  .topbar { height: 60px; gap: 16px; padding-inline: 18px; }
  .topbar .logo { font-size: 20px; }
  .shell { inset-block-start: 60px; }
  .hamburger { display: grid; }                                  /* now a collapse toggle */
  .rail { display: flex; position: static; transform: none; width: 56px; }
  .sidebar { position: static; transform: none; inset: auto; width: 188px; box-shadow: none; border-inline-start: 1px solid var(--border); border-inline-end: 2px solid var(--rail); transition: width .24s cubic-bezier(.4,0,.2,1); }
  .nav-backdrop { display: none !important; }
  body.nav-open .sidebar { transform: none; width: 60px; padding-inline: 8px; }
  body.nav-open .sidebar .label, body.nav-open .sidebar .nav a > :not(svg):not(.dot) { display: none; }
  body.nav-open .sidebar .nav a { justify-content: center; padding: 11px 0; }
  body.nav-open .sidebar .nav a .dot { margin: 0; }

  /* Detail: docked beside shell, full-page curtain starts after rail+sidebar */
  .detail.open { position: static; width: 360px; inset: auto; box-shadow: -8px 0 30px -20px rgba(20,45,70,.4); }
  .detail.open.full { position: absolute; inset-block: 0; inset-inline-start: 244px; inset-inline-end: 0; width: auto; z-index: 20; }
  body.nav-open .detail.open.full { inset-inline-start: 120px; }
  .detail.open.full .dbody { padding: 20px clamp(18px, 3vw, 32px); }
  .detail.open.full .dhead { padding-inline: clamp(18px, 3vw, 32px); }
  .detail.open.full .kv { gap: 16px; max-width: none; }
  .detail.open.full .kv .k { min-width: 150px; }
  .detail.open.full .dbody > .dsec { max-width: 920px; padding: 16px 20px 18px; }
  .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .healthbar { grid-template-columns: repeat(4, 1fr); }
  .dsec { padding: 15px 18px 16px; }

  .content { padding: 22px 22px 34px; }
  .content-head { gap: 12px; }
  .content-head h1 { font-size: 24px; }
  .content-head .sub { max-width: 680px; }

  /* KPI + card grids → 2-up (dense rows may relax to auto-fit ≥900) */
  .kpis, .kpirow { grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; }
  .kpi { padding: 15px 16px; }
  .kpi-ic { width: 44px; height: 44px; }
  .kpi-val { font-size: 25px; }
  .od-vergrid { grid-template-columns: repeat(2, 1fr); }

  /* Comfortable table density (undo phone squeeze) */
  .content .card > table { min-width: 0; }
  .content .card > table > thead > tr > th { padding: 13px 16px; letter-spacing: 1px; }
  .content .card > table > tbody > tr > td { padding: 13px 16px; font-size: 14.5px; }
  .grp-select { max-width: 132px; }

  /* Forms → tidy 2-column */
  .pkgform .frow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .pkgform .frow > .fld { min-width: 0; margin-top: 0; }
  .pkgform .frow:has(> :only-child) { grid-template-columns: 1fr; }
  .pkgform .fld:has(textarea), .pkgform .fld:has(.codebox) { grid-column: 1 / -1; }
  .pkgform .pkgactions { flex-wrap: wrap; }
  .pkgform .pkgactions .btn { flex: 1 1 auto; }
  .enr-form { gap: 14px 16px; }
  .enr-f { flex: 1 1 calc(50% - 8px); min-width: 180px; }
  .enr-f input, .enr-f select { min-width: 0; width: 100%; }
  .enr-grow { flex-basis: 100%; }
  .enr-go { flex: 1 1 100%; justify-content: center; }
  .hard-notes textarea { min-width: 180px; }

  /* Tab strips + toolbars scroll instead of wrapping */
  #itabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  #itabs::-webkit-scrollbar { display: none; }
  #itabs button { flex: none; white-space: nowrap; }
  .off-channels { gap: 8px; }
  .deploy .links { gap: 8px; }
  .deploy .hint { margin-inline-start: 0; }

  /* Modals fit the viewport */
  .modal { width: min(680px, 92vw); }
  .fbmodal { width: min(860px, 94vw); height: min(82vh, 720px); }
  .modal-backdrop { padding: 20px; }
}
@media (min-width: 900px) and (max-width: 1024px) {
  #hkpi .kpirow, #offkpi .kpirow { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
}
/* Portrait tablet: default collapsed sidebar for max table width; nav-open EXPANDS */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
  .sidebar { width: 60px; padding-inline: 8px; }
  .sidebar .label, .sidebar .nav a > :not(svg):not(.dot) { display: none; }
  .sidebar .nav a { justify-content: center; padding: 11px 0; }
  .detail.open.full { inset-inline-start: 120px; }
  body.nav-open .sidebar { width: 188px; padding-inline: 14px; }
  body.nav-open .sidebar .label, body.nav-open .sidebar .nav a > :not(svg):not(.dot) { display: revert; }
  body.nav-open .sidebar .nav a { justify-content: flex-start; padding: 11px 13px; }
  body.nav-open .detail.open.full { inset-inline-start: 244px; }
  .kpis, .kpirow, #hkpi .kpirow, #offkpi .kpirow { grid-template-columns: repeat(2, 1fr) !important; }
  .detail.open:not(.full) { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(400px, 70vw); z-index: 22; box-shadow: -14px 0 36px -22px rgba(20,45,70,.45); }
}
@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
  .content { padding: 22px 26px 34px; }
  .detail.open { width: 380px; }
}
@media (min-width: 641px) and (max-width: 1024px) and (pointer: coarse) {
  .hn-copy, .hn-sync, .hn-collect { width: 26px; height: 26px; opacity: .9; }
  .fbdl { width: 32px; height: 30px; }
  .enr-seg-b, .viewtoggle button { padding-block: 10px; }
  .btn-sm { height: 40px; }
  .hard-stat { padding-block: 8px; }
  .iconbtn { width: 40px; height: 40px; }
}

/* ─────────── PHONE (≤640) — drawer kept; topbar compressed; tables → card rows ─────────── */
@media (max-width: 640px) {
  :root { --field-h: 44px; --field-h-sm: 40px; }

  /* Extend the base off-canvas drawer down to 640 (base drops rail at ≤900) */
  .hamburger { display: grid; width: 44px; height: 44px; }
  .rail { display: none; }
  .topbar { height: 54px; gap: 10px; padding-inline: 12px; }
  .topbar .logo { font-size: 18px; }
  .topbar .logo::after { display: none; }
  .shell { inset-block-start: 54px; }
  .sidebar { position: fixed; inset-block: 54px 0; inset-inline-start: 0; width: min(300px, 88vw); transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1); z-index: 47; box-shadow: -12px 0 40px -12px rgba(20,45,70,.5); border-inline-start: 0; padding-inline: 14px; }
  body.nav-open .sidebar { transform: translateX(0); }
  .nav-backdrop { display: block; position: fixed; inset: 54px 0 0; }

  /* Topbar: search → 44px icon (expands via .search-open), avatar kept, logout → power icon */
  .topbar .search { display: flex; flex: 0 0 auto; width: 44px; max-width: none; height: 44px; padding-inline: 0; justify-content: center; border-radius: 12px; }
  .topbar .search input { display: none; }
  .topbar.search-open .search { flex: 1 1 auto; width: auto; justify-content: flex-start; padding-inline: 14px; }
  .topbar.search-open .search input { display: block; }
  .topbar.search-open .logo { display: none; }
  .topbar .avatar { width: 38px; height: 38px; }
  .topbar .rolechip { display: none; }
  .topbar .logout { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; font-size: 0; border-radius: 10px; background: rgba(255,255,255,.12); }
  .topbar .logout::before { content: '⏻'; font-size: 17px; line-height: 1; }
  .topbar.search-open .user { display: none; }

  /* Page rhythm */
  .content { padding: 14px 12px 30px; }
  .content-head { margin-bottom: 14px; gap: 10px; flex-wrap: wrap; }
  .content-head h1 { font-size: 20px; }
  .content-head .sub { font-size: 12.5px; }
  .content-head > .btn, .content-head .btn-blue, .content-head .btn-green, .content-head .viewtoggle { width: 100%; }
  .viewtoggle button { flex: 1; justify-content: center; min-height: 42px; }

  /* KPIs → 2 cols */
  .kpis, .kpirow { grid-template-columns: 1fr 1fr; gap: var(--m-cardgap); margin-bottom: 16px; }
  .kpi { padding: 13px 14px; gap: 11px; border-radius: 10px; }
  .kpi:hover { transform: none; }
  .kpi-ic { width: 40px; height: 40px; }
  .kpi-val { font-size: 22px; }
  .pill { padding: 3px 9px; }
  .inst-badge, .office-badge, .find-badge { height: 20px; padding-inline: 8px; }
  .au-integrity { width: 100%; justify-content: center; box-sizing: border-box; }

  /* Deploy hero → stack */
  .deploy { padding: 16px; }
  .deploy .row { flex-direction: column; align-items: stretch; gap: 12px; }
  .deploy .row .btn, .deploy .links .btn { width: 100%; }
  .deploy .links { flex-direction: column; }
  .deploy .hint { margin-inline-start: 0; text-align: center; }

  /* DATA TABLES → STACKED CARD ROWS (content + Intune mirror) */
  .content .card > table, #icontent > table { display: block; min-width: 0; width: 100%; border-collapse: separate; overflow-x: visible; }
  .content .card:has(> table) { overflow-x: visible; }
  .content .card > table > thead, #icontent > table > thead { display: none; }
  .content .card > table > tbody, #icontent > table > tbody { display: block; }
  .content .card > table > tbody > tr, #icontent > table > tbody > tr {
    display: block; margin: 12px; padding: 6px 4px; background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow-card); cursor: pointer;
  }
  .content .card > table > tbody > tr.selected, #icontent > table > tbody > tr.selected { box-shadow: inset 3px 0 0 var(--blue-link), var(--shadow-card); background: var(--tint2); }
  .content .card > table > tbody > tr > td, #icontent > table > tbody > tr > td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px;
    border-bottom: 1px solid var(--border); font-size: 13.5px; text-align: end; min-height: 40px;
  }
  .content .card > table > tbody > tr > td:last-child, #icontent > table > tbody > tr > td:last-child { border-bottom: 0; }
  .content .card > table > tbody > tr > td[data-label]::before, #icontent > table > tbody > tr > td[data-label]::before {
    content: attr(data-label); flex: none; margin-inline-end: 12px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase; color: var(--muted); text-align: start; white-space: nowrap;
  }
  .content .card > table > tbody > tr > td:first-child, #icontent > table > tbody > tr > td:first-child {
    justify-content: flex-start; text-align: start; font-weight: 600; padding: 11px 12px; background: var(--tint);
    border-radius: 11px 11px 0 0; border-bottom: 1px solid var(--border);
  }
  .content .card > table > tbody > tr > td:first-child::before { content: none; }
  .content .card > table .hostcell, .content .card > table .hostcell .hn-block { min-width: 0; }
  .content .card > table .hostcell .hn-text { white-space: normal; }
  /* Empty-state cell spans full row, no card chrome */
  .content .card > table > tbody > tr > td.empty, #icontent > table > tbody > tr > td.empty { display: block; text-align: center; background: transparent; border-radius: 0; padding: 40px 20px; }
  .content .card > table > tbody > tr > td.empty::before { content: none; }
  .content .card > table > tbody > tr:has(> td.empty), #icontent > table > tbody > tr:has(> td.empty) { margin: 0; border: 0; box-shadow: none; background: transparent; }
  /* Enroll usage bar / selects inside card rows */
  .content .card > table .enr-use { width: 100%; justify-content: flex-end; }
  .content .card > table .enr-bar { max-width: 120px; }
  .content .card > table .grp-select, .content .card > table .hard-stat { max-width: none; width: auto; min-height: 40px; }

  /* Hardening paired rows */
  .hard-table > tbody > tr.hard-row { position: relative; padding-top: 40px; }
  .hard-table > tbody > tr.hard-row > td:first-child { position: absolute; inset-block-start: 8px; inset-inline-start: 8px; width: auto; background: transparent; border: 0; padding: 0; min-height: 0; }
  .hard-table > tbody > tr.hard-row > td:nth-child(2) { justify-content: flex-start; text-align: start; padding-inline-start: 44px; background: var(--tint); border-radius: 11px 11px 0 0; }
  .hard-table > tbody > tr.hard-detail { margin: -12px 12px 12px; padding: 0; border-radius: 0 0 12px 12px; box-shadow: var(--shadow-card); }
  .hard-table > tbody > tr.hard-detail.hidden { display: none; }
  .hard-table > tbody > tr.hard-detail > td { display: block; padding: 0; border: 0; }
  .hard-table > tbody > tr.hard-detail > td:first-child { display: none; }
  .hard-table > tbody > tr.hard-detail > td::before { content: none; }
  .hard-notes { flex-direction: column; align-items: stretch; }
  .hard-notes textarea, .hard-notes .btn, .hard-stat { min-width: 0; width: 100%; }
  .hard-exp { min-width: 32px; min-height: 32px; }
  .hard-prog { margin-bottom: 14px; }

  /* In-drawer dense tables + file-browser + remote-history OPT OUT (scroll) */
  .dbody table { display: table; min-width: 480px; }
  .dbody > div[style*="overflow"] { overflow-x: auto; }
  .rhtbl { display: block; overflow-x: auto; white-space: nowrap; }
  .fbtable { display: table; min-width: 420px; }
  .fbbody { overflow: auto; }

  /* Device detail drawer → full-screen sheet */
  .detail.open, .detail.open.full { position: fixed; inset: 54px 0 0; width: 100%; z-index: 45; border-inline-end: 0; box-shadow: none; inset-inline-start: 0; animation: none; }
  .detail.open.full .dhead, .detail.open.full .dbody { padding-inline: 16px; }
  .detail.open.full .dbody { padding-block: 16px; }
  .detail .dhead { padding: 14px 16px; flex-wrap: wrap; }
  .dhh { gap: 12px; width: 100%; }
  .dhh .devwrap, .dhh-idcol .devwrap { width: 64px; height: 64px; }
  .dhh-meta { gap: 6px; }
  .detail .close { position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 40px; height: 40px; }
  .detail.open.full .kv { max-width: none; }
  .detail.open.full .kv .k { min-width: 120px; }
  .dsec { padding: 14px 14px 16px; }
  .detail .tabs button { padding: 14px 8px; min-height: 46px; }
  .dgrid { grid-template-columns: 1fr 1fr; }
  .dgrid-primary .btn, .dgrid .btn { min-height: 44px; }
  .healthbar { grid-template-columns: repeat(2, 1fr); gap: 10px; }

  /* Forms → single column */
  .pkgform .frow { flex-direction: column; gap: 0; }
  .pkgform .fld { min-width: 0; width: 100%; }
  .pkgform .pkgactions { flex-wrap: wrap; }
  .pkgform .pkgactions .btn, .pkgform .buildbar .dlrow .btn { flex: 1 1 100%; min-height: 44px; }
  .pkgform .frow > .pkfld, .pkfld { width: 100%; }
  .pkgform .chips { gap: 8px; }
  .pkgform .chip, .fbdrive { padding: 8px 12px; }
  .enr-form { flex-direction: column; align-items: stretch; gap: 12px; }
  .enr-f { width: 100%; }
  .enr-f input, .enr-f select, .enr-seg { width: 100%; min-width: 0; min-height: 44px; }
  .enr-grow { min-width: 0; }
  .enr-seg-b { flex: 1; text-align: center; min-height: 44px; }
  .enr-go, .enr-form > .btn, .enr-form .btn { width: 100%; min-height: 44px; }
  .enr-new-cmd { flex-direction: column; align-items: stretch; }
  .enr-new-cmd code { min-width: 0; }
  #rlEmail, #rlRole { width: 100% !important; min-width: 0 !important; min-height: 44px; }
  .fbbar input { width: 100%; min-width: 0; }

  /* Modals → full-screen sheets */
  .modal, .modal-backdrop .modal { width: 100%; max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .modal-backdrop { padding: 0; }
  .modal-head { padding: 14px 16px; }
  .modal-head h2 { font-size: 16px; }
  .modal-body { padding: 8px 14px 14px; }
  .modal-foot { flex-wrap: wrap; gap: 8px; padding: 12px 16px; }
  .modal-foot .btn { flex: 1 1 auto; min-height: 44px; }
  .fbmodal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; }
  .fbbar { gap: 6px; }
  .fbbar .btn { flex: 1 1 auto; min-height: 40px; }
  .fbdrives { gap: 6px; }
  .gkv { flex-direction: column; gap: 2px; }
  .gkv .gk { min-width: 0; }
  .gf-valrow { flex-wrap: wrap; }
  .gf-val { max-width: 100%; overflow-wrap: anywhere; }

  /* Intune tabs → horizontal strip */
  #itabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #itabs::-webkit-scrollbar { display: none; }
  #itabs button { white-space: nowrap; flex: none; min-height: 44px; }

  /* Floating stacks hug the edge */
  #upstack { inset-inline: 12px auto; inset-block-end: 12px; width: calc(100vw - 24px); }
  .toast { inset-inline: 12px auto; inset-block-end: 16px; max-width: calc(100vw - 24px); }
  .uppanel { width: min(300px, calc(100vw - 24px)); }
  .off-channels { gap: 6px; }
  .od-vergrid { grid-template-columns: 1fr 1fr; }

  /* Icon-button touch targets */
  .hn-copy, .hn-sync, .hn-collect { width: 30px; height: 30px; opacity: 1; }
  .fbdl { width: 32px; height: 30px; }
  .bs-a, .bs-x { width: 32px; height: 30px; }
  .iconbtn { width: 44px; height: 44px; }
  .close { width: 34px; height: 34px; }
  .btn-sm { min-height: 40px; }
}

/* ─────────── VERY SMALL PHONES (≤400) ─────────── */
@media (max-width: 400px) {
  .kpis, .kpirow { grid-template-columns: 1fr; }
  .kpi-val { font-size: 21px; }
  .content-head h1 { font-size: 19px; }
  .dgrid { grid-template-columns: 1fr; }
  .healthbar { grid-template-columns: 1fr 1fr; }
  .od-vergrid { grid-template-columns: 1fr; }
  .content .card > table > tbody > tr > td[data-label] { flex-wrap: wrap; row-gap: 2px; }
}

/* ─────────── COARSE POINTER — reinforce tap floor ─────────── */
@media (hover: none) and (pointer: coarse) {
  .hn-copy, .hn-sync, .hn-collect { width: 30px; height: 30px; opacity: 1; }
  .hn-collect, .fbdl, .bs-x, .bs-a, .gf-copy { min-width: 30px; min-height: 30px; }
  .sidebar .nav a { min-height: 46px; }
  .hard-exp, .pkgform .chip, .fbdrive { padding: 8px 12px; }
}

/* ─────────── REDUCED MOTION ─────────── */
@media (prefers-reduced-motion: reduce) {
  .btn, .hn-copy, .hn-sync, .hn-collect, .fbdl, .gf-copy, .bs-a, .bs-x, .iconbtn, .upx, .close, .gh-btn, .up-clear, .hard-exp, .userpick, .pkgform .chip, .fbdrive, .rv-cf-dl {
    transition: background .01ms, color .01ms, border-color .01ms, box-shadow .01ms;
  }
  .btn:active:not(:disabled), .hn-copy:active, .hn-sync:active, .hn-collect:active, .fbdl:active, .bs-a:active, .bs-x:active, .iconbtn:active, .hard-exp:active, .pkgform .chip:active, .fbdrive:active { transform: none; }
}

/* ─────────── PRINT — disable sticky headers ─────────── */
@media print {
  .content .card > table > thead > tr > th, .dbody table thead th, .groupsec .grouphead { position: static; box-shadow: none; }
  .content .card:has(> table) { overflow: visible; }
}
/* ── QA critique patches (appended after, wins on order) ── */
/* ============================================================================
   QA PATCH — appended AFTER the proposed elevation block (wins on source order).
   Fixes: (1) RTL select-caret side, (2) table card double-axis scroll + sticky,
   (3) remote-viewer #rlRole rv-sel2 self-sufficiency + dark-UI guard,
   (4) small responsive/coverage gaps.
   ============================================================================ */

/* (1) RTL SELECT CARET — the document is dir="rtl". Reserve the gutter and paint
   the chevron on the SAME (inline-start = visual RIGHT) side. Overrides the
   proposed default which mis-placed the caret on the physical left. */
[dir="rtl"] .pkgform select,
[dir="rtl"] .pkfld select,
[dir="rtl"] .enr-f select,
[dir="rtl"] .hard-stat,
[dir="rtl"] .grp-select,
[dir="rtl"] #rlRole {
  background-position: right var(--field-pad-x, 12px) center;
  padding-inline: 34px 12px;   /* gutter on inline-start (visual right in RTL) */
}
/* keep LTR correct if dir ever flips */
html[dir="ltr"] .pkgform select,
html[dir="ltr"] .pkfld select,
html[dir="ltr"] .enr-f select,
html[dir="ltr"] .hard-stat,
html[dir="ltr"] .grp-select,
html[dir="ltr"] #rlRole {
  background-position: left var(--field-pad-x, 12px) center;
  padding-inline: 12px 34px;
}

/* (2) TABLE-CARD SCROLL — do NOT let the card become a vertical scroll box (which
   forces overflow-y:visible -> auto and breaks sticky theads / grouphead and clips
   overflowing chrome). Constrain vertical scrolling to .content; card scrolls X only. */
.content .card:has(> table) { overflow-y: clip; }         /* clip, not auto */
@supports not (overflow: clip) {
  .content .card:has(> table) { overflow-y: hidden; }
}
/* If vertical sticky is not reliably supported inside the x-scroll card, keep the
   header readable without a broken stick: neutralize sticky on very small screens
   where the card becomes card-rows anyway (thead is display:none there). */
@media (max-width: 640px) {
  .content .card > table > thead > tr > th,
  #icontent table > thead > tr > th,
  .groupsec .grouphead,
  .groupsec .card > table > thead > tr > th { position: static; }
}

/* (3) REMOTE-VIEWER SELF-SUFFICIENCY — make #rlRole light even if the markup still
   carries class rv-sel2, WITHOUT touching the backstage dark shell (#bsShell) or
   any other .rv-sel2 in the remote viewer. */
#rlRole.rv-sel2 {
  background-color: #fff; color: var(--text);
  border: 1px solid var(--input-border); border-radius: var(--radius-ctrl);
}
#rlRole.rv-sel2 option { background: #fff; color: var(--text); }
/* Guard the dark Remote Access viewer from the new light field/button system:
   the elevation pass' field surface + focus rings must never bleed onto .rv-* .*/
.rv select, .rv .rv-sel, .rv .rv-sel2, .rv input, .rv textarea {
  background-image: none;                 /* kill the light chevron data-URI */
}
.rv .rv-sel2, .rv-bar .rv-sel, .rv .rv-sel {
  background-color: #0f2233; color: #EAF2FA;
}
/* remote viewer icon-buttons keep their own (light-on-dark) focus ring only */
.rv .rv-cf-dl:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.45); }

/* (4a) KPI default accent — restore base intent (hidden unless a tone is set),
   so the plain/info KPI doesn't grow an unexpected bar. Tones still show it. */
.kpi:not(.green):not(.ok):not(.danger):not(.warn):not(.muted):not(.blue):not(.info)::after {
  opacity: 0;
}

/* (4b) Coverage: .dactions gets the same phone treatment as the new content-head. */
@media (max-width: 640px) {
  .dactions { display: flex; flex-wrap: wrap; gap: 8px; }
  .dactions .btn { flex: 1 1 100%; min-height: 44px; }
  /* drawer-internal dense blocks stay usable: let long guide/office rows wrap */
  .od-vergrid { grid-template-columns: 1fr 1fr; }
  .gkv { flex-direction: column; gap: 2px; }
}

/* (4c) Do not force not-allowed cursor onto the dark remote viewer's own disabled
   toggles (base set cursor:default there intentionally). */
.rv button:disabled, .rv-bar button:disabled { cursor: default; }

/* (4d) Between 561-640 make the phone topbar rebuild robust regardless of order:
   the search icon must remain visible (base hides it only at <=560). */
@media (min-width: 561px) and (max-width: 640px) {
  .topbar .search { display: flex; }
  .topbar .logout { display: inline-grid; }
}
/* ── end UI/UX elevation pass ── */

/* ── HOTFIX 2026-08-15: the elevation pass made group/table headers position:sticky,
   which floated the folder header (.grouphead) over the first endpoint on the agents
   page as you scroll. Keep the header STYLING; revert to normal (static) scroll. ── */
.content .card > table > thead > tr > th,
#icontent table > thead > tr > th,
.groupsec .grouphead,
.groupsec .card > table > thead > tr > th,
.dbody table thead th,
.dbody div[style*="overflow"] table thead th {
  position: static;
  inset-block-start: auto;
}

/* ── Endpoints grouping — Phase 1 (colors/icons · filter chips · folder editor) ── */
.content { scroll-padding-top: 44px; } /* 1A: keep Tab/deep-link focus clear of chrome */
.grouphead .gh-ic { font-size: 15px; line-height: 1; }
.grouphead.gcolored { position: relative; padding-inline-start: 14px; }
.grouphead.gcolored::before { content: ''; position: absolute; inset-block: 6px; inset-inline-start: 3px; width: 3px; border-radius: 3px; background: var(--gc, var(--border2)); }
.fchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 16px; border: 1px solid var(--border2); background: #fff; color: var(--text); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.fchip:hover { background: var(--tint); border-color: var(--blue-link); }
.fchip.on { background: var(--blue-link); border-color: var(--blue-link); color: #fff; }
.fchip-n { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: rgba(0,0,0,.06); font-variant-numeric: tabular-nums; }
.fchip.on .fchip-n { background: rgba(255,255,255,.25); }
.fchip-clear { color: var(--muted); border-style: dashed; }
.gedit-back { position: fixed; inset: 0; z-index: 200; background: rgba(20,40,60,.35); display: grid; place-items: center; }
.gedit { width: min(340px, 92vw); background: #fff; border-radius: var(--radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; }
.gedit-h { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.gedit-l { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.gedit-name { font: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--border2); border-radius: var(--radius-ctrl); background: #fff; color: var(--text); }
.gedit-name:focus { outline: 0; border-color: var(--blue-link); }
.gedit-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.gsw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.gsw.on { border-color: var(--text); box-shadow: inset 0 0 0 2px #fff; }
.gic { width: 32px; height: 32px; border-radius: var(--radius-ctrl); border: 1px solid var(--border2); background: #fff; font-size: 16px; cursor: pointer; line-height: 1; }
.gic.on { border-color: var(--blue-link); background: var(--tint2); }
.gedit-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ── Endpoints multi-select + bulk (Phase 1C) ── */
.cbcell { width: 40px; padding-inline: 12px 0 !important; text-align: center; }
.rowcb, .cb-all { width: 16px; height: 16px; accent-color: var(--blue-link); cursor: pointer; margin: 0; vertical-align: middle; }
tr.rowsel > td { background: #EAF4FC; }
tr.rowsel:hover > td { background: #DCEEFB; }
.bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; width: 100%; background: #EAF2F9; border: 1px solid var(--border2); border-radius: 10px; }
.bulkbar .bb-count { font-weight: 700; color: var(--blue-link); font-variant-numeric: tabular-nums; }
.bulkbar .bb-sep { width: 1px; align-self: stretch; background: var(--border2); }
.bulkbar .bb-danger { color: var(--danger); }
.bulkbar .bb-danger:hover { background: rgba(255,21,31,.08); border-color: rgba(255,21,31,.3); }
.gmove-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; margin-top: 4px; }
.gmove { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--radius-ctrl); background: #fff; color: var(--text); font: inherit; font-size: 14px; cursor: pointer; text-align: start; }
.gmove:hover { background: var(--tint); border-color: var(--blue-link); }
.gmove-c { width: 12px; height: 12px; border-radius: 3px; flex: none; }
/* Recommended tenant (defaulted from the endpoint's assigned user) — highlighted, still clickable. */
.gmove-rec { border-color: var(--blue-link); background: rgba(0,147,238,.06); box-shadow: inset 0 0 0 1px var(--blue-link); font-weight: 600; }
.gmove[disabled] { opacity: .5; cursor: not-allowed; }
@media (max-width: 760px) { .cbcell { width: 34px; } }

/* ── Login-page: new-computer self-install ── */
.newpc { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }
.newpc .linklike { color: var(--blue-link); font-size: 13px; cursor: pointer; }
/* Post-sign-in installer download (revealed only after a non-admin org user signs in). */
.newpc-box { margin-top: 14px; text-align: start; }
/* Informational caption for warehouse users — plain text, NOT a clickable control. */
.newpc-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
/* End-user guide (login page): 4-step numbered card, always visible, RTL/LTR aware. */
.newpc-guide { margin-top: 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--blue-soft, #EAF4FC); text-align: start; }
.newpc-guide .ng-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.newpc-guide .ng-steps { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 7px; }
.newpc-guide .ng-steps li { font-size: 12.5px; line-height: 1.5; color: var(--text2, #2c4055); }
.newpc-guide .ng-steps li::marker { color: var(--blue-link); font-weight: 700; }
/* Security-prompt helper (SmartScreen + UAC) under the steps — muted, compact. */
.newpc-guide .ng-prompts { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--border); }
.newpc-guide .ngp-title { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.newpc-guide .ng-plist { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 5px; list-style: '⬇ '; }
.newpc-guide .ng-plist li { font-size: 12px; line-height: 1.45; color: var(--text2, #2c4055); }
.newpc-hint { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 10px; }
.newpc-row { display: flex; gap: 8px; }
.newpc-row input { flex: 1; height: 42px; border: 1px solid var(--input-border); border-radius: var(--radius-ctrl); padding-inline: 12px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; }
.newpc-row input:focus { outline: 0; border-color: var(--blue-link); }
.newpc-row .btn { white-space: nowrap; }
#newpcErr { font-size: 12px; margin-top: 8px; }

/* ── Login-screen language switcher (EN default · Hebrew · Russian) ── */
.langsw { display: flex; gap: 6px; justify-content: center; margin-top: 12px; }
.langsw button { border: 1px solid var(--border2); background: #fff; color: var(--muted); font: inherit; font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 14px; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.langsw button:hover { border-color: var(--blue-link); color: var(--blue-link); }
.langsw button.active { background: var(--blue-link); border-color: var(--blue-link); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE / RESPONSIVE — CONSOLIDATION PASS (2026-08-18)
   Appended LAST so it wins ties over earlier phone blocks without editing them.
   Contract breakpoints: primary @media (max-width:640px), tighter (max-width:420px).
   ─ CSS/HTML only (no app.js) · additive · every rule scoped inside a max-width
     media query so DESKTOP (>640px) is never touched.
   ─ RTL stays correct: only logical props (inset-inline-*, padding-inline-*,
     border-inline/block-*, text-align:start/end); direction itself is flipped in JS.
   ─ Table→card "mstack": the reflow rules also key on `table.mstack`, so if a
     wide table gains class="mstack" in the markup it cards up automatically. The
     data-label ::before labels come from the existing MutationObserver.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Global horizontal-scroll guard ───────────────────────────────────────
   The app shell is position:fixed and login is the only normal-flow surface;
   nothing legitimately overflows the viewport horizontally, so clipping any
   momentary off-canvas element (drawer at translateX(100%), toasts, popovers)
   is desktop-safe. Do NOT put overflow-x:hidden on .content/.shell — they own
   their own scroll. */
html, body { max-width: 100%; }
@media (max-width: 640px) {
  html, body { overflow-x: hidden; overscroll-behavior-x: contain; }
}

@media (max-width: 640px) {
  /* ─── LOGIN GATE: scroll instead of center-and-clip ──────────────────────
     Base .login is `position:fixed; display:grid; place-items:center` (line 354)
     with a tall .box (brand + guide + prompts + MS button + download). On a phone
     that column exceeds the viewport and the primary buttons become unreachable.
     Switch to a scrollable block flow on small screens. */
  .login { display: block; place-items: initial; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 0; }
  .login .box { width: min(400px, calc(100vw - 24px)); margin: 0 auto; margin-inline: auto; }
  /* Primary login actions to a >=48px tap target (only within .login; global
     .btn stays 42px per the Figma system). They are already width:100%. */
  .login .btn { min-height: 48px; }

  /* Language switcher pills → >=44px tap targets, allowed to wrap. */
  .langsw { gap: 8px; flex-wrap: wrap; }
  .langsw button { min-height: 44px; padding: 10px 16px; font-size: 13px; }

  /* ─── Universal tap-target floor (>=44px) for the controls the audit named ──
     Kept inside the media query so desktop sizing is unchanged. */
  .sidebar .nav a { min-height: 44px; }
  .detail .tabs button { min-height: 46px; }
  .grouphead .gh-btn {
    min-width: 40px; min-height: 40px; padding: 6px 8px; font-size: 15px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .grouphead .gh-btn + .gh-btn { margin-inline-start: 2px; }

  /* ─── Grouped-folder header (.grouphead): wrap so name + actions never overflow.
     .gh-name gets min-width:0 so a long Hebrew name can shrink; the count drops to
     its own wrapped line. This kills the horizontal page-scroll at depth. */
  .grouphead { flex-wrap: wrap; gap: 6px 8px; padding: 9px 10px; }
  .grouphead .gh-name { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .grouphead .gh-count { flex: 0 0 100%; font-size: 11px; }
  .grouphead .gh-ic .gflag { height: 20px; }

  /* ─── Nested-folder indentation: reduce so deep cards stay wide (no page scroll).
     Keep the border-inline-start rail as the nesting cue. */
  .groupsec[style*="--depth"] { margin-inline-start: calc(var(--depth, 0) * 10px); }
  .groupsec[style*="--depth"]:not([style*="--depth:0"]) { padding-inline-start: 6px; }

  /* ─── Endpoints card-reflow polish (works with the existing .content .card>table
     reflow at line 1836, and also with an explicit table.mstack). ────────────── */
  /* Host block must WRAP (not truncate) inside a card so the per-row copy/sync/
     collect buttons + install/office/findings badges stay visible & tappable. */
  .content .card > table .hostcell .hn-block,
  .content .card > table .hostcell .hn-line {
    overflow: visible; white-space: normal; flex-wrap: wrap;
  }
  /* Enlarge the per-row icon buttons to a 44px hit area (glyph stays ~30px). */
  .content .card > table .hn-line { row-gap: 6px; column-gap: 6px; }
  .content .card > table .hn-copy,
  .content .card > table .hn-sync,
  .content .card > table .hn-collect { min-width: 44px; min-height: 44px; }
  /* In-card folder dropdown + user-picker → full width, 44px, name may wrap. */
  .content .card > table .grp-select { width: 100%; min-height: 44px; max-width: none; }
  .content .card > table .userpick { max-width: none; min-height: 44px; }
  .content .card > table .userpick .up-name { white-space: normal; }
  /* Let long OS / mono (IP) values wrap so a card never pushes past the viewport. */
  .content .card > table > tbody > tr > td[data-label] { flex-wrap: wrap; row-gap: 2px; }
  .content .card > table td.mono { white-space: normal; overflow-wrap: anywhere; }

  /* ─── .mstack table→card reflow (identity cell = 2nd child when 1st is a
     checkbox). Inert until a <table> carries class="mstack"; mirrors the
     .content .card > table card chrome. Applies both in .content and in .dbody. */
  table.mstack { display: block; min-width: 0; width: 100%; border-collapse: separate; }
  table.mstack > thead { display: none; }
  table.mstack > tbody { display: block; }
  table.mstack > tbody > tr {
    display: block; position: relative; margin: 12px 0; padding: 6px 4px;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card, var(--shadow));
  }
  table.mstack > tbody > tr > td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px;
    text-align: end; min-height: 40px; white-space: normal; width: auto;
  }
  table.mstack > tbody > tr > td:last-child { border-bottom: 0; }
  table.mstack > tbody > tr > td[data-label]::before {
    content: attr(data-label); flex: none; margin-inline-end: 12px; font-size: 10.5px;
    font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--muted);
    text-align: start; white-space: nowrap;
  }
  /* First non-checkbox cell becomes the tinted card header. */
  table.mstack > tbody > tr > td.cbcell {
    position: absolute; inset-block-start: 8px; inset-inline-start: 8px; width: auto;
    min-height: 0; padding: 0; background: transparent; border: 0;
  }
  table.mstack > tbody > tr > td.cbcell::before { content: none; }
  table.mstack > tbody > tr:has(> td.cbcell) > td:nth-child(2),
  table.mstack.hdr-first > tbody > tr > td:first-child {
    justify-content: flex-start; text-align: start; font-weight: 600;
    background: var(--tint); border-radius: 11px 11px 0 0; padding-inline-start: 44px;
  }
  table.mstack > tbody > tr:has(> td.cbcell) > td:nth-child(2)::before,
  table.mstack.hdr-first > tbody > tr > td:first-child::before { content: none; }

  /* ─── In-drawer dense tables (.dbody): keep them tabular but guarantee the wide
     child scrolls INSIDE its card rather than widening the sheet. The base rule
     only matched direct children of .dbody; broaden to any nested overflow wrapper
     and hard-clamp the section card. */
  .dbody div[style*="overflow"], .dsec div[style*="overflow"] {
    overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  .dsec { overflow: hidden; min-width: 0; }
  /* Long unbreakable mono values (Machine ID / IP) inside kv rows must wrap. */
  .detail.open.full .kv, .dbody .kv { flex-wrap: wrap; }
  .detail.open.full .kv .v, .dbody .kv .v { min-width: 0; overflow-wrap: anywhere; word-break: break-word; text-align: start; }

  /* Detail-drawer back control (#dclose) → explicit 44px, glyph bumped; reserve
     header space so a wrapped title can't slide under it. Wins over the 40px and
     the generic 34px .close rules in the earlier 640 block (later source order). */
  .detail .close {
    position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
    width: 44px; height: 44px; font-size: 26px; border-radius: 12px;
  }
  .detail .dhead { padding-inline-end: 52px; }
  /* Assigned-user block full-width even at 421-640px (was only reset at <=380). */
  .detail .dhead .dhh-user {
    flex: 1 1 100%; max-width: none; margin-inline-start: 0; padding-inline-start: 0;
    padding-block-start: 14px; border-inline-start: 0; border-block-start: 1px solid var(--border);
  }
  /* Detail tab strip → swipeable single row (like #itabs), no page overflow. */
  .detail .tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .detail .tabs::-webkit-scrollbar { display: none; }
  .detail .tabs button { flex: 0 0 auto; white-space: nowrap; padding-inline: 16px; }
  /* Any opened #detail (Intune/package renderers that use only .open, not .full)
     also goes full-screen so it can't render at a fixed 380px and clip. */
  #detail.detail.open, #detail.detail.full {
    position: fixed; inset: 54px 0 0; inset-inline-start: 0; width: 100%; z-index: 45;
  }

  /* ─── Backstage Shell bar → wrap; command input to its own full row, 16px to
     stop iOS focus-zoom; select + run to 44px. */
  .bs-shellbar { flex-wrap: wrap; gap: 8px; }
  .bs-shellbar #bsShell { flex: 1 1 auto; min-height: 44px; }
  .bs-shellbar .bs-cmdinput { flex: 1 1 100%; order: 3; min-height: 44px; font-size: 16px; }
  .bs-shellbar #bsRun { flex: 1 1 auto; min-height: 44px; }
  .bs-cmdinput { font-size: 16px; }
  .bs-out { max-height: 40vh; font-size: 12px; overflow-wrap: anywhere; }

  /* Backstage sub-tabs → horizontal scroller (like #itabs), never overflow page. */
  .bs-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; }
  .bs-tabs::-webkit-scrollbar { display: none; }
  .bs-tab { flex: 0 0 auto; white-space: nowrap; min-height: 44px; padding: 9px 12px; }

  /* Backstage toolbar (users|groups seg + New/refresh) → wrap; seg full row. */
  .bs-toolbar { flex-wrap: wrap; gap: 8px; }
  .lu-seg { flex: 1 1 100%; }
  .lu-segb { flex: 1; min-height: 40px; text-align: center; }

  /* Backstage process/service action buttons → 44px within their (scrolling) row. */
  .bs-svcacts { gap: 8px; }
  .bs-a, .bs-x { min-width: 44px; min-height: 44px; }

  /* ─── Local users/groups: reflow the .lu-table to cards via .mstack (see rules
     above; class must be present in markup) AND enlarge the action buttons so the
     destructive controls (reset/disable/DELETE) clear the tap floor. Also override
     the .dbody 480px min-width so an mstacked lu-table can go block. */
  .dbody table.mstack { display: block; min-width: 0; }
  .lu-acts { gap: 8px; }
  .lu-btn { min-height: 44px; padding: 9px 12px; font-size: 12.5px; flex: 1 1 auto; justify-content: center; }
  .lu-members { max-width: none; }
  .lu-chip { font-size: 13px; padding: 4px 6px 4px 12px; }
  .lu-chipx { width: 28px; height: 28px; min-width: 28px; display: inline-grid; place-items: center; font-size: 18px; }

  /* Licensing lu-table wrapper (bare overflow div) — ensure it scrolls in place. */
  .lu-table { min-width: 0; }

  /* ─── User-picker popover → bottom sheet on phones (JS also guards its inline
     positioning). !important overrides the inline top/right the JS may still set. */
  .uppanel {
    position: fixed; inset: auto 8px 8px 8px !important; width: auto !important;
    max-height: 60vh; max-width: none;
  }

  /* ─── Autopilot / destructive action grid → single full-width column so the
     wipe/OOBE-reset controls can't be mis-tapped as neighbours; >=48px. */
  .dgrid-ap { grid-template-columns: 1fr; }
  .dgrid-ap .btn { min-height: 48px; }

  /* ─── Folder editor (.gedit) → bottom-sheet, scrollable so Save/Cancel are always
     reachable (base .gedit-back centers with no scroll → clipping with keyboard). */
  .gedit-back { place-items: end center; overflow-y: auto; padding: 0; -webkit-overflow-scrolling: touch; }
  .gedit {
    width: 100%; max-width: 100%; max-height: 88vh; overflow-y: auto;
    border-radius: 16px 16px 0 0; -webkit-overflow-scrolling: touch;
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .gedit-btns { position: sticky; bottom: 0; background: #fff; margin-top: 12px; padding-top: 10px; }
  /* Editor swatches/icons/flags → tap-friendly. */
  .gedit .gic { width: 44px; height: 44px; font-size: 18px; }
  .gedit .gsw { width: 36px; height: 36px; }
  .gedit .gic-flag img { height: 26px; }
  .gedit-row { gap: 10px; }

  /* Move-to-folder picker rows → >=44px, labels ellipsize (indent is inline in JS). */
  .gmove { min-height: 44px; }
  .gmove .gflag { height: 18px; }

  /* ─── iOS no-zoom-on-focus: any focused field <16px makes Safari zoom the page
     and leaves it zoomed (breaks the no-horizontal-scroll invariant). Bump every
     modal/editor field to exactly 16px (barely above the current 14-15px). */
  .lu-i, .gedit-name, .gedit-parent, .gmove, .fbbar input,
  .modal-body input:not([type=checkbox]):not([type=radio]),
  .modal-body select, .modal-body textarea { font-size: 16px; }

  /* Modals / editors fit + scroll on small screens (base .modal already becomes a
     full-screen sheet; ensure lu-form & fbmodal can scroll their bodies). */
  .lu-form { max-height: 100%; }
  .fbmodal { width: 100vw; height: 100vh; max-height: 100vh; }
}

/* ─────────── TIGHTER — VERY SMALL / WIDEST-MAINSTREAM PHONES (<=420) ───────────
   Common Android widths are 360-414px CSS px; fire the single-column collapse and
   space-tightening here (the older 400px block still applies too; these reinforce). */
@media (max-width: 420px) {
  /* Single-column collapse for the widest phones the 400px block missed. */
  .kpis, .kpirow { grid-template-columns: 1fr; }
  .dgrid { grid-template-columns: 1fr; }
  .healthbar { grid-template-columns: 1fr 1fr; }
  .od-vergrid { grid-template-columns: 1fr; }

  /* Login: reclaim horizontal space + tighten padding/logo/brand. */
  .login .box { width: calc(100vw - 20px); padding: 24px 18px; }
  .login .box::before { width: 46px; height: 46px; margin-bottom: 12px; }
  .login .brand { font-size: 24px; }
  /* The always-visible 4-step guide is the tallest login element — tighten it. */
  .newpc-guide { padding: 12px 12px; margin-top: 14px; }
  .newpc-guide .ng-steps { padding-inline-start: 18px; gap: 6px; }
  .newpc-guide .ng-plist { padding-inline-start: 16px; }
  .newpc-guide .ng-steps li, .newpc-guide .ng-plist li { font-size: 12px; }

  /* Deeper indent reduction so depth-3/4 folders don't cramp cards on 360px. */
  .groupsec[style*="--depth"] { margin-inline-start: calc(var(--depth, 0) * 6px); }
}


/* ── Mobile polish (post-audit fixes 2026-08-18) — tap targets, iOS input-zoom,
   bulk bar, and the Remote Access viewer on phones. Appended last so these win
   the cascade over the earlier mobile section. ─────────────────────────────── */
@media (max-width: 640px) {
  /* Bring the stragglers up to the 44px tap floor */
  .fchip { min-height: 44px; padding: 8px 14px; }
  .gh-btn { min-width: 44px; min-height: 44px; }
  .btn, .btn-sm { min-height: 44px; }
  .userpick { min-height: 44px; }
  /* #dclose: the id out-specifies `.detail .dhead .close` (30px) so the close is tappable */
  #dclose { width: 44px; height: 44px; font-size: 26px; }
  /* iOS focus-zoom guard: focusable text inputs must be >=16px (these two were missed) */
  .up-search input, .rv-chat-in input { font-size: 16px; }
  /* Multi-select bulk bar: real tap size + fence the destructive "revoke trust" to its own row */
  .bulkbar .btn-sm { min-height: 44px; flex: 1 1 auto; }
  .bulkbar .bb-danger { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  /* Remote Access annotation bar: one horizontally-scrollable row, drop the range slider */
  .rv-anno-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rv-anno-bar input[type="range"], .rv-anno-bar .rv-range { display: none; }
  /* Don't stack chat + uploads + clipboard on the same bottom edge — separate the three */
  .rv-uploads { inset: 8px 8px auto 8px; bottom: auto; max-height: 38vh; overflow: auto; }
  .rv-clip { inset: auto 8px calc(8px + 42vh) 8px; max-height: 28vh; overflow: auto; }
  .rv-chat { inset: auto 8px 8px 8px; max-height: 42vh; }
}