/* ============================================================================
   OrbitRMM console theme
   Dark, warm-black surfaces taken from the logo's brown rather than the usual
   blue-black, with the logo orange as the single accent. Compact but not cramped:
   13px base, 38px rows, 16px gaps. The first pass was too tight — panels need
   room to read as separate objects rather than one continuous slab.
   ============================================================================ */

:root {
    /* Surfaces: warm near-black, from the logo's dark brown */
    --surface-0: #14100D;   /* page */
    --surface-1: #1C1713;   /* card */
    --surface-2: #241D18;   /* raised: header, popovers, table head */
    --surface-3: #2E2620;   /* hover */
    --border:    #3A302A;
    --border-soft: #2A221D;

    /* Accent: the logo orange */
    --accent:      #F26522;
    --accent-hi:   #FF8A3D;
    --accent-deep: #D9481B;
    --accent-dim:  rgba(242,101,34,.14);

    /* Text */
    --text:      #EDE7E1;
    --text-mute: #A2958B;
    --text-dim:  #7A6E66;

    /* Status */
    --ok:     #2FBF71;
    --warn:   #E8A33D;
    --danger: #E5484D;
    --info:   #4C9AFF;
    --ok-bg:     rgba(47,191,113,.13);
    --warn-bg:   rgba(232,163,61,.13);
    --danger-bg: rgba(229,72,77,.13);
    --info-bg:   rgba(76,154,255,.13);

    /* Density */
    --row-h: 38px;
    --card-pad: 18px;
    --gap: 16px;
    --gap-lg: 20px;
    --radius: 10px;
    --radius-sm: 6px;

    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

    --header-h: 66px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--surface-0);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    font-feature-settings: "tnum" 1;   /* tabular figures: columns of numbers line up */
}

a { color: var(--accent-hi); text-decoration: none; }
a:hover { color: var(--accent); }

:focus-visible {
    outline: 2px solid var(--accent-hi);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Identifiers — IPs, MACs, KB numbers, hostnames in data position — get the mono
   face so they align and stay scannable. Prose never does. */
.ident { font-family: var(--font-mono); font-size: 12px; letter-spacing: -.2px; }

/* ---------------------------------------------------------------- header --- */
.orb-header {
    position: sticky; top: 0; z-index: 40;
    height: var(--header-h);
    display: flex; align-items: center; gap: 18px;
    padding: 0 20px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}
.orb-brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.orb-brand img { height: 38px; width: auto; display: block; }
/* Two files rather than a filter: half the artwork is dark brown, which vanishes
   on a near-black header, so the dark variant has its ink lifted to cream. */
:root[data-theme="dark"]  .orb-brand .l-light,
:root[data-theme="light"] .orb-brand .l-dark { display: none; }

.orb-nav { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.orb-nav::-webkit-scrollbar { display: none; }
.orb-nav a {
    padding: 8px 13px; border-radius: var(--radius-sm);
    color: var(--text-mute); font-weight: 500; white-space: nowrap;
}
.orb-nav a:hover { background: var(--surface-3); color: var(--text); }
.orb-nav a.active { background: var(--accent-dim); color: var(--accent-hi); }

.orb-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.orb-avatar {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 12px 5px 5px; border-radius: 22px;
    background: var(--surface-1); border: 1px solid var(--border);
    cursor: pointer;
    /* This is a <button>, and buttons do not inherit colour — without this the
       name renders in the user-agent default and reads grey on the dark header. */
    color: var(--text);
    font-family: inherit;
}
.orb-avatar .initials {
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #fff; font-size: 11px; font-weight: 600;
}
.orb-avatar .who { line-height: 1.15; }
.orb-avatar .who b { display: block; font-size: 12px; font-weight: 600; color: var(--text); }
.orb-avatar .who span { font-size: 11px; color: var(--text-dim); }

/* -------------------------------------------------------- global search --- */
.orb-search { position: relative; flex: 0 1 340px; min-width: 120px; }
.orb-search input {
    width: 100%; height: 32px;
    padding: 0 30px 0 30px;
    background: var(--surface-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text); font-size: 12.5px; font-family: inherit;
}
.orb-search input::placeholder { color: var(--text-dim); }
.orb-search input:focus { border-color: var(--accent); outline: none; }
.orb-search .icon { position: absolute; left: 9px; top: 8px; color: var(--text-dim); pointer-events: none; }
.orb-search kbd {
    position: absolute; right: 7px; top: 7px;
    font-family: var(--font-mono); font-size: 10px;
    padding: 2px 5px; border-radius: 4px;
    background: var(--surface-3); color: var(--text-dim); border: 1px solid var(--border);
}

.orb-search-results {
    position: absolute; top: calc(100% + 6px); left: 0;
    width: min(520px, 92vw);
    max-height: 62vh; overflow-y: auto;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
    padding: 6px; display: none;
}
.orb-search-results.open { display: block; }
.orb-search-group { padding: 4px 0; }
.orb-search-group h4 {
    margin: 0; padding: 5px 9px;
    font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
    color: var(--text-dim);
}
.orb-search-hit {
    display: flex; align-items: center; gap: 9px;
    padding: 6px 9px; border-radius: var(--radius-sm);
    cursor: pointer; color: var(--text);
}
.orb-search-hit:hover, .orb-search-hit.sel { background: var(--surface-3); }
.orb-search-hit .t { flex: 1; min-width: 0; }
.orb-search-hit .t b { display: block; font-weight: 500; font-size: 12.5px; }
.orb-search-hit .t span { font-size: 11px; color: var(--text-dim); }
.orb-search-empty { padding: 22px 12px; text-align: center; color: var(--text-dim); }

/* ------------------------------------------------------------- layout ----- */
.orb-main { padding: var(--gap-lg); max-width: 1900px; margin: 0 auto; }

.orb-page-head {
    display: flex; align-items: center; gap: 12px;
    flex-wrap: wrap;
    margin-bottom: var(--gap);
}
.orb-page-head h1 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -.2px; }
.orb-page-head .sub { color: var(--text-dim); font-size: 12px; }
.orb-page-head .spacer { flex: 1; }

.orb-card {
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: var(--card-pad);
}
.orb-card > header {
    display: flex; align-items: baseline; gap: 10px;
    margin: 0 0 14px;
    font-size: 13.5px; font-weight: 600;
}
.orb-card > header h2 { margin: 0; font-size: 13.5px; font-weight: 600; }
.orb-card > header .spacer { flex: 1; }

.orb-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.orb-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
.orb-kpis   { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); margin-bottom: var(--gap); }

/* KPI: the fleet strip is the one place the page raises its voice. */
.orb-kpi {
    position: relative; overflow: hidden;
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 16px 18px;
}
.orb-kpi .v { font-size: 27px; font-weight: 600; letter-spacing: -.6px; line-height: 1.1; }
.orb-kpi .l { font-size: 11.5px; color: var(--text-dim); margin-top: 4px; }
.orb-kpi .k { font-size: 11.5px; color: var(--text-dim); display: block; margin-bottom: 4px; }
.orb-kpi.is-accent { border-color: rgba(242,101,34,.35); }
.orb-kpi.is-accent .v { color: var(--accent-hi); }
.orb-kpi.is-danger .v { color: var(--danger); }
.orb-kpi.is-ok .v { color: var(--ok); }
.orb-kpi.is-warn .v { color: var(--warn); }

/* -------------------------------------------------------------- chips ----- */
.chip {
    display: inline-flex; align-items: center; gap: 5px;
    height: 20px; padding: 0 8px; border-radius: 10px;
    font-size: 11px; font-weight: 500; white-space: nowrap;
}
.chip-ok     { background: var(--ok-bg);     color: var(--ok); }
.chip-warn   { background: var(--warn-bg);   color: var(--warn); }
.chip-danger { background: var(--danger-bg); color: var(--danger); }
.chip-info   { background: var(--info-bg);   color: var(--info); }
.chip-mute   { background: var(--surface-3); color: var(--text-mute); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Modifier: an outlined chip that takes its colour from the group. */
.chip-outline {
    border: 1px solid currentColor;
    background: transparent;
    opacity: .9;
}

/* Container: a wrapping row of chips. Deliberately NOT called chip-group — that
   name was doing double duty as a chip modifier, so the wrapper div inherited the
   border and rendered as one full-width box. */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ------------------------------------------------------------ buttons ----- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 30px; padding: 0 11px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2); color: var(--text);
    font-size: 12.5px; font-family: inherit; font-weight: 500;
    cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--surface-3); border-color: var(--accent-deep); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
.btn-icon { width: 30px; padding: 0; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* --------------------------------------------------------- grid toolbar ---
   One row on every list page: search, filters, page size, export, pagination.
   Collapses to search + a filter button on narrow screens.                  */
.orb-toolbar {
    display: flex; align-items: center; gap: 10px;
    padding: 12px var(--card-pad);
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    margin-bottom: var(--gap);
    flex-wrap: nowrap;
}
.orb-toolbar .t-search { position: relative; flex: 0 1 260px; }
.orb-toolbar .t-search input {
    width: 100%; height: 30px; padding: 0 9px 0 28px;
    background: var(--surface-0); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text); font-size: 12.5px; font-family: inherit;
}
.orb-toolbar .t-search .icon { position: absolute; left: 8px; top: 7px; color: var(--text-dim); }
.orb-toolbar .t-filters { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.orb-toolbar .t-filters::-webkit-scrollbar { display: none; }
.orb-toolbar .spacer { flex: 1; }
.orb-toolbar .t-mobile-filter { display: none; }

select.orb-select {
    height: 30px; padding: 0 26px 0 9px;
    background: var(--surface-0) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23A2958B' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") no-repeat right 9px center;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    color: var(--text); font-size: 12.5px; font-family: inherit;
    appearance: none; cursor: pointer;
}
select.orb-select:focus { border-color: var(--accent); outline: none; }

.orb-pager { display: flex; align-items: center; gap: 3px; }
.orb-pager .count { color: var(--text-dim); font-size: 11.5px; margin-right: 6px; white-space: nowrap; }
.orb-pager button {
    min-width: 27px; height: 27px; padding: 0 6px;
    background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm);
    color: var(--text-mute); font-size: 12px; font-family: inherit; cursor: pointer;
}
.orb-pager button:hover:not(:disabled) { background: var(--surface-3); color: var(--text); }
.orb-pager button.on { background: var(--accent-dim); color: var(--accent-hi); border-color: rgba(242,101,34,.3); }
.orb-pager button:disabled { opacity: .3; cursor: default; }

/* --------------------------------------------------------------- table ---- */
.orb-table-wrap {
    background: var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
table.orb-table { width: 100%; border-collapse: collapse; }
table.orb-table thead th {
    height: 30px; padding: 0 11px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    font-size: 11px; font-weight: 600; color: var(--text-mute);
    text-align: left; white-space: nowrap; user-select: none;
}
table.orb-table thead th.sortable { cursor: pointer; }
table.orb-table thead th.sortable:hover { color: var(--text); }
table.orb-table thead th .sort { opacity: .35; margin-left: 3px; }
table.orb-table thead th.sorted .sort { opacity: 1; color: var(--accent-hi); }
table.orb-table tbody td {
    height: var(--row-h); padding: 0 11px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
table.orb-table tbody tr:hover { background: var(--surface-2); }
table.orb-table tbody tr:last-child td { border-bottom: 0; }
table.orb-table .num { text-align: right; font-variant-numeric: tabular-nums; }

.orb-empty {
    padding: 40px 16px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; color: var(--text-dim); font-size: 12.5px; line-height: 1.6;
}
.orb-empty > * { max-width: 42ch; }
.orb-empty h3 { margin: 0 0 5px; font-size: 14px; font-weight: 600; }
.orb-empty p { margin: 0 0 14px; color: var(--text-dim); }

/* usage bar inside a table cell */
.usebar { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.usebar .track { flex: 1; height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.usebar .fill { height: 100%; border-radius: 3px; background: var(--ok); }
.usebar .fill.warn { background: var(--warn); }
.usebar .fill.danger { background: var(--danger); }
.usebar .pct { font-size: 11.5px; color: var(--text-mute); width: 34px; text-align: right; font-variant-numeric: tabular-nums; }

/* pinned note surfacing on a machine row */
.note-flag {
    display: inline-flex; align-items: center; height: 19px; padding: 0 7px;
    border-radius: 4px; background: var(--warn-bg); color: var(--warn);
    font-size: 10.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
    flex-shrink: 0; align-self: flex-start;
}

/* --------------------------------------------------------------- charts --- */
.chart-box { position: relative; height: 190px; }

/* ------------------------------------------------------------ responsive --
   Below 768px the table becomes cards. A nine-column table that scrolls
   sideways is abandoned immediately on a phone, so it is not offered.       */
@media (max-width: 1400px) {
    .orb-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
    .orb-grid-3 { grid-template-columns: 1fr; }
    .orb-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    :root { --gap: 12px; --gap-lg: 14px; --card-pad: 14px; }

    .orb-kpis { grid-template-columns: repeat(2, 1fr); }
    .orb-kpi .v { font-size: 20px; }

    .orb-nav { display: none; }
    .orb-nav.open {
        display: flex; flex-direction: column; align-items: stretch;
        position: fixed; inset: var(--header-h) 0 auto 0;
        background: var(--surface-2); border-bottom: 1px solid var(--border);
        padding: 8px; gap: 2px; max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    }
    .orb-burger { display: inline-flex !important; }
    .orb-search { flex: 1; }
    .orb-search kbd { display: none; }

    .chart-box { height: 180px; }

    /* toolbar: search stays, everything else moves into the sheet */
    .orb-toolbar .t-filters,
    .orb-toolbar .t-pagesize,
    .orb-toolbar .orb-pager .pages { display: none; }
    .orb-toolbar .t-mobile-filter { display: inline-flex; }

    /* table -> cards */
    table.orb-table thead { display: none; }
    table.orb-table, table.orb-table tbody, table.orb-table tr, table.orb-table td { display: block; width: 100%; }
    table.orb-table tr {
        background: var(--surface-1);
        border: 1px solid var(--border-soft);
        border-radius: var(--radius);
        margin-bottom: 8px; padding: 10px 11px;
    }
    table.orb-table tbody td { height: auto; padding: 2px 0; border: 0; }
    table.orb-table tbody td[data-label]::before {
        content: attr(data-label) " ";
        display: inline-block; min-width: 92px;
        color: var(--text-dim); font-size: 11px;
    }
    table.orb-table tbody td.secondary { display: none; }
    table.orb-table tr.expanded td.secondary { display: block; }
    table.orb-table .num { text-align: left; }
}

.orb-burger { display: none; }

/* offline banner for the installed app */
.orb-offline {
    display: none;
    padding: 7px 14px;
    background: var(--warn-bg); color: var(--warn);
    border-bottom: 1px solid rgba(232,163,61,.3);
    font-size: 12px; text-align: center;
}
body.is-offline .orb-offline { display: block; }

/* The sign-in screens moved to orbit-auth.css, which is loaded only by
   _LayoutAuth. Keeping a second copy of the .auth-* rules here would mean
   two places to change and a load order that decides which one wins. */

/* ====================================================== machine detail ==== */
.orb-back {
    display: inline-block;
    color: var(--text-mute);
    font-size: 11.5px;
    text-decoration: none;
    margin-bottom: 3px;
}
.orb-back:hover { color: var(--accent-hi); }
.orb-back::before { content: "‹ "; }
.orb-page-actions { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.orb-meta { color: var(--text-mute); font-size: 11.5px; }
.orb-wrap { word-break: break-all; }
.orb-span-2 { grid-column: span 2; }

.orb-pinned { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--gap); }
.orb-pinned-note {
    background: var(--warn-bg);
    border: 1px solid var(--warn);
    border-radius: var(--radius-sm);
    padding: 9px 11px;
}
.orb-pinned-note p { margin: 5px 0 4px; font-size: 12.5px; line-height: 1.5; }

.orb-facts { margin: 0; display: grid; grid-template-columns: 108px 1fr; gap: 7px 10px; font-size: 12.5px; }
.orb-facts dt { color: var(--text-mute); font-size: 11.5px; }
.orb-facts dd { margin: 0; color: var(--text); }

.orb-vol { margin-bottom: 12px; }
.orb-vol:last-child { margin-bottom: 0; }
.orb-vol-top { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; margin-bottom: 5px; }
.orb-vol-top b { margin-left: auto; font-variant-numeric: tabular-nums; }
.orb-vol-top small { color: var(--text-mute); }

.orb-list, .orb-notes { list-style: none; margin: 0; padding: 0; }
.orb-list li, .orb-notes li {
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12.5px;
    line-height: 1.5;
}
.orb-list li:last-child, .orb-notes li:last-child { border-bottom: 0; }
.orb-list a { color: var(--text); text-decoration: none; font-weight: 500; margin-right: 6px; }
.orb-list a:hover { color: var(--accent-hi); }
.orb-list p, .orb-notes p { margin: 4px 0 0; }
.orb-notes p { color: var(--text); white-space: pre-wrap; }

@media (max-width: 900px) {
    .orb-span-2 { grid-column: span 1; }
}
@media (max-width: 768px) {
    .orb-page-actions { width: 100%; margin: 8px 0 0; }
    .orb-page-actions .btn { flex: 1; justify-content: center; }
    .orb-facts { grid-template-columns: 96px 1fr; }
}

.orb-flash {
    background: var(--info-bg);
    border: 1px solid var(--info);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    font-size: 12.5px;
    margin-bottom: var(--gap);
}

/* =========================================================== 12-col grid ===
   orb-grid-2 and orb-grid-3 gave different column widths on the same page, so
   a card in a two-up row never lined up with one in a three-up row below it.
   One 12-column track fixes that: everything snaps to the same rhythm.
   ------------------------------------------------------------------------ */
.orb-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gap);
    margin-bottom: var(--gap);
}
.orb-row:last-child { margin-bottom: 0; }

.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-12 { grid-column: span 12; }

/* Cards inside a row stretch to the tallest sibling so edges align. */
.orb-row > .orb-card { display: flex; flex-direction: column; }
.orb-row > .orb-card > .grow { flex: 1; }

/* ============================================================== welcome ====
   A person opening this at 09:00 wants to know who they are, what changed and
   whether anything needs them — before a wall of numbers.
   ------------------------------------------------------------------------ */
.orb-welcome {
    display: flex; align-items: flex-start; gap: var(--gap);
    background:
        radial-gradient(120% 180% at 0% 0%, rgba(242,101,34,.16) 0%, transparent 62%),
        var(--surface-1);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    padding: 20px var(--card-pad);
    margin-bottom: var(--gap);
}
.orb-welcome .w-text { flex: 1; min-width: 0; }
.orb-welcome h1 {
    margin: 0 0 4px;
    font-size: 21px; font-weight: 600; letter-spacing: -.3px;
}
.orb-welcome h1 .name { color: var(--accent-hi); }
.orb-welcome p { margin: 0; color: var(--text-mute); font-size: 12.5px; }
.orb-welcome .w-meta {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; flex-wrap: wrap;
}
.orb-welcome .w-actions { display: flex; gap: 8px; flex-shrink: 0; }
.orb-welcome .w-clock {
    text-align: right; flex-shrink: 0;
    padding-left: var(--gap); border-left: 1px solid var(--border-soft);
}
.orb-welcome .w-clock .t {
    font-family: var(--font-mono); font-size: 24px; font-weight: 500;
    letter-spacing: -.5px; display: block; line-height: 1.15;
}
.orb-welcome .w-clock .d { font-size: 11.5px; color: var(--text-dim); }

/* ========================================================= small panels ==== */
.orb-stat-list { list-style: none; margin: 0; padding: 0; }
.orb-stat-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 12.5px;
}
.orb-stat-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.orb-stat-list li:first-child { padding-top: 0; }
.orb-stat-list .n {
    margin-left: auto; font-variant-numeric: tabular-nums;
    font-weight: 600; font-size: 13px;
}
.orb-stat-list a { color: var(--text); }
.orb-stat-list a:hover { color: var(--accent-hi); }

/* A donut-free severity breakdown: a stacked bar reads faster at this size. */
.orb-split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.orb-split span { display: block; height: 100%; }
.orb-split .s-danger { background: var(--danger); }
.orb-split .s-warn   { background: var(--warn); }
.orb-split .s-info   { background: var(--info); }
.orb-split .s-mute   { background: var(--surface-3); }

.orb-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11.5px; color: var(--text-mute); }
.orb-legend i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 5px; }

.chart-box { position: relative; height: 240px; }

/* ========================================================== placeholder ==== */
.orb-soon {
    text-align: center;
    padding: 64px 24px;
}
.orb-soon .mark {
    width: 52px; height: 52px; border-radius: 14px;
    display: grid; place-items: center; margin: 0 auto 16px;
    background: var(--accent-dim); color: var(--accent-hi);
}
.orb-soon h2 { margin: 0 0 6px; font-size: 17px; font-weight: 600; }
.orb-soon p { margin: 0 auto 18px; max-width: 460px; color: var(--text-mute); font-size: 12.5px; line-height: 1.6; }
.planned {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
    max-width: 620px; margin: 0 auto;
}

@media (max-width: 1400px) {
    .orb-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
    .col-3, .col-4, .col-5 { grid-column: span 6; }
    .col-7, .col-8, .col-9 { grid-column: span 12; }
}
@media (max-width: 768px) {
    .orb-kpis { grid-template-columns: repeat(2, 1fr); }
    .orb-row > [class^="col-"] { grid-column: span 12; }
    .orb-welcome { flex-direction: column; padding: 16px var(--card-pad); }
    .orb-welcome .w-clock {
        text-align: left; padding-left: 0; border-left: 0;
        padding-top: 12px; border-top: 1px solid var(--border-soft); width: 100%;
    }
    .orb-welcome h1 { font-size: 18px; }
    .chart-box { height: 180px; }
}

/* ====================================================== mobile hardening ===
   The first responsive pass stopped at "the grid becomes cards". It missed the
   things that actually force a phone viewport to scroll sideways: the header's
   name block, an unwrapped toolbar, and long unbroken values like a GUID.
   Anything that cannot shrink gets told what to do here.
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    /* Name and role beside the avatar are the widest fixed thing in the header. */
    .orb-avatar .who { display: none; }
    .orb-avatar { padding: 4px; border: 0; background: transparent; }
    .orb-header { gap: 10px; padding: 0 12px; }
    .orb-brand img { height: 32px; }
}

@media (max-width: 768px) {
    /* Nothing may push the page wider than the phone. */
    html, body { overflow-x: hidden; }
    .orb-main { padding: var(--gap); width: 100%; }
    .orb-card, .orb-toolbar, .orb-table-wrap, .orb-welcome { max-width: 100%; }

    .orb-toolbar { flex-wrap: wrap; gap: 8px; }
    .orb-toolbar .t-search { flex: 1 1 100%; }
    .orb-toolbar .spacer { display: none; }
    .orb-toolbar .orb-pager { margin-left: auto; }

    .orb-page-head h1 { font-size: 17px; }
    .orb-page-head .orb-page-actions { width: 100%; }

    /* Long identifiers — agent GUIDs, MACs, storage paths — were the other
       thing dragging the layout wide. */
    .ident, .orb-facts dd, .orb-stat-list li { overflow-wrap: anywhere; }
    .orb-facts { grid-template-columns: 1fr; gap: 2px 0; }
    .orb-facts dt { margin-top: 8px; }
    .orb-facts dd { margin-bottom: 2px; }

    .orb-stat-list li { flex-wrap: wrap; }
    .orb-stat-list .n { margin-left: auto; }

    /* Cards in the mobile grid transform were inheriting the desktop row height. */
    table.orb-table tr { margin-bottom: var(--gap); padding: 12px 14px; }
    table.orb-table tbody td { padding: 3px 0; }

    .orb-welcome .w-actions { width: 100%; }
    .orb-welcome .w-actions .btn { flex: 1; justify-content: center; }

    .orb-soon { padding: 40px 16px; }
}

@media (max-width: 420px) {
    .orb-kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
    .orb-kpi { padding: 12px 13px; }
    .orb-kpi .v { font-size: 19px; }
    .orb-header { gap: 8px; padding: 0 10px; }
    .orb-brand img { height: 28px; }
}

/* ============================================================ light theme ===
   Same warmth, inverted. Surfaces keep a hint of the logo's brown rather than
   going pure grey, so the orange still belongs on the page. Status colours are
   darkened — the greens and ambers that read well on near-black wash out badly
   on white.
   ------------------------------------------------------------------------ */
:root[data-theme="light"] {
    --surface-0: #FAF7F3;
    --surface-1: #FFFFFF;
    --surface-2: #F2ECE5;
    --surface-3: #E8DFD5;
    --border:    #DCD0C4;
    --border-soft: #EBE3D9;

    --accent:      #E05513;
    --accent-hi:   #C4460C;
    --accent-deep: #A63A08;
    --accent-dim:  rgba(224,85,19,.12);

    --text:      #23190F;
    --text-mute: #6A5B4D;
    --text-dim:  #8B7A6A;

    --ok:     #16875A;
    --warn:   #A96B0B;
    --danger: #C62B31;
    --info:   #1F6FD0;
    --ok-bg:     rgba(22,135,90,.11);
    --warn-bg:   rgba(169,107,11,.12);
    --danger-bg: rgba(198,43,49,.10);
    --info-bg:   rgba(31,111,208,.10);
}

:root[data-theme="light"] .orb-header { box-shadow: 0 1px 2px rgba(35,25,15,.05); }
:root[data-theme="light"] .orb-card,
:root[data-theme="light"] .orb-kpi,
:root[data-theme="light"] .orb-toolbar,
:root[data-theme="light"] .orb-table-wrap { box-shadow: 0 1px 2px rgba(35,25,15,.04); }
:root[data-theme="light"] .orb-avatar .initials { color: #fff; }

/* The logo is drawn for a dark backdrop; on light it needs no treatment beyond
   keeping it off pure white. */
:root[data-theme="light"] .orb-brand img { filter: none; }

/* Theme toggle shows the icon for the theme you would switch TO. */
.orb-theme-toggle .i-sun { display: none; }
.orb-theme-toggle .i-moon { display: block; }
:root[data-theme="light"] .orb-theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .orb-theme-toggle .i-moon { display: none; }

/* ========================================================== profile menu ==== */
.orb-profile { position: relative; }

.orb-avatar {
    font-family: inherit; font-size: inherit; text-align: left;
    transition: border-color .12s ease, background .12s ease;
}
.orb-avatar:hover { border-color: var(--accent-deep); }
.orb-avatar .caret { color: var(--text-dim); margin-left: 2px; transition: transform .16s ease; }
.orb-profile.open .orb-avatar .caret { transform: rotate(180deg); }
.orb-profile.open .orb-avatar { border-color: var(--accent); }

.orb-menu {
    position: absolute; right: 0; top: calc(100% + 8px);
    width: 256px; padding: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 12px 30px rgba(0,0,0,.35);
    z-index: 60;

    opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.orb-profile.open .orb-menu {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}

.orb-menu .m-head { display: flex; align-items: center; gap: 10px; padding: 10px 10px 12px; }
.orb-menu .m-head .initials {
    width: 34px; height: 34px; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
    background: linear-gradient(135deg, var(--accent), var(--accent-deep));
    color: #fff; font-size: 12px; font-weight: 600;
}
.orb-menu .m-head b { display: block; font-size: 13px; font-weight: 600; }
.orb-menu .m-head span { font-size: 11.5px; color: var(--text-dim); overflow-wrap: anywhere; }

.orb-menu .m-sep { height: 1px; background: var(--border-soft); margin: 4px 2px; }

.orb-menu .m-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 9px 10px;
    background: none; border: 0; border-radius: var(--radius-sm);
    color: var(--text); font-family: inherit; font-size: 12.5px; text-align: left;
    cursor: pointer; text-decoration: none;
}
.orb-menu .m-item:hover { background: var(--surface-3); color: var(--text); }
.orb-menu .m-item svg { color: var(--text-mute); flex-shrink: 0; }
.orb-menu .m-item.is-danger { color: var(--danger); }
.orb-menu .m-item.is-danger svg { color: var(--danger); }
.orb-menu .m-item.is-danger:hover { background: var(--danger-bg); }
.orb-menu form { margin: 0; }

@media (max-width: 900px) {
    /* The name block is hidden on small screens, so anchor the menu to the avatar. */
    .orb-menu { width: 240px; }
}

/* ===================================================== animated not-found ===
   Used by the 404 page and by every section that has no screen yet. The mark is
   the product's own metaphor — a console watching things orbit — which beats a
   generic broken-robot illustration and costs nothing but CSS.
   ------------------------------------------------------------------------ */
.orb-orbit {
    position: relative;
    width: 148px; height: 148px;
    margin: 0 auto 22px;
}
.orb-orbit .ring {
    position: absolute; inset: 0;
    border: 1px solid var(--border);
    border-radius: 50%;
}
.orb-orbit .ring.r2 { inset: 20px; border-style: dashed; opacity: .7; }
.orb-orbit .ring.r3 { inset: 40px; opacity: .45; }

.orb-orbit .core {
    position: absolute; inset: 0;
    display: grid; place-items: center;
}
.orb-orbit .core span {
    width: 46px; height: 46px; border-radius: 14px;
    display: grid; place-items: center;
    background: var(--accent-dim);
    color: var(--accent-hi);
    font-family: var(--font-mono); font-size: 15px; font-weight: 600;
    animation: orb-breathe 3.4s ease-in-out infinite;
}

.orb-orbit .sat {
    position: absolute; inset: 0;
    animation: orb-spin 7s linear infinite;
}
.orb-orbit .sat.s2 { animation-duration: 11s; animation-direction: reverse; }
.orb-orbit .sat i {
    position: absolute; top: -4px; left: 50%;
    width: 9px; height: 9px; margin-left: -4.5px;
    border-radius: 50%; background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-dim);
}
.orb-orbit .sat.s2 i {
    top: 16px; width: 6px; height: 6px; margin-left: -3px;
    background: var(--info); box-shadow: 0 0 0 3px var(--info-bg);
}

@keyframes orb-spin   { to { transform: rotate(360deg); } }
@keyframes orb-breathe {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.07); opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
    .orb-orbit .sat, .orb-orbit .core span { animation: none; }
}

.orb-404 { text-align: center; padding: 56px 24px 64px; }
.orb-404 .code {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px;
    text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px;
}
.orb-404 h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; letter-spacing: -.2px; }
.orb-404 p { margin: 0 auto 22px; max-width: 46ch; color: var(--text-mute); font-size: 13px; line-height: 1.65; }
.orb-404 .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 768px) {
    .orb-orbit { width: 120px; height: 120px; }
    .orb-orbit .ring.r2 { inset: 16px; }
    .orb-orbit .ring.r3 { inset: 32px; }
    .orb-404 { padding: 36px 16px 44px; }
    .orb-404 .actions .btn { flex: 1; justify-content: center; }
}

/* ================================================================ gauges ===
   Ring gauges without a chart library: one conic-gradient, one mask. Cheaper
   than a Chart.js doughnut per card and it inherits the theme variables, so it
   recolours on toggle with no JS.
   ------------------------------------------------------------------------ */
.orb-gauge {
    --pct: 0;
    --ring: var(--accent);
    position: relative;
    width: 128px; height: 128px;
    margin: 4px auto 10px;
    border-radius: 50%;
    background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--surface-3) 0);
    display: grid; place-items: center;
}
.orb-gauge::after {
    content: "";
    position: absolute; inset: 11px;
    border-radius: 50%;
    background: var(--surface-1);
}
.orb-gauge .g-val {
    position: relative; z-index: 1;
    font-size: 25px; font-weight: 600; letter-spacing: -.6px; line-height: 1;
}
.orb-gauge .g-val small { font-size: 12px; font-weight: 500; color: var(--text-mute); }
.orb-gauge .g-sub {
    position: relative; z-index: 1;
    font-size: 11px; color: var(--text-dim); margin-top: 4px;
}
.orb-gauge.is-ok     { --ring: var(--ok); }
.orb-gauge.is-warn   { --ring: var(--warn); }
.orb-gauge.is-danger { --ring: var(--danger); }
.orb-gauge.is-info   { --ring: var(--info); }

.orb-card.is-centred { align-items: center; text-align: center; }

/* Horizontal bar rows — the "top load" panels. */
.orb-bars { list-style: none; margin: 0; padding: 0; }
.orb-bars li { padding: 7px 0; }
.orb-bars .b-top {
    display: flex; align-items: baseline; gap: 8px;
    font-size: 12.5px; margin-bottom: 5px;
}
.orb-bars .b-top .n { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.orb-bars .b-track { height: 7px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.orb-bars .b-fill {
    display: block; height: 100%; border-radius: 4px;
    background: var(--accent);
    transition: width .4s ease;
}
.orb-bars .b-fill.warn   { background: var(--warn); }
.orb-bars .b-fill.danger { background: var(--danger); }
.orb-bars .b-fill.info   { background: var(--info); }

/* Posture pills — three states side by side per machine. */
.orb-posture { display: flex; gap: 5px; margin-left: auto; flex-shrink: 0; }
.orb-posture span {
    width: 26px; height: 22px; border-radius: 5px;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 600;
}
.orb-posture .p-ok   { background: var(--ok-bg);     color: var(--ok); }
.orb-posture .p-bad  { background: var(--danger-bg); color: var(--danger); }
.orb-posture .p-unk  { background: var(--surface-3); color: var(--text-dim); }

/* Patch rows carry a KB number and a severity, and must wrap on a phone. */
.orb-patch { padding: 9px 0; border-bottom: 1px solid var(--border-soft); }
.orb-patch:last-child { border-bottom: 0; }
.orb-patch .p-where { font-size: 11px; color: var(--text-dim); margin-bottom: 3px; }
.orb-patch .p-title {
    font-size: 12.5px; line-height: 1.45; margin-bottom: 4px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.orb-patch .p-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

@media (max-width: 768px) {
    .orb-gauge { width: 108px; height: 108px; }
    .orb-gauge .g-val { font-size: 21px; }
}

/* ================================================ machine detail additions ===
   Tabs, modals and the wider fact layout the detail page needs. Everything the
   schema stores about a machine is on that page now, so the long inventory
   lists share one tabbed panel rather than taking six panels of their own.
   ------------------------------------------------------------------------ */
.orb-vol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.orb-vol .orb-meta { display: block; margin-top: 5px; }

.orb-posture-list { list-style: none; margin: 0; padding: 0; }
.orb-posture-list li {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 0; border-bottom: 1px solid var(--border-soft); font-size: 12.5px;
}
.orb-posture-list li:last-child { border-bottom: 0; }
.orb-posture-list li > .chip,
.orb-posture-list li > .orb-meta { margin-left: auto; }

.orb-facts.wide { grid-template-columns: 120px 1fr; align-items: start; }
.orb-facts.wide dd { line-height: 1.7; }

.btn-count {
    display: inline-grid; place-items: center; min-width: 17px; height: 17px;
    margin-left: 6px; padding: 0 5px; border-radius: 9px;
    background: var(--accent-dim); color: var(--accent-hi);
    font-size: 10.5px; font-weight: 600;
}

.chart-box.sm { height: 170px; }

/* ---------------------------------------------------------------- tabs ---- */
.orb-tabs {
    display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
    margin: -4px -4px 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--border-soft);
}
.orb-tabs .t {
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px; border: 0; border-radius: var(--radius-sm);
    background: transparent; color: var(--text-mute);
    font-family: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.orb-tabs .t:hover { background: var(--surface-2); color: var(--text); }
.orb-tabs .t.is-active { background: var(--accent-dim); color: var(--accent-hi); }
.orb-tabs .t span {
    font-size: 10.5px; padding: 1px 5px; border-radius: 8px;
    background: var(--surface-3); color: var(--text-dim);
}
.orb-tabs .t.is-active span { background: rgba(255,255,255,.10); color: inherit; }
.orb-tab-filter {
    height: 30px; width: 190px; padding: 0 10px;
    background: var(--surface-0); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: inherit; font-size: 12.5px;
}
.orb-tab-filter:focus { outline: none; border-color: var(--accent); }

.orb-tabpane { display: none; }
.orb-tabpane.is-active { display: block; }
/* A 600-row service list must not push the page to twenty screens. */
.orb-table-wrap.tall { max-height: 460px; overflow-y: auto; }
.orb-table-wrap.tall thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); }

/* --------------------------------------------------------------- modals ---- */
.orb-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px 16px; }
.orb-modal[hidden] { display: none; }
.orb-modal .m-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.62); backdrop-filter: blur(2px); }
.orb-modal .m-panel {
    position: relative; width: 100%; max-width: 560px; max-height: 82vh;
    display: flex; flex-direction: column;
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 30px 70px rgba(0,0,0,.55);
    animation: modal-in .18s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.orb-modal .m-panel > header,
.orb-modal .m-panel > footer {
    display: flex; align-items: center; gap: 10px;
    padding: 14px var(--card-pad);
    border-bottom: 1px solid var(--border-soft);
}
.orb-modal .m-panel > footer { border-bottom: 0; border-top: 1px solid var(--border-soft); }
.orb-modal .m-panel > header h2 { margin: 0; font-size: 14px; font-weight: 600; }
.orb-modal .m-body { padding: 4px var(--card-pad) var(--card-pad); overflow-y: auto; }

@media (max-width: 768px) {
    .orb-tabs { margin-bottom: 12px; }
    .orb-tab-filter { width: 100%; order: 99; }
    .orb-table-wrap.tall { max-height: none; }
    .orb-vol-grid { grid-template-columns: 1fr; }
    .orb-facts.wide { grid-template-columns: 1fr; }
    .orb-modal .m-panel { max-height: 90vh; }
}

/* ============================================================ settings forms ===
   Inline row forms, numeric inputs and the scope picker. Row forms live in the
   last cell and controls reference them with the HTML5 form attribute, because a
   <form> spanning table cells gets relocated by the parser and stops submitting.
   ------------------------------------------------------------------------ */
.orb-inline-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

.orb-num { width: 84px; text-align: right; }

.orb-table input[type="number"],
.orb-table input[type="text"],
.orb-table select,
.orb-form input,
.orb-form select,
.orb-scope-pick select {
    height: 30px; padding: 0 8px;
    background: var(--surface-0);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text); font-family: inherit; font-size: 12.5px;
}
.orb-table select, .orb-form select, .orb-scope-pick select { padding-right: 22px; }
.orb-table input:focus, .orb-table select:focus,
.orb-form input:focus, .orb-form select:focus,
.orb-scope-pick select:focus { outline: none; border-color: var(--accent); }
.orb-table input:disabled, .orb-table select:disabled,
.orb-form input:disabled, .orb-form select:disabled { opacity: .5; cursor: not-allowed; }
.orb-table input::placeholder { color: var(--text-dim); font-style: italic; }

.orb-scope-pick { margin: 0; }
.orb-scope-pick select { height: 32px; min-width: 180px; }

/* A row whose values are set at this level, not inherited. */
.orb-table tr.is-overridden td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

.orb-tabnote { margin: 0 0 14px; max-width: 78ch; line-height: 1.6; }
.orb-note {
    margin-top: 14px; padding: 11px 13px;
    background: var(--surface-0); border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    font-size: 12px; color: var(--text-mute); line-height: 1.6;
}

/* Tabs can be links as well as buttons. */
.orb-tabs a.t { text-decoration: none; }

.orb-form { max-width: 620px; }
.orb-form-row {
    display: grid; grid-template-columns: 190px 220px 1fr;
    align-items: center; gap: 12px;
    padding: 11px 0; border-bottom: 1px solid var(--border-soft);
}
.orb-form-row:last-of-type { border-bottom: 0; }
.orb-form-row label { font-size: 12.5px; color: var(--text-dim); }
.orb-form-row .orb-meta { font-size: 11.5px; }
.orb-form-actions { margin-top: 16px; }

/* ---- storage bars ---------------------------------------------------------
   Three states rather than one: green while there is room, amber approaching the
   warning threshold, red past critical. The thresholds come from the resolved
   policy, so changing a limit in Settings recolours every bar.
   -------------------------------------------------------------------------- */
.usebar { display: block; }
.usebar .track { display: block; height: 8px; border-radius: 4px; background: var(--surface-3); overflow: hidden; }
.usebar .fill { display: block; height: 100%; border-radius: 4px; transition: width .4s ease, background .2s; }
.usebar .fill.ok { background: linear-gradient(90deg, var(--ok), #4FD394); }
.usebar .fill.warn { background: linear-gradient(90deg, var(--warn), #F0BC5B); }
.usebar .fill.danger { background: linear-gradient(90deg, var(--danger), #FF6B70); }

.lvl-ok { color: var(--text); }
.lvl-warn { color: var(--warn); }
.lvl-danger { color: var(--danger); }

@media (max-width: 768px) {
    .orb-form-row { grid-template-columns: 1fr; gap: 6px; }
    .orb-num { width: 100%; }
    .orb-scope-pick select { width: 100%; }
}

/* ================================================ settings: forms & tools ===
   Company/SMTP use a labelled grid rather than the three-column row layout —
   these are many short fields, not a handful of wide ones.
   ------------------------------------------------------------------------ */
.orb-form.wide { max-width: none; }
.orb-grid-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 16px;
}
.orb-grid-form label {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 11.5px; color: var(--text-dim);
}
.orb-grid-form label.span-2 { grid-column: span 2; }
.orb-grid-form label.span-3 { grid-column: span 3; }
.orb-grid-form input, .orb-grid-form select {
    height: 34px; padding: 0 10px;
    background: var(--surface-0); border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text); font-family: inherit; font-size: 13px;
}
.orb-grid-form input:focus, .orb-grid-form select:focus { outline: none; border-color: var(--accent); }
.orb-grid-form .req { color: var(--danger); }

/* ---- sounds --------------------------------------------------------------- */
.orb-upload {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    padding: 12px 14px; margin-bottom: var(--gap);
    background: var(--surface-0);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
}
.orb-upload input[name="name"] { height: 32px; padding: 0 10px; width: 180px;
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 12.5px; }
.orb-upload input[type="file"] { font-size: 12px; color: var(--text-mute); max-width: 100%; }

.orb-sound-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.orb-sound {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: var(--surface-0); border: 1px solid var(--border-soft);
    border-radius: var(--radius);
}
.orb-sound .s-text { flex: 1; min-width: 0; }
.orb-sound .s-text b { display: block; font-size: 12.5px; }
.orb-sound .btn-icon { flex-shrink: 0; color: var(--accent-hi); }
.orb-sound form { margin: 0; }

/* ---- destructive tools ---------------------------------------------------- */
.btn-danger {
    background: var(--danger); border-color: var(--danger); color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #C7373C; border-color: #C7373C; color: #fff; }
.btn-danger:disabled { opacity: .45; cursor: not-allowed; }

.orb-purge .purge-gates {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: var(--gap); padding: 14px;
    background: var(--danger-bg);
    border: 1px solid var(--danger);
    border-radius: var(--radius);
}
.orb-check { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; cursor: pointer; }
.orb-check input { accent-color: var(--danger); width: 15px; height: 15px; margin-top: 1px; }
.purge-type { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.purge-type input {
    width: 140px; height: 32px; padding: 0 10px;
    background: var(--surface-0); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: var(--font-mono); font-size: 12.5px; letter-spacing: 1px;
}
.purge-check { accent-color: var(--danger); width: 15px; height: 15px; }

/* ---- audit ---------------------------------------------------------------- */
.orb-diff summary { cursor: pointer; color: var(--accent-hi); font-size: 11.5px; }
.orb-diff code {
    display: block; margin: 4px 0; padding: 6px 8px;
    background: var(--surface-0); border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-size: 11px; color: var(--text-mute);
    word-break: break-all;
}
.btn.is-disabled { opacity: .4; pointer-events: none; }

/* ---- account security ----------------------------------------------------- */
.sec-head { display: flex; align-items: center; gap: 13px; padding-bottom: 14px; border-bottom: 1px solid var(--border-soft); }
.sec-head h2 { margin: 0 0 2px; font-size: 15px; font-weight: 600; }
.sec-icon {
    width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--surface-2); color: var(--text-mute);
}
.sec-icon.on { background: var(--ok-bg); color: var(--ok); }
.sec-lead { margin: 16px 0; font-size: 13px; color: var(--text-mute); line-height: 1.65; max-width: 70ch; }

.sec-methods { display: flex; flex-direction: column; gap: 10px; }
.sec-method {
    display: flex; align-items: center; gap: 13px;
    padding: 14px; text-decoration: none; color: var(--text);
    background: var(--surface-0); border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    transition: border-color .15s, background .15s;
}
.sec-method:hover { border-color: var(--accent); background: var(--surface-2); }
.sec-method.is-disabled { opacity: .55; pointer-events: none; }
.sec-method .m-ico {
    width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--surface-2); color: var(--text-mute);
}
.sec-method .m-text { flex: 1; min-width: 0; }
.sec-method .m-text b { display: block; font-size: 13.5px; margin-bottom: 3px; }
.sec-method .m-text span { font-size: 12px; color: var(--text-mute); line-height: 1.55; }
.sec-method .m-go { color: var(--text-dim); font-size: 18px; }
.sec-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.sec-actions form { margin: 0; }
.orb-help { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-soft);
            font-size: 11.5px; color: var(--text-dim); line-height: 1.6; }

@media (max-width: 900px) { .orb-grid-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
    .orb-grid-form { grid-template-columns: 1fr; }
    .orb-grid-form label.span-2, .orb-grid-form label.span-3 { grid-column: span 1; }
    .orb-sound-list { grid-template-columns: 1fr; }
}

/* ============================================== settings table breathing ====
   The settings tables were as dense as the fleet grid, but these rows hold form
   controls rather than one line of text, so they need vertical room. Scoped to
   settings so the machine grid stays compact.
   ------------------------------------------------------------------------ */
.orb-card .orb-tabpane .orb-table td,
.orb-form-page .orb-table td { padding: 12px 11px; }

.orb-table tbody tr + tr td { border-top: 1px solid var(--border-soft); }

/* Settings rows carry inputs, so the fleet-grid row height does not apply. */
.orb-table td:has(.orb-inline-form),
.orb-table td:has(select),
.orb-table td:has(input) { height: auto; padding-top: 12px; padding-bottom: 12px; }

.orb-table td > b + .orb-meta { display: block; margin-top: 3px; line-height: 1.5; }

/* ---- sound groups --------------------------------------------------------- */
.orb-sound-group { margin-bottom: 22px; }
.orb-sound-group:last-of-type { margin-bottom: 0; }
.orb-sound-group .g-head {
    display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
}
.orb-sound-group .g-head h3 { margin: 0; font-size: 13px; font-weight: 600; }
.orb-sound-group .orb-empty { padding: 18px; }

/* ---- reports hub ---------------------------------------------------------- */
.orb-report-card {
    display: flex; align-items: flex-start; gap: 13px;
    text-decoration: none; color: var(--text);
    transition: border-color .15s, transform .12s;
}
a.orb-report-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.orb-report-card.is-soon { opacity: .62; }
.orb-report-card .r-ico {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--accent-dim); color: var(--accent-hi);
}
.orb-report-card.is-soon .r-ico { background: var(--surface-2); color: var(--text-dim); }
.orb-report-card .r-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.orb-report-card .r-text b { font-size: 13.5px; }
.orb-report-card .r-text span { font-size: 12px; color: var(--text-mute); line-height: 1.5; }
.orb-report-card .chip { align-self: flex-start; }

/* ---- mail test + sound behaviour ------------------------------------------ */
.orb-testmail {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: var(--gap); padding: 12px 14px;
    background: var(--surface-0); border: 1px solid var(--border-soft);
    border-radius: var(--radius); font-size: 12.5px;
}
.orb-testmail label { color: var(--text-dim); }
.orb-testmail input {
    height: 32px; padding: 0 10px; min-width: 240px;
    background: var(--surface-1); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text); font-family: inherit; font-size: 12.5px;
}

.orb-reset {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: var(--gap); padding-top: var(--gap);
    border-top: 1px solid var(--border-soft);
}
.orb-reset .orb-meta { max-width: 60ch; }

@media (max-width: 640px) {
    .orb-testmail input { min-width: 0; width: 100%; }
}

/* ================================================= sound library (uniform) ===
   Three identical columns. The previous layout gave Warning a full-width grid and
   the other two a centred empty state, so nothing lined up and the kinds read as
   unrelated sections rather than three of the same thing.
   ------------------------------------------------------------------------ */
.orb-kind-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    align-items: start;
}
.orb-kind {
    display: flex; flex-direction: column;
    background: var(--surface-0);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius);
    overflow: hidden;
}
.orb-kind .k-head {
    padding: 11px 13px;
    border-bottom: 1px solid var(--border-soft);
}
.orb-kind .k-head b { display: block; font-size: 12.5px; margin-bottom: 3px; }
.orb-kind .k-head .orb-meta { font-size: 11px; line-height: 1.5; display: block; }
.k-warning { color: var(--warn); }
.k-critical { color: var(--danger); }
.k-info { color: var(--info); }

.orb-kind .k-upload {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    padding: 9px 10px;
    border-top: 1px solid var(--border-soft);
    background: var(--surface-1);
}
.orb-kind .k-upload input[name="name"] {
    flex: 1 1 80px; min-width: 0; height: 28px; padding: 0 8px;
    background: var(--surface-0); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: inherit; font-size: 12px;
}
.orb-kind .k-upload input[type="file"] { flex: 1 1 100%; font-size: 11px; color: var(--text-mute); }
.orb-kind .k-upload .btn { height: 28px; padding: 0 10px; font-size: 12px; }


/* ---- header mute ---------------------------------------------------------- */
.orb-mute-form { margin: 0; display: flex; }
.orb-mute.is-muted { color: var(--danger); background: var(--danger-bg); }
.orb-mute.is-muted:hover { background: var(--danger); color: #fff; }

@media (max-width: 1100px) { .orb-kind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .orb-kind-grid { grid-template-columns: 1fr; } }

/* ============================================ sound library: one per kind ===
   A picker per kind implied a choice that does not exist — there is one warning
   noise, not a library of them. Each kind is a single row: current file, play,
   replace.
   ------------------------------------------------------------------------ */
.orb-kind .k-current {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 13px; flex: 1;
    font-size: 12.5px;
}
.orb-kind .k-current .k-name {
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.orb-kind .k-current .chip { flex-shrink: 0; }

.orb-kind .k-upload {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 13px;
    border-top: 1px solid var(--border-soft);
    background: var(--surface-1);
}
.orb-kind .k-file { flex: 1; min-width: 0; margin: 0; }
.orb-kind .k-file input[type="file"] {
    width: 100%; font-size: 11px; color: var(--text-mute);
}
.orb-kind .k-upload .btn { height: 28px; padding: 0 11px; font-size: 12px; flex-shrink: 0; }

.k-foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin-top: var(--gap); padding-top: var(--gap);
    border-top: 1px solid var(--border-soft);
}
.k-foot form { margin: 0; }

/* Assignment: control and preview on one line. */
.k-pick { display: flex; align-items: center; gap: 8px; }
.k-pick select { flex: 1; min-width: 0; max-width: 220px; }

/* ---- form label alignment -------------------------------------------------
   The label text and its required marker were separate flex children in a
   column, so the asterisk dropped onto its own line and pushed the input down
   out of line with its neighbours. Wrapping the text fixes the row rhythm.
   ------------------------------------------------------------------------ */
.orb-grid-form label > .l {
    display: flex; align-items: baseline; gap: 4px;
    min-height: 16px; line-height: 1.3;
}
.orb-grid-form .req { color: var(--danger); font-style: normal; }
.orb-grid-form label { justify-content: flex-start; }
.orb-grid-form input, .orb-grid-form select { width: 100%; }

/* The behaviour panel is the same grid, so its labels align with Company's. */
.orb-form .orb-grid-form label > .l { color: var(--text-dim); font-size: 11.5px; }

/* Number-plus-unit pairs use the same flex row as the select-plus-preview, so a
   unit label never wraps under its input. */
.orb-table .k-pick { display: inline-flex; align-items: center; gap: 6px; }
.orb-table .k-pick .orb-num { width: 86px; }
.orb-table .k-pick select { max-width: 170px; }