/* ============================================================
   Operation Technology Dashboard — Soft UI theme (design F)
   ============================================================ */

/* --- CSS Variables --- */
:root {
    /* Soft UI palette (design F) — cool grey ground, white cards, teal accent.
       Status text uses the darker step of each hue so chips stay readable. */
    --primary: #0F766E;          /* teal accent */
    --primary-light: #115E59;
    --primary-lighter: #F0FDFA;  /* teal-50 wash */
    --accent: #0F766E;
    --accent-text: #115E59;
    --success: #067647;
    --success-bg: #ECFDF3;
    --danger: #B42318;
    --danger-bg: #FEF3F2;
    --warning: #B54708;
    --warning-bg: #FFFAEB;
    --info: #175CD3;
    --info-bg: #EFF8FF;
    /* Strong text for tinted chips (design F) */
    --success-strong: #085D3A;
    --danger-strong: #912018;
    --warning-strong: #93370D;
    --info-strong: #194185;
    --success-tint: #DCFAE6;
    --danger-tint: #FEE4E2;
    --warning-tint: #FEF0C7;
    --neutral-tint: #F2F4F7;
    --dot-good: #17B26A;
    --dot-bad: #F04438;
    --dot-warn: #F79009;
    /* Tinted borders for status chips/cards */
    --success-border: #ABEFC6;
    --danger-border: #FECDCA;
    --warning-border: #FEDF89;
    --info-border: #B2DDFF;
    --bg: #F6F7FB;               /* app ground */
    --card: #FFFFFF;
    --surface-raised: #FFFFFF;   /* inputs, dialogs, popovers */
    --surface-sunken: #F9FAFB;   /* table heads, quiet panels */
    --track: #EEF0F4;            /* segmented controls, progress tracks */
    --text: #101828;
    --text-secondary: #475467;
    --text-light: #667085;
    --text-body: #344054;
    --border: #EAECF0;
    --border-light: #EAECF0;
    --border-strong: #D0D5DD;
    --shadow: 0 1px 2px rgba(16,24,40,0.05), 0 4px 12px -2px rgba(16,24,40,0.06);
    --shadow-md: 0 2px 4px -1px rgba(16,24,40,0.06), 0 8px 20px -4px rgba(16,24,40,0.10);
    --shadow-lg: 0 1px 2px rgba(16,24,40,0.05), 0 12px 32px -8px rgba(16,24,40,0.16);
    --ring: 0 0 0 1px #EAECF0;
    --focus-ring: 0 0 0 3px rgba(15,118,110,0.18);
    --radius: 10px;
    --radius-lg: 16px;
    --transition: all 0.14s cubic-bezier(.2,.6,.2,1);

    /* Typography (Google Fonts, loaded in index.html). --font-serif is the
       display face for titles and big numbers. */
    --font-serif: 'Poppins', 'Open Sans', 'Segoe UI', sans-serif;
    --font-display: 'Poppins', 'Open Sans', 'Segoe UI', sans-serif;
    --font-sans: 'Open Sans', 'Segoe UI', -apple-system, sans-serif;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

    /* Component colors */
    --color-display: #B54708;
    --color-gps: #175CD3;
    --color-steering: #067647;
    --color-jdlink: #344054;
    --color-camera-ai: #6941C6;
    --color-telematic-box: #0E7490;
    --color-switch-limiter: #C4320A;
    --color-rotary-lamp: #A15C07;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

/* Editorial serif for page/section titles and big numbers */
.table-card__title,
#modalTitle, #implementModalTitle, #damageModalTitle, #licenseModalTitle {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* --- Header --- */
.brand-logo {
    display: block;
    height: 40px;
    width: auto;
    object-fit: contain;
    flex-shrink: 0;
}

.brand-logo--lg {
    display: block;
    height: 96px;
    width: auto;
    object-fit: contain;
    margin: 0 auto 12px;
}

.header__status {
    display: flex;
    align-items: center;
    gap: 6px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-light);
    transition: var(--transition);
}

.status-dot.connected {
    background: var(--success);
    box-shadow: 0 0 6px rgba(79,123,88,0.45);
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ============================================================
   APP SHELL — left sidebar + body (warm editorial)
   ============================================================ */
.app-shell {
    display: flex;
    height: 100vh;
    background: var(--bg);
}
.sidebar {
    width: 246px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    padding: 18px 14px 14px;
    background: var(--card);
}
.sidebar__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px 10px 16px;
    min-width: 0;
}
.sidebar__brand .brand-logo { height: 34px; }
.sidebar__brand-name { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; }
.sidebar__brand-sub { font-size: 11px; color: var(--text-muted, var(--text-light)); }
.sidebar__nav { flex: 1; overflow-y: auto; }
.nav-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.nav-group__label {
    font-size: 10.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-light);
    margin: 16px 12px 6px;
}
/* Sidebar nav items reuse .nav__link; size them for the vertical rail */
.sidebar__nav .nav__link {
    width: 100%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13.5px;
    gap: 10px;
}
.sidebar__nav .nav__link i { width: 17px; text-align: center; flex-shrink: 0; }

.app-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}
.topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 54px;
    flex-shrink: 0;
    padding: 0 28px;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    font-size: 13px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.topbar__spacer { flex: 1; }
.topbar__burger {
    display: none;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
}
.topbar__burger:hover { background: var(--border-light); }

/* --- Main Container --- */
.main {
    flex: 1;
    overflow-y: auto;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 24px 32px 48px;
}

@media (max-width: 900px) {
    .app-shell { height: auto; min-height: 100vh; }
    .sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        z-index: 400;
        transform: translateX(-100%);
        transition: transform 0.18s var(--ease-out, ease);
        box-shadow: var(--shadow-lg);
    }
    .app-shell.nav-open .sidebar { transform: translateX(0); }
    .app-shell.nav-open::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(20,20,19,0.35);
        z-index: 300;
    }
    .app-body { height: auto; overflow: visible; }
    .topbar { position: sticky; top: 0; z-index: 200; }
    .topbar__burger { display: inline-flex; }
    .main { height: auto; overflow: visible; padding: 20px 16px 48px; }
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    border: 1px solid transparent;
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.btn-primary:hover { background: var(--accent-text); border-color: var(--accent-text); }

.btn-secondary {
    background: var(--card);
    color: var(--text);
    border-color: var(--border);
}

.btn-secondary:hover { background: var(--border-light); }

.btn-success {
    background: var(--success);
    color: #fff;
}

.btn-success:hover { background: var(--success); }

.btn-sm { padding: 6px 12px; font-size: 12px; }

.btn-icon {
    width: 36px;
    height: 36px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}

.file-upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 32px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    background: var(--bg);
}

.file-upload-area:hover {
    border-color: var(--accent);
    background: var(--primary-lighter);
}

.file-upload-area i {
    font-size: 32px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.file-upload-area p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 4px;
}

.file-upload-area .hint {
    font-size: 12px;
    color: var(--text-light);
}

/* --- KPI Cards --- */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.kpi-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.kpi-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.kpi-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.kpi-card.total::before { background: var(--accent); }
.kpi-card.good::before { background: var(--success); }
.kpi-card.breakdown::before { background: var(--danger); }
.kpi-card.issue::before { background: var(--warning); }
.kpi-card.health::before { background: var(--info); }

.kpi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.kpi-card__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.kpi-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.kpi-card.total .kpi-card__icon { background: var(--info-bg); color: var(--accent-text); }
.kpi-card.good .kpi-card__icon { background: var(--success-bg); color: var(--success); }
.kpi-card.breakdown .kpi-card__icon { background: var(--danger-bg); color: var(--danger); }
.kpi-card.issue .kpi-card__icon { background: var(--warning-bg); color: var(--warning); }
.kpi-card.health .kpi-card__icon { background: var(--primary-lighter); color: var(--info); }

.kpi-card__value {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 4px;
}

.kpi-card__sub {
    font-size: 12px;
    color: var(--text-secondary);
}

.kpi-card__bar {
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    margin-top: 12px;
    overflow: hidden;
}

.kpi-card__bar-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 0.6s ease;
}

.kpi-card.good .kpi-card__bar-fill { background: var(--success); }
.kpi-card.breakdown .kpi-card__bar-fill { background: var(--danger); }
.kpi-card.issue .kpi-card__bar-fill { background: var(--warning); }
.kpi-card.health .kpi-card__bar-fill { background: var(--info); }

/* --- Charts --- */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.chart-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
}

.chart-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chart-card__title i { color: var(--text-secondary); font-size: 14px; }

.chart-container { position: relative; height: 280px; }
.chart-container-sm { position: relative; height: 220px; }

/* --- Component Health --- */
.component-health {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    margin-bottom: 24px;
}

.component-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.component-stat {
    text-align: center;
    padding: 16px 12px;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border-light);
    transition: var(--transition);
}

.component-stat:hover { box-shadow: var(--shadow); }

.component-stat__name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.component-stat__ring {
    width: 72px;
    height: 72px;
    margin: 0 auto 8px;
    position: relative;
}

.component-stat__ring svg { transform: rotate(-90deg); }

.component-stat__ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.component-stat__detail {
    font-size: 11px;
    color: var(--text-secondary);
}

/* --- Filter Bar --- */
.filter-bar {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 16px 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-bar__search {
    flex: 1;
    min-width: 200px;
    position: relative;
}

.filter-bar__search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 13px;
}

.filter-bar__search input {
    width: 100%;
    padding: 8px 12px 8px 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    transition: var(--transition);
}

.filter-bar__search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(49,130,206,0.1);
    background: var(--card);
}

.filter-bar select {
    padding: 8px 28px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    transition: var(--transition);
}

.filter-bar select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(49,130,206,0.1);
}

.filter-count {
    font-size: 12px;
    color: var(--text-secondary);
    margin-left: auto;
}

/* --- Section Header --- */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.section-title i { color: var(--text-secondary); }

/* --- Data Table --- */
.table-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    margin-bottom: 24px;
    overflow: hidden;
}

.table-card__header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-card__title {
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.table-card__title i { color: var(--text-secondary); }

.table-card__actions {
    display: flex;
    gap: 8px;
}

.table-wrapper {
    overflow-x: auto;
    max-height: 420px;
    overflow-y: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.data-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.data-table th {
    background: var(--bg);
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
}

.data-table th:hover { background: var(--border-light); color: var(--text); }

.data-table th .sort-icon {
    margin-left: 4px;
    font-size: 10px;
    opacity: 0.4;
}

.data-table th.sorted .sort-icon { opacity: 1; color: var(--accent-text); }

.data-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text);
    white-space: nowrap;
}

.data-table tbody tr {
    transition: var(--transition);
    background: var(--card);
}

.data-table tbody tr:nth-child(even) { background: var(--bg); }
.data-table tbody tr:hover { background: var(--border-light); }
.data-table tbody tr.row-breakdown { background: var(--danger-bg); }
.data-table tbody tr.row-breakdown:hover { background: var(--danger-border); }

/* --- Status Badges --- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.badge-good {
    background: var(--success-bg);
    color: var(--success);
    border: 1px solid var(--success-border);
}

.badge-breakdown {
    background: var(--danger-bg);
    color: var(--danger);
    border: 1px solid var(--danger-border);
}

.badge-component {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #fff;
}

.badge-display { background: var(--color-display); }
.badge-gps { background: var(--color-gps); }
.badge-steering { background: var(--color-steering); }
.badge-jdlink { background: var(--color-jdlink); }
.badge-unit { background: var(--danger); }
/* Heavy-equipment components. */
.badge-camera-ai { background: var(--color-camera-ai); }
.badge-telematic-box { background: var(--color-telematic-box); }
.badge-switch-limiter { background: var(--color-switch-limiter); }
.badge-rotary-lamp { background: var(--color-rotary-lamp); }

/* Unit groups: the count pill on the group tabs, the group caption when the
   component grid shows both groups, and the dashboard scope line. */
.team-tab__count {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 9px;
    background: var(--border-light);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
}
.component-grid__group {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.dash-scope-caption { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 10px; }
.dash-scope-caption[hidden] { display: none; }

/* Cell-level status indicators */
.cell-good { color: var(--success); font-weight: 600; }
.cell-bad { color: var(--danger); font-weight: 600; }

/* --- Repair Section --- */
.repair-section {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    overflow: hidden;
    margin-bottom: 24px;
}

.repair-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.repair-body { padding: 20px; }

.issue-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 20px;
}

.issue-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border-light);
}

.issue-chip__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.issue-chip__label {
    font-size: 11px;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-weight: 500;
}

.issue-chip__count {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-left: auto;
}

.repair-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

/* --- Empty State --- */
.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.empty-state i {
    font-size: 48px;
    color: var(--text-light);
    margin-bottom: 16px;
}

.empty-state h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 14px;
    max-width: 400px;
    margin: 0 auto;
}

/* --- Loading --- */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    display: none;
}

.loading-overlay.active { display: flex; }

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* --- Toast Notification --- */
.toast-container {
    position: fixed;
    top: 80px;
    right: 24px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: var(--card);
    border-radius: var(--radius);
    padding: 12px 16px;
    box-shadow: var(--shadow-lg);
    border-left: 4px solid var(--accent);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: slideIn 0.3s ease;
    max-width: 360px;
}

.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }

@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* --- Navigation --- */
.nav__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
    text-decoration: none;
    user-select: none;
}

.nav__link:hover { color: var(--text); background: var(--border-light); }
.nav__link.active { color: var(--accent-text); background: var(--primary-lighter); font-weight: 600; }

/* --- Change Alert Banner --- */
.change-banner {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: var(--radius);
    background: var(--info-bg);
    border: 1px solid var(--border);
    color: var(--info);
    font-size: 13px;
    animation: slideDown 0.3s ease;
}

.change-banner.show { display: flex; }

.change-banner__content {
    display: flex;
    align-items: center;
    gap: 8px;
}

.change-banner__content i { font-size: 16px; }

.change-banner .btn-icon {
    color: var(--info);
    background: none;
    border: none;
    cursor: pointer;
    width: 28px;
    height: 28px;
    font-size: 14px;
}

@keyframes slideDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* --- Edit Toolbar --- */
.edit-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.edit-toolbar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.edit-toolbar__right {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}

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

/* --- Import Panel --- */
.import-panel {
    display: none;
    margin-bottom: 20px;
}

.import-panel.open { display: block; }

/* --- Modal --- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 250;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-overlay.open {
    display: flex;
}

.modal-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 580px;
    max-height: 90vh;
    /* The visible height on a phone, where 90vh includes the part hidden
       behind the browser's address bar. */
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.2s ease;
}

@keyframes modalIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-light);
    flex-shrink: 0;
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
}

.modal-header .btn-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
}

.modal-body { padding: 20px; overflow-y: auto; flex: 1; min-height: 0; overscroll-behavior: contain; }

/* Four modals (Laporan Harian, Izin / Sakit, Perangkat, Stok Barang) wrap
   .modal-body and .form-actions in a <form> that sits directly in the card.
   Without passing the flex column through, the form could not shrink, the
   card's overflow:hidden clipped it, and on a phone nothing scrolled — the
   lower fields and the Simpan button were simply out of reach. */
.modal-card > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}

.form-group { display: flex; flex-direction: column; gap: 4px; }

.form-group.full-width { grid-column: 1 / -1; }

.form-optional { color: var(--text-light); font-weight: 400; text-transform: none; font-size: 11px; }

.form-textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.5;
    padding: 10px 12px;
}

.form-category-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.form-category-row .form-select { flex: 1; min-width: 0; }
.form-category-row .btn { white-space: nowrap; flex-shrink: 0; }

/* Manage Categories modal */
.categories-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg);
}
.category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}
.category-item:last-child { border-bottom: none; }
.category-item__name { color: var(--text); }
.category-item__del { padding: 4px 8px; }
.category-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
    font-style: italic;
}
.category-add-form {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.category-add-form .form-input { flex: 1; }
.category-add-form .btn { white-space: nowrap; flex-shrink: 0; }

.category-rules-banner {
    margin-bottom: 14px;
    padding: 12px 14px;
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-left: 4px solid var(--danger);
    border-radius: 6px;
    color: var(--danger);
    font-size: 13px;
    line-height: 1.5;
}
.category-rules-banner strong { display: block; margin-bottom: 6px; }
.category-rules-banner p { margin: 6px 0; }
.category-rules-banner code {
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 3px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 12px;
}
.category-rules-banner pre {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--text);
    color: var(--card);
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.45;
    overflow-x: auto;
    white-space: pre;
}

.badge-cat {
    background: var(--border-light);
    color: var(--text);
    border: 1px solid var(--border-strong);
}

.form-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.form-input, .form-select {
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: var(--bg);
    transition: var(--transition);
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(49,130,206,0.1);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 20px;
    border-top: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* --- Inline Edit --- */
.inline-edit {
    cursor: text;
    padding: 4px 6px;
    border-radius: 4px;
    transition: var(--transition);
    min-width: 40px;
    display: inline-block;
}

.inline-edit:hover { background: var(--primary-lighter); }

.inline-edit:focus {
    outline: none;
    background: #fff;
    box-shadow: 0 0 0 2px var(--accent);
}

/* --- Edit Table Actions --- */
.row-actions {
    display: flex;
    gap: 4px;
}

.row-actions .btn {
    width: 30px;
    height: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 12px;
}

/* The square sizing above is for icon-only buttons. A row-action group that
   carries labelled buttons opts out, otherwise the label is clipped to 30px
   ("Akses" rendered as "Akse"). Icon-only buttons inside such a group keep
   their square shape via .row-actions__icon. */
.row-actions--labeled {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
}
.row-actions--labeled .btn {
    width: auto;
    height: 28px;
    padding: 0 10px;
    gap: 6px;
    white-space: nowrap;
}
.row-actions--labeled .btn.row-actions__icon {
    width: 28px;
    padding: 0;
}

.data-table th.col-check,
.data-table td.col-check {
    width: 40px;
    text-align: center;
    cursor: default;
}

.data-table th.col-actions,
.data-table td.col-actions {
    width: 80px;
    white-space: nowrap;
}

/* --- Sticky Columns — Edit Units table only ---
   Left: checkbox (40px) + No (48px) + Nickname. Right: Actions.
   td uses background:inherit (rows always have an explicit background for
   zebra/hover/breakdown); th needs its own explicit background because the
   base th rule's var(--bg) would otherwise be overridden to transparent. */
#editTable th:nth-child(2), #editTable td:nth-child(2) { width: 48px; }

#editTable th:nth-child(1), #editTable td:nth-child(1),
#editTable th:nth-child(2), #editTable td:nth-child(2),
#editTable th:nth-child(3), #editTable td:nth-child(3) {
    position: sticky;
    z-index: 5;
    background: inherit;
}
#editTable th:nth-child(1), #editTable td:nth-child(1) { left: 0; }
#editTable th:nth-child(2), #editTable td:nth-child(2) { left: 40px; }
#editTable th:nth-child(3), #editTable td:nth-child(3) { left: 88px; }

#editTable th:last-child, #editTable td:last-child {
    position: sticky;
    right: 0;
    z-index: 5;
    background: inherit;
}

#editTable thead th:nth-child(1),
#editTable thead th:nth-child(2),
#editTable thead th:nth-child(3),
#editTable thead th:last-child {
    z-index: 15;
    background: var(--bg);
}

/* sticky cells are positioned, so the shadow pseudo-elements anchor to them */
#editTable td:nth-child(3)::after,
#editTable th:nth-child(3)::after {
    content: ''; position: absolute; top: 0; right: -4px;
    width: 4px; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.04), transparent);
    pointer-events: none;
}
#editTable td:last-child::before,
#editTable th:last-child::before {
    content: ''; position: absolute; top: 0; left: -4px;
    width: 4px; height: 100%;
    background: linear-gradient(to left, rgba(0,0,0,0.04), transparent);
    pointer-events: none;
}

/* --- Compact Mode --- */
/* Wide screens only: its toggle is hidden on phones (v156), so a choice made
   there earlier must not stay stuck on the card layout. */
@media (min-width: 701px) {
.data-table.compact td { padding: 5px 10px; font-size: 12px; }
.data-table.compact th { padding: 7px 10px; font-size: 10px; }
.data-table.compact .row-actions .btn { width: 26px; height: 26px; font-size: 11px; }
.data-table.compact .badge { padding: 2px 7px; font-size: 10px; }
.data-table.compact .inline-edit { padding: 2px 4px; }
.data-table.compact .attach-chip { padding: 1px 4px; font-size: 10px; }
.data-table.compact .attach-upload-btn { width: 20px; height: 20px; font-size: 11px; }
}

/* --- Footer --- */
.footer {
    text-align: center;
    padding: 24px;
    font-size: 12px;
    color: var(--text-light);
    border-top: 1px solid var(--border-light);
    margin-top: 24px;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
    .kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .component-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
    .main { padding: 16px; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .charts-grid { grid-template-columns: 1fr; }
    .repair-grid { grid-template-columns: 1fr; }
    .filter-bar { flex-direction: column; align-items: stretch; }
    .filter-bar__search { min-width: unset; }
    .filter-count { margin-left: 0; }
    .form-grid { grid-template-columns: 1fr; }
    .edit-toolbar { flex-direction: column; align-items: stretch; }
}

@media (max-width: 600px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .component-grid { grid-template-columns: 1fr 1fr; }
    .modal-card { max-width: 100%; }
}

/* --- Print --- */
@media print {
    .filter-bar, .toast-container, .loading-overlay, .change-banner, .edit-toolbar,
    .import-panel, .modal-overlay, .col-check, .col-actions { display: none !important; }
    .main { padding: 0; max-width: 100%; }
    .kpi-card, .chart-card, .table-card, .repair-section, .component-health,
    .downtime-section { break-inside: avoid; box-shadow: none; border: 1px solid #ddd; }
    .table-wrapper { max-height: unset; overflow: visible; }
}

/* ============================================================
   DOWNTIME / RELIABILITY SECTION
   ============================================================ */
.downtime-section {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow);
    border: 1px solid var(--border-light);
    margin-bottom: 24px;
}

.downtime-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 16px 0 20px;
}

.downtime-kpi {
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border-light);
}

.downtime-kpi__label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary);
}

.downtime-kpi__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin: 4px 0;
}

.downtime-kpi__sub {
    font-size: 11px;
    color: var(--text-light);
}

.downtime-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.top-offenders {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.top-offender {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border-light);
    font-size: 13px;
}

.top-offender--empty {
    color: var(--text-light);
    justify-content: center;
    font-style: italic;
}

.top-offender__rank {
    font-weight: 700;
    color: var(--danger);
    min-width: 28px;
}

.top-offender__name {
    flex: 1;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.top-offender__time {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 12px;
    font-family: 'Inter', monospace;
}

/* ============================================================
   EDIT SEARCH
   ============================================================ */
.edit-search {
    position: relative;
    display: inline-block;
}

.edit-search i {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 12px;
    pointer-events: none;
}

.edit-search input {
    padding: 6px 12px 6px 30px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--text);
    background: var(--card);
    width: 240px;
    transition: var(--transition);
}

.edit-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(49,130,206,0.1);
}

.edit-toolbar__right {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* ============================================================
   HISTORY / AUDIT
   ============================================================ */
.audit-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.audit-add { background: var(--success-bg); color: var(--success); }
.audit-update { background: var(--info-bg); color: var(--info); }
.audit-edit { background: var(--info-bg); color: var(--info); }
.audit-delete { background: var(--danger-bg); color: var(--danger); }
.audit-restore { background: var(--primary-lighter); color: var(--accent-text); }
.audit-migrate { background: var(--warning-bg); color: var(--warning); }
/* The marker for a write the server refused. Without a colour it read exactly
   like an ordinary row, which is the opposite of what it is for. */
.audit-error { background: var(--danger-bg); color: var(--danger); }
.audit-create { background: var(--success-bg); color: var(--success); }
.audit-approve { background: var(--success-bg); color: var(--success); }
.audit-reject { background: var(--danger-bg); color: var(--danger); }
.audit-remove { background: var(--danger-bg); color: var(--danger); }
.audit-role-change { background: var(--warning-bg); color: var(--warning); }

.audit-actor { font-weight: 600; }
.audit-actor em {
    font-weight: 400;
    opacity: 0.7;
    font-style: normal;
    font-size: 11px;
    text-transform: capitalize;
}

/* Breakdown popover */
.breakdown-popover {
    position: absolute;
    z-index: 9999;
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    max-width: 280px;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    transform: translateX(-50%);
    line-height: 1.5;
    word-wrap: break-word;
}

.bd-clickable { cursor: pointer; }
.bd-clickable:hover { opacity: 0.85; }

/* Breakdown reason display in edit form */
.breakdown-reason-box {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--danger);
    line-height: 1.5;
}

/* Edit table filter selects */
.form-select--sm {
    padding: 6px 28px 6px 10px;
    font-size: 12px;
    border-radius: 6px;
    min-width: 100px;
}

/* Chart of Account dynamic list in implement modal */
.coa-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}
.coa-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.coa-row .coa-input { flex: 1; min-width: 0; }
.coa-row .coa-remove {
    flex-shrink: 0;
    padding: 6px 12px;
    color: var(--danger);
}

/* Chart of Account cell dropdown */
.coa-cell { position: relative; display: inline-flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.coa-more {
    font-size: 10px;
    color: var(--accent-text);
    cursor: pointer;
    white-space: nowrap;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--primary-lighter);
}
.coa-more:hover { background: var(--accent); color: #fff; }
.coa-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 120;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 6px 8px;
    margin-top: 4px;
    min-width: 180px;
    max-width: 320px;
    flex-direction: column;
    gap: 3px;
}
.coa-cell.open .coa-dropdown { display: flex; }

.modal-card--wide { max-width: 980px; }

/* ============================================================
   UNDO TOAST
   ============================================================ */
.toast.undo-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    border-left-color: var(--info);
}

.toast-undo-btn {
    margin-left: auto;
    background: var(--primary-light);
    color: #fff;
    border: none;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
}

.toast-undo-btn:hover { background: var(--primary); }

/* ============================================================
   DARK MODE
   ============================================================ */

/* ============================================================
   RESPONSIVE — new sections
   ============================================================ */
@media (max-width: 900px) {
    .downtime-kpis { grid-template-columns: repeat(2, 1fr); }
    .downtime-grid { grid-template-columns: 1fr; }
    .edit-toolbar__right { flex-direction: column; align-items: stretch; gap: 8px; }
    .edit-search input { width: 100%; }
}

@media (max-width: 600px) {
    .downtime-kpis { grid-template-columns: 1fr; }
}

/* --- Implements: form fieldset section --- */
.form-section {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px 4px;
    margin: 8px 0 16px;
    background: var(--bg-soft, transparent);
}
.form-section legend {
    padding: 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-text);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ============================================================
   AUTH GATE — Login / Sign-up / Pending screens
   ============================================================ */
.auth-gate {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: linear-gradient(135deg, #141413 0%, #2A2925 55%, #403E3A 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: auto;
}

body.auth-blocked { overflow: hidden; }
body.auth-blocked .main,
body.auth-blocked .footer { filter: blur(2px); pointer-events: none; }

.auth-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.35);
    width: 100%;
    max-width: 440px;
    padding: 36px 32px 28px;
    animation: modalIn 0.25s ease;
}

.auth-card__brand {
    text-align: center;
    margin-bottom: 24px;
}
.auth-card__brand i {
    font-size: 40px;
    color: var(--accent-text);
    margin-bottom: 8px;
}
.auth-card__brand h1 {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent-text);
    margin: 8px 0 4px;
    letter-spacing: -0.3px;
}

.auth-tabs {
    display: flex;
    gap: 4px;
    background: var(--bg);
    border-radius: 8px;
    padding: 4px;
    margin-bottom: 20px;
}
.auth-tab {
    flex: 1;
    background: none;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition);
}
.auth-tab.active {
    background: #fff;
    color: var(--accent-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form .form-group { gap: 6px; }
.auth-form .form-input {
    padding: 10px 14px;
    font-size: 14px;
}

.auth-error {
    display: none;
    color: var(--danger);
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    line-height: 1.4;
}

.auth-hint {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--info-bg);
    border: 1px solid var(--info-border);
    border-radius: 6px;
    padding: 10px 12px;
    line-height: 1.5;
}
.auth-hint i { color: var(--accent-text); margin-right: 4px; }

.auth-submit {
    width: 100%;
    justify-content: center;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 4px;
}

.auth-card__footer {
    text-align: center;
    font-size: 11px;
    color: var(--text-light);
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.pending-message {
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: 8px;
    padding: 16px;
    color: var(--warning);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* ============================================================
   USER PILL (header)
   ============================================================ */
.user-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    color: var(--text);
    transition: var(--transition);
    user-select: none;
}
.user-pill:hover { background: var(--border-light); }
.user-pill i.fa-user-circle { font-size: 16px; opacity: 0.9; }
.user-pill__name {
    font-size: 13px;
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-pill__role {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--border-light);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}
.user-pill[data-role="owner"]  .user-pill__role { background: var(--warning); color: #fff; }
.user-pill[data-role="team"]   .user-pill__role { background: var(--info); color: #fff; }
.user-pill[data-role="viewer"] .user-pill__role { background: var(--text-light); color: #fff; }
.user-pill__chev { font-size: 10px; opacity: 0.7; }

.user-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: #fff;
    color: var(--text);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.2);
    border: 1px solid var(--border);
    z-index: 200;
    overflow: hidden;
}
.user-menu.open { display: block; }
.user-menu__header {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-light);
}
.user-menu__email {
    font-size: 12px;
    color: var(--text);
    font-family: monospace;
    word-break: break-all;
}
.user-menu__role-label {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 2px;
}
.user-menu__item {
    width: 100%;
    background: none;
    border: none;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}
.user-menu__item:hover { background: var(--border-light); }
.user-menu__item i { color: var(--text-secondary); width: 14px; }

/* ============================================================
   USER MANAGEMENT VIEW
   ============================================================ */
.users-summary {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--card);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    box-shadow: var(--shadow);
}
.user-chip i { font-size: 12px; }
.user-chip--owner   { color: var(--warning); border-color: var(--warning-border); background: var(--warning-bg); }
.user-chip--staff   { color: var(--info); border-color: var(--info-border); background: var(--info-bg); }
.user-chip--pbt     { color: var(--success); border-color: var(--success-border); background: var(--success-bg); }
.user-chip--khl     { color: var(--text-secondary); border-color: var(--border); background: var(--bg); }
.user-chip--legacy  { color: var(--text-light); border-color: var(--border); background: var(--bg); font-style: italic; }
.user-chip--pending { color: #A24E32; border-color: #E4B79A; background: var(--primary-lighter); }

/* Note under the role dropdown: a legacy role still to be migrated, or an
   account that is active but has not been granted a single area yet. */
.user-role-note {
    margin-top: 4px;
    font-size: 10.5px;
    line-height: 1.3;
}
.user-role-note--legacy { color: var(--text-light); font-style: italic; }
.user-role-note--warn   { color: var(--warning); font-weight: 600; }

.user-role-select {
    padding: 4px 8px;
    font-size: 12px;
    width: 100%;
    min-width: 96px;
}

/* ===== User Management tables =====
   The generic .col-actions is 80px, sized for two icon buttons; these tables
   carry labelled ones, so the column is given room instead of squeezing them
   against the edge. Long emails get an ellipsis rather than stretching the
   row — the full value stays available as a tooltip. */
#viewUsers .data-table th:first-child,
#viewUsers .data-table td:first-child {
    width: 48px;
    text-align: center;
    color: var(--text-secondary);
}
/* Sized to its buttons rather than a fixed reservation, so the columns that
   actually carry information keep the width. */
#viewUsers .data-table th.col-actions,
#viewUsers .data-table td.col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
#viewUsers .data-table td { vertical-align: middle; }

/* Measured: without caps this table came to 1062px inside a 968px wrapper.
   Email and the "diubah oleh" actor (the same owner address on every row)
   were the two widest columns, so they truncate with the full value on hover. */
.user-cell-email {
    display: block;
    max-width: 185px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-cell-actor {
    display: block;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.user-cell-email {
    font-family: var(--font-mono);
    font-size: 12px;
}
.user-cell-actor,
.user-cell-time {
    font-size: 12px;
    color: var(--text-secondary);
    white-space: nowrap;
}
.user-cell-protected {
    font-size: 11px;
    color: var(--text-light);
    font-style: italic;
}

@media (max-width: 900px) {
    .user-cell-email, .user-cell-actor { max-width: 150px; }
    #viewUsers .data-table th.col-actions,
    #viewUsers .data-table td.col-actions { min-width: 0; }
}

.btn-success {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.btn-success:hover { background: var(--success); border-color: var(--success); }

/* NOTE: this is the SECOND .btn-sm in this file — the first is near the top
   with the other button styles, and this one silently overrides it at every
   width. Edit this one. The phone block at the end of the file overrides both
   below 700px, where 11px/4px is too small to tap. */
.btn-sm {
    padding: 4px 10px;
    font-size: 11px;
}

/* ============================================================
   LICENSE BADGE (dashboard table)
   ============================================================ */
.license-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.license-badge i { font-size: 10px; }
.license-badge--ok       { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-border); }
.license-badge--soon     { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.license-badge--expired  { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }

/* ============================================================
   LICENSE ALERTS PANEL
   ============================================================ */
.license-alerts-section {
    margin-bottom: 20px;
}
.license-alerts-section .section-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-bottom: 12px;
}
.license-alerts-summary {
    display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px;
}
.license-alerts-summary .la-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 999px; font-weight: 600;
}
.la-chip.expired { background: var(--danger-bg); color: var(--danger); }
.la-chip.soon    { background: var(--warning-bg); color: var(--warning); }

.license-alerts-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 10px;
}
.la-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 10px;
    background: var(--card); border: 1px solid var(--border);
    transition: box-shadow .15s;
}
.la-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.la-card.expired { border-left: 4px solid var(--danger); }
.la-card.soon    { border-left: 4px solid var(--warning); }

.la-card__icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.la-card.expired .la-card__icon { background: var(--danger-bg); color: var(--danger); }
.la-card.soon    .la-card__icon { background: var(--warning-bg); color: var(--warning); }

.la-card__body { flex: 1; min-width: 0; }
.la-card__name {
    font-weight: 600; font-size: 13px; color: var(--text);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.la-card__meta {
    font-size: 11px; color: var(--text-secondary); margin-top: 2px;
}
.la-card__badge {
    font-size: 11px; font-weight: 700; padding: 3px 10px;
    border-radius: 999px; white-space: nowrap;
}
.la-card.expired .la-card__badge { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.la-card.soon    .la-card__badge { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }

@media (max-width: 600px) {
    .license-alerts-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   ACCESS GATING — disable editor-only UI, PER AREA
   ------------------------------------------------------------
   These must key off the per-area data-ro-* flags, never off the
   role: the owner can grant a viewer 'edit' on one area while
   leaving another view-only, and a role-wide rule would block the
   access that was deliberately granted.
   ============================================================ */
body[data-ro-editunits] #btnDeleteSelected,
body[data-ro-editunits] .row-actions button[onclick*="editUnit"],
body[data-ro-editunits] .row-actions button[onclick*="deleteUnit"],
body[data-ro-editunits] #viewEditUnits .col-check,
body[data-ro-editunits] .inline-edit,
body[data-ro-implements] #btnDeleteSelectedImpl,
body[data-ro-implements] .row-actions button[onclick*="editImplement"],
body[data-ro-implements] .row-actions button[onclick*="deleteImplement"],
body[data-ro-implements] #viewImplements .col-check,
body[data-ro-damage] #viewDamage .col-check,
body[data-ro-license] #viewLicenseStock .col-check {
    /* Inline-edit fields shouldn't be editable without edit access */
    pointer-events: none;
}
body[data-ro-editunits] .inline-edit { background: transparent !important; }

/* Dark-mode tweaks for new components */

/* ===== Attachment Cell ===== */
.col-attach { min-width: 170px; max-width: 260px; vertical-align: top; }
.attach-cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.attach-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 6px; border-radius: 4px;
    background: var(--bg); border: 1px solid var(--border);
    font-size: 11px; max-width: 200px;
}
.attach-chip i:first-child { color: var(--text-light); font-size: 12px; flex-shrink: 0; }
.attach-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100px; }
.attach-chip__dl, .attach-chip__rm {
    width: 16px; height: 16px; font-size: 10px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; background: none; cursor: pointer; border-radius: 3px;
    color: var(--text-light); transition: var(--transition);
}
.attach-chip__dl:hover { color: var(--accent-text); }
.attach-chip__rm:hover { color: var(--danger); }
.attach-upload-btn {
    width: 24px; height: 24px; font-size: 13px; padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px dashed var(--border); background: none; cursor: pointer;
    border-radius: 4px; color: var(--text-light); transition: var(--transition);
}
.attach-upload-btn:hover { border-color: var(--accent); color: var(--accent-text); background: var(--primary-lighter); transform: scale(1.1); }
.attach-empty { color: var(--text-light); font-size: 11px; font-style: italic; }
.attach-chip--pdf i:first-child { color: var(--danger); }
.attach-chip--doc i:first-child, .attach-chip--docx i:first-child { color: var(--info); }
.attach-chip--xls i:first-child, .attach-chip--xlsx i:first-child { color: var(--success); }
.attach-chip--csv i:first-child { color: var(--text-secondary); }

/* Mobile tweaks */
@media (max-width: 900px) {
    .auth-card { padding: 28px 22px 22px; }
    .user-pill__name { max-width: 90px; }
    .users-summary { gap: 6px; }
    .user-chip { padding: 6px 10px; font-size: 12px; }
}

/* ===== Damage photo attachment ===== */
.dmg-photo-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}
.dmg-photo-preview {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dmg-photo-preview img {
    max-width: 120px;
    max-height: 120px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    object-fit: cover;
    cursor: zoom-in;
}
.dmg-thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: zoom-in;
    transition: transform 0.12s ease;
}
.dmg-thumb:hover { transform: scale(1.1); }

.photo-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 600;
    align-items: center;
    justify-content: center;
    padding: 24px;
    cursor: zoom-out;
}
.photo-lightbox.open { display: flex; }
.photo-lightbox img {
    max-width: 95vw;
    max-height: 95vh;
    border-radius: var(--radius);
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
}
/* Paging controls — hidden by script when there is only one photo. */
.photo-lightbox__nav {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0 8px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.photo-lightbox__nav:hover { background: rgba(255,255,255,0.3); }
.photo-lightbox__count {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    background: rgba(0,0,0,0.5);
    border-radius: 999px;
    padding: 4px 12px;
}
@media (max-width: 640px) {
    .photo-lightbox { padding: 12px; }
    .photo-lightbox__nav { width: 36px; height: 36px; margin: 0 4px; font-size: 16px; }
    .photo-lightbox img { max-width: calc(100vw - 112px); }
}

/* Before / After: a label on the photo shown, and a side-by-side view. */
.photo-lightbox__caption {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(0,0,0,0.55);
    border-radius: 999px;
    padding: 5px 14px;
    white-space: nowrap;
    max-width: calc(100vw - 32px);
    overflow: hidden;
    text-overflow: ellipsis;
}
.photo-lightbox__mode {
    position: absolute;
    bottom: 14px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 999px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    font-size: 13px;
    padding: 7px 14px;
    cursor: pointer;
}
.photo-lightbox__mode:hover { background: rgba(255,255,255,0.2); }
.photo-lightbox__compare {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 96vw;
}
.photo-lightbox__fig {
    margin: 0;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: zoom-in;
}
.photo-lightbox .photo-lightbox__fig img {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
}
.photo-lightbox__fig figcaption {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    background: rgba(0,0,0,0.55);
    border-radius: 999px;
    padding: 4px 12px;
}
/* A phone or tablet held upright has no room for two photos across: stack
   them. Held sideways, they stay side by side. */
@media (orientation: portrait) and (max-width: 1024px) {
    .photo-lightbox__compare { flex-direction: column; gap: 10px; }
    .photo-lightbox .photo-lightbox__fig img { max-height: 36vh; max-width: 100%; }
}

/* Damage records: Before / After as one joined control, so the cell stays
   about as narrow as the single Photo button it replaces. */
.dmg-ph-group { display: inline-flex; flex-wrap: nowrap; vertical-align: middle; }
.dmg-ph-group .wl-photo-btn:not(:only-child):first-child { border-radius: 999px 0 0 999px; }
.dmg-ph-group .wl-photo-btn:not(:only-child):last-child { border-radius: 0 999px 999px 0; margin-left: -1px; }
.wl-photo-btn.dmg-ph--after { border-color: var(--success-border); background: var(--success-bg); color: var(--success); }
.wl-photo-btn.dmg-ph--add { border-style: dashed; }
@media (min-width: 701px) {
    .dmg-ph-group .wl-photo-btn { padding: 3px 9px; }
}
/* The description is capped at 240px; its text used to run on underneath the
   photo buttons next to it. Phones show it as a card row, which wraps. */
@media (min-width: 701px) {
    .data-table td.dmg-desc { overflow: hidden; text-overflow: ellipsis; }
}

/* "Mark as repaired" dialog. */
.modal-card.dmg-repair { max-width: 520px; }
.dmg-repair__summary {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 12px;
    margin-bottom: 14px;
    font-size: 13px;
    display: grid;
    gap: 6px;
}
.dmg-repair__meta { color: var(--text-secondary); font-size: 12px; margin-left: 6px; }
.dmg-repair__desc { color: var(--text-secondary); font-size: 12.5px; }
.dmg-repair__hint { color: var(--text-secondary); font-size: 11.5px; margin-top: 6px; }

/* Work log documentation: a count button, not the images themselves. The
   photos are fetched only when this is clicked — see openWorkLogPhotos(). */
.wl-photo-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    /* Stays tappable even when the label is short and the icon font has not
       loaded — the case a field device hits on a bad connection. */
    min-height: 28px;
    min-width: 44px;
    justify-content: center;
}
.wl-photo-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
}
.wl-photo-btn:disabled { opacity: 0.6; cursor: default; }
.wl-photo__loading {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 6px 0;
}

/* ===== License stock summary ===== */
.license-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
}
.license-summary__empty {
    color: var(--text-secondary);
    font-size: 13px;
    padding: 8px 0;
}
.license-sum-card {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 150px;
    background: var(--bg);
}
.license-sum-card.low {
    border-color: var(--danger);
    background: rgba(229,62,62,0.06);
}
.license-sum-card__type {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--text);
}
.license-sum-card__nums {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}
.license-sum-card__sisa { margin-left: auto; }
.license-sum-card__sisa strong { color: var(--text); font-size: 14px; }

/* ===== Unit profile modal ===== */
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; }
.profile-section__title {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
    margin-bottom: 10px;
}
.profile-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    font-size: 13px;
    border-bottom: 1px dashed var(--border-light);
}
.profile-row__label { color: var(--text-secondary); flex-shrink: 0; }
.profile-comps { display: flex; gap: 8px; flex-wrap: wrap; }
.profile-comp {
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.profile-comp.ok  { color: var(--success); background: var(--success-bg); }
.profile-comp.bad { color: var(--danger);  background: var(--danger-bg); }
.profile-note {
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--text-secondary);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 10px;
}
.profile-list { display: flex; flex-direction: column; gap: 6px; max-height: 190px; overflow-y: auto; }
.profile-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    padding: 4px 0;
    border-bottom: 1px dashed var(--border-light);
    flex-wrap: wrap;
}
.profile-item__date { font-variant-numeric: tabular-nums; color: var(--text-secondary); font-size: 12px; white-space: nowrap; }
.profile-item__text { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 220px; }
.profile-empty { font-size: 12.5px; color: var(--text-light); padding: 6px 0; }
.unit-link { cursor: pointer; }
.unit-link:hover { color: var(--accent-text); text-decoration: underline; }
@media (max-width: 700px) { .profile-grid { grid-template-columns: 1fr; } }

/* ===== Damage statistics (dashboard) ===== */
.damage-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap: 24px;
    padding: 16px 20px 20px;
}
.damage-stats__label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
}
.damage-type-chips { display: flex; flex-direction: column; gap: 8px; }
.damage-type-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.damage-type-chip .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.damage-type-chip strong { margin-left: auto; font-family: var(--font-serif); font-size: 17px; font-variant-numeric: tabular-nums; }
.damage-top-row { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; font-size: 12.5px; }
.damage-top-row__name { width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.damage-top-row__bar { flex: 1; height: 7px; border-radius: 4px; background: var(--border-light); overflow: hidden; display: block; }
.damage-top-row__bar span { display: block; height: 100%; background: #E29C7C; }
.damage-top-row__n { width: 22px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
@media (max-width: 900px) { .damage-stats-grid { grid-template-columns: 1fr; } }

/* ===== Low license stock alerts (dashboard) ===== */
.stock-alerts-section { margin-bottom: 24px; }
.stock-alerts-cards { display: flex; gap: 10px; flex-wrap: wrap; }
.stock-alert-card {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    cursor: pointer;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    color: var(--warning);
    font-size: 13px;
    transition: var(--transition);
}
.stock-alert-card:hover { filter: brightness(0.97); }
.stock-alert-card.empty { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.stock-alert-card__type { font-weight: 700; }
.stock-alert-card__n { font-variant-numeric: tabular-nums; }

/* ===== Mobile card view for wide tables (.table--cardable) =====
   On phones the table collapses into stacked cards. Only cells carrying a
   data-label are shown (plus actions and colspan empty-states); the label is
   rendered by the ::before pseudo. Desktop is untouched. */
@media (max-width: 700px) {
    .table--cardable thead { display: none; }
    .table--cardable,
    .table--cardable tbody,
    .table--cardable tr { display: block; width: 100%; }
    .table--cardable tr {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: 12px;
        margin-bottom: 10px;
        padding: 10px 14px;
    }
    .table--cardable td { display: none; }
    .table--cardable td[data-label] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        border: none;
        padding: 5px 0;
        width: 100%;
        max-width: none !important;
        white-space: normal;
    }
    .table--cardable td[data-label]::before {
        content: attr(data-label);
        font-size: 10.5px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        font-weight: 600;
        color: var(--text-light);
        flex-shrink: 0;
    }
    .table--cardable td.col-actions {
        display: flex;
        justify-content: flex-end;
        border: none;
        padding: 8px 0 2px;
    }
    .table--cardable td[colspan] { display: block; border: none; }
    /* Desktop truncation caps exist to keep columns in line; a stacked card
       has the whole row width, so show the values in full instead. */
    .table--cardable .user-cell-email,
    .table--cardable .user-cell-actor {
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        word-break: break-all;
        text-align: right;
    }
    .table--cardable .user-role-select { max-width: 160px; }
    /* Sticky columns & their shadow gradients don't apply to stacked cards */
    #editTable th, #editTable td { position: static !important; }
    #editTable td::after { background: none; }
    .table--cardable .table-wrapper { max-height: none; }
}

/* ===== Global unit search (topbar) ===== */
.global-search { position: relative; display: flex; align-items: center; gap: 8px; }
.global-search > i { color: var(--text-light); font-size: 13px; }
.global-search input {
    width: 210px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-raised);
    padding: 6px 14px;
    font-family: inherit;
    font-size: 13px;
    color: var(--text);
    outline: none;
    transition: var(--transition);
}
.global-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-lighter); }
.global-search__results {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 300px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    padding: 6px;
    z-index: 350;
}
.global-search__item { padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.global-search__item:hover { background: var(--border-light); }
.global-search__name { display: block; font-size: 13px; font-weight: 600; }
.global-search__meta { display: block; font-size: 11.5px; color: var(--text-secondary); margin-top: 1px; }
.global-search__meta .mono { font-family: var(--font-mono); font-size: 11px; }
.global-search__empty { padding: 10px; font-size: 12.5px; color: var(--text-light); }
@media (max-width: 700px) {
    .global-search input { width: 130px; }
    .global-search > i { display: none; }
}

/* ===== Editorial dashboard: narrative + ledger KPI =====
   Appended last so these overrides win the cascade against the original
   card-style KPI rules. Markup and element IDs are unchanged. */
.dash-narrative {
    font-family: var(--font-serif);
    font-size: 20px;
    line-height: 1.5;
    max-width: 780px;
    margin: 2px 0 22px;
    color: var(--text);
    text-wrap: pretty;
}
.kpi-grid {
    gap: 0;
    border-top: 2px solid var(--text);
    border-bottom: 1px solid var(--border-light);
}
.kpi-grid .kpi-card {
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 18px 20px 20px;
}
.kpi-grid .kpi-card:hover { transform: none; box-shadow: none; }
.kpi-grid .kpi-card::before { display: none; }
.kpi-grid .kpi-card .kpi-card__icon { display: none; }
.kpi-grid .kpi-card .kpi-card__bar { display: none; }
.kpi-grid .kpi-card__label {
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-secondary);
}
.kpi-grid .kpi-card__value {
    font-family: var(--font-serif);
    font-size: 44px;
    line-height: 1.05;
    font-weight: 400;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.kpi-grid .kpi-card.good .kpi-card__value { color: var(--success); }
.kpi-grid .kpi-card.breakdown .kpi-card__value { color: var(--danger); }
.kpi-grid .kpi-card.issue .kpi-card__value { color: var(--warning); }
.kpi-grid .kpi-card__sub { font-size: 12.5px; color: var(--text-light); }
@media (min-width: 1200px) {
    .kpi-grid .kpi-card + .kpi-card { border-left: 1px solid var(--border); }
}

/* ===== Per-user access: hide edit-only buttons in view-only areas ===== */
body[data-ro-editunits]  .editonly--editunits,
body[data-ro-implements] .editonly--implements,
body[data-ro-damage]     .editonly--damage,
body[data-ro-license]     .editonly--license,
body[data-ro-teamshift]   .editonly--teamshift,
body[data-ro-teamlog]     .editonly--teamlog,
body[data-ro-teammembers] .editonly--teammembers,
body[data-ro-warehouse]   .editonly--warehouse,
body[data-ro-inspection]  .editonly--inspection { display: none !important; }

/* CSV export/import capability: hide buttons the user isn't allowed to use */
body[data-nocsvexport] .csv-export { display: none !important; }
body[data-nocsvimport] .csv-import { display: none !important; }

.group-stamp-notice {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-lg);
    border: 1px solid var(--warning-border); background: var(--warning-bg); font-size: 13px;
}
.group-stamp-notice[hidden] { display: none; }
.group-stamp-notice > i { color: var(--warning); font-size: 18px; }
.group-stamp-notice__text { flex: 1 1 260px; min-width: 0; }

/* An account limited to one unit group does not pick a group. */
body[data-unit-scope] #damageGroupFilter { display: none !important; }

/* ===== User access editor ===== */
.access-grid { display: flex; flex-direction: column; gap: 10px; }
.access-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-light);
}
.access-row__label { font-size: 13.5px; font-weight: 600; }
.access-row .access-select { width: 150px; }
.access-row__label small { display: block; font-size: 11.5px; font-weight: 400; color: var(--text-secondary); }
.access-row__applies { color: var(--warning) !important; }
.access-row--scope { border-color: var(--primary); }
.access-row--scope .access-select { width: 220px; }
.access-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.access-scope-note { margin: 0; padding: 8px 10px; border-radius: var(--radius); background: var(--warning-bg); color: var(--text); font-size: 12.5px; }
.access-scope-note[hidden] { display: none; }
@media (max-width: 560px) { .access-row--scope .access-select { width: 100%; } }

/* ===== Bulk edit units ===== */
.bulk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-light);
}
.bulk-row > label {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 170px;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.bulk-row > .form-input, .bulk-row > .form-select { flex: 1; }

/* ============================================================
   TEAM OPERATIONS — shift schedule + daily work logs
   ============================================================ */

.team-tabbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
}
.team-tabs {
    display: flex;
    gap: 6px;
}
/* Sits on the same line as the tabs, lifted clear of the underline. */
#btnTeamMembers { margin-bottom: 8px; }
.team-no-panel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}
.team-no-panel p { margin: 0; }
.team-no-panel i { font-size: 20px; color: var(--text-light); }
.team-tab {
    padding: 10px 18px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 6px 6px 0 0;
}
.team-tab:hover { background: var(--bg); color: var(--text); }
.team-tab.active {
    color: var(--accent-text);
    border-bottom-color: var(--primary);
    background: var(--card);
}

.week-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
/* The arrows are icon-only, so they need their own floor to stay tappable. */
.week-nav > .btn { min-width: 34px; }
.week-nav__label {
    min-width: 170px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

/* ---- Shift grid ---- */
/* Fixed layout so all 7 days fit a desktop wrapper without clipping Sunday;
   min-width keeps the cells readable on a phone, where the wrapper scrolls. */
.shift-grid {
    width: 100%;
    table-layout: fixed;
    min-width: 720px;
}
.shift-grid th,
.shift-grid td {
    text-align: center;
    vertical-align: middle;
    padding: 8px 6px;
}
/* The member cell is a <th scope="row">, so it inherits the column-header look
   from .data-table th — including white-space:nowrap, which made long names
   spill over the fixed-width column and sit on top of the first shift cell.
   Undo the header styling here and let the name wrap instead. */
.shift-grid .shift-grid__member {
    text-align: left;
    width: 180px;
    padding-left: 14px;
    background: var(--card);
}
/* Only the body rows are names — the thead and tfoot cells are labels and keep
   the uppercase column-header look of the day columns beside them. */
.shift-grid tbody .shift-grid__member {
    font-weight: 600;
    font-size: 13px;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text);
    cursor: default;
    white-space: normal;
    /* break-word, not anywhere: split a word only when it cannot fit on a
       line of its own, so names wrap between words wherever possible. */
    overflow-wrap: break-word;
    line-height: 1.35;
}
/* Job titles can be long ("Tenaga Operational Technician"); keep them to one
   line with an ellipsis and the full text in the tooltip. */
.shift-grid__job {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-light);
}
.shift-grid th.is-today,
.shift-grid td.is-today { background: var(--bg); }
.shift-grid thead th.is-today { color: var(--accent-text); }

.shift-select {
    width: 100%;
    min-width: 0;
    padding: 5px 4px;
    border: 1px solid var(--border);
    border-radius: 5px;
    background: var(--card);
    font-family: inherit;
    font-size: 12px;
    color: var(--text);
    cursor: pointer;
}
.shift-select--pagi   { background: var(--success-bg); color: var(--success); }
.shift-select--siang  { background: var(--warning-bg); color: var(--warning); }
.shift-select--malam  { background: var(--info-bg);    color: var(--info); }
.shift-select--libur  { background: var(--bg);         color: var(--text-light); }

.shift-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
}
.shift-badge--pagi  { background: var(--success-bg); color: var(--success); }
.shift-badge--siang { background: var(--warning-bg); color: var(--warning); }
.shift-badge--malam { background: var(--info-bg);    color: var(--info); }
.shift-badge--libur { background: var(--bg);         color: var(--text-light); }
.shift-empty { color: var(--text-light); }

.shift-grid tfoot td,
.shift-grid tfoot th {
    border-top: 2px solid var(--border);
    font-size: 12px;
    color: var(--text-secondary);
}
.shift-foot__detail {
    display: block;
    font-size: 10.5px;
    color: var(--text-light);
}

/* ---- Work log filters ---- */
.wl-filter-date {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
}
.wl-filter-date .form-input {
    width: auto;
    padding: 5px 8px;
    font-size: 12px;
}

/* ---- Team member list ---- */
/* Name on its own line, job title and status beneath it — otherwise a long
   name and a long job title flow into one paragraph that wraps around the
   action buttons. min-width:0 lets the ellipsis actually kick in. */
.member-item { gap: 10px; }
.member-item__info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.member-item__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    min-width: 0;
}
.member-item .row-actions { flex-shrink: 0; }
.member-item__job {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--text-light);
}
.member-item__off {
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 10.5px;
    color: var(--text-light);
}
.member-item.is-inactive .category-item__name strong { color: var(--text-light); }
.team-add-form { flex-wrap: wrap; }
.team-add-form #newMemberName { flex: 2 1 160px; }
.team-add-form #newMemberJob  { flex: 1 1 120px; }

@media (max-width: 700px) {
    .team-tab { flex: 1; padding: 10px 8px; font-size: 13px; }
    .week-nav__label { min-width: 0; flex: 1; font-size: 13px; }
    .wl-filter-date { flex: 1 1 100%; }
    .wl-filter-date .form-input { flex: 1; }
    .shift-grid .shift-grid__member { width: 132px; padding-left: 10px; }
    .shift-foot__detail { display: none; }
    /* Narrow rows: let the buttons drop to their own line instead of squeezing
       the name into a two-character column. */
    .member-item { flex-wrap: wrap; }
    .member-item .row-actions { width: 100%; justify-content: flex-end; }
}

/* Shown in place of a chart when the Chart.js CDN could not be reached. */
.chart-unavailable {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    text-align: center;
    color: var(--text-light);
    font-size: 13px;
    font-style: italic;
}

/* Build marker in the footer — makes "am I on the new version?" answerable
   by looking at the page instead of guessing at caches. */
.footer__version {
    margin-left: 8px;
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: var(--text-light);
}

/* ---- Shift grid: company grouping ---- */
.shift-group th,
.shift-group td {
    background: var(--bg);
    border-top: 2px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.shift-group__name {
    font-size: 12px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: var(--accent-text);
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.3;
    cursor: default;
}
.shift-group__count {
    display: block;
    font-size: 10.5px;
    font-weight: 400;
    color: var(--text-light);
}
.shift-group__cell {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Company field on each roster row — full width under the name so long
   company names are readable rather than squeezed beside the buttons. */
.member-item__company {
    width: 100%;
    max-width: 260px;
    padding: 3px 7px;
    font-size: 12px;
}

/* The roster is meant to be read at a glance, so it gets more height than the
   shared 420px table cap before it starts scrolling. */
.shift-grid-wrapper { max-height: min(70vh, 760px); }

/* When it does scroll — long roster, or sideways on a phone — the day headings
   and the member column stay put, otherwise the cells lose their labels.
   Sticky cells need their own background or the rows show through. */
.shift-grid thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--bg);
}
.shift-grid tbody .shift-grid__member,
.shift-grid tfoot .shift-grid__member {
    position: sticky;
    left: 0;
    z-index: 1;
}
.shift-grid thead .shift-grid__member { z-index: 3; }
.shift-grid tbody .shift-group__name { background: var(--bg); }
.shift-grid tfoot th,
.shift-grid tfoot td {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--card);
}
.shift-grid tfoot .shift-grid__member { z-index: 3; }

/* ---- Daily report table: fit 10 columns on a desktop ---- */
/* .data-table td is nowrap, so a long name or company name forced the table
   224px wider than its card and pushed the last columns out of sight. These
   two wrap instead; the rest stay on one line. */
#workLogTable td[data-label="Member"],
#workLogTable td[data-label="Company"] {
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 150px;
    line-height: 1.35;
}
#workLogTable td[data-label="Company"] { max-width: 130px; }

/* The report filters outgrew one line once the company filter joined them. */
#teamWorkLogPanel .edit-toolbar__right {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
}

/* ---- Work log form: unit chips, paddock, field documentation ---- */
.wl-unit-add {
    display: flex;
    gap: 8px;
    align-items: stretch;
}
.wl-unit-add .form-input { flex: 1; min-width: 0; }
.wl-unit-add .btn { white-space: nowrap; flex-shrink: 0; }

.unit-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    min-height: 26px;
}
.unit-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 6px 3px 10px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    font-size: 12px;
    color: var(--text);
}
.unit-chip__x {
    border: none;
    background: none;
    padding: 0 3px;
    font-size: 15px;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
}
.unit-chip__x:hover { color: var(--danger); }
.unit-chip__empty { font-size: 12px; color: var(--text-light); font-style: italic; }

.wl-photo-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.wl-photo-hint { font-size: 11.5px; color: var(--text-light); }
.wl-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.wl-photo { position: relative; }
.wl-photo img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid var(--border);
    cursor: zoom-in;
    display: block;
}
.wl-photo__x {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--card);
    font-size: 13px;
    line-height: 1;
    color: var(--danger);
    cursor: pointer;
}

/* Duration sits under the start–end range so the two share one column. */
.wl-duration {
    display: block;
    font-size: 11px;
    color: var(--text-light);
}
#workLogTable td[data-label="Photos"] {
    white-space: normal;
    max-width: 120px;
}
#workLogTable td[data-label="Unit"] {
    white-space: normal;
    max-width: 150px;
    line-height: 1.7;
}
#workLogTable td[data-label="Paddock"] {
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 110px;
}

/* Eleven columns only fit once these three are held down. Unit badges keep
   their name on one line — broken across three lines they were unreadable. */
#workLogTable td[data-label="Unit"] {
    max-width: 112px;
    line-height: 1.9;
}
#workLogTable td[data-label="Unit"] .badge { white-space: nowrap; }
#workLogTable td[data-label="Photos"] { max-width: 96px; }
#workLogTable td[data-label="Photos"] .dmg-thumb {
    width: 30px;
    height: 30px;
    margin: 1px;
}
/* Eleven columns need tighter gutters than the shared 14px; this buys back
   more room than squeezing any single column would, and evenly. */
#workLogTable th,
#workLogTable td {
    padding-left: 8px;
    padding-right: 8px;
}
/* max-width alone does not clip a nowrap cell — the text simply spilled over
   the next column. The full value stays available as the cell's tooltip. */
#workLogTable td[data-label="Work Description"],
#workLogTable td[data-label="Issues"] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================
   WAREHOUSE — device status pills, stock summary chips
   ============================================================ */
.wh-status {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.wh-status--warehouse { background: var(--info-bg);    color: var(--info); }
.wh-status--installed { background: var(--success-bg); color: var(--success); }
.wh-status--damaged   { background: var(--danger-bg);  color: var(--danger); }
.wh-status--repair    { background: var(--warning-bg); color: var(--warning); }
.wh-status--retired   { background: var(--bg);         color: var(--text-light); }
.wh-status--allocated { background: var(--info-bg);    color: var(--info); border: 1px dashed var(--info); }
/* Six device states fit one row on a wide screen. */
#whDevicePanel .downtime-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.wh-txn {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.wh-txn--in  { background: var(--success-bg); color: var(--success); }
.wh-txn--out { background: var(--warning-bg); color: var(--warning); }

.wh-install-hint {
    margin: 0 0 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.stock-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
}
.stock-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    font-size: 13px;
}
.stock-chip__name { color: var(--text); }
.stock-chip__qty {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
/* Running low, and gone — the two states worth noticing at a glance. */
.stock-chip--low {
    background: var(--warning-bg);
    border-color: var(--warning-border);
}
.stock-chip--low .stock-chip__name,
.stock-chip--low .stock-chip__qty { color: var(--warning); }
.stock-chip--out {
    background: var(--danger-bg);
    border-color: var(--danger-border);
}
.stock-chip--out .stock-chip__name,
.stock-chip--out .stock-chip__qty { color: var(--danger); }
.stock-empty {
    padding: 4px;
    font-size: 13px;
    font-style: italic;
    color: var(--text-light);
}

/* Nine columns; the same treatment the daily report needed. */
#deviceTable th,
#deviceTable td {
    padding-left: 8px;
    padding-right: 8px;
}
#deviceTable td[data-label="Notes"],
#deviceTable td[data-label="Location"] {
    white-space: normal;
    overflow-wrap: break-word;
    max-width: 140px;
}
/* Five device statuses, not four — otherwise the fifth drops to its own row
   and leaves three empty cells beside it. */
#whDevicePanel .downtime-kpis { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
    #whDevicePanel .downtime-kpis { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    #whDevicePanel .downtime-kpis { grid-template-columns: 1fr; }
}

/* ---- Daily report approval ---- */
.appr {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.appr--pending  { background: var(--warning-bg); color: var(--warning); }
.appr--approved { background: var(--success-bg); color: var(--success); }
.appr--revision { background: var(--danger-bg);  color: var(--danger); }
.appr--draft    { background: var(--border-light); color: var(--text-secondary); }
/* The checker's note, readable in the table without a hover. */
.appr-note {
    display: block;
    max-width: 160px;
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--danger);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.row-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--text-light);
    cursor: help;
}
.team-tab__count--alert { background: var(--danger); color: #fff; }

/* Sender's side of approval: what came back and what is still out. */
.my-notice {
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--border-light);
    background: var(--info-bg);
    font-size: 13px;
}
.my-notice--alert { background: var(--danger-bg); border-color: var(--danger); }
.my-notice__head { font-weight: 700; color: var(--danger); margin-bottom: 8px; }
.my-notice__list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.my-notice__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.my-notice__note { display: block; font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.my-notice__facts {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
}
.revision-note {
    margin-bottom: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--danger-bg);
    color: var(--danger);
    font-size: 13px;
    overflow-wrap: anywhere;
}
.mine-filter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    white-space: nowrap;
    cursor: pointer;
}
@media (max-width: 700px) {
    .my-notice__list li { flex-direction: column; align-items: stretch; }
}
.appr-actions {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}
.appr-btn {
    width: 26px;
    height: 24px;
    min-width: 0;
    padding: 0;
    font-size: 11px;
    line-height: 1;
}
/* Jenis izin. Warnanya membedakan yang berketerangan dari yang tidak —
   alpa memang harus terlihat berbeda dari izin dan sakit. */
.lv-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}
.lv-type--izin  { background: var(--info-bg);    color: var(--info); }
.lv-type--sakit { background: var(--warning-bg); color: var(--warning); }
.lv-type--alpa  { background: var(--danger-bg);  color: var(--danger); }

#leaveTable td[data-label="Approval"] {
    white-space: normal;
    max-width: 110px;
}

/* Penanda izin di grid shift: menempel di samping pilihan shift, tidak
   menggantikannya. Jadwalnya tetap milik penyusun jadwal. */
.shift-leave {
    display: block;
    margin-top: 3px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.shift-leave--izin  { background: var(--info-bg);    color: var(--info); }
.shift-leave--sakit { background: var(--warning-bg); color: var(--warning); }
.shift-leave--alpa  { background: var(--danger-bg);  color: var(--danger); }

#workLogTable td[data-label="Approval"] {
    white-space: normal;
    max-width: 110px;
}
/* The four KPIs of the report tab; the shared grid is four across already, so
   this only pins it against the five-column warehouse override. */
#teamWorkLogPanel .downtime-kpis { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   KOTAK KEPUTUSAN — one place for everything awaiting a decision
   ============================================================ */
.nav__badge {
    margin-left: auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.nav__link { display: flex; align-items: center; gap: 10px; }

.decision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.decision-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--card);
    border: 1px solid var(--border);
    /* The left edge carries the severity, so the card reads at a glance
       without colouring the whole surface. */
    border-left: 4px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.decision-card--danger  { border-left-color: var(--danger); }
.decision-card--warning { border-left-color: var(--warning); }
.decision-card--info    { border-left-color: var(--info); }

.decision-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.decision-card__title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
}
.decision-card__count {
    flex-shrink: 0;
    min-width: 26px;
    padding: 2px 8px;
    border-radius: 11px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.decision-card--danger  .decision-card__count { background: var(--danger-bg);  color: var(--danger); }
.decision-card--warning .decision-card__count { background: var(--warning-bg); color: var(--warning); }
.decision-card--info    .decision-card__count { background: var(--info-bg);    color: var(--info); }

.decision-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}
.decision-list li {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 12.5px;
}
.decision-list li:last-child { border-bottom: none; }
.decision-list__text { display: block; color: var(--text); }
.decision-list__sub {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.decision-list__more { color: var(--text-light); font-style: italic; }
.decision-card .btn { align-self: flex-start; }

.decision-clear {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 28px;
    background: var(--success-bg);
    border: 1px solid var(--success-border);
    border-radius: 8px;
    color: var(--success);
}
.decision-clear i { font-size: 26px; }
.decision-clear p { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); }

/* ============================================================
   CETAK — what actually belongs on paper
   ============================================================ */
.print-header { display: none; }

@media print {
    /* Navigation, toolbars and anything clickable are useless on paper. */
    .sidebar,
    .topbar,
    .footer,
    .edit-toolbar,
    .nav__badge,
    #toastContainer,
    .modal-overlay,
    .decision-card .btn { display: none !important; }

    /* Containers only. .view must NOT be forced visible here: the hidden views
       carry an inline display:none, and overriding it printed every page of
       the app instead of the one on screen. */
    .app-shell,
    .app-body,
    main {
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }
    .view { margin: 0 !important; padding: 0 !important; }

    body {
        background: #fff;
        font-size: 11pt;
    }

    .print-header {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        border-bottom: 2px solid #000;
        font-size: 12pt;
    }
    .print-header span { font-size: 9pt; color: #444; }

    /* Two columns fit an A4 width; a card split across a page break is
       unreadable, so cards are kept whole. */
    .decision-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .decision-card {
        break-inside: avoid;
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #999;
        border-left-width: 3px;
    }
    .decision-list__sub { white-space: normal; }

    /* The count tiles read as a summary line rather than three big boxes. */
    .downtime-kpis { grid-template-columns: 1fr !important; }
    .downtime-kpi { box-shadow: none; border: 1px solid #999; }
}

/* ---- Ringkasan mingguan ---- */
.week-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.week-metric {
    padding: 14px 16px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: var(--shadow);
}
.week-metric__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}
.week-metric__value {
    margin: 4px 0 6px;
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.week-metric__delta {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-light);
}
/* Direction alone does not say whether a number is good news — fewer
   breakdowns is an improvement, fewer reports is not — so the colour comes
   from the metric, not from the sign. */
.week-metric__delta--good { color: var(--success); }
.week-metric__delta--bad  { color: var(--danger); }
.week-metric__prev {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-light);
}
/* ===== Periksa Data ===== */
.datacheck-group { margin-bottom: 22px; }
.datacheck-group h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
}
.datacheck-count {
    background: var(--warning-bg);
    color: var(--warning);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.week-health {
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
#recapTable tfoot td,
#recapTable tfoot th {
    border-top: 2px solid var(--border);
    background: var(--bg);
    font-weight: 600;
}
@media print {
    .team-tabbar { display: none !important; }
    .week-grid { grid-template-columns: repeat(3, 1fr); }
    .week-metric { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
}

/* ============================================================
   PHONE — touch sizing and readability
   ------------------------------------------------------------
   Measured in Chromium at 360x740, every view, with real data. What this
   fixes, in order of how much it hurts:

   1. Every form control was 13px. Safari on iPhone zooms the page whenever a
      field smaller than 16px takes focus, and does not zoom back — so filling
      in one damage report left the whole app magnified and scrolling
      sideways. 16px is the threshold, not a preference.
   2. .btn-sm rendered 22px tall. That is the height of "Tandai selesai",
      "Kelola Anggota", "Minggu Ini", "Cetak", "Tangani", "Reset" — the main
      action on most pages. Checkboxes measured 12px.
   3. Labels and badges at 10-10.5px.

   44px is the usual touch guidance. In a dense table that would push half the
   rows off screen, so controls inside tables settle at 40px and standalone
   ones at 44px. Everything here is still far better than 22.
   ============================================================ */
@media (max-width: 700px) {
    /* --- 1. No more iOS zoom-on-focus --- */
    .form-input,
    .form-select,
    textarea.form-input,
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="date"], input[type="time"],
    input[type="search"], input[type="month"], select, textarea {
        font-size: 16px;
    }
    .form-input, .form-select, select, textarea.form-input,
    .global-search input {
        min-height: 44px;
        padding: 10px 12px;
    }
    textarea.form-input { min-height: 88px; }

    /* --- 2. Touchable controls --- */
    /* min-width matters as much as height: several buttons carry only an icon,
       and measured 30px wide however tall they were. */
    .btn { min-height: 44px; min-width: 44px; }
    .btn-sm {
        min-height: 40px;
        min-width: 40px;
        padding: 8px 14px;
        font-size: 13px;
    }
    .btn-icon { width: 44px; height: 44px; }
    /* Card-view tables grow with their content; the page scrolls, not a
       600px box inside it (the inline max-height on each wrapper won). */
    .table-wrapper:has(> .table--cardable) { max-height: none !important; }
    /* Forms get the whole screen: a 20px frame around a 90% card wastes a
       fifth of a phone's height on a form that is already long. */
    .modal-overlay { padding: 8px; align-items: flex-end; }
    .modal-card { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); border-radius: var(--radius-lg); }
    .modal-body { padding: 16px; }
    .form-actions { padding: 12px 16px; }
    .wl-photo-btn { min-height: 40px; padding: 8px 14px; }

    /* A checkbox cannot grow much without looking wrong, so the label around
       it carries the rest of the tap area — every one of them is wrapped in a
       <label>, so tapping the words already works. */
    input[type="checkbox"], input[type="radio"] {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }
    .form-group label:has(input[type="checkbox"]),
    .bulk-field label:has(input[type="checkbox"]) { min-height: 40px; }

    /* The burger is the only way back to the menu; it needs a real hit area
       even when the icon font has not loaded. */
    .topbar__burger {
        min-width: 44px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Inline editing happens cell by cell, so these stay a little tighter than
       a standalone control — but not 29px. */
    .inline-edit { display: inline-block; min-height: 36px; padding: 8px 4px; }

    /* --- 3. Readable text --- */
    .nav-group__label,
    .shift-group__count,
    .downtime-kpi__label,
    .audit-badge,
    .data-table th { font-size: 12px; }

    /* Badges carry an inline font-size:10px set in script.js — deliberate for
       desktop density, unreadable on a phone. Overriding it here keeps the
       twenty call sites alone; an inline style is the one thing !important is
       actually for. */
    .badge { font-size: 12px !important; }

    /* --- Empty states stop forcing a sideways scroll ---
       .data-table td is nowrap, and the "Belum ada unit…" message is a long
       sentence in a colspan cell — so an empty or fully-filtered table pushed
       the page 80px wider than the screen. Hits on a fresh install and on any
       filter that matches nothing. */
    .data-table td[colspan] {
        white-space: normal;
        word-break: break-word;
    }

    /* --- Weekly shift grid ---
       Eight columns need 720px and the phone has 360, so it scrolls sideways —
       and once it did, the name column scrolled away with it and every row
       became an anonymous line of dropdowns. A seven-day grid does not
       usefully become cards either: stacked, one person would be 300px tall.

       So: keep the week, pin the name. The member column stays put while the
       days scroll under it, with a shadow on its edge so it is obvious there
       is more to the right. Day columns tighten to fit more of the week on
       screen at once. */
    .shift-grid { min-width: 540px; }
    .shift-grid th,
    .shift-grid td { padding: 8px 3px; }

    .shift-grid .shift-grid__member {
        position: sticky;
        left: 0;
        z-index: 5;
        width: 116px;
        padding-left: 10px;
        box-shadow: 2px 0 4px -2px rgb(0 0 0 / 0.18);
    }
    /* thead is already sticky-top; the corner cell has to outrank both. */
    .shift-grid thead .shift-grid__member { z-index: 11; }
    .shift-grid tbody .shift-grid__member { background: var(--card); }
    .shift-grid tfoot .shift-grid__member { background: var(--bg); }

    /* Tall enough to tap, narrow enough that the week still fits the scroll. */
    .shift-select { min-height: 40px; font-size: 13px; padding: 6px 2px; }

    .shift-grid-wrapper { -webkit-overflow-scrolling: touch; }
}

/* ---- Licence sync preview ---- */
.btn-count {
    display: inline-block;
    min-width: 18px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 9px;
    background: var(--warning-bg);
    color: var(--warning);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
}
.btn-count[hidden] { display: none; }
.lic-sync__unit { display: inline-flex; flex-direction: column; gap: 2px; min-width: 0; }
.lic-sync__sn { font-family: monospace; font-size: 11px; color: var(--text-secondary); overflow-wrap: anywhere; }
.lic-sync__date { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
#licSyncBody td { white-space: normal; }
.lic-sync__why { font-size: 12px; color: var(--text-secondary); min-width: 200px; }
.lic-sync__row--newer, .lic-sync__row--newer td { background: var(--warning-bg); }
@media (max-width: 700px) {   /* the card breakpoint of .table--cardable */
    .lic-sync__why { min-width: 0; text-align: right; }
    .lic-sync__unit { align-items: flex-end; text-align: right; }
}

/* Status Unit column in the licence ledger */
.lic-status {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px; border: 1px solid transparent;
    font-size: 11px; font-weight: 600; white-space: nowrap;
}
.lic-status--ok    { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.lic-status--todo  { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.lic-status--info  { background: var(--info-bg);    color: var(--info);    border-color: var(--info-border); }
.lic-status--warn  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger-border); }
.lic-status--muted { background: transparent;       color: var(--text-light); border-color: var(--border-light); }

/* ============================================================
   PHONE TOPBAR — must fit the screen
   ------------------------------------------------------------
   On a phone the topbar held the burger, "216 Units", "Updated: …",
   a 130px search box and "name + SUPER ADMIN", all nowrap: ~600px on a
   390px screen. iOS answers content wider than the viewport by zooming
   the WHOLE page out to fit it, so every page rendered as a narrow column
   with a blank strip on the right. The timestamp goes, the name shortens
   to the role badge, and the search takes whatever room is left.
   ============================================================ */
@media (max-width: 900px) {
    .topbar { gap: 8px; padding: 0 10px 0 4px; }
    #lastUpdated, .topbar__spacer, .user-pill__name, .user-pill__chev { display: none; }
    .header__status { flex-shrink: 0; font-size: 12px; }
    .global-search { flex: 1 1 auto; min-width: 0; }
    .global-search input { width: 100%; min-width: 0; }
    .global-search__results { width: min(300px, calc(100vw - 24px)); }
    .user-pill { flex-shrink: 0; padding-left: 8px; padding-right: 8px; gap: 6px; }
}
/* Safety net: whatever else ever grows too wide is clipped here instead of
   zooming the page out. `clip`, not `hidden`, so the sticky topbar still
   sticks (clip makes no scroll container). */
.app-shell { max-width: 100vw; overflow-x: clip; }
/* The sticky-column shadows belong to the desktop table. In the phone card
   layout the cells are no longer sticky, so the shadow anchored to the page
   instead and poked 4px past the screen edge. */
@media (max-width: 700px) {
    #editTable td:nth-child(3)::after, #editTable th:nth-child(3)::after,
    #editTable td:last-child::before, #editTable th:last-child::before { content: none; }
}

/* ---- Phone proportions ----
   One KPI per row turned the dashboard into a long ledger of 44px numbers,
   and the work-log KPIs were pinned to four columns at every width, which
   squeezed each label to one word per line and pushed the fourth tile off
   the screen. Two columns on a phone, smaller figures, and unit chips that
   wrap instead of running past the card. */
@media (max-width: 600px) {
    .kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .kpi-grid .kpi-card { padding: 14px 12px 14px; }
    .kpi-grid .kpi-card__value { font-size: 32px; }
    .kpi-grid .kpi-card__sub { font-size: 11.5px; }
    .kpi-grid .kpi-card:nth-child(odd):last-child { grid-column: 1 / -1; }
    .dash-narrative { font-size: 17px; margin-bottom: 16px; }

    .downtime-kpis,
    #teamWorkLogPanel .downtime-kpis,
    #whDevicePanel .downtime-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .downtime-kpi { padding: 10px 12px; min-width: 0; }
    .downtime-kpi__value { font-size: 22px; }
    .downtime-kpi__sub { font-size: 11px; line-height: 1.35; }
}
@media (max-width: 700px) {
    .table--cardable td[data-label="Unit"] { flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
    .table--cardable td .badge-cat { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
/* Report and leave filters: eight controls stacked one per row pushed the
   reports a full screen down. Two per row, the search across both. */
@media (max-width: 600px) {
    #teamWorkLogPanel .edit-toolbar__right,
    #teamLeavePanel .edit-toolbar__right {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        align-items: center;
    }
    #teamWorkLogPanel .edit-toolbar__right > *,
    #teamLeavePanel .edit-toolbar__right > * { min-width: 0; width: 100%; }
    #teamWorkLogPanel .edit-search, #teamLeavePanel .edit-search { grid-column: 1 / -1; }
    #teamWorkLogPanel .wl-filter-date, #teamLeavePanel .wl-filter-date { display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-size: 11px; }
    #teamWorkLogPanel .wl-filter-date input, #teamLeavePanel .wl-filter-date input { width: 100%; min-width: 0; }
    #workLogCount, #leaveCount { text-align: right; font-size: 12px; }
}

/* Any phone, any brand: layout follows the screen WIDTH, so what matters is
   covering every width a phone reports — 320px (small/older Android, iPhone
   SE 1st gen) up to ~430px portrait, and 640–930px when turned sideways.
   The rules below close the gaps found at those widths. */

/* Wide-but-not-desktop (landscape phones, small tablets with the sidebar
   showing): the timestamp is the first thing to give way. */
@media (max-width: 1200px) {
    #lastUpdated { display: none; }
    .user-pill__name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; }
    .global-search { min-width: 0; flex: 0 1 auto; }
    .global-search input { min-width: 0; }
}

/* 320px: grid and flex children default to min-width:auto, so a 300px chart
   or a 320px minimum card pushed past the screen. */
.downtime-grid > * { min-width: 0; }
.decision-grid { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.team-tabs { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.team-tabs::-webkit-scrollbar { display: none; }
/* A chart canvas is 300px wide until Chart.js sizes it — and stays so if the
   library never loads (no signal). Never wider than its card. */
canvas { max-width: 100%; }

/* ---- Persetujuan cell: one aligned block ----
   The badge sized to its word and the buttons to their icons, so "Menunggu",
   "Disetujui" and the ✓ ↺ pair below them all started and ended at different
   points from row to row. Now: a fixed-width block, the badge across it,
   the buttons splitting it evenly (one button takes the whole width). */
.appr-cell {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    width: 104px;
}
.appr-cell .appr { display: block; text-align: center; padding: 3px 8px; }
.appr-cell .appr-note { max-width: 104px; }
.appr-cell .appr-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 4px;
    margin: 0;
}
.appr-cell .appr-btn {
    width: 100%;
    height: 28px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: var(--surface-raised);
}
.appr-cell .appr-btn--ok  { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.appr-cell .appr-btn--ok:hover  { background: var(--success-bg); }
.appr-cell .appr-btn--rev { color: var(--warning); border-color: color-mix(in srgb, var(--warning) 35%, var(--border)); }
.appr-cell .appr-btn--rev:hover { background: var(--warning-bg); }
td[data-label="Approval"] { vertical-align: middle; }
@media (max-width: 700px) {
    .appr-cell { width: 120px; }
    .appr-cell .appr-btn { height: 36px; }
}

/* ============================================================
   PENGECEKAN ALAT BERAT
   ============================================================ */
.ins-st {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.ins-st--overdue { background: var(--danger-bg);  color: var(--danger); }
.ins-st--soon    { background: var(--warning-bg); color: var(--warning); }
.ins-st--ok      { background: var(--success-bg); color: var(--success); }
.ins-st--never   { background: var(--border-light); color: var(--text-secondary); }
.ins-st--chip { display: flex; width: max-content; margin-top: 4px; border: none; cursor: pointer; font-family: inherit; }
.ins-st--chip:hover { filter: brightness(0.96); }
.ins-sub { font-size: 11px; color: var(--text-light); margin-top: 2px; }
.ins-res {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 8px;
    font-size: 11px;
    white-space: nowrap;
}
.ins-res--good { background: var(--success-bg); color: var(--success); }
.ins-res--bad  { background: var(--danger-bg);  color: var(--danger); font-weight: 600; }
.ins-res--none { background: var(--border-light); color: var(--text-secondary); }
.ins-res-list { display: flex; flex-wrap: wrap; gap: 4px; max-width: 280px; }
.ins-tag { display: inline-block; padding: 1px 7px; border-radius: 8px; font-size: 11px; background: var(--info-bg); color: var(--info); white-space: nowrap; }
.ins-tag--queued { background: var(--warning-bg); color: var(--warning); }
/* Reports filed with no signal: how many are still on this device. */
.ins-sync {
    margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; font-size: 13px;
    border: 1px solid var(--warning); background: var(--warning-bg); color: var(--text-primary);
    overflow-wrap: anywhere;
}
.ins-sync i { color: var(--warning); margin-right: 6px; }
.ins-sync--offline { border-color: var(--border-light); background: var(--info-bg); }
.ins-sync--offline i { color: var(--info); }
.ins-tag--adhoc { background: var(--border-light); color: var(--text-secondary); }
.ins-chips { display: flex; flex-wrap: wrap; gap: 4px; max-width: 420px; }
.ins-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 4px 2px 8px; border-radius: 8px; font-size: 11px;
    background: var(--warning-bg); color: var(--warning);
}
.ins-chip--done { background: var(--success-bg); color: var(--success); padding-right: 8px; }
.ins-chip__go {
    border: none; background: var(--surface-raised); color: var(--accent-text);
    border-radius: 6px; width: 22px; height: 20px; cursor: pointer; font-size: 10px;
}
.ins-apply { margin-bottom: 6px; white-space: nowrap; }

/* Form */
.ins-help { font-size: 12px; color: var(--text-secondary); margin: 4px 0 12px; }
.ins-plan-tag {
    display: inline-block; margin-bottom: 12px; padding: 4px 10px; border-radius: 8px;
    font-size: 12px; background: var(--info-bg); color: var(--info);
}
.ins-plan-tag--adhoc { background: var(--border-light); color: var(--text-secondary); }
.ins-components { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ins-comp {
    border: 1px solid var(--border-light); border-radius: 10px; padding: 10px;
    background: var(--bg); min-width: 0;
}
.ins-comp__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.ins-comp__body { display: flex; gap: 10px; align-items: flex-start; }
.ins-comp__note { flex: 1; min-width: 0; }
.ins-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ins-seg__opt { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.ins-seg__opt input { margin: 0; }
.ins-seg__opt--good:has(input:checked) { background: var(--success-bg); color: var(--success); font-weight: 600; }
.ins-seg__opt--bad:has(input:checked)  { background: var(--danger-bg);  color: var(--danger);  font-weight: 600; }
.ins-photo { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.ins-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 8px; cursor: zoom-in; display: block; }
.ins-photo__x {
    position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
    border: none; background: var(--danger); color: #fff; cursor: pointer; line-height: 1;
}
.ins-photo__add, .ins-photo__empty {
    width: 72px; height: 72px; border: 1px dashed var(--border); border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 11px; color: var(--text-secondary); cursor: pointer; background: var(--surface-raised);
}
.ins-photo__add.is-off { opacity: 0.5; cursor: not-allowed; }
.ins-plan-pick__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 6px 0 8px; font-size: 13px; font-weight: 600; flex-wrap: wrap; }
.ins-plan-pick { max-height: 320px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: 10px; }
.ins-pick { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
.ins-pick:last-child { border-bottom: none; }
.ins-pick__name { flex: 1; min-width: 0; font-size: 13px; }
.ins-pick__name .ins-sub { display: block; }
@media (max-width: 700px) {
    .ins-components { grid-template-columns: 1fr; }
    .ins-seg__opt { padding: 8px 12px; }
    .ins-chips, .ins-res-list { justify-content: flex-end; }
}

/* ---- Unit Database: units per implement / work tool ---- */
.tool-summary {
    background: var(--card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.tool-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.tool-summary__title { font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.tool-summary__meta { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool-summary__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.tool-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 6px 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: none;
    font: inherit;
    font-size: 13px;
    color: var(--text);
    text-align: left;
    cursor: pointer;
}
.tool-row:hover { background: var(--bg); }
.tool-row.is-on { background: var(--primary-lighter, var(--bg)); border-color: var(--accent); }
.tool-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tool-row--none .tool-row__name { color: var(--text-secondary); font-style: italic; }
.tool-row__bar { height: 8px; border-radius: 4px; background: var(--border-light); overflow: hidden; }
.tool-row__bar span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.tool-row--none .tool-row__bar span { background: var(--text-light); }
.tool-row__count { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; }
.tool-row__count small { font-weight: 400; color: var(--text-light); margin-left: 6px; font-size: 11px; }
.tool-summary__list { align-items: start; }
.tool-item { min-width: 0; }
.tool-row { width: 100%; }
.tool-brands { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 6px; }
.tool-brand {
    border: 1px solid var(--border-light); background: var(--bg); color: var(--text-secondary);
    border-radius: 999px; padding: 1px 8px; font: inherit; font-size: 11px; cursor: pointer;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tool-brand b { color: var(--text); font-weight: 700; margin-left: 2px; }
.tool-brand:hover { border-color: var(--accent); }
.tool-brand.is-on { border-color: var(--accent); background: var(--primary-lighter, var(--bg)); color: var(--text); }
.tool-brand--none { font-style: italic; }
.tool-summary__more {
    margin-top: 8px; border: none; background: none; color: var(--accent-text);
    font: inherit; font-size: 12px; cursor: pointer; padding: 4px 8px;
}
@media (max-width: 700px) {
    .tool-summary__list { grid-template-columns: 1fr; }
    .tool-row { min-height: 40px; }
    .tool-brand { padding: 4px 10px; font-size: 12px; }
}

/* Shift grid: one-click fill for a member's week. */
.shift-fill {
    display: block; margin-top: 4px; width: 100%; max-width: 170px;
    font: inherit; font-size: 11px; color: var(--accent-text);
    background: transparent; border: 1px dashed var(--border); border-radius: 6px; padding: 2px 4px; cursor: pointer;
}
.shift-fill:hover, .shift-fill:focus { border-style: solid; border-color: var(--accent); }

/* Data completeness card (Unit Database). */
.dq {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap;
    background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius);
    padding: 12px 16px; margin-bottom: 12px;
}
.dq__score { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 320px; }
.dq__pct { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.dq--good .dq__pct { color: var(--success); }
.dq--warn .dq__pct { color: var(--warning); }
.dq--bad .dq__pct { color: var(--danger); }
.dq__text { min-width: 0; flex: 1; }
.dq__title { font-weight: 700; font-size: 14px; }
.dq__sub { font-size: 12px; color: var(--text-secondary); overflow-wrap: anywhere; }
.dq__bar { height: 6px; border-radius: 3px; background: var(--border-light); overflow: hidden; margin-top: 6px; max-width: 360px; }
.dq__bar span { display: block; height: 100%; background: currentColor; }
.dq--good .dq__bar span { background: var(--success); }
.dq--warn .dq__bar span { background: var(--warning); }
.dq--bad .dq__bar span { background: var(--danger); }
.dq__gaps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dq-chip {
    border: 1px solid var(--border-light); background: var(--bg); color: var(--text-secondary);
    border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; cursor: pointer;
}
.dq-chip b { color: var(--danger); margin-right: 2px; }
.dq-chip:hover { border-color: var(--accent); }
.dq-chip.is-on { border-color: var(--accent); background: var(--primary-lighter, var(--bg)); color: var(--text); }
.dq__ok { font-size: 12px; color: var(--success); }

/* Clean Up Values modal. */
.modal-card--vm { max-width: 640px; }
.vm-top { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 10px; }
.vm-top .form-label { margin: 0; }
.vm-suggest { font-size: 12.5px; margin-bottom: 10px; }
.vm-suggest__head { font-weight: 700; margin-bottom: 6px; }
.vm-suggest__head i { color: var(--warning); margin-right: 4px; }
.vm-suggest__row {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 6px 8px; border: 1px dashed var(--border); border-radius: 8px; margin-bottom: 4px; overflow-wrap: anywhere;
}
.vm-suggest__row small, .vm-row__count { color: var(--text-light); }
.vm-suggest__none { color: var(--text-secondary); font-size: 12px; padding: 4px 0; }
.vm-list { max-height: 240px; overflow-y: auto; border: 1px solid var(--border-light); border-radius: 8px; padding: 4px; margin-bottom: 10px; }
.vm-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.vm-row:hover { background: var(--bg); }
.vm-row.is-on { background: var(--primary-lighter, var(--bg)); }
.vm-row__name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.vm-row__count { font-size: 12px; white-space: nowrap; }
.vm-target { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; }
.vm-target .form-label { margin: 0; }
.vm-preview { font-size: 12.5px; color: var(--text-secondary); margin-top: 8px; }
.vm-result {
    margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--success-bg, var(--bg));
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px;
}
@media (max-width: 600px) {
    .vm-top, .vm-target { grid-template-columns: 1fr; }
    .dq-chip { padding: 6px 12px; }
}

/* A line under a form field: what the typed value will be saved as. */
.form-hint { font-size: 11.5px; color: var(--text-secondary); margin-top: 4px; min-height: 1em; overflow-wrap: anywhere; }
.form-hint--ok { color: var(--success); }
.form-hint--bad { color: var(--danger); }

/* Master Lists modal. */
.ml-tabs { flex-wrap: wrap; }
.ml-list { max-height: 300px; overflow-y: auto; margin-top: 10px; }
.ml-used { color: var(--text-light); font-size: 11.5px; margin-left: 6px; }
.ml-outside__head { font-weight: 700; font-size: 12.5px; margin: 14px 0 6px; }
.ml-outside__head i { color: var(--warning); margin-right: 4px; }
.ml-outside .categories-list { max-height: 220px; overflow-y: auto; }
#mlAddForm { flex-wrap: wrap; }

/* Sign-in: show-password eye, reset link, neutral notice. */
.pw-field { position: relative; }
.pw-field { display: block; width: 100%; }
.pw-field .form-input { width: 100%; box-sizing: border-box; padding-right: 44px; }
.pw-toggle {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 38px; height: 38px; border: none; background: none; cursor: pointer;
    color: var(--text-secondary); border-radius: 8px;
}
.pw-toggle:hover, .pw-toggle:focus-visible { color: var(--text); background: var(--bg); }
.auth-notice {
    font-size: 12.5px; padding: 8px 10px; border-radius: 8px; margin-bottom: 10px;
    background: var(--info-bg); color: var(--text); overflow-wrap: anywhere;
}
.auth-link {
    display: block; margin: 10px auto 0; border: none; background: none; cursor: pointer;
    font: inherit; font-size: 12.5px; color: var(--accent-text); text-decoration: underline; padding: 6px;
}

/* License purchase plan. */
.lp-until { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lp-until .form-input { width: auto; }
.lp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.lp-card { background: var(--card); border: 1px solid var(--border-light); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.lp-card--buy { border-color: var(--danger); }
.lp-card--combo { background: var(--bg); }
.lp-card__type { font-weight: 700; font-size: 13px; overflow-wrap: anywhere; }
.lp-card__big { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 4px; }
.lp-card--buy .lp-card__big { color: var(--danger); }
.lp-card__big small { font-size: 12px; font-weight: 400; color: var(--text-secondary); margin-left: 4px; }
.lp-card__sub { font-size: 12px; color: var(--text-secondary); }
.lp-empty { padding: 24px; text-align: center; color: var(--text-secondary); font-size: 13px; }
.lp-chip { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11.5px; margin: 1px 0; white-space: nowrap; }
.lp-chip--buy { background: var(--danger-bg); color: var(--danger); }
.lp-chip--renew { background: var(--warning-bg); color: var(--warning); }
.lp-chip--free { background: var(--info-bg); color: var(--info); }
.lp-chip--ok { background: var(--success-bg); color: var(--success); }
.lr-list { max-height: 60vh; overflow-y: auto; }
.lr-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--border-light); }
.lr-row--head { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); font-weight: 700; }
.lr-row__type { min-width: 0; overflow-wrap: anywhere; }
.lr-row__type small { display: block; color: var(--text-light); font-size: 11px; }
@media (max-width: 600px) {
    .lr-row { grid-template-columns: 1fr 1fr; }
    .lr-row__type { grid-column: 1 / -1; }
    .lr-row--head { display: none; }
}
#lpUnitTable td[data-label="To Do"] { white-space: normal; min-width: 240px; }
#lpUnitTable td[data-label="To Do"] .lp-chip { margin: 2px 2px 2px 0; }

/* A new version is ready while a form is open: offer, do not reload. */
.update-banner {
    position: fixed; z-index: 400; left: 50%; transform: translateX(-50%);
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 24px);
    padding: 8px 10px 8px 14px; border-radius: 999px; font-size: 13px;
    background: var(--card); color: var(--text); border: 1px solid var(--accent);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.update-banner i { color: var(--accent); }
.update-banner .btn { border-radius: 999px; }

/* ============================================================
   iPhone zooms the whole page in when a field under 16px gets focus, and
   does not zoom back. The phone block above sets 16px for fields, but more
   specific rules elsewhere (.filter-bar select, select.btn-sm, the shift
   grid, date filters) won, so every filter outside a form still zoomed.
   Last in the file and !important, so no later rule can undercut it.
   ============================================================ */
@media (max-width: 700px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
    select, textarea, [contenteditable="true"] {
        font-size: 16px !important;
    }
    /* The shift grid keeps its narrow cells; the text just gets bigger. */
    .shift-select { padding-left: 2px; padding-right: 0; }
    .shift-fill { min-height: 40px; }
}

/* A save the server refused: kept, with a way back into the form. */
.unsent-notice {
    position: fixed; z-index: 450; left: 50%; transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    width: min(640px, calc(100vw - 24px)); display: grid; gap: 8px;
}
.unsent-notice__row {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 12px; font-size: 13px;
    background: var(--danger-bg); color: var(--text); border: 1px solid var(--danger);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.unsent-notice__row > i { color: var(--danger); }
.unsent-notice__text { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.unsent-notice__acts { display: flex; gap: 6px; flex-wrap: wrap; }

/* Written offline, not on the server yet. */
.q-tag { display: block; width: max-content; margin-top: 3px; }
.queued-pill {
    display: inline-flex; align-items: center; gap: 6px; margin-left: 8px;
    padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: var(--warning-bg); color: var(--warning); white-space: nowrap;
}

/* The daily session is about to end, or has ended and waits for the form. */
.session-banner {
    position: fixed; z-index: 420; left: 50%; transform: translateX(-50%);
    top: calc(env(safe-area-inset-top, 0px) + 56px);
    width: min(620px, calc(100vw - 24px));
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 10px 12px; border-radius: 12px; font-size: 13px;
    background: var(--warning-bg); color: var(--text); border: 1px solid var(--warning);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.session-banner > i { color: var(--warning); }
.session-banner > span { flex: 1 1 240px; min-width: 0; overflow-wrap: anywhere; }

/* ============================================================
   UI phase 1 — phones in the field (v156)
   ============================================================ */

/* 1.1 Card actions: in the phone card layout the actions cell was 80px wide
   (sized for two desktop icons), so Profile and History sat off the screen
   and Edit stuck out of the card. The cell takes the card's width, and each
   icon button shows its own title as a label under the icon. */
@media (max-width: 700px) {
    .table--cardable td.col-actions,
    #viewUsers .table--cardable td.col-actions { width: 100%; }
    .table--cardable td.col-actions .row-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
    /* A check report's "To Damage" button shares the cell: its own line. */
    .table--cardable td.col-actions { flex-wrap: wrap; gap: 8px; }
    .table--cardable td.col-actions .ins-apply { flex: 0 0 auto; margin-bottom: 0; }
    .table--cardable td.col-actions .row-actions:not(.row-actions--labeled) {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; width: 100%;
    }
    .table--cardable .row-actions:not(.row-actions--labeled) .btn[title] {
        width: auto; height: auto; min-height: 52px; flex-direction: column; gap: 2px; padding: 6px 4px; font-size: 12px;
    }
    .table--cardable .row-actions:not(.row-actions--labeled) .btn[title]::after {
        content: attr(title); display: block; max-width: 100%;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    /* Approve and Request revision were 4px apart. */
    .appr-cell .appr-actions { gap: 8px; }
    /* Compact view only shrinks text on a phone. */
    #compactToggle { display: none; }
}

/* 1.2 Forms on phones: the single column may shrink below its longest
   <option>, so fields stop running past the sheet's right edge. */
@media (max-width: 900px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    .form-group { min-width: 0; }
}

/* 1.4 The loading overlay sat under the sign-in screen (200 < 500) and
   under open forms (250): a slow sign-in looked like nothing happened. */
.loading-overlay { z-index: 600; flex-direction: column; gap: 12px; background: rgba(240,238,230,.92); }
.loading-overlay__text {
    max-width: 280px; margin: 0; padding: 8px 14px;
    border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow-md);
    text-align: center; font-size: 14px; color: var(--text-secondary);
}
.loading-overlay__text:empty { display: none; }

/* 1.5 Unit search results: on phones a full-width list under the top bar
   instead of a box anchored to the narrow search field. */
/* While the list is open the top bar (its stacking context) sits above the
   session banner (z 420), or the banner covered the first results. */
body.gsearch-open .topbar { z-index: 430; }
.global-search__results { z-index: 430; }
@media (max-width: 900px) {
    .global-search__results {
        position: fixed; top: calc(env(safe-area-inset-top, 0px) + 60px); left: 12px; right: 12px;
        width: auto; max-height: 60vh;
    }
}

/* 1.7 Phone menu: a close button inside it (the menu covers the burger). */
.sidebar__close { display: none; }
@media (max-width: 900px) {
    .sidebar__close {
        display: inline-flex; align-items: center; justify-content: center;
        margin-left: auto; width: 44px; height: 44px; flex-shrink: 0;
        background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
        color: var(--text-secondary); font-size: 16px; cursor: pointer;
    }
    .sidebar__close:hover { background: var(--border-light); color: var(--text); }
}

/* 1.8 Offline: the dot stops saying "live", and a phone shows a short word
   (the full sentence stays for screen readers and in the tooltip). */
body[data-offline] .status-dot.connected { background: var(--warning); box-shadow: none; animation: none; }
body[data-offline] #connectionLabel { color: var(--warning); font-weight: 600; }
.conn-short { display: none; }
@media (max-width: 900px) {
    body[data-offline] .conn-long {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    body[data-offline] .conn-short { display: inline; }
}

/* 1.9 Phone: a dot on the menu button while decisions, check reports or
   team notices are waiting (their counts are inside the closed menu). */
@media (max-width: 900px) {
    .topbar__burger { position: relative; }
    .topbar__burger.has-pending::after {
        content: ""; position: absolute; top: 3px; right: 3px; width: 9px; height: 9px;
        border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--card);
    }
}

/* ============================================================
   Vehicles & fuel (v158)
   ============================================================ */
.vehicle-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.vehicle-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    display: grid;
    /* One column that cannot grow past the card: a long link in the note
       would otherwise widen the header, stats and buttons with it. */
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    min-width: 0;
}
.vehicle-card--retired { opacity: 0.7; }
.vehicle-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.vehicle-card__plate { font: 600 18px/1.25 var(--font-sans); letter-spacing: 0.01em; }
.vehicle-card__plate i { color: var(--text-secondary); font-size: 15px; margin-right: 4px; }
.vehicle-card__sub { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.vehicle-card__stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    margin: 0;
}
.vehicle-card__stats div { min-width: 0; }
.vehicle-card__stats dt { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--text-light); }
.vehicle-card__stats dd { margin: 2px 0 0; font: 500 17px/1.2 var(--font-sans); font-variant-numeric: tabular-nums; }
.vehicle-card__meta { margin: 0; font-size: 12.5px; color: var(--text-secondary); }
.vehicle-card__flag { color: var(--warning); font-weight: 600; white-space: nowrap; }
.vehicle-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.vehicle-empty {
    grid-column: 1 / -1;
    padding: 20px;
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 14px;
    text-align: center;
}
#fuelTable td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#fuelTable tr.row-flagged { background: var(--warning-bg); }
.fuel-flag {
    display: inline-flex; align-items: center; gap: 4px;
    margin: 0 4px 4px 0; padding: 2px 8px;
    border-radius: 999px; border: 1px solid var(--warning-border);
    background: var(--card); color: var(--warning);
    font-size: 11.5px; font-weight: 600;
}
/* Damage ↔ unit status: what an open record holds, and units with open damage. */
.dmg-unit-chip {
    display: inline-flex; align-items: center; margin-left: 6px; padding: 2px 8px;
    border-radius: 999px; font-size: 10.5px; font-weight: 600; white-space: nowrap; vertical-align: middle;
}
.dmg-unit-chip--down { background: var(--danger-bg, #F8E3E1); color: var(--danger); }
.dmg-unit-chip--off  { background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-border); }
.dmg-reopen { padding: 2px 8px; font-size: 11px; margin-left: 4px; }
.dmg-open-chip {
    display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px;
    border: 1px solid var(--warning-border); border-radius: 999px; background: var(--warning-bg);
    color: var(--warning); font: 600 11px/1.4 var(--font-sans); white-space: nowrap; cursor: pointer; vertical-align: middle;
}
.dmg-open-chip:hover { filter: brightness(0.97); }
.dmg-open-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dmg-filter-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; min-height: 32px;
    border: 1px solid var(--border-strong); border-radius: 999px; background: var(--card);
    color: var(--text); font: 600 12px/1.3 var(--font-sans); cursor: pointer;
}
.dmg-filter-chip[hidden] { display: none; }
.dmg-filter-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.dmg-repair__effect { margin: 6px 0 2px; font-size: 13px; font-weight: 600; color: var(--text); }
.dmg-repaired-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 10px; }
.dmg-repaired-row .form-input { width: auto; max-width: 190px; }
.dmg-repaired-row .form-input:disabled { opacity: 0.55; }
.vehicle-card__aside { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--text-light); }
.vehicle-card__note { font-style: italic; }
.vehicle-card__sub, .vehicle-card__meta, .vehicle-card__plate { overflow-wrap: anywhere; }
/* "Records" scrolls the log to the top; the phone's sticky top bar is 54px. */
#whVehiclePanel .table-card { scroll-margin-top: 64px; }
@media (max-width: 700px) {
    /* A long "plate · brand model" option must not push the filters off screen. */
    #whVehiclePanel .edit-toolbar__right, #whVehiclePanel .edit-toolbar__right > * { min-width: 0; max-width: 100%; }
    .vehicle-cards { grid-template-columns: minmax(0, 1fr); }
    #fuelTable td.num { text-align: right; }
    .vehicle-card__actions .btn { min-height: 44px; }
}

/* ============================================================
   SOFT UI (design F) — shared components
   Appended last so it wins the cascade over the older card, ledger-KPI
   and table rules. Screen only: print keeps its own rules above. Sizes
   for buttons and fields stay out of phone widths (≤700px), where the
   PHONE section sets the 44px touch floor and 16px fields.
   ============================================================ */
@media screen {
    body { font-family: var(--font-sans); color: var(--text); background: var(--bg); }

    /* Display face for titles and big numbers */
    h1, h2, h3,
    .section-title, .table-card__title, .chart-card__title, .modal-header h3,
    #modalTitle, #implementModalTitle, #damageModalTitle, #licenseModalTitle {
        font-family: var(--font-display);
        font-weight: 600;
        letter-spacing: 0;
        color: var(--text);
    }
    .table-card__title, .chart-card__title, .section-title { font-size: 17px; }
    .table-card__title i, .chart-card__title i, .section-title i { color: var(--text-light); }

    /* ---- Page header (title + one line + actions) ---- */
    .page-head {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 12px 16px;
        margin: 4px 0 20px;
    }
    .page-head__text { display: flex; flex-direction: column; min-width: 0; }
    .page-head__title {
        margin: 0;
        font-family: var(--font-display);
        font-size: 26px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text);
    }
    .page-head__sub { color: var(--text-secondary); font-size: 14px; }
    .page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

    /* ---- Segmented control (equipment group, quick filters) ---- */
    .seg {
        display: inline-flex;
        flex-wrap: wrap;
        gap: 4px;
        padding: 4px;
        border-radius: 12px;
        background: var(--track);
    }
    .seg__btn {
        min-height: 36px;
        padding: 0 14px;
        border: 0;
        border-radius: 9px;
        background: transparent;
        color: var(--text-secondary);
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        white-space: nowrap;
    }
    .seg__btn:hover { color: var(--text); }
    .seg__btn[aria-pressed="true"], .seg__btn.active {
        background: var(--card);
        color: var(--text);
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(16,24,40,0.10);
    }

    /* ---- Cards ---- */
    .kpi-card, .chart-card, .table-card, .filter-bar, .repair-section,
    .team-no-panel {
        background: var(--card);
        border: 1px solid transparent;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
    }

    /* KPI cards: back to cards (the ledger rules above are undone here) */
    .kpi-grid {
        gap: 16px;
        border: 0;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    }
    .kpi-grid .kpi-card {
        background: var(--card);
        border: 1px solid transparent;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        padding: 18px 20px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .kpi-grid .kpi-card + .kpi-card { border-left: 1px solid transparent; }
    .kpi-grid .kpi-card:hover { transform: none; box-shadow: var(--shadow-md); }
    .kpi-grid .kpi-card .kpi-card__icon {
        display: flex;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 16px;
    }
    .kpi-card__header { flex-direction: row-reverse; justify-content: flex-end; gap: 10px; margin-bottom: 2px; }
    .kpi-grid .kpi-card__label {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-secondary);
    }
    .kpi-grid .kpi-card__value {
        font-family: var(--font-display);
        font-size: 32px;
        font-weight: 600;
        line-height: 1.1;
        color: var(--text);
    }
    .kpi-grid .kpi-card.good .kpi-card__value,
    .kpi-grid .kpi-card.breakdown .kpi-card__value,
    .kpi-grid .kpi-card.issue .kpi-card__value { color: var(--text); }
    .kpi-grid .kpi-card__sub { font-size: 13px; color: var(--text-secondary); }
    .kpi-grid .kpi-card .kpi-card__bar { display: block; height: 6px; border-radius: 3px; background: var(--track); margin-top: 6px; }
    .kpi-grid .kpi-card .kpi-card__bar-fill { border-radius: 3px; }
    .kpi-card.total .kpi-card__icon { background: var(--primary-lighter); color: var(--accent-text); }
    .kpi-card.good .kpi-card__icon { background: var(--success-tint); color: var(--success-strong); }
    .kpi-card.breakdown .kpi-card__icon { background: var(--danger-tint); color: var(--danger-strong); }
    .kpi-card.issue .kpi-card__icon { background: var(--warning-tint); color: var(--warning-strong); }
    .kpi-card.health .kpi-card__icon { background: var(--info-bg); color: var(--info-strong); }
    .kpi-card.good .kpi-card__bar-fill { background: var(--dot-good); }
    .kpi-card.breakdown .kpi-card__bar-fill { background: var(--dot-bad); }
    .kpi-card.issue .kpi-card__bar-fill { background: var(--dot-warn); }
    .kpi-card.health .kpi-card__bar-fill { background: var(--accent); }
    .dash-narrative { font-family: var(--font-sans); font-size: 15px; color: var(--text-secondary); }

    .table-card__header { padding: 16px 20px 12px; border-bottom: 0; }
    .chart-card { padding: 18px 20px; }

    /* ---- Tables ---- */
    .data-table { font-size: 14px; }
    .data-table th {
        background: var(--surface-sunken);
        padding: 10px 14px;
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-secondary);
        border-bottom: 1px solid var(--border);
    }
    .data-table th:hover { background: var(--track); color: var(--text); }
    .data-table th.sorted .sort-icon { color: var(--accent); }
    .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); }
    .data-table tbody tr,
    .data-table tbody tr:nth-child(even) { background: var(--card); }
    .data-table tbody tr:hover { background: var(--surface-sunken); }
    .data-table tbody tr.row-breakdown { background: var(--danger-bg); }
    .data-table tbody tr.row-breakdown:hover { background: var(--danger-tint); }

    /* ---- Status chips ---- */
    .badge {
        gap: 6px;
        padding: 2px 10px;
        border: 0;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
    }
    .badge-good { background: var(--success-bg); color: var(--success-strong); border: 0; }
    .badge-breakdown { background: var(--danger-bg); color: var(--danger-strong); border: 0; }
    .badge-component { border-radius: 10px; padding: 2px 8px; font-size: 12px; }
    .cell-good { color: var(--success); }
    .cell-bad { color: var(--danger); }

    /* ---- Buttons ---- */
    .btn {
        border-radius: 10px;
        font-weight: 600;
        gap: 8px;
    }
    .btn-primary, .btn-success {
        background: var(--accent);
        border-color: var(--accent);
        color: #FFFFFF;
    }
    .btn-primary:hover, .btn-success:hover { background: var(--accent-text); border-color: var(--accent-text); }
    .btn-secondary {
        background: var(--card);
        color: var(--text-body);
        border-color: var(--border-strong);
        box-shadow: 0 1px 2px rgba(16,24,40,0.05);
    }
    .btn-secondary:hover { background: var(--surface-sunken); color: var(--text); }
    .btn-icon { border-radius: 10px; }

    /* ---- Fields ---- */
    .form-input, .form-select,
    .filter-bar__search input, .filter-bar select, .edit-search input {
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        background-color: var(--surface-raised);
        color: var(--text);
    }
    .form-input:focus, .form-select:focus,
    .filter-bar__search input:focus, .filter-bar select:focus, .edit-search input:focus {
        outline: none;
        border-color: var(--accent);
        box-shadow: var(--focus-ring);
    }
    :focus-visible { outline-color: var(--accent); }

    /* ---- Tabs (underline, 44px) ---- */
    .team-tabbar { border-bottom: 1px solid var(--border); }
    .team-tab {
        min-height: 44px;
        padding: 0 14px;
        margin-bottom: -1px;
        border-radius: 0;
        border-bottom: 2px solid transparent;
        background: none;
        color: var(--text-secondary);
        font-weight: 500;
    }
    .team-tab:hover { background: none; color: var(--text); }
    .team-tab.active {
        background: none;
        color: var(--text);
        font-weight: 600;
        border-bottom-color: var(--accent);
    }
    .team-tab__count, .nav__badge {
        background: var(--danger-tint);
        color: var(--danger-strong);
        font-weight: 700;
    }

    /* ---- Sidebar ---- */
    .sidebar {
        width: 236px;
        background: var(--card);
        border-right: 1px solid var(--border);
        padding: 20px 14px 14px;
    }
    .sidebar__brand { padding: 0 8px 12px; gap: 10px; }
    .sidebar__brand-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0; }
    .sidebar__brand-sub { font-size: 12px; color: var(--text-secondary); }
    .nav-group { gap: 2px; margin-bottom: 0; }
    .nav-group__label {
        margin: 14px 12px 6px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        color: var(--text-light);
    }
    .sidebar__nav .nav__link {
        min-height: 44px;
        padding: 0 12px;
        border-radius: 10px;
        gap: 12px;
        font-size: 14px;
        font-weight: 500;
        color: var(--text-body);
    }
    .sidebar__nav .nav__link i { width: 20px; font-size: 16px; color: var(--text-light); }
    .sidebar__nav .nav__link:hover { background: var(--surface-sunken); color: var(--text); }
    .sidebar__nav .nav__link.active { background: var(--primary-lighter); color: var(--accent-text); font-weight: 600; }
    .sidebar__nav .nav__link.active i { color: var(--accent-text); }
    .nav__badge { margin-left: auto; padding: 0 8px; border-radius: 10px; font-size: 12px; }

    /* ---- Top bar: sits on the ground, no bar ---- */
    .topbar {
        height: auto;
        min-height: 68px;
        padding: 12px 32px;
        gap: 12px;
        background: var(--bg);
        border-bottom: 0;
        color: var(--text-secondary);
    }
    .global-search {
        order: -1;
        width: 340px;
        max-width: 100%;
        min-height: 44px;
        border-radius: 12px;
        background: var(--card);
        box-shadow: 0 1px 2px rgba(16,24,40,0.06), var(--ring);
    }
    .global-search { padding: 0 14px; }
    .global-search > i { font-size: 15px; }
    .global-search input {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        min-height: 42px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        font-size: 14px;
        box-shadow: none;
    }
    .global-search input:focus { box-shadow: none; }
    .global-search:focus-within { box-shadow: var(--focus-ring), 0 0 0 1px var(--accent); }
    .global-search__results { left: 0; right: auto; width: 100%; min-width: 300px; }
    .header__status {
        padding: 4px 10px;
        border-radius: 12px;
        background: var(--neutral-tint);
        color: var(--text-body);
        font-size: 13px;
        font-weight: 600;
    }
    .status-dot.connected { background: var(--dot-good); box-shadow: none; animation: none; }
    .user-pill {
        min-height: 44px;
        border-radius: 12px;
        background: var(--card);
        box-shadow: var(--ring);
        border: 0;
    }
    .main { max-width: 1280px; margin: 0; padding: 8px 32px 48px; }

    /* ---- Dialogs and toasts ---- */
    .modal-overlay { background: rgba(16,24,40,0.45); }
    .modal-card { border-radius: 20px; box-shadow: var(--shadow-lg); background: var(--card); }
    .modal-header { padding: 18px 24px; border-bottom: 1px solid var(--border); }
    .modal-header h3 { font-size: 18px; }
    .toast { border-radius: 12px; border-left-width: 0; box-shadow: var(--shadow-lg), var(--ring); }
}

/* Desktop sizing (phones keep the PHONE section's 44px / 16px floor) */
@media screen and (min-width: 701px) {
    .btn { min-height: 40px; padding: 0 16px; font-size: 14px; }
    .btn-sm { min-height: 36px; padding: 0 12px; font-size: 13px; }
    .btn-icon { width: 40px; height: 40px; min-height: 40px; padding: 0; }
    .form-input, .form-select { min-height: 40px; font-size: 14px; }
    .filter-bar__search input, .filter-bar select, .edit-search input { min-height: 40px; font-size: 14px; }
}
@media screen and (max-width: 900px) {
    .topbar { padding: 10px 16px; min-height: 60px; }
    .global-search { order: 0; width: auto; }
    .main { padding: 8px 16px 48px; }
}

/* ============================================================
   SOFT UI (design F) — shell — sidebar, top bar, phone bar, sign-in
   ============================================================ */
/* ============================================================
   SHELL (design F): sidebar, top bar, phone chrome (top row, bottom bar,
   "Report damage" button), sign-in / pending screens, account menu, unit
   search results, toasts, loading overlay, footer.
   Screen only — print keeps its own rules in style.css. Phone sizes never
   go under the PHONE section's 44px touch targets and 16px fields.
   ============================================================ */
@media screen {
    .ico { display: block; flex-shrink: 0; }

    /* ---------- Sidebar ---------- */
    /* 240px (F: 236) so "Operation Technology" fits on one line beside the logo. */
    .sidebar { width: 240px; padding: 20px 14px 14px; gap: 8px; }
    .sidebar__brand { padding: 0 4px 12px; gap: 8px; }
    .sidebar__brand .brand-logo { height: 34px; width: 34px; object-fit: contain; }
    .sidebar__brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
    .sidebar__brand-name { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text); }
    .sidebar__brand-sub { font-size: 12px; color: var(--text-secondary); }
    .sidebar__nav { display: flex; flex-direction: column; gap: 2px; min-height: 0; overflow-y: auto; }
    .sidebar__nav .nav-group { display: flex; flex-direction: column; gap: 2px; margin: 0; }
    .sidebar__nav .nav-group__label {
        margin: 0;
        padding: 14px 12px 6px;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-light);
    }
    /* Links are buttons (there is no URL per page): reset them to rows. */
    .sidebar__nav .nav__link {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 44px;
        padding: 0 12px;
        border: 0;
        border-radius: var(--radius);
        background: transparent;
        color: var(--text-body);
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        text-align: left;
        cursor: pointer;
    }
    .sidebar__nav .nav__link .ico { width: 20px; height: 20px; }
    .sidebar__nav .nav__link:hover { background: var(--surface-sunken); color: var(--text); }
    .sidebar__nav .nav__link.active { background: var(--primary-lighter); color: var(--accent-text); font-weight: 600; }
    .nav__text { flex: 1 1 auto; min-width: 0; }
    .sidebar__nav .nav__badge {
        margin-left: auto;
        padding: 0 8px;
        border-radius: 10px;
        background: var(--danger-tint);
        color: var(--danger-strong);
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
    }
    .sidebar__nav .nav__badge--warn { background: var(--warning-bg); color: var(--warning-strong); }

    /* ---------- Account block (foot of the sidebar) ---------- */
    .sidebar .user-pill {
        position: relative;
        display: flex;
        align-items: center;
        gap: 4px;
        min-height: 0;
        margin-top: auto;
        padding: 14px 0 0;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: none;
        box-shadow: none;
        color: var(--text);
        cursor: default;
        user-select: auto;
    }
    .sidebar .user-pill:hover { background: none; }
    .user-pill__btn {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 48px;
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 4px 8px;
        border: 0;
        border-radius: var(--radius);
        background: none;
        color: inherit;
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    .user-pill__btn:hover, .user-pill__btn[aria-expanded="true"] { background: var(--surface-sunken); }
    .user-pill__avatar {
        flex-shrink: 0;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #CCFBEF;            /* teal-100, design F */
        color: var(--accent-text);
        font-weight: 700;
        font-size: 15px;
    }
    .user-pill__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
    .sidebar .user-pill__name {
        display: block;
        max-width: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 600;
    }
    .sidebar .user-pill .user-pill__role,
    .sidebar .user-pill[data-role] .user-pill__role {
        padding: 0;
        border-radius: 0;
        background: none;
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .user-pill__signout {
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: var(--radius);
        background: none;
        color: var(--text-secondary);
        cursor: pointer;
    }
    .user-pill__signout:hover { background: var(--surface-sunken); color: var(--text); }
    /* The menu opens upwards from the foot of the sidebar. */
    .sidebar .user-menu {
        top: auto;
        bottom: calc(100% + 8px);
        left: 0;
        right: 0;
        min-width: 0;
        padding: 6px;
        border: 0;
        border-radius: 12px;
        background: var(--card);
        box-shadow: var(--shadow-lg), var(--ring);
        z-index: 20;
    }
    .user-menu__header { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); }
    .user-menu__email { font-family: var(--font-sans); font-size: 13px; color: var(--text); overflow-wrap: anywhere; word-break: normal; }
    .user-menu__role-label { font-size: 12px; color: var(--text-secondary); }
    .user-menu__item {
        min-height: 44px;
        padding: 0 10px;
        gap: 10px;
        border-radius: 8px;
        font-size: 14px;
        color: var(--text-body);
    }
    .user-menu__item:hover { background: var(--surface-sunken); color: var(--text); }
    .user-menu__item i { width: 16px; text-align: center; color: var(--text-light); }

    /* ---------- Top bar ---------- */
    .topbar {
        gap: 12px;
        min-height: 0;
        padding: 20px 32px 0;
        background: transparent;
        border: 0;
        color: var(--text-secondary);
    }
    .topbar__title { display: none; }
    .topbar__burger {
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: var(--card);
        box-shadow: var(--ring);
        color: var(--text-body);
        align-items: center;
        justify-content: center;
    }
    .topbar__burger:hover { background: var(--surface-sunken); color: var(--text); }
    .topbar__burger.has-pending::after { top: 8px; right: 8px; width: 8px; height: 8px; background: var(--dot-bad); }

    .global-search {
        order: 0;
        flex: 0 1 340px;
        width: 340px;
        min-width: 0;
        min-height: 44px;
        padding: 0 14px;
        gap: 8px;
        border-radius: 12px;
        background: var(--card);
        box-shadow: 0 1px 2px rgba(16,24,40,0.06), var(--ring);
        color: var(--text-secondary);
    }
    .global-search input { color: var(--text); }
    .global-search input::placeholder { color: var(--text-light); opacity: 1; }
    .global-search__results {
        top: calc(100% + 6px);
        left: 0;
        right: auto;
        width: 100%;
        min-width: 320px;
        max-height: 360px;
        padding: 6px;
        border: 0;
        border-radius: 12px;
        background: var(--card);
        box-shadow: var(--shadow-lg), var(--ring);
    }
    .global-search__item {
        display: block;
        width: 100%;
        min-height: 44px;
        padding: 8px 10px;
        border: 0;
        border-radius: var(--radius);
        background: none;
        color: var(--text);
        font: inherit;
        text-align: left;
        cursor: pointer;
    }
    .global-search__item:hover, .global-search__item:focus-visible { background: var(--surface-sunken); }
    .global-search__name { font-size: 14px; font-weight: 600; }
    .global-search__meta { font-size: 12px; color: var(--text-secondary); }
    .global-search__meta .mono { font-size: 12px; }
    .global-search__empty { padding: 10px; font-size: 14px; color: var(--text-secondary); }

    /* Sync chip: green while connected, amber offline (never green offline —
       the dot follows body[data-offline], see style.css 1.8). */
    .sync-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        padding: 4px 10px;
        border-radius: 12px;
        background: var(--neutral-tint);
        color: var(--text-body);
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }
    .sync-chip:has(.status-dot.connected) { background: var(--success-bg); color: var(--success-strong); }
    body[data-offline] .sync-chip,
    body[data-offline] .sync-chip:has(.status-dot.connected) { background: var(--warning-bg); color: var(--warning-strong); }
    .sync-chip .status-dot { flex-shrink: 0; width: 8px; height: 8px; }
    .sync-chip #connectionLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .sync-chip #lastUpdated {
        display: inline;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: 500;
    }
    .sync-chip #lastUpdated:empty { display: none; }
    .sync-chip #lastUpdated::before { content: "· "; }

    .topbar__bell {
        position: relative;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: var(--card);
        box-shadow: var(--ring);
        color: var(--text-body);
        cursor: pointer;
    }
    .topbar__bell[hidden] { display: none; }
    .topbar__bell:hover { background: var(--surface-sunken); color: var(--text); }
    .topbar__bell-dot {
        display: none;
        position: absolute;
        top: 9px;
        right: 10px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dot-bad);
        box-shadow: 0 0 0 2px var(--card);
    }
    .topbar__bell.has-pending .topbar__bell-dot { display: block; }

    .main { padding-top: 22px; }

    /* Phone chrome is off until the phone section below. */
    .bottom-nav, .fab { display: none; }

    /* ---------- Toasts, loading, footer ---------- */
    .toast-container { top: 76px; right: 24px; }   /* under the top row */
    .toast {
        gap: 10px;
        padding: 12px 14px;
        border-left: 0;
        border-radius: 12px;
        background: var(--card);
        color: var(--text);
        font-size: 14px;
        line-height: 1.45;
        box-shadow: var(--shadow-lg), var(--ring);
    }
    .toast > i { flex-shrink: 0; font-size: 16px; color: var(--info); }
    .toast.success > i { color: var(--success); }
    .toast.error > i { color: var(--danger); }
    .toast.warning > i { color: var(--warning); }

    .loading-overlay { background: rgba(246,247,251,0.92); }
    .spinner { border-color: var(--track); border-top-color: var(--accent); }

    .footer {
        margin: 0;
        padding: 20px 24px 28px;
        border-top: 0;
        background: transparent;
        color: var(--text-light);
        font-size: 12px;
    }
    .footer__version { border-color: var(--border); background: var(--card); color: var(--text-secondary); }

    /* ---------- Sign-in, sign-up and pending screens ---------- */
    .auth-gate {
        flex-wrap: wrap;
        align-items: stretch;
        padding: 0;
        background: var(--bg);
        color: var(--text);
        font-size: 15px;
        line-height: 1.5;
    }
    .auth-brand {
        flex: 1 1 420px;
        min-height: 320px;
        padding: 56px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        background: var(--accent);
        color: #FFFFFF;
        text-align: center;
    }
    .auth-brand__logo {
        width: 96px;
        height: 96px;
        border-radius: 28px;
        background: #FFFFFF;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .auth-brand__logo .brand-logo--lg { width: 68px; height: 68px; margin: 0; object-fit: contain; }
    .auth-brand .auth-brand__name {
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-family: var(--font-display);
        font-size: 26px;
        font-weight: 600;
        line-height: 1.25;
        color: #FFFFFF;
    }
    .auth-brand__sub { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: #CCFBEF; }
    .auth-main {
        flex: 1 1 420px;
        min-width: 0;
        padding: 48px 32px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .auth-card {
        width: 100%;
        max-width: 420px;
        padding: 32px;
        border-radius: 20px;
        background: var(--card);
        box-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 12px 32px -8px rgba(16,24,40,0.12);
        display: flex;
        flex-direction: column;
        gap: 20px;
        animation: none;
    }
    .auth-card__head { display: flex; flex-direction: column; gap: 4px; }
    .auth-card .auth-card__title { margin: 0; font-family: var(--font-display); font-size: 24px; font-weight: 600; line-height: 1.3; color: var(--text); }
    .auth-card__sub { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
    .auth-card__sub:empty { display: none; }
    .auth-card__icon {
        width: 48px;
        height: 48px;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--warning-tint);
        color: var(--warning-strong);
    }
    .auth-tabs.seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
    .auth-tabs .auth-tab { min-height: 40px; padding: 0 10px; border-radius: 9px; font-size: 14px; }
    .auth-tabs .auth-tab.active {
        background: var(--card);
        color: var(--text);
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(16,24,40,0.10);
    }
    .auth-form { gap: 20px; }
    .auth-form .form-group { display: flex; flex-direction: column; gap: 6px; }
    .auth-form .form-label { font-size: 14px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
    .auth-form .form-input {
        min-height: 48px;
        padding: 0 14px;
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        font-size: 16px;
    }
    .auth-form .pw-field .form-input { padding-right: 78px; }
    .auth-form .pw-toggle {
        right: 6px;
        width: auto;
        min-width: 56px;
        height: 36px;
        padding: 0 10px;
        border-radius: 8px;
        background: var(--neutral-tint);
        color: var(--text-body);
        font: inherit;
        font-size: 13px;
        font-weight: 600;
    }
    .auth-form .pw-toggle:hover, .auth-form .pw-toggle:focus-visible { background: var(--track); color: var(--text); }
    .auth-gate .auth-submit {
        width: 100%;
        min-height: 48px;
        margin: 0;
        justify-content: center;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 600;
    }
    .auth-link { min-height: 44px; margin: -8px auto 0; padding: 0 10px; font-size: 14px; color: var(--accent); }
    .auth-error { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
    .auth-notice { margin: 0; padding: 10px 12px; border-radius: 10px; font-size: 14px; }
    .auth-note,
    .auth-hint.auth-note {
        display: flex;
        gap: 10px;
        padding: 12px 14px;
        border: 0;
        border-radius: 12px;
        background: var(--surface-sunken);
        color: var(--text-secondary);
        font-size: 14px;
        line-height: 1.5;
    }
    .auth-note .ico { margin-top: 1px; }
    .auth-note strong { font-weight: 600; color: var(--text-body); }
    .auth-note__link {
        padding: 0;
        border: 0;
        background: none;
        color: var(--accent);
        font: inherit;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 2px;
        cursor: pointer;
    }
    .auth-note__link:hover { color: var(--accent-text); }
    .auth-card__footer {
        margin: 0;
        padding-top: 16px;
        border-top: 1px solid var(--border);
        font-size: 12px;
        color: var(--text-light);
        text-align: center;
    }
    .pending-message {
        margin: 0;
        padding: 14px 16px;
        border: 0;
        border-radius: 12px;
        background: var(--surface-sunken);
        color: var(--text-secondary);
        font-size: 14px;
    }
    .pending-message p + p { margin-top: 10px; }
    .pending-message strong { font-weight: 600; color: var(--text-body); }
    .auth-gate .btn-secondary.auth-submit { gap: 8px; }
}

/* ---------- Narrow: the sidebar is a drawer (≤900px) ---------- */
@media screen and (max-width: 900px) {
    .topbar { padding: 10px 16px; min-height: 64px; background: var(--bg); }
    /* style.css hides the spacer here: the search fills the row instead, so
       the sync chip and the bell stay at the right edge. */
    .global-search { flex: 1 1 auto; width: auto; }
    .main { padding-top: 12px; }
    .sidebar__close { border: 0; border-radius: 12px; background: var(--card); box-shadow: var(--ring); }
    /* The style.css phone topbar hid the name; in the drawer it has room. */
    .sidebar .user-pill__name { display: block; }
    /* Sign-in: the brand panel becomes a band above the card. */
    .auth-gate { align-content: flex-start; }
    .auth-brand {
        flex-basis: 100%;
        min-height: 0;
        padding: 24px 20px;
        flex-direction: row;
        gap: 14px;
        text-align: left;
    }
    .auth-brand__logo { width: 56px; height: 56px; border-radius: 16px; }
    .auth-brand__logo .brand-logo--lg { width: 40px; height: 40px; }
    .auth-brand .auth-brand__name { font-size: 20px; }
    .auth-brand__sub { font-size: 15px; }
    .auth-main { flex-basis: 100%; padding: 24px 16px 40px; align-items: flex-start; }
}

/* ---------- Phone (≤700px), design F phone ---------- */
@media screen and (max-width: 700px) {
    /* Top: menu · page title over the sync line · bell; search underneath.
       It scrolls away with the page; the bottom bar stays. */
    .topbar {
        position: relative;
        top: auto;
        z-index: 200;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "burger title  bell"
            "burger sync   bell"
            "search search search";
        column-gap: 10px;
        row-gap: 0;
        align-items: center;
        min-height: 0;
        padding: 12px 16px 4px;
        background: transparent;
    }
    .topbar__burger { grid-area: burger; }
    .topbar__bell { grid-area: bell; }
    .topbar__spacer { display: none; }
    .topbar__title {
        grid-area: title;
        display: block;
        align-self: end;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-family: var(--font-display);
        font-size: 20px;
        font-weight: 600;
        line-height: 1.25;
        color: var(--text);
    }
    .topbar .sync-chip,
    .topbar .sync-chip:has(.status-dot.connected) {
        grid-area: sync;
        align-self: start;
        justify-self: start;
        max-width: 100%;
        padding: 0;
        border-radius: 0;
        background: none;
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 500;
    }
    body[data-offline] .topbar .sync-chip { background: none; color: var(--warning-strong); }
    .topbar .sync-chip .status-dot { width: 7px; height: 7px; }
    .global-search {
        grid-area: search;
        width: auto;
        margin-top: 12px;
    }
    .global-search > .ico { display: block; }
    /* Results drop under the field, the field's own width (it spans the screen). */
    .global-search__results {
        position: absolute;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        width: auto;
        min-width: 0;
        max-height: 60vh;
    }

    /* A page heading would repeat the title in the top row; it stays for
       screen readers (the top-row title is visual only). */
    .main .page-head__title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .main { padding: 8px 16px 24px; }
    /* The last thing on the page (the footer) clears the bottom bar and the
       floating button, so nothing ends up hidden under them. */
    .footer { padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)); }

    /* Bottom bar: Home, Units, Damage, Inbox, More. */
    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 240;               /* under dialogs (250) and the menu (300+) */
        display: flex;
        height: calc(72px + env(safe-area-inset-bottom, 0px));
        padding: 0 4px calc(6px + env(safe-area-inset-bottom, 0px));
        background: var(--card);
        border-top: 1px solid var(--border);
    }
    .bottom-nav__item {
        position: relative;
        flex: 1 1 0;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 0;
        border: 0;
        background: none;
        color: var(--text-secondary);
        font: inherit;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        cursor: pointer;
    }
    .bottom-nav__item[hidden] { display: none; }
    .bottom-nav__item.active { color: var(--accent); font-weight: 700; }
    .bottom-nav__count {
        position: absolute;
        top: 8px;
        left: 50%;
        margin-left: 6px;
        min-width: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--danger);
        color: #FFFFFF;
        font-size: 12px;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
    }
    .bottom-nav__count[hidden] { display: none; }
    .bottom-nav__more.has-pending::after {
        content: "";
        position: absolute;
        top: 12px;
        left: 50%;
        margin-left: 8px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--dot-bad);
        box-shadow: 0 0 0 2px var(--card);
    }

    .fab {
        position: fixed;
        right: 16px;
        bottom: calc(92px + env(safe-area-inset-bottom, 0px));
        z-index: 240;
        width: 56px;
        height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-radius: 18px;
        background: var(--accent);
        color: #FFFFFF;
        box-shadow: 0 8px 20px -6px rgba(15,118,110,0.6);
        cursor: pointer;
    }
    .fab:hover { background: var(--accent-text); }
    /* Not while a dialog is open, nor behind the sign-in screens. */
    body:has(.modal-overlay.open) .fab,
    body:has(#photoLightbox.open) .fab,
    body.auth-blocked .fab,
    body.auth-blocked .bottom-nav { display: none; }

    /* Notices that sit at the bottom stay above the bar. */
    .unsent-notice { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
    .toast-container { top: calc(env(safe-area-inset-top, 0px) + 12px); left: 12px; right: 12px; }
    .toast { max-width: none; }

    /* Drawer on a phone: the brand row keeps the close button in reach. */
    .sidebar { padding: 16px 12px 12px; }
}

/* Print: the phone bar and the floating button are screen-only (style.css
   print rules already hide the sidebar and the top bar). */
@media print {
    .bottom-nav, .fab { display: none !important; }
}

/* ============================================================
   SOFT UI (design F) — Dashboard (Overview | Reliability)
   ============================================================ */
/* ============================================================
   DASHBOARD (design F · Soft UI)
   Page head + group switch, Overview | Reliability tabs, KPI cards,
   Needs attention, Fleet health ring, Sites, Faulty parts, the month
   strip, and the existing sections restyled as F cards. Scoped to
   #viewDashboard: .downtime-kpi*, .kpi-grid and .team-tab are shared
   with other pages. Screen only — print keeps its own rules (plus a few
   lines at the end for the blocks that are new here).
   ============================================================ */
@media screen {
    #viewDashboard {
        --dash-bar-soft: #99F6E4;   /* teal-200: past months beside the accent */
    }

    /* ---- Page head ---- */
    #viewDashboard .dash-head { margin: 4px 0 18px; }
    #viewDashboard .dash-scope-caption { margin: 2px 0 0; font-size: 13px; color: var(--text-light); }
    #viewDashboard [hidden] { display: none !important; }

    #viewDashboard .change-banner {
        padding: 6px 6px 6px 16px;
        margin-bottom: 18px;
        border: 0;
        border-radius: 12px;
        background: var(--info-bg);
        color: var(--info-strong);
        font-size: 14px;
        box-shadow: inset 0 0 0 1px var(--info-border);
    }
    #viewDashboard .change-banner .btn-icon { color: var(--info-strong); }

    /* ---- Tabs: Overview | Reliability ---- */
    #viewDashboard .dash-tabs { display: flex; justify-content: flex-start; flex-wrap: nowrap; gap: 6px; margin: 0 0 22px; }
    #dashboardContent[data-tab="overview"] #dashPaneReliability,
    #dashboardContent[data-tab="reliability"] #dashPaneOverview { display: none; }

    #viewDashboard .dash-narrative {
        max-width: 860px;
        margin: -4px 0 18px;
        font-size: 15px;
        line-height: 1.55;
        color: var(--text-secondary);
    }

    /* ---- Shared card bits ---- */
    #viewDashboard .dash-card {
        min-width: 0;
        font-size: 14px;
        line-height: 1.5;
        padding: 18px 20px;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    #viewDashboard .dash-card__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    #viewDashboard .dash-card__head--stack { flex-direction: column; align-items: flex-start; gap: 0; }
    #viewDashboard .dash-card__title {
        margin: 0;
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--text);
    }
    #viewDashboard .dash-card__sub { font-size: 14px; color: var(--text-secondary); }
    #viewDashboard .dash-card__foot {
        margin: 0;
        padding: 10px 20px 14px;
        border-top: 1px solid var(--border);
        font-size: 13px;
        color: var(--text-secondary);
    }
    #viewDashboard .dash-empty { margin: 0; color: var(--text-secondary); }
    #viewDashboard .dash-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 44px;
        padding: 0 4px;
        border: 0;
        background: none;
        color: var(--accent);
        font: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        white-space: nowrap;
    }
    #viewDashboard .dash-link:hover { color: var(--accent-text); text-decoration: underline; }
    #viewDashboard .dash-unit {
        padding: 0;
        border: 0;
        background: none;
        color: var(--text);
        font: inherit;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }
    #viewDashboard .dash-unit:hover { color: var(--accent-text); text-decoration: underline; }
    #viewDashboard .dash-bar { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
    #viewDashboard .dash-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
    #viewDashboard .dash-bar--bad > span { background: var(--dot-bad); }
    #viewDashboard .dash-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }
    #viewDashboard .dash-chip--bad { background: var(--danger-bg); color: var(--danger-strong); }
    #viewDashboard .dash-chip--info { background: var(--info-bg); color: var(--info-strong); }

    /* Plain tables inside cards (Needs attention, most downtime) */
    #viewDashboard .dash-table-wrap { overflow-x: auto; }
    #viewDashboard .dash-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    #viewDashboard .dash-table th {
        padding: 10px 12px;
        background: var(--surface-sunken);
        color: var(--text-secondary);
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
    }
    #viewDashboard .dash-table td {
        padding: 13px 12px;
        border-top: 1px solid var(--border);
        color: var(--text-body);
        vertical-align: middle;
    }
    #viewDashboard .dash-table th:first-child, #viewDashboard .dash-table td:first-child { padding-left: 20px; }
    #viewDashboard .dash-table th:last-child, #viewDashboard .dash-table td:last-child { padding-right: 20px; }
    #viewDashboard .dash-table .dash-num { text-align: right; white-space: nowrap; }
    #viewDashboard .dash-muted { color: var(--text-secondary); }

    /* ---- KPI cards ---- */
    #viewDashboard .dash-kpis {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 16px;
        margin: 0 0 22px;
        border: 0;
    }
    #viewDashboard .dash-kpis .kpi-card { gap: 10px; padding: 18px 20px; }
    #viewDashboard .dash-kpis .kpi-card[hidden] { display: none; }
    #viewDashboard .dash-kpis .kpi-card__header {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        margin: 0;
    }
    #viewDashboard .dash-kpis .kpi-card__icon { flex: 0 0 auto; }
    #viewDashboard .dash-kpis .kpi-card__row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: 4px 8px;
    }
    #viewDashboard .dash-kpis .kpi-card__value { margin: 0; }
    #viewDashboard .dash-kpis .kpi-card__of {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-secondary);
    }
    #viewDashboard .dash-kpis .kpi-card__sub { padding-bottom: 3px; }
    #viewDashboard .dash-kpis .kpi-card .kpi-card__bar { margin-top: 0; }
    #viewDashboard .kpi-chip {
        margin-left: auto;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
        white-space: nowrap;
    }
    #viewDashboard .kpi-chip--bad { background: var(--danger-bg); color: var(--danger-strong); }
    #viewDashboard .kpi-card.license .kpi-card__icon { background: var(--info-bg); color: var(--info-strong); }

    /* ---- Needs attention + side column ---- */
    #viewDashboard .dash-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 16px;
    }
    #viewDashboard .dash-attn { flex: 2 1 520px; padding: 0; overflow: hidden; }
    #viewDashboard .dash-attn .dash-card__head { padding: 6px 20px 2px; }
    #viewDashboard .dash-attn .dash-empty { padding: 4px 20px 20px; }
    #viewDashboard .dash-attn__table { min-width: 560px; }
    #viewDashboard .dash-attn__issue { color: var(--text-body); }
    #viewDashboard .dash-attn__site { color: var(--text-secondary); }
    #viewDashboard .dash-attn__site-inline { display: none; }
    #viewDashboard .dash-attn__since { font-weight: 600; color: var(--text); }
    #viewDashboard .dash-side {
        flex: 1 1 300px;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Fleet health ring */
    #viewDashboard .dash-health { display: flex; align-items: center; gap: 18px; }
    #viewDashboard .dash-ring { position: relative; flex: 0 0 auto; width: 92px; height: 92px; }
    #viewDashboard .dash-ring svg { display: block; }
    #viewDashboard .dash-ring__text {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 600;
        color: var(--text);
    }
    #viewDashboard .dash-health__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

    /* Sites */
    #viewDashboard .dash-sites { display: flex; flex-direction: column; gap: 14px; }
    #viewDashboard .dash-sites__list { display: flex; flex-direction: column; gap: 14px; }
    #viewDashboard .dash-site__row {
        display: flex;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
    }
    #viewDashboard .dash-site__name { min-width: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
    #viewDashboard .dash-site__count { color: var(--text-secondary); white-space: nowrap; }

    /* Faulty parts */
    #viewDashboard .dash-parts { display: flex; flex-direction: column; gap: 10px; }
    #viewDashboard .dash-parts__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    #viewDashboard .dash-part {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 8px 10px;
        border-radius: 10px;
        background: var(--neutral-tint);
        background: color-mix(in srgb, var(--part) 11%, var(--card));
        color: var(--part);
        font-weight: 600;
    }
    #viewDashboard .dash-part svg, #viewDashboard .dash-part i { flex: 0 0 auto; }
    #viewDashboard .dash-part i { width: 18px; text-align: center; font-size: 14px; }
    #viewDashboard .dash-part__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    #viewDashboard .dash-part__n { margin-left: auto; }
    #viewDashboard .dash-part--none { background: var(--neutral-tint); color: var(--text-secondary); }

    /* Month strip */
    #viewDashboard .dash-month {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 16px 40px;
        margin-bottom: 22px;
        padding: 18px 22px;
    }
    #viewDashboard .dash-month .dash-card__title { flex: 1 1 140px; }
    #viewDashboard .dash-month__stat { display: flex; flex-direction: column; }
    #viewDashboard .dash-month__label { font-size: 13px; color: var(--text-secondary); }
    #viewDashboard .dash-month__value {
        font-family: var(--font-display);
        font-size: 22px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text);
    }
    #viewDashboard .dash-month__more { margin-left: auto; }

    /* ---- Existing sections as F cards ---- */
    #viewDashboard .license-alerts-section,
    #viewDashboard .stock-alerts-section,
    #viewDashboard .component-health {
        margin-bottom: 22px;
        padding: 18px 20px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    #viewDashboard .section-header { gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
    #viewDashboard .la-chip.expired { background: var(--danger-bg); color: var(--danger-strong); }
    #viewDashboard .la-chip.soon { background: var(--warning-bg); color: var(--warning-strong); }
    #viewDashboard .license-alerts-summary .la-chip { padding: 2px 10px; font-size: 13px; }
    #viewDashboard .license-alerts-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
    #viewDashboard .la-card {
        padding: 12px 14px;
        border: 0;
        border-radius: 12px;
        background: var(--surface-sunken);
        box-shadow: none;
    }
    #viewDashboard .la-card:hover { box-shadow: none; background: var(--track); }
    #viewDashboard .la-card.expired, #viewDashboard .la-card.soon { border-left: 0; }
    #viewDashboard .la-card__icon { border-radius: 10px; }
    #viewDashboard .la-card.expired .la-card__icon { background: var(--danger-tint); color: var(--danger-strong); }
    #viewDashboard .la-card.soon .la-card__icon { background: var(--warning-tint); color: var(--warning-strong); }
    #viewDashboard .la-card__name { font-size: 14px; }
    #viewDashboard .la-card__meta { font-size: 13px; }
    #viewDashboard .la-card__badge { padding: 2px 10px; border: 0; font-size: 12px; }
    #viewDashboard .la-card.expired .la-card__badge { background: var(--danger-bg); color: var(--danger-strong); border: 0; }
    #viewDashboard .la-card.soon .la-card__badge { background: var(--warning-bg); color: var(--warning-strong); border: 0; }
    #viewDashboard .stock-alert-card { border: 0; border-radius: 12px; background: var(--warning-bg); color: var(--warning-strong); font-size: 14px; }
    #viewDashboard .stock-alert-card.empty { background: var(--danger-bg); color: var(--danger-strong); }

    #viewDashboard .charts-grid { gap: 16px; margin-bottom: 22px; }
    #viewDashboard .chart-card { border: 0; }
    #viewDashboard .chart-card__title { margin-bottom: 14px; }

    #viewDashboard .component-grid { gap: 12px; margin-top: 0; }
    #viewDashboard .component-stat {
        padding: 16px 12px 14px;
        border: 0;
        border-radius: 12px;
        background: var(--surface-sunken);
    }
    #viewDashboard .component-stat:hover { box-shadow: none; }
    #viewDashboard .component-stat__name {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-body);
    }
    #viewDashboard .component-stat__ring-text { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
    #viewDashboard .component-stat__detail { font-size: 13px; color: var(--text-secondary); }
    #viewDashboard .component-grid__group { font-size: 12px; letter-spacing: 0.04em; color: var(--text-light); }

    #viewDashboard .filter-bar { margin-bottom: 16px; border: 0; }
    #viewDashboard .filter-count { font-size: 13px; }
    #viewDashboard .table-card { border: 0; margin-bottom: 22px; }
    #viewDashboard .table-card__header { flex-wrap: wrap; gap: 10px; }

    #viewDashboard .damage-stats__label {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-secondary);
    }
    #viewDashboard .damage-type-chip { font-size: 14px; }
    #viewDashboard .damage-type-chip strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; }
    #viewDashboard .damage-top-row { font-size: 14px; }
    #viewDashboard .damage-top-row__bar { height: 8px; background: var(--track); }
    #viewDashboard .damage-top-row__bar span { border-radius: 4px; background: var(--dot-bad); }

    #viewDashboard .repair-section { border: 0; margin-bottom: 22px; }
    #viewDashboard .repair-header { border-bottom: 0; padding: 16px 20px 6px; }
    #viewDashboard .repair-body { padding: 10px 20px 20px; }
    #viewDashboard .issue-summary { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
    #viewDashboard .issue-chip { padding: 10px 12px; border: 0; border-radius: 10px; background: var(--surface-sunken); }
    #viewDashboard .issue-chip__label { font-size: 13px; font-weight: 600; text-transform: none; color: var(--text-body); }
    #viewDashboard .issue-chip__count { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
    #viewDashboard .repair-section .table-wrapper { border-top: 1px solid var(--border); border-radius: 0; }

    /* ---- Reliability tab ---- */
    #viewDashboard .downtime-section {
        margin: 0 0 24px;
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
    }
    /* The tab names it; the heading stays for print. */
    #viewDashboard .downtime-section > .section-header { display: none; }
    #viewDashboard .downtime-kpis {
        grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
        gap: 16px;
        margin: 0 0 16px;
    }
    #viewDashboard .downtime-kpi {
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-width: 0;
        padding: 18px 20px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    #viewDashboard .downtime-kpi__label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-secondary);
    }
    #viewDashboard .downtime-kpi__abbr {
        padding: 2px 8px;
        border-radius: 10px;
        background: var(--neutral-tint);
        color: var(--text-body);
        font-size: 12px;
        font-weight: 700;
    }
    #viewDashboard .downtime-kpi__value {
        margin: 0;
        font-family: var(--font-display);
        font-size: 30px;
        font-weight: 600;
        line-height: 1.1;
        color: var(--text);
    }
    #viewDashboard .downtime-kpi__sub,
    #viewDashboard .downtime-kpi__hint { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
    #viewDashboard .downtime-kpi__hint { margin-top: -8px; }

    #viewDashboard .downtime-grid {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        gap: 16px;
        margin-bottom: 16px;
    }
    #viewDashboard .dash-trend,
    #viewDashboard .dash-units-chart { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 20px; }
    #viewDashboard .dash-trend__bars {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 18px;
        align-items: end;
        height: 190px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border);
    }
    #viewDashboard .dash-trend__col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        gap: 6px;
        height: 100%;
        min-width: 0;
    }
    #viewDashboard .dash-trend__val { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
    #viewDashboard .dash-trend__bar {
        width: 100%;
        max-width: 52px;
        border-radius: 8px 8px 4px 4px;
        background: var(--dash-bar-soft);
    }
    #viewDashboard .dash-trend__col--now .dash-trend__val { font-weight: 700; }
    #viewDashboard .dash-trend__col--now .dash-trend__bar { background: var(--accent); }
    #viewDashboard .dash-trend__labels {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 18px;
        margin-top: 8px;
        text-align: center;
        color: var(--text-secondary);
    }
    #viewDashboard .dash-trend__now { font-weight: 600; color: var(--text); }

    #viewDashboard .dash-worst { padding: 0; overflow: hidden; }
    #viewDashboard .dash-worst .dash-card__head { padding: 16px 20px 10px; }
    #viewDashboard .dash-worst .top-offenders { margin: 0; display: block; }
    #viewDashboard .dash-worst .top-offender--empty {
        margin: 0 20px 18px;
        border: 0;
        background: var(--surface-sunken);
        font-style: normal;
    }
    #viewDashboard .dash-worst__table { min-width: 600px; }
    #viewDashboard .dash-table .dash-worst__rank { width: 40px; color: var(--text-secondary); }
    #viewDashboard .dash-worst__barcol { width: 36%; }
}

/* Desktop: the switch keeps the F 36px height (phones get 44px below). */
@media screen and (min-width: 701px) {
    #viewDashboard .dash-seg .seg__btn { min-height: 36px; }
}

@media screen and (max-width: 900px) {
    #viewDashboard .downtime-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Phone (F phone dashboard): compact tiles, a list for Needs attention ---- */
@media screen and (max-width: 700px) {
    #viewDashboard .dash-head { margin: 0 0 14px; gap: 12px; }
    #viewDashboard .dash-head .page-head__actions { width: 100%; }
    #viewDashboard .dash-seg {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
    }
    #viewDashboard .dash-seg .seg__btn { min-height: 44px; padding: 0 8px; }
    #viewDashboard .dash-tabs { margin-bottom: 16px; }
    #viewDashboard .dash-narrative { margin: 0 0 14px; font-size: 15px; }

    /* KPI cards: two columns of icon + number + label */
    #viewDashboard .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
    #viewDashboard .dash-kpis .kpi-card {
        display: grid;
        grid-template-columns: 36px minmax(0, 1fr);
        grid-template-areas: "icon value" "icon label";
        align-items: center;
        column-gap: 10px;
        row-gap: 0;
        padding: 12px;
        border-radius: 14px;
    }
    #viewDashboard .dash-kpis .kpi-card:nth-child(odd):last-child { grid-column: auto; }
    #viewDashboard .dash-kpis .kpi-card__header,
    #viewDashboard .dash-kpis .kpi-card__row { display: contents; }
    #viewDashboard .dash-kpis .kpi-card__icon { grid-area: icon; }
    #viewDashboard .dash-kpis .kpi-card__value { grid-area: value; font-size: 20px; line-height: 1.2; }
    #viewDashboard .dash-kpis .kpi-card__of { font-size: 14px; }
    #viewDashboard .dash-kpis .kpi-card__label {
        grid-area: label;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.25;
        color: var(--text-secondary);
    }
    #viewDashboard .dash-kpis .kpi-card__sub,
    #viewDashboard .dash-kpis .kpi-chip,
    #viewDashboard .dash-kpis .kpi-card .kpi-card__bar { display: none; }

    /* Needs attention as a list: unit, "issue · site", and how long */
    #viewDashboard .dash-attn .dash-card__head { padding: 4px 14px 0; }
    #viewDashboard .dash-attn .dash-card__title { font-size: 16px; }
    #viewDashboard .dash-attn .dash-empty { padding: 4px 14px 16px; }
    #viewDashboard .dash-attn__table { min-width: 0; }
    #viewDashboard .dash-attn__table,
    #viewDashboard .dash-attn__table tbody { display: block; }
    #viewDashboard .dash-attn__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    #viewDashboard .dash-attn__table tr {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "unit since" "issue since";
        align-items: center;
        column-gap: 10px;
        min-height: 52px;
        padding: 8px 14px;
        border-top: 1px solid var(--border);
    }
    #viewDashboard .dash-table.dash-attn__table td,
    #viewDashboard .dash-table.dash-attn__table td:first-child,
    #viewDashboard .dash-table.dash-attn__table td:last-child { display: block; padding: 0; border: 0; }
    #viewDashboard .dash-attn__unit { grid-area: unit; }
    #viewDashboard .dash-attn__issue {
        grid-area: issue;
        font-size: 13px;
        color: var(--text-secondary);
        overflow-wrap: anywhere;
    }
    #viewDashboard .dash-attn__site-inline { display: inline; }
    #viewDashboard .dash-attn__site,
    #viewDashboard .dash-attn__status { display: none !important; }
    #viewDashboard .dash-attn__table .dash-attn__since {
        grid-area: since;
        padding: 2px 8px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 700;
    }
    #viewDashboard .dash-attn__row--down .dash-attn__since { background: var(--danger-bg); color: var(--danger-strong); }
    #viewDashboard .dash-attn__row--license .dash-attn__since { background: var(--info-bg); color: var(--info-strong); }
    /* The whole row opens the unit (a 52px target, not the name alone). */
    #viewDashboard .dash-attn__table .dash-unit::after { content: ""; position: absolute; inset: 0; }
    #viewDashboard .dash-card__foot { padding: 10px 14px 12px; }

    #viewDashboard .dash-card { padding: 16px; }
    #viewDashboard .dash-attn, #viewDashboard .dash-worst { padding: 0; }
    #viewDashboard .dash-row { gap: 12px; margin-bottom: 12px; }
    #viewDashboard .dash-side { gap: 12px; }
    #viewDashboard .dash-month { gap: 12px 24px; padding: 16px; margin-bottom: 16px; }
    #viewDashboard .dash-month .dash-card__title { flex-basis: 100%; }
    #viewDashboard .dash-month__stat { flex: 1 1 40%; }
    #viewDashboard .dash-month__more { margin-left: 0; }

    #viewDashboard .license-alerts-section,
    #viewDashboard .stock-alerts-section,
    #viewDashboard .component-health { padding: 16px; margin-bottom: 16px; }
    #viewDashboard .license-alerts-cards { grid-template-columns: minmax(0, 1fr); }
    #viewDashboard .charts-grid { margin-bottom: 16px; }

    /* Reliability: two tiles a row, the hints dropped */
    #viewDashboard .downtime-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #viewDashboard .downtime-kpi { gap: 6px; padding: 14px; }
    #viewDashboard .downtime-kpi__label { flex-wrap: wrap; font-size: 13px; }
    #viewDashboard .downtime-kpi__value { font-size: 22px; }
    #viewDashboard .downtime-kpi__sub { font-size: 12px; }
    #viewDashboard .downtime-kpi__hint { display: none; }
    #viewDashboard .dash-trend { padding: 16px; }
    #viewDashboard .dash-trend__bars, #viewDashboard .dash-trend__labels { gap: 8px; }
    #viewDashboard .dash-trend__val { font-size: 12px; }
    /* Most downtime: rank, unit, bar and time fit a phone; site and
       failures are in the unit profile. */
    #viewDashboard .dash-worst__table { min-width: 0; }
    #viewDashboard .dash-worst__site, #viewDashboard .dash-worst__fails { display: none; }
    #viewDashboard .dash-table.dash-worst__table th, #viewDashboard .dash-table.dash-worst__table td { padding-left: 8px; padding-right: 8px; }
    #viewDashboard .dash-table.dash-worst__table th:first-child, #viewDashboard .dash-table.dash-worst__table td:first-child { padding-left: 16px; }
    #viewDashboard .dash-table.dash-worst__table th:last-child, #viewDashboard .dash-table.dash-worst__table td:last-child { padding-right: 16px; }
}

/* ---- Print: the blocks that are new in design F ---- */
@media print {
    #viewDashboard .dash-seg,
    #viewDashboard .dash-link,
    #viewDashboard .dash-attn__site-inline { display: none !important; }
    #viewDashboard .dash-card {
        margin-bottom: 10px;
        padding: 8px 10px;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
    #viewDashboard .dash-card__title { margin: 0 0 6px; font-size: 12pt; }
    #viewDashboard .dash-table { width: 100%; border-collapse: collapse; }
    #viewDashboard .dash-table th, #viewDashboard .dash-table td { padding: 3px 6px; border-bottom: 1px solid #ddd; text-align: left; }
    #viewDashboard .dash-bar { height: 6px; background: #eee; }
    #viewDashboard .dash-bar > span { display: block; height: 100%; background: #555; }
    #viewDashboard .dash-health { display: flex; align-items: center; gap: 12px; }
    #viewDashboard .dash-ring { position: relative; width: 92px; height: 92px; }
    #viewDashboard .dash-ring__text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600; }
    #viewDashboard .dash-parts__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px 12px; }
    #viewDashboard .dash-part { display: flex; gap: 6px; }
    #viewDashboard .dash-part__n { margin-left: auto; font-weight: 600; }
    #viewDashboard .dash-month { display: flex; flex-wrap: wrap; gap: 6px 24px; }
    #viewDashboard .dash-month__stat { display: flex; flex-direction: column; }
    #viewDashboard .dash-trend__bars { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
    #viewDashboard .dash-trend__col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
    #viewDashboard .dash-trend__bar { display: block; width: 60%; background: #888; }
    #viewDashboard .dash-trend__labels { display: flex; gap: 8px; }
    #viewDashboard .dash-trend__labels span { flex: 1; text-align: center; }
    #viewDashboard .kpi-chip { margin-left: 6px; font-size: 9pt; }
}

/* ============================================================
   SOFT UI (design F) — Units
   ============================================================ */
/* design F — units (concatenated into style.css when merged)
   Unit Database page (#viewEditUnits), the unit form (#unitModal), Bulk Edit
   (#bulkEditModal) and the unit profile (#unitProfileModal). Screen only:
   print keeps the rules in style.css. Desktop sizes sit in min-width: 701px
   so the PHONE section's 44px / 16px floor stays in charge on phones. */

@media screen {

    /* ============ Page head ============ */
    #viewEditUnits .units-head { margin: 4px 0 20px; }
    /* The action row keeps .edit-toolbar (print leaves it out), so the old
       toolbar's margin and its column layout under 900px are undone. */
    #viewEditUnits .units-actions.edit-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 10px;
        margin: 0;
    }
    #viewEditUnits .units-actions > .btn,
    #viewEditUnits .units-more__btn { min-height: 44px; }
    #viewEditUnits .units-actions svg { flex: 0 0 auto; }
    /* A limited account never sees the other group (style.css gives .seg a
       display, which would beat the hidden attribute). */
    #unitsGroupSeg[hidden],
    body[data-unit-scope] #unitsGroupSeg { display: none !important; }

    /* ---- More menu ---- */
    .units-more { position: relative; display: inline-flex; }
    #viewEditUnits .units-more__btn {
        width: 44px;
        min-width: 44px;
        padding: 0;
        justify-content: center;
    }
    #viewEditUnits .units-more__btn[aria-expanded="true"] { background: var(--surface-sunken); border-color: var(--border-strong); }
    .units-more__menu {
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        z-index: 60;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 220px;
        padding: 6px;
        border-radius: 12px;
        background: var(--surface-raised);
        box-shadow: var(--shadow-lg), var(--ring);
    }
    .units-more__menu[hidden] { display: none; }
    #viewEditUnits .units-more__menu .btn,
    #viewEditUnits .units-more__menu .btn.btn-primary {
        justify-content: flex-start;
        width: 100%;
        min-height: 40px;
        padding: 0 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        box-shadow: none;
        color: var(--text-body);
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
    }
    #viewEditUnits .units-more__menu .btn:hover,
    #viewEditUnits .units-more__menu .btn:focus-visible { background: var(--surface-sunken); color: var(--text); }
    #viewEditUnits .units-more__menu .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    #viewEditUnits .units-more__menu .btn i { width: 18px; color: var(--text-light); text-align: center; }

    /* ============ Import panel ============ */
    #viewEditUnits .import-panel { margin: 0 0 16px; }
    #viewEditUnits .file-upload-area {
        border: 1.5px dashed var(--border-strong);
        border-radius: var(--radius-lg);
        background: var(--card);
        padding: 28px 20px;
    }
    #viewEditUnits .file-upload-area:hover,
    #viewEditUnits .file-upload-area:focus-visible { border-color: var(--accent); background: var(--primary-lighter); outline: none; }
    #viewEditUnits .file-upload-area i { font-size: 28px; color: var(--accent); }
    #viewEditUnits .file-upload-area p { color: var(--text); font-weight: 600; }

    /* ============ Missing-details banner ============ */
    .units-banner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        margin: 0 0 16px;
        padding: 12px 16px;
        border-radius: 12px;
        background: var(--warning-bg);
        color: var(--warning-strong);
    }
    .units-banner[hidden] { display: none; }
    .units-banner > svg { flex: 0 0 auto; }
    .units-banner__text { flex: 1 1 300px; min-width: 0; }
    .units-banner__text strong { font-weight: 600; }
    .units-banner__link {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding: 0 4px;
        border: 0;
        background: none;
        color: var(--warning-strong);
        font: inherit;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
    }
    .units-banner__link:hover { text-decoration-thickness: 2px; }
    .units-banner__link:focus-visible { outline: 2px solid var(--warning-strong); outline-offset: 2px; border-radius: 4px; }

    /* ============ Filters: quick chips, search, status, site ============ */
    #viewEditUnits .units-filters.edit-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px 12px;
        margin: 0 0 16px;
    }
    .units-quick { display: flex; flex-wrap: wrap; gap: 8px; }
    .units-chip {
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--border-strong);
        border-radius: 20px;
        background: var(--card);
        color: var(--text-body);
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
    }
    .units-chip:hover:not(:disabled) { background: var(--surface-sunken); color: var(--text); }
    .units-chip.is-on,
    .units-chip.is-on:hover:not(:disabled) {
        border-color: var(--text);
        background: var(--text);
        color: #FFFFFF;
        font-weight: 600;
    }
    .units-chip:disabled { color: var(--text-light); background: var(--surface-sunken); border-color: var(--border); cursor: default; }
    .units-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    #viewEditUnits .units-filters__right {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-left: auto;
        flex-direction: row;
    }
    #viewEditUnits .units-filters .edit-search input { width: 220px; min-height: 40px; padding-left: 34px; }
    #viewEditUnits .units-filters .edit-search i { left: 13px; font-size: 13px; }
    /* Site / Status: a white pill with its name, the choice in bold (F). */
    .units-select {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 40px;
        padding: 0 0 0 12px;
        border-radius: 10px;
        background: var(--card);
        box-shadow: var(--ring);
        color: var(--text-secondary);
        font-size: 14px;
        white-space: nowrap;
    }
    .units-select:focus-within { box-shadow: var(--focus-ring), 0 0 0 1px var(--accent); }
    #viewEditUnits .units-select .form-select {
        min-height: 38px;
        max-width: 180px;
        padding: 0 30px 0 2px;
        border: 0;
        border-radius: 10px;
        background-color: transparent;
        box-shadow: none;
        color: var(--text);
        font-weight: 600;
        cursor: pointer;
    }
    #viewEditUnits .units-select .form-select:focus { box-shadow: none; outline: none; }
    #viewEditUnits #compactToggle { width: 40px; min-width: 40px; padding: 0; justify-content: center; }

    /* ============ Data completeness + units per implement (folded) ============ */
    .units-insights {
        margin: 0 0 16px;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    .units-insights[hidden] { display: none; }
    .units-insights__toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 52px;
        padding: 0 18px;
        border: 0;
        border-radius: var(--radius-lg);
        background: transparent;
        color: var(--text-light);
        font: inherit;
        font-size: 14px;
        text-align: left;
        cursor: pointer;
    }
    .units-insights__toggle:hover { background: var(--surface-sunken); }
    .units-insights__toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .units-insights__toggle[aria-expanded="true"] { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
    .units-insights__title { flex: 0 0 auto; font-weight: 600; color: var(--text); }
    .units-insights__meta {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--text-secondary);
    }
    .units-insights__chev { flex: 0 0 auto; margin-left: auto; transition: transform .15s ease; }
    .units-insights__toggle[aria-expanded="true"] .units-insights__chev { transform: rotate(180deg); }
    .units-insights__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 16px 18px 18px;
        border-top: 1px solid var(--border);
    }
    .units-insights__body[hidden] { display: none; }
    .units-insights .dq,
    .units-insights .tool-summary {
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
    }
    .units-insights .tool-summary { padding-top: 18px; border-top: 1px solid var(--border); }
    .units-insights .dq[style*="none"] + .tool-summary { padding-top: 0; border-top: 0; }

    /* Data completeness */
    .units-insights .dq__pct { font-family: var(--font-display); font-size: 30px; font-weight: 600; }
    .units-insights .dq--good .dq__pct { color: var(--success-strong); }
    .units-insights .dq--warn .dq__pct { color: var(--warning-strong); }
    .units-insights .dq--bad .dq__pct { color: var(--danger-strong); }
    .units-insights .dq__title { font-size: 15px; font-weight: 600; color: var(--text); }
    .units-insights .dq__sub { font-size: 13px; }
    .units-insights .dq__bar { height: 6px; background: var(--track); }
    .units-insights .dq--good .dq__bar span { background: var(--dot-good); }
    .units-insights .dq--warn .dq__bar span { background: var(--dot-warn); }
    .units-insights .dq--bad .dq__bar span { background: var(--dot-bad); }
    .units-insights .dq__gaps { gap: 8px; }
    .units-insights .dq-chip {
        min-height: 32px;
        padding: 0 12px;
        border: 1px solid var(--border-strong);
        border-radius: 16px;
        background: var(--card);
        color: var(--text-body);
        font-size: 13px;
    }
    .units-insights .dq-chip b { color: var(--danger-strong); }
    .units-insights .dq-chip.is-on { border-color: var(--text); background: var(--text); color: #FFFFFF; }
    .units-insights .dq-chip.is-on b { color: #FFFFFF; }
    .units-insights .dq__ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--success-strong); }

    /* Units per implement type / work tool */
    .units-insights .tool-summary__title { font-size: 15px; font-weight: 600; }
    .units-insights .tool-summary__title i { color: var(--text-light); }
    .units-insights .tool-summary__meta { font-size: 13px; }
    .units-insights .tool-summary__list { gap: 4px 28px; }
    .units-insights .tool-row { padding: 6px 10px; border-radius: 10px; font-size: 14px; }
    .units-insights .tool-row:hover { background: var(--surface-sunken); }
    .units-insights .tool-row.is-on { background: var(--primary-lighter); border-color: var(--accent); }
    .units-insights .tool-row__bar { height: 6px; background: var(--track); }
    .units-insights .tool-row__bar span { background: var(--accent); }
    .units-insights .tool-row__count { color: var(--text); }
    .units-insights .tool-brands { padding: 0 10px 6px; }
    .units-insights .tool-brand { border-color: var(--border); background: var(--surface-sunken); font-size: 12px; padding: 2px 10px; }
    .units-insights .tool-brand.is-on { border-color: var(--accent); background: var(--primary-lighter); color: var(--accent-text); }
    .units-insights .tool-summary__more { color: var(--accent-text); font-weight: 600; font-size: 13px; }

    /* ============ Table card ============ */
    .units-table-card { overflow: hidden; }
    /* Its title names the table for screen readers (aria-labelledby); on
       screen the page head already says it. The bar shows while rows are
       ticked, carrying Bulk Edit and Delete. */
    .units-table-card .table-card__header {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        background: var(--primary-lighter);
        border-bottom: 1px solid var(--border);
    }
    .units-table-card .table-card__title {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    .units-table-card:not(.has-selection) .table-card__header { display: none; }
    .units-selbar { display: flex; flex-wrap: wrap; gap: 8px; }
    .units-selbar .btn { gap: 0; }
    .units-selbar .btn i { margin-right: 8px; }

    /* Header row: sunken, 12px labels; the sticky cells match it. */
    #editTable thead th:nth-child(1),
    #editTable thead th:nth-child(2),
    #editTable thead th:nth-child(3),
    #editTable thead th:last-child { background: var(--surface-sunken); }
    #editTable th { white-space: nowrap; }
    /* (The first two columns keep their padding: the sticky offsets of
       style.css — 40px, then 88px — assume those widths.) */
    #editTable th:nth-child(2), #editTable td:nth-child(2) { color: var(--text-light); font-variant-numeric: tabular-nums; }
    #editTable td { vertical-align: middle; }
    #editTable tbody tr:last-child td { border-bottom: 0; }

    /* Unit cell: the nickname leads, the model reads as its second line. */
    #editTable td[data-label="Nickname"] .inline-edit { font-weight: 600; color: var(--text); }
    #editTable td[data-label="Model"],
    #editTable td[data-label="Brand"] { color: var(--text-secondary); }
    #editTable td[data-label="SN"] { color: var(--text-body); }
    #editTable td[data-label="Status"] .inline-edit { font-weight: 600; }
    #editTable .inline-edit { border-radius: 8px; }
    #editTable .inline-edit:focus { background: var(--card); box-shadow: 0 0 0 2px var(--accent); }

    /* Ticked rows: teal wash and a bar on the leading edge (F). */
    #editTable tbody tr:has(.unit-check:checked),
    #editTable tbody tr:has(.unit-check:checked):hover { background: var(--primary-lighter); }
    #editTable tbody tr:has(.unit-check:checked) td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

    /* Row actions: quiet icon buttons until hovered. */
    #editTable .row-actions { gap: 4px; }
    #editTable .row-actions .btn { border-radius: 8px; box-shadow: none; }

    /* Licence chips in the table follow the F chip shape. */
    #editTable .license-badge { padding: 2px 10px; border: 0; border-radius: 12px; font-size: 12px; }
    #editTable .license-badge--ok { color: var(--success-strong); }
    #editTable .license-badge--soon { color: var(--warning-strong); }
    #editTable .license-badge--expired { color: var(--danger-strong); }

    /* Footer: how many rows are on screen, and the database total. */
    .units-table-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 6px 12px;
        padding: 12px 18px;
        border-top: 1px solid var(--border);
        color: var(--text-secondary);
        font-size: 14px;
    }
    .units-table-foot span:empty { display: none; }
    #editUnitCount { color: var(--text-light); font-size: 13px; }

    /* ============ Unit form (#unitModal) ============ */
    #unitModal .modal-card { max-width: 720px; }
    #unitModal .modal-header h3 { font-size: 20px; }
    #unitModal .modal-body { padding: 8px 24px 4px; }
    #unitModal .unit-form__section {
        margin: 0;
        padding: 18px 0 6px;
        border: 0;
        border-top: 1px solid var(--border);
        border-radius: 0;
        background: none;
    }
    #unitModal .unit-form__section:first-of-type { border-top: 0; padding-top: 14px; }
    #unitModal .unit-form__section legend {
        float: left;
        width: 100%;
        margin: 0 0 12px;
        padding: 0;
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-light);
    }
    #unitModal .unit-form__section legend + * { clear: both; }
    #unitModal .form-grid { gap: 14px 16px; margin-bottom: 12px; }
    #unitModal .form-label,
    #bulkEditModal .bulk-row > label {
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-body);
    }
    #unitModal .form-group { gap: 6px; }
    #unitModal .form-hint { font-size: 12.5px; color: var(--text-secondary); }
    #unitModal .breakdown-reason-box { border-radius: 10px; }
    #unitModal .form-actions,
    #bulkEditModal .form-actions {
        padding: 14px 24px;
        border-top: 1px solid var(--border);
        background: var(--card);
    }

    /* ============ Bulk Edit ============ */
    #bulkEditModal .modal-card { max-width: 560px; }
    #bulkEditModal .modal-body { padding: 16px 24px 8px; }
    #bulkEditModal .modal-body > p { font-size: 14px !important; color: var(--text-secondary) !important; }
    #bulkEditModal .bulk-row {
        gap: 14px;
        padding: 10px 0;
        border-bottom: 1px solid var(--border);
    }
    #bulkEditModal .bulk-row:last-child { border-bottom: 0; }
    #bulkEditModal .bulk-row > label { width: 160px; gap: 10px; }
    #bulkEditModal .bulk-row > label input { accent-color: var(--accent); }
    /* A field whose box is not ticked reads as off. */
    #bulkEditModal .bulk-row:has(> label input:not(:checked)) > .form-input,
    #bulkEditModal .bulk-row:has(> label input:not(:checked)) > .form-select { background-color: var(--surface-sunken); }

    /* ============ Unit profile ============ */
    #unitProfileModal .modal-card { max-width: 900px; }
    #unitProfileModal .modal-header { align-items: flex-start; gap: 12px; padding: 20px 24px 16px; }
    .uprof-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .uprof-head h3 { margin: 0; font-size: 22px; line-height: 1.3; overflow-wrap: anywhere; }
    .uprof-head__sub { color: var(--text-secondary); font-size: 14px; }
    .uprof-head__sub:empty { display: none; }
    .uprof-head__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
    #unitProfileModal .uprof-head__actions .btn-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: var(--neutral-tint);
        color: var(--text-body);
    }
    #unitProfileModal .modal-body { padding: 20px 24px 24px; }

    #unitProfileModal .profile-grid { gap: 18px; }
    #unitProfileModal .profile-section {
        min-width: 0;
        padding: 16px 18px;
        border-radius: 14px;
        background: var(--card);
        box-shadow: var(--ring);
    }
    #unitProfileModal .profile-section__title {
        margin: 0 0 10px;
        padding: 0;
        border: 0;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--text-light);
    }
    #unitProfileModal .profile-section__title--sub { margin-top: 18px; }

    /* Breakdown callout: what is wrong and for how long. */
    #unitProfileModal .profile-note {
        display: flex;
        gap: 10px;
        margin-top: 10px;
        padding: 12px 14px;
        border: 0;
        border-radius: 12px;
        background: var(--surface-sunken);
        color: var(--text-body);
        font-size: 13.5px;
    }
    #unitProfileModal .profile-note > i { margin-top: 3px; }
    #unitProfileModal .profile-note--bad { margin-top: 0; background: var(--danger-bg); color: var(--danger-strong); }
    #unitProfileModal .profile-note--bad strong { display: block; font-weight: 700; }
    .profile-note__sub { display: block; font-size: 13px; }
    .profile-note__link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        margin-top: 2px;
        padding: 0;
        border: 0;
        background: none;
        color: inherit;
        font: inherit;
        font-size: 13px;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
    }
    .profile-note__link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 4px; }
    .profile-status .badge { font-size: 13px; }

    /* Parts: a 2-column grid of tiles, the state on the right. */
    #unitProfileModal .profile-comps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    #unitProfileModal .profile-comp {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        border: 0;
        border-radius: 10px;
        background: var(--surface-sunken);
        color: var(--text);
        font-size: 14px;
    }
    #unitProfileModal .profile-comp > i { font-size: 15px; }
    #unitProfileModal .profile-comp.ok > i { color: var(--dot-good); }
    #unitProfileModal .profile-comp.bad > i { color: var(--dot-bad); }
    .profile-comp__state { margin-left: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
    .profile-comp.ok .profile-comp__state { color: var(--success-strong); }
    .profile-comp.bad .profile-comp__state { color: var(--danger-strong); }

    /* Licences: label left, expiry right. */
    #unitProfileModal .profile-row {
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid var(--border);
        font-size: 14px;
    }
    #unitProfileModal .profile-row:last-child { border-bottom: 0; }
    #unitProfileModal .profile-row__label { color: var(--text-body); }
    #unitProfileModal .license-badge { padding: 2px 10px; border: 0; border-radius: 12px; font-size: 12px; }

    /* Identity: a two-column definition list. */
    .profile-dl {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
        margin: 0;
    }
    #unitProfileModal .profile-dl .profile-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 0;
        border: 0;
        min-width: 0;
    }
    #unitProfileModal .profile-dl dt { font-size: 12px; color: var(--text-secondary); }
    #unitProfileModal .profile-dl dd { margin: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
    #unitProfileModal .profile-dl dd > span[style*="text-align:right"] { text-align: left !important; }

    /* Record lists */
    #unitProfileModal .profile-list { gap: 0; max-height: 220px; }
    #unitProfileModal .profile-item { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
    #unitProfileModal .profile-item:last-child { border-bottom: 0; }
    #unitProfileModal .profile-empty { font-size: 13.5px; color: var(--text-light); }
}

/* Good / Breakdown in the status and part cells: painted by
   paintUnitStates (CSS Custom Highlight API) — the row markup stays as is. */
@media screen {
    ::highlight(units-good) { color: var(--success-strong); }
    ::highlight(units-bad) { color: var(--danger-strong); background-color: var(--danger-tint); }
}

/* ============ Desktop sizes ============ */
@media screen and (min-width: 701px) {
    #viewEditUnits .units-actions > .btn { padding: 0 16px; }
    #viewEditUnits .units-actions .btn-secondary { padding: 0 14px; }
    #viewEditUnits .units-more__btn { padding: 0; }
    #editTable .row-actions .btn { width: 34px; min-width: 34px; height: 34px; min-height: 34px; padding: 0; }
    /* The upload button is a .btn-icon: the shared 40px square would make
       every row 65px tall. */
    #editTable .attach-upload-btn,
    #unitProfileModal .attach-upload-btn { width: 30px; height: 30px; min-height: 30px; border-radius: 8px; }
    #editTable.compact .row-actions .btn { width: 28px; min-width: 28px; height: 28px; min-height: 28px; }
    #unitModal .form-input,
    #unitModal .form-select,
    #bulkEditModal .form-input,
    #bulkEditModal .form-select { min-height: 40px; }
}

/* Under 1100px the filters drop under the chips as one row. */
@media screen and (max-width: 1100px) {
    #viewEditUnits .units-filters__right { margin-left: 0; width: 100%; }
    #viewEditUnits .units-filters .edit-search { flex: 1 1 200px; }
    #viewEditUnits .units-filters .edit-search input { width: 100%; }
}

/* ============ Phones ============ */
@media screen and (max-width: 700px) {
    /* Head: the group switch across the top, then Export · More · Add unit. */
    #viewEditUnits .units-head { margin: 0 0 16px; gap: 12px; }
    #viewEditUnits .units-head .page-head__text { width: 100%; }
    #viewEditUnits .units-actions.edit-toolbar { width: 100%; justify-content: stretch; gap: 8px; }
    #viewEditUnits .units-seg { display: flex; width: 100%; }
    #viewEditUnits .units-seg .seg__btn { flex: 1 1 0; min-height: 44px; }
    #viewEditUnits .units-actions > .btn { flex: 1 1 0; min-width: 0; justify-content: center; }
    #viewEditUnits .units-more { flex: 0 0 auto; }
    /* The button sits mid-row: the menu opens centred under it. */
    .units-more__menu { right: auto; left: 50%; transform: translateX(-50%); }
    #viewEditUnits .units-more__menu .btn,
    #viewEditUnits .units-more__menu .btn.btn-primary { min-height: 44px; }

    .units-banner__link, .profile-note__link { min-height: 44px; }

    /* Filters: chips wrap; search on its own line; Status and Site share one. */
    #viewEditUnits .units-filters.edit-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
    .units-quick { gap: 6px; }
    .units-chip { min-height: 44px; padding: 0 14px; font-size: 14px; }
    #viewEditUnits .units-filters__right {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 8px;
        width: 100%;
        margin: 0;
    }
    #viewEditUnits .units-filters .edit-search { grid-column: 1 / -1; width: 100%; }
    #viewEditUnits .units-filters .edit-search input { width: 100%; min-height: 44px; }
    .units-select { min-width: 0; min-height: 44px; padding-left: 4px; }
    /* The options name the filter ("All Status", "All Sites"); the select
       keeps its aria-label. */
    .units-select__label { display: none; }
    #viewEditUnits .units-select .form-select { flex: 1 1 auto; min-width: 0; max-width: none; min-height: 42px; padding: 0 28px 0 2px; }

    .units-insights__toggle { padding: 10px 14px; }
    .units-insights__meta { white-space: normal; }
    .units-insights__body { padding: 14px; }
    .units-insights .dq__pct { font-size: 26px; }

    /* Table cards (F): the nickname as the title with its status at the
       right, the model under it, then the fields as label · value rows. */
    .units-table-card { overflow: visible; background: transparent; box-shadow: none; }
    .units-table-card .table-wrapper { overflow: visible; }
    #editTable tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        margin-bottom: 12px;
        padding: 14px 16px 12px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    #editTable tbody tr:hover { background: var(--card); }
    #editTable tbody tr > td { grid-column: 1 / -1; min-width: 0; }
    #editTable tbody tr > td[data-label] { border-top: 1px solid var(--border); border-bottom: 0; padding: 4px 0; }
    #editTable tbody td[data-label]::before {
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-secondary);
    }
    #editTable tbody tr > td[data-label="Nickname"] {
        grid-column: 1;
        grid-row: 1;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 4px 8px;
        border-top: 0;
        padding: 0;
    }
    #editTable tbody td[data-label="Nickname"] .inline-edit { padding: 6px 4px; min-height: 0; font-size: 16px; }
    #editTable tbody tr > td[data-label="Model"] {
        grid-column: 1;
        grid-row: 2;
        justify-content: flex-start;
        padding: 0 0 8px;
        border-top: 0;
    }
    #editTable tbody td[data-label="Model"] .inline-edit { color: var(--text-secondary); padding: 2px 4px; min-height: 0; font-size: 15px; }
    #editTable tbody tr > td[data-label="Status"] {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: start;
        border-top: 0;
        padding: 0;
    }
    #editTable tbody td[data-label="Nickname"]::before,
    #editTable tbody td[data-label="Model"]::before,
    #editTable tbody td[data-label="Status"]::before { content: none; }
    #editTable tbody td[data-label="Status"] .inline-edit {
        min-height: 0;
        padding: 4px 12px;
        border-radius: 14px;
        background: var(--neutral-tint);
        font-size: 15px;
    }
    #editTable tbody td.col-actions { padding-top: 10px; border-top: 1px solid var(--border); }
    #editTable tbody td[colspan] { grid-column: 1 / -1; padding: 16px 0; text-align: center; }
    #editTable tbody tr:has(td[colspan]) { display: block; }
    #editTable tbody tr:has(.unit-check:checked) { box-shadow: var(--shadow), inset 3px 0 0 var(--accent); }
    #editTable tbody tr:has(.unit-check:checked) td:first-child { box-shadow: none; }

    .units-table-card.has-selection .table-card__header { position: sticky; top: 0; z-index: 20; border-radius: 12px; margin-bottom: 10px; }
    .units-table-foot { padding: 4px 2px 0; border-top: 0; }

    /* Dialogs on a phone: one column, full-width sections. */
    #unitModal .modal-body { padding: 4px 16px; }
    #unitModal .form-actions,
    #bulkEditModal .form-actions { padding: 12px 16px; }
    #bulkEditModal .modal-body { padding: 12px 16px 4px; }
    #bulkEditModal .bulk-row { flex-direction: column; align-items: stretch; gap: 6px; }
    #bulkEditModal .bulk-row > label { width: auto; min-height: 40px; }
    #unitProfileModal .modal-header { padding: 16px; flex-wrap: wrap; }
    .uprof-head { flex: 1 1 100%; order: 0; }
    .uprof-head__actions { order: 1; width: 100%; justify-content: flex-start; }
    #unitProfileModal .uprof-head__actions .btn-icon { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; }
    #unitProfileModal .modal-header { position: relative; padding-right: 64px; }
    #unitProfileModal .modal-body { padding: 16px; }
    #unitProfileModal .profile-section { padding: 14px; }
}
@media screen and (max-width: 380px) {
    #unitProfileModal .profile-comps,
    .profile-dl { grid-template-columns: minmax(0, 1fr); }
}

/* Print: the folded fleet details and the banner's link are screen tools. */
@media print {
    .units-insights, .units-banner__link, .units-more__menu { display: none !important; }
}

/* ============================================================
   SOFT UI (design F) — Damage
   ============================================================ */
/* design F — damage (concatenated into style.css when merged)
   The Damage page (#viewDamage), the Report / Edit damage form
   (#damageModal), the Mark as repaired dialog (#damageRepairModal) and the
   photo viewer (#photoLightbox). Screen only: print keeps its own rules.
   Desktop sizes sit in min-width: 701px; phones keep the PHONE section's
   44px targets and 16px fields. */

@media screen {
    /* ---- Page ---- */
    #viewDamage .dmg-head { margin-bottom: 20px; }
    .dmg-sr {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }

    /* ---- Summary tiles ---- */
    .dmg-kpis {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin-bottom: 20px;
    }
    .dmg-kpi {
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
        min-width: 0;
    }
    .dmg-kpi__icon {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--neutral-tint);
        color: var(--text-body);
    }
    .dmg-kpi--open .dmg-kpi__icon { background: var(--danger-tint); color: var(--danger-strong); }
    .dmg-kpi--down .dmg-kpi__icon { background: var(--warning-tint); color: var(--warning-strong); }
    .dmg-kpi--done .dmg-kpi__icon { background: var(--success-tint); color: var(--success-strong); }
    .dmg-kpi__text { display: flex; flex-direction: column; min-width: 0; }
    .dmg-kpi__value {
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }
    .dmg-kpi__label { color: var(--text-secondary); font-size: 14px; }

    /* ---- Filter row: search and three labelled pickers ---- */
    .dmg-filters {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }
    .dmg-field {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 4px 0 12px;
        box-sizing: border-box;
        border-radius: var(--radius);
        background: var(--card);
        box-shadow: var(--ring);
        color: var(--text-secondary);
        font-size: 14px;
        cursor: pointer;
    }
    .dmg-field:focus-within { box-shadow: 0 0 0 1px var(--accent), var(--focus-ring); }
    .dmg-field--search {
        flex: 1 1 220px;
        max-width: 320px;
        padding: 0 12px;
        cursor: text;
    }
    .dmg-field--search svg { flex: 0 0 auto; color: var(--text-secondary); }
    #viewDamage .dmg-field input,
    #viewDamage .dmg-field select {
        min-width: 0;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        box-shadow: none;
        outline: none;
        font-family: inherit;
        color: var(--text);
    }
    #viewDamage .dmg-field input { flex: 1 1 auto; width: 100%; padding: 0; }
    #viewDamage .dmg-field input::placeholder { color: var(--text-light); }
    #viewDamage .dmg-field select {
        -webkit-appearance: none;
        appearance: none;
        padding: 0 26px 0 0;
        font-weight: 600;
        cursor: pointer;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 6px center;
    }
    /* An account limited to one group sees that group only — no switch. */
    body[data-unit-scope] #viewDamage .dmg-field--group { display: none !important; }

    /* "Unit: GGTR-014 ×" when one unit's records are shown */
    #viewDamage .dmg-filter-chip {
        min-height: 40px;
        padding: 0 12px;
        gap: 8px;
        border: 0;
        border-radius: var(--radius);
        background: var(--primary-lighter);
        box-shadow: inset 0 0 0 1px rgba(15,118,110,0.25);
        color: var(--accent-text);
        font: 600 14px/1.3 var(--font-sans);
    }
    #viewDamage .dmg-filter-chip:hover { background: #CCFBF1; }
    #viewDamage .dmg-bulk-delete { margin-left: auto; }

    /* ---- Table card ---- */
    #viewDamage .dmg-card { overflow: hidden; }
    #viewDamage .dmg-card .table-wrapper { overflow: auto; }
    #damageTable { min-width: 900px; }
    #damageTable th { cursor: default; white-space: nowrap; }
    #damageTable th:hover { background: var(--surface-sunken); color: var(--text-secondary); }
    #damageTable th:nth-child(2) { padding-left: 4px; }
    #damageTable td { vertical-align: middle; }
    #damageTable tbody tr:last-child td { border-bottom: 0; }
    #damageTable .col-check { width: 44px; padding-left: 20px; padding-right: 8px; }
    #damageTable .col-check input { accent-color: var(--accent); cursor: pointer; }
    #damageTable td.dmg-date { padding-left: 4px; color: var(--text-secondary); white-space: nowrap; }
    #damageTable .dmg-date .q-tag { display: block; width: fit-content; margin-top: 4px; }

    .dmg-unit { white-space: nowrap; }
    .dmg-unit__name,
    .dmg-unit__meta { display: block; }
    .dmg-unit__name { font-weight: 600; color: var(--text); }
    button.dmg-unit__link {
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        font-weight: 600;
        color: var(--text);
        text-align: left;
        cursor: pointer;
    }
    button.dmg-unit__link:hover { color: var(--accent-text); text-decoration: underline; }
    .dmg-unit__meta { font-size: 12px; color: var(--text-secondary); }

    /* Type chips: neutral for mechanical, blue for device precision,
       violet for software */
    .dmg-type {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        border-radius: 12px;
        background: var(--neutral-tint);
        color: var(--text-body);
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }
    .dmg-type--device { background: var(--info-bg); color: var(--info-strong); }
    .dmg-type--soft { background: #F4F3FF; color: #4A1FB8; }

    td.dmg-what { white-space: normal; min-width: 220px; max-width: 360px; }
    .dmg-what__comp { display: block; font-weight: 600; color: var(--text); }
    .dmg-what__desc {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        color: var(--text-secondary);
        overflow-wrap: anywhere;
    }
    .dmg-none { color: var(--text-light); }

    /* Photos: Before / After as small tiles. The images are fetched only when
       a tile is opened, never to draw the table. */
    #damageTable .dmg-photos { white-space: nowrap; color: var(--text-light); }
    #damageTable .dmg-ph-group { display: inline-flex; gap: 6px; }
    #damageTable .dmg-ph-group .wl-photo-btn,
    #damageTable .dmg-ph-group .wl-photo-btn:not(:only-child):first-child,
    #damageTable .dmg-ph-group .wl-photo-btn:not(:only-child):last-child {
        margin: 0;
        gap: 6px;
        min-width: 0;
        min-height: 32px;
        padding: 0 10px 0 8px;
        border: 0;
        border-radius: 8px;
        background: var(--neutral-tint);
        color: var(--text-body);
        font-size: 13px;
        font-weight: 600;
    }
    #damageTable .dmg-ph-group .wl-photo-btn i { color: var(--text-light); }
    #damageTable .dmg-ph-group .wl-photo-btn.dmg-ph--after { background: var(--success-bg); color: var(--success-strong); }
    #damageTable .dmg-ph-group .wl-photo-btn.dmg-ph--after i { color: var(--success); }
    #damageTable .dmg-ph-group .wl-photo-btn.dmg-ph--add {
        background: transparent;
        box-shadow: inset 0 0 0 1px var(--border-strong);
        color: var(--text-secondary);
    }
    #damageTable .dmg-ph-group .wl-photo-btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--accent); color: var(--accent-text); }

    /* Repair status */
    #damageTable td.dmg-repair-cell { white-space: nowrap; }
    .dmg-state {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        vertical-align: middle;
    }
    .dmg-state__dot { width: 6px; height: 6px; border-radius: 3px; background: currentColor; flex: 0 0 auto; }
    .dmg-state--open { background: var(--danger-bg); color: var(--danger-strong); }
    .dmg-state--open .dmg-state__dot { background: var(--dot-bad); }
    .dmg-state--done { background: var(--success-bg); color: var(--success-strong); }
    .dmg-state--done .dmg-state__dot { background: var(--dot-good); }
    .dmg-state__when { font-weight: 400; opacity: 0.85; }
    /* What an open record holds on a heavy unit: under the status */
    #damageTable .dmg-unit-chip {
        display: flex;
        width: fit-content;
        margin: 6px 0 0;
        padding: 2px 10px;
        border: 0;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
    }
    #damageTable .dmg-unit-chip--down { background: var(--danger-tint); color: var(--danger-strong); }
    #damageTable .dmg-unit-chip--off { background: var(--warning-bg); color: var(--warning-strong); box-shadow: inset 0 0 0 1px var(--warning-border); }

    #damageTable tr.dmg-row--done:hover,
    #damageTable tr.dmg-row:hover { background: #FCFCFD; }
    #damageTable td.dmg-empty {
        padding: 40px 20px;
        text-align: center;
        white-space: normal;
        color: var(--text-secondary);
    }

    /* Count under the table */
    .dmg-card__foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 12px 20px;
        border-top: 1px solid var(--border);
        color: var(--text-secondary);
        font-size: 14px;
    }

    /* ---- Row actions ---- */
    #damageTable td.dmg-act-cell { width: 56px; padding-right: 16px; text-align: right; }
    .dmg-actions { display: flex; justify-content: flex-end; }
    .dmg-more {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 0;
        border-radius: var(--radius);
        background: transparent;
        color: var(--text-secondary);
        cursor: pointer;
    }
    .dmg-more:hover, .dmg-more[aria-expanded="true"] { background: var(--track); color: var(--text); }
    .dmg-menu {
        display: none;
        position: fixed;
        z-index: 240;               /* under dialogs (250) */
        min-width: 200px;
        padding: 6px;
        border-radius: 12px;
        background: var(--surface-raised);
        box-shadow: var(--shadow-lg), var(--ring);
        text-align: left;
    }
    .dmg-menu.is-open { display: flex; flex-direction: column; gap: 2px; }
    .dmg-menu__item {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 40px;
        padding: 0 12px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: var(--text-body);
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
    }
    .dmg-menu__item i { width: 16px; text-align: center; color: var(--text-light); }
    .dmg-menu__item:hover, .dmg-menu__item:focus-visible { background: var(--surface-sunken); color: var(--text); }
    .dmg-menu__item--main { font-weight: 600; color: var(--accent-text); }
    .dmg-menu__item--main i { color: var(--accent); }
    .dmg-menu__item--danger, .dmg-menu__item--danger i { color: var(--danger); }
    .dmg-menu__item--danger:hover { background: var(--danger-bg); color: var(--danger-strong); }

    /* View-only: nothing to tick, nothing to act on */
    body[data-ro-damage] #damageTable .col-check,
    body[data-ro-damage] #damageTable .col-actions { display: none !important; }
    body[data-ro-damage] #damageTable th:nth-child(2),
    body[data-ro-damage] #damageTable td.dmg-date { padding-left: 20px; }

    /* ---- Report / Edit damage form ---- */
    #damageModal .modal-card.dmg-modal { max-width: 640px; }
    #damageModal .modal-header,
    #damageRepairModal .modal-header { gap: 12px; }
    #damageModal .modal-header .btn-icon,
    #damageRepairModal .modal-header .btn-icon { color: var(--text-secondary); }
    #damageModal .modal-header .btn-icon:hover,
    #damageRepairModal .modal-header .btn-icon:hover { background: var(--track); color: var(--text); }
    #damageModal .modal-body,
    #damageRepairModal .modal-body { padding: 20px 24px; }
    #damageModal .form-grid { gap: 16px; margin-bottom: 0; }
    #damageModal .form-group,
    #damageRepairModal .form-group { gap: 6px; }
    #damageModal .form-label,
    #damageRepairModal .form-label {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-body);
    }
    #damageModal .form-optional,
    #damageRepairModal .form-optional { font-size: 13px; color: var(--text-light); }
    #damageModal .form-input,
    #damageModal .form-select { width: 100%; box-sizing: border-box; }
    #damageModal .form-textarea { min-height: 104px; }
    #damageModal .form-actions,
    #damageRepairModal .form-actions { padding: 16px 24px; gap: 10px; border-top: 1px solid var(--border); }

    /* The record's effect on its unit: a quiet panel */
    .dmg-link-panel {
        padding: 12px 14px;
        border-radius: 12px;
        background: var(--surface-sunken);
        box-shadow: var(--ring);
    }
    .dmg-check {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 32px;
        font-size: 14px;
        color: var(--text);
        cursor: pointer;
    }
    .dmg-check input { margin: 0; accent-color: var(--accent); flex: 0 0 auto; }
    .dmg-link-panel__hint { font-size: 13px; color: var(--text-secondary); padding-left: 28px; }
    .dmg-link-panel .dmg-repaired-row {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--border);
        gap: 8px 12px;
    }
    .dmg-link-panel .dmg-repaired-row .form-input { width: auto; max-width: 200px; }

    /* Photo slots */
    .dmg-photo-row { align-items: center; gap: 12px; }
    .dmg-photo-pick svg, .dmg-photo-del svg { flex: 0 0 auto; }
    .dmg-photo-del { color: var(--danger); }
    .dmg-photo-del:hover { color: var(--danger-strong); }
    .dmg-photo-preview { gap: 12px; }
    .dmg-photo-preview img {
        width: 96px;
        height: 96px;
        max-width: none;
        max-height: none;
        border: 0;
        border-radius: 12px;
        box-shadow: var(--ring);
    }

    /* ---- Mark as repaired ---- */
    #damageRepairModal .modal-card.dmg-repair { max-width: 520px; }
    #damageRepairTitle i { color: var(--accent); margin-right: 4px; }
    .dmg-repair__summary {
        gap: 6px;
        margin-bottom: 18px;
        padding: 14px 16px;
        border: 0;
        border-radius: 12px;
        background: var(--surface-sunken);
        box-shadow: var(--ring);
        font-size: 14px;
    }
    .dmg-repair__unit strong { font-weight: 600; color: var(--text); }
    .dmg-repair__meta { display: block; margin: 2px 0 0; font-size: 13px; color: var(--text-secondary); }
    .dmg-repair__desc { font-size: 14px; color: var(--text-body); }
    .dmg-repair__before .wl-photo-btn {
        min-height: 32px;
        padding: 0 10px 0 8px;
        border: 0;
        border-radius: 8px;
        background: var(--card);
        box-shadow: var(--ring);
        color: var(--text-body);
        font-size: 13px;
        font-weight: 600;
    }
    .dmg-repair__effect {
        margin: 12px 0 0;
        padding: 10px 12px;
        border-radius: var(--radius);
        background: var(--info-bg);
        color: var(--info-strong);
        font-size: 14px;
        font-weight: 600;
    }
    .dmg-repair__hint { margin-top: 8px; font-size: 13px; color: var(--text-secondary); }

    /* ---- Photo viewer ---- */
    .photo-lightbox { background: rgba(16,24,40,0.88); }
    .photo-lightbox img { border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
    .photo-lightbox__close,
    .photo-lightbox__nav {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 12px;
        background: rgba(255,255,255,0.14);
        color: #FFFFFF;
        cursor: pointer;
    }
    .photo-lightbox__nav { flex: 0 0 auto; margin: 0 12px; }
    .photo-lightbox__close { position: absolute; top: 14px; right: 14px; z-index: 1; }
    .photo-lightbox__close:hover,
    .photo-lightbox__nav:hover { background: rgba(255,255,255,0.26); }
    .photo-lightbox__close:focus-visible,
    .photo-lightbox__nav:focus-visible,
    .photo-lightbox__mode:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; }
    .photo-lightbox__caption,
    .photo-lightbox__count,
    .photo-lightbox__fig figcaption {
        border-radius: 12px;
        background: rgba(16,24,40,0.72);
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
    }
    .photo-lightbox__caption { top: 18px; padding: 6px 14px; }
    .photo-lightbox__count { bottom: 20px; padding: 4px 12px; }
    .photo-lightbox__mode {
        min-height: 40px;
        padding: 0 14px;
        gap: 8px;
        border: 0;
        border-radius: 12px;
        background: rgba(255,255,255,0.14);
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 600;
    }
    .photo-lightbox__mode:hover { background: rgba(255,255,255,0.26); }
}

/* Desktop sizing */
@media screen and (min-width: 701px) {
    #viewDamage .dmg-field select,
    #viewDamage .dmg-field input { min-height: 38px; font-size: 14px; }
    #damageModal .form-input,
    #damageModal .form-select,
    #damageRepairModal .form-input { min-height: 44px; }
    .dmg-link-panel .dmg-repaired-row .form-input { min-height: 40px; }
    #damageTable .col-check input,
    .dmg-check input { width: 18px; height: 18px; }
}

/* ---- Phones: the table becomes a list of cards ---- */
@media screen and (max-width: 700px) {
    #viewDamage .dmg-head { margin-bottom: 16px; }
    #viewDamage .dmg-head .page-head__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    #viewDamage .dmg-head .page-head__actions .btn { justify-content: center; padding: 0 10px; }
    #viewDamage .dmg-head .page-head__actions .btn-primary { grid-column: 1 / -1; }

    .dmg-kpis { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
    .dmg-kpi { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
    .dmg-kpi__icon { width: 36px; height: 36px; border-radius: 10px; }
    .dmg-kpi__value { font-size: 22px; }
    .dmg-kpi__label { font-size: 13px; line-height: 1.35; }

    /* Search on its own line, the pickers two to a line */
    .dmg-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
    .dmg-field { min-height: 44px; min-width: 0; padding-right: 2px; }
    .dmg-field--search { grid-column: 1 / -1; max-width: none; }
    .dmg-field__label { flex: 0 0 auto; }
    #viewDamage .dmg-field select {
        flex: 1 1 auto;
        width: 100%;
        min-height: 42px;
        padding: 0 24px 0 0;
        font-size: 16px;
        text-overflow: ellipsis;
        background-position: right 4px center;
    }
    #viewDamage .dmg-field input { min-height: 42px; padding: 0; font-size: 16px; }
    #viewDamage .dmg-filter-chip { grid-column: 1 / -1; justify-self: start; max-width: 100%; min-height: 44px; }
    #viewDamage .dmg-bulk-delete { grid-column: 1 / -1; margin-left: 0; width: 100%; justify-content: center; }

    /* The card holds cards: no frame of its own */
    #viewDamage .dmg-card { background: transparent; box-shadow: none; border: 0; border-radius: 0; overflow: visible; }
    #viewDamage .dmg-card .table-wrapper { overflow: visible; }
    #damageTable { min-width: 0; }
    #damageTable tbody tr.dmg-row {
        display: grid;
        grid-template-columns: 34px auto minmax(0, 1fr) auto;
        grid-template-areas:
            "check unit   unit   date"
            ".     type   repair repair"
            ".     what   what   what"
            ".     photos photos photos"
            "act   act    act    act";
        align-items: center;
        column-gap: 8px;
        margin-bottom: 12px;
        padding: 14px 14px 12px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    /* A heavy unit's "Telematic Box: Breakdown" needs the line to itself */
    #damageTable tbody tr.dmg-row:has(.dmg-unit-chip) {
        grid-template-areas:
            "check unit   unit   date"
            ".     type   type   type"
            ".     repair repair repair"
            ".     what   what   what"
            ".     photos photos photos"
            "act   act    act    act";
    }
    #damageTable tbody tr.dmg-row:has(.dmg-unit-chip) td.dmg-repair-cell { margin-top: 8px; }
    #damageTable tbody tr.dmg-row > td {
        display: block;
        width: auto;
        padding: 0;
        border: 0;
        white-space: normal;
        min-width: 0;
        max-width: none;
    }
    #damageTable tbody tr.dmg-row > td[data-label]::before { content: none; }
    #damageTable tr.dmg-row td.col-check { grid-area: check; align-self: start; display: flex; align-items: center; min-height: 24px; padding: 0; }
    #damageTable tr.dmg-row td.dmg-unit { grid-area: unit; align-self: start; }
    #damageTable tr.dmg-row td.dmg-date { grid-area: date; align-self: start; padding: 2px 0 0; text-align: right; font-size: 13px; }
    #damageTable tr.dmg-row td.dmg-type-cell { grid-area: type; margin-top: 10px; }
    #damageTable tr.dmg-row td.dmg-repair-cell { grid-area: repair; margin-top: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
    #damageTable tr.dmg-row td.dmg-repair-cell .dmg-unit-chip { display: inline-flex; max-width: 100%; margin: 0; white-space: normal; }
    #damageTable tr.dmg-row td.dmg-what { grid-area: what; margin-top: 10px; }
    #damageTable tr.dmg-row td.dmg-photos { grid-area: photos; margin-top: 10px; }
    #damageTable tr.dmg-row td.dmg-photos:not(:has(button)) { display: none; }
    #damageTable tr.dmg-row td.dmg-act-cell {
        grid-area: act;
        width: auto;
        margin-top: 12px;
        padding-top: 12px;
        border-top: 1px solid var(--border);
    }
    #damageTable .dmg-unit { white-space: normal; }
    #damageTable .dmg-unit__name { font-size: 15px; }
    #damageTable button.dmg-unit__link { min-height: 36px; display: flex; align-items: center; margin: -6px 0 -4px; }
    #damageTable .dmg-unit__meta { font-size: 13px; overflow-wrap: anywhere; }
    #damageTable .dmg-what__desc { -webkit-line-clamp: 3; }
    #damageTable .dmg-ph-group { flex-wrap: wrap; }
    #damageTable .dmg-ph-group .wl-photo-btn,
    #damageTable .dmg-ph-group .wl-photo-btn:not(:only-child):first-child,
    #damageTable .dmg-ph-group .wl-photo-btn:not(:only-child):last-child { min-height: 40px; padding: 0 14px 0 12px; }

    /* The menu's buttons sit in the card: the main one with its words,
       Edit and Delete as 44px icons */
    #damageTable .dmg-more { display: none; }
    #damageTable .dmg-actions { display: block; }
    #damageTable .dmg-menu,
    #damageTable .dmg-menu.is-open {
        position: static;
        display: flex;
        flex-direction: row;
        gap: 8px;
        min-width: 0;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
    }
    #damageTable .dmg-menu__item {
        min-height: 44px;
        border-radius: var(--radius);
        box-shadow: inset 0 0 0 1px var(--border-strong);
        background: var(--card);
        justify-content: center;
        font-weight: 600;
    }
    #damageTable .dmg-menu__item--main { flex: 1 1 auto; width: auto; }
    #damageTable .dmg-menu__item--icon { flex: 0 0 44px; width: 44px; padding: 0; }
    #damageTable .dmg-menu__item--icon .dmg-menu__text {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); white-space: nowrap;
    }
    #damageTable .dmg-menu__item--icon i { width: auto; font-size: 16px; }

    #damageTable td.dmg-empty { padding: 32px 16px; border-radius: var(--radius-lg); background: var(--card); box-shadow: var(--shadow); }
    .dmg-card__foot { justify-content: center; padding: 4px 0 0; border-top: 0; font-size: 13px; }

    /* View-only cards: no tick box column */
    body[data-ro-damage] #damageTable tbody tr.dmg-row {
        grid-template-areas:
            "unit   unit   unit   date"
            "type   repair repair repair"
            "what   what   what   what"
            "photos photos photos photos";
        grid-template-columns: auto auto minmax(0, 1fr) auto;
    }
    body[data-ro-damage] #damageTable td.dmg-date { padding-left: 0; }

    /* Form and dialog */
    #damageModal .modal-body,
    #damageRepairModal .modal-body { padding: 16px; }
    #damageModal .form-actions,
    #damageRepairModal .form-actions { padding: 12px 16px; }
    #damageModal .form-actions .btn,
    #damageRepairModal .form-actions .btn { flex: 1 1 0; justify-content: center; }
    .dmg-link-panel__hint { padding-left: 0; }
    .dmg-check { min-height: 44px; }
    .dmg-photo-preview img { width: 80px; height: 80px; }

    .photo-lightbox__nav { margin: 0 4px; }
}

/* ============================================================
   SOFT UI (design F) — Inspection, Licenses, Implements
   ============================================================ */
/* design F — fleetpages (concatenated into style.css when merged)
   Inspection, Licenses and Implements pages and their dialogs. Every rule is
   scoped to those views and dialogs, screen only (print keeps its rules; the
   short print block at the end only boxes the new tiles). The
   action rows carry .edit-toolbar so print leaves them out; their screen
   layout is set here. Desktop sizes sit in min-width: 701px, so phones keep
   the PHONE section's 44px touch targets and 16px fields. */
@media screen {
    /* ---- Page frame ---- */
    #viewInspection .fp-head,
    #viewLicenseStock .fp-head,
    #viewImplements .fp-head { margin: 4px 0 20px; }
    #viewInspection .page-head__actions.edit-toolbar,
    #viewLicenseStock .page-head__actions.edit-toolbar,
    #viewImplements .page-head__actions.edit-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin: 0;
    }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .page-head__actions .btn svg,
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-cardbar .btn svg,
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-filterbar .btn svg { flex: 0 0 auto; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .page-head__actions .btn i,
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-cardbar .btn i { font-size: 15px; }

    /* Underline tabs (F): label only, the count as a pill */
    :is(#viewInspection, #viewLicenseStock) .fp-tabbar { margin-bottom: 20px; }
    :is(#viewInspection, #viewLicenseStock) .fp-tabbar .team-tabs { gap: 6px; }
    :is(#viewInspection, #viewLicenseStock) .fp-tabbar .team-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        white-space: nowrap;
    }
    :is(#viewInspection, #viewLicenseStock) .fp-tabbar .team-tab__count,
    :is(#viewInspection, #viewLicenseStock) .fp-pill {
        display: inline-block;
        min-width: 0;
        margin: 0;
        padding: 0 7px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
        text-align: center;
    }
    :is(#viewInspection, #viewLicenseStock) .fp-pill { background: var(--neutral-tint); color: var(--text-body); }
    :is(#viewInspection, #viewLicenseStock) .fp-pill--info { background: var(--info-bg); color: var(--info-strong); }
    :is(#viewInspection, #viewLicenseStock) .fp-tabbar .team-tab__count--alert { background: var(--danger-bg); color: var(--danger-strong); }
    :is(#viewInspection, #viewLicenseStock) .fp-pill[hidden] { display: none; }

    /* ---- Status tiles (Inspection KPIs, license stock) ---- */
    :is(#viewInspection, #viewLicenseStock) .fp-tiles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
        margin: 0 0 20px;
        padding: 0;
        border: 0;
        background: none;
    }
    #viewLicenseStock .fp-tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
    #viewInspection .fp-tile,
    #viewLicenseStock .fp-stock {
        display: flex;
        flex-direction: column;
        gap: 6px;
        min-width: 0;
        padding: 16px 18px;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    .fp-tile__label {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 600;
        color: var(--text-secondary);
    }
    .fp-tile__value {
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 600;
        line-height: 1.2;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }
    .fp-tile__sub { font-size: 13px; color: var(--text-secondary); }
    .fp-dot { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 5px; background: var(--border-strong); }
    .fp-dot--bad { background: var(--dot-bad); }
    .fp-dot--warn { background: var(--dot-warn); }
    .fp-dot--good { background: var(--dot-good); }
    .fp-dot--info { background: #2E90FA; }
    .fp-dot--none { background: #98A2B3; }

    /* License stock: stock against the minimum, a bar and a chip */
    #viewLicenseStock .fp-stock { gap: 10px; padding: 18px 20px; }
    .fp-stock__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .fp-stock__type { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
    .fp-stock__type svg, .fp-stock__type i { flex: 0 0 auto; color: var(--text-secondary); }
    .fp-stock__head .fp-chip { flex: 0 0 auto; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; }
    .fp-nowrap { white-space: nowrap; }
    .fp-stock__big {
        margin-top: auto;
        font-family: var(--font-display);
        font-size: 28px;
        font-weight: 600;
        line-height: 1.1;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }
    .fp-stock__big span { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-secondary); }
    .fp-stock__sub { font-size: 13px; color: var(--text-secondary); }
    .fp-bar { height: 8px; border-radius: 4px; background: var(--track); overflow: hidden; }
    .fp-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
    .fp-bar--bad > span { background: var(--dot-bad); }
    .fp-bar--warn > span { background: var(--dot-warn); }
    #viewLicenseStock .license-summary__empty {
        grid-column: 1 / -1;
        padding: 20px;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
        color: var(--text-secondary);
        text-align: center;
    }

    /* ---- Chips ---- */
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
        white-space: nowrap;
    }
    .fp-chip--good { background: var(--success-bg); color: var(--success-strong); }
    .fp-chip--bad { background: var(--danger-bg); color: var(--danger-strong); }
    .fp-chip--warn { background: var(--warning-bg); color: var(--warning-strong); }
    .fp-chip--info { background: var(--info-bg); color: var(--info-strong); }
    .fp-chip--neutral { background: var(--neutral-tint); color: var(--text-body); }

    /* Inspection status chips in F's colours (scoped: the Unit Database
       keeps its own .ins-st chip) */
    :is(#viewInspection, #inspectionPlanModal) .ins-st {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: max-content;
        max-width: 100%;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }
    :is(#viewInspection, #inspectionPlanModal) .ins-st--overdue { background: var(--danger-bg); color: var(--danger-strong); }
    :is(#viewInspection, #inspectionPlanModal) .ins-st--soon { background: var(--warning-bg); color: var(--warning-strong); }
    :is(#viewInspection, #inspectionPlanModal) .ins-st--ok { background: var(--success-bg); color: var(--success-strong); }
    :is(#viewInspection, #inspectionPlanModal) .ins-st--never { background: var(--neutral-tint); color: var(--text-body); }
    #viewInspection .ins-st--planned { background: var(--info-bg); color: var(--info-strong); }

    /* ---- Filter rows and card headers ---- */
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-filterbar.edit-toolbar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 12px;
        margin: 0 0 16px;
    }
    .fp-filterbar__left, .fp-filterbar__right { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
    .fp-filterbar__right { margin-left: auto; }

    /* Status chips (F: rounded, dark when on) */
    .fp-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
    .fp-chip-btn {
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid var(--border-strong);
        border-radius: 20px;
        background: var(--card);
        color: var(--text-body);
        font: inherit;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
    }
    .fp-chip-btn:hover { background: var(--surface-sunken); color: var(--text); }
    .fp-chip-btn[aria-pressed="true"] { border-color: var(--text); background: var(--text); color: #FFFFFF; font-weight: 600; }
    .fp-chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    .fp-card { margin-bottom: 20px; overflow: hidden; }
    .fp-card .table-card__header { padding: 16px 20px 12px; }
    .fp-card h2.table-card__title { margin: 0; font-size: 17px; line-height: 1.3; }
    .fp-cardbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 12px;
        padding: 16px 20px 12px;
    }
    .fp-cardbar--actions { padding-top: 0; }
    .fp-cardbar__title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
    .fp-cardbar__title--stack { flex-direction: column; align-items: flex-start; gap: 0; }
    .fp-cardbar__sub { color: var(--text-secondary); font-size: 14px; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-cardbar__tools.edit-toolbar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px 10px;
        margin: 0;
        min-width: 0;
    }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-cardbar__tools--start.edit-toolbar { justify-content: flex-start; }
    .fp-cardbar__tools:empty { display: none; }
    .fp-count { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
    .fp-count:empty { display: none; }
    .fp-sr {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }

    /* Search field and labelled selects (F: white field with a hairline ring) */
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .edit-search { display: flex; align-items: center; min-width: 0; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .edit-search i { left: 12px; font-size: 14px; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .edit-search input {
        width: 260px;
        max-width: 100%;
        padding-left: 36px;
        border-color: var(--border-strong);
        border-radius: 10px;
        background: var(--card);
    }
    .fp-select {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 0 4px 0 12px;
        border-radius: 10px;
        background: var(--card);
        box-shadow: 0 0 0 1px var(--border-strong);
        color: var(--text-secondary);
        font-size: 14px;
        white-space: nowrap;
    }
    .fp-select:focus-within { box-shadow: 0 0 0 1px var(--accent), var(--focus-ring); }
    .fp-select__label { flex: 0 0 auto; }
    .fp-select select, .fp-select input {
        min-width: 0;
        max-width: 220px;
        border: 0 !important;
        box-shadow: none !important;
        background-color: transparent;
        color: var(--text);
        font-family: inherit;
        font-weight: 600;
        cursor: pointer;
    }
    .fp-select select:focus, .fp-select input:focus { outline: none; }
    .fp-toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 0 12px;
        border-radius: 10px;
        background: var(--card);
        box-shadow: 0 0 0 1px var(--border-strong);
        color: var(--text-body);
        font-size: 14px;
        font-weight: 500;
    }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) input[type="checkbox"],
    :is(#inspectionModal, #inspectionPlanModal, #licSyncModal) input[type="checkbox"],
    :is(#inspectionModal, #inspectionPlanModal) input[type="radio"] { accent-color: var(--accent); }

    /* ---- Tables ---- */
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-card .table-wrapper { border: 0; border-radius: 0; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table th { white-space: nowrap; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table th:first-child,
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table td:first-child { padding-left: 20px; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table th:last-child,
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table td:last-child { padding-right: 20px; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table tbody tr:last-child td { border-bottom: 0; }
    /* The status list is one row per heavy unit: the page scrolls, not the
       card. Schedules and reports grow over time and scroll in their card. */
    #insStatusPanel .table-wrapper { max-height: none; }
    :is(#insPlansPanel, #insReportsPanel) .table-wrapper { max-height: 600px; }
    #insStatusTable { min-width: 760px; }
    #insStatusTable td { vertical-align: middle; }
    .fp-muted { color: var(--text-secondary); }
    .fp-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
    .fp-sub { display: block; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
    .fp-sub--good { color: var(--success-strong); font-weight: 600; }
    .fp-sub--bad { color: var(--warning-strong); font-weight: 600; }
    .fp-sub--pending { color: var(--info-strong); font-weight: 600; }
    .fp-sub--revision { color: var(--danger-strong); font-weight: 600; }
    #insStatusTable .fp-sub--bad { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .fp-unit { display: flex; align-items: center; gap: 12px; min-width: 0; }
    .fp-unit__icon {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--neutral-tint);
        color: var(--text-body);
    }
    .fp-unit__text { display: flex; flex-direction: column; min-width: 0; }
    .fp-unit__text strong { font-weight: 600; }
    .fp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
    .fp-actions .fp-btn-label {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .fp-qty { font-weight: 600; font-variant-numeric: tabular-nums; }

    /* Schedule and reports tables */
    #viewInspection .ins-chip { padding: 2px 4px 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; background: var(--warning-bg); color: var(--warning-strong); }
    #viewInspection .ins-chip--done { background: var(--success-bg); color: var(--success-strong); padding-right: 10px; }
    #viewInspection .ins-chip__go { width: 28px; height: 24px; border-radius: 8px; background: var(--card); color: var(--accent-text); box-shadow: 0 0 0 1px var(--warning-border); }
    #viewInspection .ins-res { padding: 2px 8px; border-radius: 10px; font-size: 12px; }
    #viewInspection .ins-res--good { background: var(--success-bg); color: var(--success-strong); }
    #viewInspection .ins-res--bad { background: var(--danger-bg); color: var(--danger-strong); }
    #viewInspection .ins-res--none { background: var(--neutral-tint); color: var(--text-body); }
    #viewInspection .ins-tag { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; background: var(--info-bg); color: var(--info-strong); }
    #viewInspection .ins-tag--adhoc { background: var(--neutral-tint); color: var(--text-body); }
    #viewInspection .ins-tag--queued { background: var(--warning-bg); color: var(--warning-strong); }
    #viewInspection .ins-sub { font-size: 12px; color: var(--text-secondary); }
    #viewInspection .ins-sync, #viewInspection .my-notice { border-radius: 12px; margin-bottom: 16px; }

    /* ---- Licenses: expiring soon ---- */
    /* The rows sit in columns on wide screens. The line under the title runs
       the full width; each item draws the line below it, and the last row's
       lines are cut off by the card (the list hangs 1px past it). Every row
       but the last is full, so each divider spans the card. */
    .fp-expiring .fp-cardbar { border-bottom: 1px solid var(--border); }
    .fp-list {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
        margin: 0 0 -1px;
        padding: 0;
        list-style: none;
    }
    .fp-list__item, .fp-list__empty {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        padding: 12px 20px;
        border-bottom: 1px solid var(--border);
    }
    .fp-list__empty { grid-column: 1 / -1; color: var(--text-secondary); }
    .fp-list__icon {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
    }
    .fp-list__icon--bad { background: var(--danger-tint); color: var(--danger-strong); }
    .fp-list__icon--info { background: var(--info-bg); color: var(--info-strong); }
    .fp-list__text { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
    .fp-list__name { font-weight: 600; overflow-wrap: anywhere; }
    .fp-list__meta { font-size: 13px; color: var(--text-secondary); }
    .fp-list__meta--bad { color: var(--danger-strong); font-weight: 600; }
    .fp-list__item .btn { flex: 0 0 auto; }
    .fp-more-link {
        position: relative;
        display: block;
        min-height: 44px;
        margin: 0;
        padding: 0 20px;
        border: 0;
        border-top: 1px solid var(--border);
        width: 100%;
        background: none;
        color: var(--accent-text);
        font: inherit;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }
    .fp-more-link:hover { background: var(--surface-sunken); }
    .fp-more-link[hidden] { display: none; }

    /* License ledger: Unit status chip in F's shape */
    #viewLicenseStock .lic-status { padding: 2px 10px; border-radius: 12px; border: 0; font-size: 12px; }
    #viewLicenseStock .lic-status--ok { background: var(--success-bg); color: var(--success-strong); }
    #viewLicenseStock .lic-status--todo { background: var(--warning-bg); color: var(--warning-strong); }
    #viewLicenseStock .lic-status--info { background: var(--info-bg); color: var(--info-strong); }
    #viewLicenseStock .lic-status--warn { background: var(--danger-bg); color: var(--danger-strong); }
    #viewLicenseStock .lic-status--muted { background: var(--neutral-tint); color: var(--text-secondary); }
    #viewLicenseStock .btn-count { margin-left: 2px; }

    /* Purchase plan */
    #viewLicenseStock .lp-until { gap: 8px; }
    #viewLicenseStock .lp-until .form-input { width: auto; padding: 0 4px; }
    #viewLicenseStock .lp-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 20px; }
    #viewLicenseStock .lp-card {
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 16px 18px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    #viewLicenseStock .lp-card--buy { box-shadow: var(--shadow), inset 0 0 0 1px var(--danger-border); }
    #viewLicenseStock .lp-card--combo { background: var(--card); }
    #viewLicenseStock .lp-card__type { font-size: 14px; font-weight: 600; color: var(--text-secondary); }
    #viewLicenseStock .lp-card__big { margin: 0; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.2; color: var(--text); }
    #viewLicenseStock .lp-card--buy .lp-card__big { color: var(--danger-strong); }
    #viewLicenseStock .lp-card__big small { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--text-secondary); }
    #viewLicenseStock .lp-card__sub { font-size: 13px; color: var(--text-secondary); }
    #viewLicenseStock #lpBody .table-card { margin-bottom: 20px; overflow: hidden; }
    #viewLicenseStock #lpBody .table-card__header { padding: 16px 20px 12px; }
    #viewLicenseStock #lpBody h2.table-card__title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; line-height: 1.3; }
    #viewLicenseStock #lpBody .table-card__title .fp-pill { font-family: var(--font-sans); }
    #viewLicenseStock #lpBody .lp-empty { padding: 24px 20px; color: var(--text-secondary); }
    #viewLicenseStock #lpBody .ins-sync { border-radius: 12px; margin-bottom: 16px; }
    #viewLicenseStock .lp-chip { padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }

    /* ---- Implements: tractors per implement ---- */
    .fp-use { display: flex; flex-direction: column; gap: 10px; margin: 0 0 20px; }
    .fp-use[hidden] { display: none; }
    .fp-use__title { margin: 0; font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--text-body); }
    .fp-use__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
    .fp-use__tile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        padding: 14px 16px;
        border: 0;
        border-radius: 14px;
        background: var(--card);
        box-shadow: var(--shadow);
        color: var(--text);
        font: inherit;
        text-align: left;
    }
    button.fp-use__tile { cursor: pointer; }
    button.fp-use__tile:hover { box-shadow: var(--shadow-md); }
    button.fp-use__tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .fp-use__n { font-family: var(--font-display); font-size: 22px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
    .fp-use__label { color: var(--text-secondary); overflow-wrap: anywhere; }
    .fp-use__tile--warn { background: var(--warning-bg); box-shadow: none; color: var(--warning-strong); }
    .fp-use__tile--warn .fp-use__label { color: var(--warning-strong); font-weight: 600; }
    .fp-use__tile--more { justify-content: center; color: var(--accent-text); font-weight: 600; box-shadow: none; background: var(--primary-lighter); }
    #implementTable td[data-label="Profile Name"] strong { font-weight: 600; }
    #viewImplements .coa-more { border-radius: 10px; }

    /* ---- Dialogs ---- */
    /* Inspection report: one card per component, Good / Damaged as a segmented pair */
    #inspectionModal .ins-components { gap: 12px; }
    #inspectionModal .ins-comp {
        padding: 12px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card);
    }
    #inspectionModal .ins-comp__head strong { font-weight: 600; }
    #inspectionModal .ins-seg { gap: 4px; padding: 3px; border: 0; border-radius: 10px; background: var(--track); }
    #inspectionModal .ins-seg__opt {
        gap: 6px;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 8px;
        color: var(--text-secondary);
        font-size: 13px;
        font-weight: 500;
    }
    #inspectionModal .ins-seg__opt--good:has(input:checked) { background: var(--card); color: var(--success-strong); font-weight: 600; box-shadow: 0 1px 3px rgba(16,24,40,0.10); }
    #inspectionModal .ins-seg__opt--bad:has(input:checked) { background: var(--card); color: var(--danger-strong); font-weight: 600; box-shadow: 0 1px 3px rgba(16,24,40,0.10); }
    #inspectionModal .ins-photo__add, #inspectionModal .ins-photo__empty {
        border: 1px dashed var(--border-strong);
        border-radius: 10px;
        background: var(--surface-sunken);
        color: var(--text-secondary);
    }
    #inspectionModal .ins-photo img { border-radius: 10px; }
    #inspectionModal .ins-help { font-size: 13px; }
    #inspectionModal .ins-plan-tag { border-radius: 12px; padding: 4px 12px; font-size: 13px; font-weight: 600; background: var(--info-bg); color: var(--info-strong); }
    #inspectionModal .ins-plan-tag--adhoc { background: var(--neutral-tint); color: var(--text-body); }

    /* Inspection schedule: the unit picker */
    #inspectionPlanModal .ins-plan-pick__head { font-size: 14px; }
    #inspectionPlanModal .ins-plan-pick { border: 1px solid var(--border); border-radius: 12px; }
    #inspectionPlanModal .ins-pick { min-height: 52px; padding: 8px 14px; border-bottom-color: var(--border); }
    #inspectionPlanModal .ins-pick:hover { background: var(--surface-sunken); }
    #inspectionPlanModal .ins-pick__name { font-size: 14px; font-weight: 600; }
    #inspectionPlanModal .ins-pick__name .ins-sub { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
    #inspectionPlanModal .edit-search { display: flex; }
    #inspectionPlanModal .edit-search input { width: 100%; padding-left: 34px; }

    /* Implement form: the grouped fields as quiet panels */
    #implementModal .form-section {
        margin: 16px 0;
        padding: 12px 16px 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
    }
    #implementModal .form-section legend {
        padding: 0 6px;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        color: var(--text-body);
    }

    /* License requirements and the sync preview */
    #licenseReqModal .lr-row--head { color: var(--text-secondary); font-size: 12px; font-weight: 600; }
    #licSyncModal .data-table th { white-space: nowrap; }
}

/* Desktop sizes */
@media screen and (min-width: 701px) {
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .page-head__actions .btn { min-height: 44px; }
    .fp-select { min-height: 40px; }
    .fp-select select, .fp-select input { min-height: 38px; padding: 0 28px 0 4px; font-size: 14px; }
    .fp-select input[type="date"] { padding-right: 4px; }
    .fp-toggle { min-height: 40px; }
    .fp-actions .btn-sm { min-height: 36px; }
    .fp-actions .fp-icon-btn { width: 36px; min-width: 36px; padding: 0; justify-content: center; }
    .fp-list__item .btn-sm { min-height: 36px; }
    /* Row edit / delete: quiet icon buttons (F), the frame only on hover */
    :is(#implementTable, #licenseTable, #insPlanTable, #insReportTable) .row-actions { gap: 4px; }
    :is(#implementTable, #licenseTable, #insPlanTable, #insReportTable) .row-actions .btn {
        width: 36px;
        min-width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        color: var(--text-secondary);
    }
    :is(#implementTable, #licenseTable, #insPlanTable, #insReportTable) .row-actions .btn:hover {
        border-color: var(--border);
        background: var(--surface-sunken);
        color: var(--text);
    }
}

/* Tablets: tiles two by two */
@media screen and (max-width: 900px) {
    #viewInspection .fp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phones */
@media screen and (max-width: 700px) {
    #viewInspection .fp-head, #viewLicenseStock .fp-head, #viewImplements .fp-head { margin-bottom: 16px; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .page-head__actions.edit-toolbar { justify-content: flex-start; width: 100%; gap: 8px; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .page-head__actions .btn { flex: 1 1 auto; justify-content: center; }

    :is(#viewInspection, #viewLicenseStock) .fp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
    #viewInspection .fp-tile, #viewLicenseStock .fp-stock { padding: 12px 14px; gap: 4px; }
    .fp-tile__label { gap: 8px; font-size: 13px; line-height: 1.35; }
    .fp-tile__value, .fp-stock__big { font-size: 24px; }
    .fp-tile__sub, .fp-stock__sub { font-size: 12px; line-height: 1.4; }
    .fp-stock__head { flex-wrap: wrap; align-items: flex-start; }
    .fp-stock__big span { display: block; font-size: 12px; margin-top: 2px; }

    .fp-chip-btn { min-height: 44px; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-filterbar.edit-toolbar { gap: 10px; }
    .fp-filterbar__left, .fp-filterbar__right { width: 100%; margin-left: 0; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .edit-search { flex: 1 1 100%; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .edit-search input { width: 100%; }
    .fp-cardbar { padding: 14px 14px 10px; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-cardbar__tools.edit-toolbar { width: 100%; justify-content: flex-start; }
    .fp-select, .fp-toggle { flex: 1 1 auto; min-height: 44px; }
    .fp-select select, .fp-select input { flex: 1 1 auto; min-height: 42px; max-width: none; padding: 0 4px; }
    .fp-filterbar__right .btn, .fp-cardbar__tools .btn { flex: 1 1 auto; justify-content: center; }

    /* Cards: the table rows are stacked cards on phones (.table--cardable) */
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-card { overflow: visible; background: none; box-shadow: none; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-card:has(.fp-list) { background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-card .fp-cardbar,
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-card .table-card__header { padding-left: 0; padding-right: 0; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-card:has(.fp-list) .fp-cardbar { padding-left: 14px; padding-right: 14px; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table { min-width: 0 !important; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table tr {
        border: 0;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
        padding: 12px 14px;
    }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table td:first-child,
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table td:last-child { padding-left: 0; padding-right: 0; }
    :is(#viewInspection, #viewLicenseStock, #viewImplements) .fp-table td[data-label]::before {
        font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text-secondary);
    }
    /* Inspection status card: the unit is the card's title */
    #insStatusTable td[data-label="Unit"] { justify-content: flex-start; padding-bottom: 8px; }
    #insStatusTable td[data-label="Unit"]::before { content: none; }
    #insStatusTable .fp-stack { align-items: flex-end; text-align: right; }
    #insStatusTable .fp-sub--bad { max-width: 200px; }
    .fp-actions { width: 100%; }
    .fp-actions .btn { flex: 1 1 0; justify-content: center; }
    .fp-actions .fp-btn-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }

    /* Card labels read like the column heads (the cells keep their
       data-label, which tests and the shared card CSS rely on) */
    #licenseTable td[data-label="Transaction"]::before { content: "Movement"; }
    #licenseTable td[data-label="Type"]::before { content: "License"; }
    #licenseTable td[data-label="Quantity"]::before { content: "Qty"; }
    #licenseTable td[data-label="SN"]::before { content: "Serial number"; }
    #licenseTable td[data-label="Unit Status"]::before { content: "Unit status"; }
    #implementTable td[data-label="Profile Name"]::before { content: "Profile"; }
    #implementTable td[data-label="Equipment Type"]::before { content: "Type"; }
    #implementTable td[data-label="Working Width"]::before { content: "Width"; }
    #implementTable td[data-label="Connecting Type"]::before { content: "Connecting type"; }
    #implementTable td[data-label="Chart of Account"]::before { content: "Chart of account"; }
    #insReportTable td[data-label="Check Date"]::before { content: "Check date"; }
    #insReportTable td[data-label="Component Results"]::before { content: "Component results"; }
    #licenseTable td[data-label="SN"]::before { font-family: var(--font-sans); }
    #licenseTable td[data-label="Unit"] { flex-wrap: nowrap; justify-content: space-between; }
    /* A stock-in row has no unit: leave out the empty unit lines */
    #licenseTable td.fp-empty { display: none; }

    .fp-list { grid-template-columns: minmax(0, 1fr); }
    .fp-list__item, .fp-list__empty { padding: 10px 14px; }
    .fp-more-link { padding: 0 14px; }

    .fp-use__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .fp-use__tile { padding: 12px 14px; }

    /* Purchase plan tables: the same stacked row cards as the other lists */
    #lpBody .table-card { overflow: visible; background: none; box-shadow: none; }
    #lpBody .table-card__header { padding: 4px 0 10px; }
    #lpBody .data-table tr { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 12px 14px; }
    #lpBody .data-table td[data-label]::before {
        font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text-secondary);
    }
    #lpBody .data-table td[data-label="Unit"],
    #lpBody .data-table td[data-label="Implement Type"] { flex-wrap: nowrap; justify-content: space-between; }
    /* "SF-RTK" and "until …" sit together on the right */
    #lpBody .data-table td:is([data-label="GPS Now"], [data-label="Display Now"]) { justify-content: flex-end; gap: 2px 8px; }
    #lpBody .data-table td:is([data-label="GPS Now"], [data-label="Display Now"])::before { margin-right: auto; }

    #viewLicenseStock .lp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #viewLicenseStock .lp-card { padding: 12px 14px; }
    #viewLicenseStock .lp-card__big { font-size: 24px; }

    #inspectionModal .ins-seg__opt { min-height: 44px; padding: 0 14px; }
}

/* Paper: the status tiles and stock tiles replaced .downtime-kpi, which the
   print section boxes; give the new tiles the same plain boxes. */
@media print {
    #viewInspection .fp-tiles,
    #viewLicenseStock .fp-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; }
    #viewInspection .fp-tile,
    #viewLicenseStock .fp-stock { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid #999; border-radius: 6px; }
    .fp-tile__value, .fp-stock__big { font-size: 18px; font-weight: 700; }
    .fp-bar, .fp-dot, .fp-unit__icon, .fp-list__icon { display: none; }
    .fp-use__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .fp-use__tile { display: flex; flex-direction: column; padding: 6px 8px; border: 1px solid #999; border-radius: 6px; background: none; }
    .fp-sr, .fp-actions .fp-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ============================================================
   SOFT UI (design F) — Decision inbox and Team
   ============================================================ */
/* ============================================================
   DECISION INBOX (#viewLeader) and TEAM (#viewTeam) — design F
   Screen only: the printed inbox keeps the print rules in style.css.
   Desktop sizes sit in min-width:701px so the PHONE section's 44px
   touch targets and 16px fields stay in charge on phones.
   ============================================================ */
@media screen {
    /* Shift chip colours (F): teal morning, blue afternoon, amber leave,
       grey off. Night is not in the F set; it takes F's violet. */
    #viewTeam {
        --shift-pagi-bg: #CCFBEF;  --shift-pagi-fg: #115E59;
        --shift-siang-bg: #D1E9FF; --shift-siang-fg: #194185;
        --shift-malam-bg: #EBE9FE; --shift-malam-fg: #4A1FB8;
        --shift-leave-bg: #FEF0C7; --shift-leave-fg: #93370D;
        --shift-libur-bg: #F2F4F7; --shift-libur-fg: #475467;
    }

    /* Text for screen readers only (counts inside tab labels). */
    .it-sr {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }
    #viewLeader .f-ico, #viewTeam .f-ico { flex-shrink: 0; }

    /* ---- Underline tabs with their counts ---- */
    #viewLeader .team-tabbar,
    #viewTeam .team-tabbar { margin-bottom: 20px; }
    #viewLeader .team-tabs,
    #viewTeam .team-tabs { gap: 6px; }
    #viewLeader .team-tab,
    #viewTeam .team-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 14px;
        white-space: nowrap;
    }
    #viewLeader .team-tab__count,
    #viewTeam .team-tab__count {
        min-width: 0;
        margin: 0;
        padding: 0 7px;
        border-radius: 10px;
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
    }
    #viewLeader .leader-tab__count,
    #viewTeam .team-tab__count--alert { background: var(--danger-tint); color: var(--danger-strong); }
    #viewTeam .team-tab__count--info { background: var(--info-bg); color: var(--info-strong); }
    #viewTeam .team-tab__count--warn { background: var(--warning-bg); color: var(--warning-strong); }

    /* ---- Week / month stepper (shift grid, recap, weekly summary) ---- */
    #viewLeader .week-nav,
    #viewTeam .week-nav { gap: 8px; flex-wrap: nowrap; }
    #viewLeader .week-nav__arrow,
    #viewTeam .week-nav__arrow {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        color: var(--text-body);
    }
    #viewLeader .week-nav__label,
    #viewTeam .week-nav__label {
        min-width: 0;
        margin: 0 6px;
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
        white-space: nowrap;
        color: var(--text);
    }

    /* ============================================================
       DECISION INBOX
       ============================================================ */

    /* Summary banner: big number, then what it counts and how old. */
    #leaderInboxPanel .inbox-summary {
        display: block;
        margin: 0 0 20px;
    }
    #leaderInboxPanel .inbox-summary__card {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 16px;
        padding: 18px 22px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--primary-lighter);
        box-shadow: none;
        color: var(--accent-text);
    }
    #leaderInboxPanel .inbox-summary__num {
        margin: 0;
        font-family: var(--font-display);
        font-size: 36px;
        font-weight: 600;
        line-height: 1;
        color: var(--accent-text);
        font-variant-numeric: tabular-nums;
    }
    #leaderInboxPanel .inbox-summary__text { display: flex; flex-direction: column; min-width: 0; }
    #leaderInboxPanel .inbox-summary__label {
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text);
    }
    #leaderInboxPanel .inbox-summary__sub { font-size: 14px; color: var(--text-body); }

    /* Section cards: icon tile, title, count pill, short rows, footer link. */
    #decisionGroups.decision-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
        gap: 16px;
        align-items: stretch;
    }
    #decisionGroups .decision-card {
        display: flex;
        flex-direction: column;
        gap: 0;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
        overflow: hidden;
    }
    #decisionGroups .decision-card__head {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        padding: 16px 20px;
    }
    #decisionGroups .decision-card__icon {
        flex: 0 0 40px;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        background: var(--info-bg);
        color: var(--info-strong);
    }
    #decisionGroups .decision-card--warning .decision-card__icon { background: var(--warning-tint); color: var(--warning-strong); }
    #decisionGroups .decision-card--danger  .decision-card__icon { background: var(--danger-tint);  color: var(--danger-strong); }
    #decisionGroups .decision-card__title {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 600;
        line-height: 1.35;
        color: var(--text);
    }
    #decisionGroups .decision-card__count {
        flex-shrink: 0;
        min-width: 0;
        padding: 2px 10px;
        border: 0;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 700;
        background: var(--info-bg);
        color: var(--info-strong);
    }
    #decisionGroups .decision-card--warning .decision-card__count { background: var(--warning-bg); color: var(--warning-strong); }
    #decisionGroups .decision-card--danger  .decision-card__count { background: var(--danger-bg);  color: var(--danger-strong); }

    #decisionGroups .decision-list { flex: 1 1 auto; margin: 0; padding: 0; list-style: none; }
    #decisionGroups .decision-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 20px;
        border-top: 1px solid var(--border);
        border-bottom: 0;
        font-size: 14px;
    }
    #decisionGroups .decision-list__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
    #decisionGroups .decision-list__text { font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
    #decisionGroups .decision-list__sub {
        display: -webkit-box;
        margin: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 13px;
        color: var(--text-secondary);
    }
    #decisionGroups .decision-list__more { color: var(--text-secondary); font-style: normal; }
    #decisionGroups .decision-list__acts { display: flex; flex-shrink: 0; gap: 8px; }
    #decisionGroups .decision-act--ok {
        background: var(--success-bg);
        border-color: transparent;
        color: var(--success-strong);
        font-weight: 700;
    }
    #decisionGroups .decision-act--ok:hover { background: var(--success-tint); }
    #decisionGroups .decision-card__foot {
        display: flex;
        gap: 10px;
        padding: 14px 20px;
        border-top: 1px solid var(--border);
    }
    #decisionGroups .decision-card .btn { align-self: auto; }
    #decisionGroups .decision-card__go { gap: 8px; font-size: 14px; font-weight: 600; }

    /* Nothing waiting. */
    #decisionGroups .decision-clear {
        grid-column: 1 / -1;
        align-items: center;
        gap: 16px;
        padding: 22px 24px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--success-bg);
        color: var(--success-strong);
    }
    #decisionGroups .decision-clear strong {
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 600;
        color: var(--text);
    }
    #decisionGroups .decision-clear p { margin: 2px 0 0; font-size: 14px; color: var(--text-body); }

    /* ---- Company recap, weekly summary, data check ---- */
    #viewLeader .edit-toolbar { margin-bottom: 16px; }
    #recapTable tfoot td,
    #recapTable tfoot th {
        border-top: 1px solid var(--border-strong);
        background: var(--surface-sunken);
        font-weight: 600;
        color: var(--text);
    }
    #recapMonth { width: auto; }

    #weekSummaryGrid.week-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
        gap: 16px;
    }
    #weekSummaryGrid .week-metric {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        padding: 16px 18px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    #weekSummaryGrid .week-metric__label {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-secondary);
    }
    #weekSummaryGrid .week-metric__value {
        margin: 0;
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 600;
        line-height: 1.3;
    }
    #weekSummaryGrid .week-metric__delta { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
    #weekSummaryGrid .week-metric__delta--good { color: var(--success-strong); }
    #weekSummaryGrid .week-metric__delta--bad  { color: var(--danger-strong); }
    #weekSummaryGrid .week-metric__prev { font-size: 13px; font-weight: 400; color: var(--text-secondary); }
    #weekHealth.week-health {
        margin-top: 16px;
        padding: 16px 22px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--primary-lighter);
        font-size: 14px;
        color: var(--text-body);
    }
    #weekHealth strong { font-family: var(--font-display); font-size: 17px; font-weight: 600; color: var(--accent-text); }

    #leaderCheckPanel .datacheck-summary { font-size: 14px; font-weight: 600; color: var(--text); }
    #leaderCheckPanel .datacheck-note { margin: 0 0 16px; font-size: 13px; color: var(--text-secondary); }
    #dataCheckBody .datacheck-group {
        margin-bottom: 16px;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
        overflow: hidden;
    }
    #dataCheckBody .datacheck-group h4 {
        margin: 0;
        padding: 16px 20px 12px;
        font-family: var(--font-display);
        font-size: 16px;
        font-weight: 600;
        color: var(--text);
    }
    #dataCheckBody .datacheck-count {
        padding: 2px 10px;
        border-radius: 12px;
        background: var(--warning-bg);
        color: var(--warning-strong);
        font-family: var(--font-sans);
        font-size: 13px;
        font-weight: 700;
    }
    #dataCheckBody .data-table td,
    #dataCheckBody .data-table th { white-space: normal; }
    #dataCheckBody .data-table td:first-child,
    #dataCheckBody .data-table th:first-child { padding-left: 20px; }
    #dataCheckBody .data-table td:last-child { padding-right: 20px; text-align: right; }

    /* ---- Approval chips (recap and the Team tables) ---- */
    #viewLeader .appr,
    #viewTeam .appr {
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
    }
    #viewLeader .appr--pending,  #viewTeam .appr--pending  { background: var(--warning-bg); color: var(--warning-strong); }
    #viewLeader .appr--approved, #viewTeam .appr--approved { background: var(--success-bg); color: var(--success-strong); }
    #viewLeader .appr--revision, #viewTeam .appr--revision { background: var(--danger-bg);  color: var(--danger-strong); }
    #viewLeader .appr--draft,    #viewTeam .appr--draft    { background: var(--neutral-tint); color: var(--text-secondary); }
    #viewTeam .appr-note { color: var(--danger-strong); font-size: 12px; }
    #viewTeam .appr-cell .appr-btn {
        border-radius: 8px;
        border: 1px solid var(--border-strong);
        background: var(--card);
        color: var(--text-body);
        box-shadow: none;
        font-weight: 600;
    }
    #viewTeam .appr-cell .appr-btn--ok { background: var(--success-bg); border-color: transparent; color: var(--success-strong); }
    #viewTeam .appr-cell .appr-btn--ok:hover { background: var(--success-tint); }
    #viewTeam .appr-cell .appr-btn--rev:hover { background: var(--surface-sunken); color: var(--text); }

    /* ============================================================
       TEAM
       ============================================================ */

    /* The Members button used to sit on the tab line, lifted 8px clear of
       the underline (style.css); in the page head it lines up with the rest. */
    #btnTeamMembers { margin: 0; }

    /* "Copy last week" is a shift action: shown on the shift tab only. */
    #viewTeam:not([data-team-tab="shift"]) .team-head__shift-only { display: none; }

    /* Today's tiles above the week grid. */
    #teamKpis.team-kpis {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
        gap: 16px;
        margin-bottom: 20px;
    }
    #teamKpis .team-kpi {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        padding: 14px 18px;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    #teamKpis .team-kpi__label { color: var(--text-secondary); font-size: 14px; }
    #teamKpis .team-kpi__value {
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }
    #teamKpis .team-kpi__of {
        font-family: var(--font-sans);
        font-size: 14px;
        font-weight: 400;
        color: var(--text-secondary);
    }

    /* Week card: stepper and "This week" left, legend and export right. */
    #viewTeam .shift-card { overflow: hidden; }
    #viewTeam .shift-card__head {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 16px;
        padding: 14px 20px;
    }
    #viewTeam .shift-card__head .week-nav { flex: 0 1 auto; min-width: 0; }
    #viewTeam .week-nav__today.is-current {
        min-height: 0;
        min-width: 0;
        padding: 2px 10px;
        border: 0;
        border-radius: 12px;
        background: var(--primary-lighter);
        box-shadow: none;
        color: var(--accent-text);
        font-size: 13px;
        font-weight: 600;
    }
    #viewTeam .shift-legend {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px 12px;
        margin-left: auto;
        font-size: 13px;
        color: var(--text-body);
    }
    #viewTeam .shift-legend__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
    #viewTeam .shift-legend__swatch { width: 12px; height: 12px; border-radius: 4px; flex-shrink: 0; }
    #viewTeam .shift-legend__swatch--pagi  { background: var(--shift-pagi-bg); }
    #viewTeam .shift-legend__swatch--siang { background: var(--shift-siang-bg); }
    #viewTeam .shift-legend__swatch--malam { background: var(--shift-malam-bg); }
    #viewTeam .shift-legend__swatch--leave { background: var(--shift-leave-bg); }
    #viewTeam .shift-legend__swatch--libur { background: var(--shift-libur-bg); }

    /* The grid: F's week table with shift chips. */
    #viewTeam .shift-grid { font-size: 13px; }
    #viewTeam .shift-grid th,
    #viewTeam .shift-grid td {
        padding: 6px;
        text-align: left;
        vertical-align: middle;
        border-bottom: 0;
        border-top: 1px solid var(--border);
    }
    #viewTeam .shift-grid thead th {
        padding: 10px 6px;
        border-top: 0;
        border-bottom: 1px solid var(--border);
        background: var(--surface-sunken);
        font-size: 13px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-secondary);
        white-space: nowrap;
    }
    #viewTeam .shift-grid thead th:hover { background: var(--surface-sunken); color: var(--text-secondary); }
    #viewTeam .shift-grid .shift-grid__member { padding-left: 20px; padding-right: 12px; }
    #viewTeam .shift-grid thead th.is-today {
        background: var(--primary-lighter);
        color: var(--accent-text);
        font-weight: 700;
    }
    #viewTeam .shift-grid tbody td.is-today { background: var(--primary-lighter); }
    #viewTeam .shift-grid tbody tr,
    #viewTeam .shift-grid tbody tr:hover { background: var(--card); }
    #viewTeam .shift-grid tbody .shift-grid__member {
        background: var(--card);
        font-size: 14px;
        font-weight: 600;
    }
    #viewTeam .shift-grid__job { font-size: 12px; color: var(--text-secondary); }

    /* Shift chips: the read-only badge and the editable select look alike. */
    #viewTeam .shift-select,
    #viewTeam .shift-badge {
        display: block;
        width: 100%;
        min-width: 0;
        padding: 8px;
        border: 0;
        border-radius: 8px;
        background-color: var(--card);
        font-family: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #viewTeam .shift-select {
        -webkit-appearance: none;
        appearance: none;
        padding-right: 22px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 7px center;
        background-size: 12px;
        cursor: pointer;
    }
    #viewTeam .shift-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
    #viewTeam .shift-select--pagi,  #viewTeam .shift-badge--pagi  { background-color: var(--shift-pagi-bg);  color: var(--shift-pagi-fg); }
    #viewTeam .shift-select--siang, #viewTeam .shift-badge--siang { background-color: var(--shift-siang-bg); color: var(--shift-siang-fg); }
    #viewTeam .shift-select--malam, #viewTeam .shift-badge--malam { background-color: var(--shift-malam-bg); color: var(--shift-malam-fg); }
    #viewTeam .shift-select--libur, #viewTeam .shift-badge--libur {
        background-color: var(--shift-libur-bg);
        color: var(--shift-libur-fg);
        font-weight: 400;
    }
    /* An empty cell is an invitation to fill it, not a chip. */
    #viewTeam .shift-select--none {
        background-color: transparent;
        box-shadow: inset 0 0 0 1px var(--border-strong);
        color: var(--text-light);
        font-weight: 400;
    }
    #viewTeam .shift-empty { display: block; padding: 8px; color: var(--text-light); }

    /* Approved leave: an amber chip on top; the planned shift under it is
       kept (it belongs to the planner) but reads as not happening. */
    #viewTeam .shift-leave {
        display: block;
        margin: 0 0 4px;
        padding: 8px;
        border-radius: 8px;
        background: var(--shift-leave-bg);
        color: var(--shift-leave-fg);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        line-height: 1.3;
    }
    #viewTeam .shift-cell:has(.shift-leave) .shift-select,
    #viewTeam .shift-cell:has(.shift-leave) .shift-badge {
        padding-top: 3px;
        padding-bottom: 3px;
        background-color: transparent;
        color: var(--text-light);
        font-weight: 400;
        text-decoration: line-through;
    }

    /* Fill-week picker under the name: quiet until used. */
    #viewTeam .shift-fill {
        margin-top: 4px;
        max-width: 150px;
        padding: 2px 6px;
        border: 1px dashed var(--border-strong);
        border-radius: 8px;
        background: transparent;
        color: var(--accent-text);
        font-size: 12px;
        font-weight: 600;
    }

    /* Company bands and the duty totals. */
    #viewTeam .shift-group th,
    #viewTeam .shift-group td {
        background: var(--surface-sunken);
        border-top: 1px solid var(--border);
        border-bottom: 0;
    }
    #viewTeam .shift-grid tbody .shift-group__name {
        background: var(--surface-sunken);
        font-size: 13px;
        font-weight: 700;
        color: var(--text);
    }
    #viewTeam .shift-group__count { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
    #viewTeam .shift-group__cell,
    #viewTeam .shift-grid tfoot td { font-size: 12px; color: var(--text-secondary); }
    #viewTeam .shift-group__cell.is-today,
    #viewTeam .shift-grid tfoot td.is-today { background: var(--primary-lighter); }
    #viewTeam .shift-group__cell strong,
    #viewTeam .shift-grid tfoot td strong { font-size: 14px; color: var(--text); }
    #viewTeam .shift-foot__detail { display: block; font-size: 11px; line-height: 1.3; white-space: normal; color: var(--text-light); }
    #viewTeam .shift-grid tfoot th,
    #viewTeam .shift-grid tfoot td {
        border-top: 1px solid var(--border-strong);
        background: var(--card);
    }
    #viewTeam .shift-grid tfoot th { font-size: 13px; font-weight: 600; color: var(--text); text-transform: none; letter-spacing: 0; }
    #viewTeam .shift-grid tfoot td.is-today { background: var(--primary-lighter); }

    /* ---- Daily reports and leave ---- */
    #viewTeam .team-tiles {
        grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
        gap: 16px;
        margin: 0 0 20px;
    }
    #viewTeam .team-tiles .downtime-kpi {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        padding: 14px 18px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    #viewTeam .team-tiles .downtime-kpi__label {
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-secondary);
    }
    #viewTeam .team-tiles .downtime-kpi__value {
        margin: 0;
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }
    #viewTeam .team-tiles .downtime-kpi__sub { font-size: 13px; color: var(--text-light); }

    #viewTeam .my-notice {
        margin-bottom: 16px;
        padding: 14px 18px;
        border: 0;
        border-radius: var(--radius-lg);
        background: var(--info-bg);
        color: var(--text-body);
        font-size: 14px;
    }
    #viewTeam .my-notice--alert { background: var(--danger-bg); box-shadow: inset 0 0 0 1px var(--danger-border); }
    #viewTeam .my-notice__head { color: var(--danger-strong); }
    #viewTeam .my-notice__facts { font-size: 13px; color: var(--text-body); }

    /* Actions left, filters as quiet white fields on the right (the row
       layout is in the desktop block below; phones keep style.css's two
       filters per row). */
    #viewTeam .team-toolbar { margin-bottom: 16px; }
    #viewTeam .team-filters { font-size: 13px; color: var(--text-secondary); }
    #viewTeam .team-filters select {
        border: 1px solid var(--border-strong);
        border-radius: 10px;
        background-color: var(--card);
        box-shadow: none;
        color: var(--text);
        font-weight: 500;
    }
    #viewTeam .team-filters .edit-search input { border-color: var(--border); }
    #viewTeam .team-filters .wl-filter-date { gap: 6px; font-size: 13px; color: var(--text-secondary); }
    #viewTeam .team-filters .wl-filter-date .form-input { border-color: var(--border); }
    #viewTeam .team-filters .mine-filter { font-size: 13px; color: var(--text-body); }
    #workLogCount, #leaveCount { color: var(--text-secondary); font-size: 13px; white-space: nowrap; }

    /* Tables in their card: 20px gutters like F. */
    #workLogTable th:first-child, #workLogTable td:first-child,
    #leaveTable th:first-child, #leaveTable td:first-child,
    #recapTable th:first-child, #recapTable td:first-child { padding-left: 20px; }
    #workLogTable th:last-child, #workLogTable td:last-child,
    #leaveTable th:last-child, #leaveTable td:last-child,
    #recapTable th:last-child, #recapTable td:last-child { padding-right: 20px; }
    #workLogTable td:first-child, #leaveTable td:first-child { color: var(--text-light); }

    #viewTeam .lv-type {
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 600;
    }
    #viewTeam .lv-type--izin  { background: var(--info-bg);    color: var(--info-strong); }
    #viewTeam .lv-type--sakit { background: var(--shift-leave-bg); color: var(--shift-leave-fg); }
    #viewTeam .lv-type--alpa  { background: var(--danger-bg);  color: var(--danger-strong); }
    #viewTeam .wl-duration { color: var(--text-secondary); }

    #viewTeam .team-no-panel { padding: 20px 22px; font-size: 14px; }
}

/* Desktop sizes (phones keep the PHONE section's 44px / 16px floor). */
@media screen and (min-width: 701px) {
    #viewLeader .week-nav__arrow,
    #viewTeam .week-nav__arrow { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
    #viewTeam .shift-grid { min-width: 820px; }
    /* The whole week in one screen-high frame (F shows the grid uncut); a
       longer roster still scrolls inside it under the sticky day row. */
    #viewTeam .shift-grid-wrapper { max-height: max(480px, calc(100vh - 120px)); }
    #viewTeam .shift-grid .shift-grid__member { width: 180px; }
    #decisionGroups .decision-act { min-height: 40px; padding: 0 12px; font-size: 14px; }
    #decisionGroups .decision-card__go { min-height: 44px; padding: 0 16px; }
    #viewTeam .page-head__actions .btn,
    #viewLeader .page-head__actions .btn { min-height: 44px; padding: 0 14px; }
    #viewTeam .team-filters select { min-height: 40px; padding: 0 12px; font-size: 14px; }
    #viewTeam .team-filters .wl-filter-date .form-input { min-height: 40px; }
}

/* Wide screens: actions and filters share a row, filters wrapping to the
   right. Not below 901px: there style.css stacks .edit-toolbar__right in a
   column, and a wrapping flex column with a basis turns into side-by-side
   columns wider than a phone. */
@media screen and (min-width: 901px) {
    #viewTeam .team-toolbar { align-items: flex-start; gap: 12px 16px; }
    #viewTeam .team-filters {
        display: flex;
        flex: 1 1 520px;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 8px;
    }
}

/* Phones. */
@media screen and (max-width: 700px) {
    /* Tabs share the row and wrap between words; never narrower than their
       longest word (a centred label wider than its tab was cut off on the
       left). Past that the strip scrolls sideways (style.css .team-tabs). */
    #viewLeader .team-tab,
    #viewTeam .team-tab {
        flex: 1 1 auto;
        min-width: min-content;
        padding: 6px 4px;
        white-space: normal;
        text-align: center;
        line-height: 1.25;
        font-size: 13px;
    }
    #viewLeader .team-tabs,
    #viewTeam .team-tabs { gap: 2px; }
    #viewLeader .team-tab,
    #viewTeam .team-tab { gap: 6px; }
    #viewLeader .team-tab__count,
    #viewTeam .team-tab__count { flex-shrink: 0; }

    #viewLeader .page-head__actions,
    #viewTeam .page-head__actions { width: 100%; }
    /* Side by side while both labels fit, else one per row. */
    #viewTeam .page-head__actions .btn { flex: 1 1 auto; justify-content: center; }

    #leaderInboxPanel .inbox-summary__card { padding: 14px 16px; }
    #leaderInboxPanel .inbox-summary__num { font-size: 30px; }

    #decisionGroups .decision-card__head { padding: 14px 16px; }
    #decisionGroups .decision-list li { padding: 10px 16px; }
    #decisionGroups .decision-list li.has-acts { flex-wrap: wrap; }
    #decisionGroups .decision-list li.has-acts .decision-list__acts { width: 100%; }
    #decisionGroups .decision-list__acts .btn { flex: 1 1 0; justify-content: center; }
    #decisionGroups .decision-card__foot { padding: 12px 16px; }
    #decisionGroups .decision-card__go { flex: 1 1 auto; justify-content: center; }

    #viewLeader .week-nav__arrow,
    #viewTeam .week-nav__arrow { width: 44px; height: 44px; }
    /* The week label keeps its width (it ran under the next-week arrow on
       a 320px screen); "This week" drops to its own line instead. */
    #viewLeader .week-nav,
    #viewTeam .week-nav { flex-wrap: wrap; row-gap: 8px; }
    #viewLeader .week-nav__label,
    #viewTeam .week-nav__label { flex: 0 0 auto; min-width: auto; font-size: 16px; margin: 0 2px; }
    /* The month field gives way instead: both arrows stay beside it. */
    #leaderCompanyPanel .week-nav { flex-wrap: nowrap; }
    #recapMonth { flex: 1 1 0; min-width: 0; }

    /* Data check rows already become cards on a phone; no card around them. */
    #dataCheckBody .datacheck-group { background: none; box-shadow: none; overflow: visible; }
    #dataCheckBody .datacheck-group h4 { padding: 0 0 8px; }
    #dataCheckBody .data-table td:first-child,
    #dataCheckBody .data-table td:last-child { padding-left: 0; padding-right: 0; }

    #teamKpis.team-kpis,
    #viewTeam .team-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    #teamKpis .team-kpi,
    #viewTeam .team-tiles .downtime-kpi { padding: 12px 14px; }
    #teamKpis .team-kpi__value,
    #viewTeam .team-tiles .downtime-kpi__value { font-size: 22px; }
    #teamKpis .team-kpi__label,
    #viewTeam .team-tiles .downtime-kpi__label { font-size: 13px; }
    #teamKpis .team-kpi__of { font-size: 13px; }

    #viewTeam .shift-card__head { padding: 12px 14px; }
    #viewTeam .shift-legend { margin-left: 0; font-size: 12px; }
    /* The week grid scrolls inside its card under the pinned name column
       (style.css). Its chips carry 16px text on a phone (no zoom on focus),
       so each day gets room to show "Afternoon" whole instead of "Mo…". */
    #viewTeam .shift-grid { min-width: 940px; }
    #viewTeam .shift-grid th,
    #viewTeam .shift-grid td { padding: 6px 4px; }
    #viewTeam .shift-grid .shift-grid__member { width: 136px; padding-left: 12px; }
    #viewTeam .shift-select { padding: 8px 20px 8px 8px; background-position: right 6px center; }
    #viewTeam .shift-fill { max-width: 100%; }

    #workLogTable td:first-child, #leaveTable td:first-child,
    #recapTable td:first-child { padding-left: 0; }
    #workLogTable td:last-child, #leaveTable td:last-child,
    #recapTable td:last-child { padding-right: 0; }
}

/* Paper: the page head is screen furniture; each tab prints its own header. */
@media print {
    #viewLeader .page-head { display: none; }
}

/* ============================================================
   SOFT UI (design F) — Warehouse, Users, History, Master lists
   ============================================================ */
/* design F — admin (concatenated into style.css when merged)
   Warehouse, Users, History, Master lists, the Access dialog and the
   warehouse dialogs. Screen only (the short print block at the end boxes
   the new tiles and hides the new filter rows). Desktop sizes sit in
   min-width: 701px, so phones keep the PHONE section's 44px touch targets
   and 16px fields. The adm-* helpers are shared by these screens only. */
@media screen {
    /* ---- Helpers ---- */
    .adm-sr {
        position: absolute; width: 1px; height: 1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    .adm-muted { color: var(--text-light); }
    .adm-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; }
    .adm-stack strong { font-weight: 600; color: var(--text); }
    .adm-sub { display: block; font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
    .adm-mono { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
    .adm-nowrap { white-space: nowrap; }
    .adm-note { max-width: 240px; color: var(--text-secondary); overflow-wrap: anywhere; }
    .adm-empty { padding: 28px 20px !important; text-align: center; color: var(--text-secondary); }
    .adm-link {
        padding: 0;
        border: 0;
        background: none;
        color: var(--accent);
        font: inherit;
        font-weight: 600;
        text-align: left;
        cursor: pointer;
    }
    .adm-link:hover { color: var(--accent-text); text-decoration: underline; }
    .adm-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
    .adm-count { margin-left: auto; font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
    .adm-pill {
        display: inline-block;
        padding: 0 8px;
        border-radius: 10px;
        background: var(--neutral-tint);
        color: var(--text-body);
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
    }
    .adm-pill[hidden] { display: none; }
    .adm-pill--warn { background: var(--warning-bg); color: var(--warning-strong); }

    /* Card heading: title, then a count or a line */
    .adm-cardhead {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 4px 10px;
        padding: 16px 20px 10px;
    }
    .adm-cardhead .table-card__title { margin: 0; font-size: 17px; line-height: 1.3; }
    .adm-cardhead__sub { color: var(--text-secondary); font-size: 14px; }

    /* Filter rows: a search field and labelled selects (F: white, hairline ring) */
    .adm-filters,
    .adm-filters.edit-toolbar {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        margin: 0;
        padding: 6px 20px 14px;
    }
    .adm-search, .adm-select {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        box-sizing: border-box;
        border-radius: 10px;
        background: var(--card);
        box-shadow: 0 0 0 1px var(--border-strong);
        color: var(--text-secondary);
    }
    .adm-search { flex: 1 1 220px; max-width: 320px; padding: 0 12px; }
    .adm-search svg, .adm-select svg { flex: 0 0 auto; }
    .adm-search input {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--text);
        font-family: inherit;
        box-shadow: none;
        outline: none;
    }
    .adm-search input::-webkit-search-cancel-button { cursor: pointer; }
    .adm-select { padding: 0 4px 0 12px; white-space: nowrap; }
    .adm-select__label { flex: 0 0 auto; }
    .adm-select select, .adm-select input {
        min-width: 0;
        max-width: 220px;
        border: 0;
        border-radius: 8px;
        background-color: transparent;
        color: var(--text);
        font-family: inherit;
        font-weight: 600;
        box-shadow: none;
        outline: none;
        cursor: pointer;
    }
    .adm-search:focus-within, .adm-select:focus-within { box-shadow: 0 0 0 1px var(--accent), var(--focus-ring); }

    /* Tables inside an F card: no inner frame, 20px side gutters */
    .wh-card .table-wrapper, .usr-card .table-wrapper { border: 0; border-radius: 0; }
    .adm-table th { white-space: nowrap; }
    .adm-table td { vertical-align: middle; }
    .adm-table th:first-child, .adm-table td:first-child { padding-left: 20px; }
    .adm-table th:last-child, .adm-table td:last-child { padding-right: 20px; }
    .adm-table tbody tr:last-child td { border-bottom: 0; }
    .adm-table th.num, .adm-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .adm-table .row-actions .fa-trash, .usr-remove i, .vehicle-card__del i { color: var(--danger); }

    /* =========================== WAREHOUSE =========================== */
    #viewWarehouse {
        --wh-violet-bg: #F4F3FF;
        --wh-violet: #4A1FB8;
        --wh-violet-dot: #7A5AF8;
        --wh-grey-dot: #98A2B3;
    }
    #viewWarehouse .page-head__actions.edit-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin: 0;
    }
    #viewWarehouse .page-head__actions .btn svg,
    #viewUsers .page-head__actions .btn svg { flex: 0 0 auto; }
    .wh-tabbar { margin-bottom: 20px; }
    .wh-tabbar .team-tabs { gap: 6px; }
    .wh-tabbar .team-tab { font-size: 14px; white-space: nowrap; }

    /* Status tiles: pressable filters (aria-pressed) */
    .wh-tiles {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 12px;
        margin: 0 0 20px;
    }
    .wh-tile {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        padding: 14px 16px;
        border: 0;
        border-radius: 14px;
        background: var(--card);
        box-shadow: var(--shadow);
        color: var(--text);
        font: inherit;
        text-align: left;
    }
    button.wh-tile { cursor: pointer; transition: box-shadow 0.14s ease, background-color 0.14s ease; }
    button.wh-tile:hover { box-shadow: var(--shadow-md); }
    button.wh-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    button.wh-tile[aria-pressed="true"] {
        background: var(--primary-lighter);
        box-shadow: inset 0 0 0 2px var(--accent), var(--shadow);
    }
    .wh-tile__label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--text-secondary);
    }
    .wh-tile__value {
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 600;
        line-height: 1.35;
        color: var(--text);
        font-variant-numeric: tabular-nums;
    }
    .wh-tile__sub { font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
    .wh-tiles--static .wh-tile:not(.wh-tile--warn) .wh-dot { display: none; }
    .wh-tile--warn .wh-tile__value { color: var(--warning-strong); }

    .wh-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 4px; background: var(--wh-grey-dot, #98A2B3); }
    .wh-dot--warehouse { background: var(--accent); }
    .wh-dot--installed { background: var(--dot-good); }
    .wh-dot--allocated { background: var(--wh-violet-dot, #7A5AF8); }
    .wh-dot--damaged { background: var(--dot-bad); }
    .wh-dot--repair { background: var(--dot-warn); }
    .wh-dot--retired { background: var(--wh-grey-dot, #98A2B3); }

    .wh-card { margin-bottom: 20px; overflow: hidden; }

    /* Device list */
    .wh-dev { display: flex; align-items: center; gap: 10px; min-width: 0; }
    .wh-devicon {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--neutral-tint);
        color: var(--text-body);
    }
    .wh-devicon--info { background: var(--info-bg); color: var(--info-strong); }
    .wh-devicon--warn { background: var(--warning-tint); color: var(--warning-strong); }
    .wh-devicon--teal { background: var(--primary-lighter); color: var(--accent-text); }
    .wh-devicon--violet { background: var(--wh-violet-bg); color: var(--wh-violet); }

    #viewWarehouse .wh-status {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 2px 10px;
        border: 0;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
        white-space: nowrap;
    }
    #viewWarehouse .wh-status .wh-dot { width: 6px; height: 6px; border-radius: 3px; }
    #viewWarehouse .wh-status--warehouse { background: var(--primary-lighter); color: var(--accent-text); }
    #viewWarehouse .wh-status--installed { background: var(--success-bg); color: var(--success-strong); }
    #viewWarehouse .wh-status--allocated { background: var(--wh-violet-bg); color: var(--wh-violet); }
    #viewWarehouse .wh-status--damaged { background: var(--danger-bg); color: var(--danger-strong); }
    #viewWarehouse .wh-status--repair { background: var(--warning-bg); color: var(--warning-strong); }
    #viewWarehouse .wh-status--retired { background: var(--neutral-tint); color: var(--text-body); }

    /* Stock: what is left, one tile per item */
    #viewWarehouse .stock-summary {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 12px;
        padding: 4px 20px 20px;
    }
    #viewWarehouse .stock-chip {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        min-width: 0;
        padding: 12px 14px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card);
        font-size: 14px;
    }
    #viewWarehouse .stock-chip__name { font-weight: 600; color: var(--text-secondary); overflow-wrap: anywhere; }
    #viewWarehouse .stock-chip__qty {
        font-family: var(--font-display);
        font-size: 24px;
        font-weight: 600;
        line-height: 1.3;
        color: var(--text);
    }
    #viewWarehouse .stock-chip__state { font-size: 12px; color: var(--text-secondary); }
    #viewWarehouse .stock-chip--low { background: var(--warning-bg); border-color: var(--warning-border); }
    #viewWarehouse .stock-chip--low .stock-chip__name,
    #viewWarehouse .stock-chip--low .stock-chip__qty,
    #viewWarehouse .stock-chip--low .stock-chip__state { color: var(--warning-strong); }
    #viewWarehouse .stock-chip--out { background: var(--danger-bg); border-color: var(--danger-border); }
    #viewWarehouse .stock-chip--out .stock-chip__name,
    #viewWarehouse .stock-chip--out .stock-chip__qty,
    #viewWarehouse .stock-chip--out .stock-chip__state { color: var(--danger-strong); }
    #viewWarehouse .stock-chip--low .stock-chip__state,
    #viewWarehouse .stock-chip--out .stock-chip__state { font-weight: 600; }
    #viewWarehouse .stock-empty { grid-column: 1 / -1; padding: 8px 0; font-style: normal; color: var(--text-secondary); }

    #viewWarehouse .wh-txn {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.5;
    }
    #viewWarehouse .wh-txn--in { background: var(--success-bg); color: var(--success-strong); }
    #viewWarehouse .wh-txn--out { background: var(--warning-bg); color: var(--warning-strong); }

    /* Vehicles: F cards */
    #viewWarehouse .vehicle-cards { gap: 16px; margin-bottom: 20px; }
    #viewWarehouse .vehicle-card {
        gap: 14px;
        padding: 18px 20px;
        border: 0;
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow);
    }
    #viewWarehouse .vehicle-card__plate {
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: var(--font-display);
        font-size: 17px;
        font-weight: 600;
    }
    #viewWarehouse .vehicle-card__icon {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 10px;
        background: var(--primary-lighter);
        color: var(--accent-text);
    }
    #viewWarehouse .vehicle-card__plate .vehicle-card__icon i { margin: 0; font-size: 15px; color: inherit; }
    #viewWarehouse .vehicle-card__sub { margin-top: 2px; font-size: 13px; }
    #viewWarehouse .vehicle-card__stats {
        gap: 12px 16px;
        padding: 12px 14px;
        border-radius: 12px;
        background: var(--surface-sunken);
    }
    #viewWarehouse .vehicle-card__stats dt {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-secondary);
    }
    #viewWarehouse .vehicle-card__stats dd { font-family: var(--font-display); font-size: 18px; font-weight: 600; }
    #viewWarehouse .vehicle-card__aside { font-family: var(--font-sans); }
    #viewWarehouse .vehicle-card__meta { font-size: 13px; }
    #viewWarehouse .vehicle-card__flag { color: var(--warning-strong); }
    #viewWarehouse .vehicle-card--retired { opacity: 1; background: var(--surface-sunken); box-shadow: none; }
    #viewWarehouse .vehicle-card--retired .wh-status--retired { background: var(--track); }
    #viewWarehouse .vehicle-empty { border-radius: var(--radius-lg); background: var(--card); }

    #fuelTable tr.row-flagged td { background: var(--warning-bg); }
    #viewWarehouse .fuel-flag {
        padding: 2px 8px;
        border: 0;
        border-radius: 12px;
        background: var(--warning-tint);
        color: var(--warning-strong);
        font-size: 12px;
    }
    #viewWarehouse .adm-note--wrap { white-space: normal; }

    #viewWarehouse .adm-sub a { color: var(--accent); font-weight: 600; text-decoration: none; }
    #viewWarehouse .adm-sub a:hover { color: var(--accent-text); text-decoration: underline; }

    /* Warehouse dialogs */
    .wh-dialog .modal-header .btn-icon { color: var(--text-secondary); }
    .wh-dialog .modal-header .btn-icon:hover { background: var(--track); color: var(--text); }
    .wh-dialog .form-grid { gap: 16px; }
    .wh-dialog .form-group { gap: 6px; }
    .wh-dialog .form-label {
        font-size: 14px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        color: var(--text-body);
    }
    .wh-dialog .form-optional { font-size: 13px; font-weight: 400; color: var(--text-light); }
    .wh-dialog .form-hint { font-size: 13px; }
    .wh-dialog .form-actions { gap: 10px; border-top: 1px solid var(--border); }
    .wh-dialog .wh-install-hint {
        margin: 0 0 14px;
        padding: 10px 12px;
        border-radius: 10px;
        background: var(--surface-sunken);
        color: var(--text-secondary);
        font-size: 13px;
    }

    /* ============================= USERS ============================= */
    .usr-card { margin-bottom: 20px; overflow: hidden; }
    #groupStampNotice.group-stamp-notice {
        margin: 0 0 20px;
        padding: 14px 16px;
        border-radius: 14px;
        font-size: 14px;
        color: var(--warning-strong);
    }
    #groupStampNotice .group-stamp-notice__text strong { color: var(--text); }
    #groupStampNotice .group-stamp-notice__text { color: var(--text-body); }

    /* Waiting for approval */
    .usr-pending__list { display: flex; flex-direction: column; }
    .usr-pend {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 14px;
        padding: 12px 20px;
        border-top: 1px solid var(--border);
    }
    .usr-pend--empty { color: var(--text-secondary); }
    .usr-avatar {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 20px;
        background: var(--neutral-tint);
        color: var(--text-body);
        font-weight: 700;
    }
    .usr-pend__who { flex: 1 1 240px; display: flex; flex-direction: column; min-width: 0; }
    .usr-pend__name { font-weight: 600; color: var(--text); }
    .usr-pend__meta { font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
    .usr-pend__meta .user-cell-email, .usr-pend__meta .user-cell-time {
        display: inline;
        max-width: none;
        overflow: visible;
        white-space: normal;
        font-family: inherit;
        font-size: inherit;
        color: inherit;
    }
    .usr-pend__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
    .usr-pend__role select { max-width: 160px; }

    /* Active users and the roles aside */
    .usr-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; }
    /* Side by side when the table has its ~800px, else the aside goes below */
    .usr-active { flex: 3 1 720px; min-width: 0; margin-bottom: 0; }
    .usr-active .table-wrapper { max-height: none; }
    #viewUsers .usr-table th:first-child,
    #viewUsers .usr-table td:first-child { width: auto; text-align: left; color: inherit; }
    #viewUsers .usr-table th { text-align: left; }
    #viewUsers .usr-table th.col-actions { text-align: right; }
    .usr-table th, .usr-table td { padding-left: 12px; padding-right: 12px; }
    .usr-table .usr-person { max-width: 200px; }
    .usr-table .usr-person strong { font-weight: 600; }
    .usr-you { font-size: 12px; font-weight: 400; color: var(--text-secondary); }
    .usr-table .user-cell-email {
        max-width: 200px;
        font-family: inherit;
        font-size: 13px;
        color: var(--text-secondary);
    }
    .usr-table .user-cell-time, .usr-table .user-cell-actor {
        display: inline;
        max-width: none;
        font-size: 14px;
        color: var(--text-secondary);
        white-space: nowrap;
    }
    .usr-table td[data-label="Last changed"] { color: var(--text-secondary); }
    .usr-last { white-space: nowrap; }

    .usr-table td[data-label="Can change"] { white-space: normal; min-width: 150px; }
    .usr-can { max-width: 210px; }
    .usr-can__text { color: var(--text); overflow-wrap: anywhere; }
    .usr-can__text--muted { color: var(--text-secondary); }
    .usr-can__text--warn { color: var(--warning-strong); font-weight: 600; }
    .usr-table .user-role-note { margin: 2px 0 0; font-size: 12px; }
    .usr-scope { display: block; color: var(--text-secondary); }
    .usr-table .user-cell-protected { font-size: 13px; font-style: normal; color: var(--text-light); }

    .usr-role {
        display: inline-flex;
        align-items: center;
        padding: 2px 10px;
        border: 0;
        border-radius: 12px;
        background: var(--neutral-tint);
        color: var(--text-body);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
        white-space: nowrap;
    }
    .usr-role--owner { background: var(--primary-lighter); color: var(--accent-text); }
    .usr-role--staff { background: var(--info-bg); color: var(--info-strong); }
    .usr-role--pbt { background: #F4F3FF; color: #4A1FB8; }
    .usr-role--khl { background: var(--neutral-tint); color: var(--text-body); }
    .usr-role--legacy { background: var(--neutral-tint); color: var(--text-secondary); font-style: italic; }
    .usr-role--scope { background: var(--warning-bg); color: var(--warning-strong); }
    /* The role picker wears the chip, with a small chevron */
    select.usr-role {
        -webkit-appearance: none;
        appearance: none;
        width: auto;
        max-width: 100%;
        padding-right: 26px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475467' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 8px center;
        background-size: 12px 12px;
        font-family: inherit;
        cursor: pointer;
    }
    select.usr-role:hover { filter: brightness(0.97); }
    select.usr-role:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

    .usr-roles {
        flex: 1 1 260px;
        max-width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 18px 20px;
        border-radius: var(--radius-lg);
        background: var(--card);
        box-shadow: var(--shadow);
    }
    .usr-roles__title { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 600; }
    #usersSummary.users-summary { display: flex; flex-direction: column; gap: 14px; margin: 0; }
    .usr-roles__item { display: flex; flex-direction: column; gap: 4px; }
    .usr-roles__item p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
    .usr-roles__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
    .usr-roles__n { margin-right: 6px; font-size: 13px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
    .usr-roles__note {
        margin: 0;
        padding: 10px 12px;
        border-radius: 10px;
        background: var(--surface-sunken);
        color: var(--text-secondary);
        font-size: 13px;
    }

    /* ============================ HISTORY ============================ */
    #historyModal .hist-card { max-width: 1160px; }
    .hist-head { align-items: flex-start; gap: 12px 16px; flex-wrap: wrap; }
    .hist-head__text, .ml-head__text, .ac-head__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 260px; }
    .hist-head h3, .ml-head h3, .ac-head h3 { margin: 0; font-size: 20px; line-height: 1.35; overflow-wrap: anywhere; }
    .hist-head__sub, .ml-head__sub, .ac-head__sub { font-size: 14px; color: var(--text-secondary); }
    .hist-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .hist-head__actions .btn-icon, .ml-head .btn-icon, .ac-head .btn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--text-secondary);
    }
    .hist-head__actions .btn-icon:hover, .ml-head .btn-icon:hover, .ac-head .btn-icon:hover { background: var(--surface-sunken); color: var(--text); }
    #historyModal .hist-body { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
    #historyModal .hist-filters { padding: 14px 24px; border-bottom: 1px solid var(--border); }
    #historyModal .hist-wrap { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; border: 0; border-radius: 0; }
    .hist-table th:first-child, .hist-table td:first-child { padding-left: 24px; }
    .hist-table th:last-child, .hist-table td:last-child { padding-right: 24px; }
    .hist-table td { vertical-align: top; }
    .hist-table td[data-label="Record"], .hist-table td.hist-change { white-space: normal; }
    .hist-table td[data-label="Record"] { min-width: 150px; max-width: 240px; overflow-wrap: anywhere; }
    .hist-when { color: var(--text-secondary); }
    .hist-field { color: var(--text-secondary); }
    .hist-kind { color: var(--text-secondary); }
    .hist-change { max-width: 380px; overflow-wrap: anywhere; }
    .hist-before { color: var(--text-secondary); }
    .hist-before--gone { text-decoration: line-through; }
    .hist-arrow { display: inline-block; vertical-align: -2px; color: #98A2B3; }
    .hist-table th .hist-arrow { vertical-align: -3px; }
    .hist-after { font-weight: 600; color: var(--text); }
    .hist-after--bad { color: var(--danger-strong); }
    .hist-after--good { color: var(--success-strong); }
    #historyModal .audit-actor { font-weight: 600; color: var(--text); }
    #historyModal .audit-actor em {
        display: block;
        font-size: 12px;
        font-weight: 400;
        font-style: normal;
        text-transform: none;
        opacity: 1;
        color: var(--text-secondary);
    }
    #historyModal .audit-badge {
        display: inline-flex;
        padding: 2px 10px;
        border-radius: 12px;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0;
        text-transform: none;
        white-space: nowrap;
        background: var(--neutral-tint);
        color: var(--text-body);
    }
    #historyModal :is(.audit-add, .audit-create, .audit-approve) { background: var(--success-bg); color: var(--success-strong); }
    #historyModal :is(.audit-update, .audit-edit) { background: var(--info-bg); color: var(--info-strong); }
    #historyModal :is(.audit-delete, .audit-remove, .audit-reject, .audit-error) { background: var(--danger-bg); color: var(--danger-strong); }
    #historyModal .audit-restore { background: var(--primary-lighter); color: var(--accent-text); }
    #historyModal :is(.audit-migrate, .audit-role-change) { background: var(--warning-bg); color: var(--warning-strong); }
    .hist-foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 10px 12px;
        padding: 10px 24px;
        border-top: 1px solid var(--border);
        color: var(--text-secondary);
        font-size: 14px;
    }
    .hist-foot .btn[hidden] { display: none; }
    #historyModal .history-rules-slot:empty { display: none; }
    #historyModal .history-rules-slot .category-rules-banner { margin: 14px 24px 0; }

    /* ========================== MASTER LISTS ========================== */
    #masterListsModal .ml-card { max-width: 680px; }
    .ml-head { align-items: flex-start; gap: 12px; }
    .ml-tabbar { padding: 0 24px; flex-shrink: 0; }
    .ml-tabbar .team-tabs { gap: 6px; }
    #mlTabs .team-tab { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; white-space: nowrap; }
    #mlTabs .team-tab__count {
        min-width: 0;
        margin: 0;
        padding: 0 7px;
        border-radius: 10px;
        background: var(--neutral-tint);
        color: var(--text-body);
        font-size: 12px;
        font-weight: 700;
        line-height: 20px;
    }
    #masterListsModal .modal-body { padding: 18px 24px; }
    .ml-intro { margin: 0 0 14px; font-size: 14px; color: var(--text-secondary); }
    #masterListsModal .ml-add { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
    #masterListsModal .ml-add .form-input { flex: 1 1 220px; min-width: 0; }
    #masterListsModal .categories-list {
        margin-top: 14px;
        border: 1px solid var(--border);
        border-radius: 12px;
        background: var(--card);
        overflow-y: auto;
    }
    #masterListsModal .category-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid var(--border);
    }
    #masterListsModal .category-item:last-child { border-bottom: 0; }
    #masterListsModal .category-item__name { min-width: 0; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
    #masterListsModal .ml-used { display: block; margin: 0; font-size: 12px; font-weight: 400; color: var(--text-secondary); }
    #masterListsModal .category-empty { padding: 16px 14px; color: var(--text-secondary); }
    #masterListsModal .row-actions--labeled { flex: 0 0 auto; }
    .ml-outside__head {
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 20px 0 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--warning-strong);
    }
    .ml-outside__head i { margin: 0; color: var(--dot-warn); }

    /* ========================== ACCESS DIALOG ========================== */
    #accessModal .ac-card { max-width: 640px; }
    .ac-head { align-items: flex-start; gap: 12px; }
    #accessModal .modal-body { padding: 18px 24px; }
    .ac-intro { margin: 0 0 14px; font-size: 14px; color: var(--text-secondary); }
    #accessGrid.access-grid { display: flex; flex-direction: column; gap: 0; }
    .ac-scope {
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
        border-radius: 12px;
        background: var(--primary-lighter);
    }
    #accessGrid .access-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 14px;
        border-bottom: 1px solid var(--border);
    }
    #accessGrid .access-row:last-child { border-bottom: 0; }
    #accessGrid .access-row--scope { padding: 0; border: 0; }
    #accessGrid .access-row__label { font-size: 14px; font-weight: 600; color: var(--text); }
    #accessGrid .access-row__label small { font-size: 12px; color: var(--text-secondary); }
    #accessGrid .access-row__applies { color: var(--warning-strong) !important; font-weight: 600; }
    .access-presets { align-items: center; }
    .access-presets__label { font-size: 13px; color: var(--text-secondary); }
    #accessGrid .access-scope-note {
        padding: 10px 12px;
        border-radius: 10px;
        background: var(--warning-bg);
        color: var(--warning-strong);
        font-size: 13px;
    }
    .ac-group-title {
        margin: 18px 0 8px;
        font-family: var(--font-display);
        font-size: 14px;
        font-weight: 600;
        color: var(--text-body);
    }
    .ac-list { border: 1px solid var(--border); border-radius: 12px; background: var(--card); }
    .ac-note { margin: 14px 0 0; font-size: 12.5px; color: var(--text-light); }
    .ac-account .btn { flex: 0 0 auto; }
    .ac-account .access-row__label small { overflow-wrap: anywhere; }
}

/* Desktop sizes */
@media screen and (min-width: 701px) {
    #viewWarehouse .page-head__actions .btn,
    #viewUsers .page-head__actions .btn { min-height: 44px; }
    .adm-search, .adm-select { min-height: 40px; }
    .adm-search input { min-height: 38px; font-size: 14px; }
    .adm-select { font-size: 14px; }
    .adm-select select, .adm-select input { min-height: 38px; padding: 0 24px 0 4px; font-size: 14px; }
    .adm-select input[type="date"], .adm-select input[type="month"] { padding-right: 4px; }
    #deviceTable { min-width: 860px; }
    #deviceTable th, #deviceTable td { padding-left: 12px; padding-right: 12px; }
    #deviceTable th:first-child, #deviceTable td:first-child { padding-left: 20px; }
    #deviceTable th:last-child, #deviceTable td:last-child { padding-right: 20px; }
    #stockTable { min-width: 760px; }
    #fuelTable { min-width: 900px; }
    .hist-table { min-width: 860px; }

    /* Row edit / delete: quiet icon buttons (F), the frame only on hover */
    :is(#deviceTable, #stockTable, #fuelTable) .row-actions { gap: 4px; justify-content: flex-end; }
    :is(#deviceTable, #stockTable, #fuelTable) .row-actions .btn {
        width: 36px;
        min-width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        justify-content: center;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        color: var(--text-secondary);
    }
    :is(#deviceTable, #stockTable, #fuelTable) .row-actions .btn:hover {
        border-color: var(--border);
        background: var(--surface-sunken);
        color: var(--text);
    }
    .usr-table .row-actions--labeled { justify-content: flex-end; }
    .usr-table .row-actions--labeled .btn { min-height: 36px; }
    select.usr-role { min-height: 28px; padding-top: 2px; padding-bottom: 2px; padding-left: 10px; }
    .usr-pend__actions .btn { min-height: 40px; }
    .usr-pend__role select { min-height: 38px; }
    #historyModal .modal-header, #masterListsModal .modal-header, #accessModal .modal-header { padding: 20px 24px; }
    #historyModal .hist-card { height: min(880px, 90vh); height: min(880px, 90dvh); }
    #accessGrid .access-select { width: 160px; min-height: 36px; }
    #accessGrid .access-row--scope .access-select { width: 220px; }
    #masterListsModal .categories-list { max-height: 340px; }
}

/* Tablets: tiles three by two */
@media screen and (max-width: 1100px) and (min-width: 701px) {
    #whDevicePanel .wh-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Phones */
@media screen and (max-width: 700px) {
    #viewWarehouse .page-head__actions.edit-toolbar,
    #viewUsers .page-head__actions { width: 100%; justify-content: flex-start; gap: 8px; }
    #viewWarehouse .page-head__actions .btn,
    #viewUsers .page-head__actions .btn { flex: 1 1 auto; justify-content: center; }
    .wh-tabbar { margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
    .wh-tabbar .team-tabs { flex-wrap: nowrap; }

    .wh-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
    .wh-tile { padding: 12px 14px; }
    .wh-tile__value { font-size: 22px; }

    /* Lists: each row is its own card on the ground (.table--cardable) */
    .wh-card, .usr-active { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
    .wh-card .adm-cardhead, .usr-active .adm-cardhead { padding: 4px 0 10px; }
    #viewWarehouse .wh-card:has(#stockSummary) { background: var(--card); box-shadow: var(--shadow); border-radius: var(--radius-lg); overflow: hidden; }
    #viewWarehouse .wh-card:has(#stockSummary) .adm-cardhead { padding: 14px 14px 8px; }
    #viewWarehouse .stock-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 4px 14px 14px; }
    .adm-filters, .adm-filters.edit-toolbar { padding: 0 0 12px; gap: 8px; }
    #historyModal .hist-filters { padding: 12px 16px; }
    .adm-search { flex: 1 1 100%; max-width: none; min-height: 44px; }
    .adm-select { flex: 1 1 100%; min-height: 44px; }
    .adm-select:has(input[type="date"]) { flex-basis: calc(50% - 4px); }
    .adm-select select, .adm-select input { flex: 1 1 auto; min-height: 42px; max-width: none; padding: 0 4px; }
    .adm-filters > .btn { flex: 1 1 auto; }
    .adm-count { flex: 1 1 100%; margin-left: 0; }

    .adm-table { min-width: 0 !important; }
    .adm-table tr { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 12px 14px; }
    .adm-table tbody tr:last-child td { border-bottom: 0; }
    .adm-table td:first-child, .adm-table td:last-child { padding-left: 0; padding-right: 0; }
    .adm-table td[data-label]::before {
        font-size: 12px; letter-spacing: 0; text-transform: none; font-weight: 600; color: var(--text-secondary);
    }
    .adm-table td[data-label] > .adm-stack { align-items: flex-end; text-align: right; }
    .adm-table td.adm-mono::before { font-family: var(--font-sans); }
    /* The older 9-column device rules pad every cell; a card row does not */
    #deviceTable th, #deviceTable td { padding-left: 0; padding-right: 0; }
    .adm-note { max-width: none; text-align: right; }
    /* The device, the person: the card's title line */
    #deviceTable td[data-label="Device"],
    .usr-table td[data-label="Person"] { justify-content: flex-start; padding-bottom: 8px; }
    #deviceTable td[data-label="Device"]::before,
    .usr-table td[data-label="Person"]::before { content: none; }
    #deviceTable td[data-label="Device"] .adm-stack,
    .usr-table td[data-label="Person"] .adm-stack { align-items: flex-start; text-align: left; }
    #fuelTable tr.row-flagged { background: var(--warning-bg); }
    #fuelTable tr.row-flagged td { background: none; }

    /* Users */
    .usr-pend { padding: 12px 14px; }
    .usr-pend__actions { width: 100%; }
    .usr-pend__role { flex: 1 1 100%; }
    .usr-pend__role select { max-width: none; }
    .usr-pend__actions .btn { flex: 1 1 0; justify-content: center; }
    .usr-can { max-width: none; }
    select.usr-role { min-height: 44px; padding: 0 32px 0 12px; border-radius: 22px; background-position: right 12px center; }
    .usr-table td.col-actions .row-actions--labeled { width: 100%; justify-content: flex-end; }
    .usr-table td.col-actions .row-actions--labeled .btn { flex: 1 1 auto; justify-content: center; }
    .usr-table .user-cell-email { max-width: none; white-space: normal; overflow-wrap: anywhere; }
    .usr-roles { padding: 16px; }

    /* History, Master lists, Access: full-height sheets */
    #historyModal .hist-card { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
    .hist-head__actions { width: 100%; }
    .hist-head__actions .btn-sm { flex: 1 1 auto; justify-content: center; }
    .hist-head__actions .btn-icon { position: absolute; top: 10px; right: 10px; }
    .hist-head, .ml-head, .ac-head { position: relative; padding-right: 60px; }
    .ml-head .btn-icon, .ac-head .btn-icon { position: absolute; top: 10px; right: 10px; }
    .hist-head h3, .ml-head h3, .ac-head h3 { font-size: 18px; }
    /* The filters scroll away with the list: the rows get the screen */
    #historyModal .hist-body { display: block; overflow-y: auto; }
    #historyModal .hist-wrap { padding: 12px 12px 0; overflow: visible; }
    .hist-table td:first-child, .hist-table td:last-child { padding-left: 0; padding-right: 0; }
    .hist-change { max-width: none; text-align: right; }
    .hist-foot { padding: 10px 16px; }
    .hist-foot .btn { flex: 1 1 100%; }
    .ml-tabbar { padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
    #mlTabs { flex-wrap: nowrap; }
    #masterListsModal .modal-body, #accessModal .modal-body { padding: 16px; }
    #masterListsModal .category-item { flex-wrap: wrap; }
    #accessGrid .access-row { padding: 8px 12px; }
    #accessGrid .access-row__label { flex: 1 1 auto; min-width: 0; }
    #accessGrid .access-select { flex: 0 0 136px; width: 136px; }
    #accessGrid .access-row--scope { flex-wrap: wrap; }
    #accessGrid .access-row--scope .access-select { flex: 1 1 100%; width: 100%; }
    .access-presets__label { flex: 1 1 100%; }
    .access-presets .btn { flex: 1 1 auto; }
}

/* Paper: the new tiles get plain boxes like the old KPI strip, and the new
   filter rows stay off the page like the other toolbars. */
@media print {
    .wh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 12px; }
    .wh-tile { display: flex; flex-direction: column; padding: 8px 10px; border: 1px solid #999; border-radius: 6px; background: none; }
    .wh-tile__value { font-size: 18px; font-weight: 700; }
    .adm-filters, .wh-devicon, .wh-dot { display: none !important; }
    .adm-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* Device form: "Has a battery" tick box (v172) */
.form-check { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--text-body); cursor: pointer; }
.form-check input { flex-shrink: 0; accent-color: var(--accent); }
@media (min-width: 701px) { .form-check input { width: 20px; height: 20px; } }
@media (max-width: 700px) { .form-check { min-height: 44px; } }

/* Device profile: allocation history (v173) */
.wh-devname { font-weight: 700; color: var(--text); text-align: left; }
.wh-devname:hover { color: var(--accent-text); text-decoration: underline; }
.dev-alloc-title { margin: 18px 0 8px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.dev-alloc-table td, .dev-alloc-table th { white-space: nowrap; }
.dev-alloc-table tr.dev-alloc--current td { background: var(--primary-lighter); }
#deviceProfileModal .modal-card { max-width: 780px; }
.dev-alloc-title .team-tab__count { background: var(--neutral-tint); color: var(--text-body); }
@media (max-width: 700px) {
    .dev-alloc-table thead { display: none; }
    .dev-alloc-table, .dev-alloc-table tbody, .dev-alloc-table tr, .dev-alloc-table td { display: block; width: 100%; }
    .dev-alloc-table tr { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; overflow: hidden; }
    .dev-alloc-table td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; white-space: normal; border-bottom: 1px solid var(--border); }
    .dev-alloc-table td:last-child { border-bottom: 0; }
    .dev-alloc-table td::before { content: attr(data-label); color: var(--text-secondary); font-weight: 600; font-size: 13px; }
}

/* Long device notes: two lines at most in the table, the full text in the
   tooltip and the device profile (v174). */
#deviceTable td.adm-note { white-space: normal; min-width: 160px; max-width: 280px; }
.adm-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.45;
}
@media (max-width: 700px) {
    #deviceTable td.adm-note { max-width: none; min-width: 0; }
    #deviceTable td.adm-note .adm-clamp { -webkit-line-clamp: 3; text-align: right; }
}

/* Roles (v175) */
.usr-role--custom { background: var(--primary-lighter); color: var(--accent-text); }
.usr-role--none { background: var(--warning-bg); color: var(--warning-strong); }
.role-card .usr-roles__chips { align-items: center; }
.role-card__edit { margin-left: auto; }
.role-new { margin-top: 10px; }
.role-empty p { margin-bottom: 8px; }
.role-picks { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.role-pick { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border-strong); border-radius: 12px; cursor: pointer; background: var(--card); }
.role-pick:hover { border-color: var(--accent); }
.role-pick:has(input:checked) { border-color: var(--accent); background: var(--primary-lighter); box-shadow: var(--focus-ring); }
.role-pick input { margin-top: 3px; accent-color: var(--accent); flex-shrink: 0; }
.role-pick__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.role-pick__body span { font-size: 13px; color: var(--text-secondary); }
#roleGrid .access-row small { display: block; font-weight: 400; color: var(--text-secondary); font-size: 12px; }

/* Sign-in panel: water ripples under the logo (v176) */
.auth-brand { position: relative; overflow: hidden; }
.auth-brand > :not(.auth-ripples):not(.auth-refract) { position: relative; z-index: 1; }
.auth-ripples { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; image-rendering: auto; filter: blur(3px); }

/* Sign-in: dark dot grid and faint sugarcane around the card (v179) */
.auth-main {
    position: relative;
    overflow: hidden;
    background-color: var(--bg);
    background-image: radial-gradient(rgba(16,24,40,0.16) 1.2px, transparent 1.6px);
    background-size: 22px 22px;
    background-position: 11px 11px;
}
.auth-main > :not(.auth-cane) { position: relative; z-index: 1; }
.auth-cane {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 42%;
    z-index: 0;
    pointer-events: none;
}
.auth-cane .cane-stem { fill: rgba(15,118,110,0.12); }
.auth-cane .cane-node path { stroke: rgba(15,118,110,0.22); stroke-width: 2; stroke-linecap: round; }
.auth-cane .cane-leaf { fill: none; stroke: rgba(15,118,110,0.14); stroke-width: 6; stroke-linecap: round; }
@media (max-width: 900px) { .auth-cane { height: 30%; } }
.auth-refract { position: absolute; display: none; z-index: 2; pointer-events: none; }

/* Waiting screen (v182): the page behind blurs; one small card with a
   teal ring and a short line. */
.loading-overlay {
    background: rgba(246,247,251,0.55);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    backdrop-filter: blur(8px) saturate(1.1);
}
.loading-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 200px;
    max-width: 300px;
    padding: 26px 28px 22px;
    border-radius: 20px;
    background: var(--card);
    box-shadow: 0 1px 2px rgba(16,24,40,0.05), 0 20px 40px -12px rgba(16,24,40,0.18);
    animation: loadingIn 0.22s ease-out;
}
.loading-card .spinner {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, rgba(15,118,110,0) 0deg, var(--accent) 300deg, rgba(15,118,110,0) 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3.5px));
    animation: spin 0.9s linear infinite;
}
.loading-card .loading-overlay__text {
    max-width: none;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-secondary);
}
.loading-card:has(.loading-overlay__text:empty) { min-width: 0; padding: 22px; }
@keyframes loadingIn { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .loading-card { animation: none; } }

/* Waiting logo (v183): the logo starts pale and fills with its own colours
   from the bottom while we wait; when done it shows in full colour. */
.loading-logo { position: relative; width: 64px; height: 64px; }
.loading-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.loading-logo__base { filter: grayscale(1) brightness(2.4); opacity: 0.35; }
.loading-logo__fill { clip-path: inset(100% 0 0 0); animation: logoFill 1.6s cubic-bezier(.45,.05,.35,1) infinite; }
@keyframes logoFill {
    0%   { clip-path: inset(100% 0 0 0); opacity: 1; }
    70%  { clip-path: inset(0 0 0 0);    opacity: 1; }
    88%  { clip-path: inset(0 0 0 0);    opacity: 1; }
    100% { clip-path: inset(0 0 0 0);    opacity: 0; }
}
.loading-overlay.finishing { display: flex; pointer-events: none; animation: loadingOut 0.45s ease forwards; }
.loading-overlay.finishing .loading-logo__fill { animation: none; clip-path: inset(0 0 0 0); opacity: 1; }
.loading-overlay.finishing .loading-logo { animation: logoPop 0.3s ease-out; }
@keyframes loadingOut { 0%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes logoPop { from { transform: scale(0.92); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .loading-logo__fill { animation: none; clip-path: inset(0 0 0 0); opacity: 0.6; }
}

/* Waiting text (v184): one short title; a quiet hint only for long waits. */
.loading-card .loading-overlay__text {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.01em;
}
.loading-card .loading-overlay__text:not(:empty)::after {
    content: '';
    display: inline-block;
    width: 1.2em;
    text-align: left;
    animation: loadingDots 1.2s steps(4, end) infinite;
}
@keyframes loadingDots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75%, 100% { content: '...'; } }
.loading-overlay__hint {
    margin: -6px 0 0;
    max-width: 240px;
    text-align: center;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--text-light);
}
.loading-overlay__hint[hidden] { display: none; }

/* Warehouse photos (v185) */
.wh-photo-count { margin-left: 6px; font-weight: 600; color: var(--text-light); font-size: 12px; }
.wh-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 6px; }
.wh-photo {
    position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border); background: var(--surface-sunken); padding: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.wh-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wh-photo__wait { font-size: 11px; color: var(--text-light); }
.wh-photo__del {
    position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: rgba(16,24,40,0.65); color: #fff; font-size: 12px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.wh-photo--add { flex-direction: column; gap: 4px; border-style: dashed; border-color: var(--border-strong); color: var(--accent-text); font: inherit; font-size: 12px; font-weight: 600; background: var(--card); }
.wh-photo--add i { font-size: 18px; }
.wh-photo--add:hover { border-color: var(--accent); background: var(--primary-lighter); }
.wh-photo-chip {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; padding: 2px 9px;
    border: 0; border-radius: 10px; background: var(--neutral-tint); color: var(--text-body);
    font: inherit; font-size: 12px; font-weight: 600; cursor: pointer;
}
.wh-photo-chip:hover { background: var(--primary-lighter); color: var(--accent-text); }
@media (max-width: 700px) { .wh-photo__del { width: 32px; height: 32px; } .wh-photo-chip { min-height: 32px; } }

/* Sign in ↔ Create account (2.8.1): one white thumb slides under the tabs. */
@media screen {
    .auth-tabs.seg { position: relative; isolation: isolate; }
    .auth-tabs.seg::before {
        content: '';
        position: absolute;
        top: 4px; bottom: 4px; left: 4px;
        width: calc(50% - 6px);
        border-radius: 9px;
        background: var(--card);
        box-shadow: 0 1px 3px rgba(16,24,40,0.10);
        transition: transform 0.28s cubic-bezier(.2,.7,.2,1);
        z-index: -1;
    }
    .auth-tabs.seg[data-on="signup"]::before { transform: translateX(calc(100% + 4px)); }
    .auth-tabs .auth-tab, .auth-tabs .auth-tab.active { background: transparent; box-shadow: none; border: 0; transition: color 0.2s ease; }
    .auth-tabs .auth-tab.active { color: var(--text); }
    .auth-tabs .auth-tab:focus { outline: none; }
    .auth-tabs .auth-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    #authGate .auth-card { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .auth-tabs.seg::before { transition: none; } }

/* Smoother Sign in ↔ Create account (2.8.2): the scrollbar's room is kept
   all the time (no sideways jump when the longer form needs it), and the
   card hangs from a fixed top instead of re-centring, so it only grows
   downward. */
@media screen {
    .auth-gate { scrollbar-gutter: stable; }
}
@media screen and (min-width: 901px) {
    #authGate .auth-main { align-items: flex-start; padding-top: clamp(32px, 9vh, 96px); }
}