/* SHOWTIME SERVICE — Control Desk design system.
   One family, tabular numerals, navy ground, teal accent, high density.
   Loaded last on every surface: workspace, order tasks, portals and sign-in. */

:root {
    color-scheme: dark;

    --ink-950:#050a14;
    --ink-900:#0a1220;
    --ink-850:#0d1728;
    --panel:#101c30;
    --panel-2:#152340;
    --panel-3:#1b2c4d;
    --hairline:rgba(148,178,214,.14);
    --hairline-2:rgba(148,178,214,.24);
    --hairline-3:rgba(148,178,214,.38);

    --text:#e9eff8;
    --text-2:#bccbe0;
    --muted:#8698b4;
    --muted-2:#6b7f9c;

    --teal:#2dd4bf;
    --teal-600:#14b8a6;
    --teal-700:#0f9488;
    --teal-soft:rgba(45,212,191,.14);
    --on-teal:#04211e;

    --amber:#fbbf24;
    --amber-soft:rgba(251,191,36,.13);
    --red:#fca5a5;
    --red-strong:#f87171;
    --red-soft:rgba(248,113,113,.14);
    --green:#4ade80;
    --green-soft:rgba(74,222,128,.13);
    --blue:#7dd3fc;
    --blue-soft:rgba(125,211,252,.13);
    --slate-soft:rgba(148,178,214,.12);

    --radius:12px;
    --radius-sm:8px;
    --radius-lg:16px;
    --control-height:36px;
    --rail-width:264px;

    --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --ease:cubic-bezier(.2,.7,.25,1);
    --speed:160ms;

    /* legacy aliases still referenced by inline markup */
    --bg:var(--ink-900);
    --surface:var(--panel);
    --surface-2:var(--panel-2);
    --surface-3:var(--panel-3);
    --soft:var(--panel-2);
    --card:var(--panel);
    --line:var(--hairline);
    --primary:var(--teal-600);
    --primary-2:var(--teal);
    --accent:var(--teal);
    --danger:var(--red-strong);
    --success:var(--green);
    --warning:var(--amber);
    --control-radius:var(--radius-sm);
    --shadow:none;
    --shadow-soft:none;
}

/* ---------- reset ---------- */

* { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body {
    margin:0;
    font-family:var(--font);
    font-size:13.5px;
    line-height:1.45;
    color:var(--text);
    background:var(--ink-900);
    font-variant-numeric:tabular-nums;
    -webkit-font-smoothing:antialiased;
}
a { color:var(--teal); text-decoration:none; }
a:hover { color:var(--teal); text-decoration:underline; text-underline-offset:2px; }
h1,h2,h3,h4 { margin:0; font-weight:600; letter-spacing:-.015em; }
p { margin:0; }
img { max-width:100%; }
hr { border:0; border-top:1px solid var(--hairline); margin:16px 0; }

/* ---------- browser surfaces ---------- */

/* In-page navigation progress: the only motion the shell needs. */
.nav-progress { position:fixed; inset:0 0 auto 0; height:2px; z-index:200; background:transparent; overflow:hidden; }
.nav-progress::after { content:""; display:block; height:100%; width:40%; background:var(--teal); transform:translateX(-100%); opacity:0; }
.nav-progress.is-active::after { opacity:1; animation:cd-progress 900ms var(--ease) infinite; }
@keyframes cd-progress { from { transform:translateX(-100%); } to { transform:translateX(320%); } }
body.is-swapping #main-content { opacity:.72; pointer-events:none; transition:opacity 120ms var(--ease); }
#main-content { outline:none; }

::selection { background:rgba(45,212,191,.28); color:#fff; }
input, textarea, select { caret-color:var(--teal); }
* { scrollbar-width:thin; scrollbar-color:var(--hairline-3) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--hairline-2); border:3px solid transparent; background-clip:content-box; border-radius:999px; }
*::-webkit-scrollbar-thumb:hover { background:var(--hairline-3); background-clip:content-box; }

/* ---------- app shell ---------- */

#nav-toggle { display:none; }
.skip-link { position:fixed; left:12px; top:12px; z-index:100; transform:translateY(-160%); padding:8px 12px; border-radius:var(--radius-sm); background:var(--panel-3); color:var(--text); border:1px solid var(--hairline-2); font-weight:600; }
.skip-link:focus { transform:translateY(0); }
.overlay { position:fixed; inset:0; background:rgba(3,7,14,.62); opacity:0; pointer-events:none; transition:opacity var(--speed) var(--ease); z-index:40; }
#nav-toggle:checked ~ .app .overlay { opacity:1; pointer-events:auto; }

.app { min-height:100vh; display:grid; grid-template-columns:1fr; }

.sidebar {
    position:fixed; inset:0 auto 0 0; z-index:50;
    width:var(--rail-width);
    display:flex; flex-direction:column; gap:14px;
    padding:18px 14px 16px;
    background:var(--ink-950);
    border-right:1px solid var(--hairline);
    transform:translateX(-100%);
    transition:transform 220ms var(--ease);
    overflow:auto;
}
#nav-toggle:checked ~ .app .sidebar { transform:translateX(0); }

.brand { padding:14px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--hairline); }
.brand small { display:block; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.brand h2 { margin:8px 0 4px; font-size:17px; letter-spacing:-.02em; }
.brand > div { font-size:12px; color:var(--muted); }

.nav-links { display:grid; gap:2px; margin-top:0; }
.nav-group-label { margin:14px 0 4px; padding:0 10px; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.nav-links a {
    display:flex; align-items:center; gap:10px;
    min-height:36px; padding:8px 10px;
    border-radius:var(--radius-sm);
    color:var(--text-2); font-weight:550; font-size:13px;
    border:1px solid transparent;
    transition:background var(--speed) var(--ease), color var(--speed) var(--ease), border-color var(--speed) var(--ease);
}
.nav-links a:hover { background:var(--panel); color:var(--text); text-decoration:none; }
.nav-links a.active { background:var(--teal-soft); border-color:rgba(45,212,191,.28); color:#eafffb; }
.nav-links a.active svg { color:var(--teal); }
.nav-links a svg { width:16px; height:16px; flex:none; color:var(--muted); }

.sidebar-card { margin-top:auto; padding:12px; border-radius:var(--radius); background:var(--panel); border:1px solid var(--hairline); }
.sidebar-card > div:first-child { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.sidebar-card > div:nth-child(2) { margin-top:6px; font-size:14px; font-weight:650; color:var(--text); }
.sidebar-card > div:nth-child(3) { margin-top:4px; font-size:12px; color:var(--muted); }
.sidebar-card > div:nth-child(4) { margin-top:10px; font-size:11px; color:var(--muted-2); }

.menu-toggle {
    position:fixed; top:12px; right:12px; z-index:60;
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; padding:0;
    border:1px solid var(--hairline-2); border-radius:var(--radius-sm);
    background:var(--panel-2); color:var(--text); cursor:pointer;
}
.menu-toggle svg { width:18px; height:18px; }
.menu-toggle:hover { background:var(--panel-3); }

.main { width:min(100%,1600px); margin:0 auto; padding:64px 14px 72px; min-width:0; }

.topbar {
    position:sticky; top:0; z-index:30;
    display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
    margin:0 0 14px; padding:12px 14px;
    background:linear-gradient(180deg, rgba(10,18,32,.96), rgba(10,18,32,.9));
    backdrop-filter:blur(10px);
    border:1px solid var(--hairline); border-radius:var(--radius);
}
.headline h1 { font-size:19px; letter-spacing:-.02em; }
.headline p { margin-top:2px; color:var(--muted); font-size:12px; }
.headline p:empty { display:none; }
.top-actions { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.topbar-meta { display:flex; flex-wrap:wrap; gap:14px; margin-right:auto; color:var(--muted); font-size:11.5px; }
.topbar-meta span { display:inline-flex; align-items:baseline; gap:5px; }
.topbar-meta strong { font-size:14px; font-weight:650; color:var(--text); letter-spacing:-.01em; }
.topbar-meta .is-warn strong { color:var(--amber); }
.badge { display:inline-flex; align-items:center; gap:6px; min-height:28px; padding:4px 9px; border:1px solid var(--hairline); border-radius:var(--radius-sm); background:var(--panel-2); color:var(--text-2); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.badge strong { color:var(--text); }

.hero-banner { display:none; }

.flash { margin-bottom:12px; padding:10px 12px; border-radius:var(--radius-sm); border:1px solid var(--hairline-2); font-size:13px; }
.flash.success { background:var(--green-soft); border-color:rgba(74,222,128,.32); color:#c9f7d8; }
.flash.error { background:var(--red-soft); border-color:rgba(248,113,113,.34); color:#ffd7d7; }

/* ---------- typography helpers ---------- */

.muted { color:var(--muted); }
.eyebrow { font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--muted-2); }
.section-note, .panel-note { color:var(--muted); font-size:12px; line-height:1.5; }
.mono, .service-mac-input { font-family:var(--mono); letter-spacing:.02em; }

/* ---------- controls ---------- */

label { display:block; margin-bottom:6px; font-size:12px; font-weight:600; color:var(--text-2); }
input, select, textarea {
    width:100%; min-height:var(--control-height);
    padding:7px 10px;
    font:inherit; color:var(--text);
    background:var(--ink-850);
    border:1px solid var(--hairline-2); border-radius:var(--radius-sm);
    transition:border-color var(--speed) var(--ease), box-shadow var(--speed) var(--ease);
}
textarea { min-height:80px; resize:vertical; line-height:1.5; }
input::placeholder, textarea::placeholder { color:var(--muted-2); opacity:1; }
input:hover, select:hover, textarea:hover { border-color:var(--hairline-3); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--teal-600); box-shadow:0 0 0 3px rgba(20,184,166,.18); }
input[readonly] { background:var(--panel-2); color:var(--text-2); }
input:disabled, select:disabled, textarea:disabled { opacity:.55; cursor:not-allowed; }
select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 15px) 15px, calc(100% - 10px) 15px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:30px; }
input[type=file] { padding:4px; }
input[type=file]::file-selector-button { min-height:28px; margin-right:8px; padding:5px 10px; font:inherit; font-size:12px; font-weight:600; color:var(--text); background:var(--panel-3); border:1px solid var(--hairline-2); border-radius:var(--radius-sm); cursor:pointer; }
input[type=file]::file-selector-button:hover { background:var(--panel-2); }
input[type=checkbox], input[type=radio] { width:auto; min-height:0; accent-color:var(--teal-600); }
input[type=date] { color-scheme:dark; }

button, .button-link, .action-button, .action-grid a, .attention-actions a, .device-row .provider-link, .portfolio-open, .contract-overview-actions a, .contract-overview-actions .close-order-button, .renewal-required-action {
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    width:auto; min-height:var(--control-height); padding:7px 11px;
    font:inherit; font-size:12.5px; font-weight:600; line-height:1.2; text-align:center;
    color:var(--text); background:var(--panel-2);
    border:1px solid var(--hairline-2); border-radius:var(--radius-sm);
    text-decoration:none; cursor:pointer; white-space:nowrap;
    transition:background var(--speed) var(--ease), border-color var(--speed) var(--ease), color var(--speed) var(--ease), transform 80ms var(--ease);
}
button:hover, .button-link:hover, .action-button:hover, .action-grid a:hover, .attention-actions a:hover, .portfolio-open:hover, .contract-overview-actions a:hover, .renewal-required-action:hover { background:var(--panel-3); border-color:var(--hairline-3); color:var(--text); text-decoration:none; }
button:active, .button-link:active, .action-button:active, .action-grid a:active { transform:translateY(1px); }
button.primary, .button-link.primary { background:var(--teal-600); border-color:var(--teal-600); color:var(--on-teal); font-weight:650; }
button.primary:hover, .button-link.primary:hover { background:var(--teal); border-color:var(--teal); color:var(--on-teal); }
button.secondary, .button-link.secondary { background:var(--panel-2); color:var(--text-2); }
button.danger, .button-link.danger { background:var(--red-soft); border-color:rgba(248,113,113,.34); color:#ffd7d7; }
button:disabled, fieldset:disabled button { opacity:.5; cursor:not-allowed; transform:none; }
.whatsapp-button, .action-grid .whatsapp-button, .contract-overview-actions a.whatsapp-button { background:var(--teal-soft); border-color:rgba(45,212,191,.3); color:#c8fff5 !important; }
.whatsapp-button:hover { background:rgba(45,212,191,.22); }
.edit-button, .action-grid .edit-button, .contract-overview-actions a.edit-button { background:var(--panel-2); color:var(--text-2) !important; }
.renew-button, .action-grid a.renew-button, .contract-overview-actions a.renew-button, .attention-actions a.renew-button, .renewal-required-action { background:var(--amber-soft); border-color:rgba(251,191,36,.32); color:#ffe9b0 !important; }
.renew-button:hover, .renewal-required-action:hover { background:rgba(251,191,36,.2); }
.close-order-button { background:var(--slate-soft); border-color:var(--hairline-2); color:var(--text-2); }

:is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--teal); outline-offset:2px; border-radius:var(--radius-sm); }

/* Clickable affordances must read as clickable on every input type. */
button, .button-link, .action-button, .action-grid a, .attention-actions a,
.device-row .provider-link, .portfolio-open, .contract-overview-actions a,
.renewal-required-action, .nav-links a, .client-list-row, .continuity-seg,
.shared-image, summary { cursor:pointer; }
button:disabled, fieldset:disabled button { cursor:not-allowed; }

/* ---------- panels ---------- */

.panel { padding:14px; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); min-width:0; }
.panel-header { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; justify-content:space-between; margin-bottom:12px; }
.panel-header h2 { font-size:14px; letter-spacing:-.01em; }
.panel-header .muted { display:block; margin-top:3px; font-size:12px; }
.mini-card { padding:10px 12px; background:var(--panel-2); border:1px solid var(--hairline); border-radius:var(--radius-sm); color:var(--text-2); font-size:12.5px; }

/* ---------- stats ---------- */

.stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0; margin-bottom:14px !important; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; }
.stat, .stat.primary-tone, .stat.warm-tone, .stat.slate-tone, .stat.rose-tone { position:relative; min-height:82px; padding:12px 14px; background:transparent; border:0; border-right:1px solid var(--hairline); border-radius:0; }
.stat:nth-child(2n) { border-right:0; }
.stat:last-child { border-right:0; }
.stat .k { font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2); }
.stat .v { margin-top:6px; font-size:22px; font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat .v .currency-value { color:var(--text); }
.stat .sub { display:none; }

/* ---------- status ---------- */

.status { display:inline-flex; align-items:center; gap:7px; min-height:20px; padding:2px 0; font-size:11px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; white-space:nowrap; background:transparent; border:0; }
.status::before { content:""; flex:none; width:7px; height:7px; border-radius:50%; background:var(--hairline-3); }
.status-short { display:none; }
.status.ok, .status.renewed { color:#8fe6b8; }
.status.ok::before, .status.renewed::before { background:var(--green); }
.status.due-soon { color:#f0c670; }
.status.due-soon::before { background:var(--amber); }
.status.overdue { color:#ff9f9f; }
.status.overdue::before { background:var(--red-strong); }
.status.renewal-request { color:#a8daf3; }
.status.renewal-request::before { background:#7cc3ec; }
.status.closed, .status.scheduled { color:var(--muted); }

/* ---------- work queues ---------- */

.dashboard-work-queues { display:grid; grid-template-columns:1fr; gap:12px; align-items:start; margin-bottom:14px; }
.work-queue { min-width:0; }
.work-queue .panel-header { min-height:0; }
.summary-list { display:grid; gap:0; border:1px solid var(--hairline); border-radius:var(--radius-sm); overflow:hidden; }
.summary-list > .mini-card { border:0; border-radius:0; }
.summary-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:start; min-height:0; padding:10px 12px; background:var(--panel); border:0; border-bottom:1px solid var(--hairline); border-radius:0; }
.summary-row:last-child { border-bottom:0; }
.summary-row > div:first-child > strong { font-size:13px; font-weight:600; }
.summary-row .muted { font-size:12px; }
.summary-row > div:last-child { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; max-width:62%; }
.summary-row .status { font-size:10px; }
.work-queue .status { white-space:normal; text-align:right; line-height:1.3; }
.work-queue .status { align-items:flex-start; }
.work-queue .status::before { margin-top:4px; }
.attention-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.attention-actions a { min-height:28px; padding:4px 9px; font-size:11.5px; background:var(--panel-2); border-color:var(--hairline-2); color:var(--text-2); }

/* ---------- continuity rail (signature move) ---------- */

.continuity { display:flex; align-items:stretch; margin-bottom:14px; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; }
.continuity-head { display:flex; flex-direction:column; justify-content:center; gap:2px; flex:none; padding:10px 14px; border-right:1px solid var(--hairline); }
.continuity-head .k { font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2); }
.continuity-head .v { font-size:15px; font-weight:650; letter-spacing:-.01em; }
.continuity-track { display:flex; flex:1; align-items:stretch; min-width:0; gap:3px; padding:10px 12px; overflow:hidden; }
.continuity-seg { position:relative; flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; cursor:pointer; text-decoration:none; }
.continuity-seg::before { content:""; position:absolute; inset:0; border-radius:2px; background:var(--hairline-3); transition:filter var(--speed) var(--ease); }
.continuity-seg .seg-name { position:relative; z-index:1; display:block; width:100%; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center; font-size:10.5px; font-weight:650; color:#07111e; }
.continuity-seg:hover::before { filter:brightness(1.25); }
.continuity-seg.is-active::before { background:rgba(34,197,94,.55); }
.continuity-seg.is-due::before { background:var(--amber); }
.continuity-seg.is-expired::before { background:var(--red-strong); }
.continuity-seg.is-closed::before { background:var(--hairline-2); }
.continuity-empty { padding:12px 14px; color:var(--muted); font-size:12.5px; }

/* ---------- layout ---------- */

.layout { display:grid; grid-template-columns:1fr; gap:14px; align-items:start; }
.workspace-grid, .lens-grid { display:grid; gap:12px; }
.clients-layout { align-items:start; }

/* ---------- client + device portfolio ---------- */

.client-lookup, .device-lookup { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; width:min(100%,480px); }
.lookup-result-count { color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.client-portfolio-list { display:grid; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; }
.portfolio-row { display:grid; grid-template-columns:minmax(170px,.7fr) minmax(0,2.2fr) auto; gap:14px; align-items:center; padding:0 14px; min-height:48px; background:var(--panel); border:0; border-bottom:1px solid var(--hairline); }
.portfolio-row:last-child { border-bottom:0; }
.portfolio-row:hover { background:var(--panel-2); }
.portfolio-row:hover .portfolio-open { background:rgba(45,212,191,.28); color:#eafffb; border-color:rgba(45,212,191,.4); }
.portfolio-client-name { margin:0; font-size:14px; font-weight:600; letter-spacing:-.01em; }
.portfolio-client-meta, .device-row-meta { margin-top:4px; color:var(--muted); font-size:11.5px; overflow-wrap:anywhere; }
.portfolio-client-meta:empty { display:none; }
.portfolio-count { display:flex; flex-wrap:wrap; gap:10px; margin-top:7px; color:var(--muted); font-size:11.5px; }
.portfolio-count strong { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.portfolio-devices { display:grid; gap:0; min-width:0; }
.device-row { position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:center; min-height:48px; padding:8px 0; border-bottom:1px solid var(--hairline); cursor:pointer; }
.device-row a { position:relative; z-index:1; }
.device-row::after { content:""; position:absolute; inset:0 -14px; }
.device-row:last-child { border-bottom:0; }
.device-row-title { font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.device-cycle { color:var(--muted); font-size:11px; }
.device-row .status { display:inline-grid; gap:1px; justify-items:end; min-width:92px; text-align:right; white-space:nowrap; }
.device-row .device-date { display:block; margin-top:2px; font-size:10px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--muted); }
.device-row .provider-link { min-height:28px; padding:4px 9px; font-size:11.5px; background:var(--panel-2); border-color:var(--hairline-2); color:var(--text-2); }
.portfolio-open { min-height:32px; padding:5px 10px; font-size:12px; background:var(--teal-soft); border-color:rgba(45,212,191,.28); color:#c8fff5; }
.portfolio-open:hover { background:rgba(45,212,191,.22); color:#eafffb; }

.client-list-row { display:block; padding:10px 12px; color:var(--text); background:transparent; border-bottom:1px solid var(--hairline); text-decoration:none; transition:background var(--speed) var(--ease); }
.client-list-row:last-child { border-bottom:0; }
.client-list-row:hover { background:var(--panel-2); color:var(--text); text-decoration:none; }
.client-list-row.is-selected { background:var(--teal-soft); }
.client-list-row.is-selected strong { color:#eafffb; }
.client-list-row > div { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.is-muted-note { background:transparent; border-style:dashed; color:var(--muted); }
.client-list-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; color:var(--muted); font-size:11.5px; }
.client-device-count { color:var(--text-2); font-weight:600; }

/* ---------- client detail ---------- */

.client-detail-panel .stats { grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:12px !important; }
.client-detail-panel .stat { min-height:64px; padding:9px 11px; }
.client-detail-panel .stat .v { margin-top:4px; font-size:18px; }
.contract-overview-grid { display:grid; grid-template-columns:1fr; gap:10px; margin-top:12px; }
.contract-overview-card { padding:12px; background:var(--panel-2); border:1px solid var(--hairline); border-radius:var(--radius-sm); }
.contract-overview-card h3 { margin:4px 0 2px; font-size:15px; font-weight:600; }
.contract-overview-card p { color:var(--muted); font-size:12px; }
.contract-overview-head { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; justify-content:space-between; }
.order-status-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:flex-end; }
.renewal-order-card { background:linear-gradient(180deg, rgba(74,222,128,.07), transparent 60%), var(--panel-2); border-color:rgba(74,222,128,.28); }
.contract-overview-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(128px,1fr)); gap:6px; margin-top:10px; }
.contract-overview-meta .mini-card { min-height:0; padding:8px 10px; background:var(--panel); border-color:var(--hairline); }
.contract-overview-meta .mini-card strong { display:block; margin-bottom:2px; color:var(--muted-2); font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.contract-overview-meta .mini-card br:first-of-type { display:none; }
.contract-overview-actions { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-top:10px; }
.contract-overview-actions form { display:flex; margin:0; }

/* ---------- device / order disclosures ---------- */

.device-heading h3 { font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.device-heading p { margin-top:2px; color:var(--muted); font-size:12px; }
.device-orders { min-width:0; }
.device-disclosure { margin-bottom:10px; padding:4px 14px; background:var(--panel-2); border:1px solid var(--hairline); border-radius:var(--radius-sm); }
.device-disclosure > summary { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-height:48px; padding:8px 0; cursor:pointer; color:var(--text); }
.device-disclosure > summary:hover { color:var(--teal); }
.device-summary-title { font-weight:600; overflow-wrap:anywhere; }
.device-summary-meta { color:var(--muted); font-size:12px; }
.device-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin:6px 0 12px; }
.order-disclosure > article { margin:8px 0; border:0; padding:0; }
.order-disclosure > summary { min-height:36px; padding:8px 0; font-size:12.5px; color:var(--text-2); }
.historical-order article { margin-top:10px; }

.compact-disclosure { margin-top:2px; border:0; border-radius:0; background:none; padding:0; }
.compact-disclosure > summary { min-height:38px; padding:10px 0; font-size:12px; font-weight:600; color:var(--text-2); cursor:pointer; }
.compact-disclosure > summary:hover { color:var(--teal); }
.compact-disclosure[open] > summary { margin-bottom:8px; color:var(--text); }
.order-section { margin-top:12px; padding-top:10px; border-top:1px solid var(--hairline); }
.order-section h4 { margin-bottom:8px; font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); }
.note-entry { padding:9px 0; border-bottom:1px solid var(--hairline); }
.note-entry p { margin:5px 0; white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text-2); }
.note-entry:last-child { border-bottom:0; }
.note-form { display:grid; gap:10px; margin-top:10px; }
.note-visibility { display:flex; gap:8px; align-items:center; }
.note-visibility input { width:16px; min-height:16px; height:16px; }

/* ---------- forms ---------- */

.form-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.form-grid > div { min-width:0; }
.form-grid label { color:var(--text-2); font-weight:600; }
.inline-form { display:grid; gap:10px; }
.quick-grid { display:grid; gap:10px; }
.service-row { padding:12px; background:var(--panel-2); border:1px solid var(--hairline); border-radius:var(--radius-sm); }
.service-row-header { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:10px; }
.service-row-header button { flex:none; }
.services-stack { display:grid; gap:10px; margin-top:12px; }
.service-row .mac-field { grid-column:1 / -1; }
.service-row .service-mac-input { width:100%; min-width:0; font-family:var(--mono); letter-spacing:.03em; }

/* ---------- order task ---------- */

.order-task-panel { max-width:780px; margin-inline:auto; }
.task-context { margin:0 0 16px; color:var(--muted); font-size:12.5px; }
.task-context strong { color:var(--text); }
.task-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0 0 20px; padding:0; border:0; min-width:0; }
.task-fields legend { padding:0; margin-bottom:10px; font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
.task-fields label { display:flex; flex-direction:column; gap:5px; min-width:0; margin:0; }
.task-fields .span-2 { grid-column:1/-1; }
.task-fields p { margin:0; }
.task-fields .task-fields { margin-bottom:0; }
.task-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; padding-top:14px; border-top:1px solid var(--hairline); }
.order-task-panel input, .order-task-panel select, .order-task-panel textarea { width:100%; }

/* ---------- users ---------- */

.user-list { display:grid; gap:0; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); overflow:hidden; }
.user-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; padding:11px 14px; border:0; border-bottom:1px solid var(--hairline); }
.user-row:last-child { border-bottom:0; }
.user-row > div:last-child { display:flex; flex-wrap:wrap; gap:6px; align-items:center; min-width:min(100%,520px); }
.user-row > div:last-child > form { display:contents; }
.user-row input[type=password] { width:auto; min-width:150px; flex:1 1 150px; }
.user-row button { width:auto; }

/* ---------- tables ---------- */

.table-wrap { overflow:auto; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); }
table { width:100%; min-width:900px; border-collapse:collapse; }
th, td { padding:9px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--hairline); }
th { position:sticky; top:0; background:var(--panel-2); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); }
tbody tr:hover td { background:var(--panel-2); }
tbody tr:last-child td { border-bottom:0; }

/* ---------- pills ---------- */

.pill-row { display:flex; flex-wrap:wrap; gap:6px; }
.pill { display:inline-flex; align-items:center; color:var(--muted-2); font-size:10.5px; font-weight:650; letter-spacing:.05em; text-transform:uppercase; }
.pill.warm { color:#f0c670; }
.pill.rose { color:#ff9f9f; }

/* ---------- dialog ---------- */

dialog { color:var(--text); background:var(--panel); border:1px solid var(--hairline-2); border-radius:var(--radius-lg); padding:18px; }
dialog::backdrop { background:rgba(3,7,14,.7); }
.provider-share-dialog { width:min(100% - 24px, 520px); }
.provider-share-dialog h2 { margin-bottom:6px; font-size:16px; }
.provider-share-dialog p { margin-bottom:12px; color:var(--muted); font-size:12.5px; }
.provider-share-dialog label { margin-bottom:5px; }
.provider-share-dialog textarea { width:100%; min-height:120px; }
.provider-share-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.form-error { margin-top:10px; padding:8px 10px; border-radius:var(--radius-sm); background:var(--red-soft); border:1px solid rgba(248,113,113,.34); color:#ffd7d7; font-size:12.5px; }

/* ---------- public portals + sign-in ---------- */

.wrap { width:min(100%,1440px); margin:0 auto; padding:16px; }
.hero { padding:16px 18px; background:var(--ink-950); border:1px solid var(--hairline); border-radius:var(--radius); }
.hero .label, .hero > .label { font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal); }
.hero h1 { margin-top:4px; font-size:22px; letter-spacing:-.02em; }
.summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:12px 0; }
.card, .subscription-card { padding:12px 14px; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius); }
.label { font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:var(--muted-2); }
.value { margin-top:4px; font-size:16px; font-weight:650; letter-spacing:-.01em; overflow-wrap:anywhere; }
.portal-layout { display:grid; grid-template-columns:1fr; gap:12px; align-items:start; }
.side-stack { display:grid; gap:12px; }
.subscription-list { display:grid; gap:10px; margin-top:10px; }
.subscription-head { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start; justify-content:space-between; margin-bottom:10px; }
.subscription-head h3 { margin-top:4px; font-size:15px; font-weight:600; }
.subscription-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.field { padding:8px 10px; background:var(--panel-2); border:1px solid var(--hairline); border-radius:var(--radius-sm); min-width:0; }
.field strong { display:block; margin-bottom:2px; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.field span { display:block; font-weight:600; overflow-wrap:anywhere; }
.subscription-note { margin-top:8px; padding:9px 11px; background:var(--panel-2); border:1px solid var(--hairline); border-radius:var(--radius-sm); color:var(--text-2); font-size:12.5px; line-height:1.5; }
.subscription-note strong { display:block; margin-bottom:5px; font-size:10px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--muted-2); }
.history-list { display:grid; gap:6px; margin-top:8px; }
.history-row { padding:8px 10px; background:var(--panel-2); border:1px solid var(--hairline); border-radius:var(--radius-sm); font-size:12.5px; }
.history-row strong { display:block; margin-bottom:2px; }
.empty-state { padding:12px; border:1px dashed var(--hairline-2); border-radius:var(--radius-sm); color:var(--muted); font-size:12.5px; }
.shared-image-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,180px)); gap:8px; margin-top:8px; }
.shared-image { display:block; overflow:hidden; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-sm); }
.shared-image img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.shared-image span { display:block; padding:6px 8px; font-size:11px; color:var(--muted); overflow-wrap:anywhere; }

.login-page { min-height:100dvh; display:grid; place-items:center; padding:16px; background:radial-gradient(1200px 600px at 15% -10%, rgba(20,184,166,.16), transparent 60%), var(--ink-950); }
.portal-notice-page { min-height:100dvh; display:grid; place-items:center; padding:16px; background:var(--ink-950); }
.portal-notice { width:min(100%,560px); display:grid; gap:12px; }
.portal-notice .hero h1 { font-size:20px; }
.login-page .shell { display:grid; gap:14px; width:min(100%,880px); }
.login-page .hero, .login-page .panel { padding:20px; background:var(--panel); border:1px solid var(--hairline); border-radius:var(--radius-lg); }
.login-page .hero::after { display:none; }
.login-page .hero h1 { margin-top:6px; font-size:26px; line-height:1.15; letter-spacing:-.025em; }
.login-page .hero p { margin-top:8px; color:var(--muted); font-size:13px; }
.login-page .hero-chip { display:inline-flex; padding:3px 9px; border-radius:999px; background:var(--teal-soft); color:#c8fff5; font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.login-page .panel h2 { margin-bottom:12px; font-size:16px; }
.login-page form { display:grid; gap:12px; }
.login-page button { width:100%; }
.hint { color:var(--muted); font-size:12px; }

/* ---------- legacy cleanup ---------- */

.legacy-dashboard-orders, .dashboard-secondary, .desktop-table, .desktop-only { display:none !important; }

/* ---------- motion ---------- */

@keyframes cd-rise { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
.panel, .stat, .portfolio-row, .contract-overview-card, .summary-row { animation:cd-rise 220ms var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
    * { animation:none !important; transition:none !important; }
    html { scroll-behavior:auto; }
}

/* ---------- responsive ---------- */

@media (min-width: 720px) {
    .main { padding:20px 20px 48px; }
    .stats { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .stat, .stat:nth-child(2n) { border-right:1px solid var(--hairline); }
    .stat:last-child { border-right:0; }
    .form-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .form-grid .span-2 { grid-column:span 2; }
    .quick-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .contract-overview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .workspace-grid, .lens-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .summary-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .subscription-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}

@media (min-width: 1120px) {
    .menu-toggle, .overlay { display:none; }
    .app { grid-template-columns:var(--rail-width) minmax(0,1fr); }
    .sidebar { position:sticky; top:0; height:100dvh; transform:none; }
    .main { padding:22px 26px 40px; }
    .layout { grid-template-columns:minmax(320px,400px) minmax(0,1fr); }
    .portal-layout { grid-template-columns:minmax(0,1.5fr) minmax(320px,.7fr); }
    .portal-layout.customer-overview { grid-template-columns:1fr; }
    .clients-layout.has-client .client-list-panel { max-height:calc(100dvh - 150px); overflow:auto; }
}

@media (min-width: 1000px) {
    .dashboard-work-queues { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .summary-row > div:last-child { max-width:56%; }
}

@media (max-width: 1119px) {
    .clients-layout.has-client .client-detail-panel { order:-1; }
    .main { padding-top:60px; }
    .top-actions { display:none; }
}

@media (max-width: 719px) {
    :root { --control-height:44px; }
    .main { padding:60px 12px calc(32px + env(safe-area-inset-bottom)); }
    .top-actions { display:none; }
    input, select, textarea { font-size:16px; }
    .status-full { display:none; }
    .status-short { display:inline; }
    .status { min-height:24px; padding:3px 9px; font-size:10px; letter-spacing:.03em; }
    .summary-row .status { font-size:10px; }
    .summary-row > div:last-child { gap:4px; }
    .attention-actions a { min-height:36px; padding:6px 11px; font-size:12px; }
    .device-row .provider-link, .portfolio-open { min-height:36px; padding:6px 11px; }
    .device-disclosure > summary, .compact-disclosure > summary { min-height:48px; }
    .sidebar { padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
    .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .stat { min-height:72px; }
    .stat .v { font-size:19px; }
    .portfolio-row { grid-template-columns:1fr; gap:8px; padding:12px; }
    .portfolio-open { justify-self:start; }
    .device-row { grid-template-columns:minmax(0,1fr) auto; }
    .device-row .status { grid-column:2; grid-row:1; }
    .device-row .provider-link { grid-column:2; grid-row:2; }
    .client-lookup, .device-lookup { width:100%; grid-template-columns:1fr; }
    .task-fields { grid-template-columns:1fr; }
    .task-fields .span-2 { grid-column:1; }
    .contract-overview-meta { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .client-detail-panel .stats { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .contract-overview-actions { display:grid; grid-template-columns:1fr; }
    .contract-overview-actions a, .contract-overview-actions form, .contract-overview-actions .close-order-button { width:100%; }
    .user-row > div:last-child { width:100%; }
    .user-row input[type=password], .user-row button { width:100%; }
    .continuity { flex-direction:column; }
    .continuity-head { flex-direction:row; align-items:center; gap:8px; border-right:0; border-bottom:1px solid var(--hairline); }
    .summary-grid, .subscription-grid { grid-template-columns:1fr; }
    .summary-row { grid-template-columns:1fr; }
    .summary-row > div:last-child { order:-1; justify-content:flex-start; max-width:100%; }
    .work-queue .status { text-align:left; }
}