/* OSG ERP components in plain CSS, built on the design-system tokens (tokens.css).
   Mirrors the Vuetify defaults and erp-overrides: compact fields 40px, rows 36px, flat bordered cards. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--background); color: var(--on-surface); font: 500 14px/20px var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: var(--primary); }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.muted { color: var(--ink-muted); }
.text-uppercase { text-transform: uppercase; }
.text-numeric { font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.text-code { white-space: nowrap; font-variant-numeric: tabular-nums; }
.text-success { color: var(--success); } .text-error { color: var(--error); } .text-warning { color: var(--warning); } .text-info { color: var(--info); }
.icon { width: 20px; height: 20px; fill: currentColor; flex: none; vertical-align: middle; }
.icon.sm { width: 16px; height: 16px; } .icon.lg { width: 24px; height: 24px; } .icon.xl { width: 40px; height: 40px; }
.row { display: flex; align-items: center; gap: var(--space-2); }
.row.wrap { flex-wrap: wrap; } .row.top { align-items: flex-start; } .row.between { justify-content: space-between; }
.grow { flex: 1 1 auto; min-width: 0; }
.stack > * + * { margin-top: var(--space-4); }
.mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; }
.hidden { display: none !important; }

/* ---- shell */
.shell { display: grid; grid-template-columns: var(--nav-width) 1fr; min-height: 100vh; }
.nav { background: var(--nav); border-right: 1px solid var(--border); position: sticky; top: 0; z-index: 6; height: 100vh; display: flex; flex-direction: column; }
.nav__brand { height: var(--app-bar-height); display: flex; align-items: center; justify-content: center; padding: 0 20px; border-bottom: 1px solid var(--border); }
.nav__brand img { height: 34px; display: block; }
.nav__product { border-left: 1px solid var(--border); padding-left: 10px; color: var(--ink-muted); font: 500 11px/16px var(--font-heading); letter-spacing: .08em; }
.nav__list { padding: 8px 12px; overflow-y: auto; flex: 1; }
.nav__heading { color: var(--on-nav-muted); font: 500 11px/16px var(--font-heading); letter-spacing: .08em; text-transform: uppercase; padding: 16px 12px 6px; }
.nav__item { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--radius-md); color: var(--on-nav); text-decoration: none; font: 500 14px/20px var(--font-heading); }
.nav__item .icon { color: var(--on-nav-muted); }
.nav__item:hover { background: var(--nav-active); }
.nav__item.active { background: var(--nav-active); }
.nav__item.active::before { content: ""; position: absolute; left: -12px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--brand); }
.nav__item.active .icon { color: var(--brand); }
.badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-pill); background: var(--brand-strong); color: var(--on-brand-strong); font: 600 11px/20px var(--font-body); text-align: center; }
.nav__foot { border-top: 1px solid var(--border); padding: 8px 12px 12px; }
.nav__foot .nav__user { padding: 0 8px; }
.nav__user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.nav__user .appbar__name, .nav__user .appbar__role { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.appbar { position: sticky; top: 0; z-index: 5; height: var(--app-bar-height); background: var(--surface); border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 16px 0 24px; }
.crumbs { display: flex; align-items: center; gap: 4px; color: var(--ink-muted); font-size: 14px; }
.crumbs a { color: var(--ink-muted); text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.crumbs .current { color: var(--on-surface); font-weight: 600; }
.appbar__search { margin-left: auto; width: 300px; height: 36px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: var(--radius-md); background: var(--surface-light); color: var(--ink-muted); }
.appbar__search input { border: 0; outline: 0; background: transparent; width: 100%; color: var(--on-surface); }
.appbar__user { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--border); margin-left: 4px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: grid; place-items: center; font: 600 12px/1 var(--font-body); flex: none; }
.avatar.sm { width: 28px; height: 28px; background: var(--primary-container); color: var(--on-primary-container); }
.appbar__name { font-weight: 600; font-size: 13px; line-height: 16px; } .appbar__role { color: var(--ink-muted); font-size: 12px; line-height: 16px; }
.bell { position: relative; }
.bell .badge { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; line-height: 18px; padding: 0 5px; }
.main { min-width: 0; }
.main__inner { max-width: var(--content-max-width); margin: 0 auto; padding: var(--space-6); }

/* ---- page header */
.page-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.page-header h1 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-header__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--button-height); padding: 0 16px; border-radius: var(--radius-md); border: 1px solid transparent; background: transparent; color: var(--on-surface); font: 500 14px/20px var(--font-heading); cursor: pointer; white-space: nowrap; text-decoration: none; }
.btn .icon { width: 18px; height: 18px; margin-left: -4px; }
.btn:disabled { opacity: var(--disabled-opacity); cursor: default; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--primary-darken-1); }
.btn-outlined { border-color: var(--border-strong); }
.btn-outlined:hover:not(:disabled), .btn-text:hover:not(:disabled) { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.btn-tonal { background: var(--primary-container); color: var(--on-primary-container); }
.btn-error { background: var(--error); color: var(--on-error); }
.btn-sm { height: 28px; padding: 0 10px; font-size: 13px; }
.btn-icon { width: 36px; padding: 0; } .btn-icon .icon { margin: 0; }
.btn-icon.btn-sm { width: 28px; }
.btn-block { width: 100%; }
.btn-lg { height: 44px; font-size: 15px; }

/* ---- cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card__head { padding: 16px 16px 0; }
.card__head.bar { padding: 12px 16px; border-bottom: 1px solid var(--border); }
.card__body { padding: 16px; }
.card__title { font: 500 16px/24px var(--font-heading); }
.card.clickable { cursor: pointer; } .card.clickable:hover { border-color: var(--border-strong); }
.grid { display: grid; gap: 8px; }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.grid-2 { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.stat { padding: 16px; }
.stat__label { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); }
.stat__value { margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ---- fields (outlined, compact 40px) */
.form { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px 12px; }
.col-12 { grid-column: span 12; } .col-6 { grid-column: span 6; } .col-4 { grid-column: span 4; } .col-3 { grid-column: span 3; } .col-8 { grid-column: span 8; }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > label { font: 600 12px/16px var(--font-body); color: var(--ink-muted); }
.input { height: var(--control-height); width: 100%; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--on-surface) calc(var(--field-border-opacity) * 100%), transparent); background: var(--surface); color: var(--on-surface); font-size: 14px; }
textarea.input { height: auto; min-height: 72px; padding: 9px 12px; resize: vertical; }
.input:hover { border-color: var(--on-surface); }
.input:focus { outline: none; border: 2px solid var(--primary); padding: 0 11px; }
textarea.input:focus { padding: 8px 11px; }
.input[readonly], .input:disabled { background: var(--surface-light); border-color: var(--border); }
.input.code { font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.input.is-error { border-color: var(--error); }
.hint { font-size: 12px; line-height: 16px; color: var(--ink-muted); min-height: 16px; }
.hint.error { color: var(--error); } .hint.ok { color: var(--success); }
select.input { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23757575' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 20px; }
.search { position: relative; width: 320px; max-width: 100%; }
.search .icon { position: absolute; left: 10px; top: 10px; color: var(--ink-muted); }
.search .input { padding-left: 36px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filter-bar select.input { width: auto; min-width: 170px; }

/* chip choice (grade, condition) */
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choice { height: 32px; padding: 0 12px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.choice[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ---- status chip */
.chip { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--radius-pill); font: 600 12px/16px var(--font-body); white-space: nowrap; }
.chip .icon { width: 16px; height: 16px; }
.tone-neutral { background: var(--neutral-container); color: var(--on-neutral-container); }
.tone-success { background: var(--success-container); color: var(--on-success-container); }
.tone-warning { background: var(--warning-container); color: var(--on-warning-container); }
.tone-error { background: var(--error-container); color: var(--on-error-container); }
.tone-info { background: var(--info-container); color: var(--on-info-container); }
.tone-primary { background: var(--primary); color: var(--on-primary); }
.chip-outline { background: transparent; border: 1px solid var(--border-strong); color: var(--on-surface); padding: 0 8px; }
.type { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.type .icon { width: 16px; height: 16px; color: var(--ink-muted); }
/* Direction pill: a tag, not a status, so it has no status tone */
.pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px 0 6px; border: 1px solid var(--border); border-radius: var(--radius-pill); font: 600 12px/16px var(--font-body); white-space: nowrap; color: var(--on-surface); background: var(--surface); }
.pill .icon { width: 14px; height: 14px; }
.pill-Incoming { background: var(--info-container); color: var(--on-info-container); border-color: transparent; }
.pill-Outgoing { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; }
.pill-Transfer { background: var(--surface-light); }
.pill-Onsite { background: repeating-linear-gradient(45deg, var(--surface-light) 0 6px, var(--surface) 6px 12px); }

/* ---- tables (compact) */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.table th { height: var(--table-header-height); background: var(--surface-light); color: color-mix(in srgb, var(--on-surface) 74%, transparent); font-size: 12px; font-weight: 600; text-align: start; padding: 0 12px; white-space: nowrap; border-bottom: 1px solid var(--border); }
.table td { height: var(--table-row-height); padding: 0 12px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr.link { cursor: pointer; } .table tbody tr.link:hover td { background: color-mix(in srgb, var(--on-surface) 4%, transparent); }
.table .end { text-align: end; }
.table td.wrap { white-space: normal; padding-top: 8px; padding-bottom: 8px; }
.table td.truncate { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.table tr.selected td { background: var(--primary-container); }
.table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); }
.empty { padding: 48px 16px; text-align: center; color: var(--ink-muted); }
.empty .card__title { color: var(--on-surface); margin-top: 12px; }
.empty .row { justify-content: center; margin-top: 16px; }

/* ---- tabs */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab { height: 40px; padding: 0 16px; border: 0; background: none; cursor: pointer; font: 500 14px/20px var(--font-heading); color: var(--on-surface); border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 6px; }
.tab[aria-selected="true"] { color: var(--brand-strong); border-bottom-color: var(--brand-strong); }
.tab .count { background: var(--neutral-container); color: var(--on-neutral-container); border-radius: var(--radius-pill); padding: 0 6px; font: 600 11px/18px var(--font-body); }

/* ---- alerts */
.alert { display: flex; gap: 12px; padding: 12px 16px; border-radius: var(--radius-lg); }
.alert ul { margin: 4px 0 0; padding-left: 18px; }
.alert__title { font-weight: 700; }
.alert.error { background: var(--error-container); color: var(--on-error-container); }
.alert.warning { background: var(--warning-container); color: var(--on-warning-container); }
.alert.success { background: var(--success-container); color: var(--on-success-container); }
.alert.info { background: var(--info-container); color: var(--on-info-container); }

/* ---- dialog, drawer, snackbar */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,.32); z-index: 20; display: grid; place-items: center; padding: 16px; }
.dialog { width: 560px; max-width: 100%; max-height: 90vh; overflow: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.dialog__title { padding: 24px 24px 8px; }
.dialog__body { padding: 0 24px 8px; }
.dialog__actions { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px 24px; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 380px; max-width: 100%; background: var(--surface); box-shadow: var(--shadow-lg); z-index: 21; display: flex; flex-direction: column; }
.drawer__list { overflow-y: auto; flex: 1; }
.notice { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.notice.unread { background: var(--primary-container); }
.snackbar { position: fixed; right: 24px; bottom: 24px; z-index: 30; max-width: 480px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--surface-variant); color: var(--on-surface-variant); box-shadow: var(--shadow-lg); }

/* ---- lists */
.list-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; }
.list-item + .list-item { border-top: 1px solid var(--border); }
.list-item.link { cursor: pointer; } .list-item.link:hover { background: color-mix(in srgb, var(--on-surface) 4%, transparent); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 8px 12px; font-size: 13px; }
.kv dt { color: var(--ink-muted); } .kv dd { margin: 0; min-width: 0; }
.message { white-space: pre-wrap; background: var(--surface-light); border-radius: var(--radius-md); padding: 12px; font-size: 13px; line-height: 20px; }
.timeline-item { display: flex; gap: 12px; padding: 10px 0; }
.timeline-item + .timeline-item { border-top: 1px solid var(--border); }

/* ---- calendar */
.cal { display: grid; grid-template-columns: 150px 1fr; }
.cal__hours { position: relative; height: 28px; border-left: 1px solid var(--border); }
.cal__hours span { position: absolute; top: 6px; transform: translateX(-50%); font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.cal__res { display: flex; align-items: center; gap: 8px; padding: 0 12px; border-top: 1px solid var(--border); }
.cal__track { position: relative; height: 64px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); background-image: repeating-linear-gradient(to right, var(--border) 0 1px, transparent 1px calc(100% / 12)); }
.cal__block { position: absolute; top: 8px; bottom: 8px; border-radius: var(--radius-md); padding: 4px 8px; overflow: hidden; cursor: pointer; border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent); text-align: start; font-size: 12px; line-height: 16px; color: var(--on-surface); }
.cal__block .ttl { display: flex; align-items: center; gap: 4px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal__block .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-muted); }
.fill-Incoming { background: var(--info-container); }
.fill-Outgoing { background: var(--primary-container); }
.fill-Transfer { background: var(--surface-light); }
.fill-LorryCrane { background: var(--warning-container); }
.fill-done { background: var(--neutral-container); }
.cal__now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--primary); pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--ink-muted); }
.legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -3px; margin-right: 6px; border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent); }

/* ---- mobile frame (gate-in, driver) */
.device { width: 400px; max-width: 100%; margin: 0 auto; background: var(--background); border: 1px solid var(--border-strong); border-radius: 28px; padding: 12px; box-shadow: var(--shadow-md); }
.device__screen { background: var(--background); border-radius: 18px; overflow: hidden; min-height: 680px; }
.device__bar { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 16px; display: flex; align-items: center; gap: 10px; }
.device__body { padding: 12px; }
.device .card + .card { margin-top: 12px; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.photo { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); }
.photo__img { aspect-ratio: 5 / 3; display: grid; place-items: center; background: var(--surface-light); width: 100%; border: 0; cursor: pointer; color: var(--ink-muted); }
.photo__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo__bar { display: flex; align-items: center; padding: 2px 4px 2px 8px; font-size: 12px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.thumbs figure { margin: 0; } .thumbs img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: var(--radius-md); display: block; }
.thumbs figcaption { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.job-card__time { font: 600 16px/24px var(--font-heading); }
.side-by-side { display: grid; grid-template-columns: 400px 1fr; gap: 24px; align-items: start; }

@media (max-width: 1100px) { .grid-2, .side-by-side { grid-template-columns: 1fr; } }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .nav { position: static; height: auto; }
  .nav__list { display: flex; flex-wrap: wrap; } .nav__heading, .nav__foot { display: none; }
  .appbar__search { display: none; }
  .main__inner { padding: var(--space-4); }
  .form > * { grid-column: span 12; }
}

/* logo follows the theme */
[data-theme="dark"] .logo-light, :root:not([data-theme="dark"]) .logo-dark { display: none; }

/* Actions menu (details/summary) */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary .icon { margin: 0 -6px 0 0; }
.menu__list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 10; min-width: 220px; padding: 4px 0; background: var(--surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); border: 1px solid var(--border); }
.menu__item { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 16px; border: 0; background: none; cursor: pointer; text-align: start; font-size: 14px; }
.menu__item:hover { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.menu__item .icon { color: var(--ink-muted); }
/* Days dropdown (Service schedule): a select-looking summary with a tick list */
.days-menu > summary.input { display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; }
.days-menu .menu__list { left: 0; right: auto; min-width: 100%; }
.days-menu label.menu__item { cursor: pointer; }

/* side sheet for forms longer than a dialog allows */
.drawer--wide { width: 480px; }
@media (max-width: 860px) { .nav__foot { display: flex; } }

/* rail: 72px icon-only sidebar (AppShell rail) */
.shell { transition: grid-template-columns .15s ease; }
.shell--rail { grid-template-columns: 72px 1fr; }
.shell--rail .nav__brand { padding: 0; }
.nav__brand .nav__mark { height: auto; width: 44px; display: block; }
.shell--rail .nav__list { padding: 8px; }
.shell--rail .nav__item { justify-content: center; padding: 0; gap: 0; }
.shell--rail .nav__item.active::before { left: -8px; }
.shell--rail .nav__label { display: none; }
.shell--rail .nav__item .badge { position: absolute; top: 2px; right: 6px; min-width: 16px; height: 16px; padding: 0 4px; line-height: 16px; font-size: 10px; margin: 0; }
.nav__rule { border: 0; border-top: 1px solid var(--border); margin: 12px 8px; }
.shell--rail .nav__foot { padding: 8px; }
.shell--rail .nav__foot .nav__user { justify-content: center; padding: 0; }

/* collapse toggle: a small round handle on the sidebar edge, shown on hover or keyboard focus */
.nav__toggle { position: absolute; top: calc(var(--app-bar-height) - 12px); right: -12px; z-index: 2; width: 24px; height: 24px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--ink-muted); box-shadow: var(--shadow-sm); cursor: pointer;
  opacity: 0; transform: scale(.85); transition: opacity .15s ease, transform .15s ease, color .15s ease, border-color .15s ease; }
.nav:hover .nav__toggle, .nav__toggle:focus-visible { opacity: 1; transform: scale(1); }
.nav__toggle:hover { color: var(--on-surface); border-color: var(--border-strong); }
.nav__toggle .icon { transition: transform .2s ease; }
.shell--rail .nav__toggle .icon { transform: rotate(180deg); }
@media (hover: none) { .nav__toggle { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .shell, .nav__toggle, .nav__toggle .icon { transition: none; } }

/* filter: one button, a panel with every filter, chips for what is active */
.filter-menu > summary .count { background: var(--primary); color: var(--on-primary); border-radius: var(--radius-pill); min-width: 18px; padding: 0 5px; font: 600 11px/18px var(--font-body); text-align: center; margin-left: 2px; }
.filter-panel { left: 0; right: auto; width: 300px; padding: 16px; display: grid; gap: 12px; }
.chip__x { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 -4px 0 2px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-muted); cursor: pointer; }
.chip__x:hover { background: color-mix(in srgb, var(--on-surface) 10%, transparent); color: var(--on-surface); }
.fill-Service { background: repeating-linear-gradient(45deg, var(--surface-light) 0 6px, var(--surface) 6px 12px); }
.mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; }
/* resource rows: vehicle, driver, start, end, remove */
.res-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) 118px 118px 36px; gap: 8px; align-items: end; }
@media (max-width: 860px) { .res-grid { grid-template-columns: 1fr 1fr; } }

/* Sortable headers: the whole label is the button; the arrow shows on hover, focus or when active */
.table th .th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.table th.end .th-sort { flex-direction: row-reverse; }
.table th .th-sort .icon { width: 14px; height: 14px; opacity: 0; transition: opacity .12s; }
.table th:hover .th-sort .icon, .table th .th-sort:focus-visible .icon, .table th .th-sort.on .icon { opacity: 1; }
.table th .th-sort.on { color: var(--on-surface); }
.table th[aria-sort="none"] .th-sort .icon { color: var(--ink-muted); }

/* Bulk bar: shows above a table while rows are ticked */
.bulk-bar { display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--primary-container); border-bottom: 1px solid var(--border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.bulk-bar > :first-child { margin-right: auto; }

/* Review form: the 4 photos lead, large enough to judge */
.review-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.review-photos figure { margin: 0; }
.review-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); display: block; }
.review-photos figcaption { font-size: 12px; color: var(--ink-muted); margin-top: 4px; }
.review-fill { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-light); }
.review-photos.many { grid-template-columns: repeat(3, 1fr); }
.review-photos.many figure:nth-child(-n+4) { grid-column: span 1; }
.photo-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-md); }
.thumbs .photo-btn img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; border-radius: var(--radius-md); display: block; }
.photo--add .photo__img { border-bottom: 1px dashed var(--border); }

/* Full-size photo viewer */
.scrim.viewer { background: rgba(0, 0, 0, .86); display: grid; place-items: center; z-index: 60; }
.viewer__fig { margin: 0; max-width: min(1100px, 92vw); text-align: center; }
.viewer__fig img { max-width: 100%; max-height: 80vh; border-radius: var(--radius-md); display: block; margin: 0 auto; }
.viewer__fig figcaption { color: #fff; font-size: 13px; margin-top: 8px; }
.viewer__nav { position: fixed; top: 50%; transform: translateY(-50%); color: #fff; background: rgba(255, 255, 255, .12); }
.viewer__nav:hover { background: rgba(255, 255, 255, .22); }
.viewer__nav.prev { left: 16px; } .viewer__nav.next { right: 16px; }
.viewer__nav.close { top: 16px; right: 16px; transform: none; }

/* Record pages: both columns stack their cards with the same gap */
.record-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.record-col > :empty { display: none; }
.kv-2 { grid-template-columns: 130px 1fr 130px 1fr; }
@media (max-width: 720px) { .kv-2 { grid-template-columns: 130px 1fr; } }

/* Photo upload: one button, thumbnails with a remove badge */
.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.upload-thumb { position: relative; }
.upload-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--border); display: block; }
.upload-thumb__x { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.upload-thumb__x .icon { width: 16px; height: 16px; }
.mb-4 { margin-bottom: var(--space-4); }
/* Card footer: the card's own save action, right-aligned */
.card__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); }

/* Job form: resource rows by kind, SO chips, unit lines */
.res-row { display: grid; grid-template-columns: 136px minmax(0, 1.5fr) minmax(0, 1.3fr) 96px 96px 36px; gap: 8px; align-items: center; margin-top: 12px; }
@media (max-width: 900px) { .res-row { grid-template-columns: 1fr 1fr; } }
.chips-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; }
.chips-input .input { flex: 1; min-width: 120px; }
.unit-table td { vertical-align: top; padding-top: 8px; padding-bottom: 8px; height: auto; }
.unit-table .hint { white-space: normal; }

/* Calendar: bands, downtime, the job form's slot preview */
.cal-nav { display: inline-flex; align-items: center; gap: 4px; margin-left: -8px; }
.cal__ghost { position: absolute; top: 6px; bottom: 6px; border-radius: var(--radius-md); border: 2px dashed var(--on-surface); pointer-events: none; }
.cal__ghost.clash { border-color: var(--error); }
.cal__band { padding: 8px 16px; background: var(--surface-light); color: var(--ink-muted); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cal__down, .cal-down-key, .cal__down-key { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--on-surface) 14%, transparent) 0 6px, transparent 6px 12px); }
.cal__down { position: absolute; top: 6px; bottom: 6px; border-radius: var(--radius-md); border: 1px dashed color-mix(in srgb, var(--on-surface) 40%, transparent); display: flex; align-items: center; padding: 0 8px; font-size: 12px; color: var(--ink-muted); overflow: hidden; white-space: nowrap; }
.cal__down span { display: inline-flex; gap: 4px; align-items: center; }
.cal__block.subcon { opacity: .75; border-style: dashed; }

/* POD signature */
.sig-pad { width: 100%; height: 120px; border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--surface-light); touch-action: none; display: block; }
.sig-img { width: 100%; max-height: 90px; object-fit: contain; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }

/* Calendar week view: vehicles × 7 days, job chips per cell */
.cal-scroll { overflow-x: auto; }
.wk { display: grid; grid-template-columns: 140px repeat(7, minmax(104px, 1fr)); min-width: 868px; }
.wk--head { background: var(--surface-light); border-bottom: 1px solid var(--border); }
.wk__day { border: 0; background: none; padding: 8px; font: 500 12px/16px var(--font-heading); color: var(--ink-muted); cursor: pointer; text-align: start; border-left: 1px solid var(--border); }
.wk__day strong { color: var(--on-surface); font-size: 14px; }
.wk__day.today strong, .mo__cell.today .mo__num { color: var(--brand-strong); }
.wk__cell { border-left: 1px solid var(--border); border-top: 1px solid var(--border); padding: 4px; min-height: 64px; display: flex; flex-direction: column; gap: 4px; }
.wk__cell.today { background: color-mix(in srgb, var(--brand-strong) 4%, transparent); }
.wk-chip { display: flex; gap: 4px; align-items: center; width: 100%; padding: 2px 6px; border-radius: var(--radius-sm, 4px); border: 1px solid color-mix(in srgb, var(--on-surface) 16%, transparent); font-size: 11px; line-height: 16px; color: var(--on-surface); text-align: start; cursor: pointer; overflow: hidden; white-space: nowrap; }
.wk-chip.subcon { opacity: .75; border-style: dashed; }
.wk-chip__t { font-weight: 600; }
.wk-chip__p { overflow: hidden; text-overflow: ellipsis; color: var(--ink-muted); }
.wk-down { cursor: default; color: var(--ink-muted); background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--on-surface) 14%, transparent) 0 6px, transparent 6px 12px); border-style: dashed; }

/* Calendar month view */
.mo { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); min-width: 800px; }
.mo--head div { padding: 8px; font: 500 12px/16px var(--font-heading); color: var(--ink-muted); background: var(--surface-light); border-bottom: 1px solid var(--border); }
.mo__cell { min-height: 112px; padding: 4px; border-left: 1px solid var(--border); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 3px; }
.mo__cell.other { background: var(--surface-light); }
.mo__cell.other .mo__num { color: var(--ink-muted); }
.mo__num { align-self: flex-start; border: 0; background: none; padding: 2px 4px; font: 600 13px/16px var(--font-heading); color: var(--on-surface); cursor: pointer; border-radius: var(--radius-sm, 4px); }
.mo__num:hover { background: var(--surface-light); }
.mo__more { align-self: flex-start; }
/* Transport tabs: a gap between the job board tabs and the two lists */
.tabs__sep { width: 1px; margin: 8px 8px; background: var(--border); }
.tab .icon { width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.tabs { overflow-x: auto; scrollbar-width: none; }
.tab { white-space: nowrap; flex: none; }
.tab { padding: 0 12px; }
.tabs__sep { margin: 8px 4px; }

/* Pager under a list: rows per page, range, previous / next */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 16px; padding: 8px 16px; border-top: 1px solid var(--border); }
.pager__size { width: auto; height: 32px; margin-left: 8px; }

/* Long text in a list cell: at most 2 lines, the full text on hover */
.clamp { max-width: var(--w, 200px); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* One line, cut with an ellipsis */
.clip1 { max-width: var(--w, 160px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fixed columns (Job Board): the 9 columns share the width, long text is cut with an ellipsis */
.table-fixed { table-layout: fixed; width: 100%; }
.table-fixed td, .table-fixed th { overflow: hidden; text-overflow: ellipsis; padding-left: 8px; padding-right: 8px; }
.table-fixed td { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; }
.table-fixed .pill { margin-bottom: 2px; }
.table-fixed .clamp, .table-fixed .clip1 { max-width: 100%; }

.nw { white-space: nowrap; }

/* ---------------------------------------------------------------- dashboard charts
   Categorical slots in a fixed order (blue, orange, aqua, yellow), validated light and dark; one hue (slot 1) for single series. */
:root { --viz-1: #2a78d6; --viz-2: #eb6834; --viz-3: #1baf7a; --viz-4: #eda100; --viz-track: color-mix(in srgb, var(--viz-1) 10%, transparent); }
:root[data-theme="dark"] { --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500; }
.viz-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 560px) { .viz-grid-2 { grid-template-columns: 1fr; } }
.viz .card__body { padding-top: 12px; }
.viz-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 8px; font-size: 12px; color: var(--ink-muted); }
.viz-legend i, .viz-part-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.viz-svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz-grid { stroke: var(--border); stroke-width: 1; }
.viz-tick { font: 500 11px var(--font-body); fill: var(--ink-muted); font-variant-numeric: tabular-nums; }
.viz-tick--strong { fill: var(--on-surface); font-weight: 600; }
.viz-ring { stroke: var(--surface); stroke-width: 2; }
.viz-hbars { display: grid; gap: 10px; }
.viz-hbar { display: grid; grid-template-columns: minmax(96px, 34%) 1fr 52px; gap: 12px; align-items: center; font-size: 13px; border-radius: var(--radius-sm); }
.viz-hbar.clickable { cursor: pointer; }
.viz-hbar.clickable:hover .viz-hbar__label { color: var(--on-surface); text-decoration: underline; }
.viz-hbar__label { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.viz-hbar__track { height: 16px; background: var(--viz-track); border-radius: 0 4px 4px 0; }
.viz-hbar__bar { display: block; height: 100%; background: var(--viz-1); border-radius: 0 4px 4px 0; }
.viz-hbar__value { text-align: end; font-weight: 600; }
.viz-part { display: flex; gap: 2px; height: 20px; border-radius: 4px; overflow: hidden; background: var(--surface); }
.viz-part span { min-width: 2px; }
.viz-part-legend { display: grid; gap: 8px; margin-top: 16px; font-size: 13px; }
.viz-part-legend > div { display: grid; grid-template-columns: auto 1fr 64px 44px; gap: 8px; align-items: center; }
.viz-part-legend .text-numeric { text-align: end; }