/* ============================================================
RYZEN MSP Console — Design System
Single source of truth for the UI look.
Include this globally; use these exact class names + tokens.
Do NOT introduce other colors or restyle components.
Fonts (add to ):
============================================================ */
:root{
/* surfaces */
--ink:#0E1B2A; /* sidebar background */
--ink-2:#16273A; /* sidebar hover/active */
--ink-line:#22364B; /* sidebar dividers */
--paper:#EEF2F6; /* app background */
--surface:#FFFFFF; /* cards / panels */
--line:#E3E9F0; /* borders / dividers */
/* text */
--text:#16222E;
--muted:#6B7C8F;
--muted-2:#94A6B6;
/* brand */
--brand:#2F6BE0;
--brand-soft:#E8F0FE;
--signal:#34C5D6; /* accent (active nav, logo) */
/* status */
--ok:#18935A; --ok-soft:#E4F3EB;
--warn:#C77A0A; --warn-soft:#FBF0DD;
--bad:#D63B3B; --bad-soft:#FBE6E6;
/* tiers / misc */
--purple:#6B3FC4; --purple-soft:#EDE7FB;
--wa:#25D366; /* WhatsApp */
--teal-d:#0E7C8B; --teal-s:#DDF4F8; /* method: remote = teal (onsite = amber/warn) */
/* shape */
--r:10px; --r-sm:7px; --sb:248px;
--shadow:0 1px 2px rgba(16,27,42,.04),0 4px 16px rgba(16,27,42,.05);
/* type */
--font:'Inter',system-ui,sans-serif;
--font-display:'Space Grotesk',sans-serif;
--font-mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--paper);color:var(--text);-webkit-font-smoothing:antialiased;line-height:1.5}
.mono{font-family:var(--font-mono)}
.display{font-family:var(--font-display)}
/* ---------- layout shell ---------- */
.app{display:flex;min-height:100vh}
.sidebar{width:var(--sb);background:var(--ink);color:#C8D4E0;flex-shrink:0;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;height:100vh;z-index:60;transition:transform .28s cubic-bezier(.4,0,.2,1)}
.main{flex:1;margin-left:var(--sb);min-width:0;display:flex;flex-direction:column}
.view{padding:24px 26px;max-width:1320px;width:100%}
/* ---------- brand / nav ---------- */
.brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px;border-bottom:1px solid var(--ink-line)}
.brand-mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--signal),var(--brand));display:grid;place-items:center;font-family:var(--font-display);font-weight:700;color:#06121d;font-size:15px}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:16px;color:#fff;letter-spacing:.3px}
.brand-sub{font-size:10.5px;color:var(--muted-2);letter-spacing:1.2px;text-transform:uppercase}
.nav{padding:14px 12px;flex:1;overflow-y:auto}
.nav-label{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#5E7186;padding:14px 10px 7px;font-weight:600}
.nav-item{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;border-radius:var(--r-sm);color:#A9B8C8;font-size:13.5px;font-weight:500;cursor:pointer;border:none;background:none;text-align:left;position:relative;transition:background .15s,color .15s}
.nav-item:hover{background:var(--ink-2);color:#E6EDF4}
.nav-item.active{background:var(--ink-2);color:#fff}
.nav-item.active::before{content:"";position:absolute;left:-12px;top:7px;bottom:7px;width:3px;background:var(--signal);border-radius:0 3px 3px 0}
.nav-item svg{width:17px;height:17px;stroke-width:1.8;flex-shrink:0}
.nav-badge{margin-left:auto;font-size:11px;font-weight:600;background:var(--ink-line);color:#cfdae6;padding:1px 7px;border-radius:20px}
.nav-badge.alert{background:var(--bad);color:#fff}
/* ---------- topbar ---------- */
.topbar{height:62px;background:var(--surface);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;position:sticky;top:0;z-index:40}
.page-head{min-width:0} /* let the title shrink + ellipsize instead of wrapping inside the fixed-height bar */
.page-eyebrow{font-size:11px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.page-title{font-family:var(--font-display);font-weight:600;font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--signal));color:#fff;display:grid;place-items:center;font-weight:600;font-size:13px;font-family:var(--font-display)}
.hamburger{display:none;background:none;border:1px solid var(--line);border-radius:var(--r-sm);width:38px;height:38px;cursor:pointer}
/* ---------- panel / card ---------- */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.panel-head,.ph{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel-head h3,.ph h3{font-family:var(--font-display);font-size:14px;font-weight:600}
.ph .count{font-size:12px;color:var(--muted)}
.ph .link{margin-left:auto;font-size:12px;color:var(--brand);cursor:pointer;font-weight:500}
/* ---------- KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px;margin-bottom:20px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;box-shadow:var(--shadow)}
.kpi-label{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.kpi-val{font-family:var(--font-display);font-weight:700;font-size:27px;margin-top:8px}
.kpi-foot{font-size:11px;margin-top:4px;color:var(--muted)}
/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);font-weight:600;padding:11px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody td{padding:12px 18px;border-bottom:1px solid var(--line);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}
tbody tr{cursor:pointer;transition:background .12s}
tbody tr:hover{background:#FAFBFC}
/* ---------- chips: tier / status / channel / priority ---------- */
.tier{font-size:11px;font-weight:600;padding:3px 9px;border-radius:5px}
.tier-prem{background:var(--purple-soft);color:var(--purple)}
.tier-biz{background:var(--brand-soft);color:var(--brand)}
.tier-ess{background:#EEF1F5;color:#5C6F80}
.sigdot{width:9px;height:9px;border-radius:50%;display:inline-block}
.sig-ok{background:var(--ok)} .sig-warn{background:var(--warn)} .sig-bad{background:var(--bad)}
.health{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:12.5px}
.chan{font-size:10px;font-weight:700;letter-spacing:.3px;padding:2px 7px;border-radius:5px;display:inline-flex;align-items:center;gap:4px}
.chan-wa{background:rgba(37,211,102,.13);color:#1a8f45}
.chan-email{background:var(--brand-soft);color:var(--brand)}
.chan-manual{background:#EEF1F5;color:#5C6F80}
.chan-mon{background:var(--warn-soft);color:var(--warn)}
.prio{font-size:10.5px;font-weight:700;font-family:var(--font-mono);padding:2px 7px;border-radius:5px}
.p1{background:var(--bad-soft);color:var(--bad)} .p2{background:var(--warn-soft);color:var(--warn)} .p3{background:var(--brand-soft);color:var(--brand)} .p4{background:#EEF1F5;color:#5C6F80}
.tag-cov{font-size:10px;font-weight:600;padding:1px 7px;border-radius:4px;background:var(--ok-soft);color:var(--ok)}
.tag-bil{font-size:10px;font-weight:600;padding:1px 7px;border-radius:4px;background:var(--warn-soft);color:var(--warn)}
.pill-num{font-family:var(--font-mono);background:#EEF1F5;color:#43586A;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:20px}
/* scope delivery modes */
.mode{font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px}
.mode-sch{background:var(--brand-soft);color:var(--brand)}
.mode-req{background:var(--purple-soft);color:var(--purple)}
.mode-mon{background:var(--ok-soft);color:var(--ok)}
/* ---------- buttons ---------- */
.btn{font-family:var(--font);font-size:12.5px;font-weight:600;border:none;border-radius:var(--r-sm);padding:9px 15px;cursor:pointer}
.btn-brand{background:var(--brand);color:#fff} .btn-brand:hover{background:#2459C2}
.btn-ghost{background:#fff;border:1px solid var(--line);color:var(--text)}
.btn-ok{background:var(--ok);color:#fff}
.btn-dispatch{background:var(--ink);color:#fff}
/* ---------- tabs (client account) ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tab{border:none;background:none;font-family:var(--font);font-size:13.5px;font-weight:600;color:var(--muted);padding:11px 14px;cursor:pointer;position:relative;white-space:nowrap}
.tab.on{color:var(--brand)}
.tab.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;background:var(--brand);border-radius:2px}
/* ---------- attention feed ---------- */
.feed-item{display:flex;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.feed-item:last-child{border-bottom:none}
.feed-ic{width:30px;height:30px;border-radius:8px;flex-shrink:0;display:grid;place-items:center}
.ic-bad{background:var(--bad-soft);color:var(--bad)} .ic-warn{background:var(--warn-soft);color:var(--warn)} .ic-info{background:var(--brand-soft);color:var(--brand)}
.feed-cat{font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.feed-cat.bad{color:var(--bad)} .feed-cat.warn{color:var(--warn)} .feed-cat.info{color:var(--brand)}
/* ---------- forms ---------- */
textarea,input.txt,.select{width:100%;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:10px 13px;font-family:inherit;font-size:13.5px;color:var(--text);background:var(--surface)}
textarea:focus,input.txt:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.label{font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
/* ---------- mobile / field (phone frame is for previews only) ---------- */
@media(max-width:1100px){.kpi-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){
.sidebar{transform:translateX(-100%)}
.sidebar.open{transform:none}
.main{margin-left:0}
.hamburger{display:grid;place-items:center}
.kpi-grid{grid-template-columns:repeat(2,1fr)}
.view{padding:16px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* ============================================================
App-integration helpers (additive only — no new colors, uses
the tokens above). Makes render as buttons/cards/nav and
adds layout utilities used by the Blade views.
============================================================ */
a.btn,a.nav-item,a.kpi,a.tab,.ph .link{text-decoration:none}
a.kpi{display:block;color:var(--text)}
a.nav-item{text-decoration:none}
.btn,a.btn{display:inline-block;line-height:1.3;text-align:center}
.btn-sm{padding:6px 11px;font-size:11.5px;border-radius:var(--r-sm)}
.label{display:block}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.spacer{flex:1}
.ml-auto{margin-left:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.gridc{display:grid;gap:14px}
.muted{color:var(--muted)}
.pad{padding:14px 18px}
.alert{padding:11px 15px;border-radius:var(--r-sm);font-size:13px;font-weight:500;margin-bottom:16px}
.alert-ok{background:var(--ok-soft);color:var(--ok)}
.alert-bad{background:var(--bad-soft);color:var(--bad)}
.sla-bar{height:7px;border-radius:4px;background:#EEF1F5;overflow:hidden}
.sla-fill{height:100%}
.table-wrap{width:100%;overflow-x:auto}
.empty{text-align:center;color:var(--muted);padding:22px;font-size:13px}
.stack{display:flex;flex-direction:column;gap:14px}
/* sidebar footer + topbar sync chip (spec §2) */
.nav-foot{padding:12px 16px;border-top:1px solid var(--ink-line);font-size:11px;color:var(--muted-2);display:flex;align-items:center;gap:8px}
.nav-foot-dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(24,147,90,.18)}
.sync-chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:5px 11px;white-space:nowrap}
.sync-dot{width:6px;height:6px;border-radius:50%;background:var(--ok)}
@media(max-width:760px){ .sync-chip{display:none} }
/* client account header (spec §4.2) */
.ca-head{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:18px}
.ca-av{width:46px;height:46px;border-radius:11px;flex-shrink:0;background:linear-gradient(135deg,var(--brand),var(--signal));color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;font-size:17px}
.ca-name{font-family:var(--font-display);font-weight:700;font-size:17px}
.ca-meta{font-size:12px;color:var(--muted);margin-top:2px}
.ca-stats{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}
.ca-cell .kpi-label{margin-bottom:5px}
/* overview snapshot 2×2 */
.snap{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.snap-cell{background:var(--surface);padding:15px 18px;text-decoration:none;color:var(--text);display:block}
a.snap-cell:hover{background:#FAFBFC}
.snap-val{font-family:var(--font-display);font-weight:700;font-size:24px;margin-top:6px}
/* activity timeline */
.tl{position:relative;padding-left:6px}
.tl-item{position:relative;display:flex;align-items:baseline;gap:10px;padding:7px 0 7px 16px;border-left:2px solid var(--line)}
.tl-item:last-child{border-left-color:transparent}
.tl-dot{position:absolute;left:-6px;top:10px;width:10px;height:10px;border-radius:50%;background:var(--muted-2);box-shadow:0 0 0 3px var(--surface)}
.tl-dot.tl-bad{background:var(--bad)} .tl-dot.tl-ok{background:var(--ok)} .tl-dot.tl-info{background:var(--brand)}
.tl-txt{font-size:13px;flex:1;min-width:0}
.tl-when{font-size:11px;color:var(--muted);white-space:nowrap}
@media(max-width:760px){ .ca-stats{gap:18px;width:100%} }
/* email intake strip (spec §4.5) */
.intake{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:14px 16px;margin-bottom:16px;flex-wrap:wrap}
.intake-step{display:flex;align-items:center;gap:11px;min-width:0}
.intake-ic{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:grid;place-items:center}
.ii-email{background:var(--brand-soft);color:var(--brand)}
.ii-match{background:var(--purple-soft);color:var(--purple)}
.ii-open{background:var(--ok-soft);color:var(--ok)}
.intake-t{font-weight:600;font-size:13px}
.intake-s{font-size:11.5px;color:var(--muted)}
.intake-chev{color:var(--muted-2);font-size:22px;line-height:1;flex-shrink:0}
@media(max-width:760px){ .intake-chev{display:none} .intake{gap:14px} .intake-step{width:100%} }
/* documentation row-cards (spec §4.2 Documentation) */
.doc-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.doc-row:last-of-type{border-bottom:none}
.doc-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.doc-ic{width:32px;height:32px;border-radius:8px;flex-shrink:0;background:var(--brand-soft);color:var(--brand);display:grid;place-items:center;font-size:15px}
.doc-name{font-weight:600;font-size:13px}
.doc-sub{font-size:11px;color:var(--muted)}
.ip{font-family:var(--font-mono);font-size:11.5px;background:#EEF1F5;color:#43586A;padding:2px 8px;border-radius:5px}
.lock-note{display:flex;align-items:center;gap:8px;background:var(--warn-soft);color:var(--warn);font-size:11.5px;font-weight:500;padding:9px 18px;border-bottom:1px solid var(--line)}
.cred-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}
.cred-row:last-of-type{border-bottom:none}
.cred-svc{font-weight:600;font-size:13px}
.cred-user{font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.cred-pass{font-family:var(--font-mono);font-size:12px;letter-spacing:1px}
.reveal{font-size:11px;font-weight:600;color:var(--brand);background:var(--brand-soft);border:none;border-radius:5px;padding:4px 9px;cursor:pointer}
/* maintenance pm-rows + sop tags (spec §4.2 Maintenance) */
.pm-row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.pm-row:last-of-type{border-bottom:none}
.pm-name{font-weight:600;font-size:13px}
.pm-sub{font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
.pm-next{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.sop-tag{font-size:10px;font-weight:600;background:var(--brand-soft);color:var(--brand);padding:1px 7px;border-radius:4px}
/* money mask — RM values hidden by default; revealed page-wide by the topbar toggle */
.mval .mm-real{display:none}
body.reveal-money .mval .mm-mask{display:none}
body.reveal-money .mval .mm-real{display:inline}
.reveal-money-btn.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand)}
/* Responsive collapse — !important so inline grid-template-columns (set per-view
for desktop asymmetry) cannot keep grids multi-column on phones. */
@media(max-width:1100px){ .kpi-grid{grid-template-columns:repeat(3,1fr)!important} }
@media(max-width:760px){
.grid2{grid-template-columns:1fr!important}
.kpi-grid{grid-template-columns:repeat(2,1fr)!important}
}
/* ---------- phone polish (≤560px): tighter chrome + clean stat alignment ----------
Below 760 the grids already collapse; this layer fixes phone-specific cramping:
stat cards fit, panel headers wrap (title + action buttons no longer collide),
asymmetric/table grids go single-column; the 2-col snap + header stats stay
2-up (small KPIs read fine two-wide on a phone), chrome padding shrinks. */
@media(max-width:560px){
.view{padding:14px 13px}
.topbar{padding:0 14px;gap:10px;height:56px}
.page-title{font-size:16px}
.kpi-grid{gap:10px;margin-bottom:14px}
.kpi{padding:12px 13px}
.kpi-val{font-size:22px;margin-top:5px}
.snap{grid-template-columns:1fr 1fr!important} /* keep the 4 KPIs 2-up on phones */
.ca-stats{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px} /* header stats (Tier/Health/PM/MRR) 2-up too */
/* headers/toolbars: wrap instead of squashing the buttons off-screen */
.ph,.panel-head{flex-wrap:wrap;row-gap:8px;padding:12px 14px}
.ph .link,.ph .count,.ml-auto{margin-left:0}
.feed-item{padding:11px 14px}
table thead th,table tbody td{padding:10px 12px}
.tab{padding:10px 11px;font-size:13px}
/* Documentation tab: dense device/credential rows + inline add forms reflow
instead of squishing or overflowing off-screen on phones. */
.doc-row,.cred-row{flex-wrap:wrap;row-gap:6px}
/* device action buttons drop to their own full-width row, right-aligned */
.doc-actions{flex:1 1 100%;justify-content:flex-end;margin-top:2px}
.hub-pane[data-pane="documentation"] form .txt,
.hub-pane[data-pane="documentation"] form .select{width:auto!important;flex:1 1 140px;min-width:120px}
.hub-pane[data-pane="documentation"] form .btn{flex:1 1 100%}
}
/* very narrow (≤430px, e.g. iPhone SE/12/13): two-up stats stay tidy; cards keep
their vertical label/number/foot layout (just full grid width). */
@media(max-width:430px){
.kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:9px}
.kpi-val{font-size:20px}
}
/* ============================================================
Maintenance — Remote/Onsite plan tab + remote session
(from docs/mockups/maintenance-plan-tab.html + remote-check-session.html)
============================================================ */
/* method + frequency tags */
.method{font-size:10.5px;font-weight:600;border-radius:20px;padding:2px 9px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.method svg{width:11px;height:11px;stroke-width:2}
.m-remote{background:var(--teal-s);color:var(--teal-d)}
.m-onsite{background:var(--warn-soft);color:var(--warn)}
.freq{font-size:10px;font-weight:600;border-radius:20px;padding:2px 9px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.res{font-size:10.5px;font-weight:600;border-radius:20px;padding:2px 9px}
.res-ok{background:var(--ok-soft);color:var(--ok)} .res-iss{background:var(--warn-soft);color:var(--warn)} .res-bad{background:var(--bad-soft);color:var(--bad)}
/* KPI summary cards (plan tab) — responsive 4→2 (stays 2-up on phones) */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.kcard .lbl{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-bottom:7px}
.kcard .val{font-family:var(--font-display);font-size:18px;font-weight:700}
.kcard .sub{font-size:11.5px;color:var(--muted);margin-top:3px}
.kcard .val.teal{color:var(--teal-d)} .kcard .val.amber{color:var(--warn)} .kcard .val.ok{color:var(--ok)}
/* section header + buttons used by the plan tab */
.sec-h{display:flex;align-items:center;gap:12px;margin-bottom:13px;flex-wrap:wrap}
.sec-h h2{font-size:16px;font-weight:700}
.sec-h .hint{font-size:12px;color:var(--muted)}
.btn-pri{background:var(--brand);color:#fff}
@media(max-width:860px){.cards{grid-template-columns:1fr 1fr}}
.legend{display:flex;gap:14px;font-size:11.5px;color:var(--muted);margin-bottom:12px;flex-wrap:wrap}
/* plan grouped by device */
.plan{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:24px}
.dev{border-bottom:1px solid var(--line)} .dev:last-child{border-bottom:none}
.dev-h{display:flex;align-items:center;gap:11px;padding:13px 18px;background:#FAFBFC}
.dev-ic{width:30px;height:30px;border-radius:7px;background:var(--ink);display:grid;place-items:center;flex-shrink:0}
.dev-ic svg{width:16px;height:16px;stroke:#fff;stroke-width:1.8}
.dev-nm{font-weight:600;font-size:13.5px} .dev-meta{font-size:11.5px;color:var(--muted)}
.dev-sop{margin-left:auto;font-size:11.5px;color:var(--brand);font-weight:600;display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.dev-sop svg{width:13px;height:13px;stroke-width:2}
/* collapsible device groups — collapsed by default; click header to expand (saves vertical space) */
.dev-h{cursor:pointer;user-select:none}
.dev-tt{margin-left:auto;display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.dev-tt .dev-sop{margin-left:0}
.dev-count{font-size:11px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:2px 9px;white-space:nowrap}
.dev-chev{width:17px;height:17px;color:var(--muted-2);transition:transform .15s ease;flex-shrink:0}
.dev.open .dev-chev{transform:rotate(180deg)}
.dev-body{display:none}
.dev.open .dev-body{display:block}
/* template builder — collapsible device groups (same pattern) */
.dgroup .dg-body{display:none}
.dgroup.open .dg-body{display:block}
.dg-chev{width:16px;height:16px;color:var(--muted-2);transition:transform .15s ease;cursor:pointer;flex-shrink:0}
.dgroup.open .dg-chev{transform:rotate(180deg)}
.dg-count{font-size:11px;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:2px 8px;white-space:nowrap}
.task{display:flex;align-items:center;gap:10px;padding:11px 18px 11px 22px;border-top:1px solid #EEF2F6;flex-wrap:nowrap}
.task .dot{width:6px;height:6px;border-radius:50%;background:var(--muted-2);flex-shrink:0}
.task .nm{font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.add-task{padding:9px 18px 11px 22px;border-top:1px solid #EEF2F6}
.add-task button,.add-task .lk{background:none;border:none;color:var(--muted);font-size:12px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.add-task svg{width:13px;height:13px;stroke-width:2}
/* dual schedule */
.sched{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.up{border-radius:10px;padding:14px;margin-bottom:10px}
.up-r{border:1px solid var(--teal-d);background:var(--teal-s)} .up-o{border:1px solid var(--warn);background:var(--warn-soft)}
.up .d{font-family:var(--font-display,'Space Grotesk');font-size:16px;font-weight:700}
.up-r .d{color:var(--teal-d)} .up-o .d{color:var(--warn)}
.up .who{font-size:12px;color:var(--text);margin-top:4px;display:flex;align-items:center;gap:7px}
.up .btn{margin-top:11px;width:100%;justify-content:center}
.btn-teal{background:var(--teal-d);color:#fff}
.mini-av{width:22px;height:22px;border-radius:50%;background:#5C6F80;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:600}
.note{font-size:11.5px;color:var(--muted)}
.vrow{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px;flex-wrap:wrap}
.vrow:last-child{border:none}
.vrow .vd{font-family:var(--font-mono,'JetBrains Mono');font-size:11.5px;color:var(--muted);width:58px;flex-shrink:0}
.vrow .vt{flex:1;min-width:120px}
.vrow a{font-size:11.5px;color:var(--brand);font-weight:600;text-decoration:none}
@media(max-width:860px){.sched{grid-template-columns:1fr}}
/* remote-check-session screen */
.shead{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--teal-d);border-radius:12px;padding:16px 18px;margin-bottom:18px}
.shead.onsite{border-left-color:var(--warn)}
.shead .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pill-r{font-size:10.5px;font-weight:600;border-radius:20px;padding:2px 10px;background:var(--teal-s);color:var(--teal-d);display:inline-flex;align-items:center;gap:5px}
.pill-r.onsite{background:var(--warn-soft);color:var(--warn)}
.pill-r svg{width:11px;height:11px;stroke-width:2}
.shead h1{font-family:var(--font-display,'Space Grotesk');font-size:18px;font-weight:700;margin-top:8px}
.shead .meta{font-size:12px;color:var(--muted);margin-top:5px;display:flex;gap:14px;flex-wrap:wrap}
.shead .meta b{color:var(--text);font-weight:600}
.prog{margin-top:12px;display:flex;align-items:center;gap:10px}
.bar{flex:1;height:7px;background:var(--paper);border-radius:20px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal-d);border-radius:20px;transition:width .2s}
.prog .n{font-size:12px;font-weight:600;color:var(--teal-d);white-space:nowrap}
.dgrp{margin-bottom:8px}
.dgrp-h{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--muted);padding:14px 4px 8px;display:flex;align-items:center;gap:8px}
.tc{background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:14px 16px;margin-bottom:10px}
.tc.done{border-color:#CFE6D9} .tc.fail{border-color:#F0C9C9}
.tc-top{display:flex;align-items:flex-start;gap:10px}
.tc-nm{font-weight:600;font-size:13.5px;flex:1}
.tc-sop{font-size:11px;color:var(--brand);font-weight:600;text-decoration:none;white-space:nowrap}
.pfn{display:flex;gap:7px;margin-top:11px}
.pfn button{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:8px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.pfn button svg{width:14px;height:14px;stroke-width:2.4}
.pfn .p.on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.pfn .f.on{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.pfn .na.on{background:var(--paper);border-color:var(--muted-2);color:var(--muted)}
.reading{margin-top:11px}
.reading label{font-size:11px;font-weight:600;color:var(--muted);display:block;margin-bottom:5px}
.reading input{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:8px 11px;font-family:var(--font-mono,'JetBrains Mono');font-size:12.5px}
.ev{margin-top:11px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ev-label{font-size:11px;font-weight:600;color:var(--muted);width:100%;margin-bottom:1px}
.ev-thumb{width:54px;height:40px;border-radius:7px;border:1px solid var(--line);background:linear-gradient(135deg,#dde6ef,#c6d3e0);display:grid;place-items:center;position:relative;overflow:hidden}
.ev-thumb img{width:100%;height:100%;object-fit:cover}
.ev-add{border:1.5px dashed #b9c6d4;border-radius:8px;padding:8px 12px;font-size:11.5px;color:var(--muted);background:#FAFBFC;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.ev-add svg{width:13px;height:13px;stroke-width:2}
.ev-req{color:var(--bad);font-weight:600}
.ticket-chip{margin-top:11px;background:var(--bad-soft);border:1px solid #F0C9C9;border-radius:8px;padding:9px 12px;font-size:12px;color:var(--bad);font-weight:600;display:flex;align-items:center;gap:8px}
.ticket-chip svg{width:14px;height:14px;stroke-width:2}
.complete{position:sticky;bottom:0;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin-top:18px;display:flex;align-items:center;gap:14px;box-shadow:0 -6px 20px rgba(16,27,42,.06)}
.complete .sum{font-size:12.5px;color:var(--muted);flex:1} .complete .sum b{color:var(--text)}
.complete .btn{font-size:13.5px;padding:12px 18px;border-radius:9px}
/* the remote/onsite session is a centred column like the mockup (not full 1320px) */
.exec-narrow{max-width:880px;margin:0 auto}
@media(max-width:760px){.complete{flex-direction:column;align-items:stretch}}