/* AIOS FieldOps demo app — self-contained design system. */

:root {
    --ink: #111827;
    --muted: #5b6472;
    --faint: #64748b;
    --line: #e2e8f0;
    --paper: #f4f6f4;
    --panel: #ffffff;
    --teal: #0f766e;
    --teal-dark: #0a4f49;
    --teal-soft: #ccfbf1;
    --red: #dc2626;
    --sidebar-bg: #0b3b37;
    --sidebar-ink: #c7ded9;
    --sidebar-active: #0f766e;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow-1: 0 1px 3px rgba(17, 24, 39, 0.08);
    --shadow-2: 0 10px 30px rgba(17, 24, 39, 0.14);
    --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --control-h: 40px;
    --mobile-nav-h: 68px;
    --sidebar-w: 232px;
    --topbar-h: 56px;
    --view-pad-y: 22px;

    /* Work order statuses: solid + soft pair */
    --st-estimate: #64748b;  --st-estimate-bg: #f1f5f9;
    --st-approved: #7c3aed;  --st-approved-bg: #f3e8ff;
    --st-scheduled: #2563eb; --st-scheduled-bg: #dbeafe;
    --st-progress: #0f766e;  --st-progress-bg: #ccfbf1;
    --st-parts: #ea580c;     --st-parts-bg: #ffedd5;
    --st-complete: #16a34a;  --st-complete-bg: #dcfce7;
    --st-invoiced: #0e7490;  --st-invoiced-bg: #cffafe;
    --st-paid: #047857;      --st-paid-bg: #d1fae5;

    /* Inspection results */
    --pass: #16a34a; --pass-bg: #dcfce7;
    --attn: #d97706; --attn-bg: #fef3c7;
    --fail: #dc2626; --fail-bg: #fee2e2;
}

:root { --drawer-w: 460px; }

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { height: 100%; }

body.app {
    background: var(--paper);
    color: var(--ink);
    display: grid;
    font-family: var(--font);
    font-size: 14px;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: 100vh;
    height: 100vh;
    line-height: 1.4;
    margin: 0;
    overflow: hidden;
}

@supports (height: 100dvh) {
    body.app {
        grid-template-rows: 100dvh;
        height: 100dvh;
    }
}

/* Overlay roots must not participate in the grid, or they create
   phantom rows that let the sidebar fall short of the viewport. */
#modal-root, #drawer-root, #toast-root { position: fixed; }

a { color: inherit; }

svg[aria-hidden="true"] {
    flex: 0 0 auto;
    height: 1em;
    width: 1em;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid rgba(15, 118, 110, 0.24);
    outline-offset: 2px;
}

h1, h2, h3, h4, p { margin: 0; }

/* ---------- Sidebar ---------- */

.sidebar {
    background: var(--sidebar-bg);
    color: var(--sidebar-ink);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.sidebar-brand {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    display: flex;
    gap: 10px;
    min-height: 56px;
    padding: 0 16px;
    text-decoration: none;
}

.sidebar-brand img { height: 26px; width: 26px; }

.brand-text { font-size: 15px; letter-spacing: 0.01em; }
.brand-text strong { font-weight: 800; }

#app-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 12px 10px;
}

.surface-switcher {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    display: grid;
    gap: 3px;
    grid-template-columns: 1fr 1fr;
    padding: 3px;
}

.surface-switch {
    align-items: center;
    border-radius: 7px;
    color: var(--sidebar-ink);
    display: flex;
    font-size: 11.5px;
    font-weight: 750;
    gap: 6px;
    justify-content: center;
    min-height: 34px;
    padding: 6px 8px;
    text-decoration: none;
}

.surface-switch:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.surface-switch.is-active { background: #fff; color: var(--teal-dark); box-shadow: 0 1px 3px rgba(0, 0, 0, .16); }
.surface-switch .nav-ico { flex-basis: 15px; }
.surface-switch .nav-ico svg { height: 15px; width: 15px; }

.nav-section { display: grid; gap: 2px; min-width: 0; }
.nav-section-title {
    color: #85aaa3;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .09em;
    padding: 2px 11px 3px;
    text-transform: uppercase;
}

#app-nav a, .sidebar-foot a {
    align-items: center;
    border-radius: var(--radius);
    color: var(--sidebar-ink);
    display: flex;
    font-size: 13.5px;
    font-weight: 650;
    gap: 11px;
    padding: 9px 11px;
    text-decoration: none;
    white-space: nowrap;
}

#app-nav a:hover, .sidebar-foot a:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }

#app-nav a.active { background: var(--sidebar-active); color: #fff; }

.nav-ico { display: inline-flex; flex: 0 0 18px; }
.nav-ico svg { height: 18px; width: 18px; }

.nav-badge {
    background: #f59e0b;
    border-radius: 999px;
    color: #451a03;
    font-size: 11px;
    font-weight: 800;
    margin-left: auto;
    padding: 1px 7px;
}

.sidebar-foot {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px;
}

/* ---------- Topbar + main ---------- */

.app-body { display: flex; flex-direction: column; min-height: 0; min-width: 0; }

.topbar {
    align-items: center;
    background: #092927;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #fff;
    display: flex;
    flex: 0 0 var(--topbar-h);
    gap: 16px;
    justify-content: space-between;
    padding: 0 20px;
}

.mobile-brand { display: none; }

.topbar-search-zone { display: flex; flex: 1 1 auto; min-width: 180px; }
.search-wrap { align-items: center; display: flex; flex: 0 1 520px; gap: 8px; max-width: 520px; position: relative; width: 100%; }

.search-ico { color: #9fc0ba; display: inline-flex; }
.search-ico svg { height: 16px; width: 16px; }

#global-search {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: var(--radius);
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    padding: 8px 64px 8px 12px;
    width: 100%;
}

#global-search::placeholder { color: #a8c3be; }
#global-search:focus { background: rgba(255, 255, 255, .15); border-color: #5eead4; outline: 2px solid rgba(94, 234, 212, 0.2); }

.search-shortcut {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 5px;
    color: #b8cdc8;
    font-family: inherit;
    font-size: 9px;
    padding: 2px 5px;
    pointer-events: none;
    position: absolute;
    right: 8px;
}

.search-pop {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    color: var(--ink);
    left: 24px;
    max-height: 320px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 42px;
    z-index: 60;
}

.search-pop a {
    border-bottom: 1px solid var(--line);
    display: block;
    padding: 9px 12px;
    text-decoration: none;
}

.search-pop a:last-child { border-bottom: none; }
.search-pop a:hover, .search-pop a.focus { background: var(--paper); }
.search-pop .sr-kind { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.search-pop strong { display: block; font-size: 13.5px; }
.search-pop small { color: var(--muted); }

.topbar-right { align-items: center; display: flex; gap: 4px; }

.shell-popover,
.notif-wrap { position: relative; }

.topbar-tool {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #c9deda;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    gap: 6px;
    min-height: 38px;
    padding: 7px 8px;
    position: relative;
    text-decoration: none;
    white-space: nowrap;
}

.topbar-tool:hover,
.topbar-tool[aria-expanded="true"] { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .1); color: #fff; }
.topbar-tool .nav-ico svg { height: 16px; width: 16px; }
.topbar-create { background: #0f766e; color: #fff; }
.topbar-create:hover { background: #118a80; }
.topbar-count {
    align-items: center;
    background: #ef4444;
    border: 2px solid #092927;
    border-radius: 99px;
    color: #fff;
    display: inline-flex;
    font-size: 8.5px;
    font-weight: 850;
    height: 17px;
    justify-content: center;
    min-width: 17px;
    padding: 0 3px;
}

.shell-menu {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    box-shadow: 0 18px 46px rgba(5, 27, 25, .28);
    color: var(--ink);
    min-width: 300px;
    overflow: hidden;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 80;
}

.shell-menu-head {
    align-items: flex-start;
    background: #f7faf9;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 11px 12px;
}
.shell-menu-head > :first-child { display: flex; flex-direction: column; }
.shell-menu-head strong { font-size: 12.5px; }
.shell-menu-head :is(span, a) { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.shell-menu-head a { color: var(--teal-dark); font-weight: 750; text-decoration: none; }

.shell-menu-item {
    align-items: center;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    gap: 10px;
    min-height: 50px;
    padding: 9px 12px;
    text-align: left;
    text-decoration: none;
    width: 100%;
}
.shell-menu-item:last-child { border-bottom: 0; }
.shell-menu-item:hover { background: #f0fdfa; }
.shell-menu-item > .nav-ico { color: var(--teal-dark); }
.shell-menu-item > span:last-child { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.shell-menu-item strong { font-size: 12px; }
.shell-menu-item small { color: var(--muted); font-size: 10.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-menu-empty { color: var(--muted); font-size: 12px; padding: 18px 14px; text-align: center; }
.active-clocks-menu { max-height: calc(100dvh - var(--topbar-h) - 20px); overflow-y: auto; }
.active-clocks-menu .shell-menu-head { position: sticky; top: 0; z-index: 1; }
.shell-job-status,
.shell-clock-pulse { background: var(--teal); border-radius: 99px; flex: 0 0 8px; height: 8px; width: 8px; }
.shell-clock-pulse { box-shadow: 0 0 0 4px rgba(15, 118, 110, .12); }

.account-trigger {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 99px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 750;
    gap: 7px;
    min-height: 38px;
    padding: 4px 9px 4px 4px;
    white-space: nowrap;
}
.account-trigger:hover,
.account-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, .14); }
.account-avatar { align-items: center; background: #d4f7f1; border-radius: 50%; color: var(--teal-dark); display: inline-flex; font-size: 11px; font-weight: 850; height: 28px; justify-content: center; width: 28px; }
.account-menu { min-width: 280px; }
.workspace-control { margin-left: 3px; }
.topbar .sync-state { color: #a9c8c2; }

.demo-badge {
    background: #fef9c3;
    border: 1px solid #fde047;
    border-radius: 999px;
    color: #713f12;
    font-size: 12px;
    font-weight: 750;
    padding: 4px 11px;
    white-space: nowrap;
}

#view {
    flex: 1;
    min-height: 0;
    outline: none;
    overflow-y: auto;
    padding: var(--view-pad-y) 26px 40px;
}

/* ---------- Page scaffolding ---------- */

.page-head {
    align-items: flex-end;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.page-head h1 { font-size: 22px; font-weight: 800; }
.page-head .sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cell-sub { color: var(--muted); font-size: 12.5px; line-height: 1.45; }

.card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
}

.card + .card, .card + .section-gap, .section-gap { margin-top: 16px; }

.card-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 13px 16px;
}

.card-head h2 { font-size: 15px; font-weight: 800; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }

.grid-2 { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { display: grid; gap: 14px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Buttons ---------- */

.btn {
    align-items: center;
    background: var(--teal);
    border: 1px solid var(--teal);
    border-radius: var(--radius);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 750;
    gap: 7px;
    justify-content: center;
    padding: 9px 14px;
    text-decoration: none;
}

.btn:hover { background: var(--teal-dark); border-color: var(--teal-dark); }

.btn.ghost {
    background: var(--panel);
    border-color: var(--line);
    color: var(--ink);
}

.btn.ghost:hover { border-color: var(--teal); color: var(--teal-dark); background: var(--panel); }

.btn.danger { background: var(--panel); border-color: var(--line); color: var(--red); }
.btn.danger:hover { border-color: var(--red); background: #fef2f2; }

.btn.small { font-size: 12.5px; padding: 6px 11px; }
.btn.tiny { font-size: 12px; padding: 3px 9px; }
.btn:disabled { cursor: not-allowed; opacity: 0.5; }

.btn svg { height: 15px; width: 15px; }

/* ---------- Pills / badges ---------- */

.pill {
    border-radius: 999px;
    display: inline-block;
    font-size: 11.5px;
    font-weight: 750;
    padding: 3px 10px;
    white-space: nowrap;
}

.pill.st-estimate  { background: var(--st-estimate-bg);  color: var(--st-estimate); }
.pill.st-approved  { background: var(--st-approved-bg);  color: var(--st-approved); }
.pill.st-scheduled { background: var(--st-scheduled-bg); color: var(--st-scheduled); }
.pill.st-progress  { background: var(--st-progress-bg);  color: var(--st-progress); }
.pill.st-parts     { background: var(--st-parts-bg);     color: var(--st-parts); }
.pill.st-complete  { background: var(--st-complete-bg);  color: var(--st-complete); }
.pill.st-invoiced  { background: var(--st-invoiced-bg);  color: var(--st-invoiced); }
.pill.st-paid      { background: var(--st-paid-bg);      color: var(--st-paid); }

.pill.pass { background: var(--pass-bg); color: var(--pass); }
.pill.attn { background: var(--attn-bg); color: var(--attn); }
.pill.fail { background: var(--fail-bg); color: var(--fail); }
.pill.neutral { background: #f1f5f9; color: var(--muted); }
.pill.member { background: #fdf4ff; color: #a21caf; }
.pill.urgent { background: var(--fail-bg); color: var(--fail); }
.pill.trade { background: #eef2ff; color: #4338ca; }

/* ---------- Tables ---------- */

.table-scroll {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    overflow-x: auto;
}

table.data {
    border-collapse: collapse;
    min-width: 640px;
    width: 100%;
}

table.data th {
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 10px 14px;
    position: sticky;
    text-align: left;
    text-transform: uppercase;
    top: 0;
    z-index: 1;
}

table.data td {
    border-bottom: 1px solid var(--line);
    padding: 11px 14px;
    vertical-align: middle;
}

table.data tr:last-child td { border-bottom: none; }
table.data tr.rowlink { cursor: pointer; }
table.data tr.rowlink:hover { background: #f8faf9; }
table.data td .cell-main { display: block; font-weight: 700; }
table.data td .cell-sub { color: var(--muted); display: block; font-size: 12.5px; }
td.num, th.num { text-align: right; }

/* ---------- KPI cards ---------- */

.kpi {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    display: block;
    padding: 15px 16px;
    text-decoration: none;
}

.kpi:hover { border-color: var(--teal); }
.kpi .kpi-label { color: var(--muted); font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.03em; }
.kpi .kpi-value { font-size: 26px; font-weight: 800; margin-top: 5px; }
.kpi .kpi-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.kpi.tone-warn .kpi-value { color: var(--attn); }
.kpi.tone-bad .kpi-value { color: var(--fail); }
.kpi.tone-good .kpi-value { color: var(--st-paid); }

/* ---------- Alerts ---------- */

.alerts { display: grid; gap: 8px; margin-bottom: 16px; }

.alert-row {
    align-items: center;
    border: 1px solid;
    border-radius: var(--radius);
    display: flex;
    font-size: 13px;
    font-weight: 650;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
}

.alert-row svg { flex: 0 0 16px; height: 16px; width: 16px; }
.alert-row.danger { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.alert-row.warning { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.alert-row.info { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.alert-row:hover { filter: brightness(0.98); }

/* ---------- Filter chips ---------- */

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }

.chip {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    padding: 6px 13px;
}

.chip .count { color: var(--muted); font-weight: 800; margin-left: 5px; }
.chip:hover { border-color: var(--teal); }
.chip.active { background: var(--teal); border-color: var(--teal); color: #fff; }
.chip.active .count { color: #ccfbf1; }

.toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 14px; }

.toolbar input[type="search"], .toolbar select, .field-input, .field-select, .field-textarea {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13.5px;
    padding: 8px 11px;
}

.toolbar input[type="search"]:focus, .toolbar select:focus,
.field-input:focus, .field-select:focus, .field-textarea:focus {
    border-color: var(--teal);
    outline: 2px solid rgba(15, 118, 110, 0.15);
}

/* ---------- Forms ---------- */

.field { display: grid; gap: 5px; margin-bottom: 13px; }
.field > label { font-size: 12.5px; font-weight: 750; }
.field-input, .field-select, .field-textarea { width: 100%; }
.field-textarea { min-height: 70px; resize: vertical; }
.form-row { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-row-3 { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Modal / drawer / toast ---------- */

.overlay {
    align-items: center;
    background: rgba(17, 24, 39, 0.45);
    display: flex;
    inset: 0;
    justify-content: center;
    padding: 20px;
    position: fixed;
    z-index: 80;
}

.modal {
    background: var(--panel);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    display: flex;
    flex-direction: column;
    max-height: 88vh;
    max-width: 520px;
    width: 100%;
}

.modal.wide { max-width: 720px; }

.modal-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
}

.modal-head h2 { font-size: 16px; font-weight: 800; }
.modal-body { overflow-y: auto; padding: 18px; }
.modal-foot { border-top: 1px solid var(--line); display: flex; gap: 9px; justify-content: flex-end; padding: 13px 18px; }

.x-btn {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    padding: 2px 6px;
}

.x-btn:hover { color: var(--ink); }

.drawer-overlay {
    background: rgba(17, 24, 39, 0.35);
    inset: 0;
    position: fixed;
    z-index: 70;
}

.drawer {
    background: var(--panel);
    border-left: 1px solid var(--line);
    bottom: 0;
    box-shadow: -16px 0 44px rgba(17, 24, 39, 0.18);
    display: flex;
    flex-direction: column;
    max-width: var(--drawer-w);
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 75;
}

body.drawer-open #view .wo-command-rail { visibility: hidden; }
body.drawer-open .wo-command-dock { right: var(--drawer-w); }

.drawer-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    padding: 14px 18px;
}

.drawer-head h2 { font-size: 16px; font-weight: 800; }
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px; }

#toast-root {
    bottom: 20px;
    display: grid;
    gap: 8px;
    left: 50%;
    position: fixed;
    transform: translateX(-50%);
    z-index: 95;
}

.toast {
    background: var(--ink);
    border-radius: 10px;
    box-shadow: var(--shadow-2);
    color: #fff;
    font-size: 13.5px;
    font-weight: 700;
    max-width: 90vw;
    opacity: 0;
    padding: 11px 17px;
    transform: translateY(8px);
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.toast.show { opacity: 1; transform: translateY(0); }
.toast.good { background: #065f46; }
.toast.warn { background: #92400e; }

/* ---------- Empty state ---------- */

.empty {
    color: var(--muted);
    padding: 38px 20px;
    text-align: center;
}

.empty svg { color: var(--faint); height: 34px; width: 34px; }
.empty h3 { color: var(--ink); font-size: 15px; margin: 10px 0 4px; }
.empty p { font-size: 13px; }

/* ---------- Dashboard ---------- */

.sched-strip { display: grid; gap: 8px; }

.sched-item {
    align-items: center;
    border: 1px solid var(--line);
    border-left-width: 5px;
    border-radius: var(--radius);
    display: flex;
    gap: 12px;
    padding: 10px 13px;
    text-decoration: none;
}

.sched-item:hover { background: #f8faf9; }
.sched-item .time { font-weight: 800; white-space: nowrap; }
.sched-item .who { color: var(--muted); font-size: 12.5px; }

/* ---------- Charts ---------- */

.chart-wrap { overflow-x: auto; }
.chart-wrap svg { display: block; }
.bar-label { fill: var(--muted); font-family: var(--font); font-size: 11px; }
.bar-value { fill: var(--ink); font-family: var(--font); font-size: 11px; font-weight: 700; }
.bar-rect { fill: var(--teal); }
.bar-rect.dim { fill: #99c9c4; }
.donut-track { stroke: var(--line); }
.donut-arc { stroke: var(--teal); }
.donut-num { fill: var(--ink); font-family: var(--font); font-size: 22px; font-weight: 800; }
.donut-sub { fill: var(--muted); font-family: var(--font); font-size: 11px; }

/* ---------- Work order detail ---------- */

.wo-head-card { padding: 18px; }

.wo-head-top { align-items: flex-start; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }
.wo-head-top h1 { font-size: 21px; font-weight: 800; }
.wo-meta { color: var(--muted); display: flex; flex-wrap: wrap; font-size: 13px; gap: 6px 16px; margin-top: 8px; }
.wo-meta a { color: var(--teal-dark); font-weight: 700; }
.wo-concern {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 13.5px;
    margin-top: 12px;
    padding: 11px 13px;
}
.wo-concern strong { color: var(--muted); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; display: block; margin-bottom: 3px; }

.status-flow { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }

.equip-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.equip-chip {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 650;
    padding: 4px 11px;
}

.line-approval { display: inline-flex; gap: 4px; }

.approve-dot {
    background: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 750;
    padding: 3px 9px;
}

.approve-dot.on-approved { background: var(--pass-bg); border-color: var(--pass); color: var(--pass); }
.approve-dot.on-declined { background: var(--fail-bg); border-color: var(--fail); color: var(--fail); }
.approve-dot:hover { border-color: var(--teal); }

tr.line-declined td { opacity: 0.45; text-decoration: line-through; }
tr.line-inspection td:first-child::before {
    content: "From inspection";
    background: var(--attn-bg);
    border-radius: 999px;
    color: var(--attn);
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    margin-right: 7px;
    padding: 2px 7px;
    text-transform: uppercase;
    vertical-align: 1px;
}

.totals-box { margin-left: auto; max-width: 320px; }
.totals-box .trow { display: flex; font-size: 13.5px; gap: 14px; justify-content: space-between; padding: 4px 0; }
.totals-box .trow > span:first-child { min-width: 0; }
.totals-box .trow > span:last-child { flex: 0 0 auto; white-space: nowrap; }
.totals-box .trow.grand { border-top: 1px solid var(--line); font-size: 16px; font-weight: 800; margin-top: 5px; padding-top: 9px; }
.totals-box .trow.due { color: var(--fail); font-weight: 800; }
.totals-box .trow.due.zero { color: var(--st-paid); }

/* Timeline */
.timeline { display: grid; gap: 0; }
.tl-item { display: flex; gap: 12px; padding: 9px 0; position: relative; }
.tl-item::before {
    background: var(--line);
    bottom: 0;
    content: "";
    left: 5px;
    position: absolute;
    top: 0;
    width: 2px;
}
.tl-item:first-child::before { top: 14px; }
.tl-item:last-child::before { bottom: auto; height: 14px; }
.tl-dot {
    background: var(--teal);
    border-radius: 999px;
    flex: 0 0 12px;
    height: 12px;
    margin-top: 4px;
    position: relative;
    width: 12px;
    z-index: 1;
}
.tl-body { font-size: 13px; }
.tl-body small { color: var(--muted); display: block; font-size: 11.5px; margin-top: 1px; }

/* Tabs */
.tabs { border-bottom: 1px solid var(--line); display: flex; gap: 2px; margin-bottom: 16px; overflow-x: auto; }
.tabs button {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 750;
    padding: 10px 13px;
    white-space: nowrap;
}
.tabs button.active { border-bottom-color: var(--teal); color: var(--ink); }

/* Guided office workflow: keep the job stage, home context, and financial
   health visible without forcing dispatchers to hunt between screens. */
.wo-page-head { align-items: center; }
.wo-page-head h1 { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }
.wo-page-head .sub { align-items: center; display: flex; flex-wrap: wrap; gap: 5px; }
.wo-page-head .sub a { color: var(--teal-dark); font-weight: 750; text-decoration: none; }
.wo-page-kicker {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 2px;
    text-transform: uppercase;
}

.wo-stage-layout {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) 310px;
}

.wo-stage-card { min-width: 0; overflow: hidden; }
.wo-stage-tabs {
    background: #fbfcfb;
    margin: 0;
    padding: 0 10px;
    scrollbar-width: thin;
}
.wo-stage-tabs button { min-height: 48px; }
.wo-stage-content { min-width: 0; }

.wo-summary { display: grid; gap: 18px; }
.wo-summary-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wo-summary-block {
    background: #f8faf9;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    padding: 13px 14px;
}
.wo-summary-block.concern { background: #f0fdfa; border-color: #99e0d6; }
.wo-summary-block strong { font-size: 13.5px; line-height: 1.45; }
.wo-summary-block small { color: var(--muted); font-size: 12px; line-height: 1.4; }
.wo-summary-label {
    color: var(--muted);
    display: block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.wo-summary-section { border-top: 1px solid var(--line); padding-top: 17px; }
.wo-section-head, .wo-stage-toolbar {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}
.wo-section-head h3, .wo-stage-toolbar h3 { font-size: 14.5px; font-weight: 800; }
.wo-finding-list { display: grid; gap: 8px; margin-top: 10px; }
.wo-finding-list > div {
    align-items: flex-start;
    background: #fffdf6;
    border: 1px solid #fde68a;
    border-radius: 9px;
    display: flex;
    gap: 9px;
    padding: 10px 11px;
}
.wo-finding-list p { font-size: 13px; line-height: 1.5; }
.wo-note-form { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr) auto; margin: 11px 0 8px; }

.wo-stage-toolbar { margin-bottom: 14px; }
.wo-inspection-list { display: grid; gap: 14px; }
.wo-inspection-card { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wo-inspection-card > header,
.wo-inspection-card > footer {
    align-items: center;
    background: #f8faf9;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: space-between;
    padding: 12px 14px;
}
.wo-inspection-card > header { border-bottom: 1px solid var(--line); }
.wo-inspection-card > footer { border-top: 1px solid var(--line); justify-content: flex-end; }
.wo-inspection-card h3 { font-size: 14px; }
.wo-inspection-section { padding: 12px 14px 4px; }
.wo-inspection-section h4 {
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.wo-inspection-row {
    align-items: center;
    border-top: 1px solid var(--paper);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    min-width: 0;
    padding: 10px 0;
}
.wo-inspection-row:first-of-type { border-top: 0; }
.wo-inspection-row > div { align-items: center; display: flex; flex: 1; flex-wrap: wrap; gap: 7px; min-width: 0; }
.wo-inspection-row strong { font-size: 13px; }
.wo-inspection-row small { color: var(--muted); flex: 1 0 100%; font-size: 12px; padding-left: 58px; }
.wo-inspection-row small.wo-recommend { color: #a16207; font-weight: 700; }
.wo-inspection-row img { border-radius: 7px; height: 52px; object-fit: cover; width: 68px; }

.wo-progress { display: grid; gap: 16px; }
.wo-progress-overview { align-items: flex-end; display: flex; gap: 16px; justify-content: space-between; }
.wo-progress-overview > div:first-child { display: flex; flex-direction: column; gap: 2px; }
.wo-progress-overview strong { font-size: 15px; }
.wo-progress-overview small { color: var(--muted); font-size: 12.5px; }
.wo-progress-number { color: var(--teal-dark); font-size: 26px; font-weight: 850; }
.wo-progress-meter { background: var(--line); border-radius: 99px; height: 8px; overflow: hidden; }
.wo-progress-meter span { background: var(--teal); border-radius: inherit; display: block; height: 100%; }
.wo-techs { align-items: center; display: flex; }
.wo-techs .avatar { border: 2px solid #fff; margin-left: -6px; }
.wo-techs .avatar:first-child { margin-left: 0; }
.wo-work-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wo-work-row { align-items: center; display: flex; gap: 11px; padding: 12px 13px; }
.wo-work-row + .wo-work-row { border-top: 1px solid var(--line); }
.wo-work-row > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.wo-work-row > div small { color: var(--muted); font-size: 12px; }
.wo-work-row > strong { font-size: 13px; white-space: nowrap; }
.wo-work-row.done { background: #f0fdf4; }
.wo-work-row.done > div > strong { text-decoration: line-through; }

.wo-payment { display: grid; gap: 18px; }
.wo-payment-hero {
    align-items: center;
    background: linear-gradient(125deg, #0b3b37, #0f766e);
    border-radius: 12px;
    color: #fff;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 17px 18px;
}
.wo-payment-hero > div { display: flex; flex-direction: column; }
.wo-payment-hero .wo-summary-label, .wo-payment-hero small { color: #c7ded9; }
.wo-payment-hero > div > strong { font-size: 27px; }
.wo-payment-hero .btn { background: #fff; color: var(--teal-dark); }
.wo-payment-restricted { color: #c7ded9; font-size: 12px; font-weight: 750; }
.wo-payment-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wo-payment-list > div { align-items: center; display: grid; gap: 12px; grid-template-columns: 1fr auto auto; padding: 12px 13px; }
.wo-payment-list > div + div { border-top: 1px solid var(--line); }
.wo-payment-list span:first-child { display: flex; flex-direction: column; }
.wo-payment-list small { color: var(--muted); font-size: 12px; }

.wo-context { display: grid; gap: 12px; position: sticky; top: 0; }
.wo-context-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    display: grid;
    gap: 11px;
    min-width: 0;
    padding: 14px;
}
.wo-context-card.accent { background: #fdf4ff; border-color: #e9d5ff; gap: 2px; }
.wo-context-card.accent > strong { color: #86198f; font-size: 15px; }
.wo-context-card.accent > small { color: #7e22ce; font-size: 12px; }
.wo-context-head { align-items: flex-start; display: flex; gap: 10px; justify-content: space-between; }
.wo-context-head > div { display: flex; flex-direction: column; min-width: 0; }
.wo-context-head span { color: var(--muted); font-size: 11px; font-weight: 750; }
.wo-context-head strong { font-size: 14px; }
.wo-context-head a { color: var(--teal-dark); font-size: 11.5px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.wo-context-row { align-items: flex-start; display: grid; gap: 9px; grid-template-columns: 18px minmax(0, 1fr); }
.wo-context-row > svg { color: var(--teal-dark); height: 17px; margin-top: 2px; width: 17px; }
.wo-context-row > div { display: flex; flex-direction: column; min-width: 0; }
.wo-context-row span { color: var(--muted); font-size: 10.5px; }
.wo-context-row strong { font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
.wo-context-actions { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }
.wo-context-actions .btn { justify-content: center; }
.wo-system-row { align-items: center; border-top: 1px solid var(--paper); display: flex; gap: 8px; justify-content: space-between; padding-top: 9px; }
.wo-system-row > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.wo-system-row > div strong { font-size: 12.5px; }
.wo-system-row small { color: var(--muted); font-size: 11px; }
.wo-context-note { background: #fffdf6; border-left: 3px solid var(--attn); border-radius: 6px; font-size: 12px; line-height: 1.45; padding: 8px 9px; }

.wo-line-cards { display: none; }
.wo-estimate-actions { align-items: center; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; }
.wo-financial-controls { border-top: 1px solid var(--line); display: grid; gap: 12px; }
.wo-financial-actions { display: flex; flex-wrap: wrap; gap: 7px; }
.wo-adjustment-list, .wo-correction-list { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.wo-adjustment-list > div {
    align-items: center;
    display: grid;
    gap: 10px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    padding: 10px 12px;
}
.wo-adjustment-list > div + div, .wo-correction-list > div + div { border-top: 1px solid var(--line); }
.wo-adjustment-list > div > span:first-child, .wo-correction-list > div > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.wo-adjustment-list small, .wo-correction-list small { color: var(--muted); font-size: 11.5px; }
.wo-adjustment-list .negative, .wo-correction-list .negative { color: var(--fail); }
.wo-financial-empty { background: var(--paper); border-radius: 9px; color: var(--muted); font-size: 12.5px; padding: 11px 12px; }
.wo-correction-list > div { align-items: center; display: grid; gap: 10px; grid-template-columns: auto minmax(0, 1fr) auto; padding: 11px 12px; }
.wo-correction-icon { align-items: center; background: var(--attn-bg); border-radius: 99px; color: var(--attn); display: inline-flex; font-size: 16px; font-weight: 900; height: 28px; justify-content: center; width: 28px; }
.wo-correction-icon.credit { background: var(--pass-bg); color: var(--pass); }
.form-help { color: var(--muted); font-size: 12px; line-height: 1.45; margin: 2px 0 0; }
.wo-empty-action { display: flex; justify-content: center; margin-top: 12px; }

.wo-finance-dock {
    background: #092f2c;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 11px 11px 0 0;
    bottom: 0;
    box-shadow: 0 -8px 24px rgba(11, 59, 55, 0.16);
    color: #fff;
    display: grid;
    gap: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    margin-top: 16px;
    overflow: hidden;
    position: sticky;
    z-index: 12;
}
.wo-finance-dock > div { border-right: 1px solid rgba(255, 255, 255, 0.1); display: flex; flex-direction: column; min-width: 0; padding: 10px 12px; }
.wo-finance-dock > div:last-of-type { border-right: 0; }
.wo-finance-dock span { color: #b8cdc8; font-size: 10px; font-weight: 750; line-height: 1.25; text-transform: uppercase; }
.wo-finance-dock strong { font-size: 14px; margin-top: 2px; }
.wo-finance-dock .profit { background: rgba(20, 184, 166, 0.12); }
.wo-finance-dock .profit strong { color: #5eead4; }
.wo-finance-dock .profit.loss { background: rgba(220, 38, 38, 0.16); }
.wo-finance-dock .profit.loss strong { color: #fecaca; }
.wo-cost-warning { background: #713f12; color: #fef3c7; font-size: 11px; grid-column: 1 / -1; margin: 0; padding: 5px 12px; text-align: center; }

/* Enterprise work-order command frame. The header, context rail, and action
   dock form one bounded workspace on large monitors instead of stretching a
   handful of rows across the entire display. */
.wo-command-frame,
.wo-stage-layout {
    margin-left: auto;
    margin-right: auto;
    max-width: 1740px;
    width: 100%;
}

.wo-command-frame {
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    border-bottom: 1px solid var(--line);
    margin-top: calc(var(--view-pad-y) * -1);
    padding: var(--view-pad-y) 0 12px;
    position: sticky;
    top: calc(var(--view-pad-y) * -1);
    z-index: 24;
}

.wo-command-main {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
}

.wo-command-main > :first-child { flex: 1 1 420px; min-width: 0; }
.wo-command-main .page-actions { flex: 0 1 auto; justify-content: flex-end; }
.wo-command-main h1 { align-items: center; display: flex; flex-wrap: wrap; font-size: 22px; gap: 7px; }
.wo-command-main .sub { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12.5px; gap: 5px; margin-top: 3px; }
.wo-command-main .sub a { color: var(--teal-dark); font-weight: 750; text-decoration: none; }
.wo-command-secondary-actions [data-action="wo.sendEstimate"],
.wo-command-secondary-actions [data-action="wo.sendInvoice"],
.wo-command-secondary-actions [data-action="wo.payModal"] { display: none; }

.wo-command-facts {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(4, minmax(118px, 1fr));
    margin-top: 10px;
}

.wo-command-fact {
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    display: flex;
    flex-direction: row;
    gap: 8px;
    min-width: 0;
    padding: 8px 10px;
}

.wo-command-fact > svg { color: var(--teal-dark); flex: 0 0 16px; height: 16px; margin-top: 2px; width: 16px; }
.wo-command-fact > span { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.wo-command-fact small {
    color: var(--muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.wo-command-fact strong { font-size: 12.5px; line-height: 1.35; overflow-wrap: anywhere; }
.wo-command-fact em { color: var(--muted); font-size: 10.5px; font-style: normal; line-height: 1.35; margin-top: 1px; }
.wo-command-fact.warning { background: #fff7ed; border-color: #fdba74; }
.wo-command-fact.warning strong { color: #9a3412; }
.wo-command-fact.good { background: #ecfdf5; border-color: #86efac; }
.wo-command-fact.good strong { color: #166534; }

.wo-stage-layout { grid-template-columns: minmax(0, 1fr) 340px; margin-bottom: 86px; min-height: calc(100dvh - var(--topbar-h) - 180px); }
.wo-stage-layout[data-rail-collapsed="true"] { grid-template-columns: minmax(0, 1fr) 48px; }

.wo-mobile-context-trigger { display: none; }

.wo-command-rail {
    background: linear-gradient(180deg, #0b3532 0%, #082724 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    box-shadow: 0 12px 28px rgba(8, 39, 36, 0.18);
    color: #fff;
    display: grid;
    gap: 9px;
    max-height: calc(100dvh - 249px - 94px);
    min-width: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px;
    position: sticky;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
    top: 171px;
    width: 100%;
}

.wo-command-rail-toggle,
.wo-command-rail-expand {
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    color: #d9f6f1;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    gap: 6px;
    justify-content: center;
    min-height: 34px;
    width: 100%;
}
.wo-command-rail-toggle:hover,
.wo-command-rail-expand:hover { background: rgba(255, 255, 255, 0.14); }
.wo-command-rail-toggle > span { font-size: 18px; line-height: 1; }
.wo-command-rail.is-collapsed { align-content: start; overflow: visible; padding: 6px; }
.wo-command-rail-expand { flex-direction: column; min-height: 126px; padding: 10px 4px; }
.wo-command-rail-expand > span:first-child { font-size: 23px; line-height: 1; }
.wo-command-rail-expand > span:last-child { font-size: 9px; letter-spacing: .04em; writing-mode: vertical-rl; }
.wo-command-rail-drawer { border: 0; border-radius: 0; box-shadow: none; max-height: none; position: static; width: 100%; }

.wo-command-rail-card,
.wo-command-rail-section {
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 9px;
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 11px;
}

.wo-command-rail :is(h2, h3, h4, strong) { color: #fff; }
.wo-command-rail :is(.cell-sub, small, .wo-summary-label) { color: #b8cdc8; }
.wo-command-rail a { color: #8de6db; }
.wo-command-rail .pill.neutral { background: rgba(255, 255, 255, 0.1); color: #e8f5f2; }

.wo-command-rail-head { align-items: flex-start; display: flex; gap: 9px; justify-content: space-between; }
.wo-command-rail-head > div { display: flex; flex-direction: column; min-width: 0; }
.wo-command-rail-head > div > span { color: #a9c2bd; font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.wo-command-rail-head > div > strong,
.wo-command-rail-head > strong { font-size: 13px; }
.wo-command-rail-head > a { font-size: 10.5px; font-weight: 750; text-decoration: none; white-space: nowrap; }

.wo-command-rail-row {
    align-items: flex-start;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: grid;
    gap: 8px;
    grid-template-columns: 16px minmax(0, 1fr);
    padding-top: 8px;
}

.wo-command-rail-row:first-child { border-top: 0; padding-top: 0; }
.wo-command-rail-row > svg { color: #7ddbd0; height: 15px; margin-top: 2px; width: 15px; }
.wo-command-rail-row > div { display: flex; flex-direction: column; min-width: 0; }
.wo-command-rail-row > div > span { color: #a9c2bd; font-size: 9.5px; font-weight: 750; }
.wo-command-rail-row > div > strong { font-size: 11.5px; line-height: 1.4; overflow-wrap: anywhere; }

.wo-command-rail-actions { display: grid; gap: 7px; grid-template-columns: 1fr 1fr; }
.wo-command-rail-actions .btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #fff;
    justify-content: center;
}
.wo-command-rail-actions .btn:hover { background: rgba(255, 255, 255, 0.14); }

.wo-command-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.wo-command-tags .pill { background: rgba(141, 230, 219, 0.13); color: #bff5ee; }
.wo-command-equipment,
.wo-command-history { display: grid; gap: 7px; min-width: 0; width: 100%; }
.wo-command-note { background: rgba(245, 158, 11, .1); border-left: 3px solid #fbbf24; border-radius: 6px; display: flex; flex-direction: column; gap: 2px; padding: 8px 9px; }
.wo-command-note > span { color: #fde68a; font-size: 9.5px; font-weight: 800; text-transform: uppercase; }
.wo-command-note > strong { font-size: 11.5px; line-height: 1.45; }
.wo-command-equipment-row { align-items: center; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; gap: 8px; justify-content: space-between; padding-top: 8px; }
.wo-command-equipment-row:first-child { border-top: 0; padding-top: 0; }
.wo-command-equipment-row > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.wo-command-equipment-row > div > strong { font-size: 11.5px; line-height: 1.35; }
.wo-command-equipment-row > div > small { color: #a9c2bd; font-size: 10px; }
.wo-command-contact { display: flex; flex-direction: column; gap: 4px; }
.wo-command-contact > span { color: #a9c2bd; font-size: 9.5px; font-weight: 750; }
.wo-command-contact > strong { font-size: 11.5px; line-height: 1.45; }
.wo-command-contact > a { font-size: 10.5px; font-weight: 750; text-decoration: none; }
.wo-command-history > a { align-items: center; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; gap: 8px; justify-content: space-between; min-width: 0; overflow: hidden; padding-top: 7px; text-decoration: none; width: 100%; }
.wo-command-history > a:first-child { border-top: 0; padding-top: 0; }
.wo-command-history > a > span:first-child { display: flex; flex: 1; flex-direction: column; min-width: 0; }
.wo-command-history > a > .pill { flex: 0 0 auto; max-width: 42%; }
.wo-command-history > a strong { font-size: 11px; }
.wo-command-history > a small { color: #a9c2bd; font-size: 9.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.wo-command-dock {
    align-items: stretch;
    background: #071f1e;
    border-top: 1px solid rgba(255, 255, 255, 0.11);
    bottom: 0;
    box-shadow: 0 -10px 30px rgba(7, 31, 30, 0.24);
    color: #fff;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    left: var(--sidebar-w);
    min-height: 72px;
    position: fixed;
    right: 0;
    z-index: 44;
}

.wo-command-dock[data-has-metrics="false"] { grid-template-columns: auto minmax(0, 1fr); }
.wo-command-dock[data-has-metrics="false"] .wo-dock-next { grid-column: 2; }

.wo-dock-build,
.wo-dock-next {
    align-items: center;
    display: flex;
    padding: 10px 14px;
}

.wo-dock-build {
    background: #0f8d82;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    justify-content: center;
    min-width: 124px;
    text-decoration: none;
}
.wo-dock-build:hover { background: #12a398; }
.wo-dock-next { border-left: 1px solid rgba(255, 255, 255, 0.1); flex-direction: column; gap: 4px; grid-column: 3; justify-content: center; }
.wo-dock-next > span { color: #9fbdb7; font-size: 8.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

.wo-dock-primary {
    background: #0f8d82;
    border-color: #0f8d82;
    color: #fff;
    justify-content: center;
    min-height: 42px;
    white-space: nowrap;
}

.wo-dock-primary:hover { background: #12a398; border-color: #12a398; }

.wo-dock-metrics {
    align-items: stretch;
    display: grid;
    grid-auto-columns: minmax(108px, 1fr);
    grid-auto-flow: column;
    min-width: 0;
    overflow-x: auto;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.wo-dock-metric {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 9px 11px;
}

.wo-dock-metric > span { color: #a9c8c2; font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.wo-dock-provisional { color: #fde68a; display: block; font-size: 8px; font-style: normal; letter-spacing: .03em; margin-top: 1px; }
.wo-dock-metric > strong { font-size: 13.5px; margin-top: 2px; white-space: nowrap; }
.wo-dock-metric.profit { background: rgba(20, 184, 166, 0.11); }
.wo-dock-metric.profit > strong { color: #5eead4; }
.wo-dock-metric.loss { background: rgba(220, 38, 38, 0.16); }
.wo-dock-metric.loss > strong { color: #fecaca; }
.wo-command-dock .wo-cost-warning { grid-column: 1 / -1; }

@media (max-width: 1100px) and (min-width: 701px) {
    .wo-stage-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .wo-context { grid-template-columns: repeat(2, minmax(0, 1fr)); position: static; }
    .wo-finance-dock { grid-template-columns: repeat(4, minmax(0, 1fr)); position: static; }
    .wo-finance-dock > div { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .wo-finance-dock > div:nth-child(4n) { border-right: 0; }
    .wo-command-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .wo-command-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; position: static; }
    .wo-command-dock { grid-template-columns: auto minmax(0, 1fr) auto; }
    .wo-dock-metrics { grid-auto-flow: column; grid-template-columns: repeat(4, minmax(72px, 1fr)); overflow: hidden; }
    .wo-dock-metric { display: none; }
    .wo-dock-metric:nth-child(1),
    .wo-dock-metric:nth-child(2),
    .wo-dock-metric:nth-child(6),
    .wo-dock-metric:nth-child(7) { display: flex; }
}

/* ---------- Work order board (kanban) ---------- */

.head-search {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13.5px;
    padding: 8px 12px;
    width: 320px;
}

.head-search:focus, .head-select:focus { border-color: var(--teal); outline: 2px solid rgba(15, 118, 110, 0.15); }

.head-select {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13.5px;
    padding: 8px 10px;
}

.seg {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: inline-flex;
    overflow: hidden;
}

.seg button {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 750;
    padding: 8px 14px;
}

.seg button.active { background: var(--teal); color: #fff; }

.wo-board {
    display: grid;
    gap: 12px;
    grid-auto-columns: minmax(238px, 1fr);
    grid-auto-flow: column;
    /* Fill the viewport below the header + toolbar so columns run to the
       bottom of the screen instead of stopping at their content. */
    min-height: calc(100vh - 176px);
    overflow-x: auto;
    padding-bottom: 12px;
}

.wo-col {
    background: #eef1ee;
    border-radius: 10px;
    border-top: 3px solid var(--faint);
    min-height: 260px;
    padding: 9px;
}

.wo-col.st-estimate  { border-top-color: var(--st-estimate); }
.wo-col.st-approved  { border-top-color: var(--st-approved); }
.wo-col.st-scheduled { border-top-color: var(--st-scheduled); }
.wo-col.st-progress  { border-top-color: var(--st-progress); }
.wo-col.st-parts     { border-top-color: var(--st-parts); }
.wo-col.st-complete  { border-top-color: var(--st-complete); }
.wo-col.st-invoiced  { border-top-color: var(--st-invoiced); }
.wo-col.st-paid      { border-top-color: var(--st-paid); }

.wo-col-head {
    align-items: center;
    color: var(--muted);
    display: flex;
    font-size: 11.5px;
    font-weight: 800;
    justify-content: space-between;
    letter-spacing: 0.03em;
    padding: 3px 4px 9px;
    text-transform: uppercase;
    white-space: nowrap;
}

.wo-col-head .count {
    background: #fff;
    border-radius: 999px;
    padding: 1px 8px;
}

.wo-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 8px;
    padding: 11px 12px;
}

.wo-card:hover { border-color: var(--teal); box-shadow: var(--shadow-1); }
.wo-card-link { color: inherit; display: block; text-decoration: none; }
.wo-card strong { display: block; font-size: 13.5px; }
.wo-card small { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }
.wo-card .wo-card-concern { color: var(--ink); }

.wo-card-foot {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

.wo-card-total { color: var(--teal-dark); font-size: 13px; font-weight: 800; }

.wo-card-advance {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 750;
    margin-top: 9px;
    padding: 4px 9px;
    width: 100%;
}

.wo-card-advance:hover { border-color: var(--teal); color: var(--teal-dark); }

.wo-col-empty {
    border: 1px dashed #cbd5e1;
    border-radius: var(--radius);
    color: var(--faint);
    font-size: 12px;
    padding: 18px 8px;
    text-align: center;
}

/* ---------- Dispatch ---------- */

.disp-wrap { overflow-x: auto; }

.disp-grid { border-collapse: collapse; min-width: 900px; table-layout: fixed; width: 100%; }
.disp-grid th, .disp-grid td { border: 1px solid var(--line); vertical-align: top; }
.disp-grid th { background: var(--panel); font-size: 12px; padding: 8px; }
.disp-grid th.today { background: var(--teal-soft); }
.disp-grid th .dow { color: var(--muted); display: block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; }
.disp-grid td { background: var(--panel); cursor: pointer; height: max(86px, calc((100vh - 440px) / 5)); padding: 5px; }
.disp-grid td:hover { background: #f8faf9; }
.disp-grid td.today { background: #f4fdfb; }
.disp-grid .tech-cell { background: var(--paper); cursor: default; padding: 9px; width: 138px; }
.tech-name { align-items: center; display: flex; font-size: 12.5px; font-weight: 800; gap: 7px; }
.tech-sub { color: var(--muted); font-size: 11px; margin-top: 2px; }

.avatar-dot {
    align-items: center;
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    flex: 0 0 24px;
    font-size: 10px;
    font-weight: 800;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.disp-chip {
    border-left: 4px solid var(--st-scheduled);
    background: var(--st-scheduled-bg);
    border-radius: 6px;
    cursor: pointer;
    display: block;
    font-size: 11.5px;
    margin-bottom: 4px;
    overflow: hidden;
    padding: 5px 7px;
    text-align: left;
    width: 100%;
    border-top: none; border-right: none; border-bottom: none;
    font-family: inherit;
}

.disp-chip strong { display: block; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.disp-chip small { color: var(--muted); }
.disp-chip.st-progress { background: var(--st-progress-bg); border-left-color: var(--st-progress); }
.disp-chip.st-complete { background: var(--st-complete-bg); border-left-color: var(--st-complete); }
.disp-chip.st-parts { background: var(--st-parts-bg); border-left-color: var(--st-parts); }
.disp-chip.st-approved { background: var(--st-approved-bg); border-left-color: var(--st-approved); }

.tray { display: flex; flex-wrap: wrap; gap: 8px; }
.tray .disp-chip { margin-bottom: 0; width: auto; }
.tray-empty { color: var(--muted); font-size: 13px; }

.capacity-board { overflow: hidden; }
.capacity-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 12px; }
.capacity-card { border: 1px solid var(--line); border-radius: 10px; padding: 11px; }
.capacity-card.near { border-color: #e7bb56; }
.capacity-card.over { border-color: #e17a72; }
.capacity-card-head { align-items: center; display: flex; gap: 8px; }
.capacity-card-head strong, .capacity-card-head small { display: block; }
.capacity-card-head strong { font-size: 12.5px; }
.capacity-card-head small, .capacity-summary { color: var(--muted); font-size: 11px; }
.capacity-value { align-items: baseline; display: flex; gap: 4px; margin-top: 12px; }
.capacity-value strong { font-size: 20px; }
.capacity-value span { color: var(--muted); font-size: 11px; }
.capacity-meter { background: #e9efee; border-radius: 999px; height: 7px; margin: 8px 0 5px; overflow: hidden; }
.capacity-meter span { background: var(--teal); border-radius: inherit; display: block; height: 100%; }
.capacity-card.near .capacity-meter span { background: #c78510; }
.capacity-card.over .capacity-meter span { background: #c54d44; }
.disp-hours { color: var(--muted); display: block; font-size: 10px; font-weight: 700; margin: 0 0 5px; }
.disp-hours.near { color: #976306; }
.disp-hours.over { color: #a3342d; }
.disp-mobile-list { display: none; }
.disp-mobile-tech + .disp-mobile-tech { border-top: 1px solid var(--line); }
.disp-mobile-tech-head {
    align-items: center;
    background: var(--panel);
    border: 0;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    justify-content: space-between;
    padding: 12px 14px;
    text-align: left;
    width: 100%;
}
.disp-mobile-tech-head > span:first-child { align-items: center; display: flex; gap: 9px; }
.disp-mobile-tech-head > span:first-child > span { display: flex; flex-direction: column; }
.disp-mobile-tech-head strong { font-size: 13px; }
.disp-mobile-tech-head small { color: var(--muted); font-size: 11.5px; }
.disp-mobile-tech-head > span:last-child { color: var(--teal-dark); font-size: 22px; }
.disp-mobile-appts { background: #f8faf9; display: grid; gap: 7px; padding: 0 14px 12px 53px; }
.disp-mobile-appts .disp-chip { margin: 0; min-height: 48px; padding: 8px 10px; }
.disp-mobile-open { color: var(--muted); font-size: 12px; padding: 6px 0; }
.schedule-conflict { background: #fff4e5; border: 1px solid #f2c889; border-radius: 8px; color: #854600; font-size: 12.5px; line-height: 1.45; margin-top: 12px; padding: 9px 10px; }

/* ---------- Customers ---------- */

.cust-grid { align-items: start; display: grid; gap: 16px; grid-template-columns: 320px 1fr; }

.inspection-layout { align-items: start; grid-template-columns: 290px minmax(0, 1fr); }

.contact-list { display: grid; gap: 9px; font-size: 13.5px; }
.contact-list .row { display: flex; gap: 9px; }
.contact-list svg { color: var(--faint); flex: 0 0 15px; height: 15px; margin-top: 2px; width: 15px; }

.equip-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
}

.equip-card + .equip-card { margin-top: 9px; }
.equip-card .eq-top { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.equip-card strong { font-size: 13.5px; }
.equip-card .eq-sub { color: var(--muted); font-size: 12.5px; margin-top: 3px; }

/* ---------- Inspections ---------- */

.insp-section h3 {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 18px 0 8px;
    text-transform: uppercase;
}

.insp-item {
    align-items: flex-start;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 8px;
    padding: 11px 13px;
}

.insp-item .ii-label { font-size: 13.5px; font-weight: 650; }
.insp-item .ii-note { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.insp-item .ii-rec { color: var(--attn); font-size: 12.5px; font-weight: 700; margin-top: 3px; }
.insp-item.res-fail { background: #fffbfb; border-color: #fecaca; }
.insp-item.res-attention { background: #fffdf6; border-color: #fde68a; }

.tri { display: inline-flex; gap: 4px; }
.tri button {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 10px;
}
.tri button.on-pass { background: var(--pass-bg); border-color: var(--pass); color: var(--pass); }
.tri button.on-attention { background: var(--attn-bg); border-color: var(--attn); color: var(--attn); }
.tri button.on-fail { background: var(--fail-bg); border-color: var(--fail); color: var(--fail); }

.insp-photo {
    background: none;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: zoom-in;
    display: inline-block;
    margin-top: 8px;
    overflow: hidden;
    padding: 0;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.insp-photo img {
    display: block;
    height: 74px;
    object-fit: cover;
    width: 100px;
}

.insp-photo:hover { box-shadow: var(--shadow-2); transform: translateY(-1px); }

.insp-summary { display: flex; gap: 8px; }

.ii-edit-row { margin: -3px 0 10px; padding-left: 2px; }

.linklike.sm { font-size: 12px; text-decoration: none; }
.linklike.sm:hover { text-decoration: underline; }

button.tpl-card {
    background: #fff;
    cursor: pointer;
    display: block;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.12s ease, transform 0.12s ease;
    width: 100%;
}

button.tpl-card:hover { border-color: var(--teal); transform: translateY(-1px); }

.tpl-sec {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 12px;
    padding: 12px;
}

.tpl-sec-head { display: flex; gap: 8px; margin-bottom: 9px; }
.tpl-sec-head .field-input { font-weight: 750; }

.tpl-item-row { align-items: center; display: flex; gap: 6px; margin-bottom: 6px; }
.tpl-item-row .field-input { font-size: 13px; padding: 7px 10px; }

/* ---------- Messages ---------- */

.msg-layout {
    display: grid;
    gap: 0;
    grid-template-columns: 300px 1fr;
    height: calc(100vh - 56px - 44px - 62px);
    min-height: 420px;
    overflow: hidden;
}

.thread-list { border-right: 1px solid var(--line); overflow-y: auto; }

.thread-item {
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    display: block;
    padding: 12px 14px;
    text-decoration: none;
    width: 100%;
    background: none;
    border-left: none; border-right: none; border-top: none;
    font-family: inherit;
    text-align: left;
}

.thread-item:hover { background: var(--paper); }
.thread-item.active { background: var(--teal-soft); }
.thread-item strong { display: block; font-size: 13.5px; }
.thread-item small { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.convo { display: flex; flex-direction: column; min-width: 0; }
.convo-head { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 10px; justify-content: space-between; padding: 11px 16px; }
.msg-mobile-back { display: none; }
.convo-scroll { display: flex; flex: 1; flex-direction: column; gap: 8px; overflow-y: auto; padding: 16px; }

.bubble {
    border-radius: 14px;
    font-size: 13.5px;
    max-width: 72%;
    padding: 9px 13px;
}

.bubble.in { background: #eef1f4; border-bottom-left-radius: 4px; align-self: flex-start; }
.bubble.out { background: var(--teal); border-bottom-right-radius: 4px; color: #fff; align-self: flex-end; }
.bubble.auto { background: var(--st-approved-bg); color: #5b21b6; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble .b-time { display: block; font-size: 10.5px; margin-top: 4px; opacity: 0.65; }
.message-delivery { display: block; font-size: 10.5px; font-weight: 800; margin-top: 5px; }
.message-delivery.draft { color: #fef3c7; }
.message-delivery.failed { color: #fecaca; }
.message-delivery.sending { color: #dbeafe; }
.message-delivery.sent,
.message-delivery.sent-manual { color: #ccfbf1; }
.message-delivery.retried { color: #dbeafe; }
.message-retry { background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; font-weight: 900; margin-left: 4px; padding: 0; text-decoration: underline; }

.call-chip {
    align-self: center;
    background: #f1f5f9;
    border-radius: 999px;
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 750;
    padding: 4px 13px;
}

.composer { border-top: 1px solid var(--line); padding: 11px 14px; }
.composer form { display: flex; gap: 8px; }
.composer input { flex: 1; }
.canned { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

/* ---------- Automations ---------- */

.auto-card .card-head h2 { font-size: 14.5px; }
.auto-desc { color: var(--muted); font-size: 13px; }

.switch { cursor: pointer; display: inline-flex; }
.switch input { display: none; }
.switch .track {
    background: #cbd5e1;
    border-radius: 999px;
    height: 20px;
    position: relative;
    transition: background 0.15s ease;
    width: 36px;
}
.switch .track::after {
    background: #fff;
    border-radius: 999px;
    content: "";
    height: 16px;
    left: 2px;
    position: absolute;
    top: 2px;
    transition: left 0.15s ease;
    width: 16px;
}
.switch input:checked + .track { background: var(--teal); }
.switch input:checked + .track::after { left: 18px; }

.tnode {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius);
    display: inline-block;
    max-width: 420px;
    padding: 9px 13px;
}

.tnode .tnode-type { color: var(--muted); display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.tnode strong { display: block; font-size: 13.5px; }
.tnode small { color: var(--muted); display: block; font-size: 12px; margin-top: 2px; }

.tnode.t-trigger { background: var(--teal); border-color: var(--teal-dark); color: #fff; }
.tnode.t-trigger .tnode-type, .tnode.t-trigger small { color: #bde8e3; }
.tnode.t-condition { border-left-color: var(--attn); }
.tnode.t-action { border-left-color: var(--st-scheduled); }
.tnode.t-delay { border-left-color: var(--st-approved); }
.tnode.t-end { border-left-color: var(--faint); color: var(--muted); }

.tnode.sim-active { box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.35); }

.tbranches { margin: 0; }
.tbranch { border-left: 2px solid var(--line); margin-left: 18px; padding: 12px 0 0 18px; position: relative; }
.tbranch::before { background: var(--line); content: ""; height: 2px; left: 0; position: absolute; top: 32px; width: 16px; }
.tedge-label {
    background: #eef2ff;
    border-radius: 999px;
    color: #4338ca;
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    margin-bottom: 6px;
    padding: 2px 9px;
    text-transform: uppercase;
}

.sim-log {
    background: #0b1120;
    border-radius: var(--radius);
    color: #a5f3fc;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1.7;
    margin-top: 14px;
    max-height: 190px;
    overflow-y: auto;
    padding: 12px 14px;
}

.sim-log:empty { display: none; }

/* ---------- Reports ---------- */

.report-grid { display: grid; gap: 16px; grid-template-columns: 2fr 1fr; }

.stat-big { font-size: 30px; font-weight: 800; }
.stat-sub { color: var(--muted); font-size: 12.5px; }

/* ---------- Inventory ---------- */

tr.row-low td { background: #fffcf5; }

.qty-stepper {
    align-items: center;
    display: inline-flex;
    gap: 7px;
}

.qty-stepper button {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    height: 24px;
    line-height: 1;
    width: 24px;
}

.qty-stepper button:hover { border-color: var(--teal); color: var(--teal-dark); }

.field-input.mtx { max-width: 110px; padding: 5px 9px; }

.ghost-btn-sm {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 7px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
}

.ghost-btn-sm:hover { border-color: var(--teal); color: var(--teal-dark); }
.ghost-btn-sm.danger:hover { border-color: var(--fail); color: var(--fail); }
.ghost-btn-sm svg { height: 13px; vertical-align: -2px; width: 13px; }

/* ---------- Team ---------- */

.member-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: 10px;
    padding: 13px 15px;
}

.member-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.member-row .field-select { padding: 6px 9px; }

.perm-details { margin-top: 10px; }
.perm-details summary { color: var(--teal-dark); cursor: pointer; font-size: 12.5px; font-weight: 700; }

.perm-grid {
    display: grid;
    gap: 7px;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    margin-top: 10px;
}

.perm-chip {
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 7px;
    display: flex;
    font-size: 12.5px;
    font-weight: 650;
    gap: 7px;
    padding: 7px 10px;
    text-transform: capitalize;
}

/* ---------- Notification bell ---------- */

.notif-wrap { position: relative; }

.notif-btn {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    height: 34px;
    justify-content: center;
    position: relative;
    width: 34px;
}

.notif-btn:hover { border-color: var(--teal); color: var(--teal-dark); }
.notif-btn .nav-ico svg { height: 17px; width: 17px; }

.topbar .notif-btn.topbar-tool {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #c9deda;
    height: auto;
    min-height: 38px;
    padding: 7px 8px;
    width: auto;
}
.topbar .notif-btn.topbar-tool:hover { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .1); color: #fff; }

.notif-badge {
    background: var(--red);
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    position: absolute;
    right: -4px;
    top: -4px;
}

.notif-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    color: var(--ink);
    max-height: 420px;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 42px;
    width: min(360px, 90vw);
    z-index: 70;
}

.notif-head { border-bottom: 1px solid var(--line); font-size: 13.5px; padding: 11px 14px; }

.notif-item {
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 10px;
    padding: 11px 14px;
    text-decoration: none;
}

.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--paper); }
.notif-item.is-new { background: #f2fbf9; }
.notif-text { font-size: 13px; line-height: 1.4; }
.notif-text small { color: var(--muted); display: block; font-size: 11.5px; margin-top: 2px; }
.notif-empty { color: var(--muted); font-size: 13px; padding: 22px 16px; text-align: center; }

/* ---------- Onboarding checklist ---------- */

.onboard {
    background: linear-gradient(135deg, #f0fdfa, #fff);
    border: 1px solid #99e0d6;
    margin-bottom: 18px;
}

.onboard .steps-grid { display: grid; gap: 8px; margin-top: 4px; }

.onboard-step {
    align-items: center;
    border-radius: var(--radius);
    display: flex;
    font-size: 13.5px;
    font-weight: 650;
    gap: 9px;
    padding: 8px 10px;
    text-decoration: none;
}

.onboard-step:hover { background: rgba(15, 118, 110, 0.06); }
.onboard-step.done { color: var(--muted); text-decoration: line-through; }
.onboard-step .go { color: var(--teal-dark); font-weight: 750; margin-left: auto; text-decoration: none; }

/* ---------- Photo attach + wrap-up ---------- */

.photo-attach img {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: block;
    max-height: 160px;
    max-width: 100%;
}

.wrap-check .wrap-row {
    align-items: center;
    display: flex;
    font-size: 14px;
    font-weight: 650;
    gap: 8px;
    padding: 6px 0;
}

/* ---------- Settings: color swatches ---------- */

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }

.swatch input { display: none; }

.swatch span {
    background: var(--c);
    border: 3px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    display: block;
    height: 28px;
    transition: transform 0.1s ease;
    width: 28px;
}

.swatch input:checked + span {
    border-color: var(--ink);
    transform: scale(1.12);
}

/* ---------- My Day ---------- */

.day-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    display: flex;
    gap: 14px;
    margin-bottom: 12px;
    padding: 15px 17px;
}

.day-time { min-width: 74px; text-align: right; }
.day-time strong { display: block; font-size: 16px; }
.day-time span { color: var(--muted); font-size: 12px; }

.day-body { flex: 1; min-width: 0; }
.day-top { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; font-size: 15px; }
.day-concern { font-size: 13.5px; margin-top: 6px; }
.day-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.day-body .cell-sub a { color: var(--teal-dark); font-weight: 650; text-decoration: none; }
.day-body .cell-sub svg { height: 13px; vertical-align: -2px; width: 13px; }

/* ---------- Mobile bottom tab bar ---------- */

.tabbar { display: none; }

@media (max-width: 700px) {
    .tabbar {
        background: var(--panel);
        border-top: 1px solid var(--line);
        bottom: 0;
        display: grid;
        grid-auto-columns: 1fr;
        grid-auto-flow: column;
        left: 0;
        padding-bottom: env(safe-area-inset-bottom, 0);
        position: fixed;
        right: 0;
        z-index: 30;
    }

    .tabbar a {
        align-items: center;
        color: var(--muted);
        display: flex;
        flex-direction: column;
        font-size: 10.5px;
        font-weight: 700;
        gap: 3px;
        padding: 8px 2px 7px;
        text-decoration: none;
    }

    .tabbar a.active { color: var(--teal-dark); }
    .tabbar .nav-ico svg { height: 20px; width: 20px; }

    #view { padding-bottom: 76px; }
}

/* ---------- Customer portal (public share pages) ---------- */

body.portal {
    background:
        radial-gradient(500px 320px at 15% 0%, rgba(20, 184, 166, 0.16), transparent 70%),
        var(--paper);
    display: block;
    font-family: var(--font);
    height: auto;
    min-height: 100vh;
    overflow: auto;
}

.portal-main { margin: 0 auto; max-width: 680px; padding: 26px 14px 30px; }

.portal-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-2);
    padding: clamp(18px, 4vw, 30px);
}

.portal-head {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 16px;
}

.portal-head img { height: 40px; width: 40px; }
.portal-head strong { display: block; font-size: 17px; }
.portal-head span { color: var(--muted); font-size: 13px; }

.portal-lines { display: grid; gap: 9px; }

.portal-line {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 12px 14px;
}

.portal-line.is-declined { opacity: 0.55; }
.portal-line.is-declined .pl-info strong { text-decoration: line-through; }
.pl-info { flex: 1; min-width: 0; }
.pl-info strong { display: block; font-size: 14.5px; }
.pl-info small { color: var(--muted); display: block; font-size: 12.5px; }
.pl-right { align-items: center; display: flex; flex-direction: column; gap: 7px; }
.pl-price { font-size: 15px; font-weight: 800; }

.pl-toggle { display: inline-flex; gap: 5px; }

.pl-toggle button {
    background: var(--panel);
    border: 1.5px solid var(--line);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    min-width: 52px;
    padding: 7px 0;
}

.pl-toggle button.on-yes { background: var(--pass-bg); border-color: var(--pass); color: var(--pass); }
.pl-toggle button.on-no { background: var(--fail-bg); border-color: var(--fail); color: var(--fail); }

.sig-block { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 18px; }
.sig-label { display: block; font-size: 13px; font-weight: 750; margin-bottom: 8px; }

#sig-pad {
    background: #fff;
    border: 1.5px dashed var(--faint);
    border-radius: var(--radius);
    display: block;
    touch-action: none;
    width: 100%;
}

.sig-actions { display: flex; justify-content: flex-end; margin-top: 8px; }

#portal-submit { margin-top: 6px; }

.portal-photo {
    border: 1px solid var(--line);
    border-radius: 8px;
    display: block;
    margin-top: 8px;
    max-width: 220px;
    width: 100%;
}

.portal-foot { color: var(--faint); font-size: 12.5px; padding: 6px 14px 26px; text-align: center; }
.portal-foot strong { color: var(--muted); }

@media print {
    body.portal { background: #fff; }
    .portal-main { max-width: none; padding: 0; }
    .portal-card { border: none; box-shadow: none; padding: 0; }
    .no-print, .pl-toggle, .sig-block, #pay-btn, #pay-note, .portal-foot { display: none !important; }
    .portal-line, .insp-item { break-inside: avoid; }
    .portal-photo { max-width: 180px; }
}

/* ---------- Cloud app: auth gate + sync ---------- */

.auth-gate {
    align-items: center;
    background:
        radial-gradient(600px 400px at 20% 10%, rgba(20, 184, 166, 0.25), transparent 70%),
        radial-gradient(500px 360px at 85% 85%, rgba(245, 158, 11, 0.12), transparent 70%),
        linear-gradient(150deg, #0b3b37, #06332f);
    display: flex;
    inset: 0;
    justify-content: center;
    overflow-y: auto;
    padding: 24px;
    position: fixed;
    z-index: 200;
}

.auth-card {
    background: var(--panel);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
    max-width: 430px;
    padding: 30px;
    width: 100%;
}

.auth-brand {
    align-items: center;
    display: flex;
    font-size: 17px;
    gap: 10px;
    margin-bottom: 20px;
}

.auth-brand img { height: 30px; width: 30px; }
.auth-brand strong { font-weight: 800; }

.auth-card h1 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.auth-sub { color: var(--muted); font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.auth-sub code { background: var(--paper); border-radius: 5px; padding: 1px 6px; }

.auth-error {
    background: var(--fail-bg);
    border-radius: var(--radius);
    color: var(--fail);
    font-size: 13px;
    font-weight: 650;
    margin-bottom: 12px;
    padding: 9px 12px;
}

.auth-alt { color: var(--muted); font-size: 13.5px; margin: 14px 0 0; }
.auth-fine { border-top: 1px solid var(--line); color: var(--muted); font-size: 12.5px; margin: 16px 0 0; padding-top: 12px; }
.auth-fine a { color: var(--teal-dark); font-weight: 700; }

.linklike {
    background: none;
    border: none;
    color: var(--teal-dark);
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    font-weight: 750;
    padding: 0;
    text-decoration: underline;
}

.auth-choices { display: grid; gap: 10px; }

.auth-choice {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    font-family: inherit;
    padding: 14px 16px;
    text-align: left;
}

.auth-choice:hover { border-color: var(--teal); }
.auth-choice strong { display: block; font-size: 14.5px; margin-bottom: 3px; }
.auth-choice span { color: var(--muted); display: block; font-size: 12.5px; line-height: 1.5; }

.cloud-badge { background: var(--teal-soft); border-color: #99e0d6; color: var(--teal-dark); }

.sync-state { color: var(--muted); font-size: 12px; font-weight: 700; white-space: nowrap; }

/* ---------- Responsive ---------- */

/* Wide and ultra-wide office monitors: use the room. */
@media (min-width: 1700px) {
    :root { --view-pad-y: 26px; }
    #view { padding: 26px 42px 48px; }
    body.app { font-size: 14.5px; }
    .wo-board { gap: 14px; grid-auto-columns: minmax(270px, 1fr); }
    .wo-card strong { font-size: 14px; }
    .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .msg-layout { grid-template-columns: 340px 1fr; }
    .bubble { max-width: 56%; }
}

@media (max-width: 1399px) {
    #recent-jobs-toggle .topbar-tool-label,
    #active-clocks-toggle .topbar-tool-label { display: none; }
    #recent-jobs-toggle,
    #active-clocks-toggle { justify-content: center; padding-inline: 7px; width: 38px; }
    .topbar-tool .topbar-count { position: absolute; right: -4px; top: -4px; }
}

@media (max-width: 1240px) {
    .workspace-control, .account-label, .search-shortcut { display: none; }
    #topbar-messages .topbar-tool-label,
    .topbar .notif-btn.topbar-tool .topbar-tool-label { display: none; }
    #topbar-messages,
    .topbar .notif-btn.topbar-tool { justify-content: center; padding-inline: 7px; width: 38px; }
    #global-search { padding-right: 12px; }
    .account-trigger { padding-right: 4px; }
}

@media (max-width: 1180px) {
    .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .report-grid, .cust-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
    :root { --sidebar-w: 56px; --view-pad-y: 14px; }
    body.app { grid-template-columns: var(--sidebar-w) 1fr; }
    .brand-text, .nav-label, .sidebar-foot .nav-label, .nav-badge, .nav-section-title { display: none; }
    .sidebar-brand { justify-content: center; padding: 0; }
    #app-nav a, .sidebar-foot a { justify-content: center; padding: 10px 0; }
    #app-nav { gap: 6px; padding: 9px 5px; }
    .nav-section { border-top: 1px solid rgba(255, 255, 255, .07); gap: 1px; padding-top: 5px; }
    .surface-switcher { display: block; padding: 3px; }
    .surface-switch.is-active { display: none; }
    .surface-switch { min-height: 38px; padding: 8px 0; }
    .demo-badge { display: none; }
    .msg-layout { grid-template-columns: 1fr; }
    .thread-list { display: none; }
    .msg-layout.show-list .thread-list { display: block; }
    .msg-layout.show-list .convo { display: none; }
    .msg-mobile-back {
        background: none;
        border: none;
        color: var(--teal-dark);
        cursor: pointer;
        display: inline-flex;
        flex: 0 0 100%;
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 750;
        padding: 2px 0;
        text-align: left;
    }
    .convo-head { flex-wrap: wrap; }
    .grid-2, .grid-3, .inspection-layout { grid-template-columns: 1fr; }
    #view { padding: 14px 12px 30px; }
    .head-search { width: 100%; }
}

@media (max-width: 560px) {
    .grid-4 { grid-template-columns: 1fr; }
    .form-row, .form-row-3 { grid-template-columns: 1fr; }
}

/* ---------- Employee app (Tekmetric-style mobile experience) ---------- */

body.emp-mode { grid-template-columns: 1fr; }
body.emp-mode .sidebar, body.emp-mode .topbar, body.emp-mode .tabbar { display: none; }
body.emp-mode #view { background: #e9edf1; padding: 0 !important; }

/* Dedicated Field App shell. It keeps field routes out of the office chrome
   while the employee route continues to use the full mobile job layout. */
body.field-surface { grid-template-columns: 1fr; }
body.field-surface .sidebar, body.field-surface .topbar { display: none; }
body.field-surface .app-body { min-height: 100vh; }
body.field-surface:not(.emp-mode) #view {
    background: #e9edf1;
    margin: 0 auto;
    max-width: 720px;
    min-height: 100%;
    padding: calc(16px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) calc(88px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

.field-tabbar { display: none; }
body.field-surface .field-tabbar {
    align-items: stretch;
    background: var(--sidebar-bg);
    bottom: 0;
    box-shadow: 0 -4px 18px rgba(11, 59, 55, 0.18);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    left: 0;
    padding: 5px max(8px, env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
    position: fixed;
    right: 0;
    z-index: 35;
}
body.field-surface .field-tabbar a {
    align-items: center;
    border-radius: 9px;
    color: #b8cdc8;
    display: flex;
    flex-direction: column;
    font-size: 10px;
    font-weight: 750;
    gap: 3px;
    justify-content: center;
    min-height: 48px;
    text-decoration: none;
}
body.field-surface .field-tabbar a.active { background: rgba(255,255,255,.12); color: #fff; }
body.field-surface .field-tabbar svg { height: 18px; width: 18px; }

.emp {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 640px;
    min-height: 100%;
    padding-bottom: 96px;
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    position: relative;
}

.emp-head {
    align-items: center;
    background: var(--sidebar-bg);
    display: flex;
    gap: 8px;
    padding: calc(10px + env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 10px max(10px, env(safe-area-inset-left));
    position: sticky;
    top: 0;
    z-index: 20;
}

.emp-iconbtn {
    align-items: center;
    background: none;
    border: none;
    border-radius: 9px;
    color: #d9e7e3;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 19px;
    height: 40px;
    justify-content: center;
    position: relative;
    text-decoration: none;
    width: 40px;
}

.emp-iconbtn:hover { background: rgba(255, 255, 255, 0.09); color: #fff; }
.emp-iconbtn svg { height: 21px; width: 21px; }

.emp-dot {
    background: var(--red);
    border: 2px solid var(--sidebar-bg);
    border-radius: 50%;
    height: 11px;
    position: absolute;
    right: 6px;
    top: 6px;
    width: 11px;
}

.emp-dot.ok { background: #22c55e; }
.emp-dot.off { background: var(--red); }

.emp-seg {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 11px;
    display: flex;
    flex: 1;
    gap: 3px;
    padding: 3px;
}

.emp-seg button {
    background: none;
    border: none;
    border-radius: 8px;
    color: #cfe0dc;
    cursor: pointer;
    flex: 1;
    font-family: inherit;
    font-size: 14px;
    font-weight: 750;
    padding: 9px 4px;
    white-space: nowrap;
}

.emp-seg button.active { background: #2563eb; color: #fff; }
.emp-seg button b { font-weight: 800; opacity: 0.85; }

.emp-head-title { flex: 1; min-width: 0; text-align: center; }
.emp-head-title strong { color: #fff; display: block; font-size: 15.5px; }
.emp-head-title small { color: #9fbcb6; display: block; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.emp-stagebar {
    background: var(--sidebar-bg);
    display: flex;
    padding: 0 6px;
    position: sticky;
    top: 60px;
    z-index: 19;
}

.emp-stagebar button {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: #9fbcb6;
    cursor: pointer;
    flex: 1;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 750;
    padding: 10px 4px 11px;
    white-space: nowrap;
}

.emp-stagebar button.active { border-bottom-color: #fff; color: #fff; }

.emp-stagebar button b {
    background: rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    margin-left: 3px;
    padding: 2px 7px;
}

.emp-stagebar button.active b { background: #fff; color: var(--sidebar-bg); }

.emp-toolbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 8px;
    padding: 10px 12px;
}

.emp-toolbar input[type="search"] {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    flex: 1;
    font-family: inherit;
    font-size: 14px;
    min-width: 0;
    padding: 9px 14px;
}

.emp-toolbar select {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    max-width: 110px;
    padding: 8px 10px;
}

.emp-list { display: flex; flex-direction: column; gap: 11px; padding: 13px 12px; }

.emp-card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: var(--shadow-1);
    color: inherit;
    cursor: pointer;
    display: block;
    padding: 13px 14px;
    text-decoration: none;
}

.emp-card:active { transform: scale(0.995); }

.emp-card-top { align-items: baseline; display: flex; gap: 10px; justify-content: space-between; }
.emp-card-top strong { font-size: 15.5px; }
.emp-card-num { color: var(--teal-dark); font-size: 13px; font-weight: 800; white-space: nowrap; }

.emp-card-sub { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; gap: 5px; font-size: 12.5px; margin-top: 4px; }
.emp-card-sub svg { height: 13px; width: 13px; }
.emp-card-sub a { color: var(--teal-dark); font-weight: 650; text-decoration: none; }

.emp-card-concern { font-size: 13.5px; line-height: 1.45; margin-top: 7px; }

.emp-card-foot { align-items: center; display: flex; gap: 8px; justify-content: space-between; margin-top: 10px; }
.emp-card-right { align-items: center; display: flex; gap: 5px; }

.emp-sect {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    margin-top: 6px;
    padding: 2px 2px 0;
    text-transform: uppercase;
}

.emp-mywork-head {
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 11px;
    padding: 13px 14px;
}

.emp-mywork-head strong { font-size: 15.5px; }

.emp-fab {
    align-items: center;
    background: var(--teal);
    border: none;
    border-radius: 50%;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 10px 26px rgba(15, 118, 110, 0.45);
    color: #fff;
    cursor: pointer;
    display: flex;
    height: 58px;
    justify-content: center;
    position: fixed;
    right: max(16px, calc(50vw - 320px + 16px));
    width: 58px;
    z-index: 25;
}

.emp-fab svg { height: 26px; width: 26px; }
.emp-fab:hover { background: var(--teal-dark); }

.emp-body { display: flex; flex-direction: column; gap: 11px; padding: 13px 12px; }

.emp-statusrow { align-items: center; display: flex; flex-wrap: wrap; gap: 7px; }

.emp-advance {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    color: var(--teal-dark);
    cursor: pointer;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 750;
    padding: 6px 12px;
}

.emp-advance:hover { border-color: var(--teal); }

.emp-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 13px;
    box-shadow: var(--shadow-1);
    padding: 13px 14px;
}

.emp-panel-head {
    align-items: center;
    display: flex;
    font-size: 14.5px;
    font-weight: 800;
    justify-content: space-between;
    margin-bottom: 9px;
}

.emp-row { align-items: center; cursor: default; display: flex; gap: 10px; padding: 6px 0; }
.emp-row[data-action] { cursor: pointer; }
.emp-row svg { color: var(--faint); flex: 0 0 auto; height: 16px; width: 16px; }
.emp-row-main { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.emp-row-main small { color: var(--muted); font-size: 12.5px; }
.emp-row-main small a { color: var(--teal-dark); font-weight: 650; text-decoration: none; }

.emp-warn {
    align-items: center;
    background: var(--attn-bg);
    border-radius: 9px;
    color: #92400e;
    display: flex;
    font-size: 12.5px;
    font-weight: 650;
    gap: 7px;
    margin-top: 9px;
    padding: 8px 11px;
}

.emp-warn svg { flex: 0 0 auto; height: 15px; width: 15px; }
.emp-warn a { color: inherit; }

.emp-concern {
    border: 1px solid var(--line);
    border-left: 3px solid var(--st-scheduled);
    border-radius: 9px;
    font-size: 13.5px;
    line-height: 1.5;
    margin-top: 8px;
    padding: 9px 30px 9px 11px;
    position: relative;
}

.emp-concern .x-btn { position: absolute; right: 4px; top: 6px; }

.emp-concern-tag {
    background: var(--st-scheduled-bg);
    border-radius: 5px;
    color: var(--st-scheduled);
    display: inline-block;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 0 7px 2px 0;
    padding: 2px 7px;
    text-transform: uppercase;
}

.emp-concern-tag.tech { background: var(--teal-soft); color: var(--teal-dark); }
.emp-concern:has(.emp-concern-tag.tech) { border-left-color: var(--teal); }

.emp-clocktime {
    font-size: 27px;
    font-variant-numeric: tabular-nums;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.emp-clocktime.big { font-size: 36px; margin: 6px 0 2px; }

.emp-clockpanel small { align-items: center; display: inline-flex; gap: 6px; }

.btn.go { background: #16a34a; }
.btn.go:hover { background: #15803d; }

.emp-line { align-items: center; border-top: 1px solid var(--paper); display: flex; gap: 10px; padding: 9px 0; }
.emp-line:first-of-type { border-top: none; }
.emp-line.declined { opacity: 0.55; }
.emp-line.declined strong { text-decoration: line-through; }
.emp-line-main { display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; }
.emp-line-main strong { font-size: 13.5px; }
.emp-line-main small { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px; font-size: 11.5px; }
.emp-line-price { font-size: 13.5px; white-space: nowrap; }

.emp-check {
    align-items: center;
    background: #fff;
    border: 2px solid var(--line);
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 26px;
    font-size: 15px;
    font-weight: 900;
    height: 26px;
    justify-content: center;
    width: 26px;
}

.emp-check.on { background: var(--teal); border-color: var(--teal); }
.emp-check.ghost { border-color: transparent; cursor: default; }

.emp-techchip {
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    display: inline-flex;
    font-size: 12.5px;
    font-weight: 700;
    gap: 6px;
    padding: 4px 11px 4px 5px;
}

.emp-addgrid { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }

.emp-addopt {
    background: var(--paper);
    border: 1.5px solid var(--line);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    gap: 3px;
    padding: 14px 13px;
    text-align: left;
}

.emp-addopt:hover { background: #fff; border-color: var(--teal); }
.emp-addopt svg { color: var(--teal-dark); height: 21px; margin-bottom: 4px; width: 21px; }
.emp-addopt strong { font-size: 13.5px; }
.emp-addopt small { color: var(--muted); font-size: 11.5px; line-height: 1.4; }

.emp-menu { display: flex; flex-direction: column; gap: 4px; }

.emp-menu-co { border-bottom: 1px solid var(--line); margin-bottom: 8px; padding-bottom: 12px; }
.emp-menu-co strong { display: block; font-size: 15.5px; }
.emp-menu-co small { color: var(--muted); font-size: 12.5px; }

.emp-menu-link {
    align-items: center;
    border-radius: 9px;
    color: var(--ink);
    display: flex;
    font-size: 14px;
    font-weight: 650;
    gap: 11px;
    padding: 11px 10px;
    text-decoration: none;
}

.emp-menu-link:hover { background: var(--paper); }
.emp-menu-link svg { color: var(--teal-dark); height: 18px; width: 18px; }

.emp-assign { display: flex; flex-direction: column; gap: 6px; }

.emp-assign-row {
    align-items: center;
    border: 1.5px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    display: flex;
    gap: 10px;
    padding: 10px 12px;
}

.emp-assign-row:has(input:checked) { background: var(--teal-soft); border-color: var(--teal); }
.emp-assign-row input { accent-color: var(--teal); height: 17px; width: 17px; }
.emp-assign-row span { flex: 1; font-size: 14px; font-weight: 650; }
.emp-assign-row small { color: var(--muted); }

/* Per-labor-line timers */

.emp-linetimer {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 750;
    gap: 7px;
    margin-top: 5px;
}

.emp-linetimer .run { color: #15803d; }
.emp-linetimer-est { color: var(--faint); font-weight: 600; }

.emp-linetimer-btn {
    align-items: center;
    background: #16a34a;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 10px;
    height: 24px;
    justify-content: center;
    width: 24px;
}

.emp-linetimer-btn.run { background: var(--red); }

/* Job photos */

.emp-photogrid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); }

.emp-photo {
    aspect-ratio: 1;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
}

.emp-photo img { display: block; height: 100%; object-fit: cover; width: 100%; }

.wo-photostrip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wo-photostrip .emp-photo { aspect-ratio: auto; height: 64px; width: 64px; }

/* Team permissions sheet (employee app) */

.emp-permcard { border: 1.5px solid var(--line); border-radius: 11px; margin-bottom: 8px; }
.emp-permcard summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: 9px;
    justify-content: space-between;
    list-style: none;
    padding: 12px 13px;
}
.emp-permcard summary::-webkit-details-marker { display: none; }
.emp-permcard[open] summary { border-bottom: 1px solid var(--line); }

.emp-permgrid { display: grid; gap: 2px; grid-template-columns: 1fr 1fr; padding: 10px 13px 12px; }

.emp-permrow {
    align-items: center;
    border-radius: 7px;
    cursor: pointer;
    display: flex;
    font-size: 12.5px;
    font-weight: 650;
    gap: 8px;
    padding: 6px 6px;
    text-transform: capitalize;
}

.emp-permrow:hover { background: var(--paper); }
.emp-permrow input { accent-color: var(--teal); flex: 0 0 auto; height: 16px; width: 16px; }

button.emp-menu-link { background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; width: 100%; }

@media (max-width: 700px) {
    .drawer { max-width: none; width: 100vw; }
    body.emp-mode #view { padding-bottom: 0 !important; }
    .emp-permgrid { grid-template-columns: 1fr; }
}

/* Final phone rules intentionally live last so older tablet rules cannot
   reintroduce the compact desktop rail or cover content with the dock. */
@media (max-width: 700px) {
    :root { --sidebar-w: 0px; --topbar-h: calc(58px + env(safe-area-inset-top)); --view-pad-y: 16px; }
    body.app:not(.emp-mode):not(.field-surface) { grid-template-columns: minmax(0, 1fr); }
    body.app:not(.emp-mode):not(.field-surface) .sidebar { display: none; }

    body.app:not(.emp-mode):not(.field-surface) .topbar {
        flex: 0 0 calc(58px + env(safe-area-inset-top));
        gap: 8px;
        min-height: calc(58px + env(safe-area-inset-top));
        padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
    }

    .mobile-brand {
        align-items: center;
        display: inline-flex;
        flex: 0 0 34px;
        height: 34px;
        justify-content: center;
    }
    .mobile-brand img { height: 28px; width: 28px; }
    .search-wrap { flex: 1 1 auto; min-width: 0; }
    .search-ico { display: none; }
    .search-pop { left: 0; top: 43px; }
    #global-search { min-width: 0; padding-inline: 10px; }
    .topbar-right { flex: 0 0 auto; gap: 5px; }
    .cloud-badge, .sync-state, .demo-badge, #reset-demo, #sign-out { display: none !important; }
    #quick-create-toggle, #recent-jobs-toggle, #active-clocks-toggle, #topbar-messages, .account-popover { display: none; }
    .topbar .notif-btn.topbar-tool { height: 40px; min-height: 40px; width: 40px; }
    .notif-panel { max-width: calc(100vw - 20px); position: fixed; right: 10px; top: calc(52px + env(safe-area-inset-top)); width: 340px; }

    body.app:not(.emp-mode):not(.field-surface) #view {
        padding: 16px max(12px, env(safe-area-inset-right)) calc(var(--mobile-nav-h) + 18px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
    }

    .page-head { align-items: stretch; gap: 11px; margin-bottom: 16px; }
    .page-head > div:first-child { min-width: 0; }
    .page-head h1 { font-size: 20px; }
    .page-actions {
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 2px;
        scrollbar-width: none;
        width: 100%;
    }
    .page-actions::-webkit-scrollbar { display: none; }
    .page-actions > * { flex: 0 0 auto; }
    .page-actions .head-search { flex: 1 0 100%; width: 100%; }
    .workorders-page-head { display: grid; }
    .workorders-actions {
        display: grid;
        gap: 8px;
        grid-template-columns: minmax(84px, 1fr) auto auto;
        overflow: visible;
    }
    .workorders-actions .head-search { grid-column: 1 / -1; min-height: 44px; }
    .workorders-actions .head-select,
    .workorders-actions .seg,
    .workorders-actions .btn { min-height: 44px; }
    .workorders-actions .seg button { min-height: 44px; }
    .card, .cust-grid > *, .report-grid > *, .grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
    .card-head, .eq-top { flex-wrap: wrap; }
    .card-body { padding: 14px; }
    .toolbar { align-items: stretch; }
    .toolbar > * { min-width: 0; }

    #global-search,
    .field-input,
    .field-select,
    .field-textarea,
    .head-search,
    .head-select,
    .toolbar input,
    .toolbar select { font-size: 16px; }

    .tabbar {
        box-shadow: 0 -4px 18px rgba(11, 59, 55, 0.1);
        min-height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom));
        padding: 4px max(4px, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(4px, env(safe-area-inset-left));
        z-index: 40;
    }
    .tabbar :is(a, button) {
        align-items: center;
        background: none;
        border: 0;
        border-radius: 9px;
        color: var(--muted);
        display: flex;
        flex-direction: column;
        font-family: inherit;
        font-size: 10px;
        font-weight: 750;
        gap: 3px;
        justify-content: center;
        min-height: 58px;
        padding: 6px 2px;
        text-decoration: none;
    }
    .tabbar :is(a.active, button.active) { background: #f0fdfa; color: var(--teal-dark); }
    .tabbar .nav-ico svg { height: 20px; width: 20px; }
    .mobile-more-btn { cursor: pointer; }
    .mobile-more-links { display: grid; gap: 5px; }
    .mobile-more-links a {
        align-items: center;
        border-radius: 10px;
        display: flex;
        font-size: 14px;
        font-weight: 700;
        gap: 12px;
        min-height: 48px;
        padding: 9px 10px;
        text-decoration: none;
    }
    .mobile-more-links a:hover { background: var(--paper); }
    .mobile-more-links .nav-ico { color: var(--teal-dark); }
    .mobile-more-links .nav-ico svg { height: 19px; width: 19px; }
    .mobile-more-account { border-top: 1px solid var(--line); display: grid; gap: 5px; margin-top: 14px; padding-top: 14px; }
    .mobile-more-account > span { color: var(--muted); font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; padding: 0 10px 4px; text-transform: uppercase; }
    .mobile-more-account button {
        align-items: center;
        background: none;
        border: 0;
        border-radius: 10px;
        color: var(--ink);
        cursor: pointer;
        display: flex;
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
        gap: 12px;
        min-height: 48px;
        padding: 9px 10px;
        text-align: left;
        width: 100%;
    }
    .mobile-more-account button:hover { background: var(--paper); }
    .mobile-more-account button svg { color: var(--teal-dark); height: 19px; width: 19px; }

    .drawer { border-left: 0; max-width: none; width: 100vw; }
    .drawer-head {
        padding: calc(14px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 14px max(18px, env(safe-area-inset-left));
    }
    .drawer-body {
        padding: 16px max(18px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    }
    .overlay { align-items: flex-end; padding: 0; }
    .modal { border-radius: 16px 16px 0 0; max-height: 92dvh; }
    .modal-head { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
    .modal-body { padding: 16px max(16px, env(safe-area-inset-right)) 16px max(16px, env(safe-area-inset-left)); }
    .modal-foot {
        flex-wrap: wrap;
        padding: 13px max(18px, env(safe-area-inset-right)) calc(13px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
    }
    .modal-foot > .btn { flex: 1; justify-content: center; }

    .wo-page-head h1 { gap: 6px; }
    .wo-page-head .sub { gap: 4px; }
    .wo-page-head .sub span:last-child { flex-basis: 100%; }
    .wo-stage-layout { grid-template-columns: minmax(0, 1fr); }
    .wo-command-frame {
        border-bottom: 0;
        margin-top: 0;
        padding: 0;
        position: static;
    }
    .wo-command-main { align-items: stretch; display: grid; }
    .wo-command-main .page-actions { justify-content: flex-start; overflow-x: auto; }
    .wo-command-secondary-actions .btn.small { min-height: 44px; }
    .wo-command-facts {
        display: flex;
        margin-top: 2px;
        overflow-x: auto;
        padding-bottom: 3px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .wo-command-facts::-webkit-scrollbar { display: none; }
    .wo-command-fact { flex: 0 0 152px; scroll-snap-align: start; }
    .wo-command-fact.warning { order: -1; }
    .wo-stage-card { overflow: hidden; }
    .wo-stage-card { position: relative; }
    .wo-stage-card::before,
    .wo-stage-card::after {
        align-items: center;
        color: var(--teal-dark);
        display: none;
        font-size: 26px;
        font-weight: 850;
        height: 49px;
        pointer-events: none;
        position: absolute;
        top: 0;
        width: 34px;
        z-index: 2;
    }
    .wo-stage-card.has-stage-prev::before {
        background: linear-gradient(90deg, #fff 48%, rgba(255, 255, 255, 0));
        content: "‹";
        display: flex;
        justify-content: flex-start;
        left: 0;
        padding-left: 7px;
    }
    .wo-stage-card.has-stage-next::after {
        background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 48%);
        content: "›";
        display: flex;
        justify-content: flex-end;
        padding-right: 7px;
        right: 0;
    }
    .wo-stage-tabs {
        -webkit-overflow-scrolling: touch;
        padding-inline: 5px;
        scrollbar-width: none;
    }
    .wo-stage-tabs::-webkit-scrollbar { display: none; }
    .wo-stage-tabs button { font-size: 12.5px; min-height: 50px; padding-inline: 11px; }
    .wo-summary-grid { grid-template-columns: minmax(0, 1fr); }
    .wo-section-head, .wo-stage-toolbar { align-items: flex-start; flex-wrap: wrap; }
    .wo-note-form { grid-template-columns: minmax(0, 1fr); }
    .wo-note-form .btn { justify-content: center; }
    .wo-finding-list > div { flex-direction: column; }
    .wo-inspection-card > header { align-items: flex-start; }
    .wo-inspection-card > footer > * { flex: 1; justify-content: center; }
    .wo-inspection-row { align-items: flex-start; }
    .wo-inspection-row > div { align-items: flex-start; }
    .wo-inspection-row small { padding-left: 0; }
    .wo-inspection-row img { height: 60px; width: 72px; }
    .wo-progress-overview { align-items: center; }
    .wo-work-row { align-items: flex-start; }
    .wo-work-row > strong { align-self: center; }
    .wo-payment-hero { align-items: stretch; flex-direction: column; }
    .wo-payment-hero .btn { justify-content: center; }
    .wo-payment-list > div { grid-template-columns: minmax(0, 1fr) auto; }
    .wo-payment-list > div > strong:last-child { grid-column: 2; grid-row: 1; }
    .wo-payment-list > div > .pill { grid-column: 1; justify-self: start; }

    .wo-line-table { display: none; }
    .wo-line-cards { display: grid; }
    .wo-line-card { display: grid; gap: 10px; padding: 14px; }
    .wo-line-card + .wo-line-card { border-top: 1px solid var(--line); }
    .wo-line-card.declined { opacity: 0.55; }
    .wo-line-card-head { align-items: flex-start; display: flex; gap: 12px; justify-content: space-between; }
    .wo-line-card-head > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
    .wo-line-card-head small { color: var(--muted); font-size: 12px; }
    .wo-line-card-price { white-space: nowrap; }
    .wo-line-card-meta { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 7px; }
    .wo-line-card-actions { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
    .wo-line-card-actions .line-approval { flex-wrap: wrap; }
    .wo-line-card-tools { align-items: center; display: flex; gap: 4px; }
    .wo-estimate-actions { align-items: stretch; display: grid; grid-template-columns: minmax(0, 1fr); }
    .wo-estimate-actions .btn { justify-content: center; }
    .wo-financial-actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
    .wo-financial-actions .btn { justify-content: center; }
    .wo-adjustment-list > div { grid-template-columns: minmax(0, 1fr) auto; }
    .wo-adjustment-list .x-btn { grid-column: 2; grid-row: 2; justify-self: end; }
    .wo-correction-list > div { align-items: start; grid-template-columns: auto minmax(0, 1fr); }
    .wo-correction-list > div > strong { grid-column: 2; }
    .totals-box { max-width: none; }

    .wo-context { grid-template-columns: minmax(0, 1fr); position: static; }
    .wo-context-actions .btn { min-width: 0; }
    .wo-command-shell { padding-bottom: 76px; }
    .wo-stage-layout { margin-bottom: 0; min-height: 0; }
    .wo-stage-layout[data-rail-collapsed="true"] { grid-template-columns: minmax(0, 1fr); }
    .wo-mobile-context-trigger {
        align-items: center;
        background: #0b3532;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 11px;
        box-shadow: 0 8px 20px rgba(8, 39, 36, .18);
        color: #fff;
        display: grid;
        gap: 9px;
        grid-template-columns: 18px minmax(0, 1fr) auto;
        margin: 8px 0 10px;
        min-height: 52px;
        padding: 8px 11px;
        position: sticky;
        text-align: left;
        top: calc(var(--topbar-h) + 6px);
        width: 100%;
        z-index: 18;
    }
    .wo-mobile-context-trigger > svg { color: #7ddbd0; height: 17px; width: 17px; }
    .wo-mobile-context-trigger > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
    .wo-mobile-context-trigger strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wo-mobile-context-trigger small { color: #b8cdc8; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .wo-stage-card { overflow: visible; }
    .wo-stage-tabs { position: sticky; top: calc(var(--topbar-h) + 66px); z-index: 17; }
    .wo-command-rail {
        background: var(--panel);
        border-color: var(--line);
        box-shadow: var(--shadow-1);
        color: var(--ink);
        display: none;
        max-height: none;
        order: 2;
        padding: 10px;
        position: static;
    }
    .wo-command-rail-card,
    .wo-command-rail-section { background: #f8faf9; border-color: var(--line); }
    .wo-command-rail :is(h2, h3, h4, strong) { color: var(--ink); }
    .wo-command-rail :is(.cell-sub, small, .wo-summary-label) { color: var(--muted); }
    .wo-command-rail a { color: var(--teal-dark); }
    .wo-command-rail-row { border-top-color: var(--line); }
    .wo-command-rail-head > div > span,
    .wo-command-rail-row > div > span,
    .wo-command-equipment-row > div > small,
    .wo-command-contact > span,
    .wo-command-history > a small { color: var(--muted); }
    .wo-command-note { background: #fff7ed; }
    .wo-command-note > span { color: #a16207; }
    .wo-command-rail-actions .btn { background: #fff; border-color: var(--line); color: var(--ink); }
    .wo-command-tags .pill { background: var(--teal-soft); color: var(--teal-dark); }
    .wo-command-dock {
        border-radius: 12px;
        grid-template-columns: minmax(0, 1fr) auto;
        bottom: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom) + 6px);
        left: max(8px, env(safe-area-inset-left));
        margin: 0 auto;
        max-width: 520px;
        min-height: 62px;
        overflow: hidden;
        position: fixed;
        right: max(8px, env(safe-area-inset-right));
        z-index: 39;
    }
    body.drawer-open .wo-command-dock { display: none; }
    body.drawer-open #view .wo-mobile-context-trigger,
    body.drawer-open #view .wo-stage-tabs,
    body.drawer-open .tabbar { display: none !important; }
    .wo-command-rail-drawer { display: grid; }
    .wo-command-dock[data-has-metrics="false"] { grid-template-columns: minmax(0, 1fr); }
    .wo-command-dock[data-has-metrics="false"] .wo-dock-next { border-left: 0; grid-column: 1; }
    .wo-dock-build { display: none; }
    .wo-dock-next { border-bottom: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); grid-column: 2; grid-row: 1; padding: 7px; }
    .wo-dock-next > span { display: none; }
    .wo-dock-primary { font-size: 11.5px; min-height: 46px; padding-inline: 11px; width: 100%; }
    .wo-dock-metrics { grid-auto-flow: column; grid-column: 1; grid-row: 1; grid-template-columns: repeat(2, minmax(72px, 1fr)); overflow: hidden; }
    .wo-dock-metric { display: none; min-height: 62px; padding: 7px 9px; }
    .wo-dock-metric:nth-child(2),
    .wo-dock-metric:last-child { display: flex; }
    .wo-dock-metric > span { font-size: 8px; }
    .wo-dock-metric > strong { font-size: 12px; }
    .wo-finance-dock {
        border-radius: 11px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        position: static;
    }
    .wo-finance-dock > div { border-bottom: 1px solid rgba(255, 255, 255, 0.1); min-height: 60px; }
    .wo-finance-dock > div:nth-child(even) { border-right: 0; }
    .wo-finance-dock > div:last-of-type { grid-column: 1 / -1; }
    .wo-finance-dock span { font-size: 9.5px; }
    .wo-finance-dock strong { font-size: 15px; }

    .disp-desktop-board { display: none; }
    .disp-mobile-list { display: block; margin-top: 16px; }
    .capacity-grid {
        -webkit-overflow-scrolling: touch;
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .capacity-grid::-webkit-scrollbar { display: none; }
    .capacity-card { flex: 0 0 190px; scroll-snap-align: start; }
    .disp-day-strip { display: flex; gap: 6px; overflow-x: auto; padding: 10px 12px 0; scrollbar-width: none; }
    .disp-day-strip::-webkit-scrollbar { display: none; }
    .disp-day-strip button {
        background: var(--panel);
        border: 1px solid var(--line);
        border-radius: 9px;
        color: var(--muted);
        cursor: pointer;
        flex: 1 1 0;
        font-family: inherit;
        font-size: 10px;
        font-weight: 750;
        min-width: 45px;
        padding: 7px 5px;
    }
    .disp-day-strip button strong { color: var(--ink); display: block; font-size: 12px; margin-top: 2px; }
    .disp-day-strip button.active { background: var(--teal-soft); border-color: #99e0d6; color: var(--teal-dark); }

    .cust-grid, .report-grid { grid-template-columns: minmax(0, 1fr); }
    .chart-wrap { max-width: 100%; }
    .insp-item { display: grid; }
    .tri { width: 100%; }
    .tri button { flex: 1; min-height: 44px; }

    .portal-head { align-items: flex-start; flex-wrap: wrap; }
    .portal-main { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
    .portal-line { align-items: stretch; flex-direction: column; }
    .pl-right { align-items: stretch; flex-direction: row; justify-content: space-between; }
    .pl-toggle button { min-height: 44px; }

    body.field-surface .emp-fab {
        bottom: calc(76px + env(safe-area-inset-bottom));
        z-index: 40;
    }
}

@media (max-width: 700px) {
    :where(
        button, input:not([type="checkbox"]):not([type="radio"]), select, textarea,
        a.btn, [role="button"], [role="link"], .emp-check, .emp-linetimer-btn
    ) {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    .mobile-brand { flex-basis: 44px; height: 44px; min-height: 44px; min-width: 44px; }
    #global-search { min-height: 44px; }
    .topbar .notif-btn.topbar-tool { height: 44px; min-height: 44px; width: 44px; }
    .emp-iconbtn { height: 44px; min-height: 44px; min-width: 44px; width: 44px; }
    .emp-seg button, .emp-stagebar button { min-height: 44px; }
    .msg-mobile-back { min-height: 44px; padding-block: 10px; }
}

:where([data-action][role="button"], [data-action][role="link"], .wo-card-link, .emp-card):focus-visible {
    outline: 3px solid rgba(20, 184, 166, .42);
    outline-offset: 2px;
}

[data-action][role="button"], [data-action][role="link"] { cursor: pointer; }