/* Admin. Plain, dense, readable on a phone in a van. */

:root {
    --ink: #0f172a;
    --soft: #64748b;
    --line: #e2e8f0;
    --brand: #0b2545;
    --accent: #f59e0b;
    --ok: #047857;
    --err: #b91c1c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
    background: #f8fafc;
    overflow-wrap: break-word;
}
html { overflow-x: clip; }

a { color: var(--brand); }
h1 { font-size: 1.5rem; margin: 0 0 18px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
h3 { font-size: .95rem; margin: 20px 0 8px; }
.muted { color: var(--soft); }
.small { font-size: .87rem; }
.big { font-size: 1.15rem; font-weight: 600; }

.admin-bar {
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    background: var(--brand); color: #fff; padding: 12px 18px;
    /* Above Leaflet, whose own panes climb to 1000 and whose map would
       otherwise be drawn over an opened menu. */
    position: relative; z-index: 1200;
}
.admin-bar > strong { margin-right: auto; }
.admin-bar nav { display: flex; flex-wrap: wrap; gap: 14px; }
.admin-bar a { color: #cfe0f2; text-decoration: none; padding: 6px 0; }
.admin-bar a.on, .admin-bar a:hover { color: #fff; text-decoration: underline; }

/* The menu is grouped: five names instead of twelve tabs. With a mouse a group
   opens on hover and a click still works; on a phone it is an accordion, shut
   until it is asked for. Laying every page out at once was the whole problem. */
.admin-nav { position: relative; }
.admin-link { color: #cfe0f2; }
.admin-group { position: relative; }
.admin-group-label {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 0; border: 0; background: transparent; cursor: pointer;
    color: #cfe0f2; font: inherit;
}
.admin-group-label::after { content: "▾"; font-size: .7em; opacity: .8; }
.admin-group.on > .admin-group-label, .admin-group-label:hover { color: #fff; }
.admin-group.on > .admin-group-label { text-decoration: underline; }
.admin-sub { display: none; }
.admin-group.open > .admin-sub { display: block; }
.admin-badge {
    display: inline-block; min-width: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--signal, #e8a33d); color: #22303d;
    font-size: .75rem; font-weight: 700; text-align: center;
}

.admin-who {
    display: flex; align-items: center; gap: 14px;
    padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .2);
    font-size: .9rem; color: #cfe0f2;
}

/* Phone width: the tabs are a sheet under the bar, opened by the hamburger.
   Six tabs wrapped onto three rows push the page down on every screen. */
.admin-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px;
    border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px;
    background: transparent; cursor: pointer;
}
.admin-toggle span { display: block; height: 2px; background: #fff; transition: transform .16s ease, opacity .16s ease; }
.admin-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.admin-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.admin-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.admin-sheet { display: none; }
.admin-sheet.open {
    display: flex; flex-direction: column; gap: 4px;
    flex-basis: 100%; padding-top: 12px; margin-top: 4px;
    border-top: 1px solid rgba(255, 255, 255, .2);
}
.admin-sheet.open nav { flex-direction: column; gap: 0; }
.admin-sheet.open nav a { padding: 11px 0; font-size: 1.05rem; }

/* Phone width: each group is a row that opens. Twelve links stacked under one
   another is a wall to scroll past; five names is a menu. */
.admin-sheet.open .admin-group { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.admin-sheet.open .admin-group-label {
    display: flex; width: 100%; justify-content: space-between; align-items: center;
    padding: 13px 0; font-size: 1.05rem; color: #fff;
}
.admin-sheet.open .admin-group-label::after { transition: transform .16s ease; }
.admin-sheet.open .admin-group.open > .admin-group-label::after { transform: rotate(180deg); }
.admin-sheet.open .admin-group.on > .admin-group-label { text-decoration: none; font-weight: 700; }
.admin-sheet.open .admin-group > .admin-sub { padding: 0 0 10px; }
.admin-sheet.open .admin-group > .admin-sub a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 12px 14px; font-size: 1rem; border-radius: 8px;
}
.admin-sheet.open .admin-group > .admin-sub a.on { background: rgba(255, 255, 255, .1); text-decoration: none; color: #fff; }
.admin-sheet.open nav > .admin-link { border-bottom: 1px solid rgba(255, 255, 255, .12); padding: 13px 0; }
.admin-sheet.open .admin-who { padding: 14px 0 0; border-left: 0; }

@media (min-width: 860px) {
    .admin-toggle { display: none; }
    .admin-sheet { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

    /* A mouse opens a group by being over it; the click handler stays for
       keyboards and for a laptop's touchscreen. `focus-within` keeps the
       submenu open while somebody tabs through it. */
    .admin-group:hover > .admin-sub,
    .admin-group:focus-within > .admin-sub { display: block; }

    /* The gap between the label and the panel would close the menu mid-reach,
       so the panel starts at the bar rather than four pixels under it. */
    .admin-group::after { content: ""; position: absolute; top: 100%; left: 0; height: 6px; width: 100%; }

    .admin-group > .admin-sub {
        position: absolute; top: 100%; left: 0; z-index: 1210;
        min-width: 190px; padding: 6px 0; margin-top: 4px;
        background: var(--brand); border: 1px solid rgba(255, 255, 255, .18);
        border-radius: 10px; box-shadow: 0 10px 26px rgba(0, 0, 0, .28);
    }
    .admin-group > .admin-sub a {
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        padding: 8px 14px;
    }
    .admin-group > .admin-sub a:hover { background: rgba(255, 255, 255, .1); text-decoration: none; color: #fff; }
}

.admin-main { max-width: 1100px; margin: 0 auto; padding: 20px 18px 60px; }

.card {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 18px; margin: 0 0 18px;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }

/* Two columns while there is room for two; one job, one column, below that. */
.order-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.order-grid .card { margin: 0; }

/* Measuring the drives again: two buttons and the line that says what happened. */
.reprice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 6px; }
.reprice-status { width: 100%; margin: 2px 0 0; font-weight: 600; }
.reprice-status.is-busy { color: var(--soft); }
.reprice-status.is-ok { color: var(--ok); }
.reprice-status.is-warn { color: #854d0e; }
.reprice-status.is-bad { color: var(--err); }

/* The receipt behind a price: what was charged, why, and how much. */
.price-lines { width: 100%; border-collapse: collapse; margin: 4px 0 12px; }
.price-lines th { text-align: left; font-weight: 600; padding: 5px 10px 5px 0; }
.price-lines td { padding: 5px 0; vertical-align: baseline; }
.price-lines td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-lines .is-total th, .price-lines .is-total td {
    border-top: 1px solid var(--line); padding-top: 8px; font-weight: 700;
}

/* Every detail list in the back office is a label/value pair. */
.card dl { display: grid; grid-template-columns: 160px 1fr; gap: 6px 14px; margin: 0; }
.card dt { font-weight: 600; color: var(--soft); }
.card dd { margin: 0; }
@media (max-width: 620px) {
    .card dl { grid-template-columns: 1fr; }
    .card dd { margin-bottom: 8px; }
}

label { display: block; font-weight: 600; margin: 12px 0 6px; }
/* Every field a person types into, including the date and time ones — left out
   of this list they fall back to the browser's own control, half the height of
   the field beside them. */
input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"],
input[type="datetime-local"], input[type="month"], input[type="week"], select {
    width: 100%; max-width: 420px; min-height: 44px; padding: 10px 12px;
    font: inherit; border: 2px solid var(--line); border-radius: 10px; background: #fff;
}
input:focus, select:focus { outline: 3px solid #bfdbfe; outline-offset: 1px; }
.checkbox { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.checkbox input { width: 20px; height: 20px; min-height: 0; }
.hint { display: block; margin-top: 5px; font-size: .85rem; font-weight: 400; color: var(--soft); }

/* Fields side by side, each as wide as the column it lands in — not as wide as
   its own label happens to be. */
.field-grid { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.field-grid > label { margin: 0; }
.field-grid input, .field-grid select { max-width: none; }
.wide { display: block; margin: 16px 0 0; }
.wide input { max-width: 560px; }

/* One row of controls that belong to a single action. */
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 14px; }
.inline-form label { margin: 0; }
.inline-form .btn { margin-top: 0; }
.inline-form input, .inline-form select { max-width: 280px; }

.danger { border-top: 1px solid #fecaca; padding-top: 14px; margin-top: 18px; }

.actions > form { margin: 0 0 14px; }
.actions > form:last-child { margin-bottom: 0; }

fieldset { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; }
legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 6px; font-weight: 700; }

.state { padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #e2e8f0; color: var(--soft); }
.state-off { background: #e2e8f0; }
.state-half { background: #fef3c7; color: #854d0e; }
.state-on { background: #d1fae5; color: var(--ok); }
.secret-set { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 600; background: #d1fae5; color: var(--ok); }

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; margin-top: 14px; padding: 10px 20px;
    background: var(--accent); color: #442a02; border: 0; border-radius: 999px;
    font: inherit; font-weight: 700; cursor: pointer; text-decoration: none;
}
.btn-sm { min-height: 38px; padding: 6px 14px; }
/* The driver's decisive button: same colour, more weight, hard to miss with a
   glove on. */
.btn-lg { min-height: 56px; padding: 14px 32px; font-size: 1.05rem; }
.btn-accent { background: #f0a000; box-shadow: 0 2px 0 #b97800; }
.btn-ghost { background: #fff; color: var(--brand); border: 2px solid var(--line); box-shadow: none; }
.btn-danger { background: var(--err); color: #fff; }

/* A destructive-but-minor action reads as a link, not as a button. */
.linklike {
    margin-top: 14px; padding: 0; border: 0; background: none;
    font: inherit; color: var(--soft); text-decoration: underline; cursor: pointer;
}

.alert { border-radius: 10px; padding: 12px 14px; font-weight: 600; }
.alert-ok { background: #ecfdf5; color: var(--ok); }
.alert-error { background: #fef2f2; color: var(--err); }

.bolt-note { margin: 12px 0 0; padding: 10px 12px; border-left: 4px solid var(--accent); background: #fffbeb; }

.stats { display: grid; gap: 10px; margin: 0 0 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stats div { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.stats strong { display: block; font-size: 1.4rem; }
.stats span { color: var(--soft); font-size: .85rem; }

.filters { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 16px; align-items: end; }
.filters label { margin: 0; }
.filters select { min-width: 180px; }

.table-scroll { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.admin-table th, .admin-table td { padding: 11px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.admin-table thead th { background: #f1f5f9; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.admin-table .btn { margin-top: 0; }
/* Waiting for the desk reads louder than waiting for a driver: nobody else
   is going to pick it up. */
.admin-table tr.status-review { background: #fff7ed; box-shadow: inset 3px 0 0 var(--accent); }
.admin-table tr.status-pending { background: #fffbeb; }
.admin-table tr.status-offered, .admin-table tr.status-accepted, .admin-table tr.status-in_progress { background: #fff; }
.admin-table tr.status-completed, .admin-table tr.status-cancelled { color: var(--soft); }
.admin-table tr.inactive { color: var(--soft); background: #f8fafc; }
/* A table of inputs needs no horizontal scroll and no row padding to spare. */
.admin-table.compact { width: auto; min-width: 0; }
.admin-table.compact th, .admin-table.compact td { padding: 7px 10px; }
.admin-table.compact input { max-width: 220px; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #e2e8f0; }
.pill-review { background: #fed7aa; color: #7c2d12; }
.pill-pending { background: #fef3c7; }
.pill-offered { background: #ede9fe; }
.pill-accepted { background: #dbeafe; }
.pill-in_progress { background: #cffafe; }
.pill-completed { background: #d1fae5; }
.pill-cancelled { background: #e2e8f0; }
/* Booked for later: cool, quiet, and never the amber that means "now". */


/* The queue. One tap target per job, everything on it legible at arm's length. */
.job-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.job-row { border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.job-row > a {
    display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
    padding: 14px 16px; min-height: 60px; text-decoration: none; color: inherit;
}
.job-row > a:hover { background: #f8fafc; }
.job-row.is-rush { border-left: 5px solid var(--accent); }
.job-row.is-upcoming { border-left: 5px solid #a5b4fc; background: #fbfcff; }
.job-what { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.job-what strong { font-size: 1.05rem; }
.job-where { flex-basis: 100%; color: var(--soft); }
.job-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-left: auto; }
.job-price { font-size: 1.15rem; font-weight: 700; }
.job-when { color: var(--soft); font-size: .9rem; }
/* Ages itself once a minute; see assets/js/live.js. */
.job-age { color: var(--soft); font-size: .85rem; }
.job-list.done .job-row { background: #f8fafc; }
.job-list.done .job-price { font-weight: 600; color: var(--soft); }
.tag-rush { padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #fef3c7; color: #854d0e; }
/* Booked for later: cool, quiet, never the amber that means "now". */
.tag-upcoming { padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #e0e7ff; color: #3730a3; }
.tag-opens { padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; background: #eef2ff; color: #3730a3; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.timeline li { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.timeline li:last-child { padding-bottom: 0; border-bottom: 0; }
.timeline time { color: var(--soft); font-size: .9rem; }
.timeline span { grid-column: 2; }
@media (max-width: 620px) { .timeline li { grid-template-columns: 1fr; } .timeline span { grid-column: 1; } }

pre { background: #0f172a; color: #e2e8f0; padding: 12px 14px; border-radius: 10px; overflow-x: auto; }

body.admin-login { display: grid; place-items: center; min-height: 100vh; }
body.admin-login main { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 26px; width: min(380px, 92vw); }

/* A 64-character token has to be selectable on a phone, so it wraps anywhere. */
code.token { display: inline-block; margin: 6px 0; padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: #0f172a; color: #e2e8f0; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: .88rem; letter-spacing: .02em; word-break: break-all; overflow-wrap: anywhere; user-select: all; max-width: 100%; }

/* --- the catalogue screen ------------------------------------------------ */

/* One service is one form. Ruled rather than boxed: a card per service inside a
   card reads as a stack of lids. */
.svc-row { padding: 16px 0 10px; border-top: 1px solid var(--line); }
.svc-row.inactive { opacity: .62; }
.svc-flags { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.svc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; }
.svc-actions .btn { margin-top: 0; }
.svc-retire { margin: 0 0 4px; }
.svc-retire .linklike { margin-top: 0; }

.band-row .linklike { margin-top: 0; }
.band-drop { white-space: nowrap; }

.alert-warn { background: #fffbeb; color: #854d0e; }
.alert-info { background: #eef2ff; color: #3730a3; }

/* A count that is asking to be dealt with, not merely reporting. */
.stat-wants-you { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }

/* --- the dispatch desk and the checkup ----------------------------------- */

.page-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.page-actions .btn { margin-top: 0; }

/* The checkup card is the only thing that matters about an unread order, so it
   is the one card with an edge. */
.review-card { border-left: 4px solid var(--accent); }
.review-verdict {
    display: flex; flex-wrap: wrap; align-items: end; gap: 18px 28px;
    margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.review-verdict form { margin: 0; }
.review-verdict .hint { margin-left: 12px; display: inline; }
.review-verdict .danger { border-top: 0; padding-top: 0; margin-top: 0; }

.desk-form .card { margin-bottom: 14px; }

/* The suggestion list hangs under the address box rather than floating over the
   form: an operator on a laptop is reading both at once. */
/* What is still owed, and the filter that finds the late ones. */
.invoice-owed { margin: 0 0 10px; font-size: .95rem; }
.invoice-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }

/* The private customer's details, typed once on the job that needs them. */
.person-invoice { margin-top: 12px; }
.person-invoice .field-grid { margin-bottom: 12px; }

/* The destination, revealed when the work has two ends (D120). */
.desk-dropoff[hidden] { display: none; }
.desk-dropoff { margin-top: 12px; }

/* The map the job is placed on: click or drag the pin, and the address box
   follows it. The buttons above it say which end the next click moves. */
.desk-map-block { margin-top: 14px; }
.desk-map-targets { display: flex; gap: 6px; margin-bottom: 8px; }
.desk-map-targets [hidden] { display: none; }
.desk-map-block .hint { display: block; margin-top: 8px; }

.desk-pin span {
    display: flex; width: 26px; height: 26px; align-items: center; justify-content: center;
    border-radius: 50%; border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, .35);
    color: #fff; font-size: .8rem; font-weight: 700;
}
.desk-pin-address span { background: var(--accent); color: #442a02; }
.desk-pin-dropoff span { background: #0f172a; }

.desk-suggestions { list-style: none; margin: 6px 0 0; padding: 0; max-width: 560px;
    border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.desk-suggestions li + li { border-top: 1px solid var(--line); }
.desk-suggestions button {
    display: block; width: 100%; padding: 11px 13px; border: 0; background: none;
    font: inherit; text-align: left; cursor: pointer;
}
.desk-suggestions button:hover, .desk-suggestions button:focus { background: #f1f5f9; }

/* The checkup tab counts what is waiting on it. */
.tab-count {
    display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px;
    border-radius: 999px; background: var(--accent); color: #442a02;
    font-size: .78rem; font-weight: 700; text-align: center;
}

/* The job's legs. A numbered list, because the order they were driven in is
   half of what the reader is checking. */
.legs .muted { margin-bottom: 0; }
.leg-list { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: leg; }
.leg-row {
    position: relative; padding: 10px 0 10px 34px;
    border-top: 1px solid var(--line); counter-increment: leg;
}
.leg-row:first-child { border-top: 0; }
.leg-row::before {
    content: counter(leg); position: absolute; left: 0; top: 11px;
    width: 22px; height: 22px; border-radius: 999px; background: #f1f5f9;
    color: var(--soft); font-size: .78rem; font-weight: 700; line-height: 22px; text-align: center;
}
/* The one still being driven is the one the reader is looking for. */
.leg-open::before { background: var(--accent); color: #442a02; }
.leg-where { margin: 0; font-weight: 600; }
.leg-when { margin: 2px 0 0; color: var(--soft); font-size: .9rem; }
.leg-km { margin-left: 8px; font-weight: 700; color: var(--ink); }
/* A leg whose two measurements disagree is not an error — it is a question. */
.leg-flag {
    margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 600;
}
.leg-edited {
    margin-left: 8px; padding: 1px 8px; border-radius: 999px;
    background: #e2e8f0; color: var(--soft); font-size: .75rem; font-weight: 600;
}
/* On the admin's card the flag is a paragraph rather than a pill: there is room
   to say what disagreed, and a number nobody explains starts the dispute. */
.leg-flagged { background: #fffbeb; }
.leg-flagged .leg-flag {
    display: block; margin: 6px 0 0; padding: 6px 10px; border-radius: 4px;
}
.leg-total { margin: 4px 0 12px; font-size: .95rem; }
/* Drawn only after an operator asks for it; nothing is fetched before that. */
.track-map { height: 340px; margin: 12px 0; border: 1px solid var(--line); border-radius: 4px; }


/* The customer's own hand, kept small: it is evidence, not a picture. */
.signature-image {
    display: block; max-width: 320px; width: 100%; height: auto;
    margin: 4px 0 8px; padding: 8px;
    background: #fff; border: 1px solid var(--line); border-radius: 4px;
}
/* A named reason is evidence too; an unexplained gap is not. */
.signature-missing { margin: 4px 0; color: var(--soft); }
.signature-note { margin: 0 0 12px; }

/* --- the invoice document ------------------------------------------------ */

.invoice-sheet { max-width: 52rem; }
.invoice-head { display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.invoice-seller, .invoice-buyer { line-height: 1.5; }
.invoice-buyer { margin: 18px 0; }
.invoice-meta h2 { margin: 0 0 6px; }
.invoice-meta dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; }
.invoice-meta dt { color: var(--soft); }
.invoice-meta dd { margin: 0; text-align: right; }
.invoice-ride, .invoice-lines { width: 100%; border-collapse: collapse; margin: 8px 0 20px; }
.invoice-ride th, .invoice-ride td,
.invoice-lines th, .invoice-lines td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.invoice-lines td:last-child, .invoice-lines th:last-child { text-align: right; }
.invoice-total th, .invoice-total td { font-weight: 700; border-bottom: none; }
.invoice-pay { border-top: 2px solid var(--line); padding-top: 14px; }
.invoice-warn { color: var(--err); font-weight: 600; }
.invoice-void { color: var(--err); font-size: 1.4rem; font-weight: 800; letter-spacing: .18em; margin: 0 0 12px; }
.invoice-line { margin: 10px 0 0; }
.is-overdue { color: var(--err); font-weight: 600; }

/* The send control: two addresses and a choice of channel, on one line where
   there is room and stacked where there is not. */
.send-link { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.send-link label { display: block; }
.send-channels { display: flex; gap: 12px; align-items: center; border: 0; padding: 0; margin: 0; }
.send-channels legend { float: left; margin-right: 8px; padding: 0; font-size: 13px; }

/* A stretch the van spent with no holder. Set back, because it is the absence
   of a driver rather than a driver's row. */
.is-unheld td { background: var(--ground-deep, #f1f5f9); font-style: italic; }
.invoice-ride-cell { display: flex; flex-direction: column; gap: 2px; font-size: .85em; }

@media print {
    .no-print, .admin-bar, .admin-sheet { display: none !important; }
    body { background: #fff; }
    .invoice-sheet { border: none; box-shadow: none; max-width: none; padding: 0; }

    /* The receiver sits where a C5 window expects it (SFS 2487), so a folded
       A4 can go straight into a window envelope without a label. */
    @page { size: A4; margin: 12mm 15mm; }
    .invoice-buyer {
        position: absolute;
        top: 33mm;
        left: 20mm;
        width: 80mm;
        font-size: 11pt;
        line-height: 1.35;
    }
    .invoice-sheet { padding-top: 62mm; }
}

/* --- the edit lock -------------------------------------------------------- */

.lock-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lock-bar p { margin: 0; }
.lock-bar.is-mine { border-left: 4px solid var(--ok); }
.lock-bar.is-held { border-left: 4px solid var(--err); }
[disabled] { opacity: .55; cursor: not-allowed; }

/* --- the driver's shift --------------------------------------------------- */

.shift-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.shift-bar p { margin: 0; }
.shift-bar.is-on { border-left: 4px solid var(--ok); }
.shift-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* --- the fleet ------------------------------------------------------------ */

.km-months { list-style: none; margin: 0; padding: 0; }
.km-months li { display: grid; grid-template-columns: 5rem 1fr 6rem; gap: 10px; align-items: center; margin-bottom: 4px; }
.km-month { color: var(--soft); font-variant-numeric: tabular-nums; }
.km-bar { background: var(--accent); height: 12px; border-radius: 2px; min-width: 2px; }
.km-value { text-align: right; font-variant-numeric: tabular-nums; }
.vehicle-pick { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

/* --- the dispatcher's map ------------------------------------------------- */

.map-list { list-style: none; margin: 0; padding: 0; }
.map-list li { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
               padding: 8px 0; border-bottom: 1px solid var(--line); }
.map-who { display: flex; flex-direction: column; }
.map-what { white-space: nowrap; }
.map-fix { white-space: nowrap; font-size: .87rem; }
.map-van.state-on_job { border-left: 3px solid var(--accent); padding-left: 8px; }
.map-van.state-on_break { border-left: 3px solid var(--soft); padding-left: 8px; }
.map-van.state-free { border-left: 3px solid var(--ok); padding-left: 8px; }
.map-job.is-rush .map-who strong { color: var(--err); }

/* One driver's shift under the map: the bar is the whole shift to scale, so a
   glance says how much of it was driving. */
.driver-track { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.driver-track[hidden] { display: none; }
.driver-track-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 8px; }
.driver-track-head .btn { margin-left: auto; }

.driver-stripe { display: flex; height: 18px; border-radius: 9px; overflow: hidden;
                 background: var(--line); }
.stripe-part { display: block; min-width: 2px; }
.stripe-job { background: var(--accent); }
.stripe-break { background: var(--soft); }
.stripe-free { background: var(--ok); }

/* The live job's three points are labelled on the map itself: a dispatcher
   should not have to hover to see which end is which. */
.place-tip { font-size: .78rem; font-weight: 600; padding: 2px 6px; }

/* The van's own bearing, drawn at the van. */
.van-heading span { display: block; width: 34px; height: 34px; line-height: 34px;
    text-align: center; font-size: 1.5rem; color: #0f766e;
    text-shadow: 0 0 3px #fff, 0 0 6px #fff; transform-origin: 50% 50%; }
.van-heading { margin-top: -12px; }

/* The picked driver, as boxes rather than a paragraph: a dispatcher on the
   phone reads colour before he reads words. */
.driver-cards { display: grid; gap: 8px; margin-bottom: 12px;
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); }
.driver-card { padding: 9px 11px; border-radius: 10px; border-left: 4px solid var(--line);
    background: #f8fafc; display: flex; flex-direction: column; gap: 2px; }
.card-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.card-value { font-size: .98rem; line-height: 1.25; }
.card-note { font-size: .8rem; color: #64748b; }

.tone-job { border-left-color: var(--accent); background: #fffaf0; }
.tone-break { border-left-color: var(--soft); background: #f8fafc; }
.tone-free { border-left-color: var(--ok); background: #f3fbf5; }
.tone-drop { border-left-color: #0f766e; background: #f0fdfa; }
.tone-fresh { border-left-color: var(--ok); background: #f3fbf5; }
.tone-late { border-left-color: var(--err); background: #fef2f2; }
.tone-plain { border-left-color: #94a3b8; }

/* A van in the list is one press, not three links. */
.van-card { display: flex; flex-direction: column; gap: 6px; width: 100%; padding: 8px 10px;
    border: 1px solid var(--line); border-radius: 10px; background: #fff;
    font: inherit; text-align: left; cursor: pointer; }
.van-card:hover, .van-card:focus { border-color: var(--accent); background: #fffaf0; }
.van-top { display: flex; gap: 8px; align-items: baseline; }
.van-tags { display: flex; flex-wrap: wrap; gap: 5px; }

.tag { display: inline-block; padding: 2px 8px; border-radius: 999px;
    font-size: .76rem; font-weight: 700; background: #e2e8f0; color: #1f2933; }
.tag-on_job { background: var(--accent); color: #442a02; }
.tag-on_break { background: #e0e7ff; color: #312e81; }
.tag-free { background: #dcfce7; color: #14532d; }
.tag-job { background: #f1f5f9; color: #0f172a; }
.tag-fresh { background: #dcfce7; color: #14532d; }
.tag-late { background: #fee2e2; color: #7f1d1d; }
.tag-dark { background: #1f2933; color: #fff; }


/* --- the worker's page ---------------------------------------------------
   One person, one screen: the contract, the wage, the hours, the absences, the
   pay and the vans. Every section is a .card; these are the parts inside them
   that the rest of the back office did not already have. */

.worker-head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; }
.worker-head p { margin: 6px 0 0; }

.tag {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: .8rem; font-weight: 600; line-height: 1.5;
}
.tag-on      { background: #e3f3e6; color: #1d5e2b; }
.tag-soon    { background: #fdf0d8; color: #7a5310; }
.tag-off     { background: #f1e2e2; color: #7b2222; }
.tag-unknown { background: #eceff2; color: #4c5966; }

.fact-row { display: flex; flex-wrap: wrap; gap: 18px 28px; margin: 0 0 14px; }
.fact { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.fact-label { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }

.stack-form { display: flex; flex-direction: column; gap: 12px; }
.field-row { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; }
.field-row label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }

/* The payslip document, printed and on screen from one renderer. */
.payslip { max-width: 720px; }
.payslip-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; }
.payslip-head h2 { margin: 0; }
.payslip-parties { display: flex; gap: 32px; flex-wrap: wrap; font-size: .9rem; }
.payslip-lines, .payslip-totals { width: 100%; border-collapse: collapse; margin: 16px 0; }
.payslip-lines th, .payslip-lines td, .payslip-totals th, .payslip-totals td {
    padding: 7px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top;
}
.payslip-totals th { font-weight: 400; color: var(--ink); }
.payslip-totals td { text-align: right; white-space: nowrap; }
.payslip-net th, .payslip-net td { font-weight: 700; border-top: 2px solid var(--ink); }
.payslip-barcode {
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: .8rem; word-break: break-all; color: var(--soft);
}


/* --- the work schedule ---------------------------------------------------
   A week as a grid: a row per driver, a column per day. It scrolls sideways
   inside .table-scroll on a phone rather than reflowing, because a week that
   reflows is not a week any more. */

.schedule-grid th, .schedule-grid td { vertical-align: top; }
.schedule-cell { min-width: 118px; }
.schedule-plan {
    display: flex; flex-direction: column; gap: 2px;
    padding: 6px 0; border-bottom: 1px dashed var(--line);
}
.schedule-plan:last-child { border-bottom: 0; }
.schedule-time { font-variant-numeric: tabular-nums; }

/* Scrolling down the drivers and across the week keeps both labels on screen —
   which is what makes "whose shift ends as whose starts" readable. */
.schedule-scroll { max-height: 70vh; overflow: auto; }
.schedule-grid thead th { position: sticky; top: 0; z-index: 3; background: #f8fafc; }
.schedule-who, .schedule-grid thead th:first-child {
    position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 1px 0 0 var(--line);
}
.schedule-grid thead th:first-child { z-index: 4; background: #f8fafc; }

.schedule-cell { cursor: cell; }
.schedule-cell:empty::after { content: "+"; color: var(--soft); font-size: 1.1rem; }
.schedule-cell:focus { outline: 3px solid #bfdbfe; outline-offset: -3px; }
.schedule-cell.is-picked { background: #eff6ff; box-shadow: inset 0 0 0 2px #93c5fd; }
.schedule-plan { position: relative; }
.schedule-drop {
    position: absolute; top: 2px; right: 0;
    border: 0; background: transparent; color: var(--soft);
    font-size: 1rem; line-height: 1; cursor: pointer; padding: 2px 4px;
}
.schedule-drop:hover { color: var(--err); }
.schedule-sum { white-space: nowrap; }
.schedule-help { margin: 0 0 10px; }

/* The panel a cell opens: the presses, and nothing else. */
.schedule-panel {
    margin-top: 14px; padding: 14px 16px;
    border: 1px solid var(--line); border-radius: 12px; background: #f8fafc;
}
.schedule-panel-head { margin: 0 0 10px; font-weight: 700; }
.schedule-panel-msg { margin: 8px 0 0; }
.schedule-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 40px; padding: 8px 14px;
    border: 2px solid var(--line); border-radius: 999px; background: #fff;
    font: inherit; font-weight: 600; cursor: pointer;
}
.chip:hover { border-color: var(--brand); }
.chip-plain { font-weight: 500; }
.chip-note { color: var(--soft); font-size: .8rem; font-weight: 400; }
.schedule-own { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-top: 6px; }
.schedule-own label { margin: 0; }
.preset-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.preset-actions .inline-form { margin: 0; }

/* The driver's own copy of the same thing, as a list. */
.plan-list { list-style: none; margin: 0; padding: 0; }
.plan-list li {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 9px 0; border-bottom: 1px solid var(--line);
}
.plan-list li:last-child { border-bottom: 0; }

/* A checkbox that reads as one thing with its words. */
.check { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.check input { margin: 0; }


/* --- the dispatcher's map ------------------------------------------------
   The codex map widget draws a pin (.bp-pin) and ships no styling of its own,
   which is Rule 7 working as intended: the structure is the module's, the look
   is this project's. Without these rules a van marker is an unsized image. */

.bp-pin { display: block; width: 44px; height: 52px; }
.bp-pin-face {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; margin: 0 auto;
    background: #fff; border: 2px solid var(--brand); border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
}
.bp-pin-face::after {
    content: ""; position: absolute; margin-top: 44px;
    border: 6px solid transparent; border-top-color: var(--brand);
}
.bp-pin-img { width: 26px; height: 26px; object-fit: contain; }
.bp-pin-initials { font-size: .8rem; font-weight: 700; color: var(--brand); }

/* The van popup is four short lines, and it says them on four lines. */
.leaflet-popup-content { white-space: pre-line; line-height: 1.45; }

/* What the desk did to a driver's jobs while he was not looking. Above the
   queue, because being given a job is the one thing he did not press a button
   to cause. An edit lists what moved, old beside new. */

.notice-stack { display: grid; gap: 12px; margin-bottom: 16px; }
.notice-card {
    padding: 16px 18px; border-radius: 12px;
    background: #fffbeb; border-left: 6px solid var(--brand);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}
.notice-assigned { background: #ecfdf5; border-left-color: var(--ok); }
.notice-unassigned { background: #fef2f2; border-left-color: var(--err); }
.notice-edited { background: #fffbeb; border-left-color: var(--brand); }
.notice-head { margin: 0 0 6px; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .02em; }
.notice-what { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.notice-changes { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.notice-changes li { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.notice-field { min-width: 9rem; font-weight: 700; }
.notice-was { text-decoration: line-through; color: var(--soft); }
.notice-now { font-weight: 700; }
.notice-acts { display: flex; gap: 10px; align-items: center; margin-top: 12px; }

/* The pricing screens: a card, its hours and its steps. Wide rows rather than
   a grid of tiny inputs, because these are typed rarely and read often. */

.ratecard-grid { display: grid; gap: 16px; }
.ratecard-scope { font-size: .8rem; font-weight: 700; text-transform: uppercase; color: var(--soft); }
.window-row, .tier-row {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 8px 0; border-bottom: 1px solid var(--line);
}
.window-row input, .tier-row input { max-width: 9rem; }

/* ---- Shared page furniture: head row, disclosure, tabs, search, KPIs, pager ---- */

.order-grid { margin-bottom: 18px; }

.page-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: -6px 0 16px; }
.page-head .btn { margin-top: 0; }
.page-head-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.back-link { display: inline-block; margin: -8px 0 12px; font-size: .9rem; }

/* Rarely-used forms stay shut until asked for. */
.reveal { margin: 0 0 18px; }
.reveal > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.reveal > summary::-webkit-details-marker { display: none; }
.reveal > summary.btn { margin-top: 0; }
.reveal > summary::before { content: "+"; font-weight: 800; }
.reveal[open] > summary::before { content: "–"; }
.reveal-body { margin-top: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.card .reveal-body { border: 0; padding: 4px 0 0; }
.reveal-inline > summary { color: var(--brand); font-weight: 600; text-decoration: underline; }
.reveal-inline > summary::before, .reveal-inline[open] > summary::before { content: none; }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 2px solid var(--line); margin: 0 0 18px; }
.tabs a { padding: 10px 14px; text-decoration: none; color: var(--soft); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -2px; display: inline-flex; gap: 6px; align-items: center; }
.tabs a:hover { color: var(--ink); }
.tabs a.on { color: var(--brand); border-bottom-color: var(--accent); }
.tab-num { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #eef2f7; color: var(--ink); font-size: .78rem; text-align: center; }
.tab-num.is-hot { background: var(--accent); color: #442a02; }

.searchbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin: 0 0 16px; }
.searchbar label { margin: 0; }
.searchbar .search-q { flex: 1 1 260px; }
.searchbar .search-q input { width: 100%; }
.searchbar .btn { margin-top: 0; }
.search-count { margin: -6px 0 12px; }

.kpis { display: grid; gap: 10px; margin: 0 0 18px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.kpi { display: block; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; color: var(--ink); text-decoration: none; }
a.kpi:hover { border-color: var(--accent); }
.kpi.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.kpi strong { display: block; font-size: 1.35rem; line-height: 1.2; }
.kpi span { color: var(--soft); font-size: .82rem; }
.kpi.is-warn strong { color: #b45309; }
.kpi.is-bad strong { color: var(--err); }
.kpi.is-good strong { color: var(--ok); }

.pager { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 14px 0 0; }
.pager .btn { margin-top: 0; }

.admin-table tr.row-link { cursor: pointer; }
.admin-table tr.row-link:hover td { background: #f8fafc; }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.price-missing { color: var(--err); font-weight: 600; }
.empty { padding: 28px 12px; text-align: center; color: var(--soft); }

/* Accordion rows: one per person, the summary line carries what matters. */
.acc { background: #fff; border: 1px solid var(--line); border-radius: 12px; margin: 0 0 8px; }
.acc > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; padding: 12px 16px; }
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary::after { content: "▾"; margin-left: auto; color: var(--soft); transition: transform .15s; }
.acc[open] > summary::after { transform: rotate(180deg); }
.acc[open] > summary { border-bottom: 1px solid var(--line); }
.acc-name { font-weight: 700; min-width: 160px; }
.acc-meta { color: var(--soft); font-size: .88rem; }
.acc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.acc-money { font-weight: 700; font-variant-numeric: tabular-nums; }
.acc-body { padding: 14px 16px 16px; }

/* A month at a glance: one square per day, coloured by how that day stands. */
.mini-cal { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 4px; margin: 0 0 10px; }
.mc-day { border-radius: 6px; background: #f1f5f9; padding: 4px 2px; text-align: center; font-size: .72rem; line-height: 1.25; color: var(--soft); border: 1px solid transparent; }
.mc-day b { display: block; font-size: .8rem; color: var(--ink); }
.mc-day.is-weekend { background: #f8fafc; }
.mc-day.st-confirmed { background: #dcfce7; border-color: #86efac; }
.mc-day.st-edited { background: #e0e7ff; border-color: #a5b4fc; }
.mc-day.st-open { background: #fef3c7; border-color: #fcd34d; }
.mc-day.st-running { background: #fff7ed; border-color: #fb923c; }
.mc-day.st-missing { background: #fee2e2; border-color: #fca5a5; }
.mc-day.st-absent { background: #f3e8ff; border-color: #d8b4fe; }
.mc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .8rem; color: var(--soft); margin: 0 0 14px; }
.mc-legend span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: #f1f5f9; }
.mc-legend .st-confirmed::before { background: #86efac; }
.mc-legend .st-edited::before { background: #a5b4fc; }
.mc-legend .st-open::before { background: #fcd34d; }
.mc-legend .st-running::before { background: #fb923c; }
.mc-legend .st-missing::before { background: #fca5a5; }
.mc-legend .st-absent::before { background: #d8b4fe; }

.day-cell { white-space: nowrap; font-weight: 600; }
.was { color: var(--soft); text-decoration: line-through; font-size: .85rem; margin-right: 4px; }
.day-note { display: block; font-size: .82rem; color: #3730a3; }

.bulk-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; padding: 12px 16px; margin: 0 0 14px; background: #eef2ff; border-radius: 12px; }
.bulk-bar .btn { margin-top: 0; }
.bulk-bar form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bulk-bar label { margin: 0; }

.breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 0 0 12px; }
.breakdown div { background: #f8fafc; border-radius: 8px; padding: 8px 10px; }
.breakdown span { display: block; font-size: .78rem; color: var(--soft); }
.breakdown strong { font-variant-numeric: tabular-nums; }
.breakdown .is-net { background: #ecfdf5; }
.barcode-line { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; word-break: break-all; background: #f8fafc; padding: 8px 10px; border-radius: 8px; }
.blockers { margin: 0 0 12px; padding-left: 20px; color: #854d0e; }

.service-log { list-style: none; margin: 0; padding: 0; }
.service-log li { border-top: 1px solid var(--line); padding: 10px 0; display: grid; grid-template-columns: 110px 1fr auto; gap: 4px 14px; align-items: start; }
.service-log li:first-child { border-top: 0; }
.service-log p { margin: 2px 0 0; white-space: pre-line; }
.service-log .btn { margin-top: 0; }
@media (max-width: 620px) { .service-log li { grid-template-columns: 1fr; } }
.gap-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gap-quick .btn { margin-top: 0; }
.gap-quick input { max-width: 12rem; }
textarea { width: 100%; min-height: 90px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 10px; font: inherit; }
.is-unheld td .btn, .is-unheld td input { font-style: normal; }
.mc-day.st-none { opacity: .75; }

.mc-day.st-locked { background: #ecfdf5; border-color: #a7f3d0; }
.mc-legend .st-locked::before { background: #a7f3d0; }
.searchbar label:not(.check) { display: flex; flex-direction: column; gap: 4px; }
.acc-body .admin-table { width: 100%; }
.acc-body .page-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-top: 12px; }
.acc-body .page-actions .btn, .acc-body .page-actions summary.btn { margin-top: 0; }
.acc-body .page-actions .reveal { margin: 0; }
.next-day { font-size: .75rem; color: var(--soft); vertical-align: super; }
.stack-gap > * + * { margin-top: 10px; }
.invoice-job th { text-align: left; padding-top: 12px; font-size: .88rem; color: var(--soft); border-bottom: 1px solid var(--line); }
.toast-stack { position: fixed; right: 16px; bottom: 16px; z-index: 1500; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.toast { padding: 12px 16px; border-radius: 10px; font-weight: 600; box-shadow: 0 6px 20px rgba(15, 23, 42, .18); animation: toast-in .18s ease-out; }
.toast-ok { background: #ecfdf5; color: var(--ok); border: 1px solid #a7f3d0; }
.toast-bad { background: #fef2f2; color: var(--err); border: 1px solid #fecaca; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
body.is-saving { cursor: progress; }
.coverage { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.coverage legend { width: 100%; font-weight: 600; margin-bottom: 4px; }
.coverage .hint { width: 100%; }
.payer-request { border-left: 3px solid var(--signal, #e8a33d); padding: 8px 12px; margin: 0 0 14px; background: #fffaf0; }
.payer-request p { margin: 0 0 6px; }

/* A catalogue row closed to one line; "Muokkaa" opens its form. */
.edit-item { border-top: 1px solid var(--line); }
.edit-item.inactive > summary { opacity: .62; }
.edit-item > summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 0; list-style: none; cursor: pointer;
}
.edit-item > summary::-webkit-details-marker { display: none; }
.edit-item-main { display: flex; flex-direction: column; min-width: 0; }
.edit-item-btn { flex: 0 0 auto; margin-top: 0; }
.edit-item[open] > summary .edit-item-btn { background: var(--brand); color: #fff; border-color: var(--brand); }
.edit-item[open] { padding-bottom: 12px; }
.edit-item .svc-row { border-top: 0; padding-top: 4px; }

/* Milloin (D146): three kinds as a segmented row; the fields each kind needs. */
.desk-when { margin: 16px 0; }
.desk-when [hidden] { display: none; }
.desk-when-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.desk-when-kind { margin: 0; }
.desk-when-kind input { position: absolute; opacity: 0; pointer-events: none; }
.desk-when-kind span {
    display: inline-block; padding: 8px 16px; border: 2px solid var(--line); border-radius: 999px;
    background: #fff; cursor: pointer; font-weight: 600;
}
.desk-when-kind input:checked + span { border-color: var(--brand); background: var(--brand); color: #fff; }
.desk-when-kind input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.desk-when-priority { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 6px 0 10px; }
.desk-when-priority input { width: auto; margin: 0; }
.desk-when-priority .hint { flex-basis: 100%; margin: 0; }
.desk-when[data-kind="rush"] .desk-when-priority:has(input:checked) { color: var(--err); }
.desk-when-fields { margin-bottom: 6px; }
.desk-when-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.desk-when-quick .btn { padding: 4px 10px; }

/* The live price beside the offer box. */
.desk-estimate { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.desk-estimate.is-busy { opacity: .6; }
.desk-estimate-empty { margin: 0; }
.desk-estimate-body[hidden], .desk-estimate [hidden] { display: none; }
.desk-estimate-total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; font-size: 1.1rem; }
.desk-estimate-total strong { font-size: 1.4rem; }
.desk-estimate-offer { margin: 6px 0 0; font-weight: 600; color: var(--brand); }

/* Key-value facts (Päivitykset, Vuoroviikari link). */
.kv { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0 0 14px; }
.kv dt { font-size: .8rem; color: var(--muted, #6b7280); font-weight: 600; margin-top: 8px; }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (min-width: 720px) { .kv { grid-template-columns: 200px 1fr; } .kv dt { margin-top: 0; } }