/* ============================================================
   Mobility Payroll — internal admin UI
   Sober, functional, business-appropriate
   ============================================================ */

:root {
    /* Aliases used by the document-review redesign (MOCKUP_document_review) so the
       ported component CSS stays token-based. Map the mockup's names onto the
       existing palette; add only what the base set lacks. */
    --c-bg-tertiary: #f1efe9;
    --c-accent-tint: rgba(30, 90, 74, 0.06);
    --c-accent-dark: #184a3c;
    --c-teal-mid: #cfe0d9;
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 13px;
    /* Type scale */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;

    /* Neutral palette — warm cream (FleetOS reference) */
    --c-bg: #fafaf7;
    --c-surface: #ffffff;
    --c-surface-elevated: #ffffff;
    --c-border: #e8e6df;
    --c-border-strong: #d4d1c8;
    --c-text: #1a1d23;
    --c-text-muted: #7a7a73;
    --c-text-subtle: #a8a89f;

    /* Primary: deep green. Signature accent: warm ochre. */
    --c-accent: #1e5a4a;
    --c-accent-hover: #184a3c;
    --c-accent-bg: #e8f0ed;
    --c-accent-2: #d9a441;          /* ochre — signature highlight */

    /* Status colors */
    --c-success: #1e8a5f;
    --c-success-bg: #e8f3ee;
    --c-warning: #b8740b;
    --c-warning-bg: #fbf2dd;
    --c-error: #c14444;
    --c-error-bg: #f9e7e7;
    --c-info: #2c5ab8;
    --c-info-bg: #f6f9ff;

    /* Spacing rhythm */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;
    --space-10: 64px;

    /* Other */
    --radius: 8px;
    --radius-lg: 13px;
    --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
    --shadow: 0 1px 3px rgba(28, 25, 23, 0.06), 0 4px 12px rgba(28, 25, 23, 0.04);
}

* { box-sizing: border-box; }

html {
    /* Always reserve the vertical scrollbar gutter so the content width
       stays identical whether a tab's content overflows or not — switching
       between the Documents and Vacations tabs must not reflow the layout. */
    overflow-y: scroll;
    scrollbar-gutter: stable;
}
html, body {
    margin: 0;
    padding: 0;
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-sans);
    font-feature-settings: "cv11", "ss01";
    font-size: 14px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: var(--c-accent); text-decoration: none; }
a:hover { color: var(--c-accent-hover); text-decoration: underline; text-underline-offset: 2px; }

h1, h2, h3, h4 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--c-text);
    margin: 0;
}
h1 { font-size: 22px; letter-spacing: -0.02em; }
h2 { font-size: 16px; }

.muted { color: var(--c-text-muted); }
.mono { font-family: var(--font-mono); font-size: 13px; }

/* ============================================================ Topbar */

/* App shell: fixed left sidebar + slim top bar. */
.layout { display: flex; align-items: stretch; min-height: 100vh; }
.layout--bare { display: block; }
.sidebar {
    flex: 0 0 230px; width: 230px;
    background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
    display: flex; flex-direction: column; gap: var(--space-5);
    padding: var(--space-4) var(--space-3);
}
.sidebar .brand { padding: 0 var(--space-2); }
.layout__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.topbar-slim {
    display: flex; align-items: center; gap: var(--space-3);
    height: 56px; padding: 0 var(--space-5);
    background: var(--c-surface); border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; z-index: 40;
}
.topbar-slim__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.sidebar-toggle {
    display: none; background: none; border: 1px solid var(--c-border);
    border-radius: var(--radius); width: 34px; height: 34px; font-size: 18px;
    cursor: pointer; color: var(--c-text);
}

.brand { display: flex; align-items: center; gap: var(--space-3); color: var(--c-text); }
.brand:hover { text-decoration: none; }
.brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    background: var(--c-accent);
    color: white;
    border-radius: var(--radius);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.05em;
}
.brand__mark--lg { width: 44px; height: 44px; font-size: 15px; }
.brand__name { font-weight: 600; font-size: 14px; }

.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav__link {
    display: flex; align-items: center; gap: var(--space-3);
    color: var(--c-text-muted);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-weight: 500; font-size: 13px;
}
.sidenav__link:hover { background: var(--c-bg); color: var(--c-text); text-decoration: none; }
.sidenav__link.is-active { background: var(--c-accent-bg); color: var(--c-accent); font-weight: 600; }
.sidenav__icon { width: 18px; height: 18px; flex: 0 0 18px; }
.sidenav__sep { height: 1px; background: var(--c-border); margin: var(--space-2) var(--space-2); }
.sidenav__link--accent { background: var(--c-accent); color: #fff; }
.sidenav__link--accent:hover { background: var(--c-accent-hover); color: #fff; }
.sidenav__link--accent.is-active { background: var(--c-accent); color: #fff; }

.user-chip {
    font-size: 13px;
    color: var(--c-text-muted);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: 999px;
    background: var(--c-bg);
}

.lang-switcher { display: flex; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; }
.lang-switcher__opt {
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--c-text-muted);
    background: var(--c-surface);
    letter-spacing: 0.05em;
}
.lang-switcher__opt + .lang-switcher__opt { border-left: 1px solid var(--c-border); }
.lang-switcher__opt:hover { background: var(--c-bg); text-decoration: none; }
.lang-switcher__opt.is-active { background: var(--c-accent); color: white; }

/* ============================================================ Layout */

.container {
    max-width: 1280px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-5) var(--space-10);
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.page-head h1 { margin: 0 0 var(--space-1); }
.page-head--sub { margin-top: var(--space-6); }
.page-head--sub h2 { margin: 0; font-size: 18px; }

.footer {
    text-align: center;
    color: var(--c-text-subtle);
    padding: var(--space-5);
    border-top: 1px solid var(--c-border);
}

/* ============================================================ Panel / Cards */

.panel {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-5);
    overflow: hidden;
}
.panel__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--c-border);
}
.panel__toolbar { padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--c-border); }
.panel > .table:last-child { margin-bottom: 0; }

/* ============================================================ KPIs */

.kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.kpi {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-1);
}
.kpi__label { font-size: 12px; color: var(--c-text-muted); font-weight: 500; }
.kpi__value { font-size: 28px; font-weight: 600; font-family: var(--font-mono); letter-spacing: -0.02em; }
.kpi__value--warn { color: var(--c-warning); }
.kpi__hint { font-size: 11px; color: var(--c-text-subtle); font-style: italic; }

/* Clickable KPI that reveals a dropdown list (e.g. expiring docs, on-leave). */
.kpi--dropdown { position: relative; padding: 0; cursor: pointer; }
.kpi--dropdown > summary {
    list-style: none; padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-1);
}
.kpi--dropdown > summary::-webkit-details-marker { display: none; }
.kpi--dropdown[open] { border-color: var(--c-border-strong); }
.kpi__menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
    max-height: 320px; overflow-y: auto;
    background: var(--c-surface); border: 1px solid var(--c-border-strong);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,0.12));
    padding: var(--space-2);
}
.kpi__menu-item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: 8px 10px; border-radius: var(--radius); color: var(--c-text);
}
.kpi__menu-item:hover { background: var(--c-bg); text-decoration: none; }
.kpi__menu-item + .kpi__menu-item { border-top: 1px solid var(--c-border); }
.kpi__menu-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi__menu-name { font-size: 13px; font-weight: 500; }
.kpi__menu-sub { font-size: 11px; color: var(--c-text-muted); white-space: nowrap; }

/* ============================================================ Quick actions */

.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
}
.quick-action {
    display: block;
    padding: var(--space-4);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-bg);
    color: var(--c-text);
    transition: border-color 120ms ease, background 120ms ease;
}
.quick-action:hover {
    background: var(--c-accent-bg);
    border-color: var(--c-accent);
    text-decoration: none;
}
.quick-action--disabled { opacity: 0.55; pointer-events: none; }
.quick-action__title { display: block; font-weight: 600; margin-bottom: 4px; }
.quick-action__desc { display: block; font-size: 12px; color: var(--c-text-muted); }

/* ============================================================ Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease;
    white-space: nowrap;
}
.btn--primary { background: var(--c-accent); color: white; }
.btn--primary:hover { background: var(--c-accent-hover); color: white; text-decoration: none; }
.btn--ghost { background: var(--c-surface); color: var(--c-text); border-color: var(--c-border-strong); }
.btn--ghost:hover { background: var(--c-bg); color: var(--c-text); text-decoration: none; }
.btn--block { width: 100%; padding: 10px 14px; }
.btn--sm { padding: 4px 10px; font-size: 12px; }
.btn:disabled, .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ============================================================ Forms */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); }
.field label, .field__label { font-size: 12px; font-weight: 500; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }

.input {
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    border: 1px solid var(--c-border-strong);
    border-radius: var(--radius);
    background: var(--c-surface);
    color: var(--c-text);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input:focus {
    outline: none;
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px var(--c-accent-bg);
}
.input--mono { font-family: var(--font-mono); font-size: 13px; }

.check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: var(--space-4); }

.field__err { color: var(--c-error); font-size: 12px; }

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    padding: var(--space-5);
}
.field--span-2 { grid-column: 1 / -1; }
.form-grid__actions {
    grid-column: 1 / -1;
    display: flex; justify-content: flex-end; gap: var(--space-3);
    border-top: 1px solid var(--c-border);
    padding-top: var(--space-4);
    margin-top: var(--space-2);
}

/* ============================================================ Tables */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table thead th {
    text-align: left;
    padding: var(--space-3) var(--space-5);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-text-muted);
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-border);
}
.table tbody td {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--c-border);
    vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--c-bg); }
.row-actions { text-align: right; }
.empty { text-align: center; color: var(--c-text-muted); padding: var(--space-6); font-style: italic; }

/* File sub-rows under a document (driver_file rows / vehicle scan links). */
.table--docs .doc-row td { border-bottom: 0; }
.table--docs .file-row td { border-bottom: 0; padding-top: 2px; padding-bottom: 2px; }
.table--docs .file-row:last-child td { border-bottom: 1px solid var(--c-border); }
.file-row__cell { color: var(--c-text-muted); font-size: 12px; }
.file-row__mark { color: var(--c-text-muted); margin-right: var(--space-2); }

/* File preview thumbnail — the document itself shown small, opening full on click. */
.doc-thumb {
    display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
    vertical-align: top; text-decoration: none; color: var(--c-text-muted);
    max-width: 132px;
}
.doc-thumb__media,
.doc-thumb__icon {
    width: 96px; height: 72px; box-sizing: border-box;
    border: 1px solid var(--c-border); border-radius: var(--radius);
    background: var(--c-surface); overflow: hidden; display: block;
}
.doc-thumb__media { object-fit: cover; pointer-events: none; }   /* let the click reach the link */
.doc-thumb__icon {
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--c-text-muted);
}
.doc-thumb { position: relative; }
.doc-thumb__badge {
    position: absolute; top: 4px; right: 4px;
    padding: 0 5px; border-radius: 4px;
    font-size: 9px; font-weight: 700; letter-spacing: 0.04em;
    color: #fff; background: rgba(0, 0, 0, 0.6);
}
.doc-thumb__name {
    max-width: 100%; font-size: 11px; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-thumb:hover .doc-thumb__media,
.doc-thumb:hover .doc-thumb__icon { border-color: var(--c-border-strong); }
.doc-thumb:hover .doc-thumb__name { text-decoration: underline; }

/* Gallery of file previews on the document edit forms. */
.doc-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ============================================================ Documents table
   Expandable per-entity documents list (driver / vehicle / …). Each row expands
   to show its files as cards. Reused across entity pages via _doc_table.html. */
.docs-table { width: 100%; border-collapse: collapse; }
.docs-table thead th {
    text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--c-text-muted);
    padding: 12px 14px; border-bottom: 1px solid var(--c-border); white-space: nowrap;
}
.docs-table thead th.right { text-align: right; }
.docs-table thead th.num-col { width: 48px; text-align: center; }
.docs-table thead th.status-col { width: 130px; }
.docs-table thead th.type-col { width: 28%; }
.docs-table thead th.date-col { width: 130px; }
.docs-table thead th.actions-col { width: 220px; }

.docs-table tbody tr.main-row { cursor: pointer; transition: background 0.1s; }
.docs-table tbody tr.main-row > td {
    padding: 14px; border-bottom: 1px solid var(--c-border);
    font-size: 13px; vertical-align: middle;
}
.docs-table tbody tr.main-row:hover > td { background: #fbfaf6; }
.docs-table tbody tr.main-row.expanded > td { background: #f7f5ef; border-bottom-color: var(--c-border-strong); }
.docs-table tbody tr.main-row.expanded > td:first-child { border-left: 3px solid var(--c-accent); padding-left: 11px; }

.row-num { text-align: center; font-family: var(--font-mono); font-size: 12px; color: var(--c-text-muted); font-weight: 500; }
/* Row-number column header (works on the plain .table too, not just .data-table). */
.table th.num-col { width: 48px; text-align: center; }

.status-pill {
    display: inline-block; padding: 4px 11px; border-radius: 100px;
    font-size: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap;
}
.status-pill.ok { background: var(--c-success-bg); color: var(--c-success); border-color: #c8e3d5; }
.status-pill.warn { background: var(--c-warning-bg); color: var(--c-warning); border-color: #ead9ad; }
.status-pill.danger { background: var(--c-error-bg); color: var(--c-error); border-color: #e8c8c8; }
.status-pill.muted { background: #f3f1ec; color: var(--c-text-muted); border-color: var(--c-border); }
.status-pill.info { background: var(--c-info-bg); color: var(--c-info); border-color: #d1d9ea; }

.type-cell { display: flex; align-items: center; gap: 10px; }
.expand-icon {
    width: 18px; height: 18px; border-radius: 4px; background: transparent;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--c-text-muted); font-size: 9px; flex-shrink: 0;
    transition: transform 0.15s, background 0.1s;
}
.main-row.expanded .expand-icon { transform: rotate(90deg); background: var(--c-accent-bg); color: var(--c-accent); }
.type-name { font-weight: 500; }
.type-count { color: var(--c-text-subtle); font-size: 12px; font-weight: 400; margin-left: 4px; }

.docs-table .doc-number, .docs-table .date-cell { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.docs-table .doc-number.empty, .docs-table .date-cell.empty { color: var(--c-text-subtle); }

.docs-table .row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.docs-table .row-actions a,
.docs-table .row-actions button {
    background: var(--c-surface); border: 1px solid var(--c-border-strong);
    padding: 5px 12px; border-radius: 6px; font-size: 12px; font-weight: 500;
    cursor: pointer; color: var(--c-text); font-family: var(--font-sans);
    text-decoration: none; line-height: 1.4; transition: all 0.1s;
}
.docs-table .row-actions a:hover,
.docs-table .row-actions button:hover { background: var(--c-accent-bg); border-color: var(--c-accent); color: var(--c-accent); }
.docs-table .row-actions button.danger { color: var(--c-error); border-color: #e8c8c8; }
.docs-table .row-actions button.danger:hover { background: var(--c-error-bg); border-color: var(--c-error); color: var(--c-error); }
.docs-table .row-actions .inline-form { display: inline; }

/* Expanded files row */
.docs-table tr.files-row > td { padding: 0; background: #f7f5ef; border-bottom: 1px solid var(--c-border-strong); }
.files-container { padding: 14px 24px 18px 64px; display: flex; flex-direction: column; gap: 8px; }

.file-card {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 9px;
    padding: 10px 14px; display: flex; gap: 14px; align-items: center; transition: all 0.15s;
}
.file-card:hover { border-color: var(--c-accent); box-shadow: 0 2px 8px rgba(30, 90, 74, 0.08); }
.file-thumb {
    width: 44px; height: 56px; border-radius: 5px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.05em;
    text-decoration: none; transition: transform 0.1s; overflow: hidden;
}
.file-thumb { position: relative; }
.file-thumb:hover { transform: scale(1.06); box-shadow: 0 4px 10px rgba(0,0,0,0.15); }
/* Magnifier overlay on hover — signals the thumbnail opens a full preview. */
.file-thumb.has-preview::after {
    content: "🔍"; position: absolute; inset: 0; display: flex;
    align-items: center; justify-content: center; font-size: 14px;
    background: rgba(30, 90, 74, 0.7); color: #fff;
    opacity: 0; transition: opacity 0.15s; pointer-events: none;
}
.file-thumb.has-preview:hover::after { opacity: 1; }
.file-thumb.pdf { background: #fdebe7; color: var(--c-error); border: 1px solid #f0c8c8; }
.file-thumb.jpg, .file-thumb.png { background: var(--c-info-bg); color: var(--c-info); border: 1px solid #d1d9ea; }
.file-thumb.doc { background: #e8f0fc; color: #2563eb; border: 1px solid #c5d6f0; }
/* Real first-page/image miniature instead of the extension badge. */
.file-thumb.has-preview { padding: 0; background: var(--c-surface); }
.file-thumb__media {
    width: 100%; height: 100%; object-fit: cover; object-position: top center;
    display: block; border: 0; pointer-events: none; background: var(--c-surface);
}

.file-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 16px; }
.file-name { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.file-meta { font-size: 11px; color: var(--c-text-muted); font-family: var(--font-mono); white-space: nowrap; flex-shrink: 0; }
.file-actions { display: flex; gap: 4px; flex-shrink: 0; align-items: center; }
.file-actions a, .file-actions button {
    background: transparent; border: 1px solid var(--c-border-strong); padding: 3px 8px;
    border-radius: 5px; font-size: 11px; font-weight: 500; cursor: pointer;
    color: var(--c-text-muted); font-family: var(--font-sans); text-decoration: none; line-height: 1.4;
}
.file-actions a:hover, .file-actions button:hover { color: var(--c-accent); border-color: var(--c-accent); }
.file-actions button.danger { color: var(--c-error); }
.file-actions button.danger:hover { color: var(--c-error); border-color: var(--c-error); background: var(--c-error-bg); }
.file-actions .inline-form { display: inline; }

.add-file-card {
    background: transparent; border: 1.5px dashed var(--c-border-strong); border-radius: 9px;
    padding: 10px 14px; display: flex; gap: 10px; align-items: center; justify-content: center;
    color: var(--c-text-muted); font-size: 12px; font-weight: 500; cursor: pointer;
    text-decoration: none; transition: all 0.15s;
}
.add-file-card:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-bg); }

/* ============================================================ Driver card v8
   Top row (profile + document summary), then a tabbed work area. */
.driver-top { display: grid; grid-template-columns: 420px 1fr; gap: 20px; margin-bottom: 20px; }
@media (max-width: 980px) { .driver-top { grid-template-columns: 1fr; } }

/* Document summary card */
.summary { display: flex; flex-direction: column; }
.summary-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.summary-title { font-size: 16px; font-weight: 600; }
.summary-sub { font-size: 11px; color: var(--c-text-muted); font-family: var(--font-mono); margin-top: 4px; }
.summary-counters { display: flex; gap: 6px; font-size: 12px; flex-wrap: wrap; justify-content: flex-end; }
.counter-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 100px; font-weight: 500; white-space: nowrap; }
.counter-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.counter-pill.danger { background: var(--c-error-bg); color: var(--c-error); }
.counter-pill.warn { background: var(--c-warning-bg); color: var(--c-warning); }
.counter-pill.ok { background: var(--c-success-bg); color: var(--c-success); }

.completeness-bar { height: 6px; background: var(--c-border); border-radius: 3px; overflow: hidden; margin-bottom: 14px; display: flex; }
.completeness-bar .seg.ok { background: var(--c-success); }
.completeness-bar .seg.warn { background: var(--c-warning); }
.completeness-bar .seg.danger { background: var(--c-error); }

.summary-table { width: 100%; border-collapse: collapse; flex: 1; }
.summary-table thead th { text-align: left; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); padding: 8px 10px; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.summary-table thead th.right { text-align: right; }
.summary-table thead th.center { text-align: center; width: 20px; }
.summary-table tbody tr td { padding: 7px 10px; border-bottom: 1px dashed var(--c-border); font-size: 12px; vertical-align: middle; }
.summary-table tbody tr:last-child td { border-bottom: none; }
.summary-table tbody tr.missing { background: #fdf6f5; }
.sum-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sum-dot.ok { background: var(--c-success); box-shadow: 0 0 0 2px var(--c-success-bg); }
.sum-dot.warn { background: var(--c-warning); box-shadow: 0 0 0 2px var(--c-warning-bg); }
.sum-dot.danger { background: var(--c-error); box-shadow: 0 0 0 2px var(--c-error-bg); }
.sum-dot.muted { background: var(--c-text-subtle); box-shadow: 0 0 0 2px #f3f1ec; }
.sum-name { font-weight: 500; }
.sum-name.missing { color: var(--c-error); }
.sum-name.muted { color: var(--c-text-muted); }
.sum-number { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-muted); }
.sum-number.empty { color: var(--c-text-subtle); font-style: italic; }
.sum-expiry { font-family: var(--font-mono); font-size: 11px; text-align: right; white-space: nowrap; }
.sum-expiry.ok { color: var(--c-success); }
.sum-expiry.warn { color: var(--c-warning); font-weight: 600; }
.sum-expiry.muted { color: var(--c-text-subtle); }
.upload-mini-btn { background: var(--c-error); color: #fff; border: none; padding: 3px 10px; border-radius: 5px; font-size: 10px; font-weight: 600; cursor: pointer; font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; }

/* Clickable summary rows jump to the matching document; missing rows scroll to
   the upload zone. */
.summary-table tbody tr.sum-link { cursor: pointer; transition: background 0.1s; }
.summary-table tbody tr.sum-link:hover { background: var(--c-accent-bg); }
.summary-table tbody tr.missing:hover { background: #fbe9e9; }
.missing-status {
    display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
    border-radius: 100px; font-size: 11px; font-weight: 600; color: var(--c-error);
    background: transparent; border: 1px solid #e8c8c8; cursor: pointer;
    font-family: var(--font-sans); transition: all 0.15s;
}
.missing-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.missing-status:hover { background: var(--c-error); color: #fff; border-color: var(--c-error); }

/* Flash a document row after navigating to it from the summary. */
@keyframes row-highlight-flash {
    0% { background: var(--c-accent-bg); }
    100% { background: transparent; }
}
.docs-table tr.main-row.row-highlight td { animation: row-highlight-flash 1.8s ease-out; }

/* Flash the upload zone after jumping to it from a missing-document row. */
@keyframes dropzone-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 90, 74, 0); }
    30% { box-shadow: 0 0 0 4px rgba(30, 90, 74, 0.25); }
}
.dropzone.is-flashing { animation: dropzone-flash 1.6s ease-out; border-color: var(--c-accent); }

/* Tabs */
.tabs-bar { display: flex; gap: 4px; padding: 0 var(--space-5); border-bottom: 1px solid var(--c-border); overflow-x: auto; }
.tabs-bar .tab {
    flex: 0 0 auto; background: none; border: none; border-radius: 0;
    padding: 12px 16px; font-size: 13px; font-weight: 500; color: var(--c-text-muted);
    cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font-family: var(--font-sans); transition: all 0.1s;
}
.tabs-bar .tab:hover { color: var(--c-text); }
.tabs-bar .tab.is-active { color: var(--c-accent); border-bottom-color: var(--c-accent); font-weight: 600; background: none; }
.tabs-bar .tab .count-badge { background: var(--c-border); color: var(--c-text-muted); font-size: 10px; font-weight: 600; padding: 1px 7px; border-radius: 100px; font-family: var(--font-mono); }
.tabs-bar .tab.is-active .count-badge { background: var(--c-accent-bg); color: var(--c-accent); }
.tabs-bar .tab .alert-badge { background: var(--c-error); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 100px; font-family: var(--font-mono); }
/* Reserve height so switching to a short tab (e.g. History) doesn't collapse
   the page far enough to clamp the scroll and jump. Paired with the scroll
   anchoring in documents.js (switchTab). */
.tab-content { padding: var(--space-5); min-height: 70vh; }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.section-title { font-size: 16px; font-weight: 600; }
.section-actions { display: flex; gap: 8px; align-items: center; }
.placeholder { padding: 40px; text-align: center; color: var(--c-text-muted); font-size: 13px; font-style: italic; background: #fbfaf6; border: 1px dashed var(--c-border-strong); border-radius: 12px; }

/* Stat strip + generic data table (used by mock tabs e.g. Fines). */
.summary-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 760px) { .summary-strip { grid-template-columns: repeat(2, 1fr); } }
.sum-stat { background: #fbfaf6; border: 1px solid var(--c-border); border-radius: 10px; padding: 14px 16px; }
.sum-stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); font-weight: 600; margin-bottom: 6px; }
.sum-stat .v { font-size: 22px; font-weight: 600; font-family: var(--font-mono); line-height: 1; }
.sum-stat .v.warn { color: var(--c-warning); }
.sum-stat .v.danger { color: var(--c-error); }
.sum-stat .v.ok { color: var(--c-success); }
.sum-stat .sub { font-size: 11px; color: var(--c-text-muted); margin-top: 6px; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table thead th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); padding: 12px 14px; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
.data-table thead th.right { text-align: right; }
.data-table thead th.num-col { width: 48px; text-align: center; }
.data-table tbody td { padding: 14px; border-bottom: 1px solid var(--c-border); font-size: 13px; vertical-align: middle; }
.data-table tbody tr:hover td { background: #fbfaf6; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.data-table .row-actions button { background: var(--c-surface); border: 1px solid var(--c-border-strong); padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; cursor: pointer; color: var(--c-text); font-family: var(--font-sans); }
.data-table .row-actions button.danger { color: var(--c-error); border-color: #e8c8c8; }
.country-flag { display: inline-block; padding: 2px 8px; background: #f3f1ec; border: 1px solid var(--c-border); border-radius: 5px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; }
.doc-chip-count { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; background: var(--c-info-bg); color: var(--c-info); border: 1px solid #d1d9ea; border-radius: 5px; font-size: 11px; font-weight: 600; }

/* ── Sizing & responsive rules ──────────────────────────────────────────────
   Content-sized chips/badges/pills/buttons never wrap; rows of them scroll
   horizontally rather than shrinking; tables scroll inside their card. */
.pill, .doc-chip-count, .country-flag, .upload-mini-btn, .missing-status,
.docs-table .row-actions a, .docs-table .row-actions button,
.data-table .row-actions button, .file-actions a, .file-actions button,
.tabs-bar .tab .count-badge, .tabs-bar .tab .alert-badge { white-space: nowrap; }
/* Wrap a (possibly wide) table so it scrolls horizontally within its card
   instead of overflowing the page or squishing nowrap cells. */
.table-scroll { overflow-x: auto; }

/* Expiry status badges (level == document_status level). */
.badge {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 500; white-space: nowrap;
    border: 1px solid transparent;
}
.badge--ok        { color: var(--c-success); background: var(--c-success-bg); border-color: var(--c-success); }
.badge--soon      { color: var(--c-warning); background: var(--c-warning-bg); border-color: var(--c-warning); }
.badge--urgent,
.badge--critical,
.badge--expired   { color: var(--c-error); background: var(--c-error-bg); border-color: var(--c-error); }
.badge--not_tracked,
.badge--no_date   { color: var(--c-text-muted); background: var(--c-bg); border-color: var(--c-border); }

/* Colour the document row by its expiry status (left accent on the first cell). */
.table--docs .doc-row td:first-child { border-left: 3px solid transparent; }
.doc-row--ok td:first-child        { border-left-color: var(--c-success); }
.doc-row--soon td:first-child      { border-left-color: var(--c-warning); }
.doc-row--urgent td:first-child,
.doc-row--critical td:first-child,
.doc-row--expired td:first-child   { border-left-color: var(--c-error); }
.doc-row--not_tracked td:first-child,
.doc-row--no_date td:first-child   { border-left-color: var(--c-border-strong); }

/* Collapse toggle for a document's files. */
.files-toggle {
    background: none; border: 0; cursor: pointer; padding: 0 4px 0 0;
    color: var(--c-text-muted); font-size: 12px; line-height: 1;
}
.files-toggle__caret { display: inline-block; transition: transform 0.12s ease; }
.files-toggle.is-open .files-toggle__caret { transform: rotate(90deg); }
.panel__head-actions { display: flex; gap: var(--space-3); align-items: center; }

/* Lay the row actions (Edit / Download / Delete) out inline at the row's end. */
.table--docs .row-actions { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.table--docs .row-actions .inline-form { margin: 0; }
.table--docs .row-actions .btn { min-width: 0; text-align: center; white-space: nowrap; }

/* Roomier document rows with larger status pills (design spec). */
.table--docs .doc-row > td { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.table--docs .doc-row .badge { padding: 5px 12px; font-size: 12px; }
.table--docs .doc-row td:nth-child(2) { font-weight: 500; color: var(--c-text); }

/* Stable column widths so values stay aligned across the active & archived
   tables and never shift (Status / Type / Number / Start / End / Actions). */
.table--docs { table-layout: fixed; }
.table--docs thead th:nth-child(1) { width: 116px; }   /* Status  */
.table--docs thead th:nth-child(4),
.table--docs thead th:nth-child(5) { width: 124px; }   /* Dates   */
.table--docs thead th:last-child   { width: 248px; }   /* Actions */
.table--docs td.mono, .table--docs .file-row__cell a { overflow-wrap: anywhere; }

/* Red "Delete" button — same size as Edit/Download, kept red. */
.btn--danger { border-color: var(--c-error); color: var(--c-error); background: var(--c-error-bg); }
.btn--danger:hover { border-color: var(--c-error); background: var(--c-error); color: #fff; }

/* Compact red cross delete button (inbox file rows). */
.btn-x {
    border: 1px solid var(--c-error); background: var(--c-error-bg); color: var(--c-error);
    width: 22px; height: 22px; line-height: 1; border-radius: var(--radius);
    cursor: pointer; font-size: 15px; padding: 0;
}
.btn-x:hover { background: var(--c-error); color: #fff; }
.inbox-actions { margin-bottom: var(--space-3); }
.dz-entry__field.has-err .input { border-color: var(--c-error); }

/* ============================================================
   Document review workflow — two stages (MOCKUP_document_review)
   ============================================================ */

/* Step progress */
.wf-steps { display: flex; align-items: center; gap: 12px; padding: var(--space-3) 0 var(--space-2); margin-bottom: var(--space-3); }
.wf-step { display: flex; align-items: center; gap: 6px; }
.wf-step span { font-size: 12px; font-weight: 500; }
.wf-step.is-upcoming { opacity: 0.55; }
.wf-step__dot {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500;
    background: var(--c-bg-tertiary); color: var(--c-text-muted); border: 1px solid var(--c-border-strong);
}
.wf-step.is-active .wf-step__dot, .wf-step.is-done .wf-step__dot { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.wf-step__line { flex: 1; height: 2px; background: var(--c-border); position: relative; max-width: 160px; }
.wf-step__line > div { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--c-accent); transition: width 0.25s; }

/* Stage stack — both stages always visible */
.stage-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stage {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: hidden;
}
.stage--active { border-color: var(--c-accent); }
.stage--done { border-color: var(--c-success); }
.stage--waiting { opacity: 0.85; }
.stage-head { display: flex; align-items: center; gap: 10px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--c-border); }
.stage-head--active { background: var(--c-accent-bg); }
.stage-head--done { background: var(--c-success-bg); }
.stage-head-icon { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.stage-head-icon--active { background: var(--c-accent-bg); color: var(--c-accent); }
.stage-head-icon--done { background: var(--c-success); color: #fff; }
.stage-head-icon--waiting { background: var(--c-bg-tertiary); color: var(--c-text-muted); border: 1px solid var(--c-border-strong); }
.stage-title { font-size: 13px; font-weight: 600; }
.stage-subtitle { font-size: 11px; color: var(--c-text-muted); margin-top: 1px; }
.stage-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.stage-footer { padding: var(--space-4); background: var(--c-bg); border-top: 1px solid var(--c-border); display: flex; align-items: center; gap: 10px; }
.stage-foot-note { font-size: 11px; color: var(--c-text-muted); display: inline-flex; align-items: center; gap: 4px; }
.badge { display: inline-flex; align-items: center; gap: 3px; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 500; }
.badge--info { background: var(--c-info-bg); color: var(--c-info); }
.badge--success { background: var(--c-success-bg); color: var(--c-success); }
.badge--locked { background: var(--c-bg-tertiary); color: var(--c-text-muted); }

/* Composer (build a multi-page PDF) */
.composer { background: var(--c-surface); border: 1.5px solid var(--c-accent); border-radius: var(--radius-lg); overflow: hidden; }
.composer[hidden] { display: none; }
.composer-head { display: flex; align-items: center; gap: 10px; padding: 10px var(--space-3); background: var(--c-accent-bg); border-bottom: 1px solid var(--c-teal-mid); }
.composer-head-icon { width: 26px; height: 26px; border-radius: 6px; background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center; }
.composer-title { font-size: 12px; font-weight: 600; color: var(--c-accent-dark); }
.composer-sub { font-size: 10px; color: var(--c-accent); margin-top: 1px; }
.composer-strip { padding: var(--space-3); display: flex; align-items: stretch; gap: var(--space-2); overflow-x: auto; }
.page-card { flex-shrink: 0; width: 100px; display: flex; flex-direction: column; gap: 4px; }
.page-card-thumb {
    width: 100px; height: 130px; border-radius: var(--radius); position: relative; cursor: grab;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    background: var(--c-bg-tertiary); border: 0.5px solid var(--c-border-strong);
}
.page-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.page-card.is-dragging { opacity: 0.6; }
.page-card.is-dragging .page-card-thumb { transform: rotate(-2deg); box-shadow: var(--shadow); border-color: var(--c-accent); }
.page-badge-large { position: absolute; left: 6px; top: 6px; background: var(--c-accent); color: #fff; font-size: 11px; font-weight: 500; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.page-card-remove { position: absolute; right: 4px; top: 4px; width: 18px; height: 18px; padding: 0; background: rgba(0,0,0,0.6); color: #fff; border: 0; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.page-card-grip { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 0; background: rgba(0,0,0,0.05); display: flex; justify-content: center; font-size: 11px; color: var(--c-text-muted); cursor: grab; }
.page-card-name { font-family: var(--font-mono); font-size: 10px; color: var(--c-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100px; }
.page-card-meta { font-size: 9px; color: var(--c-text-subtle); }
.composer-arrow { flex-shrink: 0; display: flex; align-items: center; padding-top: 50px; color: var(--c-text-subtle); }
.drop-placeholder { flex-shrink: 0; width: 100px; }
.drop-placeholder-box { width: 100px; height: 130px; border: 1.5px dashed var(--c-border-strong); border-radius: var(--radius); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--c-text-muted); background: var(--c-bg-tertiary); font-size: 10px; text-align: center; line-height: 1.3; }
.drop-placeholder-label { font-size: 9px; color: var(--c-text-subtle); margin-top: 4px; text-align: center; }
.composer-hints { padding: 0 var(--space-3) var(--space-2); display: flex; align-items: center; gap: var(--space-3); font-size: 10px; color: var(--c-text-muted); }
.composer-hints span { display: inline-flex; align-items: center; gap: 3px; }
.composer-footer { padding: var(--space-3); border-top: 1px solid var(--c-border); background: var(--c-bg); display: flex; flex-direction: column; gap: var(--space-2); position: relative; }
.composer-filename-row { display: flex; align-items: center; gap: var(--space-2); }
.composer-filename-row input { flex: 1; height: 30px; font-size: 12px; font-family: var(--font-mono); background: var(--c-surface); border: 0.5px solid var(--c-border-strong); border-radius: 5px; padding: 0 8px; min-width: 0; }
.composer-actions-row { display: flex; align-items: center; gap: 6px; }
.composer.is-processing { opacity: 0.6; pointer-events: none; }
.composer-options { position: absolute; bottom: 46px; left: var(--space-3); z-index: 5; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; min-width: 240px; }
.composer-options[hidden] { display: none; }
.composer-options label { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.composer-options select { height: 26px; font-size: 11px; }

/* Inbox header + file list */
.inbox-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) 0 var(--space-1); }
.inbox-lbl { font-size: 10px; color: var(--c-text-muted); text-transform: uppercase; letter-spacing: 0.4px; font-weight: 500; }
.inbox-toolbar { display: flex; gap: 4px; }
.file-list { display: flex; flex-direction: column; gap: 3px; padding: 6px; background: var(--c-bg-tertiary); border-radius: var(--radius); }
.file-row {
    display: grid; grid-template-columns: 24px 36px 1fr auto auto auto; gap: 10px; align-items: center;
    padding: 7px 8px; background: var(--c-surface); border: 0; border-left: 3px solid transparent;
    border-radius: 0 5px 5px 0; width: 100%; text-align: left; cursor: pointer; font-family: inherit; color: var(--c-text);
}
.file-row-actions { display: inline-flex; align-items: center; gap: 4px; justify-content: flex-end; }
.file-row-actions .btn { height: 24px; padding: 0 8px; font-size: 11px; }
.row-chev { display: inline-block; transition: transform 0.15s; }
.file-row.is-expanded .row-chev { transform: rotate(90deg); }
/* Expanded source list under a merged file. */
.file-row-sources { padding: 4px 8px 6px 70px; display: flex; flex-direction: column; gap: 3px; }
.file-row-sources[hidden] { display: none; }
.file-row-source { font-size: 10px; color: var(--c-info); }
.file-row:hover { border-left-color: var(--c-border-strong); }
.file-row.is-in-tray { background: var(--c-accent-tint); border-left-color: var(--c-accent); }
.file-row.is-merged-result { background: var(--c-info-bg); border-left-color: var(--c-info); }
.file-row.is-readonly { cursor: default; }
.file-row.is-readonly:hover { background: var(--c-surface); border-left-color: transparent; }
.wf-stage--done .file-row.is-readonly { border-left-color: var(--c-success); }
.row-check { width: 20px; height: 20px; border-radius: 5px; background: var(--c-surface); border: 1.5px solid var(--c-border-strong); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; }
.file-row:hover .row-check:empty::before { content: "+"; color: var(--c-text-muted); }
.row-check.is-in-tray { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.row-check.is-done { background: var(--c-success); border-color: var(--c-success); color: #fff; }
.row-thumb { width: 36px; height: 36px; background: var(--c-surface); border: 0.5px solid var(--c-border); border-radius: 4px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; font-size: 16px; }
.row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.row-thumb--image { background: #c8b896; }
.row-thumb-stack { position: absolute; right: -2px; top: -2px; background: var(--c-info); color: #fff; font-size: 8px; font-weight: 500; padding: 0 4px; border-radius: 999px; font-family: var(--font-mono); }
.row-name { font-family: var(--font-mono); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-name .pill { margin-left: 4px; }
.row-size { font-size: 10px; color: var(--c-text-subtle); white-space: nowrap; }
.row-status { font-size: 10px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.row-status.is-in-tray { color: var(--c-accent); font-weight: 500; }
.row-status.is-merged { color: var(--c-info); font-weight: 500; }
.row-status.is-done { color: var(--c-success); font-weight: 500; }
.row-menu-btn { width: 20px; height: 20px; padding: 0; background: transparent; border: 0; color: var(--c-text-muted); cursor: pointer; font-size: 15px; line-height: 1; }
.row-menu { position: relative; }
.row-menu-pop { position: absolute; right: 0; top: 22px; z-index: 6; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.row-menu-pop[hidden] { display: none; }
.row-menu-pop button { width: 100%; text-align: left; background: transparent; border: 0; padding: 6px 8px; border-radius: 5px; font: inherit; font-size: 12px; color: var(--c-text); cursor: pointer; }
.row-menu-pop button:hover { background: var(--c-bg); }
.row-menu-pop button.is-danger { color: var(--c-error); }

/* Stage 2 — empty / waiting */
.stage2-empty { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); }
.stage2-empty[hidden] { display: none; }
.stage2-empty-text { font-size: 12px; color: var(--c-text-muted); line-height: 1.55; max-width: 720px; }
.stage2-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.stage2-step { background: var(--c-bg-tertiary); padding: var(--space-3); border-radius: var(--radius); text-align: center; }
.stage2-step-ico { font-size: 22px; }
.stage2-step-title { font-size: 11px; font-weight: 500; margin-top: 4px; }
.stage2-step-sub { font-size: 10px; color: var(--c-text-subtle); margin-top: 2px; }
.stage2-ghost { background: var(--c-bg-tertiary); border: 0.5px dashed var(--c-border-strong); border-radius: var(--radius); padding: var(--space-3); display: grid; grid-template-columns: 120px 1fr; gap: var(--space-2); min-height: 100px; }
.stage2-ghost-sidebar, .stage2-ghost-detail { background: var(--c-surface); border-radius: 4px; display: flex; flex-direction: column; gap: 5px; padding: 6px; }
.stage2-ghost-sidebar > div { height: 6px; background: var(--c-border-strong); border-radius: 2px; }
.stage2-ghost-detail > div { background: var(--c-bg-tertiary); border-radius: 3px; }
.stage2-empty-foot { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--c-text-subtle); padding-top: var(--space-2); }
.stage2-review[hidden] { display: none; }

/* ============================================================ Pills */

.pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    font-size: 11px;
    font-weight: 600;
    color: var(--c-text-muted);
    letter-spacing: 0.02em;
    text-transform: lowercase;
}
.pill--umowa_o_prace { background: var(--c-accent-bg); color: var(--c-accent); border-color: var(--c-accent); }
.pill--umowa_zlecenia { background: var(--c-info-bg); color: var(--c-info); border-color: var(--c-info); }
.pill--b2b { background: var(--c-warning-bg); color: var(--c-warning); border-color: var(--c-warning); }
.pill--inactive { background: var(--c-error-bg); color: var(--c-error); border-color: var(--c-error); }
.pill--info { background: var(--c-info-bg); color: var(--c-info); border-color: var(--c-info); }

/* Vehicle types */
.pill--truck { background: var(--c-accent-bg); color: var(--c-accent); border-color: var(--c-accent); }
.pill--trailer { background: var(--c-info-bg); color: var(--c-info); border-color: var(--c-info); }

/* Trip / payroll statuses */
.pill--draft { background: var(--c-warning-bg); color: var(--c-warning); border-color: var(--c-warning); }
.pill--confirmed { background: var(--c-accent-bg); color: var(--c-accent); border-color: var(--c-accent); }
.pill--calculated { background: var(--c-info-bg); color: var(--c-info); border-color: var(--c-info); }
.pill--approved { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success); }
.pill--warn { background: var(--c-warning-bg); color: var(--c-warning); border-color: var(--c-warning); }
.pill--paid { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success); }

/* Segment types */
.pill--transit { background: var(--c-bg); color: var(--c-text-muted); }
.pill--bilateral { background: var(--c-info-bg); color: var(--c-info); border-color: var(--c-info); }
.pill--cabotage { background: var(--c-warning-bg); color: var(--c-warning); border-color: var(--c-warning); }
.pill--cross_trade { background: var(--c-error-bg); color: var(--c-error); border-color: var(--c-error); }

/* Payroll line types */
.pill--base_salary { background: var(--c-bg); color: var(--c-text); }
.pill--foreign_wage { background: var(--c-info-bg); color: var(--c-info); border-color: var(--c-info); }
.pill--equalization { background: var(--c-warning-bg); color: var(--c-warning); border-color: var(--c-warning); }
.pill--virtual_diet_zus { background: var(--c-bg); color: var(--c-text-muted); border-style: dashed; }
.pill--virtual_diet_pit { background: var(--c-bg); color: var(--c-text-muted); border-style: dashed; }
.pill--sanitariaty { background: var(--c-success-bg); color: var(--c-success); border-color: var(--c-success); }
.pill--zus_employee { background: var(--c-error-bg); color: var(--c-error); border-color: var(--c-error); opacity: 0.85; }
.pill--zdrowotne { background: var(--c-error-bg); color: var(--c-error); border-color: var(--c-error); opacity: 0.7; }
.pill--pit_advance { background: var(--c-error-bg); color: var(--c-error); border-color: var(--c-error); opacity: 0.85; }

/* ============================================================ Key-value lists */

.kv { display: grid; grid-template-columns: 200px 1fr; gap: var(--space-2) var(--space-5); margin: 0; padding: var(--space-5); }
.kv dt { color: var(--c-text-muted); font-size: 12px; font-weight: 500; }
.kv dd { margin: 0; }

/* ============================================================ Flash messages */

.flashes { margin-bottom: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.flash {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    border-left: 3px solid;
    font-size: 13px;
}
.flash--success { background: var(--c-success-bg); border-color: var(--c-success); color: var(--c-success); }
.flash--error { background: var(--c-error-bg); border-color: var(--c-error); color: var(--c-error); }
.flash--warning { background: var(--c-warning-bg); border-color: var(--c-warning); color: var(--c-warning); }
.flash--info { background: var(--c-info-bg); border-color: var(--c-info); color: var(--c-info); }

/* ============================================================ Auth screen */

.auth-screen {
    min-height: calc(100vh - 100px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
}
.auth-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    padding: var(--space-6);
    width: 100%;
    max-width: 380px;
}
.auth-card__head { text-align: center; margin-bottom: var(--space-6); }
.auth-card__head .brand__mark { margin: 0 auto var(--space-3); }
.auth-card__head h1 { font-size: 18px; }
.auth-card__head p { margin: var(--space-1) 0 0; font-size: 13px; }
.auth-card__lang {
    display: flex;
    gap: var(--space-1);
    justify-content: center;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--c-border);
}

/* ============================================================ Dropzone */

.dropzone { margin-top: var(--space-3); }

.dropzone__area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-6) var(--space-4);
    text-align: center;
    border: 2px dashed var(--c-border-strong);
    border-radius: var(--radius-lg);
    background: var(--c-bg);
    color: var(--c-text-muted);
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}
.dropzone__area:hover,
.dropzone__area:focus-visible {
    border-color: var(--c-accent);
    color: var(--c-text);
    outline: none;
}
.dropzone__area.is-dragover {
    border-color: var(--c-accent);
    background: var(--c-accent-bg);
    color: var(--c-accent);
}
.dropzone__icon { color: var(--c-text-subtle); margin-bottom: var(--space-1); }
.dropzone__area.is-dragover .dropzone__icon { color: var(--c-accent); }
.dropzone__title { font-weight: 600; font-size: 14px; color: var(--c-text); margin: 0; }
.dropzone__hint { font-size: 12px; margin: 0; }
.dropzone__scope { font-size: 12px; color: var(--c-text-subtle); margin: var(--space-1) 0 0; }

.dropzone__list {
    margin-top: var(--space-3);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
}
.dropzone__list-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--c-border);
    font-size: 13px;
    color: var(--c-text-muted);
}
.dropzone__list-head [data-dropzone-count] { font-weight: 600; color: var(--c-text); }
.dropzone__list-head .btn { margin-left: auto; }

.dropzone__files { list-style: none; margin: 0; padding: 0; }
.dropzone__file {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--c-border);
}
.dropzone__file:last-child { border-bottom: none; }
.dropzone__file.is-rejected { background: var(--c-error-bg); }
.dropzone__file-meta { display: flex; flex-direction: column; min-width: 0; }
.dropzone__file-name {
    font-size: 13px; color: var(--c-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dropzone__file-sub { font-size: 11px; color: var(--c-text-subtle); }
.dropzone__file.is-rejected .dropzone__file-sub { color: var(--c-error); }
.dropzone__file-remove {
    margin-left: auto;
    border: none; background: none; cursor: pointer;
    font-size: 18px; line-height: 1; color: var(--c-text-subtle);
    padding: 0 var(--space-1);
}
.dropzone__file-remove:hover { color: var(--c-error); }

.dropzone__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    flex-wrap: wrap;
}
.dropzone__note { font-size: 12px; color: var(--c-text-subtle); }
.dropzone__note.is-error { color: var(--c-error); }

ul.plain { list-style: none; margin: 0; padding: 0; }
ul.plain li { padding: 2px 0; }

/* ============================================================================
   Document batch review — split-screen master/detail (MOCKUP_document_review).
   Sidebar = the unified file list (uploading → recognizing → pending → confirmed,
   triggers first); detail pane = the selected file's confirm form (.dz-entry).
   ========================================================================== */
.review {
    display: grid;
    grid-template-columns: 280px 1fr;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 420px;
}
@media (max-width: 900px) { .review { grid-template-columns: 1fr; } }

/* ---- Sidebar ---- */
.review__sidebar {
    border-right: 1px solid var(--c-border);
    background: var(--c-bg);
    padding: var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-3);
    min-width: 0;
}
@media (max-width: 900px) { .review__sidebar { border-right: 0; border-bottom: 1px solid var(--c-border); } }
.review__head .lbl {
    font-size: 10px; color: var(--c-text-muted);
    text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
}
.review__head .count { font-size: 18px; font-weight: 600; margin-top: 2px; }
.review__progress-bar { height: 4px; background: var(--c-border); border-radius: 2px; overflow: hidden; }
.review__progress-bar > div { height: 100%; background: var(--c-accent); transition: width 0.25s; }
.review__progress-note { font-size: 11px; color: var(--c-text-muted); margin-top: 4px; }

.review__filters { display: flex; flex-wrap: wrap; gap: 4px; }
.review__pill {
    height: 22px; padding: 0 9px; font-size: 10px; font-weight: 600;
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: 999px; cursor: pointer; color: var(--c-text-muted);
}
.review__pill.is-active { background: var(--c-accent); border-color: var(--c-accent); color: #fff; }

.review__section-lbl {
    font-size: 9px; color: var(--c-text-muted);
    text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600;
    padding: var(--space-2) 0 4px;
}
.review__list { display: flex; flex-direction: column; gap: 1px; }
.review__row {
    display: grid; grid-template-columns: 18px 1fr 14px;
    gap: var(--space-2); align-items: center;
    padding: 7px 8px; background: transparent;
    border: 0; border-left: 3px solid transparent; border-radius: 0 5px 5px 0;
    width: 100%; text-align: left; cursor: pointer; color: var(--c-text);
    font-family: inherit;
}
.review__row:hover { background: var(--c-border); }
.review__row.is-selected { background: var(--c-accent-bg); border-left-color: var(--c-accent); }
.review__row .ico { font-size: 14px; line-height: 1; text-align: center; color: var(--c-text-muted); }
.review__row .title { font-size: 12px; font-weight: 600; }
.review__row .sub { font-size: 10px; color: var(--c-text-muted); }
.review__row .title, .review__row .sub {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.review__row .status-dot { width: 7px; height: 7px; border-radius: 50%; justify-self: center; }
.status-dot--pending { background: var(--c-border-strong); }
.status-dot--expiring { background: var(--c-warning); }
.status-dot--expired { background: var(--c-error); }
.status-dot--locked { background: var(--c-text-subtle); }
.review__row.is-recognizing .ico { animation: review-spin 0.9s linear infinite; }
@keyframes review-spin { to { transform: rotate(360deg); } }
.review__row.is-unrecognized { opacity: 0.6; }
.review__row.is-confirmed { opacity: 0.55; }
.review__row.is-confirmed .title { font-weight: 500; }
.review__row .check { color: var(--c-success); font-size: 12px; justify-self: center; }
/* Idle / unrecognized rows are recognition triggers — the "→ / ↻" hints at the
   click-to-recognize action; the row dims slightly until it's been processed. */
.review__row.is-idle .sub { font-style: italic; }
.review__row .review__row-go { color: var(--c-text-subtle); font-size: 12px; justify-self: center; }
.review__row:hover .review__row-go { color: var(--c-accent); }
/* Idle / unrecognized rows pair the (recognize-on-click) row with a delete
   control — they have no recognised entry yet to carry a Delete button. */
.review__row-wrap { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.review__row-del {
    border: 0; background: transparent; cursor: pointer;
    color: var(--c-text-subtle); font-size: 15px; line-height: 1;
    padding: 0 6px; height: 100%;
}
.review__row-del:hover { color: var(--c-error); }
.review__empty-list { font-size: 11px; color: var(--c-text-subtle); padding: var(--space-2); }

/* ---- Detail pane ---- */
.review__detail { padding: var(--space-4); min-width: 0; }
.review__detail-empty {
    height: 100%; min-height: 360px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--space-2); color: var(--c-text-subtle); text-align: center;
}
.review__detail-empty .big { font-size: 40px; opacity: 0.5; }
/* Only the selected file's form is shown; the rest stay mounted (so their HTMX
   body-event listeners — e.g. triggersCleared unlock — keep working) but hidden. */
.review__detail .review-form { display: none; }
.review__detail .review-form.is-active { display: block; }
.review__detail .review-form .dz-entry { margin: 0; }

/* Inbox confirmation form — redesigned detail pane (MOCKUP_document_review):
   a vertical stack — file head + state badge → entity toggle → large preview +
   tools → compact form sections → actions. State is shown by the head badge,
   flash messages and the critical-field tints, not a whole-card colour. */
.dz-entry {
    display: flex; flex-direction: column; gap: var(--space-3);
    border: 0; border-radius: 0; padding: 0; margin: 0;
}
.dz-entry--locked { opacity: 0.7; }
.dz-entry--locked .dz-entry__form-rows { pointer-events: none; }
/* Saved note that replaces the entry once it's applied. */
.dz-entry--done {
    border: 1px dashed var(--c-border); border-radius: var(--radius);
    padding: var(--space-3); color: var(--c-text-muted);
}

/* ---- File head ---- */
.dz-entry__detail-head {
    display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
    padding-bottom: var(--space-2); border-bottom: 1px solid var(--c-border);
}
.dz-entry__file-ico { font-size: 16px; line-height: 1; }
.dz-entry__filename { font-family: var(--font-mono); font-size: 12px; word-break: break-all; }
.dz-entry__meta { margin-left: auto; font-size: 11px; color: var(--c-text-muted); white-space: nowrap; }

/* ---- Entity toggle: segmented "About" control ---- */
.entity-switch { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.entity-switch__label {
    font-size: 10px; color: var(--c-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.entity-switch__seg {
    display: inline-flex; padding: 2px; gap: 2px;
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.entity-switch__opt {
    height: 28px; padding: 0 12px; font-size: 12px; font-weight: 600;
    background: transparent; border: 0; border-radius: 6px;
    cursor: pointer; color: var(--c-text-muted);
    transition: background 0.12s, color 0.12s;
}
.entity-switch__opt:hover:not(.is-active):not([disabled]) { color: var(--c-text); }
.entity-switch__opt.is-active { background: var(--c-accent); color: #fff; cursor: default; }
.entity-switch__hint {
    font-size: 11px; color: var(--c-text-muted);
    display: inline-flex; align-items: center; gap: 4px;
}

/* ---- Large preview + tools ---- */
.dz-entry__preview { border-radius: var(--radius); overflow: hidden; }
.dz-entry__preview .doc-thumb { display: block; width: 100%; }
.dz-entry__preview .doc-thumb__media {
    width: 100%; height: 300px; object-fit: contain;
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius);
}
.dz-entry__preview .doc-thumb__name { display: none; }
.dz-entry__preview-tools { display: flex; gap: 4px; }
.dz-entry__preview-tools a, .dz-entry__preview-tools button {
    flex: 1; height: 28px; font-size: 11px; font-family: inherit;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    cursor: pointer; color: var(--c-text);
    display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    text-decoration: none;
}
.dz-entry__preview-tools a:hover, .dz-entry__preview-tools button:hover {
    background: var(--c-bg); text-decoration: none;
}
/* Signal the preview opens a zoomable lightbox. */
.dz-entry__preview { cursor: zoom-in; }

/* ---- Document zoom lightbox ---- */
/* Full-screen preview so a manual reviewer can zoom in and read the recognised
   document. Built by documents.js and shared; images pan/zoom, PDFs use the
   native viewer. */
.zoom-modal {
    position: fixed; inset: 0; z-index: 200;
    display: flex; flex-direction: column;
    background: rgba(20, 22, 26, 0.88);
}
.zoom-modal[hidden] { display: none; }
.zoom-modal__bar {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 10px 16px; color: #fff;
}
.zoom-modal__name {
    font-size: 13px; opacity: 0.9; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zoom-modal__tools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.zoom-modal__btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 30px; height: 30px; padding: 0 10px;
    background: rgba(255, 255, 255, 0.12); color: #fff; border: none; border-radius: 6px;
    font: inherit; font-size: 14px; line-height: 1; cursor: pointer; text-decoration: none;
}
.zoom-modal__btn:hover { background: rgba(255, 255, 255, 0.24); color: #fff; }
.zoom-modal__level {
    min-width: 46px; text-align: center; color: #fff; font-size: 12px;
    font-variant-numeric: tabular-nums;
}
/* Zoom controls only make sense for images; PDFs use the native viewer. */
.zoom-modal:not(.zoom-modal--image) .zoom-modal__level,
.zoom-modal:not(.zoom-modal--image) [data-zoom-in],
.zoom-modal:not(.zoom-modal--image) [data-zoom-out],
.zoom-modal:not(.zoom-modal--image) [data-zoom-reset] { display: none; }
.zoom-modal__stage {
    flex: 1 1 auto; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.zoom-modal--image .zoom-modal__stage { cursor: zoom-in; }
.zoom-modal--image.is-zoomed .zoom-modal__stage { cursor: grab; }
.zoom-modal--image.is-panning .zoom-modal__stage { cursor: grabbing; }
.zoom-modal__img {
    max-width: 100%; max-height: 100%;
    transform-origin: center center; transition: transform 0.05s linear;
    user-select: none; -webkit-user-drag: none;
}
.zoom-modal__frame { width: 100%; height: 100%; border: 0; background: #fff; }
body.zoom-open { overflow: hidden; }

/* ---- Form sections ---- */
.dz-entry__form-section { display: flex; flex-direction: column; gap: var(--space-1); }
.dz-entry__form-section-lbl {
    font-size: 10px; color: var(--c-text-muted);
    text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600;
    margin-bottom: 4px;
}
.dz-entry__form-rows { display: flex; flex-direction: column; gap: 6px; }
.dz-entry__form-row { display: grid; gap: 6px; }
.dz-entry__form-row--2 { grid-template-columns: 1fr 1fr; }
.dz-entry__form-row--3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
    .dz-entry__form-row--2, .dz-entry__form-row--3 { grid-template-columns: 1fr; }
}
.dz-entry__field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dz-entry__field > label {
    font-size: 10px; color: var(--c-text-muted);
    text-transform: none; letter-spacing: normal; font-weight: 400; padding-left: 2px;
}
/* Tall enough that values (incl. mono ascenders/descenders) are never clipped. */
.dz-entry__field .input { height: 38px; line-height: 1.2; }
.dz-entry__field select.input { height: 38px; }
.dz-entry__field.has-err .input { border-color: var(--c-error); }
.dz-entry__hint { font-size: 10px; color: var(--c-text-muted); padding-left: 2px; }
/* Identity/section fields shown from a linked driver/vehicle (read-only): the
   entity is the source of record, so they're filled but not editable here. */
.dz-entry__form-hint { font-size: 10px; color: var(--c-text-muted); padding-left: 2px; margin: 0; }
.dz-entry .input.is-locked,
.dz-entry select.input.is-locked {
    background: var(--c-bg); color: var(--c-text-muted); cursor: default;
}
.dz-entry .input.is-locked:focus { box-shadow: none; border-color: var(--c-border); }

/* Read-only review of the full recognised payload (RecognitionResult.extra). */
.dz-entry__rawjson { margin-top: var(--space-3); }
.dz-entry__rawjson > summary {
    cursor: pointer; font-size: 11px; font-weight: 600;
    color: var(--c-text-muted); padding: 4px 0; user-select: none;
}
.dz-entry__rawjson > summary:hover { color: var(--c-text); }
.dz-entry__rawjson-text {
    margin-top: 4px; width: 100%; resize: vertical;
    font-size: 11px; line-height: 1.45; white-space: pre;
    color: var(--c-text-muted); background: var(--c-surface-2, var(--c-bg));
}

/* Critical fields — document № and valid-until carry visual weight (§8.2). */
.dz-entry__field--critical > label { color: var(--c-accent); font-weight: 600; }
.dz-entry__field--critical .input {
    background: var(--c-accent-bg); border-color: var(--c-accent);
    font-family: var(--font-mono); font-weight: 500;
}
.dz-entry__field--critical.is-warn > label { color: var(--c-warning); }
.dz-entry__field--critical.is-warn .input { background: var(--c-warning-bg); border-color: var(--c-warning); }
.dz-entry__field--critical.is-error > label { color: var(--c-error); }
.dz-entry__field--critical.is-error .input { background: var(--c-error-bg); border-color: var(--c-error); }
.dz-entry__ok-hint { font-size: 10px; color: var(--c-success); padding-left: 2px; }
.dz-entry__warn-hint { font-size: 10px; color: var(--c-warning); font-weight: 600; padding-left: 2px; }

/* ---- Actions ---- */
.dz-entry__actions {
    display: flex; align-items: center; gap: var(--space-2);
    padding-top: var(--space-2); border-top: 1px solid var(--c-border);
}

/* ---- Detail-pane navigation + keyboard hints (shared chrome) ---- */
.review__nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-2);
}
.review__nav-btn {
    height: 28px; padding: 0 10px; font-size: 11px; font-family: inherit;
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    cursor: pointer; color: var(--c-text);
    display: inline-flex; align-items: center; gap: 4px;
}
.review__nav-btn:hover:not([disabled]) { background: var(--c-bg); }
.review__nav-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.review__nav-counter { font-size: 11px; color: var(--c-text-muted); }
.review__nav-counter strong { color: var(--c-text); font-weight: 600; }
.review__kbd-hints {
    display: flex; flex-wrap: wrap; gap: var(--space-3);
    font-size: 10px; color: var(--c-text-muted);
    margin-top: var(--space-2); padding-top: var(--space-2);
    border-top: 1px dashed var(--c-border);
}
.review__kbd-hints span { display: inline-flex; align-items: center; gap: 3px; }
.review__kbd-hints kbd {
    font-family: var(--font-mono); background: var(--c-bg);
    padding: 1px 5px; border-radius: 3px; border: 1px solid var(--c-border); font-size: 10px;
}
/* Empty-state hint hides as soon as any entry is in the confirm list. */
#confirm-entries:not(:empty) + .confirm-empty { display: none; }

/* Inbox file rows: unrecognised-format files stay listed but flagged red (§8.2);
   recognised ones dim once they've been moved to the confirm list. */
/* Unknown file type — flagged yellow (recognition is still allowed), not red. */
.table tr.is-unrecognized > td { background: var(--c-warning-bg); }
.table tr.is-unrecognized > td:first-child { color: var(--c-warning); }
.table tr.is-done { opacity: 0.5; }
/* Recognition queue states: waiting in the queue, then being recognised. */
.table tr.is-queued > td { background: var(--c-bg); }
.table tr.is-queued > td:first-child::after { content: " · queued"; color: var(--c-text-subtle); font-size: 11px; }
.table tr.is-recognizing > td { background: var(--c-accent-bg); }
.table tr.is-recognizing > td:first-child::after { content: " · recognising…"; color: var(--c-accent); font-size: 11px; }

/* ====================================================== Driver card (FleetOS) */

.crumbs { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.crumbs__path { color: var(--c-text-muted); font-size: 13px; }
.crumbs__sep { color: var(--c-text-subtle); margin: 0 4px; }

.driver-layout { display: grid; grid-template-columns: 360px 1fr; gap: 28px; align-items: start; }
/* Keep the right (1fr) track equal to available space regardless of which tab's
   content is shown — otherwise a wide table widens the column vs the calendar. */
.driver-layout > * { min-width: 0; }
.tab-panel { min-width: 0; }

/* Left profile card */
.driver-card { display: flex; flex-direction: column; padding: var(--space-5); }
.driver-card__head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.driver-card__name { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2; }
.country-tag {
    display: inline-block; margin-top: 6px; padding: 2px 10px; font-size: 11px;
    border: 1px solid var(--c-border-strong); border-radius: 100px;
    color: var(--c-text-muted); text-transform: lowercase;
}
.avatar {
    flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%;
    background: var(--c-accent-bg); color: var(--c-accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 17px; letter-spacing: 0.04em;
}
.field-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; font-size: 13px; }
.field-row .label { color: var(--c-text-muted); }
.field-row .value { font-weight: 500; }
.field-row .value.mono { font-family: var(--font-mono); font-size: 12px; }
.field-row .value.empty { color: var(--c-text-subtle); }

.section-divider {
    margin: 18px 0 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--c-text-subtle);
}
.section-header-row { display: flex; justify-content: space-between; align-items: center; margin: 18px 0 8px; }
.section-header-row .section-divider { margin: 0; }
.add-link { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--c-accent); }

/* Contract card */
.contract-item {
    margin-top: 10px; padding: 14px; background: #fbfaf6;
    border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent-2);
    border-radius: var(--radius);
}
.contract-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.contract-title { font-size: 13px; font-weight: 600; }
.contract-status { font-size: 11px; padding: 2px 8px; border-radius: 100px; font-weight: 500; background: var(--c-success-bg); color: var(--c-success); }
.contract-status--ended { background: #f3f1ec; color: var(--c-text-muted); }
.contract-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.contract-cell { font-size: 12px; }
.contract-cell .k { color: var(--c-text-muted); font-size: 11px; margin-bottom: 2px; }
.contract-cell .v { font-weight: 500; }
.contract-cell .v.mono { font-family: var(--font-mono); }

.edit-btn {
    align-self: flex-start; margin-top: auto; width: auto;
    background: transparent; color: var(--c-accent); border: 1px solid var(--c-accent);
}
.edit-btn:hover { background: var(--c-accent-bg); color: var(--c-accent); text-decoration: none; }

/* ---- Top card: profile + contracts side by side ---- */
.top-card {
    display: grid; grid-template-columns: 380px 1px 1fr; gap: 28px;
    align-items: stretch; padding: var(--space-5);
}
.divider-v { background: var(--c-border); width: 1px; }

.profile-section { display: flex; flex-direction: column; }
.profile-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }

/* Compact two-column field grid inside the profile section. */
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; margin-bottom: 18px; }
.info-grid .field-row { padding: 7px 0; font-size: 13px; border-bottom: 1px dashed var(--c-border); }
.info-grid .field-row .label { font-size: 12px; }

/* Grouped profile sections (Passport / Legal entity / Polish identifiers / Contact). */
.info-section { margin-top: 18px; }
.info-section:first-of-type { margin-top: 0; }
.info-section .info-grid { margin-bottom: 0; }
.info-section-title {
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--c-text-subtle); margin-bottom: 6px;
    display: flex; align-items: center; gap: 8px;
}
.info-section-title::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.passport-type-badge {
    margin-left: 8px; padding: 1px 8px; border-radius: 100px;
    font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
    background: var(--c-accent-bg); color: var(--c-accent);
}

/* Contract section (right of the divider) */
.contract-section { display: flex; flex-direction: column; }
.contract-section-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.section-label {
    font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--c-text-subtle);
}
.contract-card {
    padding: 16px 18px; background: #fbfaf6;
    border: 1px solid var(--c-border); border-left: 3px solid var(--c-accent-2);
    border-radius: var(--radius-lg); margin-bottom: 12px;
}
.contract-card:last-child { margin-bottom: 0; }
.contract-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.contract-grid--wide { grid-template-columns: repeat(4, 1fr); gap: 14px 18px; }
.contract-grid--wide .k { text-transform: uppercase; letter-spacing: 0.05em; }
.contract-grid--wide .v { font-size: 14px; font-weight: 600; }
.contract-grid--wide .v.accent { color: var(--c-accent); }
.contract-actions { display: flex; gap: 8px; margin-top: 14px; }
.contract-actions .inline-form { margin: 0; }

/* Required-documents tracking summary — sits where contracts were (PRD §12.5). */
.reqs-overall { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 100px; letter-spacing: 0.02em; }
.reqs-overall--ok { background: var(--c-success-bg); color: var(--c-success); }
.reqs-overall--missing { background: var(--c-error-bg); color: var(--c-error); }
.reqs-overall--expiring { background: var(--c-warning-bg); color: var(--c-warning); }

.reqs-block { margin-bottom: 16px; }
.reqs-block:last-child { margin-bottom: 0; }
.reqs-block__head {
    display: flex; align-items: center; gap: 8px;
    font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--c-text-muted); margin-bottom: 8px;
}
.reqs-block__head::after { content: ""; order: 0; flex: 1; height: 1px; background: var(--c-border); }
.reqs-block__head--missing { color: var(--c-error); }
.reqs-block__head--expiring { color: var(--c-warning); }
.reqs-block__head--ok { color: var(--c-success); }
.reqs-count {
    order: 1; flex: none; min-width: 18px; text-align: center;
    padding: 0 6px; border-radius: 100px; background: var(--c-bg);
    border: 1px solid var(--c-border); color: var(--c-text-muted); font-size: 10px;
}

.reqs-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.req-tag {
    display: inline-block; padding: 3px 10px; border-radius: 100px;
    font-size: 12px; font-weight: 500; border: 1px solid transparent; white-space: nowrap;
}
.req-tag--ok { background: var(--c-success-bg); color: var(--c-success); border-color: #c8e3d5; }
.req-tag--missing { background: var(--c-error-bg); color: var(--c-error); border-color: #e8c8c8; }

.req-row {
    display: flex; align-items: center; gap: 10px; padding: 7px 4px;
    border-bottom: 1px dashed var(--c-border); text-decoration: none; color: var(--c-text);
}
.req-row:last-child { border-bottom: 0; }
.req-row:hover { background: #fbfaf6; }
.req-row__type { flex: 1; font-size: 13px; font-weight: 500; text-transform: capitalize; }
.req-row__date { font-size: 12px; color: var(--c-text-muted); }

/* ---- Bottom: full-width documents, then vacations stacked under ---- */
.driver-bottom { display: flex; flex-direction: column; gap: 28px; }
.driver-bottom > * { min-width: 0; }
.panel--pad { padding: var(--space-5); }

/* Right work zone: tab buttons */
.tabs { display: flex; gap: 6px; margin-bottom: 20px; }
.tab {
    flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap;
    background: var(--c-surface); border: 1px solid var(--c-border);
    padding: 10px 18px; border-radius: 9px; font-size: 13px; font-weight: 500;
    cursor: pointer; color: var(--c-text); display: inline-flex; align-items: center; gap: 7px;
}
.tab.is-active { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.panel-title { font-size: 18px; font-weight: 600; }
.panel-actions { display: flex; gap: 8px; }
.panel-header--mt { margin-top: var(--space-6); }

/* Vacations mock */
.gcal-banner {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; background: var(--c-info-bg); border: 1px dashed #c8d6f0;
    border-radius: var(--radius-lg); margin-bottom: 20px;
}
.gcal-banner .left { display: flex; align-items: center; gap: 12px; }
.gcal-icon { width: 32px; height: 32px; background: #fff; border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 18px; border: 1px solid #e0e6f0; }
.gcal-text strong { display: block; font-size: 13px; }
.gcal-text span { font-size: 12px; color: var(--c-text-muted); }
.vac-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 24px; }
.vac-stat { padding: 16px 18px; background: #fbfaf6; border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.vac-stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-muted); margin-bottom: 6px; }
.vac-stat .v { font-size: 22px; font-weight: 600; font-family: var(--font-mono); }
.vac-stat .sub { font-size: 11px; color: var(--c-text-muted); margin-top: 4px; }
.calendar-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.calendar-title { font-size: 14px; font-weight: 600; }
.calendar-nav { display: flex; gap: 6px; align-items: center; }
.calendar-nav button { background: var(--c-surface); border: 1px solid var(--c-border-strong); width: 28px; height: 28px; border-radius: 6px; cursor: pointer; font-size: 14px; }
.calendar-nav .month-name { font-size: 13px; font-weight: 500; padding: 0 8px; min-width: 110px; text-align: center; }
/* Click-to-pick month/year selector (native month input, HTMX-navigated). */
.calendar-nav .month-picker {
    font-size: 13px; font-weight: 500; font-family: inherit; color: var(--c-text);
    min-width: 138px; text-align: center; padding: 4px 8px; cursor: pointer;
    background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: 6px;
}
.calendar-nav .month-picker:hover { border-color: var(--c-accent); }
.calendar-nav .month-picker::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); text-align: center; padding: 8px 0 6px; font-weight: 600; }
.cal-day { aspect-ratio: 1.2; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 6px 8px; font-size: 12px; font-family: var(--font-mono); color: var(--c-text); background: var(--c-surface); position: relative; }
.cal-day.muted { color: var(--c-text-subtle); background: var(--c-bg); }
.cal-day.vacation { background: var(--c-success-bg); border-color: #c8e3d5; color: var(--c-success); font-weight: 600; }
.cal-day.weekend { background: #faf8f3; }
.cal-day.today { border: 1.5px solid var(--c-accent); }
/* Sick (L4) and other leave kinds get their own day shading. */
.cal-day.sick { background: #fdecea; border-color: #e6a8a0; color: var(--c-error); font-weight: 600; }
.cal-day.leave-other { background: #f1f0ec; border-color: var(--c-border-strong); font-weight: 600; }
.cal-day .ev-dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--c-success); }
.cal-day.sick .ev-dot { background: var(--c-error); }
.cal-day.leave-other .ev-dot { background: var(--c-text-muted); }

/* Collapsible add-leave / entitlement forms in the vacations tab. */
.vac-form { margin-top: 18px; border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: 12px 16px; }
.vac-form > summary { cursor: pointer; font-size: 13px; font-weight: 500; color: var(--c-accent); }
.vac-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px; align-items: end; margin-top: 14px; }
.vac-form__grid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); }
.vac-legend { display: flex; gap: 16px; margin-top: 14px; font-size: 11px; color: var(--c-text-muted); }
.vac-legend .item { display: flex; align-items: center; gap: 6px; }
.vac-legend .sw { width: 12px; height: 12px; border-radius: 3px; }
.vac-list-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-muted); margin: 28px 0 12px; font-weight: 600; }
.vac-item { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--c-border); border-radius: var(--radius-lg); margin-bottom: 8px; }
.vac-item .vi-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--c-success-bg); color: var(--c-success); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.vac-item .info { flex: 1; }
.vac-item .title { font-size: 13px; font-weight: 500; }
.vac-item .meta { font-size: 12px; color: var(--c-text-muted); margin-top: 2px; }
.vac-item .dates { font-family: var(--font-mono); font-size: 12px; color: var(--c-text-muted); text-align: right; }
.vac-item .days { font-size: 14px; font-weight: 600; color: var(--c-text); margin-top: 2px; font-family: var(--font-mono); }

/* ---- Vacations panel: 3-column (balances / calendar / upcoming) ---- */
.vac-grid { display: grid; grid-template-columns: 248px minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.vac-side { display: flex; flex-direction: column; gap: var(--space-3); }
.vac-main, .vac-rail { min-width: 0; }

/* Compact Google Calendar connection card (sidebar). */
.gcal-card { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: #fbfaf6; }
.gcal-card .gcal-icon { width: 30px; height: 30px; flex-shrink: 0; }
.gcal-card .gcal-text { flex: 1; min-width: 0; }
.gcal-card .gcal-text strong { display: block; font-size: 12px; line-height: 1.2; }
.gcal-card .gcal-text span { display: block; font-size: 11px; color: var(--c-text-muted); overflow: hidden; text-overflow: ellipsis; }
.gcal-card.is-on .gcal-icon { border-color: #c8e3d5; }
.gcal-card.is-off { background: var(--c-bg); }
.gcal-card__link { font-size: 11px; color: var(--c-accent); white-space: nowrap; text-decoration: none; }
.gcal-card__link:hover { text-decoration: underline; }

/* Fleet vacation calendar page */
.onleave-list { display: flex; flex-direction: column; gap: 6px; }
.onleave-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--radius); color: var(--c-text); }
.onleave-item:hover { background: var(--c-bg); text-decoration: none; }
.onleave-item .onleave-name { font-weight: 500; }
.onleave-item .onleave-until { margin-left: auto; }
.avatar--sm { flex: 0 0 32px; width: 32px; height: 32px; font-size: 12px; }
.settings-hint { margin-top: 16px; font-size: 12px; }

/* ---- Own-style fleet month timeline (driver rows × day columns) ---- */
/* Reserve the inner scrollbar gutter so the day columns keep the same width
   whether the driver list overflows vertically or not (no bar reflow / jump).
   Day cells are a FIXED width (--day-w), so a cell is the same size in every
   month (28–31 days) and after the page loads — the grid scrolls horizontally
   rather than stretching cells to fill. */
/* --cols reserves a constant column count (3 months ≈ 93 days) so the diagram
   is the same width in every quarter; shorter windows leave trailing blanks. */
.vmonth { --name-w: 184px; --day-w: 30px; --cols: 93; max-height: 68vh; overflow: auto; scrollbar-gutter: stable; padding-bottom: 4px; }
.vmonth-row { display: flex; align-items: stretch; min-width: max-content; }
.vmonth-row + .vmonth-row { border-top: 1px solid var(--c-border); }
/* Driver name column stays put on horizontal scroll. */
.vmonth-name { position: sticky; left: 0; z-index: 2; background: var(--c-surface); flex: 0 0 var(--name-w); width: var(--name-w); padding: 6px 12px 6px 2px; display: flex; align-items: center; }
.vmonth-name__link { display: flex; align-items: center; gap: 9px; color: var(--c-text); min-width: 0; }
.vmonth-name__link:hover { text-decoration: none; }
.vmonth-name__link:hover .vmonth-name__txt { text-decoration: underline; }
.vmonth-name__txt { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Always reserve 31 day columns so the calendar block is the SAME width every
   month; shorter months (28–30 days) simply leave the trailing columns blank —
   the view never resizes between months. */
.vmonth-scale, .vmonth-track, .vmonth-monthscale { flex: 0 0 auto; display: grid; grid-template-columns: repeat(var(--cols, 31), var(--day-w)); }
.vmonth-track { position: relative; min-height: 34px; }

/* Month band: one label per month, sticky at the very top of the scroll. */
.vmonth-row--months { position: sticky; top: 0; z-index: 5; background: var(--c-surface); }
.vmonth-row--months .vmonth-name { z-index: 6; }
.vmonth-month { grid-row: 1; padding: 5px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: capitalize; color: var(--c-text); white-space: nowrap; overflow: hidden; border-left: 2px solid var(--c-border-strong); }

/* Date scale stays visible while scrolling the driver list vertically; sits
   just below the (also sticky) month band. */
.vmonth-row--head { position: sticky; top: 27px; z-index: 3; background: var(--c-surface); }
.vmonth-row--head .vmonth-name { z-index: 4; }  /* top-left corner above both axes */

/* Stronger divider where a new month begins. */
.vmonth-day.is-month-start, .vmonth-cell.is-month-start { border-left: 2px solid var(--c-border-strong); }
.vmonth-day { text-align: center; padding: 4px 0 6px; font-family: var(--font-mono); border-left: 1px solid var(--c-border); }
.vmonth-day:last-child { border-right: 1px solid var(--c-border); }
.vmonth-dnum { display: block; font-size: 12px; color: var(--c-text); }
.vmonth-dow { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-subtle); }
.vmonth-day.is-off { background: #faf8f3; }
.vmonth-day.is-off .vmonth-dnum, .vmonth-day.is-off .vmonth-dow { color: var(--c-text-muted); }
.vmonth-day.is-today { background: #fff; box-shadow: inset 0 -2px 0 var(--c-accent); }
.vmonth-day.is-today .vmonth-dnum { color: var(--c-accent); font-weight: 700; }

.vmonth-cell { grid-row: 1; border-left: 1px solid var(--c-border); }
.vmonth-cell:last-child { border-right: 1px solid var(--c-border); }
.vmonth-cell.is-off { background: #faf8f3; }
.vmonth-cell.is-today { box-shadow: inset 0 0 0 1px var(--c-accent-soft, rgba(60,110,200,0.18)); background: rgba(60,110,200,0.04); }

.vmonth-bar { grid-row: 1; align-self: center; height: 22px; margin: 0 1px; border-radius: 6px; display: flex; align-items: center; padding: 0 8px; font-size: 11px; font-weight: 500; line-height: 1; border: 1px solid; z-index: 1; overflow: hidden; }
.vmonth-bar__txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vmonth-bar.clip-l { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 0; }
.vmonth-bar.clip-r { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: 0; }
.vmonth-bar--annual { background: var(--c-success-bg); border-color: #c8e3d5; color: var(--c-success); }
.vmonth-bar--on_demand { background: #eef3ff; border-color: #b9ccf0; color: #2f5bb7; }
.vmonth-bar--sick { background: #fdecea; border-color: #e6a8a0; color: var(--c-error); }
.vmonth-bar--unpaid { background: #f1eef6; border-color: #cdc2dd; color: #6b5b8a; }
.vmonth-bar--other { background: #f1f0ec; border-color: var(--c-border-strong); color: var(--c-text-muted); }

/* Mobile fallback: stacked per-driver leave list (shown ≤720px instead of the
   grid). One row per active driver; leave date-ranges as coloured chips. */
.vmonth-list { display: none; flex-direction: column; gap: 8px; }
.vml-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.vml-row.is-empty { background: var(--c-bg); }
.vml-name { display: flex; align-items: center; gap: 9px; color: var(--c-text); flex: 0 0 auto; max-width: 45%; min-width: 0; }
.vml-name:hover { text-decoration: none; }
.vml-name:hover .vml-name__txt { text-decoration: underline; }
.vml-name__txt { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vml-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-left: auto; }
.vml-chip { font-size: 11px; font-weight: 500; line-height: 1.2; padding: 3px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.vml-chip--annual { background: var(--c-success-bg); border-color: #c8e3d5; color: var(--c-success); }
.vml-chip--on_demand { background: #eef3ff; border-color: #b9ccf0; color: #2f5bb7; }
.vml-chip--sick { background: #fdecea; border-color: #e6a8a0; color: var(--c-error); }
.vml-chip--unpaid { background: #f1eef6; border-color: #cdc2dd; color: #6b5b8a; }
.vml-chip--other { background: #f1f0ec; border-color: var(--c-border-strong); color: var(--c-text-muted); }
.vml-none { font-size: 12px; color: var(--c-text-subtle); }

/* Responsive density (tablet): narrower name column, tighter day ticks. */
@media (max-width: 1024px) {
    .vmonth { --name-w: 132px; --day-w: 24px; }
    .vmonth-dow { display: none; }
    .vmonth-dnum { font-size: 11px; }
    .vmonth-day { padding: 5px 0; }
}
/* Phone: swap the scrolling grid for the stacked list. */
@media (max-width: 720px) {
    .vmonth { display: none; }
    .vmonth-list { display: flex; }
}

/* Balance stat cards (sidebar). */
.vac-card { padding: 14px 16px; border: 1px solid var(--c-border); border-radius: var(--radius-lg); background: var(--c-surface); }
.vac-card__head { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text-muted); font-weight: 600; }
.vac-card__label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-subtle); margin-top: 8px; }
.vac-card__big { font-size: 30px; font-weight: 700; font-family: var(--font-mono); line-height: 1.1; color: var(--c-accent); margin-top: 2px; }
.vac-card__big.is-neg { color: var(--c-error); }
.vac-card__big--sick { color: var(--c-warning); }
.vac-card__of { font-size: 16px; font-weight: 500; color: var(--c-text-subtle); }
.vac-card__sub { font-size: 11px; color: var(--c-text-muted); margin-top: 6px; }

/* Upcoming & recent rail. */
.vac-rail .vac-list-title { margin-top: 0; }
.vac-rail .vac-item { gap: 10px; padding: 10px 12px; align-items: flex-start; }
.vac-rail .vac-item .vi-icon { width: 30px; height: 30px; font-size: 14px; }
.vac-rail .vac-item .info { min-width: 0; }
.vac-rail .vac-item .meta { line-height: 1.35; }
.vac-item--sick .vi-icon { background: var(--c-warning-bg); color: var(--c-warning); }
.vac-item.is-done .vi-icon { background: #f3f1ec; color: var(--c-text-muted); }

/* ============================================================ Vacations page
   Fleet leave page: head, top cards, all-leaves table, balances, add/edit modal.
   Scoped under .vac-page so the generic class names don't leak elsewhere. */
.vac-page .vacp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.vac-page .vacp-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.vac-page .vacp-sub { font-size: 13px; color: var(--c-text-muted); margin-top: 4px; }
.vac-page .vacp-actions { display: flex; gap: 8px; align-items: center; }

/* Per-driver balance strip on the Vacations tab. */
.vac-page .vacp-balance { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 760px) { .vac-page .vacp-balance { grid-template-columns: repeat(2, 1fr); } }

.vac-page .vacp-topcards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
@media (max-width: 860px) { .vac-page .vacp-topcards { grid-template-columns: 1fr; } }
.vac-page .info-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; }
.vac-page .info-card-title { font-size: 13px; font-weight: 600; }
.vac-page .info-card-meta { font-size: 11px; color: var(--c-text-muted); font-family: var(--font-mono); white-space: nowrap; }

.vac-page .gcal-block { display: flex; align-items: center; gap: 14px; }
.vac-page .gcal-badge { width: 44px; height: 44px; background: var(--c-info-bg); border: 1px solid #d6e0f0; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.vac-page .gcal-content { flex: 1; min-width: 0; }
.vac-page .gcal-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; margin-bottom: 4px; }
.vac-page .gcal-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.vac-page .gcal-status.is-on { color: var(--c-success); }
.vac-page .gcal-status.is-off { color: var(--c-text-muted); }
.vac-page .gcal-email { font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vac-page .gcal-actions { display: flex; gap: 6px; flex-shrink: 0; }

.vac-page .today-list { display: flex; flex-direction: column; gap: 8px; }
.vac-page .today-item { display: flex; align-items: center; gap: 10px; padding: 7px 12px; background: var(--c-success-bg); border: 1px solid #c8e3d5; border-radius: 8px; color: var(--c-text); }
.vac-page .today-item:hover { text-decoration: none; border-color: var(--c-success); }
.vac-page .today-name { font-size: 12px; font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vac-page .today-type { font-size: 10px; padding: 2px 8px; border-radius: 100px; background: var(--c-surface); border: 1px solid var(--c-border); white-space: nowrap; }
.vac-page .today-until { font-size: 11px; font-family: var(--font-mono); color: var(--c-text-muted); white-space: nowrap; }

/* Filter chips + search above the all-leaves table. */
.vac-page .section-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vac-page .vacp-search { width: 220px; }
.vac-page .filter-chip { background: var(--c-surface); border: 1px solid var(--c-border-strong); padding: 6px 12px; border-radius: 100px; font-size: 12px; font-weight: 500; cursor: pointer; color: var(--c-text-muted); font-family: var(--font-sans); white-space: nowrap; }
.vac-page .filter-chip:hover, .vac-page .filter-chip.is-active { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-bg); }

/* Table cell helpers (the base .data-table styles are shared globally). */
.vac-page .driver-cell { display: inline-flex; align-items: center; gap: 10px; color: var(--c-text); min-width: 0; }
.vac-page .driver-cell:hover { text-decoration: none; }
.vac-page .driver-cell:hover .driver-cell__name { text-decoration: underline; }
.vac-page .driver-cell__name { font-weight: 500; white-space: nowrap; }
.vac-page .date-cell { font-family: var(--font-mono); font-size: 12px; white-space: nowrap; }
.vac-page .days-cell { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }

.vac-page .vac-type-pill { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.vac-page .vac-type-pill.annual { background: var(--c-success-bg); color: var(--c-success); border-color: #c8e3d5; }
.vac-page .vac-type-pill.demand { background: var(--c-info-bg); color: var(--c-info); border-color: #d1d9ea; }
.vac-page .vac-type-pill.sick { background: var(--c-error-bg); color: var(--c-error); border-color: #e8c8c8; }
.vac-page .vac-type-pill.unpaid { background: #f1eef6; color: #6b5b8a; border-color: #cdc2dd; }

.vac-page .vac-status { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.vac-page .vac-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.vac-page .vac-status--active { background: var(--c-accent-bg); color: var(--c-accent); border-color: var(--c-accent); }
.vac-page .vac-status--planned { background: var(--c-info-bg); color: var(--c-info); border-color: #d1d9ea; }
.vac-page .vac-status--completed { background: #f3f1ec; color: var(--c-text-muted); border-color: var(--c-border-strong); }

.vac-page .source-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; color: var(--c-text-muted); font-family: var(--font-mono); white-space: nowrap; }

.vac-page .balance-bar { width: 110px; height: 6px; background: #f3f1ec; border-radius: 3px; overflow: hidden; display: inline-block; vertical-align: middle; margin-right: 8px; }
.vac-page .balance-bar .fill { display: block; height: 100%; border-radius: 3px; background: var(--c-accent); }
.vac-page .balance-bar .fill.high { background: var(--c-success); }
.vac-page .balance-bar .fill.mid { background: var(--c-warning); }
.vac-page .balance-bar .fill.low { background: var(--c-error); }
.vac-page .balance-text { font-family: var(--font-mono); font-size: 12px; }
.vac-page .balance-text--mid { color: var(--c-warning); font-weight: 600; }
.vac-page .balance-text--low { color: var(--c-error); font-weight: 600; }
.vac-page .balance-text--high { color: var(--c-success); font-weight: 600; }
.vac-page .btn-rowlink { background: var(--c-surface); border: 1px solid var(--c-border-strong); padding: 4px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; color: var(--c-text); }
.vac-page .btn-rowlink:hover { color: var(--c-accent); border-color: var(--c-accent); text-decoration: none; }

/* Add / edit modal. */
.vac-modal { position: fixed; inset: 0; background: rgba(26, 29, 35, 0.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 24px; }
.vac-modal[hidden] { display: none; }
.vac-modal__box { background: var(--c-surface); border-radius: 14px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.2); }
.vac-modal__head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--c-border); }
.vac-modal__title { font-size: 16px; font-weight: 600; }
.vac-modal__close { background: transparent; border: none; width: 28px; height: 28px; border-radius: 6px; font-size: 20px; line-height: 1; cursor: pointer; color: var(--c-text-muted); }
.vac-modal__close:hover { background: #f3f1ec; color: var(--c-text); }
.vac-modal__body { padding: 20px 22px; }
.vac-modal__foot { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px; border-top: 1px solid var(--c-border); background: #fbfaf6; border-radius: 0 0 14px 14px; }
.vac-modal .form-field { margin-bottom: 16px; }
.vac-modal .form-label { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 6px; }
.vac-modal .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vac-modal .vac-driver-static { font-size: 14px; font-weight: 500; padding: 8px 0; }
.vac-modal .type-radio-group { display: flex; flex-wrap: wrap; gap: 8px; }
.vac-modal .type-radio { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--c-border-strong); border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 500; transition: all 0.1s; }
.vac-modal .type-radio input { display: none; }
.vac-modal .type-radio .dot { width: 8px; height: 8px; border-radius: 50%; }
.vac-modal .type-radio.annual .dot { background: var(--c-success); }
.vac-modal .type-radio.demand .dot { background: var(--c-info); }
.vac-modal .type-radio.sick .dot { background: var(--c-error); }
.vac-modal .type-radio.unpaid .dot { background: #6b5b8a; }
.vac-modal .type-radio:hover { border-color: var(--c-accent); }
.vac-modal .type-radio.is-selected { background: var(--c-accent-bg); border-color: var(--c-accent); color: var(--c-accent); }
.vac-modal .vac-gcal-note { font-size: 12px; color: var(--c-text-muted); padding: 10px 12px; background: #fbfaf6; border: 1px solid var(--c-border); border-radius: 8px; }
.vac-item__end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.vac-days { font-size: 11px; font-weight: 600; font-family: var(--font-mono); color: var(--c-text-muted);
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.vac-del { background: none; border: 0; cursor: pointer; color: var(--c-text-subtle); font-size: 16px; line-height: 1; padding: 0 2px; }
.vac-del:hover { color: var(--c-error); }

/* Expandable inline leave editor (click a rail item to edit / delete it). */
.vac-entry { border: 1px solid var(--c-border); border-radius: var(--radius-lg); margin-bottom: 8px; overflow: hidden; }
.vac-entry > summary.vac-item { border: 0; border-radius: 0; margin: 0; list-style: none; cursor: pointer; }
.vac-entry > summary.vac-item::-webkit-details-marker { display: none; }
.vac-entry[open] > summary.vac-item { background: var(--c-bg); border-bottom: 1px solid var(--c-border); }
.vac-edit-ico { font-size: 13px; color: var(--c-text-subtle); }
.vac-entry[open] .vac-edit-ico { color: var(--c-accent); }
.vac-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; padding: 14px 16px; }
.vac-edit > label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); }
.vac-edit > label:first-of-type, .vac-edit > label:last-of-type { grid-column: 1 / -1; }  /* Type + Note span full width */
.vac-edit__actions { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 8px; margin-top: 2px; }
.vac-edit__del { color: var(--c-error); }

.vac-forms { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); }

@media (max-width: 1180px) {
    /* Drop the upcoming rail to a full-width row under the calendar. */
    .vac-grid { grid-template-columns: 220px minmax(0, 1fr); }
    .vac-rail { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .vac-grid { grid-template-columns: 1fr; }
}

/* ============================================================ Responsive */

@media (max-width: 1024px) {
    .driver-layout { grid-template-columns: 1fr; }
    .top-card { grid-template-columns: 1fr; }
    .top-card .divider-v { display: none; }
}

@media (max-width: 880px) {
    /* Sidebar slides in over the content; hamburger lives in the slim top bar. */
    .sidebar {
        position: fixed; top: 0; left: -260px; z-index: 100;
        transition: left 0.2s ease; box-shadow: 0 0 0 100vmax rgba(0,0,0,0);
    }
    .sidebar.is-open { left: 0; box-shadow: 0 8px 40px rgba(0,0,0,0.25); }
    .sidebar-toggle { display: inline-flex; align-items: center; justify-content: center; margin-right: auto; }
}

@media (max-width: 768px) {
    .container { padding: var(--space-4) var(--space-3); }
    .form-grid { grid-template-columns: 1fr; padding: var(--space-4); }
    .kv { grid-template-columns: 1fr; }
    .kv dt { margin-top: var(--space-3); }
    .user-chip { display: none; }
}

/* ============================================================ Drivers list
   Redesigned fleet roster (KPI segments + client-filtered table). Scoped under
   .drivers-page so the design's generic class names don't leak elsewhere. */
.drivers-page .page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.drivers-page .page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.drivers-page .page-sub { font-size: 13px; color: var(--c-text-muted); margin-top: 4px; }
.drivers-page .head-actions { display: flex; gap: 8px; }
.drivers-page .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; }

/* KPI segments */
.drivers-page .kpi-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 1100px) { .drivers-page .kpi-row { grid-template-columns: repeat(2, 1fr); } }
.drivers-page .kpi { padding: 16px 18px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; cursor: pointer; transition: all 0.15s; }
.drivers-page .kpi:hover { border-color: var(--c-accent); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.drivers-page .kpi.is-active { border-color: var(--c-accent); background: var(--c-accent-bg); }
.drivers-page .kpi-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.drivers-page .kpi-dot { width: 8px; height: 8px; border-radius: 50%; }
.drivers-page .kpi-dot.ok { background: var(--c-success); box-shadow: 0 0 0 3px var(--c-success-bg); }
.drivers-page .kpi-dot.warn { background: var(--c-warning); box-shadow: 0 0 0 3px var(--c-warning-bg); }
.drivers-page .kpi-dot.danger { background: var(--c-error); box-shadow: 0 0 0 3px var(--c-error-bg); }
.drivers-page .kpi-dot.info { background: var(--c-info); box-shadow: 0 0 0 3px var(--c-info-bg); }
.drivers-page .kpi-dot.neutral { background: #8a8a80; box-shadow: 0 0 0 3px #f3f1ec; }
.drivers-page .kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); font-weight: 600; }
.drivers-page .kpi-value { font-size: 28px; font-weight: 700; font-family: var(--font-mono); line-height: 1.1; }
.drivers-page .kpi-value.ok { color: var(--c-success); }
.drivers-page .kpi-value.warn { color: var(--c-warning); }
.drivers-page .kpi-value.danger { color: var(--c-error); }
.drivers-page .kpi-value.info { color: var(--c-info); }
.drivers-page .kpi-sub { font-size: 11px; color: var(--c-text-muted); margin-top: 4px; font-family: var(--font-mono); }

/* Filters bar */
.drivers-page .filters-bar { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.drivers-page .search { background: var(--c-surface); border: 1px solid var(--c-border-strong); padding: 9px 14px; border-radius: 9px; font-size: 13px; font-family: var(--font-sans); width: 300px; max-width: 100%; }
.drivers-page .filter-divider { width: 1px; height: 20px; background: var(--c-border); }
.drivers-page .filter-select { background: var(--c-surface); border: 1px solid var(--c-border-strong); padding: 8px 12px; border-radius: 8px; font-size: 12px; font-family: var(--font-sans); color: var(--c-text); }

/* Table cells */
.drivers-page .data-table thead th.checkbox-col { width: 36px; }
.drivers-page .data-table input[type="checkbox"] { accent-color: var(--c-accent); }
.drivers-page .data-table tbody tr { cursor: pointer; }
.drivers-page .driver-cell { display: flex; align-items: center; gap: 12px; }
.drivers-page .driver-cell .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--c-accent-bg); color: var(--c-accent); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 12px; flex-shrink: 0; }
.drivers-page .driver-cell .info { min-width: 0; }
.drivers-page .driver-cell .name { font-weight: 600; font-size: 13px; line-height: 1.3; }
.drivers-page .driver-cell .sub { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--c-text-muted); margin-top: 2px; font-family: var(--font-mono); }
.drivers-page .country-flag { padding: 1px 6px; background: #f3f1ec; border: 0; border-radius: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; font-family: var(--font-mono); }
.drivers-page .country-flag.eu { background: var(--c-info-bg); color: var(--c-info); }
.drivers-page .country-flag.non-eu { background: var(--c-warning-bg); color: var(--c-warning); }

/* Status pill (driver lifecycle) */
.drivers-page .status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.drivers-page .status-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.drivers-page .status-pill.ready { background: var(--c-success-bg); color: var(--c-success); border-color: #c8e3d5; }
.drivers-page .status-pill.route { background: var(--c-info-bg); color: var(--c-info); border-color: #d1d9ea; }
.drivers-page .status-pill.vacation { background: var(--c-accent-bg); color: var(--c-accent); border-color: #b8d4cc; }
.drivers-page .status-pill.sick { background: var(--c-error-bg); color: var(--c-error); border-color: #e8c8c8; }
.drivers-page .status-pill.blocked { background: var(--c-error-bg); color: var(--c-error); border-color: var(--c-error); }
.drivers-page .status-pill.inactive { background: #f3f1ec; color: #8a8a80; border-color: var(--c-border-strong); }

/* Category chips */
.drivers-page .cat-list { display: flex; gap: 4px; flex-wrap: wrap; }
.drivers-page .cat-chip { padding: 2px 7px; border-radius: 4px; font-size: 10px; font-weight: 700; background: var(--c-accent-bg); color: var(--c-accent); letter-spacing: 0.04em; }
.drivers-page .cat-chip.special { background: var(--c-warning-bg); color: var(--c-warning); }
.drivers-page .cat-chip.unknown { background: #f3f1ec; color: var(--c-text-subtle); font-weight: 600; }

/* Docs badge */
.drivers-page .docs-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 600; font-family: var(--font-mono); white-space: nowrap; }
.drivers-page .docs-badge.ok { background: var(--c-success-bg); color: var(--c-success); }
.drivers-page .docs-badge.warn { background: var(--c-warning-bg); color: var(--c-warning); }
.drivers-page .docs-badge.danger { background: var(--c-error-bg); color: var(--c-error); }

/* Route / vehicle / fines / tenure */
.drivers-page .route-cell { font-size: 12px; }
.drivers-page .route-cell .empty, .drivers-page .vehicle-cell .empty, .drivers-page .empty { color: var(--c-text-subtle); font-style: italic; }
.drivers-page .vehicle-cell { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 12px; }
.drivers-page .fines-cell { font-size: 12px; font-family: var(--font-mono); color: var(--c-text-subtle); }
.drivers-page .tenure { font-family: var(--font-mono); font-size: 12px; }
.drivers-page .tenure .years { font-weight: 600; }
.drivers-page .tenure .sub { font-size: 10px; color: var(--c-text-muted); }
.drivers-page .dl-vac-low { color: var(--c-error); }
.drivers-page .dl-vac-mid { color: var(--c-warning); }
.drivers-page .dl-vac-high { color: var(--c-success); }

/* Row actions */
.drivers-page .row-actions { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.drivers-page .row-actions .btn-open { background: var(--c-accent); color: #fff; border: 1px solid var(--c-accent); padding: 5px 12px; border-radius: 6px; font-size: 11px; font-weight: 500; text-decoration: none; }
.drivers-page .row-actions .btn-open:hover { background: var(--c-accent-hover); }
.drivers-page .row-actions .dl-del { background: var(--c-surface); border: 1px solid var(--c-border-strong); padding: 5px 10px; border-radius: 6px; font-size: 11px; font-weight: 500; cursor: pointer; color: var(--c-error); font-family: var(--font-sans); }
.drivers-page .row-actions .dl-del:hover { border-color: var(--c-error); background: var(--c-error-bg); }
.drivers-page .row-actions .inline-form { display: inline; }

/* Footer */
.drivers-page .table-footer { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-top: 1px solid var(--c-border); background: #fbfaf6; font-size: 12px; color: var(--c-text-muted); }

/* Vehicles list (reuses the drivers-page table styling). */
.drivers-page .veh-type { display: inline-block; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 500; border: 1px solid transparent; white-space: nowrap; }
.drivers-page .veh-type.tractor { background: var(--c-accent-bg); color: var(--c-accent); border-color: #b8d4cc; }
.drivers-page .veh-type.trailer { background: var(--c-info-bg); color: var(--c-info); border-color: #d1d9ea; }
.drivers-page .vehicle-plate { font-family: var(--font-mono); font-weight: 600; color: var(--c-text); }
.drivers-page .vehicle-plate:hover { color: var(--c-accent); text-decoration: underline; }
.drivers-page .vin-cell { font-family: var(--font-mono); font-size: 12px; color: var(--c-text-muted); }