/* ============================================================
   Tobill V2 — design system
   PCS brand: dark backgrounds, blue accent, Inter typography.
   Mirrors PCS-MSP's GitHub-style dark palette tuned for dense
   internal-tool data without losing the brand feel.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&display=swap');

:root {
    /* Backgrounds */
    --bg-0:      #0d1117;
    --bg-1:      #161b22;
    --bg-2:      #1c2128;
    --bg-3:      #21262d;
    --bg-4:      #30363d;

    /* Borders */
    --border:    #30363d;
    --border-h:  #484f58;

    /* Text */
    --fg-0:      #f0f6fc;
    --fg-1:      #c9d1d9;
    --fg-2:      #8b949e;
    --fg-3:      #6e7681;

    /* PCS accent */
    --pcs-blue:        #2563EB;   /* official PCS brand blue (logo) */
    --pcs-blue-hover:  #1d4ed8;
    --pcs-blue-tint:   rgba(37, 99, 235, .14);

    /* MSP-style functional accents */
    --acc-blue:    #58a6ff;
    --acc-green:   #3fb950;
    --acc-red:     #f85149;
    --acc-orange:  #d29922;
    --acc-purple:  #a371f7;
    --acc-cyan:    #39d4d4;

    --acc-blue-bg:   rgba(88, 166, 255, .12);
    --acc-green-bg:  rgba(63, 185, 80, .12);
    --acc-red-bg:    rgba(248, 81, 73, .12);
    --acc-orange-bg: rgba(210, 153, 34, .12);
    --acc-purple-bg: rgba(163, 113, 247, .12);
    --acc-cyan-bg:   rgba(57, 212, 212, .12);

    /* Radii */
    --r-sm: 6px;
    --r:    10px;
    --r-lg: 16px;

    /* Shadows */
    --sh:    0 1px 2px rgba(0, 0, 0, .35);
    --sh-md: 0 4px 12px rgba(0, 0, 0, .25);
    --sh-glow-blue:  0 0 24px rgba(88, 166, 255, .15);

    /* Type sizes */
    --fs-xs:  12px;
    --fs-sm:  13px;
    --fs-md:  14px;
    --fs-lg:  16px;
    --fs-xl:  20px;
    --fs-2xl: 26px;
    --fs-3xl: 34px;
}

/* ============================================================
   Reset
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--bg-0); }
body {
    font: 400 var(--fs-md)/1.55 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--fg-1);
    background: var(--bg-0);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
a { color: var(--acc-blue); text-decoration: none; }
a:hover { color: var(--pcs-blue); }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; letter-spacing: -0.01em; color: var(--fg-0); font-weight: 700; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); font-weight: 600; }
h3 { font-size: var(--fs-lg); font-weight: 600; }
.muted { color: var(--fg-2); }
small.muted { font-weight: 400; }
code, .mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: var(--fs-xs); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--border-h); }

/* ============================================================
   Top bar (sticky, glass, with subtle gradient line)
   ============================================================ */
.topbar {
    background: rgba(13, 17, 23, .85);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 50;
}
.topbar::after {
    content: ""; display: block;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--pcs-blue), transparent);
    opacity: .4;
}
.topbar-inner {
    max-width: none; margin: 0;
    display: flex; align-items: center; gap: 1.5rem;
    padding: .65rem 1.5rem;
}
/* Desktop sidebar collapse toggle (far-left of the top bar) */
.side-collapse-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: 0 0 34px; margin-right: -.4rem;
    background: transparent; border: 1px solid rgba(255,255,255,.15);
    color: #cfd5e0; border-radius: 8px; cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.side-collapse-btn:hover { background: rgba(58,122,254,.15); border-color: #3a7afe; color: #fff; }
.side-collapse-btn svg { width: 18px; height: 18px; }
.brand {
    display: flex; align-items: center; gap: .65rem;
    color: var(--fg-0); font-weight: 700;
    margin-right: auto;   /* push the userbox (and mobile hamburger) to the right */
}
.brand:hover { color: var(--fg-0); opacity: .9; }
.brand-logo { height: 32px; width: auto; display: block; }
.brand-pipe { width: 1px; height: 22px; background: var(--border); }
.brand-name {
    font-size: var(--fs-lg); font-weight: 600;
    background: linear-gradient(90deg, var(--fg-0), var(--acc-blue));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
}

.topnav { display: flex; gap: .15rem; flex: 1; margin-left: 1rem; }
.navlink {
    color: var(--fg-2);
    padding: .5rem .9rem;
    border-radius: var(--r-sm);
    font-weight: 500; font-size: var(--fs-sm);
    transition: background .15s, color .15s;
    position: relative;
}
.navlink:hover { color: var(--fg-0); background: var(--bg-2); }
.navlink.active {
    color: var(--fg-0);
    background: var(--bg-2);
}
.navlink.active::after {
    content: ""; position: absolute;
    bottom: -10px; left: 12px; right: 12px;
    height: 2px; background: var(--pcs-blue);
    border-radius: 2px 2px 0 0;
}

.userbox {
    display: flex; align-items: center; gap: .6rem;
    padding: .25rem .5rem .25rem .8rem;
    border-radius: 999px; background: var(--bg-2);
    border: 1px solid var(--border);
}
.userbox-name { color: var(--fg-0); font-size: var(--fs-sm); font-weight: 500; }
.userbox-short {
    padding: 2px 8px; border-radius: 999px;
    background: var(--pcs-blue-tint); color: var(--acc-blue);
    font-size: var(--fs-xs); font-weight: 700; letter-spacing: .03em;
}
.userbox-logout {
    color: var(--fg-3); font-size: var(--fs-xs);
    padding: .25rem .5rem; border-radius: var(--r-sm);
    margin-left: .25rem;
}
.userbox-logout:hover { color: var(--acc-red); background: var(--acc-red-bg); }

/* ============================================================
   App shell + grouped sidebar navigation
   ============================================================ */
.app-shell {
    display: grid;
    grid-template-columns: 236px minmax(0, 1fr);
    align-items: start;
}
.sidebar {
    position: sticky; top: 54px;
    height: calc(100vh - 54px);
    overflow-y: auto;
    background: var(--bg-1);
    border-right: 1px solid var(--border);
    padding: .6rem .55rem 1.5rem;
}
.side-item {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .6rem; border-radius: 8px;
    color: var(--fg-1); font-size: 13.5px; font-weight: 500;
    text-decoration: none; transition: background .12s, color .12s;
}
.side-item:hover { background: var(--bg-2); color: var(--fg-0); }
.side-item .ic { width: 17px; height: 17px; flex: 0 0 17px; color: var(--fg-2); }
.side-item.active { background: var(--pcs-blue-tint); color: var(--fg-0); font-weight: 600; box-shadow: inset 0 0 0 1px rgba(88,166,255,.22); }
.side-item.active .ic { color: var(--acc-blue); }
.side-dash { margin-bottom: .35rem; }
.side-ext { margin-left: auto; color: var(--fg-3); font-size: 11px; }

.side-group { border: 0; padding: 0; }
.side-group > summary {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: .5rem;
    padding: .4rem .6rem .3rem; margin-top: .5rem;
    font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
    color: var(--fg-3); font-weight: 700;
}
.side-group > summary::-webkit-details-marker { display: none; }
.side-group > summary .ic { width: 12px; height: 12px; flex: 0 0 12px; margin-left: auto; color: var(--fg-3); transition: transform .15s ease; }
.side-group[open] > summary .ic { transform: rotate(90deg); }
.side-group .side-item { margin: 1px 0; }

/* ============================================================
   Main + page head
   ============================================================ */
.main {
    max-width: none; margin: 0;
    padding: 1.75rem 1.75rem;
}
.hero { margin-bottom: 1.5rem; }

/* Collapsed sidebar (desktop): drop the 236px rail, main takes the full width.
   State lives on <html> (localStorage), so it persists across page loads. */
@media (min-width: 861px) {
    /* Collapse to a single full-width column. NB: with the sidebar removed
       from the grid, a leftover "0 1fr" template would auto-place .main into
       the 0-width first column and squish it -- a single 1fr track avoids that. */
    .sidebar-collapsed .app-shell { grid-template-columns: minmax(0, 1fr); }
    .sidebar-collapsed .sidebar { display: none; }
}
@media (max-width: 860px) {
    .side-collapse-btn { display: none; }   /* mobile uses the drawer hamburger */
}

.page-head {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: .15rem 1rem; align-items: baseline;
    margin-bottom: 1.25rem;
}
.page-head h1 { grid-column: 1; grid-row: 1; margin: 0; font-size: var(--fs-2xl); }
.page-head p  { grid-column: 1; grid-row: 2; margin: 0; color: var(--fg-2); font-size: var(--fs-sm); }
.page-head .page-actions { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; gap: .5rem; }

/* ============================================================
   Filter bar
   ============================================================ */
.filter-bar {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    background: var(--bg-1);
    border: 1px solid var(--border); border-radius: var(--r);
    padding: .65rem .85rem;
    margin-bottom: 1rem;
}
.filter-bar input, .filter-bar select,
.page-actions input, .page-actions select {
    padding: .45rem .7rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-sm);
    color: var(--fg-0); background: var(--bg-3);
    min-width: 0;
}
.page-actions input:focus, .page-actions select:focus {
    outline: none; border-color: var(--acc-blue);
    box-shadow: 0 0 0 3px var(--pcs-blue-tint);
}
.filter-bar input[type="search"] { flex: 1 1 200px; min-width: 180px; }
.filter-bar input[type="date"], .filter-bar input[type="month"] { min-width: 140px; }
.filter-bar input:focus, .filter-bar select:focus {
    outline: none; border-color: var(--acc-blue);
    box-shadow: 0 0 0 3px var(--pcs-blue-tint);
}
.filter-bar label { font-size: var(--fs-sm); color: var(--fg-2); display: flex; gap: .35rem; align-items: center; }

/* ============================================================
   Cards
   ============================================================ */
.card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.1rem 1.3rem;
}
.card h2 { margin-top: 0; }
.card-flush { padding: 0; overflow: hidden; }
.card-glow { box-shadow: var(--sh-glow-blue); }

/* ============================================================
   Tables
   ============================================================ */
.data {
    width: 100%; border-collapse: separate; border-spacing: 0;
    font-size: var(--fs-sm);
}
.data th, .data td {
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    color: var(--fg-1);
}
.data thead th {
    background: var(--bg-2);
    color: var(--fg-2);
    font-weight: 600; font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: .05em;
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0;
}
.data tbody tr:hover { background: var(--bg-2); }
.data tbody tr:last-child td { border-bottom: none; }
.data .mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-xs); color: var(--fg-1); }
.data .nowrap { white-space: nowrap; }
.data .num { text-align: right; font-variant-numeric: tabular-nums; }
.data .truncate {
    max-width: 28rem; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.data a { color: var(--fg-0); }
.data a:hover { color: var(--acc-blue); }
.tbl-empty { text-align: center; color: var(--fg-3); padding: 2.5rem 1rem !important; }

/* Pagination */
.pager {
    display: flex; justify-content: center; align-items: center;
    gap: 1rem; margin-top: 1rem; font-size: var(--fs-sm);
}
.pager a, .pager span {
    padding: .35rem .85rem; border-radius: var(--r-sm);
}
.pager a { border: 1px solid var(--border); background: var(--bg-1); }
.pager a:hover { border-color: var(--acc-blue); color: var(--acc-blue); }

/* ============================================================
   Pills
   ============================================================ */
.pill {
    display: inline-flex; align-items: center;
    padding: 2px 8px;
    border-radius: 999px; background: var(--bg-3); color: var(--fg-1);
    font-size: var(--fs-xs); font-weight: 600;
    white-space: nowrap;
    border: 1px solid var(--border);
}
.pill + .pill { margin-left: 4px; }
.pill-sm { padding: 1px 6px; font-size: 10px; font-weight: 700; }
.pill-blue   { background: var(--acc-blue-bg);   color: var(--acc-blue);   border-color: transparent; }
.pill-green  { background: var(--acc-green-bg);  color: var(--acc-green);  border-color: transparent; }
.pill-red    { background: var(--acc-red-bg);    color: var(--acc-red);    border-color: transparent; }
.pill-orange { background: var(--acc-orange-bg); color: var(--acc-orange); border-color: transparent; }
.pill-purple { background: var(--acc-purple-bg); color: var(--acc-purple); border-color: transparent; }
.pill-cyan   { background: var(--acc-cyan-bg);   color: var(--acc-cyan);   border-color: transparent; }
/* aliases */
.pill-ok   { background: var(--acc-green-bg);  color: var(--acc-green);  border-color: transparent; }
.pill-warn { background: var(--acc-orange-bg); color: var(--acc-orange); border-color: transparent; }
.pill-muted { background: var(--bg-3); color: var(--fg-2); border-color: transparent; }
.pill-info { background: var(--acc-blue-bg); color: var(--acc-blue); border-color: transparent; text-decoration: none; }
.pill-lead { background: var(--acc-purple-bg); color: var(--acc-purple); border-color: transparent; }

/* Checkbox + descriptive label laid out inline (used by VAT-exempt, lead,
   Charge-VAT toggles). Checkbox stays top-aligned next to wrapping label text. */
.check-inline { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; font-size: var(--fs-sm); color: var(--fg-1); line-height: 1.45; }
.check-inline input[type="checkbox"] { margin-top: .2rem; flex: 0 0 auto; }
.check-inline span { flex: 1; }
.link-badge { display: inline-block; min-width: 18px; padding: 1px 5px; margin-right: 3px;
              border-radius: 4px; font-size: 11px; font-weight: 700; text-align: center; font-family: var(--font-mono); }
.link-badge.link-ok      { background: var(--acc-green-bg);  color: var(--acc-green); }
.link-badge.link-missing { background: var(--bg-3); color: var(--fg-3); }

/* Prebought hours */
.pill-prebought { background: var(--acc-purple-bg); color: var(--acc-purple); border-color: transparent; font-weight: 700; }
.preb-hint { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem;
             margin: .5rem 0; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--border);
             font-size: var(--fs-xs); color: var(--fg-1); }
.preb-hint.warn { border-color: var(--acc-orange); background: var(--acc-orange-bg); }
.preb-hint.over { border-color: var(--acc-red);    background: var(--acc-red-bg); }
.preb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: .75rem; }
@media (max-width: 720px) { .preb-grid { grid-template-columns: 1fr; } }
.preb-card { padding: .75rem 1rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; }
.preb-card-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--fg-3); }
.preb-card-value { font-size: 28px; font-weight: 700; color: var(--fg-1); margin-top: .25rem; }
.preb-card-value.preb-negative { color: var(--acc-red); }
.preb-unit { font-size: 14px; font-weight: 500; color: var(--fg-3); margin-left: 2px; }
.preb-card-sub { font-size: 12px; color: var(--fg-3); margin-top: .25rem; }
.preb-bar { height: 6px; background: var(--bg-3); border-radius: 3px; overflow: hidden; margin-top: .5rem; }
.preb-bar-fill { height: 100%; background: var(--acc-blue); transition: width .3s ease; }
.preb-bar-fill.warn { background: var(--acc-orange); }
.preb-bar-fill.over { background: var(--acc-red); }
.preb-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin: .5rem 0 .75rem; }
.preb-form { padding: .75rem 1rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; margin-bottom: .75rem; }
.preb-form h4 { margin: 0; font-size: 13px; color: var(--fg-1); }
.preb-ledger-h { margin: 1rem 0 .35rem; font-size: 13px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .5px; }
.preb-ledger { font-size: 12px; }
.preb-ledger td.preb-pos { color: var(--acc-green); font-weight: 600; }
.preb-ledger td.preb-neg { color: var(--acc-red);   font-weight: 600; }

/* Customer AR panel (Pastel outstanding) */
.ar-top { display: flex; align-items: baseline; gap: 1rem; padding: .5rem 0 .75rem; flex-wrap: wrap; }
.ar-total { font-size: 32px; font-weight: 700; }
.ar-total.has-debt { color: var(--acc-red); }
.ar-total.is-clear { color: var(--acc-green); }
.ar-total-label { font-size: var(--fs-xs); }
.ar-aging { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-bottom: .75rem; }
@media (max-width: 720px) { .ar-aging { grid-template-columns: repeat(2, 1fr); } }
.ar-age-cell { padding: .5rem .65rem; background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; text-align: center; }
.ar-age-cell.warn { border-color: var(--acc-orange); }
.ar-age-cell.over { border-color: var(--acc-red); background: var(--acc-red-bg); }
.ar-age-label { font-size: 11px; color: var(--fg-3); text-transform: uppercase; letter-spacing: .5px; }
.ar-age-amount { font-size: 14px; font-weight: 600; color: var(--fg-1); margin-top: .25rem; }
.ar-invoices { font-size: var(--fs-xs); }
.ar-invoices td.ar-due { color: var(--acc-red); font-weight: 600; }

/* Debtors tab */
.debtor-table td.col-warn { color: var(--acc-orange); font-weight: 600; }
.debtor-table td.col-over { color: var(--acc-red);    font-weight: 700; background: var(--acc-red-bg); }
.debtor-table tr:hover td { background: rgba(255,255,255,.02); }
.bulk-bar { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
            padding: .65rem .9rem; margin: .5rem 0;
            background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px; }
.bulk-bar #dbSelTotal { font-weight: 600; color: var(--acc-red); }
.debtor-table tr.row-disabled td { opacity: .55; }
.debtor-table tr.row-disabled input[type=checkbox][disabled] { cursor: not-allowed; }
.debtor-table tbody tr:nth-child(even) td { background: rgba(255,255,255,.015); }
.age-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.age-chip { display: inline-flex; align-items: baseline; gap: .35rem; padding: 2px 8px;
            border-radius: 999px; font-size: 11px; line-height: 1.4;
            background: var(--bg-3); border: 1px solid var(--border); }
.age-chip-label  { font-weight: 700; opacity: .75; font-size: 10px; letter-spacing: .3px; }
.age-chip-amount { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 11px; }
.age-chip.chip-current { background: var(--acc-blue-bg);   color: var(--acc-blue);   border-color: transparent; }
.age-chip.chip-warn    { background: var(--acc-orange-bg); color: var(--acc-orange); border-color: transparent; }
.age-chip.chip-over    { background: var(--acc-red-bg);    color: var(--acc-red);    border-color: transparent; font-weight: 600; }

/* Debtor detail modal — .dialog.dialog-wide beats the later single-class
   .dialog rule (specificity 0,0,2,0 > 0,0,1,0). Without this double-class
   selector, .dialog's max-width: 640px wins and the modal is too narrow. */
.dialog.dialog-wide { max-width: min(1280px, 96vw); width: 96vw; max-height: 92vh; overflow-y: auto; }
.dialog.dialog-wide .dialog-body { overflow-x: visible; }
.dialog.dialog-wide .debtor-invoices { width: 100%; }
.dialog.dialog-wide .debtor-invoices th,
.dialog.dialog-wide .debtor-invoices td { white-space: nowrap; }
.debtor-detail-head { padding-bottom: .5rem; border-bottom: 1px solid var(--border); margin-bottom: .75rem; }
.debtor-detail-head h2 { margin: 0; font-size: 18px; color: var(--fg-1); }
.debtor-detail-top { display: flex; align-items: baseline; gap: 1rem; padding: .75rem 0; flex-wrap: wrap; }
.debtor-detail-total { font-size: 30px; font-weight: 700; color: var(--acc-red); }
.debtor-detail-h { margin: 1.25rem 0 .35rem; font-size: 12px; color: var(--fg-2); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.debtor-invoices, .debtor-history { font-size: var(--fs-xs); }
.debtor-invoices td.ar-due, .debtor-history td.ar-due { color: var(--acc-red); font-weight: 600; }
.db-name-link { cursor: pointer; }
.inv-line { margin-top: .25rem; line-height: 1.4; font-size: .85rem; }
.inv-tag  { color: var(--fg-2); font-size: .75rem; margin-right: .25rem; }
.inv-sep  { color: var(--fg-3); }
.row-cash { box-shadow: inset 3px 0 0 0 var(--acc-orange); }
.row-cash td:first-child { background: rgba(255, 140, 0, 0.06); }
.pill-cash    { background: var(--acc-orange-bg); color: var(--acc-orange); border-color: transparent; font-weight: 600; }
.cash-label   { font-weight: 600; margin-left: .35rem; }
.cash-details { font-size: .82rem; color: var(--fg-2); line-height: 1.35; margin-top: .2rem; }
.muted-warn   { color: var(--acc-orange); font-style: italic; }
.fieldset-cash { border-color: var(--acc-orange) !important; box-shadow: 0 0 0 1px var(--acc-orange-bg) inset; }
.fieldset-cash legend { color: var(--acc-orange); }
.cash-picker { margin: .75rem 0; padding: .75rem; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--bg-3); }
.cash-picker-label { font-size: .85rem; color: var(--fg-2); margin-bottom: .4rem; }
.cash-picked { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.cash-picked-name { font-size: .95rem; flex: 1; min-width: 12rem; }
.cash-picked-meta { font-size: .82rem; color: var(--fg-2); flex-basis: 100%; }
.cash-search input[type="text"] { width: 100%; }
.cash-results { margin-top: .4rem; max-height: 14rem; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
.cash-result { text-align: left; padding: .4rem .6rem; background: var(--bg-3); border: 1px solid transparent; border-radius: 4px; cursor: pointer; }
.cash-result:hover { border-color: var(--acc-blue); }
.cash-result-name { font-size: .9rem; }
.cash-result-meta { font-size: .78rem; color: var(--fg-2); }
.cash-result-empty { padding: .4rem .6rem; font-size: .85rem; }
.btn-link { background: transparent; border: 0; color: var(--acc-blue); padding: .25rem 0; cursor: pointer; }
.btn-link:hover { text-decoration: underline; }
.cash-create-msg { color: var(--acc-orange); font-size: .85rem; margin-top: .4rem; min-height: 1em; }
.req { color: var(--acc-red); }
.link-row { display: grid; grid-template-columns: 9rem 1fr; gap: .75rem; align-items: start; padding: .5rem 0; }
.link-row + .link-row { border-top: 1px solid var(--bg-3); }
.link-row-label { color: var(--fg-2); font-size: .85rem; padding-top: .35rem; }
.link-row-body { display: flex; flex-direction: column; gap: .35rem; }
.link-row-actions { display: flex; gap: .35rem; }
.link-card { padding: .5rem .75rem; background: var(--bg-2); border-radius: 6px; border: 1px solid var(--bg-3); }
.link-card-name { font-weight: 600; }
.link-card-meta { font-size: .82rem; color: var(--fg-2); margin-top: .15rem; }
@media (max-width: 720px) {
    .link-row { grid-template-columns: 1fr; }
    .link-row-label { padding-top: 0; font-weight: 600; }
}
.cash-xero-row { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--bg-3); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cash-xero-label { color: var(--fg-2); font-size: .85rem; flex: 1; min-width: 12rem; }
.cash-xero-card  { padding: .35rem .6rem; background: var(--bg-3); border-radius: 4px; font-size: .85rem; }
.cash-xero-name  { font-weight: 600; }
.cash-xero-actions { display: flex; gap: .35rem; }
/* Invoice-run row state */
.row-hold td { background: rgba(255, 165, 0, 0.05); }
/* Pastel-match: highlight the auto-suggested candidate */
.row-suggested td { background: var(--acc-green-bg); }

/* Settings page: row layout for AppSetting key/value pairs */
.settings-grid { display: grid; gap: .9rem; }
.setting-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 2fr);
    gap: .35rem .85rem; align-items: start;
    padding: .7rem .9rem;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.setting-label {
    display: flex; flex-direction: column; gap: .15rem; margin: 0;
}
.setting-label code { font-size: var(--fs-xs); color: var(--fg-2); }
.setting-label span { color: var(--fg-0); font-weight: 500; }
.setting-control { display: flex; gap: .35rem; align-items: center; }
.setting-control input { flex: 1; }
.setting-help, .setting-meta { grid-column: 2; margin: 0; font-size: var(--fs-xs); }
.setting-meta { font-size: var(--fs-xs); opacity: .7; }

/* Dashboard: labour-type breakdown grid */
.brk-grid {
    display: grid; gap: .75rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.brk-cell {
    background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm);
    padding: .65rem .8rem;
}
.brk-label { font-size: var(--fs-xs); color: var(--fg-2); text-transform: uppercase; letter-spacing: .04em; }
.brk-value { font-size: 1.4rem; font-weight: 700; color: var(--fg-0); margin-top: .2rem; }
.brk-foot  { font-size: var(--fs-xs); color: var(--fg-2); margin-top: .15rem; }

/* Dashboard: leaderboard runner-up list inside a stat card */
.lb-list {
    list-style: none; padding: 0; margin: .5rem 0 0;
    font-size: var(--fs-sm); color: var(--fg-1);
}
.lb-list li {
    display: flex; justify-content: space-between; gap: .5rem;
    padding: .2rem 0; border-top: 1px solid rgba(255,255,255,.04);
}
.lb-list li.lb-self { color: var(--acc-blue); font-weight: 600; }
.lb-list .lb-name { font-family: ui-monospace, Menlo, Consolas, monospace; }
.lb-list .lb-val  { font-variant-numeric: tabular-nums; }
/* Invoice toggles on the job edit page */
.inv-pair { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; padding: .35rem 0; }
.inv-pair label.inline { margin: 0; min-width: 160px; }
.inv-pair .inv-num { display: flex; gap: .4rem; align-items: center; margin: 0; flex: 0 0 auto; }
.inv-pair .inv-num span { font-size: var(--fs-xs); color: var(--fg-2); margin: 0; }
.inv-pair .inv-num input { width: 180px; }
.pill-err  { background: var(--acc-red-bg);    color: var(--acc-red);    border-color: transparent; }
.pill-ticket { background: var(--acc-purple-bg); color: var(--acc-purple); border-color: transparent; }

.syncro-tickets {
    margin-top: .65rem;
    padding: .65rem .75rem;
    background: var(--bg-1);
    border: 1px solid var(--bord);
    border-radius: 8px;
}
.syncro-tickets-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .75rem; margin-bottom: .5rem;
    font-size: var(--fs-xs); color: var(--fg-2);
    text-transform: uppercase; letter-spacing: .04em;
}
.syncro-tickets-list {
    display: flex; flex-direction: column; gap: .35rem;
}
.syncro-ticket-row {
    display: flex; align-items: center; gap: .55rem;
    padding: .45rem .65rem;
    background: var(--bg-2); border: 1px solid var(--bord);
    border-radius: 6px; cursor: pointer;
    text-align: left; color: inherit; font: inherit;
}
.syncro-ticket-row:hover { border-color: var(--acc-blue); background: var(--bg-3); }
.syncro-ticket-subject { flex: 1; font-size: var(--fs-xs); color: var(--fg-1); }
.checkbox-row { display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.checkbox-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .55rem 1rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-weight: 600; font-size: var(--fs-sm);
    cursor: pointer;
    background: var(--bg-2); color: var(--fg-0);
    transition: all .15s;
    text-decoration: none;
}
.btn:hover { border-color: var(--acc-blue); color: var(--acc-blue); background: var(--bg-3); }
.btn-primary {
    background: var(--pcs-blue); color: white; border-color: var(--pcs-blue);
}
.btn-primary:hover {
    background: var(--pcs-blue-hover); border-color: var(--pcs-blue-hover); color: white;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .4);
}
.btn-ghost { background: transparent; }
.btn-ghost:hover { background: var(--bg-2); }
.btn-danger {
    background: var(--acc-red-bg); color: var(--acc-red); border-color: transparent;
}
.btn-danger:hover { background: var(--acc-red); color: white; box-shadow: 0 1px 2px rgba(248, 81, 73, .4); }
.btn-block { width: 100%; }
.btn-sm { padding: .35rem .7rem; font-size: var(--fs-xs); }

/* Clickable table rows (admin views) */
.data tr.row-link { cursor: pointer; transition: background .12s; }
.data tr.row-link:hover { background: var(--bg-3); }
/* Jobs list: wrap full description, no clipping */
.jobs-table .job-desc { white-space: normal; line-height: 1.4; max-width: 720px; }
.jobs-table td { vertical-align: top; }
.jobs-table .hw-supplier { color: var(--acc-orange); font-size: var(--fs-xs); margin-top: .25rem; }
/* Sortable column headers */
.data thead .sort-h {
    display: inline-block; color: var(--fg-1); text-decoration: none;
    font-weight: 600; padding: 0; cursor: pointer;
}
.data thead .sort-h:hover { color: var(--acc-blue); }
.data thead .sort-h.active { color: var(--acc-blue); }
/* Click-to-sort headers that re-order rows in the browser (no reload).
   The whole th is the target, unlike .sort-h which is a link that reloads. */
.data thead th.db-sort { cursor: pointer; user-select: none; }
.data thead th.db-sort:hover { color: var(--acc-blue); }
.data thead th.db-sort.is-sorted { color: var(--acc-blue); }
.data thead th.db-sort .sort-ind { font-size: .7em; margin-left: .25rem; }
/* Inline invoice link badge inside the status cell */
.invoice-link {
    display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: var(--fs-xs); color: var(--acc-blue);
    background: var(--acc-blue-bg); padding: .15rem .45rem;
    border-radius: var(--r-sm); text-decoration: none;
}
.invoice-link:hover { text-decoration: underline; }
.invoice-link-hw { background: var(--acc-orange-bg); color: var(--acc-orange); }
.row-link-cell { color: var(--fg-0); text-decoration: none; }
.row-link-cell:hover { color: var(--acc-blue); }

/* Invoice document (job/invoice.php) -- Pastel-style render */
.invoice-doc {
    background: #fff; color: #0f172a; max-width: 920px; margin: 1rem auto;
    border: 1px solid var(--border); border-radius: var(--r-lg); padding: 2rem 2.25rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
}
.invoice-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    border-bottom: 2px solid #e2e8f0; padding-bottom: 1.1rem; margin-bottom: 1.25rem;
}
.invoice-brand { display: flex; align-items: flex-start; gap: 1rem; }
.invoice-logo { max-height: 64px; width: auto; filter: invert(1) hue-rotate(180deg); }
.invoice-co { font-size: .8rem; color: #64748b; line-height: 1.5; }
.invoice-meta { text-align: right; }
.invoice-doctype { font-size: 1.4rem; font-weight: 700; color: #0f172a; }
.invoice-docnum  { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; color: #475569; margin-top: .15rem; }
.invoice-date    { font-size: .85rem; color: #64748b; margin-top: .15rem; }
.invoice-parties { display: flex; gap: 1.2rem; margin-bottom: 1.25rem; }
.party {
    flex: 1; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; padding: .85rem 1rem;
}
.party h3 {
    margin: 0 0 .3rem; font-size: .7rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: #64748b;
}
.party-name { font-weight: 600; font-size: .95rem; color: #0f172a; }
.party-addr { font-size: .85rem; color: #334155; line-height: 1.5; margin-top: .2rem; white-space: pre-line; }
.party-code { font-size: .8rem; color: #64748b; margin-top: .35rem; }
.party-code code { font-family: ui-monospace, Menlo, Consolas, monospace; }
.invoice-lines { width: 100%; border-collapse: collapse; margin-bottom: 1.25rem; font-size: .85rem; color: #0f172a; }
.invoice-lines thead th {
    text-align: left; background: #f1f5f9; padding: .55rem .7rem; font-size: .7rem;
    text-transform: uppercase; letter-spacing: .04em; color: #64748b;
    border-bottom: 1px solid #e2e8f0; font-weight: 600;
}
.invoice-lines thead th.num { text-align: right; }
.invoice-lines tbody td { padding: .5rem .7rem; border-bottom: 1px solid #e2e8f0; vertical-align: top; }
.invoice-lines tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-lines tbody td.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .75rem; color: #475569; white-space: nowrap; }
.invoice-lines tbody tr.invoice-cont td {
    border-bottom: 1px dashed #f1f5f9; padding: .25rem .7rem; color: #64748b; font-size: .8rem;
}
.invoice-totals { margin-left: auto; min-width: 280px; border-collapse: collapse; }
.invoice-totals td { padding: .35rem .7rem; border: 0; font-size: .9rem; color: #334155; }
.invoice-totals td.lbl { text-align: right; color: #64748b; }
.invoice-totals td.val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; color: #0f172a; }
.invoice-totals tr.grand td { border-top: 2px solid #0f172a; padding: .6rem .7rem; font-size: 1.05rem; font-weight: 700; color: #0f172a; }
.invoice-note { color: var(--fg-2); font-size: .8rem; margin-top: 1.2rem; text-align: center; }

@media print {
    .topbar, .nav, .sidebar, .userbox, .page-head, .no-print { display: none !important; }
    .app-shell { display: block !important; }
    body { background: #fff !important; }
    .main { padding: 0 !important; max-width: none !important; }
    .invoice-doc { box-shadow: none; border: 0; margin: 0; padding: 0; max-width: none; }
    @page { margin: 15mm; }
}

/* ============================================================
   Alerts
   ============================================================ */
.alert {
    padding: .75rem 1rem; border-radius: var(--r-sm);
    font-size: var(--fs-sm); margin-bottom: 1rem;
    border-left: 3px solid;
}
.alert-error   { background: var(--acc-red-bg);    color: var(--acc-red);    border-left-color: var(--acc-red); }
.alert-success { background: var(--acc-green-bg);  color: var(--acc-green);  border-left-color: var(--acc-green); }
.alert-warn    { background: var(--acc-orange-bg); color: var(--acc-orange); border-left-color: var(--acc-orange); }
.alert-info    { background: var(--acc-blue-bg);   color: var(--acc-blue);   border-left-color: var(--acc-blue); }

/* ============================================================
   Forms (general)
   ============================================================ */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
.form-fieldset {
    background: var(--bg-1);
    border: 1px solid var(--border); border-radius: var(--r);
    padding: 1rem 1.2rem;
    margin: 0;
}
.form-fieldset-wide { grid-column: 1 / -1; }
.form-fieldset legend {
    padding: 0 .4rem; margin-left: -.4rem;
    font-weight: 700; color: var(--fg-0);
    font-size: var(--fs-sm); letter-spacing: .01em;
    text-transform: uppercase;
}
.form-fieldset label {
    display: block; margin: .55rem 0;
    font-size: var(--fs-sm); font-weight: 500; color: var(--fg-2);
}
.form-fieldset label > span:first-child { display: block; margin-bottom: .25rem; color: var(--fg-1); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; }
.form-fieldset input[type="text"],
.form-fieldset input[type="email"],
.form-fieldset input[type="password"],
.form-fieldset input[type="number"],
.form-fieldset input[type="date"],
.form-fieldset input[type="time"],
.form-fieldset input[type="search"],
.form-fieldset input[type="month"],
.form-fieldset input[type="url"],
.form-fieldset input[type="tel"],
.form-fieldset select,
.form-fieldset textarea {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-sm);
    color: var(--fg-0); background: var(--bg-3);
    transition: border-color .15s, box-shadow .15s;
}
.form-fieldset input:focus,
.form-fieldset select:focus,
.form-fieldset textarea:focus {
    outline: none;
    border-color: var(--acc-blue);
    box-shadow: 0 0 0 3px var(--pcs-blue-tint);
}
.form-fieldset input[readonly], .form-fieldset input[disabled] {
    background: var(--bg-2); color: var(--fg-3); cursor: not-allowed;
}
.form-fieldset .inline {
    display: flex; align-items: center; gap: .5rem;
    color: var(--fg-1); font-weight: 500;
}
.form-fieldset .inline input[type="checkbox"] { width: auto; }
.form-fieldset textarea { min-height: 4em; resize: vertical; }
.form-fieldset small.muted { color: var(--fg-3); font-weight: 400; text-transform: none; letter-spacing: 0; }

/* Dark form controls for the .quote-form pages (proposal, MSA, quote, invoice,
   recurring) and modal dialog bodies -- same tokens as .form-fieldset so no
   white browser-default boxes appear on the dark theme. */
.quote-form input[type="text"],
.quote-form input[type="email"],
.quote-form input[type="password"],
.quote-form input[type="number"],
.quote-form input[type="date"],
.quote-form input[type="time"],
.quote-form input[type="search"],
.quote-form input[type="month"],
.quote-form input[type="url"],
.quote-form input[type="tel"],
.quote-form select,
.quote-form textarea,
.dialog-body input[type="text"],
.dialog-body input[type="email"],
.dialog-body input[type="number"],
.dialog-body select,
.dialog-body textarea {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-sm);
    color: var(--fg-0); background: var(--bg-3);
    transition: border-color .15s, box-shadow .15s;
}
.quote-form input:focus,
.quote-form select:focus,
.quote-form textarea:focus,
.dialog-body input:focus,
.dialog-body select:focus,
.dialog-body textarea:focus {
    outline: none;
    border-color: var(--acc-blue);
    box-shadow: 0 0 0 3px var(--pcs-blue-tint);
}
.quote-form input[readonly], .quote-form input[disabled] {
    background: var(--bg-2); color: var(--fg-3); cursor: not-allowed;
}
.quote-form .lbl {
    display: block; margin-bottom: .25rem;
    color: var(--fg-1); font-weight: 600; font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: .04em;
}
.quote-form .combobox input { width: 100%; }

.field-row {
    display: grid; gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.form-actions {
    grid-column: 1 / -1;
    display: flex; gap: .5rem; align-items: center;
    padding: .9rem 1rem; background: var(--bg-1); border-radius: var(--r);
    border: 1px solid var(--border);
}

/* Radio-card group (billing types) */
.radio-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: .5rem;
}
.radio-card {
    position: relative;
    cursor: pointer;
    text-align: center;
    padding: .6rem .4rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--bg-2);
    transition: all .15s;
}
.radio-card:hover { border-color: var(--border-h); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card:has(input:checked) {
    border-color: var(--acc-blue); background: var(--acc-blue-bg);
    box-shadow: 0 0 0 3px var(--pcs-blue-tint);
}
.radio-card-letter {
    display: block;
    font-size: var(--fs-xl); font-weight: 800; color: var(--fg-0);
    letter-spacing: -.02em;
    line-height: 1;
}
.radio-card:has(input:checked) .radio-card-letter { color: var(--acc-blue); }
.radio-card-label {
    display: block;
    font-size: 10px; color: var(--fg-2);
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
    margin-top: .15rem;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .35rem;
}

/* ============================================================
   Stats
   ============================================================ */
.stat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 1.5rem;
}
.stat-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 1.2rem 1.3rem;
    transition: border-color .15s;
}
.stat-card:hover { border-color: var(--border-h); }
.stat-card-link { text-decoration: none; color: inherit; transition: all .15s; cursor: pointer; }
.stat-card-link:hover { border-color: var(--acc-blue); transform: translateY(-1px); box-shadow: 0 4px 16px -8px rgba(88,166,255,.4); }
.stat-card-link .stat-value small { font-size: .55em; color: var(--fg-2); font-weight: 400; }
.stat-label { font-size: var(--fs-xs); color: var(--fg-2); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.stat-value {
    font-size: var(--fs-3xl); font-weight: 700; color: var(--fg-0);
    margin: .35rem 0 .25rem;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}
.stat-foot { font-size: var(--fs-sm); color: var(--fg-2); display: flex; gap: .5rem; align-items: center; }

/* ============================================================
   Two-column + entries (timesheet day, dashboard recent)
   ============================================================ */
.two-col {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}
.entry-list { list-style: none; margin: 0; padding: 0; }
.entry {
    margin-bottom: .5rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    background: var(--bg-2);
    transition: all .15s;
    display: flex; align-items: stretch;
    border-left-width: 3px;
}
.entry:hover { border-color: var(--acc-blue); transform: translateY(-1px); }
.entry-link {
    flex: 1; display: flex; gap: .85rem; padding: .65rem .85rem;
    color: inherit; text-decoration: none; text-align: left;
    background: transparent; border: 0; cursor: pointer; font: inherit; width: 100%;
}
.entry-link:disabled { cursor: default; }
.entry-time {
    flex: 0 0 auto; min-width: 92px; padding-top: 2px;
    color: var(--fg-1); font-weight: 600;
}
.entry-body { flex: 1; min-width: 0; }
.entry-head {
    display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
    font-size: var(--fs-sm); margin-bottom: .25rem; color: var(--fg-0);
}
.entry-desc {
    font-size: var(--fs-sm); color: var(--fg-2);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    white-space: pre-wrap;
}
.entry-hours { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--fg-1); }
.entry-actions {
    display: flex; align-items: center; padding: 0 .35rem 0 0;
}

/* Category-coloured left edge */
.entry-cat-client    { border-left-color: var(--acc-green); }
.entry-cat-admin     { border-left-color: var(--acc-blue); }
.entry-cat-drive     { border-left-color: var(--acc-orange); }
.entry-cat-personal  { border-left-color: var(--acc-purple); }
.entry-cat-other     { border-left-color: var(--acc-cyan); }

/* Category pills */
.pill-cat-client    { background: var(--acc-green-bg);  color: var(--acc-green);  border-color: transparent; }
.pill-cat-admin     { background: var(--acc-blue-bg);   color: var(--acc-blue);   border-color: transparent; }
.pill-cat-drive     { background: var(--acc-orange-bg); color: var(--acc-orange); border-color: transparent; }
.pill-cat-personal  { background: var(--acc-purple-bg); color: var(--acc-purple); border-color: transparent; }
.pill-cat-other     { background: var(--acc-cyan-bg);   color: var(--acc-cyan);   border-color: transparent; }

/* Day card (clock-in row + totals row) */
.day-card { display: grid; gap: 1rem; }

/* Big "Clock In" CTA shown when day hasn't started */
.day-clockin-cta {
    display: flex; align-items: end; gap: 1rem; flex-wrap: wrap;
    padding: .75rem 0;
}
.btn-clockin {
    font-size: var(--fs-lg); padding: .85rem 1.6rem;
    box-shadow: 0 6px 24px -8px rgba(37, 99, 235, .55);
}
.clockin-time { display: flex; flex-direction: column; gap: .25rem; }
.clockin-time > span {
    color: var(--fg-2); font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: .04em;
}
.clockin-time > input[type="time"] {
    padding: .55rem .65rem; border-radius: var(--r-sm);
    background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-0);
    font: inherit; font-size: var(--fs-md); min-width: 120px;
}
.clockin-time > input[type="time"]:focus {
    outline: 0; border-color: var(--acc-blue); box-shadow: 0 0 0 2px var(--acc-blue-bg);
}

/* Day-state row: "Arrived 08:00 → Day in progress…" + Total Timesheet button */
.day-state-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.day-state {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    font-size: var(--fs-md);
}
.day-state .mono { font-size: var(--fs-lg); color: var(--fg-0); }
.day-state-sep { color: var(--fg-2); margin: 0 .25rem; }

/* Hardware lines section inside the entry dialog */
.hw-section {
    margin-top: .85rem; padding-top: .65rem;
    border-top: 1px dashed var(--border);
}
.hw-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; margin-bottom: .5rem;
}
.hw-head > span { color: var(--fg-1); font-size: var(--fs-sm); font-weight: 600; }
.hw-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hw-table th {
    text-align: left; padding: .25rem .35rem;
    color: var(--fg-2); font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
}
.hw-table td { padding: .35rem .35rem; vertical-align: middle; }
.hw-table input[type="text"], .hw-table input[type="number"] {
    width: 100%; padding: .35rem .5rem; border-radius: var(--r-sm);
    background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-0);
    font: inherit;
}
.hw-table input:focus { outline: 0; border-color: var(--acc-blue); box-shadow: 0 0 0 2px var(--acc-blue-bg); }

/* Combine UI on the Total/Submit screen */
.combine-group { margin-bottom: 1rem; }
.combine-list .entry { background: var(--bg-2); }
.combine-list .entry:has(.combine-check:checked) {
    background: var(--acc-blue-bg);
    border-color: var(--acc-blue);
}
.combine-row { align-items: center; gap: .85rem; }
.combine-check {
    flex: 0 0 auto;
    width: 18px; height: 18px;
    accent-color: var(--acc-blue);
    cursor: pointer;
}
.combine-controls {
    margin-top: .65rem; padding-top: .65rem;
    border-top: 1px dashed var(--border);
    display: flex; flex-wrap: wrap; gap: .85rem; align-items: center;
}
.combine-controls label.inline { gap: .5rem; }
.combine-controls input[type="number"] {
    width: 110px; padding: .4rem .55rem; border-radius: var(--r-sm);
    background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-0);
    font: inherit;
}

/* Collapsible "Edit clock times" form */
.day-edit-details {
    border: 1px dashed var(--border); border-radius: var(--r-sm);
    padding: 0 .85rem;
}
.day-edit-details > summary {
    cursor: pointer; padding: .55rem 0; color: var(--fg-2);
    font-size: var(--fs-sm); list-style: none;
}
.day-edit-details > summary::-webkit-details-marker { display: none; }
.day-edit-details > summary::before {
    content: "▸"; display: inline-block; margin-right: .35rem;
    transition: transform .15s;
}
.day-edit-details[open] > summary::before { transform: rotate(90deg); }
.day-edit-details > summary:hover { color: var(--fg-1); }
.day-edit-details[open] { padding-bottom: .85rem; }
.day-clock-fields {
    display: flex; flex-wrap: wrap; gap: .75rem; align-items: end;
}
.day-clock-fields > label > span:first-child,
.day-totals > div > .muted {
    display: block; color: var(--fg-2); font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem;
}
.day-clock-fields > label.inline { flex-direction: row; gap: .35rem; align-items: center; padding-bottom: .55rem; }
.day-clock-fields input {
    padding: .45rem .55rem; border-radius: var(--r-sm);
    background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-0);
    font: inherit;
}
.day-clock-fields input:focus {
    outline: none; border-color: var(--acc-blue);
    box-shadow: 0 0 0 3px var(--pcs-blue-tint);
}
.day-clock-fields input[disabled] { color: var(--fg-3); cursor: not-allowed; opacity: .75; }
.day-totals {
    display: flex; flex-wrap: wrap; gap: 1.25rem;
    border-top: 1px dashed var(--border); padding-top: .75rem;
}
.day-totals > div { min-width: 92px; }
.day-totals strong { display: block; font-size: var(--fs-lg); color: var(--fg-0); }

/* Card-head (heading + actions in one row) */
.card-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; margin-bottom: .75rem;
}
.card-head h2 { margin: 0; }
.card-head-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Tiny icon button (X to delete an entry) */
.btn-icon {
    background: transparent; border: 1px solid transparent; color: var(--fg-2);
    width: 28px; height: 28px; border-radius: var(--r-sm);
    font-size: 18px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
}
.btn-icon:hover { background: var(--bg-3); color: var(--acc-red); border-color: var(--acc-red); }

/* HTML <dialog> styling */
.dialog {
    border: 1px solid var(--border); border-radius: var(--r-lg);
    background: var(--bg-1); color: var(--fg-0);
    max-width: 640px; width: 92vw; padding: 0;
    box-shadow: 0 30px 80px -10px rgba(0,0,0,.6);
}
.dialog::backdrop {
    background: rgba(13, 17, 23, .65);
    backdrop-filter: blur(2px);
}
.dialog-head, .dialog-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 1.1rem; gap: .75rem;
    border-bottom: 1px solid var(--border);
}
.dialog-foot { border-bottom: 0; border-top: 1px solid var(--border); justify-content: flex-start; flex-wrap: wrap; }
.form-warn {
    flex-basis: 100%;
    color: var(--acc-red);
    background: var(--acc-red-bg);
    border: 1px solid var(--acc-red);
    border-radius: 6px;
    padding: .5rem .7rem;
    font-size: var(--fs-sm);
}
.dialog-head h3 { margin: 0; font-size: var(--fs-lg); }
.dialog-body { padding: 1rem 1.1rem; display: grid; gap: .85rem; }
.dialog-body label > span:first-child {
    display: block; margin-bottom: .25rem; color: var(--fg-1);
    font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em;
}
.dialog-body input[type="text"],
.dialog-body input[type="time"],
.dialog-body input[type="number"],
.dialog-body select,
.dialog-body textarea {
    width: 100%; padding: .5rem .65rem; border-radius: var(--r-sm);
    background: var(--bg-2); border: 1px solid var(--border); color: var(--fg-0);
    font: inherit;
}
.dialog-body input:focus, .dialog-body select:focus, .dialog-body textarea:focus {
    outline: 0; border-color: var(--acc-blue); box-shadow: 0 0 0 2px var(--acc-blue-bg);
}
.dialog-body textarea { resize: vertical; min-height: 80px; }
.dialog-body fieldset.client-only { transition: opacity .15s; }
.dialog-body .muted-help { color: var(--fg-2); font-size: var(--fs-xs); }

.quick-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }

/* Searchable combobox (typeahead) — used for customer pick */
.combobox { position: relative; }
.combobox-panel {
    position: absolute; left: 0; right: 0; top: 100%;
    margin-top: .25rem; z-index: 50;
    background: var(--bg-2); border: 1px solid var(--border);
    border-radius: var(--r-sm); max-height: 280px; overflow-y: auto;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .55);
}
.combobox-row {
    padding: .45rem .65rem; cursor: pointer;
    font-size: var(--fs-sm); line-height: 1.3;
    border-bottom: 1px solid rgba(255, 255, 255, .04);
    display: flex; gap: .5rem; align-items: baseline;
}
.combobox-row:last-child { border-bottom: 0; }
.combobox-row:hover,
.combobox-row[aria-selected="true"] { background: var(--acc-blue-bg); }
.combobox-row .code { color: var(--acc-blue); font-weight: 600; flex-shrink: 0; }
.combobox-row .desc { color: var(--fg-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combobox-empty { padding: .65rem; color: var(--fg-2); font-style: italic; font-size: var(--fs-sm); }

/* ============================================================
   LOGIN PAGE
   ============================================================ */
.login-body {
    min-height: 100vh;
    background:
      radial-gradient(ellipse at 20% 0%, rgba(37, 99, 235, .15), transparent 50%),
      radial-gradient(ellipse at 80% 100%, rgba(88, 166, 255, .08), transparent 50%),
      var(--bg-0);
    display: grid; place-items: center; padding: 1.5rem;
}
.login-card {
    width: 100%; max-width: 420px;
    background: rgba(22, 27, 34, .85);
    backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid var(--border); border-radius: var(--r-lg);
    padding: 2rem 2rem 1.75rem;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, .5),
                0 0 0 1px rgba(255, 255, 255, .03);
}
.login-brand { text-align: center; margin-bottom: 1.5rem; }
.login-brand img { height: 64px; width: auto; margin-bottom: 1rem; }
.login-brand h1 { margin: 0 0 .25rem; font-size: var(--fs-2xl); color: var(--fg-0); }
.login-tagline { color: var(--fg-2); font-size: var(--fs-sm); margin: 0; }

.login-form label { display: block; margin-bottom: .9rem; font-size: var(--fs-sm); font-weight: 600; color: var(--fg-1); }
.login-form label span { display: block; margin-bottom: .3rem; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--fg-2); }
.login-form input {
    width: 100%; padding: .65rem .85rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-md);
    color: var(--fg-0); background: var(--bg-3);
    transition: border-color .15s, box-shadow .15s;
}
.login-form input:focus {
    outline: none;
    border-color: var(--acc-blue);
    box-shadow: 0 0 0 3px var(--pcs-blue-tint);
}
.login-foot { text-align: center; margin: 1.25rem 0 0; font-size: var(--fs-xs); color: var(--fg-3); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    margin-top: 3rem; border-top: 1px solid var(--border);
    padding: 1rem 1.25rem; background: var(--bg-1);
    color: var(--fg-3);
}
.footer-inner {
    max-width: 1400px; margin: 0 auto;
    font-size: var(--fs-xs);
    display: flex; gap: .5rem; align-items: center;
}
.footer-sep { opacity: .5; }
.footer img { height: 18px; opacity: .6; vertical-align: middle; margin-right: .5rem; }

/* Hamburger toggle (hidden on desktop, visible on mobile via @media) */
.nav-toggle { display: none; }
.nav-toggle-btn { display: none; }

/* Compact stat grid -- denser cards used on listing pages */
.stat-grid-compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.stat-grid-compact .stat-card { padding: .65rem .85rem; }
.stat-grid-compact .stat-value { font-size: var(--fs-xl); margin: .15rem 0 0; }
.stat-grid-compact .stat-label { font-size: var(--fs-xs); }

/* Mobile */
@media (max-width: 860px) {
    .main { padding: 1rem .75rem; }
    .form-grid { grid-template-columns: 1fr; }
    .page-head { grid-template-columns: 1fr; }
    .page-head h1 { font-size: var(--fs-xl); }
    .page-head .page-actions { grid-column: 1; grid-row: 3; margin-top: .5rem; flex-wrap: wrap; }

    /* Topbar: brand + hamburger + (slide-down) nav + userbox */
    .topbar-inner {
        flex-wrap: wrap; gap: .5rem;
        padding: .5rem .85rem;
    }
    .brand-name { display: none; }       /* keep just the logo + pipe */
    .brand-pipe { display: none; }
    .userbox-name { display: none; }
    .userbox-logout { padding: .25rem .4rem; }

    /* Hamburger button */
    .nav-toggle-btn {
        display: inline-flex; flex-direction: column; gap: 4px; cursor: pointer;
        padding: .55rem .6rem; border: 1px solid var(--border); border-radius: var(--r-sm);
        background: var(--bg-2); margin-left: auto;
    }
    .nav-toggle-btn span {
        display: block; width: 20px; height: 2px; background: var(--fg-0); border-radius: 2px;
    }

    /* Sidebar collapses to a slide-in drawer, revealed by the hamburger.
       Animates transform only (no layout thrash). */
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed; top: 54px; left: 0; bottom: 0;
        width: 250px; height: auto; z-index: 45;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--sh-md);
    }
    .nav-toggle:checked ~ .app-shell .sidebar { transform: translateX(0); }

    /* A grid item defaults to min-width:auto, so .main refused to shrink below
       its widest child and stretched the WHOLE page to ~986px on a 390px phone
       -- the overflow-x below never got a chance to engage and everything had
       to be pinch-zoomed. minmax(0,1fr) + min-width:0 let it shrink so wide
       tables scroll inside their own card instead of dragging the page wider. */
    .app-shell { grid-template-columns: minmax(0, 1fr); }
    .main { min-width: 0; }

    /* Browsers give <fieldset> min-width:min-content, so a table inside one
       (days-on-site on a cabling job) drags the form wider than the screen. */
    fieldset { min-width: 0; }

    /* Wide data tables: horizontal scroll inside their container.
       -webkit-overflow-scrolling for momentum on iOS. */
    .card-flush { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .card-flush .data { min-width: 720px; }
    .data thead th { position: static; }     /* sticky breaks inside scrolling container */
    .data th, .data td { padding: .45rem .55rem; font-size: var(--fs-xs); }
    .jobs-table .job-desc { max-width: 380px; }

    /* Stat grids: shrink minmax so cards stack cleanly */
    .stat-grid { grid-template-columns: 1fr 1fr; gap: .6rem; margin-bottom: 1rem; }
    .stat-card { padding: .7rem .85rem; }
    .stat-value { font-size: var(--fs-xl); }
    .stat-grid-compact { grid-template-columns: 1fr 1fr 1fr; gap: .4rem; }
    .stat-grid-compact .stat-card { padding: .5rem .55rem; }
    .stat-grid-compact .stat-value { font-size: var(--fs-md); }
    .stat-grid-compact .stat-label { font-size: 0.62rem; }

    /* Filter bar: stack each control full-width */
    .filter-bar {
        padding: .65rem .75rem;
    }
    .filter-bar > * {
        flex-basis: 100%; min-width: 0;
    }
    .filter-bar input[type="search"], .filter-bar input[type="text"], .filter-bar input[type="date"], .filter-bar select {
        width: 100%;
    }
    .filter-bar .combobox { width: 100%; }

    /* Invoice doc print-style scaled down */
    .invoice-doc { padding: 1.25rem 1rem; }
    .invoice-head { flex-direction: column; gap: .85rem; }
    .invoice-meta { text-align: left; }
    .invoice-parties { flex-direction: column; }
    .invoice-totals { width: 100%; }

    /* Settings rows stack vertically */
    .setting-row { grid-template-columns: 1fr; }
    .setting-help, .setting-meta { grid-column: 1; }
}

@media (max-width: 480px) {
    .stat-grid { grid-template-columns: 1fr; }
    /* The compact variant is a counter strip, not content -- one per row turned
       five small numbers into five full-width bands and pushed the actual list
       below the fold. */
    .stat-grid-compact { grid-template-columns: repeat(3, 1fr); }
}

/* === Invoice run: per-customer review cards === */
.ir-row {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .85rem 1rem;
    display: flex; flex-direction: column; gap: .65rem;
}
.ir-row-head {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    border-bottom: 1px dashed var(--border); padding-bottom: .5rem;
}
.ir-row-id { font-family: var(--mono); color: var(--muted); font-size: .85em; }
.ir-row-amount { margin-left: auto; font-weight: 600; }
.ir-row-amount.is-discount { color: #f87171; } /* red-ish for negative / discount lines */
.ir-reorder-controls { display: inline-flex; gap: .15rem; align-items: center; }
.ir-reorder-controls .btn { padding: .15rem .4rem; font-size: .85em; line-height: 1; min-width: 1.8em; }
.ir-row-fields {
    display: grid;
    grid-template-columns: 130px 220px 150px 100px 100px 1fr;
    gap: .5rem .65rem;
    align-items: end;
}
.ir-row[data-type="hw"] .ir-row-fields {
    grid-template-columns: 130px 220px 1fr 80px 130px;
}
.ir-field { display: flex; flex-direction: column; gap: .2rem; margin: 0; min-width: 0; }
.ir-field > span { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.ir-field input, .ir-field select, .ir-field textarea,
.ir-row .ir-reason {
    width: 100%; box-sizing: border-box;
    padding: .5rem .65rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-sm);
    color: var(--fg-0); background: var(--bg-3);
    transition: border-color .15s, box-shadow .15s;
}
.ir-field input:focus, .ir-field select:focus, .ir-field textarea:focus,
.ir-row .ir-reason:focus {
    outline: none;
    border-color: var(--acc-blue);
    box-shadow: 0 0 0 3px var(--pcs-blue-tint);
}
/* Calendar/clock indicators readable on dark */
.ir-field input[type="date"]::-webkit-calendar-picker-indicator,
.ir-field input[type="time"]::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }
.ir-field-code code {
    font-size: .9em; color: var(--acc-blue); padding: .35rem .5rem;
    background: var(--bg-0); border: 1px solid var(--border); border-radius: 4px;
    display: inline-block; align-self: stretch;
}
.ir-field-desc textarea {
    width: 100%; min-height: 70px; resize: vertical;
    font-family: inherit; font-size: .95em;
}
.ir-field-hwinv { max-width: 320px; }

.ir-row-decision {
    display: flex; gap: .65rem; align-items: center; flex-wrap: wrap;
    padding-top: .5rem; border-top: 1px dashed var(--border);
}
.ir-decision { display: inline-flex; align-items: center; gap: .35rem; margin: 0; cursor: pointer; }
.ir-decision input[type=radio] { margin: 0; }
.ir-reason { flex: 1; min-width: 180px; font-size: .9em; }

@media (max-width: 860px) {
    .ir-row-fields { grid-template-columns: 1fr 1fr; }
    .ir-row[data-type="hw"] .ir-row-fields { grid-template-columns: 1fr 1fr; }
}

/* Cash banner on per-row review for CustomerCode='999' */
.ir-cash-banner {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .55rem .75rem;
    border: 1px solid var(--border); border-radius: 6px;
    background: var(--bg-2);
}
.ir-cash-banner.unlinked { border-color: var(--acc-orange, #d29922); }
.ir-cash-banner.linked   { border-color: var(--acc-green,  #3fb950); }
.ir-cash-banner .ir-cash-name { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.ir-cash-banner .ir-cash-notes {
    font-size: .85em; line-height: 1.45;
    border-left: 2px solid var(--border); padding-left: .65rem; margin-top: .2rem;
}
.ir-cash-banner .ir-cash-pick { align-self: flex-start; }

/* ============================================================
   Quotes module (2026-05-08)
   ============================================================ */

/* Notification bell in the header */
.notif-bell {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    color: var(--fg-2);
    text-decoration: none;
    transition: background .15s, color .15s;
    margin-right: .5rem;
}
.notif-bell:hover { background: var(--bg-3); color: var(--fg-0); }
.notif-bell .bell-icon { font-size: 18px; line-height: 1; filter: grayscale(.4); }
.notif-badge {
    position: absolute; top: 2px; right: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px;
    background: var(--acc-red);
    color: #fff;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}

/* Notifications page */
tr.notif-unread { background: var(--acc-blue-bg) !important; }
tr.notif-unread strong { color: var(--fg-0); }

/* Quote form layout */
.quote-form .grid-2 {
    display: grid; gap: 14px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 14px;
}
@media (max-width: 860px) { .quote-form .grid-2 { grid-template-columns: 1fr; } }
.quote-form .row-2 {
    display: grid; gap: 10px;
    grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) { .quote-form .row-2 { grid-template-columns: 1fr; } }

.quote-form .lbl {
    display: block; margin-bottom: 12px;
    color: var(--fg-2); font-size: var(--fs-sm); font-weight: 500;
}
.quote-form .lbl input,
.quote-form .lbl textarea,
.quote-form .lbl select {
    display: block; width: 100%; box-sizing: border-box;
    margin-top: .35rem;
    padding: .55rem .75rem;
    background: var(--bg-0); color: var(--fg-0);
    border: 1px solid var(--border); border-radius: 6px;
    font-size: var(--fs-sm); font-family: inherit;
}
.quote-form .lbl textarea { min-height: 60px; resize: vertical; }
.quote-form .lbl input:focus,
.quote-form .lbl textarea:focus,
.quote-form .lbl select:focus {
    outline: none; border-color: var(--acc-blue);
    box-shadow: 0 0 0 2px var(--acc-blue-bg);
}
.quote-form .lbl input[readonly],
.quote-form .lbl textarea[readonly] {
    background: var(--bg-1); color: var(--fg-1); border-color: var(--border);
}

.quote-form .kv-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 5px 0; font-size: var(--fs-sm);
    border-bottom: 1px dashed var(--border);
}
.quote-form .kv-row:last-of-type { border-bottom: 0; }
.quote-form .kv-key { color: var(--fg-2); font-weight: 500; }
.quote-form .kv-val { color: var(--fg-0); }

/* Line items table */
.ql-table th, .ql-table td { padding: .35rem .5rem; vertical-align: middle; }
.ql-table .ql-item, .ql-table .ql-qty, .ql-table .ql-unit {
    width: 100%; box-sizing: border-box;
    padding: .4rem .55rem;
    background: var(--bg-0); color: var(--fg-0);
    border: 1px solid var(--border); border-radius: 5px;
    font-size: var(--fs-sm);
}
.ql-table .ql-desc {
    width: 100%; box-sizing: border-box; resize: vertical; min-height: 28px;
    padding: .4rem .55rem;
    background: var(--bg-0); color: var(--fg-0);
    border: 1px solid var(--border); border-radius: 5px;
    font-size: var(--fs-sm); font-family: inherit;
}
.ql-table .ql-item:focus, .ql-table .ql-qty:focus,
.ql-table .ql-unit:focus, .ql-table .ql-desc:focus {
    outline: none; border-color: var(--acc-blue);
    box-shadow: 0 0 0 2px var(--acc-blue-bg);
}
.ql-table td.ql-actions { white-space: nowrap; text-align: right; }
.ql-table td.ql-actions .btn-icon { width: 30px; }
.ql-move:hover { color: var(--acc-blue) !important; border-color: var(--acc-blue) !important; }
.ql-table .num input { text-align: right; font-variant-numeric: tabular-nums; }
.ql-table .ql-vat   { color: var(--fg-2); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.ql-table .ql-total { color: var(--acc-blue); font-variant-numeric: tabular-nums; }

/* Totals box bottom-right of the lines table */
.quote-totals {
    margin: 12px 0 4px auto; max-width: 360px;
    display: flex; flex-direction: column; gap: 6px;
    padding: 14px 18px;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
    font-size: var(--fs-sm);
}
.quote-totals > div {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
}
.quote-totals strong { font-variant-numeric: tabular-nums; color: var(--fg-0); }
/* Discount row inside the quote totals box. The percentage is typed inline
   next to the word "Discount" so it reads as one sentence rather than as a
   separate form field bolted onto a totals panel. */
.quote-totals-discount .muted { display: inline-flex; align-items: baseline; gap: .3rem; }
.discount-input {
    width: 4.5rem; padding: .15rem .35rem; text-align: right;
    background: var(--bg-1); color: var(--fg-0);
    border: 1px solid var(--border); border-radius: 5px;
    font-family: inherit; font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
}
.discount-input:focus { outline: none; border-color: var(--acc-blue); box-shadow: 0 0 0 2px var(--acc-blue-bg); }
.discount-input:disabled { opacity: .6; cursor: not-allowed; }
#totDiscount { color: var(--acc-green); }

.quote-totals-grand {
    margin-top: 6px; padding-top: 10px;
    border-top: 2px solid var(--acc-blue);
    color: var(--fg-0); font-weight: 700; font-size: var(--fs-md);
}
.quote-totals-grand strong { color: var(--acc-blue); }

/* Action button row at the bottom of the edit form */
.form-actions {
    display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px;
}

/* Quote callout colour for Decline reason */
.callout {
    padding: .6rem .85rem; border-radius: 6px;
    font-size: var(--fs-sm);
}
.callout-warn { background: var(--acc-red-bg); color: var(--fg-0); border-left: 3px solid var(--acc-red); }

/* ---- Directors report ------------------------------------------------ */
.dtable { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); min-width: 720px; }
.dtable th, .dtable td { padding: .3rem .6rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--border); }
.dtable thead th { position: sticky; top: 0; background: var(--bg-2); color: var(--fg-2); font-weight: 600; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .03em; z-index: 1; }
.dtable th.dlabel, .dtable td.dlabel { text-align: left; white-space: pre; position: sticky; left: 0; background: var(--bg-1); z-index: 1; }
.dtable thead th.dlabel { background: var(--bg-2); z-index: 2; }
.dtable th.dytd, .dtable td.dytd { border-left: 1px solid var(--border); font-weight: 600; color: var(--fg-0); }
.dtable th.dlast, .dtable td.dlast { color: var(--fg-3); }
.dtable tr.dsec-head td { color: var(--acc-blue); font-weight: 700; text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: .03em; padding-top: .5rem; border-bottom: 0; }
.dtable tr.dline td { color: var(--fg-1); }
.dtable tr.dsubtotal td { font-weight: 600; color: var(--fg-0); border-top: 1px solid var(--border); }
.dtable tr.dmajor td { font-weight: 700; color: var(--fg-0); background: var(--pcs-blue-tint); border-top: 2px solid var(--acc-blue); border-bottom: 2px solid var(--acc-blue); }
.dtable tr.dfinal td { background: var(--acc-blue); color: #fff; }
.dtable tr.dfinal td.dlabel { background: var(--acc-blue); color: #fff; }
.dtable .dneg { color: #f87171; }
.dtable .dz { color: var(--fg-3); }
.dtable.dtable-summary { min-width: 0; }
.dtable.dtable-summary th, .dtable.dtable-summary td { white-space: nowrap; }
.dtable.dtable-bs { min-width: 0; }
.dtable tr.dsub-banner td { color: var(--fg-1); font-weight: 600; padding-top: .5rem; border-bottom: 0; }
.dtable tr.dline-em td { color: var(--fg-1); font-style: italic; }
.dtable tr.dsubtotal-strong td { font-weight: 700; color: var(--fg-0); border-top: 1px solid var(--border); }

/* ---- Directors sub-nav ---------------------------------------------- */
.dir-subnav { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
              margin: 0 0 1rem; border-bottom: 1px solid var(--border); }
.dir-tabs { display: flex; gap: .25rem; }
.dir-tab { padding: .5rem .9rem; color: var(--fg-2); font-weight: 600; font-size: var(--fs-sm);
           border-bottom: 2px solid transparent; text-decoration: none; }
.dir-tab:hover { color: var(--fg-0); }
.dir-tab.active { color: var(--acc-blue); border-bottom-color: var(--acc-blue); }
.dir-lock { color: var(--fg-3); font-size: var(--fs-xs); text-decoration: none; padding: .3rem .5rem; }
.dir-lock:hover { color: #f87171; }

/* ---- Directors passcode gate ---------------------------------------- */
.dunlock-wrap { max-width: 460px; }
.dunlock-card { padding: 1.4rem; }
.dunlock-h { margin: 0 0 .5rem; font-size: var(--fs-lg); }
.dunlock-form { display: flex; flex-direction: column; gap: .8rem; margin-top: 1rem; }
.dunlock-form label { display: flex; flex-direction: column; gap: .3rem; font-size: var(--fs-sm); color: var(--fg-2); }
.dunlock-form input { padding: .55rem .7rem; background: var(--bg-2); border: 1px solid var(--border);
                      border-radius: 6px; color: var(--fg-0); font-size: var(--fs-md); }
.dunlock-form input:focus { outline: none; border-color: var(--acc-blue); box-shadow: 0 0 0 2px var(--pcs-blue-tint); }
.dunlock-form .btn { align-self: flex-start; margin-top: .2rem; }
.dunlock-change { margin-top: 1.2rem; }
.dunlock-change summary { cursor: pointer; color: var(--fg-2); font-size: var(--fs-sm); }
.dunlock-change[open] summary { margin-bottom: .4rem; color: var(--fg-0); }

/* ---- Directors dashboard: KPI cards --------------------------------- */
.dkpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-bottom: 1rem; }
.dkpi { background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.1rem; }
.dkpi-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.dkpi-title { color: var(--fg-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.dkpi-badge { color: var(--acc-blue); background: var(--pcs-blue-tint); border-radius: 999px; padding: .1rem .5rem;
              font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.dkpi-val { font-size: 1.55rem; font-weight: 700; color: var(--fg-0); font-variant-numeric: tabular-nums; line-height: 1.1; }
.dkpi-val .dneg { color: #f87171; }
.dkpi-foot { margin-top: .45rem; font-size: var(--fs-xs); display: flex; align-items: center; gap: .4rem; }
.ddelta { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ddelta.dgood { color: #3fb950; }
.ddelta.dbad { color: #f87171; }
.ddelta.dneutral { color: var(--fg-3); }

/* ---- Directors dashboard: charts ------------------------------------ */
.dchart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.dchart-card { padding: 1rem 1.1rem; }
.dchart-card.dchart-wide { grid-column: 1 / -1; }
.dchart-h { margin: 0 0 .6rem; font-size: var(--fs-sm); color: var(--fg-1); font-weight: 600; }
.dchart { width: 100%; height: auto; display: block; }
.dchart .dgrid { stroke: var(--border); stroke-width: 1; }
.dchart .dzero { stroke: var(--fg-3); stroke-width: 1; }
.dchart .daxis, .dchart .daxislbl { fill: var(--fg-3); font-size: 10px; }
.dlegend { display: flex; gap: 1rem; margin-top: .5rem; flex-wrap: wrap; }
.dleg { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--fs-xs); color: var(--fg-2); }
.dleg-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ---- Directors: period selector + AI analysis ----------------------- */
.dir-subnav-right { display: flex; align-items: center; gap: 1rem; }
.dir-period { display: inline-flex; align-items: center; gap: .4rem; }
.dir-period label { color: var(--fg-3); font-size: var(--fs-xs); }
.dir-period select { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px;
                     color: var(--fg-0); font-size: var(--fs-sm); padding: .3rem .5rem; }
.dir-period select:focus { outline: none; border-color: var(--acc-blue); }

.dinsight { padding: 1rem 1.1rem; margin-bottom: 1rem; border-left: 3px solid var(--acc-blue); }
.dinsight-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.dinsight-actions { display: flex; gap: .5rem; align-items: center; flex-shrink: 0; }
.dinsight-stale { color: #d29922; font-size: var(--fs-xs); margin: 0 0 .5rem; }
.dinsight-err { color: #f87171; }
.dinsight-body { color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.55; }
.dinsight-body h4 { color: var(--fg-0); font-size: var(--fs-sm); margin: .9rem 0 .3rem; }
.dinsight-body h4:first-child { margin-top: 0; }
.dinsight-body p { margin: .3rem 0; }
.dinsight-body ul { margin: .3rem 0 .3rem 1.1rem; }
.dinsight-body li { margin: .15rem 0; }
.dinsight-body strong { color: var(--fg-0); }
.dinsight-meta { color: var(--fg-3); font-size: var(--fs-xs); margin-top: .7rem; }

@media (max-width: 640px) {
    .dir-subnav { flex-wrap: wrap; }
    /* Five tabs no longer fit a phone: the bar scrolls sideways instead of widening the page. */
    .dir-tabs { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .dir-tab { white-space: nowrap; }
    .dinsight-head { flex-direction: column; align-items: flex-start; gap: .5rem; }
}

@media (max-width: 900px) {
    .dkpi-grid { grid-template-columns: repeat(2, 1fr); }
    .dchart-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .dkpi-grid { grid-template-columns: 1fr; }
}

/* ---- Cabling (Milsid) ------------------------------------------------- */
.cal-week { width: 100%; table-layout: fixed; min-width: 900px; }
.cal-week th, .cal-week td { vertical-align: top; padding: .5rem; border: 1px solid var(--bd-0, #21262d); }
.cal-week th { text-align: left; font-weight: 600; }
.cal-week td { height: 9rem; }
.cal-week .cal-today { background: rgba(88,166,255,.07); }
.cal-week th.cal-today { border-bottom: 2px solid var(--acc-blue, #58a6ff); }
.cal-empty { display: block; }

.cal-chip {
    display: block; text-decoration: none; margin-bottom: .3rem;
    padding: .3rem .45rem; border-radius: 6px; font-size: .8rem; line-height: 1.25;
    background: var(--bg-2, #161b22); border-left: 3px solid var(--acc-blue, #58a6ff);
    color: var(--fg-0, #e6edf3);
}
.cal-chip:hover { background: var(--bg-3, #1c2430); }
.cal-chip strong { display: block; font-weight: 600; }
.cal-chip .muted { font-size: .72rem; }
.cal-scheduled   { border-left-color: var(--acc-blue, #58a6ff); }
.cal-in_progress { border-left-color: var(--acc-purple, #a371f7); }
.cal-completed   { border-left-color: var(--ok, #4ade80); }
.cal-unscheduled { border-left-color: var(--acc-orange, #f0883e); display: inline-block; }
.cal-cancelled   { border-left-color: var(--fg-2, #6e7681); opacity: .6; }

@media (max-width: 860px) {
    .cal-week td { height: auto; min-height: 4rem; }
}

/* Phones: seven columns can only ever show three of them, so the week becomes
   an agenda -- one block per day that has work, day name as the heading. */
@media (max-width: 700px) {
    .cal-week,
    .cal-week tbody,
    .cal-week tr,
    .cal-week td { display: block; width: auto; }
    .cal-week thead { display: none; }
    .card-flush .cal-week { min-width: 0; }
    .card-flush:has(.cal-week) { overflow-x: visible; }

    .cal-week td {
        height: auto; min-height: 0;
        border: 0; border-top: 1px solid var(--bd-0, #21262d);
        padding: .6rem 0 .8rem;
    }
    .cal-week tr td:first-child { border-top: 0; }
    .cal-week td::before {
        content: attr(data-day);
        display: block; margin-bottom: .45rem;
        font-weight: 600; font-size: var(--fs-sm);
    }
    .cal-week td.cal-today::before { color: var(--acc-blue, #58a6ff); }
    .cal-week td.cal-day-empty { display: none; }   /* nothing on -- say nothing */
    .cal-week .cal-chip { display: block; }
}

/* Cabling list: fixed layout so Description absorbs the slack instead of the
   table ending early and leaving dead space on the right. */
.cabling-table { table-layout: fixed; }
.cabling-table .c-job    { width: 5.5rem; }
.cabling-table .c-client { width: 16rem; }
.cabling-table .c-desc   { width: auto; }
.cabling-table .c-when   { width: 8.5rem; }
.cabling-table .c-status { width: 7.5rem; }
.cabling-table .c-for    { width: 6.5rem; }
.cabling-table .c-ticket { width: 6rem; }
.cabling-table .c-act    { width: 5rem; text-align: right; }

.cabling-table td { vertical-align: middle; }
/* The 2-line clamp needs display:-webkit-box, which OVERRIDES display:table-cell
   when put on the <td> itself -- the cell drops out of the row and stacks under
   the one before it. Clamp an inner span; the cell stays a cell. */
.cabling-table .clamp2 {
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    white-space: normal;
}
.cabling-table .c-desc { color: var(--fg-2); }

/* ASAP jobs shout on the list + schedule rail. */
.pill-asap {
    background: rgba(248, 81, 73, .16);
    color: #ff9a92;
    border: 1px solid rgba(248, 81, 73, .4);
}
.cal-chip .chip-asap { color: #ff9a92; font-weight: 700; }
.cabling-table .c-flags { width: 5.5rem; white-space: nowrap; }
.cabling-table .c-act   { width: 9.5rem; }
/* Desktop keeps the bare tick (the column is 9.5rem wide); the phone card
   layout turns it back on so the button says what it does. */
.cabling-table .c-act .act-label { display: none; }
.cab-mini { font-size: .75rem; color: var(--fg-2); text-decoration: none; }
.cab-mini:hover { color: var(--acc-blue); }

/* M&D invoice builder: day headings and work-description rows read differently
   from priced lines, matching the shape of their own invoice. */
.cab-inv .inv-day input { font-weight: 600; }
.cab-inv .inv-day td    { background: rgba(88, 166, 255, .07); }
.cab-inv .inv-text td   { background: rgba(255, 255, 255, .02); }
.cab-inv td             { padding: .2rem .3rem; }
.cab-inv input, .cab-inv textarea { width: 100%; }

/* Column widths in CSS, not inline on the <th>, so a phone can override. */
.cab-inv .i-qty  { width: 5.5rem; }
.cab-inv .i-unit,
.cab-inv .i-nett { width: 7rem; }
.cab-inv .i-act  { width: 5.5rem; }

/* Phones: five columns squeeze the description to a 3-line sliver and leave
   the price fields too narrow to read. Each line becomes a small card --
   description on its own row, then the three numbers side by side, labelled,
   then the reorder/remove controls. */
@media (max-width: 700px) {
    .cab-inv,
    .cab-inv tbody { display: block; width: 100%; }
    .cab-inv thead { display: none; }
    .cab-inv tr {
        display: flex; flex-wrap: wrap; align-items: flex-end; gap: .35rem .5rem;
        padding: .5rem .55rem; margin-bottom: .45rem;
        border: 1px solid var(--bd-0, #21262d); border-radius: 6px;
    }
    .cab-inv td { display: block; padding: 0; border: 0; }
    .cab-inv td:empty { display: none; }
    .cab-inv .c-desc { order: 1; flex: 1 0 100%; }
    .cab-inv .c-qty  { order: 2; flex: 1 1 4.5rem; }
    .cab-inv .c-unit { order: 3; flex: 1 1 5rem; }
    .cab-inv .c-nett { order: 4; flex: 1 1 5rem; }
    .cab-inv .ql-actions { order: 5; flex: 1 0 100%; text-align: right; }

    /* Without the header row the number boxes are anonymous. */
    .cab-inv .c-qty::before,
    .cab-inv .c-unit::before,
    .cab-inv .c-nett::before {
        display: block; margin-bottom: .1rem;
        font-size: var(--fs-xs); color: var(--fg-2);
    }
    .cab-inv .c-qty::before  { content: 'Qty'; }
    .cab-inv .c-unit::before { content: 'Unit price'; }
    .cab-inv .c-nett::before { content: 'Nett price'; }

    /* Day headings and free-text blocks only carry a description. */
    .cab-inv .inv-day td,
    .cab-inv .inv-text td { background: none; }
    .cab-inv .inv-day  { background: rgba(88, 166, 255, .07); }
    .cab-inv .inv-text { background: rgba(255, 255, 255, .02); }
    .cab-inv input, .cab-inv textarea { min-width: 0; }
}

/* Days-on-site editor. Rides on .ql-table (the quote line editor) so the inputs
   pick up the same dark treatment; only the widths differ. */
.cab-days { width: auto; min-width: 0; }
.cab-days th { font-weight: 600; font-size: .78rem; }
.cab-days td { padding: .2rem .3rem; }
.cab-days input { width: 100%; }

/* Column widths live here, not as inline style="" on the <th>, so a phone can
   override them -- inline styles win over any stylesheet rule, and the fixed
   rem widths summed to 440px, which forced the whole form off a 390px screen. */
.cab-days .d-date { width: 11rem; }
.cab-days .d-from,
.cab-days .d-to   { width: 7rem; }
.cab-days .d-act  { width: 2.5rem; }

@media (max-width: 700px) {
    .cab-days { width: 100%; table-layout: fixed; }
    .cab-days .d-date { width: 36%; }
    .cab-days .d-from,
    .cab-days .d-to   { width: 27%; }   /* a clipped "--:" reads as broken */
    .cab-days .d-act  { width: 10%; }
    .cab-days input { min-width: 0; font-size: var(--fs-sm); }
    .cab-days td, .cab-days th { padding: .2rem .15rem; }
}

/* Attachments on a cabling job. */
.cab-attach-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.cab-attach {
    position: relative; width: 8.5rem; border: 1px solid var(--bd-0);
    border-radius: 6px; overflow: hidden; background: var(--bg-2);
}
.cab-attach img { display: block; width: 100%; height: 6rem; object-fit: cover; }
.cab-attach .cab-attach-file {
    display: flex; align-items: center; justify-content: center;
    height: 6rem; font-size: 1.6rem;
}
.cab-attach .cab-attach-name {
    display: block; padding: .3rem .4rem; font-size: .7rem; color: var(--fg-2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cab-attach .cab-attach-del {
    position: absolute; top: .2rem; right: .2rem; line-height: 1;
    padding: .1rem .35rem; border-radius: 4px; border: 0; cursor: pointer;
    background: rgba(13, 17, 23, .8); color: #ff9a92; font-size: .85rem;
}
.cab-attach audio { width: 100%; }

@media (max-width: 1200px) {
    .cabling-table .c-client { width: 12rem; }
    .cabling-table .c-ticket { width: 5rem; }
}

/* Phones: M&D works this list on site, so a 9-column table sideways-scrolling
   inside a card is still the wrong shape. Each row becomes a self-contained
   card -- job + status on top, client, description, then the meta line, then
   full-width actions that are big enough to hit with a thumb. Reflow only:
   the markup, wording and pills are the same ones the desktop table uses. */
@media (max-width: 700px) {
    .cabling-table,
    .cabling-table tbody { display: block; width: 100%; }
    .cabling-table thead { display: none; }
    .cabling-table { table-layout: auto; }
    /* Beat the generic wide-table rule (.card-flush .data { min-width: 720px }),
       which otherwise holds these cards at 720px inside a ~356px container and
       pushes the buttons off the right edge. Cards reflow, so nothing scrolls. */
    .card-flush .data.cabling-table { min-width: 0; }
    .card-flush:has(.cabling-table) { overflow-x: visible; }

    .cabling-table tr {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: .3rem .6rem;
        padding: .75rem .85rem; margin-bottom: .55rem;
        background: var(--bg-1);
        border: 1px solid var(--border, var(--bd-0));
        border-radius: 8px;
    }
    .cabling-table tr:hover { background: var(--bg-1); }
    .cabling-table td {
        display: block; width: auto; border: 0;
        padding: 0; font-size: var(--fs-sm);
    }
    .cabling-table td:empty { display: none; }

    .cabling-table .c-job    { order: 1; font-size: var(--fs-md); }
    .cabling-table .c-job br { display: none; }          /* ASAP pill sits inline */
    .cabling-table .c-status { order: 2; margin-left: auto; }
    .cabling-table .c-client { order: 3; flex: 1 0 100%; font-weight: 600; color: var(--fg-0); }
    .cabling-table .c-desc   { order: 4; flex: 1 0 100%; }
    .cabling-table .c-desc .clamp2 { -webkit-line-clamp: 3; }
    .cabling-table .c-when   { order: 5; }
    .cabling-table .c-for    { order: 6; }
    .cabling-table .c-ticket { order: 7; }
    .cabling-table .c-flags  { order: 8; }

    /* Bare initials and a lone date need naming once they leave their column. */
    .cabling-table .c-when::before,
    .cabling-table .c-for::before { color: var(--fg-2); font-size: var(--fs-xs); }
    .cabling-table .c-when::before { content: 'When '; }
    .cabling-table .c-for::before  { content: 'For '; }

    .cabling-table .c-act {
        order: 9; flex: 1 0 100%;
        display: flex; gap: .4rem; margin-top: .45rem; text-align: left;
    }
    /* The mark-complete form carries an inline style="display:inline", which
       beats a stylesheet display, so stretch its button by width instead of
       relying on it being a flex item. */
    .cabling-table .c-act form { flex: 1; }
    .cabling-table .c-act form .btn { width: 100%; }
    .cabling-table .c-act .btn { flex: 1; text-align: center; padding: .5rem .6rem; }
    .cabling-table .c-act .act-label { display: inline; }   /* name the tick */

    .cabling-table .tbl-empty { text-align: center; color: var(--fg-2); }
}


/* Internal reference files on a quote (the supplier quote it was priced from).
   A row-per-file list rather than the cabling card grid: these are documents
   with labels, so the name matters more than a thumbnail. */
.qa-list { display: flex; flex-direction: column; gap: .45rem; }
.qa-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .4rem .55rem; border: 1px solid var(--border);
    border-radius: 6px; background: var(--bg-2);
}
.qa-thumb {
    flex: 0 0 auto; width: 2.6rem; height: 2.6rem; border-radius: 4px;
    overflow: hidden; background: var(--bg-1); border: 1px solid var(--border);
    display: flex; align-items: center; justify-content: center;
}
.qa-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qa-ext { font-size: .62rem; font-weight: 700; color: var(--fg-2); letter-spacing: .03em; }
.qa-meta { min-width: 0; }
.qa-meta a { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-item form { margin: 0; }

@media (max-width: 700px) {
    .qa-item { flex-wrap: wrap; }
    .qa-meta { flex: 1 1 60%; }
}

/* Inline hint under an invoice-run field (e.g. "separate several invoice
   numbers with a semicolon"). Sits inside .ir-field, below the input. */
.ir-hint { font-size: .68rem; color: var(--fg-2); line-height: 1.3; text-transform: none; letter-spacing: 0; }

/* ---- Generic page sub-navigation (Invoice Lookup tabs) ---------------
   Same look as the directors sub-nav, but reusable. Uses real vars:
   --border / --fg-2 / --fg-0 / --acc-blue (NOT --bd-0 / --txt-muted). */
.subnav { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
          margin: 0 0 1rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.subtabs { display: flex; gap: .25rem; flex-wrap: wrap; }
.subtab { padding: .5rem .9rem; color: var(--fg-2); font-weight: 600; font-size: var(--fs-sm);
          border-bottom: 2px solid transparent; text-decoration: none; white-space: nowrap; }
.subtab:hover { color: var(--fg-0); }
.subtab.active { color: var(--acc-blue); border-bottom-color: var(--acc-blue); }

/* ---- Statements: recipient cell in the monthly statement run --------- */
.st-to { width: 100%; min-width: 160px; padding: .3rem .45rem; background: var(--bg-2);
         border: 1px solid var(--border); border-radius: 5px; color: var(--fg-0);
         font-size: var(--fs-xs); font-family: inherit; }
.st-to:focus { outline: none; border-color: var(--acc-blue); }
.st-to.st-empty { border-color: #d29922; }
.st-src { font-size: var(--fs-xs); color: var(--fg-2); margin-top: .15rem; display: block; }
.st-aging { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-top: .75rem; }
.st-aging div { background: var(--bg-2); border: 1px solid var(--border); border-radius: 8px;
                padding: .5rem .6rem; text-align: center; }
.st-aging span { display: block; font-size: var(--fs-xs); color: var(--fg-2); }
.st-aging strong { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .st-aging { grid-template-columns: repeat(2, 1fr); } }

/* ---- Quotes list: internal note column (replaced "Sent to") ---------- */
/* One line only, so a long note can never widen the table. Full text is
   in the title attribute on hover, and editable on the quote itself. */
.data td.quote-note { max-width: 260px; overflow: hidden; text-overflow: ellipsis;
                      white-space: nowrap; color: var(--fg-2); }
@media (max-width: 900px) { .data td.quote-note { max-width: 140px; } }

/* ---- movements (who is where) ------------------------------------------ */
.mv-stop {
    border: 1px solid var(--border); border-radius: 8px;
    padding: .7rem .8rem; margin-bottom: .6rem; background: var(--bg-1);
}
.mv-stop-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .4rem; color: var(--fg-1); font-size: var(--fs-xs);
    text-transform: uppercase; letter-spacing: .04em;
}
.mv-stop label { display: block; margin-top: .4rem; }
.mv-tickets { margin-top: .35rem; }
.mv-used { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .45rem; }
.mv-used .check-inline { flex: 1 1 12rem; margin: 0; }
.mv-mini { list-style: none; margin: 0; padding: 0; }
.mv-mini li { padding: .35rem 0; border-bottom: 1px solid var(--border); }
.mv-mini li:last-child { border-bottom: 0; }
.data.mv-board .b-who   { width: 22%; }
.data.mv-board .b-where { width: 46%; }
.data.mv-board .b-for   { width: 12%; }
.data.mv-board .b-veh   { width: 20%; }
.data tr.row-me td { background: var(--pcs-blue-tint); }

/* Invoices (Pastel): documents that are still open but fall outside the chosen
   date range. They sit under a divider at the foot of the table so the range
   totals above stay honest while the document is still one click from being
   sent. */
.data tr.row-divider td {
    background: var(--bg-2);
    border-top: 2px solid var(--border-h);
    color: var(--fg-2);
    font-size: var(--fs-xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.data tr.row-outside td { background: var(--acc-orange-bg); }
@media (max-width: 700px) {
    .data.mv-board .b-veh, .data.mv-board td:nth-child(4) { display: none; }
    .mv-used { gap: .35rem; }
}

/* Review queue: a change that would DELETE an email address off the record.
   Amber not red, because it is usually a legitimate answer: the customer really
   did remove someone who left. It earns a colour because the old form gave the
   230 multi-address customers no way to submit without deleting one, so the
   reviewer needs to see what accepting it costs. */
.rowwarn > td            { background: rgba(210, 153, 34, .07); }
.rowwarn .dropwarn       { color: var(--acc-orange); font-size: .86rem;
                           padding-top: 0; padding-bottom: .55rem; line-height: 1.45; }
.rowwarn .dropwarn strong{ color: var(--acc-orange); }

/* ---------------------------------------------------------------------------
   Customer tab strip (2026-08-31). Underline tabs to match the GitHub-style
   dark palette the rest of this sheet uses.

   Each tab is a LINK to its own page, not a JS panel. The Details tab is a
   1200-line edit form; rendering the job, ticket, quote and invoice lists
   alongside it on every load would make opening a customer to change a phone
   number wait on Syncro and Pastel.
   --------------------------------------------------------------------------- */
.tabnav {
    display: flex; gap: .15rem; flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin: 0 0 1.1rem;
}
.tabnav a {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .55rem .9rem;
    color: var(--fg-2); text-decoration: none;
    font-size: var(--fs-sm); font-weight: 600;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.tabnav a:hover { color: var(--fg-0); background: var(--bg-2); }
.tabnav a[aria-current="page"] { color: var(--fg-0); border-bottom-color: var(--acc-blue); }
.tabnav .tabcount {
    background: var(--bg-3); color: var(--fg-2);
    border-radius: 999px; padding: 1px 7px;
    font-size: 10px; font-weight: 700; line-height: 1.6;
}
.tabnav a[aria-current="page"] .tabcount { background: var(--acc-blue-bg); color: var(--acc-blue); }
@media (max-width: 700px) {
    .tabnav { gap: 0; }
    .tabnav a { padding: .5rem .6rem; font-size: var(--fs-xs); }
}

/* ----------------------------------------------------------------------
   Status select in a data table (quote list).

   A plain <select> in the Status column would have thrown away the colour
   the list is scanned by, so this wears the same palette as the .pill it
   replaced: same radius, same tinted background, same accent text, and it
   takes the pill variant class straight off the row. Only the affordances
   are added -- a caret, a hover lift and a focus ring -- so it still reads
   as "this is a control" rather than a coloured label.

   Deliberately dense (26px, not the 44px touch minimum): it lives in a
   table row that is 41px tall on a screen used with a mouse, and matching
   the surrounding table beats a rule written for thumbs.
   ---------------------------------------------------------------------- */
.status-select {
    appearance: none; -webkit-appearance: none;
    display: inline-flex; align-items: center;
    height: 26px; padding: 0 22px 0 9px;
    border-radius: 999px;
    border: 1px solid transparent;
    background-color: var(--bg-3); color: var(--fg-1);
    font-family: inherit; font-size: var(--fs-xs); font-weight: 600;
    line-height: 1; white-space: nowrap; cursor: pointer;
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 9px 9px;
    /* Caret. A data URI cannot resolve currentColor, and every one of the four
       tints below is a dark panel with light accent text, so one neutral light
       grey reads on all of them. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239aa3b2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    transition: filter .15s ease, box-shadow .15s ease;
}
.status-select:hover  { filter: brightness(1.35); }
.status-select:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--bg-1), 0 0 0 4px var(--acc-blue); }
/* The dropdown list itself is painted by the OS, so it needs its own colours
   rather than inheriting the pill tint. */
.status-select option { background: var(--bg-2); color: var(--fg-0); font-weight: 500; }
.status-select.pill-cat-client  { background-color: var(--acc-green-bg);  color: var(--acc-green); }
.status-select.pill-cat-admin   { background-color: var(--acc-blue-bg);   color: var(--acc-blue); }
.status-select.pill-cat-other   { background-color: var(--acc-cyan-bg);   color: var(--acc-cyan); }
.status-select.pill-muted       { background-color: var(--bg-3);          color: var(--fg-2); }

/* Holiday phone (leave/holidays.php). Inline claim / reassign forms sit in a table
   cell, outside .filter-bar, so their <select> would otherwise fall to the browser
   white (the bare-input trap). Same dark treatment as the filter bar. */
.hp-form { display: inline-flex; gap: 4px; align-items: center; }
.hp-form select {
    padding: .35rem .5rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-sm);
    color: var(--fg-0); background: var(--bg-3);
    min-width: 0;
}
.hp-form select:focus { outline: none; border-color: var(--acc-blue); }
.hp-table .h-hol   { width: 16rem; }
.hp-table .h-win   { width: 12rem; }
.hp-table .h-act   { white-space: nowrap; }

/* Phone: one card per window. A tech claims from his phone, and the Claim button
   is the last column -- in a horizontally scrolling table it sits off-screen.
   Same reflow as the cabling list: markup, wording and pills unchanged. */
@media (max-width: 700px) {
    .hp-table,
    .hp-table tbody { display: block; width: 100%; }
    .hp-table thead { display: none; }
    .card-flush .data.hp-table { min-width: 0; }
    .card-flush:has(.hp-table) { overflow-x: visible; }
    .hp-table tr {
        display: flex; flex-wrap: wrap; align-items: center;
        gap: .3rem .6rem;
        padding: .75rem .85rem; margin-bottom: .55rem;
        background: var(--bg-1);
        border: 1px solid var(--border);
        border-radius: 8px;
    }
    .hp-table tr:hover { background: var(--bg-1); }
    .hp-table td { display: block; width: auto; border: 0; padding: 0; font-size: var(--fs-sm); }
    .hp-table .h-hol  { order: 1; flex: 1 0 100%; font-size: var(--fs-md); }
    .hp-table .h-win  { order: 2; }
    .hp-table .h-days { order: 3; }
    .hp-table .h-cred { order: 4; margin-left: auto; }
    .hp-table .h-who  { order: 5; flex: 1 0 100%; }
    .hp-table .h-act  { order: 6; flex: 1 0 100%; white-space: normal; }
    .hp-table .h-days::before, .hp-table .h-cred::before, .hp-table .h-who::before { color: var(--fg-2); font-size: var(--fs-xs); }
    .hp-table .h-days::before { content: 'Days off '; }
    .hp-table .h-cred::before { content: 'Credit '; }
    .hp-table .h-who::before  { content: 'Claimed by '; }
    .hp-table .hp-form { display: flex; width: 100%; }
    .hp-table .hp-form select { flex: 1 1 auto; }
    .hp-table .hp-form .btn { flex: 0 0 auto; }
}

/* AI P&L settlement: the per-document tag select and the reclassify button
   sit inside .data tables, outside any .form-fieldset, so they need the dark
   treatment spelled out (same rule as .hp-form). */
.ai-tag-form { display: inline-flex; gap: 4px; align-items: center; }
.ai-tag-form select {
    padding: .3rem .45rem; max-width: 22rem;
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-xs);
    color: var(--fg-0); background: var(--bg-3);
}
.ai-tag-form select:focus { outline: none; border-color: var(--acc-blue); }

/* Supplier price feed table: stock counts that matter read green, zeros go quiet. */
.pf-table .pf-instock { color: var(--acc-green); font-weight: 600; }
.pf-table td { vertical-align: top; }
.pf-table .num { white-space: nowrap; }
/* AI P&L settlement + builds tables: ten money columns, never let a rand figure wrap. */
.ai-settle td, .ai-settle th { white-space: nowrap; font-size: var(--fs-sm); padding-left: .55rem; padding-right: .55rem; }

/* ==========================================================================
   Ask Tobill -- top-bar button + slide-over chat panel (includes/chat_panel.php)
   ========================================================================== */
.tb-chat-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    height: 34px; padding: 0 .7rem; margin-right: .5rem;
    background: var(--pcs-blue-tint); border: 1px solid rgba(37, 99, 235, .45); border-radius: 8px;
    color: var(--fg-0); font: inherit; font-size: var(--fs-sm); font-weight: 600; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.tb-chat-btn svg { width: 18px; height: 18px; }
.tb-chat-btn:hover, .tb-chat-btn[aria-expanded="true"] { background: var(--pcs-blue); border-color: var(--pcs-blue); color: #fff; }
.tb-chat-btn:focus-visible { outline: 2px solid var(--acc-blue); outline-offset: 2px; }

.tb-chat {
    position: fixed; top: 54px; right: 0; bottom: 0; z-index: 60;
    width: min(440px, 100vw);
    display: flex; flex-direction: column;
    background: var(--bg-1); border-left: 1px solid var(--border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, .35);
}
.tb-chat[hidden] { display: none; }
.tb-chat-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: .6rem .75rem .6rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-2);
}
.tb-chat-title { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--fg-0); }
.tb-chat-title svg { width: 18px; height: 18px; color: var(--acc-blue); }
.tb-chat-actions { display: inline-flex; gap: .25rem; }
.tb-chat-icon {
    width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
    background: transparent; border: 1px solid transparent; border-radius: 8px; color: var(--fg-2); cursor: pointer;
    transition: background .15s, color .15s;
}
.tb-chat-icon svg { width: 18px; height: 18px; }
.tb-chat-icon:hover { background: var(--bg-3); color: var(--fg-0); }
.tb-chat-icon:focus-visible { outline: 2px solid var(--acc-blue); }

.tb-chat-body { flex: 1 1 auto; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .75rem; }
.tb-chat-empty p { margin: 0 0 .75rem; color: var(--fg-1); line-height: 1.5; }
.tb-chat-fine { font-size: var(--fs-xs); }
.tb-chat-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.tb-chip {
    padding: .4rem .7rem; border-radius: 999px; border: 1px solid var(--border);
    background: var(--bg-2); color: var(--fg-1); font: inherit; font-size: var(--fs-sm); cursor: pointer; text-align: left;
    transition: background .15s, border-color .15s, color .15s;
}
.tb-chip:hover { background: var(--pcs-blue-tint); border-color: var(--pcs-blue); color: var(--fg-0); }
.tb-chip:focus-visible { outline: 2px solid var(--acc-blue); }

.tb-msg { display: flex; flex-direction: column; max-width: 100%; }
.tb-msg-user { align-items: flex-end; }
.tb-msg-assistant { align-items: flex-start; }
.tb-bubble {
    max-width: 92%; padding: .6rem .8rem; border-radius: 12px; line-height: 1.5; font-size: var(--fs-sm);
    color: var(--fg-0); overflow-wrap: anywhere;
}
.tb-msg-user .tb-bubble { background: var(--pcs-blue); color: #fff; border-bottom-right-radius: 4px; }
.tb-msg-assistant .tb-bubble { background: var(--bg-2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.tb-msg-error .tb-bubble { border-color: var(--acc-red); background: var(--acc-red-bg); }
.tb-bubble p { margin: 0 0 .5rem; }
.tb-bubble p:last-child, .tb-bubble ul:last-child, .tb-bubble ol:last-child { margin-bottom: 0; }
.tb-bubble ul, .tb-bubble ol { margin: 0 0 .5rem; padding-left: 1.1rem; }
.tb-bubble li { margin: .15rem 0; }
.tb-bubble code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--bg-3); padding: 0 .3em; border-radius: 4px; }
.tb-md-h { font-weight: 600; margin: .25rem 0; }
.tb-link { color: var(--acc-blue); text-decoration: underline; text-underline-offset: 2px; }
.tb-link-in {
    display: inline-block; text-decoration: none; padding: 0 .45rem; border-radius: 999px;
    background: var(--acc-blue-bg); border: 1px solid rgba(88, 166, 255, .35); line-height: 1.5; margin: 1px 0;
}
.tb-link-in:hover { background: var(--pcs-blue); color: #fff; border-color: var(--pcs-blue); }
.tb-link-out::after { content: " \2197"; font-size: .85em; }
.tb-steps { font-size: var(--fs-xs); color: var(--fg-3); margin: .25rem 0 0 .25rem; }

.tb-dots { display: inline-flex; gap: 3px; vertical-align: middle; margin-right: .35rem; }
.tb-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-2); animation: tbDot 1.2s infinite ease-in-out; }
.tb-dots i:nth-child(2) { animation-delay: .2s; }
.tb-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes tbDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.tb-working-text { color: var(--fg-2); }
@media (prefers-reduced-motion: reduce) { .tb-dots i { animation: none; opacity: .7; } }

.tb-chat-form {
    display: flex; gap: .5rem; align-items: flex-end;
    padding: .75rem; border-top: 1px solid var(--border); background: var(--bg-2);
}
.tb-chat-form textarea {
    flex: 1 1 auto; resize: none; min-height: 40px; max-height: 160px;
    padding: .55rem .75rem; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-1); color: var(--fg-0); font: inherit; font-size: var(--fs-sm); line-height: 1.4;
}
.tb-chat-form textarea:focus { outline: none; border-color: var(--acc-blue); box-shadow: 0 0 0 3px var(--acc-blue-bg); }
.tb-chat-form textarea:disabled { opacity: .6; }
.tb-chat-send {
    width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: var(--pcs-blue); border: 1px solid var(--pcs-blue); border-radius: 10px; color: #fff; cursor: pointer;
    transition: background .15s;
}
.tb-chat-send svg { width: 18px; height: 18px; }
.tb-chat-send:hover { background: var(--pcs-blue-hover); }
.tb-chat-send:disabled { opacity: .5; cursor: default; }
.tb-chat-send:focus-visible { outline: 2px solid var(--acc-blue); outline-offset: 2px; }

@media (max-width: 860px) {
    .tb-chat-btn { padding: 0; width: 34px; justify-content: center; }
    .tb-chat-label { display: none; }
    .tb-chat { width: 100vw; top: 54px; }
}
@media print { .tb-chat, .tb-chat-btn { display: none !important; } }

/* Ask Tobill: attachments, images, Microsoft 365 hint (2026-09-17) */
.tb-chat-form { flex-wrap: wrap; }
.tb-attach-row { flex: 1 0 100%; display: flex; flex-wrap: wrap; gap: .4rem; }
.tb-attach {
    display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .35rem .2rem .2rem; max-width: 100%;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg-1); font-size: var(--fs-xs); color: var(--fg-1);
}
.tb-attach img { width: 34px; height: 34px; object-fit: cover; border-radius: 5px; }
.tb-attach span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.tb-attach button { border: 0; background: none; color: var(--fg-2); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 .2rem; }
.tb-attach button:hover { color: var(--acc-red); }
.tb-attach.is-uploading span { color: var(--fg-2); font-style: italic; }
.tb-chat-attach {
    width: 40px; height: 40px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; color: var(--fg-2); cursor: pointer; transition: color .15s, border-color .15s;
}
.tb-chat-attach svg { width: 18px; height: 18px; }
.tb-chat-attach:hover { color: var(--acc-blue); border-color: var(--acc-blue); }
.tb-chat-attach:focus-visible { outline: 2px solid var(--acc-blue); outline-offset: 2px; }
.tb-chat.is-drop .tb-chat-form { box-shadow: inset 0 0 0 2px var(--acc-blue); }
.tb-imgs { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
.tb-imgs img { max-width: 100%; max-height: 220px; border-radius: 8px; border: 1px solid rgba(255,255,255,.25); cursor: zoom-in; }
.tb-msg-user .tb-bubble .tb-imgs img { background: #fff; }
.tb-chat-m365 { font-size: var(--fs-sm); padding: .5rem .7rem; border: 1px dashed var(--border); border-radius: 8px; background: var(--bg-2); }
.tb-chat-m365 a { color: var(--acc-blue); font-weight: 600; }

/* generic key/value list + danger text (My Microsoft 365 page) */
.kv { margin: .5rem 0; }
.kv .kv-row { display: grid; grid-template-columns: 120px 1fr; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--border); }
.kv .kv-row:last-of-type { border-bottom: 0; }
.kv dt { color: var(--fg-2); }
.kv dd { margin: 0; }
.text-danger { color: var(--acc-red); }
.login-alt { margin: .9rem 0 0; text-align: center; }
.login-alt .btn { width: 100%; justify-content: center; }

/* My day (2026-09-17) */
.myday-ask { display: flex; gap: .5rem; margin: 0 0 1rem; }
.myday-ask input { flex: 1 1 auto; min-width: 0; padding: .65rem .9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); color: var(--fg-0); font: inherit; font-size: var(--fs-sm); }
.myday-ask input:focus { outline: none; border-color: var(--acc-blue); box-shadow: 0 0 0 3px var(--acc-blue-bg); }
.myday-summary { display: flex; gap: .9rem; align-items: flex-start; border-left: 4px solid var(--acc-blue); margin-bottom: 1rem; }
.myday-summary-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: var(--acc-blue-bg); color: var(--acc-blue); display: inline-flex; align-items: center; justify-content: center; }
.myday-summary-icon svg { width: 18px; height: 18px; }
.myday-summary p { margin: 0 0 .35rem; }
.myday-summary p:last-child { margin-bottom: 0; }
.myday-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1rem; }
.myday-h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--fg-2); margin: .75rem 0 .35rem; }
.myday-h3:first-of-type { margin-top: 0; }
.myday-list { list-style: none; margin: 0; padding: 0; }
.myday-list li { display: flex; gap: .75rem; padding: .45rem 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.myday-list li:last-child { border-bottom: 0; }
.myday-list li.is-now { background: var(--acc-blue-bg); margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem; border-radius: 6px; }
.myday-time { flex: 0 0 5.2rem; color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.myday-main { flex: 1 1 auto; min-width: 0; }
.myday-main a { color: var(--fg-0); font-weight: 500; }
.myday-main a:hover { color: var(--acc-blue); }
.myday-from { color: var(--fg-2); margin-left: .35rem; }
.myday-preview { display: block; color: var(--fg-2); font-size: var(--fs-xs); margin-top: .15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.myday-mail li.is-unread .myday-main > a { font-weight: 600; }
.myday-list .pill { vertical-align: middle; }
@media (max-width: 860px) { .myday-cols { grid-template-columns: minmax(0, 1fr); } .myday-time { flex-basis: 4.2rem; } }
.myday-inline { flex: 0 0 auto; display: inline-flex; gap: .25rem; }
.myday-addrem { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto auto; gap: .4rem; margin-top: .75rem; }
.myday-addrem input, .myday-addrem select { min-width: 0; padding: .45rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); color: var(--fg-0); font: inherit; font-size: var(--fs-sm); }
@media (max-width: 600px) { .myday-addrem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.myday-todo li { align-items: flex-start; }
.myday-todo .myday-tick { order: -1; }
.myday-todo .myday-tick .btn { padding: .1rem .45rem; line-height: 1.4; }
.myday-todo .myday-time { flex-basis: 4.6rem; }
.myday-todo li.is-overdue .myday-time { color: var(--acc-red, #f85149); font-weight: 600; }
.myday-todo .myday-main .pill { vertical-align: middle; }
/* Ask Tobill: talk, files, read aloud */
.tb-chat-mic { position: relative; }
.tb-chat-mic.is-recording { color: #fff; background: var(--acc-red); border-color: var(--acc-red); animation: tb-pulse 1.2s ease-in-out infinite; }
.tb-chat-mic .tb-mic-time { position: absolute; top: -1.35rem; right: 0; font-size: var(--fs-xs); color: var(--acc-red); font-variant-numeric: tabular-nums; }
@keyframes tb-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(248,81,73,.45); } 50% { box-shadow: 0 0 0 6px rgba(248,81,73,0); } }
@media (prefers-reduced-motion: reduce) { .tb-chat-mic.is-recording { animation: none; } }
.tb-files { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
.tb-files audio { max-width: 100%; height: 36px; }
.tb-file { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border-radius: 6px; font-size: var(--fs-xs); background: rgba(255,255,255,.15); color: inherit; text-decoration: none; border: 1px solid rgba(255,255,255,.25); }
.tb-file::before { content: ''; width: 12px; height: 14px; border: 1.5px solid currentColor; border-radius: 2px; opacity: .8; }
.tb-file-voice::before { width: 8px; height: 13px; border-radius: 5px; }
.tb-msg-assistant .tb-file { background: var(--bg-1); border-color: var(--border); }
.tb-msg-assistant { position: relative; }
.tb-speak { position: absolute; right: -2px; bottom: 0; width: 26px; height: 26px; border: 1px solid var(--border); border-radius: 50%; background: var(--bg-1); color: var(--fg-3); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .15s, color .15s; }
.tb-speak svg { width: 14px; height: 14px; }
.tb-msg-assistant:hover .tb-speak, .tb-speak:focus-visible, .tb-speak.is-playing, .tb-speak.is-loading { opacity: 1; }
.tb-speak:hover, .tb-speak.is-playing { color: var(--acc-blue); border-color: var(--acc-blue); }
.tb-speak.is-loading { color: var(--fg-2); animation: tb-pulse 1s ease-in-out infinite; }
@media (hover: none) { .tb-speak { opacity: .7; } }
.myday-ask .myday-ask-btn { width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; color: var(--fg-2); cursor: pointer; }
.myday-ask .myday-ask-btn svg { width: 18px; height: 18px; }
.myday-ask .myday-ask-btn:hover { color: var(--acc-blue); border-color: var(--acc-blue); }
.login-alt-primary { margin-top: .25rem; }
.myday-skel { display: inline-block; background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-1) 50%, var(--bg-2) 75%); background-size: 200% 100%; animation: myday-skel 1.4s ease-in-out infinite; border-radius: 6px; height: 1em; }
p.myday-skel { display: block; margin: .5rem 0; }
@keyframes myday-skel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .myday-skel { animation: none; } }
.myday-loading { font-style: italic; }
/* Ask Tobill in its own window */
.tb-solo, .tb-solo-body { height: 100%; margin: 0; background: var(--bg-1); }
.tb-solo .tb-chat { position: fixed; inset: 0; width: 100%; max-width: none; border-left: 0; box-shadow: none; }
.tb-solo .tb-chat-body { max-width: 900px; width: 100%; margin: 0 auto; }
.tb-solo .tb-chat-form { max-width: 900px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.tb-solo .tb-chat-head { padding-left: 1.25rem; }
@media (max-width: 860px) { .tb-solo .tb-chat { top: 0; } }
.tb-chat-icon[hidden] { display: none; }
/* Memory brain (rail mini + fullscreen), the hub's approved brain in Tobill's palette */
.membrain-host { min-height: 142px; }
.membrain-wrap { position: relative; height: 142px; border-radius: 12px; overflow: hidden; cursor: pointer; border: 1px solid var(--border); background: radial-gradient(140px 90px at 50% 42%, rgba(88,166,255,.09), transparent); transition: border-color .18s; }
.membrain-wrap:hover, .membrain-wrap:focus-visible { border-color: var(--acc-blue); outline: none; }
.membrain { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.membrain-cap { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 11px; color: var(--fg-2); padding: 8px 6px 9px; background: linear-gradient(180deg, rgba(28,33,40,0), rgba(28,33,40,.92) 55%); }
.membrain-cap b { color: var(--acc-blue); font-weight: 600; }
.membrain-empty { display: flex; align-items: center; justify-content: center; height: 142px; font-size: 12px; color: var(--fg-2); text-align: center; padding: 0 16px; line-height: 1.5; border: 1px dashed var(--border); border-radius: 12px; }
.brainmodal { display: none; position: fixed; inset: 0; z-index: 9998; flex-direction: column; background: radial-gradient(1200px 600px at 60% -10%, rgba(88,166,255,.14), transparent 60%), var(--bg-0); }
.brainmodal.open { display: flex; }
html.bm-open { overflow: hidden; }
.bm-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.bm-head .bt { font-size: 17px; font-weight: 600; line-height: 1; color: var(--fg-0); }
.bm-head .bs { font-size: 11.5px; color: var(--fg-2); margin-top: 3px; }
.bm-count { margin-left: auto; font-size: 11px; color: var(--fg-2); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px; white-space: nowrap; }
.bm-count b { color: var(--acc-blue); }
.bm-close { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: transparent; color: var(--fg-2); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
.bm-close:hover { color: var(--fg-0); border-color: var(--acc-blue); }
.bm-close svg { width: 18px; height: 18px; }
.bm-body { flex: 1; display: flex; min-height: 0; position: relative; }
.bm-stage { flex: 1; position: relative; min-width: 0; }
#bmCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: pointer; }
.bm-legend { position: absolute; left: 16px; top: 14px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.bm-lg { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--fg-2); background: rgba(28,33,40,.7); border: 1px solid var(--border); border-radius: 20px; padding: 5px 12px 5px 9px; backdrop-filter: blur(6px); user-select: none; }
.bm-lg .sw { width: 9px; height: 9px; border-radius: 50%; }
.bm-insp { width: 336px; flex-shrink: 0; border-left: 1px solid var(--border); background: linear-gradient(180deg, var(--bg-1), var(--bg-0)); overflow-y: auto; padding: 18px 16px; }
.bm-empty { color: var(--fg-2); font-size: 13px; line-height: 1.6; text-align: center; padding: 44px 10px; }
.bm-empty .big { font-size: 17px; color: var(--fg-1); display: block; margin-bottom: 8px; font-weight: 600; }
.bm-nh { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bm-nh .dot { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; font-weight: 700; font-size: 15px; color: #0d1117; }
.bm-nh .nm { font-size: 19px; font-weight: 600; line-height: 1.15; color: var(--fg-0); }
.bm-nh .ty { font-size: 10.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--fg-2); margin-top: 3px; }
.bm-kl { font-size: 10.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--fg-3); margin-bottom: 6px; }
.bm-fact { display: flex; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--border); }
.bm-fact:last-child { border-bottom: none; }
.bm-fact .fx { flex: 1; }
.bm-fact .ft { font-size: 13.5px; line-height: 1.5; color: var(--fg-0); }
.bm-fact .fm { font-size: 10.5px; color: var(--fg-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-top: 4px; }
.bm-fact .forget { opacity: 0; width: 24px; height: 24px; border-radius: 7px; border: 1px solid var(--border); background: var(--bg-2); color: var(--fg-2); display: grid; place-items: center; flex-shrink: 0; align-self: flex-start; cursor: pointer; }
.bm-fact .forget svg { width: 12px; height: 12px; }
.bm-fact:hover .forget, .bm-fact .forget:focus-visible { opacity: 1; }
.bm-fact .forget:hover { color: var(--acc-red); border-color: var(--acc-red); }
@media (max-width: 760px) { .bm-body { flex-direction: column; } .bm-insp { width: auto; max-height: 45%; border-left: 0; border-top: 1px solid var(--border); } .bm-legend { display: none; } }
/* memory import */
.memimport textarea { width: 100%; min-height: 150px; padding: .6rem .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-2); color: var(--fg-0); font: inherit; font-size: var(--fs-sm); line-height: 1.5; resize: vertical; box-sizing: border-box; }
.memimport-list { list-style: none; margin: .75rem 0 0; padding: 0; max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.memimport-list li { display: flex; gap: .6rem; align-items: flex-start; padding: .5rem .75rem; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.memimport-list li:last-child { border-bottom: 0; }
.memimport-list input { margin-top: .2rem; }
.memimport-list .ent { font-weight: 600; color: var(--fg-0); }
.memimport-list .kind { font-size: var(--fs-xs); color: var(--fg-3); margin-left: .35rem; }
.memimport-steps { margin: 0 0 .75rem 1.2rem; padding: 0; color: var(--fg-1); font-size: var(--fs-sm); line-height: 1.55; }
.memimport-steps li { margin-bottom: .55rem; }
.memimport-prompt { position: relative; margin: .5rem 0 .25rem; }
.memimport-prompt pre { margin: 0; padding: .7rem 7.5rem .7rem .85rem; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: var(--fs-sm); line-height: 1.5; color: var(--fg-0); background: var(--bg-2); border: 1px solid var(--border); border-radius: 10px; }
.memimport-prompt .btn { position: absolute; top: .5rem; right: .5rem; }
@media (max-width: 600px) { .memimport-prompt pre { padding-right: .85rem; padding-bottom: 2.6rem; } .memimport-prompt .btn { top: auto; bottom: .5rem; } }

/* Tickets (2026-09-18): comment bodies come from Syncro as HTML or text. */
.ticket-body img { max-width: 100%; height: auto; }
.ticket-body p { margin: 0 0 .5em; }
.ticket-body blockquote { border-left: 2px solid var(--line-1, #30363d); margin: .4em 0; padding-left: .7em; color: var(--fg-2, #8b949e); }
.ticket-body table { border-collapse: collapse; font-size: inherit; }
.ticket-body td, .ticket-body th { padding: .2em .5em; }
/* Cell borders only where the email asked for them: signatures are border="0" layout tables and drew empty boxes. */
.ticket-body table[border]:not([border="0"]) > * > tr > :is(td, th) { border: 1px solid var(--line-1, #30363d); }
.ticket-body pre { white-space: pre-wrap; }

/* Controls inside a plain .card form (tickets, contacts): same look as a
   fieldset, without the fieldset. Add class "card-form" to the form. */
.card-form input[type="text"], .card-form input[type="email"], .card-form input[type="search"], .card-form input[type="tel"], .card-form input[type="url"], .card-form input[type="number"], .card-form input[type="time"], .card-form input[type="date"],
.card-form select, .card-form textarea {
    padding: .5rem .7rem; border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-sm); color: var(--fg-0); background: var(--bg-3);
    transition: border-color .15s, box-shadow .15s;
}
.card-form label > input, .card-form label > textarea { width: 100%; }
.card-form input:focus, .card-form select:focus, .card-form textarea:focus { outline: none; border-color: var(--acc-blue); box-shadow: 0 0 0 3px var(--pcs-blue-tint); }
.card-form textarea { resize: vertical; min-height: 4em; }
.card-form label > span:first-child { display: block; font-size: var(--fs-xs); color: var(--fg-2); margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .04em; }
.card-form .inline { display: flex; align-items: center; gap: .5rem; color: var(--fg-1); }
.card-form .inline input[type="checkbox"], .card-form .inline input[type="radio"] { width: auto; }
.card-form .inline > span { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }

/* A select that looks like a status pill (ticket queue quick change). */
.pill-select {
    appearance: none; -webkit-appearance: none;
    display: inline-block; padding: .15rem 1.3rem .15rem .55rem; border-radius: 999px;
    font: inherit; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4; cursor: pointer;
    border: 1px solid transparent; max-width: 11em; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath d='M1 2.5l3 3 3-3' fill='none' stroke='%23999' stroke-width='1.3'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .45rem center;
}
.pill-select:focus { outline: none; box-shadow: 0 0 0 3px var(--pcs-blue-tint); }
.pill-select:disabled { opacity: .5; cursor: wait; }
.pill-select option { background: var(--bg-2); color: var(--fg-0); font-weight: 400; }

/* ---- Tray chat console (/tickets/chat.php) ---- */
.tchat { display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr; gap: .8rem; align-items: start; }
.tchat-list { padding: 0; overflow: hidden; }
.tchat-list-head { display: flex; justify-content: space-between; align-items: center; padding: .7rem .9rem; border-bottom: 1px solid var(--border); }
.tchat-item { display: block; padding: .6rem .9rem; border-bottom: 1px solid var(--border); color: var(--fg-1); cursor: pointer; }
.tchat-item:hover { background: var(--bg-3); }
.tchat-item.is-active { background: var(--acc-blue-bg); box-shadow: inset 3px 0 0 var(--acc-blue); }
.tchat-item.is-closed { opacity: .6; }
.tchat-item-top { display: flex; justify-content: space-between; gap: .5rem; }
.tchat-item-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tchat-item-when { font-size: var(--fs-xs); white-space: nowrap; }
.tchat-item-line { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: .15rem; }
.tchat-item.is-unread .tchat-item-line { color: var(--fg-0, #fff); font-weight: 600; }
.tchat-item-sub { font-size: var(--fs-xs); margin-top: .1rem; }
.tchat-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--acc-blue); margin-right: .35rem; vertical-align: middle; }
.tchat-thread { padding: 0; display: flex; flex-direction: column; min-height: 60vh; }
.tchat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .8rem; padding: .7rem .9rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tchat-msgs { flex: 1; overflow-y: auto; padding: .9rem; max-height: 60vh; display: flex; flex-direction: column; gap: .6rem; }
.tchat-msg { max-width: 72%; }
.tchat-msg.is-tech { align-self: flex-end; text-align: right; }
.tchat-bubble { display: inline-block; text-align: left; padding: .5rem .75rem; border-radius: .8rem; background: var(--bg-3); border: 1px solid var(--border); line-height: 1.45; word-break: break-word; }
.tchat-msg.is-tech .tchat-bubble { background: var(--acc-blue-bg); border-color: transparent; }
.tchat-msg-when { font-size: var(--fs-xs); margin-top: .15rem; }
.tchat-reply { display: flex; gap: .5rem; padding: .7rem .9rem; border-top: 1px solid var(--border); align-items: flex-end; }
.tchat-reply textarea { flex: 1; resize: vertical; min-height: 2.6em; background: var(--bg-1); color: var(--fg-1); border: 1px solid var(--border); border-radius: .5rem; padding: .5rem .65rem; font: inherit; }
.tchat-reply textarea:focus { outline: none; border-color: var(--acc-blue); }
@media (max-width: 760px) { .tchat { grid-template-columns: 1fr; } .tchat-msg { max-width: 92%; } }

/* Work-waiting counters in the top bar (2026-09-20): unclaimed tickets + tray chats.
   Same footprint as the bell; a red badge and a coloured icon only when something waits. */
.tb-queue {
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; margin-right: .35rem;
    border-radius: 8px; color: var(--fg-2); text-decoration: none;
    transition: background .15s, color .15s;
}
.tb-queue svg { width: 19px; height: 19px; }
.tb-queue:hover { background: var(--bg-3); color: var(--fg-0); }
.tb-queue.is-waiting { color: var(--fg-0); }
.tb-queue.is-waiting .notif-badge { animation: tbQueuePulse 2.4s ease-in-out infinite; }
@keyframes tbQueuePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(248,81,73,.55); } 50% { box-shadow: 0 0 0 5px rgba(248,81,73,0); } }
@media (prefers-reduced-motion: reduce) { .tb-queue.is-waiting .notif-badge { animation: none; } }

/* Chat counter whose console could not be reached: the figure is the last one
   we actually read, so it is shown dimmed and never pulses. A stale number
   that looks live is worse than no number. */
.tb-queue.is-stale { opacity: .45; }
.tb-queue.is-stale .notif-badge { animation: none !important; background: var(--bg-3); color: var(--fg-2); }
@media print { .tb-queue { display: none !important; } }

/* Customer > Devices: folders for the machines (Tactical sites). */
.fold-form { display: flex; gap: .5rem; align-items: flex-end; flex-wrap: wrap; padding: .3rem 0; }
.fold-form label { margin: 0; min-width: 12rem; flex: 0 1 18rem; }
.fold-edit > td { background: var(--bg-2); }
.data tr.fold-group > td { background: var(--bg-2); font-size: var(--fs-xs); padding-top: .45rem; padding-bottom: .45rem; }
.fold-move { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-top: .5rem; }
.fold-move label { min-width: 14rem; }
.fold-filter { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .8rem; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); font-size: var(--fs-xs); scroll-margin-top: 80px; }
@media (max-width: 700px) { .fold-form label, .fold-move label { flex: 1 1 100%; min-width: 0; } }

/* ---- Backups tables: one card per machine on a phone (Session 103) ---- */
@media (max-width: 700px) {
    .card-flush .data.bk-table { min-width: 0; }
    .data.bk-table thead { display: none; }
    .data.bk-table tr { display: block; padding: .55rem 0; border-bottom: 1px solid var(--border); }
    .data.bk-table td { display: block; border: 0; padding: .12rem .8rem; white-space: normal; }
    .data.bk-table td[data-label]::before { content: attr(data-label) ": "; color: var(--fg-2); font-size: var(--fs-xs); }
    .data.bk-table td[data-label] > div { display: inline; margin-left: .3rem; }
    .data.bk-table td.bk-issue { padding-top: .35rem; }
}

/* RMM > Tactical script editor (rmm/tscript.php), 2026-09-29 */
.ts-form { display: grid; gap: .8rem; margin-top: .9rem; }
.ts-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 0 .8rem; }
.ts-opts { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; align-items: center; margin-top: .3rem; }
.ts-opts > div { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.ts-opts .inline { margin: 0; }
.ts-optlabel { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-1); text-transform: uppercase; letter-spacing: .04em; }
.ts-bad input, .ts-bad select, .ts-bad textarea { border-color: var(--acc-red) !important; }
.ts-err { display: block; font-style: normal; color: var(--acc-red); font-size: var(--fs-xs); margin-top: .25rem; text-transform: none; letter-spacing: 0; }
.form-fieldset textarea.ts-code, .ts-out {
    font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.5;
    tab-size: 4; -moz-tab-size: 4;
}
.form-fieldset textarea.ts-code { min-height: 22rem; white-space: pre; overflow: auto; background: var(--bg-0); }
.ts-hint { font-size: var(--fs-xs); margin: .3rem 0 0; }
.ts-h { font-size: var(--fs-md); margin: 0; }
.ts-delete { margin-top: .6rem; }
.ts-test { margin-top: 1rem; }
.ts-testrow { display: flex; gap: .6rem; flex-wrap: wrap; }
.ts-testrow input { flex: 1 1 22rem; min-width: 0; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-3); color: var(--fg-0); font: inherit; font-size: var(--fs-sm); }
.ts-result { margin-top: .8rem; }
.ts-result .alert { margin: 0 0 .5rem; }
.ts-out { margin: 0; padding: .7rem .8rem; background: var(--bg-0); border: 1px solid var(--border); border-radius: var(--r-sm); white-space: pre-wrap; word-break: break-word; max-height: 28rem; overflow: auto; color: var(--fg-0); }
.ts-stderr { color: var(--acc-red); }
.ts-small { max-height: 14rem; font-size: .75rem; margin-top: .35rem; }
.ts-ok { color: var(--acc-green); }
.ts-fail { color: var(--acc-red); }
.data.ts-log td { vertical-align: top; }
.ts-logdetail { max-width: 36rem; }
.ts-more { display: inline; }
.ts-more summary { display: inline; list-style: none; cursor: pointer; color: var(--acc-blue); }
.ts-more summary::-webkit-details-marker { display: none; }
.ts-more[open] summary { display: none; }
.ts-more::details-content { display: inline; }
.rn-pickers { display: grid; gap: .35rem; }
.rn-lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-1); text-transform: uppercase; letter-spacing: .04em; margin-top: .25rem; }
.rn-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.rn-chip.rn-off { color: var(--fg-3); border-style: dashed; background: transparent; }
.rn-chip small { font-size: var(--fs-xs); color: var(--fg-3); }
.rn-tools { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: .5rem; }
.rn-list:empty { display: none; }
.rn-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .35rem .25rem .7rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2); font-size: var(--fs-sm); color: var(--fg-0); }
.rn-x { border: 0; background: transparent; color: var(--fg-2); font-size: 1.05rem; line-height: 1; cursor: pointer; padding: .1rem .35rem; border-radius: 999px; }
.rn-x:hover { color: var(--fg-0); background: var(--bg-3); }
.rn-go { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .7rem; }
#rnMsgs .alert { margin: .6rem 0 0; }
.rn-table { margin-top: .9rem; }
.data.ts-runs td { vertical-align: top; }
@media (max-width: 860px) {
    .ts-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ts-grid .ts-name { grid-column: 1 / -1; }
    .card-flush .data.ts-log, .card-flush .data.ts-runs { min-width: 0; }
}
@media (max-width: 620px) {
    .ts-form .field-row { grid-template-columns: minmax(0, 1fr); }
    .data.ts-runs thead, .data.ts-log thead { display: none; }
    .data.ts-runs tr, .data.ts-log tr { display: block; padding: .55rem .8rem; border-bottom: 1px solid var(--border); }
    .data.ts-runs td, .data.ts-log td { display: block; border: 0; padding: .1rem 0; white-space: normal; }
}

/* Suppliers: tag tick list (supplier/edit.php), grouped browse (index.php),
   tag list upkeep (tags.php). 2026-09-30, Heinrich's request. */
.st-lead { margin: 0 0 .75rem; font-size: var(--fs-xs); }
.form-fieldset input.st-filter { max-width: 22rem; margin-bottom: .8rem; }
.st-groups { display: grid; gap: .9rem; }
.st-gh, .st-view-gh { font-size: var(--fs-xs); font-weight: 600; color: var(--fg-1); text-transform: uppercase; letter-spacing: .04em; }
.st-gh { margin-bottom: .4rem; }
.st-opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.form-fieldset label.st-opt {
    display: inline-flex; align-items: center; gap: .45rem; margin: 0;
    padding: .35rem .75rem .35rem .6rem; min-height: 2.4rem;
    border: 1px solid var(--border); border-radius: 999px; background: var(--bg-2);
    color: var(--fg-0); font-size: var(--fs-sm); font-weight: 500; cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.form-fieldset label.st-opt:hover { border-color: var(--acc-blue); }
.form-fieldset label.st-opt:has(input:checked) { background: var(--pcs-blue-tint); border-color: var(--acc-blue); }
.form-fieldset label.st-opt.st-flash { border-color: var(--acc-green); box-shadow: 0 0 0 3px var(--acc-green-bg); }
.st-opt input[type="checkbox"] { width: 1rem; height: 1rem; margin: 0; accent-color: var(--acc-blue); cursor: pointer; }
.st-n { font-size: var(--fs-xs); color: var(--fg-3); font-variant-numeric: tabular-nums; }
.st-new { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px solid var(--border); }
.st-suggest { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: var(--fs-sm); margin-top: .2rem; }
.st-suggest:empty { display: none; }
.st-foot { margin: .7rem 0 0; font-size: var(--fs-xs); }
.st-break { flex-basis: 100%; height: 0; }
.st-browse-lead { font-size: var(--fs-xs); align-self: center; }
a.st-pill { margin: .1rem; text-decoration: none; }
a.st-pill:hover { filter: brightness(1.3); }
/* .data a forces every table link to --fg-0; the pill's group colour must win. */
.data a.st-pill.pill-blue,  .data a.st-pill.pill-blue:hover  { color: var(--acc-blue); }
.data a.st-pill.pill-cyan,  .data a.st-pill.pill-cyan:hover  { color: var(--acc-cyan); }
.data a.st-pill.pill-muted, .data a.st-pill.pill-muted:hover { color: var(--fg-1); }
.st-view-row { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .3rem; }
.st-view-row + .st-view-row { margin-top: .4rem; }
.st-view-gh { min-width: 5.5rem; }
.st-h { font-size: var(--fs-md); margin: 0 0 .3rem; }
.st-dupes { margin-bottom: 1rem; }
.st-dupe-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .45rem 0; border-top: 1px solid var(--border); }
.st-dupe-row:first-of-type { border-top: 0; }
.data.st-table td { vertical-align: middle; }
.data.st-table input[type="text"], .data.st-table select { width: 100%; min-width: 9rem; }
.data tr.st-group-row > td { background: var(--bg-2); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: .45rem; padding-bottom: .45rem; }
.st-rowform { margin: 0; }
@media (max-width: 620px) {
    .st-view-gh { min-width: 100%; }
    .form-fieldset label.st-opt { font-size: var(--fs-xs); }
}

/* ============================================================
   VISUAL REFRESH (2026-09-20, overnight pass)
   Cosmetic layer only: colour tokens, depth, a display face for titles,
   focus rings, and the base look of any input that had none (Settings).
   Appended last on purpose so it wins the cascade with the SAME selectors
   the sheet already uses. To revert everything below, delete from this
   marker to the end of the file and put the Inter-only @import back.
   ============================================================ */
:root {
    --bg-0:      #0a0e14;
    --bg-1:      #121721;
    --bg-2:      #181e28;
    --bg-3:      #1f2632;
    --bg-4:      #2b3442;
    --border:    #262e3a;
    --border-h:  #3a4452;
    --font-display: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
    --sh:     0 1px 2px rgba(0, 0, 0, .45);
    --sh-md:  0 8px 22px -8px rgba(0, 0, 0, .6);
    --sh-card: inset 0 1px 0 rgba(255, 255, 255, .035),
               0 1px 2px rgba(0, 0, 0, .35),
               0 14px 34px -22px rgba(0, 0, 0, .75);
    --ring:   0 0 0 3px rgba(37, 99, 235, .35);
}
html { color-scheme: dark; }
::selection { background: rgba(37, 99, 235, .45); color: #fff; }

/* Atmosphere: one soft brand glow behind the whole shell (desktop, screen only). */
@media screen and (min-width: 861px) {
    body {
        background:
            radial-gradient(1100px 520px at 14% -8%, rgba(37, 99, 235, .14), transparent 62%),
            radial-gradient(900px 480px at 100% 0%, rgba(57, 212, 212, .045), transparent 60%),
            var(--bg-0);
        background-attachment: fixed;
    }
}

/* Type: a display face for the words that name a screen, Inter for everything dense. */
h1, h2, .page-head h1, .login-brand h1, .brand-name, .stat-value { font-family: var(--font-display); }
h1, .page-head h1 { font-size: 28px; font-weight: 700; letter-spacing: -.022em; }
h2 { font-weight: 600; letter-spacing: -.012em; }
.stat-value { font-weight: 700; letter-spacing: -.015em; }
.page-head { margin-bottom: 1.4rem; }
.page-head p { max-width: 82ch; }
@media (max-width: 860px) { h1, .page-head h1 { font-size: 22px; } }

/* Top bar */
.topbar { background: rgba(10, 14, 20, .78); }
.topbar::after { opacity: .55; }
.userbox { background: rgba(255, 255, 255, .03); }
.userbox-short {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.brand-logo { filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }

/* Sidebar: a darker rail than the content so the cards read as the raised plane. */
.sidebar { background: rgba(10, 14, 20, .55); }
.side-item { position: relative; color: var(--fg-2); }
.side-item:hover { color: var(--fg-0); background: rgba(255, 255, 255, .04); }
.side-item .ic { color: var(--fg-3); transition: color .12s; }
.side-item:hover .ic { color: var(--fg-1); }
.side-item.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(37, 99, 235, .24), rgba(37, 99, 235, .05));
    box-shadow: none;
}
.side-item.active .ic { color: var(--acc-blue); }
.side-item.active::before {
    content: ""; position: absolute; left: -.55rem; top: 22%; bottom: 22%; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--pcs-blue);
    box-shadow: 0 0 12px rgba(37, 99, 235, .85);
}
.side-group > summary { color: var(--fg-3); }
.side-group > summary:hover { color: var(--fg-2); }

/* Surfaces: hairline highlight on top, soft drop below. */
.card, .stat-card, .filter-bar, .form-fieldset { box-shadow: var(--sh-card); }
.card, .stat-card { border-radius: 12px; }
.card-glow { box-shadow: var(--sh-card), var(--sh-glow-blue); }
.stat-card-link:hover { box-shadow: var(--sh-card), 0 8px 24px -10px rgba(88, 166, 255, .45); }
.stat-label { color: var(--fg-3); letter-spacing: .08em; }
.footer { background: transparent; }

/* Tables: even-width digits, a quieter header, a blue-tinted hover. */
.data { font-variant-numeric: tabular-nums; }
.data thead th { font-size: 11px; letter-spacing: .07em; color: var(--fg-3); }
.data tbody tr:hover { background: rgba(88, 166, 255, .055); }
.data tr.row-link:hover { background: rgba(88, 166, 255, .08); }
.tbl-empty { padding: 3rem 1rem !important; font-size: var(--fs-sm); }

/* Tabs */
.tabnav a[aria-current="page"] { border-bottom-color: var(--pcs-blue); }

/* Buttons: a little material, a real pressed state, a visible keyboard focus. */
.btn {
    transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .08s;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 1px 2px rgba(0, 0, 0, .3);
}
.btn:active { transform: translateY(1px); }
.btn-ghost, .btn-link { box-shadow: none; }
.btn-primary {
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 100%);
    border-color: #1d4ed8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px -8px rgba(37, 99, 235, .8);
}
.btn-primary:hover {
    background: linear-gradient(180deg, #4f8ef8 0%, #2f6ff0 100%);
    border-color: #2563eb;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -8px rgba(37, 99, 235, .95);
}
.btn-danger { box-shadow: none; }
.btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--acc-blue); outline-offset: 2px;
}

/* Inputs: every text-like control gets the house look unless a page styled it
   itself (:where() keeps this at zero specificity so page rules still win).
   Settings had bare white inputs; this is what fixes them. */
:where(.main) :where(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="hidden"], [type="image"]), select, textarea) {
    background: var(--bg-3); color: var(--fg-0);
    border: 1px solid var(--border); border-radius: var(--r-sm);
    font: inherit; font-size: var(--fs-sm);
}
:where(.main) :where(input, select, textarea):focus { outline: none; border-color: var(--acc-blue); box-shadow: var(--ring); }
:where(.main) :where(input, select, textarea)::placeholder { color: var(--fg-3); }
:where(.main) :where(input[readonly], input[disabled], select[disabled], textarea[disabled]) { opacity: .7; }
select option { background: var(--bg-2); color: var(--fg-0); }
.setting-control input { padding: .5rem .7rem; }
.setting-row { background: rgba(255, 255, 255, .02); }
.setting-row:hover { border-color: var(--border-h); }

/* Login */
.login-body {
    background:
        radial-gradient(900px 520px at 22% 0%, rgba(37, 99, 235, .22), transparent 60%),
        radial-gradient(700px 420px at 85% 100%, rgba(88, 166, 255, .10), transparent 60%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 44px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 44px),
        var(--bg-0);
}
.login-card { border-radius: 20px; background: rgba(18, 23, 33, .88); }
.login-brand h1 { font-size: 32px; letter-spacing: -.025em; }

@media (prefers-reduced-motion: reduce) { .btn:active { transform: none; } }
@media print {
    body { background: #fff !important; }
    .card, .stat-card, .filter-bar, .form-fieldset, .btn { box-shadow: none !important; }
}
/* Mobile drawer: a full-height overlay ABOVE the top bar (which wraps to two rows on a phone and was
   covering the first items), with its own close button and a tap-outside backdrop. */
.side-close, .side-backdrop { display: none; }
@media (max-width: 860px) {
    .sidebar {
        top: 0; height: 100vh; height: 100dvh; z-index: 70;
        background: var(--bg-1);
        padding-top: calc(.4rem + env(safe-area-inset-top, 0px));
        padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    }
    .side-close {
        display: flex; align-items: center; justify-content: space-between;
        padding: .55rem .6rem .55rem .7rem; margin: 0 0 .35rem;
        color: var(--fg-2); font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700;
        border-bottom: 1px solid var(--border); cursor: pointer;
    }
    .side-close svg { width: 20px; height: 20px; color: var(--fg-1); }
    .side-backdrop {
        position: fixed; inset: 0; z-index: 65;
        background: rgba(0, 0, 0, .55);
        opacity: 0; pointer-events: none; transition: opacity .22s ease;
    }
    .nav-toggle:checked ~ .app-shell .side-backdrop { display: block; opacity: 1; pointer-events: auto; }
    .nav-toggle:checked ~ .app-shell .sidebar { box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
}
/* Ticket list: the sort flip sits at the right end of the view tabs. */
.tabnav .tab-sort { margin-left: auto; color: var(--fg-3); font-weight: 500; font-size: var(--fs-xs); padding: .6rem .3rem .55rem; }
.tabnav .tab-sort:hover { color: var(--fg-0); }
/* Tools / Fleet registers as lists (09-21): notes readable in the row, the sign-out form opens under it. */
.reg-list td { vertical-align: middle; }
.reg-list .reg-notes { font-size: var(--fs-xs); color: var(--fg-2); max-width: 26rem; line-height: 1.45; }
.reg-list tr.reg-form td { background: var(--bg-2); padding: .8rem 1rem; }
.reg-list tr.reg-form[hidden] { display: none; }
.reg-inline { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.reg-inline label { margin: 0; flex: 1 1 220px; max-width: 360px; }
.reg-inline .btn { align-self: flex-end; }
@media (max-width: 860px) { .reg-list .reg-notes { max-width: none; } }
.reg-note-text.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* One-click resolve (ticket view + list rows, 09-21). */
.btn-resolve { background: var(--acc-green-bg); color: var(--acc-green); border-color: transparent; box-shadow: none; }
.btn-resolve:hover { background: var(--acc-green); color: #fff; border-color: var(--acc-green); }
.btn-resolve[disabled] { opacity: .6; cursor: default; }
/* Directors > Client profit (09-21): a losing client is tinted, numbers stay right-aligned. */
.profit-table td.num, .profit-table th.num { white-space: nowrap; }
.data tr.row-loss td { background: rgba(248, 81, 73, .05); }
.data tr.row-loss:hover td { background: rgba(248, 81, 73, .09); }

/* Tray chat: a reply drawn before the round trip finishes, and one that failed. */
.tchat-msg.is-pending .tchat-bubble { opacity: .6; }
.tchat-msg.is-failed .tchat-bubble { opacity: 1; border: 1px solid var(--acc-red); }
.tchat-msg.is-failed .tchat-msg-when { color: var(--acc-red); }

/* Customer > Devices > Installers (2026-09-23): Windows, Mac and Linux in one place. */
.inst-card { margin-bottom: .8rem; }
.inst-h { margin: 0 0 .3rem; font-size: 1.05rem; }
.inst-p { margin: 0 0 .7rem; font-size: var(--fs-sm); max-width: 72ch; }
.inst-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .6rem; }
.inst-row .check-inline { align-items: center; }
.inst-out { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .6rem; }
.inst-out[hidden] { display: none; }
.inst-pre { flex: 1 1 auto; min-width: 0; margin: 0; padding: .6rem .75rem; white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: var(--fs-xs); line-height: 1.5; color: var(--fg-0); background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r-sm); }
.inst-small { font-size: var(--fs-xs); margin: .4rem 0 0; line-height: 1.6; }
.inst-small summary { cursor: pointer; }
@media (max-width: 600px) { .inst-out { flex-direction: column; } .inst-out .btn { align-self: flex-start; } }

/* Ask Tobill: live voice call bar (2026-09-24). Replaces the input row while a call is on. */
.tb-chat-live-btn.is-live { color: #fff; background: #238636; border-color: #238636; }
.tb-chat.is-live .tb-chat-form { display: none; }
.tb-live { display: flex; align-items: center; gap: .75rem; padding: .85rem .9rem calc(.85rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--border); background: var(--bg-2); }
.tb-live[hidden] { display: none; }
.tb-live-orb { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(88, 166, 255, .12); }
.tb-live-orb span { width: 18px; height: 18px; border-radius: 50%; background: var(--fg-2); transition: background .2s; }
.tb-live[data-state="listening"] .tb-live-orb span { background: var(--acc-blue); animation: tb-live-breathe 1.6s ease-in-out infinite; }
.tb-live[data-state="thinking"] .tb-live-orb span { background: #d29922; animation: tb-live-breathe .8s ease-in-out infinite; }
.tb-live[data-state="speaking"] .tb-live-orb span { background: var(--acc-green); animation: tb-live-talk .45s ease-in-out infinite alternate; }
.tb-live[data-state="idle"] .tb-live-orb span { background: var(--acc-red); }
@keyframes tb-live-breathe { 0%, 100% { transform: scale(.85); opacity: .75; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes tb-live-talk { from { transform: scale(.9); } to { transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .tb-live-orb span { animation: none !important; } }
.tb-live-text { flex: 1 1 auto; min-width: 0; }
.tb-live-status { font-weight: 600; color: var(--fg-0); font-size: var(--fs-sm); }
.tb-live-caption { color: var(--fg-2); font-size: var(--fs-xs); line-height: 1.35; margin-top: .15rem; max-height: 4.1em; overflow: hidden; }
.tb-live-end { flex: 0 0 auto; min-width: 64px; height: 40px; padding: 0 .9rem; border-radius: 10px; border: 1px solid #da3633; background: #da3633; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.tb-live-end:hover { background: #b62324; border-color: #b62324; }
.tb-live-end:focus-visible { outline: 2px solid var(--acc-blue); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Ticket status colours (2026-09-28, Stephan: one colour per status).
   Map lives in TICKET_STATUS_CLASS (includes/tickets.php). background-COLOR,
   never the shorthand: .pill-select draws its arrow as a background-image
   and the shorthand would wipe it. Closed statuses stay .pill-muted.
   ------------------------------------------------------------------ */
.pill-st-new, .pill-st-progress, .pill-st-reply, .pill-st-waitcust, .pill-st-parts,
.pill-st-hold, .pill-st-scheduled, .pill-st-billed, .pill-st-billcheck { border-color: transparent; }
.pill-st-new       { background-color: rgba(210, 153,  34, .16); color: #e3b341; } /* amber  */
.pill-st-progress  { background-color: rgba( 88, 166, 255, .16); color: #58a6ff; } /* blue   */
.pill-st-reply     { background-color: rgba(247, 120, 186, .16); color: #f778ba; } /* pink   */
.pill-st-waitcust  { background-color: rgba(163, 113, 247, .16); color: #b58cff; } /* purple */
.pill-st-parts     { background-color: rgba( 57, 212, 212, .16); color: #39d4d4; } /* cyan   */
.pill-st-hold      { background-color: rgba(248,  81,  73, .16); color: #ff7b72; } /* red    */
.pill-st-scheduled { background-color: rgba( 63, 185,  80, .16); color: #56d364; } /* green  */
.pill-st-billed    { background-color: rgba(168, 217,  91, .16); color: #b8e06a; } /* lime   */
.pill-st-billcheck { background-color: rgba(240, 136,  62, .16); color: #f0883e; } /* orange */
.pill-st-other     { background-color: var(--bg-3); color: var(--fg-1); border-color: var(--border); }

/* Machine detail (customer/machine.php, 2026-09-29): two columns of key/value
   cards that fold to one on a phone. */
.mc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: .8rem; align-items: start; }
.mc-col { display: flex; flex-direction: column; gap: .8rem; min-width: 0; }
.data.mc-kv td:first-child { width: 36%; white-space: nowrap; vertical-align: top; }
.data.mc-kv td { overflow-wrap: anywhere; }
.mc-sub { padding-left: 1rem; font-size: var(--fs-xs); }
.mc-bar { height: 5px; margin-top: .3rem; background: var(--bg-2); border-radius: 3px; overflow: hidden; max-width: 16rem; }
.mc-bar span { display: block; height: 100%; background: var(--acc-green); }
.mc-bar span.mc-warn { background: var(--acc-orange); }
.mc-bar span.mc-bad { background: var(--acc-red); }
a.mc-link { color: inherit; }
a.mc-link:hover strong { color: var(--acc-blue); text-decoration: underline; }
.mc-grid .card-head { padding: .75rem 1rem 0; margin-bottom: .35rem; }
@media (max-width: 860px) {
    /* Beat the generic wide-table rule (.card-flush .data { min-width: 720px }): a two-column
       key/value table must fit the phone, not scroll inside its card. */
    .card-flush .data.mc-kv { min-width: 0; }
}
@media (max-width: 600px) {
    .data.mc-kv td { display: block; width: auto; }
    .data.mc-kv td:first-child { width: auto; white-space: normal; padding-bottom: 0; border-bottom: 0; font-size: var(--fs-xs); }
    .data.mc-kv td:last-child { padding-top: .15rem; }
}
/* Sidebar count badge (Applications, 2026-09-29). */
.side-count { margin-left: auto; background: var(--acc-orange); color: #0b0f14; border-radius: 999px; padding: 0 7px; font-size: 10px; font-weight: 700; line-height: 1.7; }

/* Credit lock on a ticket (includes/arrears.php, 2026-10-02). Red while locked, amber once management cleared it. */
.arrears-banner { margin: .6rem 0; padding: .7rem .9rem; border-radius: var(--r-sm); border: 1px solid; border-left-width: 4px; font-size: var(--fs-sm, .9rem); }
.arrears-banner.is-locked  { background: var(--acc-red-bg);    border-color: var(--acc-red);    color: var(--fg-0); }
.arrears-banner.is-cleared { background: var(--acc-orange-bg); border-color: var(--acc-orange); color: var(--fg-0); }
.arrears-banner.is-locked > strong  { color: var(--acc-red); }
.arrears-banner.is-cleared > strong { color: var(--acc-orange); }
.arrears-banner .arrears-detail, .arrears-banner .arrears-notes { margin-top: .3rem; color: var(--fg-1); }
.arrears-banner .arrears-actions { margin-top: .55rem; display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-start; }
.arrears-banner .arrears-send > summary { list-style: none; cursor: pointer; }
.arrears-banner .arrears-send > summary::-webkit-details-marker { display: none; }
.arrears-banner .arrears-send[open] { flex-basis: 100%; }
.arrears-banner .arrears-form { margin-top: .5rem; max-width: 560px; }
.arrears-banner .arrears-form input[type="text"] { width: 100%; }
/* Debtors: payment profile under the customer, and the lock pill. */
.db-payprof { margin-top: 3px; font-size: .78rem; color: var(--fg-2); }
.db-payprof .db-paynotes { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 340px; color: var(--fg-1); }
.db-pay-edit { border: 0; background: transparent; color: var(--fg-2); cursor: pointer; padding: 0 4px; font-size: .78rem; }
.db-pay-edit:hover { color: var(--acc-blue); }
/* Debtors credit lock tickbox: red when on. */
.db-lock { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; margin-right: 6px; color: var(--fg-2); }
.db-lock input { margin: 0; cursor: pointer; accent-color: var(--acc-red); }
.db-lock.is-on { color: var(--acc-red); font-weight: 600; }
.db-lock .db-lock-hand { font-weight: 400; color: var(--fg-2); }
/* Debtors: extra contacts for long-outstanding accounts (tick to copy in), and their editor in the notes dialog. */
.db-esc-list { margin-top: 3px; display: flex; flex-direction: column; gap: 2px; }
.db-esc-label { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; color: var(--fg-2); cursor: pointer; user-select: none; }
.db-esc-label input { margin: 0; cursor: pointer; }
.db-esc-label:has(input:checked) { color: var(--acc-orange); }
.lbl-like { display: block; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--fg-2); font-weight: 600; }
.pay-esc-row { display: grid; grid-template-columns: 6rem 1fr 1.3fr 8.5rem auto; gap: .4rem; margin-bottom: .35rem; align-items: center; }
@media (max-width: 640px) { .pay-esc-row { grid-template-columns: 1fr 1fr auto; } .pay-esc-row .pe-email, .pay-esc-row .pe-cell { grid-column: span 1; } }
.arrears-banner .arrears-esc { margin: .35rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; align-items: center; }
/* Phone fields in dialogs (the once-off send and the extra-contact editor) had no dialog rule: dark like the rest. */
.dialog-body input[type="tel"] { width: 100%; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); color: var(--fg-0); background: var(--bg-3); }
.dialog-body input[type="tel"]:focus { outline: none; border-color: var(--acc-blue); box-shadow: 0 0 0 3px var(--pcs-blue-tint); }
.dialog-body input[type="tel"]:disabled { opacity: .5; }
/* WhatsApp replies to Debtors reminders (debtors/replies.php). */
.db-wa-wait { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; }
.db-wa-pill { cursor: pointer; font: inherit; font-size: var(--fs-xs); margin-left: .35rem; }
.wa-thread { display: flex; flex-direction: column; gap: .5rem; max-height: 50vh; overflow-y: auto; padding: .25rem 0; }
.wa-msg { max-width: 85%; padding: .5rem .75rem; border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--border); }
.wa-msg.is-out { align-self: flex-end; background: var(--acc-blue-bg); border-color: transparent; }
.wa-msg.is-waiting { border-left: 3px solid var(--acc-orange); }
.wa-meta { font-size: var(--fs-xs); color: var(--fg-2); margin-bottom: .2rem; }
.wa-body { font-size: var(--fs-sm); white-space: normal; overflow-wrap: anywhere; }
.dialog-body textarea#waReplyText { width: 100%; padding: .55rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm); font: inherit; font-size: var(--fs-sm); color: var(--fg-0); background: var(--bg-3); }
.arrears-banner .arrears-esc select { max-width: 100%; }

/* A disabled button must LOOK disabled. Until 2026-10-02 nothing styled it, so
   a greyed-out-in-code "Send selected" looked live and silently did nothing. */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; filter: saturate(.5); }
.btn:disabled:hover, .btn[disabled]:hover { border-color: var(--border); color: inherit; }
.btn-primary:disabled:hover, .btn-primary[disabled]:hover { color: #fff; }

/* ---- Maintenance list (upkeep/, dashboard panel), 2026-10-09 ---- */
.upkeep-items { margin: .3rem 0 0; padding-left: 1.1rem; color: var(--fg-1); }
.upkeep-items li { margin: .1rem 0; overflow-wrap: anywhere; }
.upkeep-more summary { cursor: pointer; color: var(--acc-blue); margin-top: .3rem; }
.upkeep-raise { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.upkeep-raise select { min-width: 0; flex: 1 1 9rem; padding: .25rem .4rem; font-size: var(--fs-xs); }
.upkeep-dash td { vertical-align: top; }
.upkeep-dash .upkeep-first { display: block; color: var(--fg-2); font-size: var(--fs-xs); margin-top: .15rem; overflow-wrap: anywhere; }
.upkeep-table td.bk-issue .pill, .upkeep-dash td.bk-issue .pill { white-space: normal; text-align: left; line-height: 1.35; }
.upkeep-raise .btn { white-space: nowrap; }

/* ---- Meeting mode (2026-10-11): meeting/index.php + meeting/view.php ---- */
.mtg-start-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.mtg-start-foot { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .9rem; }
.mtg-open { border-color: var(--acc-orange); background: var(--acc-orange-bg); }
.mtg-table .nowrap, .mtg-act-table .nowrap { white-space: nowrap; }
.mtg-rec { text-align: center; padding: 1.4rem 1.2rem; }
.mtg-top { display: flex; align-items: center; justify-content: center; gap: .6rem; font-size: var(--fs-xl); }
.mtg-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--fg-3); flex: 0 0 auto; }
.mtg-rec.is-rec .mtg-dot { background: var(--acc-red); animation: mtgPulse 1.4s ease-in-out infinite; }
.mtg-rec.is-warn .mtg-dot { background: var(--acc-orange); }
.mtg-rec.is-bad .mtg-dot { background: var(--acc-red); }
.mtg-rec.is-bad { border-color: var(--acc-red); box-shadow: 0 0 0 2px var(--acc-red-bg); }
.mtg-clock { font-variant-numeric: tabular-nums; font-family: var(--font-display, inherit); font-size: 2.2rem; font-weight: 600; margin-left: .4rem; }
.mtg-meter { height: 12px; border-radius: 6px; background: var(--bg-3); overflow: hidden; margin: 1rem auto .9rem; max-width: 520px; }
.mtg-meter-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--acc-green), #9be15d 70%, var(--acc-orange)); transition: width .1s linear; }
.mtg-msg { max-width: 640px; margin: 0 auto .9rem; padding: .6rem .8rem; border-radius: var(--r-sm); font-size: var(--fs-md); line-height: 1.5; border: 1px solid transparent; }
.mtg-msg-amber { background: var(--acc-orange-bg); border-color: var(--acc-orange); }
.mtg-msg-red { background: var(--acc-red-bg); border-color: var(--acc-red); }
.mtg-btns { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.mtg-big { min-height: 48px; padding: .7rem 1.4rem; font-size: var(--fs-lg); }
.mtg-up { margin: .9rem 0 .2rem; font-size: var(--fs-sm); color: var(--fg-2); }
.mtg-up-warn { color: var(--acc-orange); }
.mtg-tip { font-size: var(--fs-xs); max-width: 560px; margin: .3rem auto 0; }
.mtg-lines { display: flex; flex-direction: column; gap: .45rem; max-height: 60vh; overflow: auto; }
.mtg-line { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .6rem; font-size: var(--fs-sm); line-height: 1.5; }
.mtg-line-quiet { color: var(--fg-3); font-style: italic; }
.mtg-ts { color: var(--fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; display: flex; gap: .3rem; align-items: flex-start; }
.mtg-play { background: var(--bg-3); border: 1px solid var(--border); color: var(--fg-1); border-radius: 50%; width: 24px; height: 24px; font-size: 9px; line-height: 1; cursor: pointer; padding: 0; flex: 0 0 auto; }
.mtg-play:hover { border-color: var(--acc-blue); }
.mtg-play.is-playing { background: var(--pcs-blue); border-color: var(--pcs-blue); color: #fff; }
.mtg-writing .mtg-top { justify-content: flex-start; font-size: var(--fs-lg); }
.mtg-writing .mtg-msg { margin: .6rem 0; padding-left: 0; }
.mtg-spin { width: 16px; height: 16px; border: 2px solid var(--border-h); border-top-color: var(--acc-blue); border-radius: 50%; animation: mtgSpin .9s linear infinite; }
.mtg-alert-red { border-color: var(--acc-red); background: var(--acc-red-bg); }
.mtg-minutes .mtg-summary { font-size: var(--fs-md); line-height: 1.6; margin: .2rem 0 .6rem; }
.mtg-minutes h3 { font-size: var(--fs-md); margin: .9rem 0 .3rem; color: var(--fg-1); }
.mtg-minutes ul { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.mtg-act-foot { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; padding: .8rem 1rem; }
.mtg-act-table input[type="checkbox"] { width: 1.15rem; height: 1.15rem; }
.mtg-cust-form { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-top: .8rem; }
.mtg-cust-form label { flex: 1 1 22rem; margin: 0; }
.mtg-transcript summary { cursor: pointer; list-style: none; margin-bottom: .5rem; }
.mtg-transcript summary::-webkit-details-marker { display: none; }
.mtg-danger { display: flex; gap: .8rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin: .4rem 0 1.4rem; }
.mtg-rename { display: flex; gap: .5rem; align-items: center; }
.mtg-rename input { min-width: 16rem; }
@keyframes mtgPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } }
@keyframes mtgSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mtg-rec.is-rec .mtg-dot, .mtg-spin { animation: none; } }
@media (max-width: 860px) {
    .mtg-start-grid { grid-template-columns: minmax(0, 1fr); }
    .mtg-start input, .mtg-cust-form input, .mtg-rename input { font-size: 16px; }   /* iOS zooms into anything smaller */
    .mtg-clock { font-size: 1.9rem; }
    .mtg-btns > .btn, .mtg-btns > form { flex: 1 1 100%; }
    .mtg-btns > form .btn { width: 100%; }
    .mtg-line { grid-template-columns: 4rem minmax(0, 1fr); }
    .mtg-rename { flex: 1 1 100%; }
    .mtg-rename input { min-width: 0; flex: 1; }
}
.mtg-open, .mtg-start, .mtg-rec, .mtg-heard, .mtg-writing, .mtg-alert-red, .mtg-minutes, .mtg-actions, .mtg-file, .mtg-transcript { margin-bottom: 1rem; }
.mtg-hint { font-size: var(--fs-xs); margin: -.2rem 0 .7rem; }
@media (max-width: 700px) { .data.bk-table.mtg-act-table td[data-label]:empty { display: none; } }
/* Maintenance: Hide control and the off-the-list sections (2026-10-26, Jeandre). */
.upkeep-hide { margin-top: .35rem; font-size: var(--fs-xs); }
.upkeep-hide > summary { cursor: pointer; color: var(--fg-2); display: inline-block; }
.upkeep-hide[open] > summary { color: var(--fg-0); }
.upkeep-hide form { display: flex; flex-direction: column; gap: .35rem; margin-top: .35rem; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-2); }
.upkeep-hide .check-inline { font-size: var(--fs-xs); margin: 0; }
.upkeep-hide .btn { align-self: flex-start; }
.upkeep-sec { margin-top: 1rem; }
.upkeep-sec > summary { cursor: pointer; }
.upkeep-sec[open] > summary { margin-bottom: .6rem; }