/* FarmTrackerPro: mobile-first styles. No framework. */
:root {
    --bg: #f3f5f7;
    --surface: #ffffff;
    --surface-2: #f8fafb;
    --text: #1b242c;
    --muted: #5c6a76;
    --border: #d9e0e6;
    --field: #ffffff;
    --field-border: #a9b4bd;
    --neutral: #e3e8ec;
    --neutral-soft: #e6ebef;
    --neutral-text: #3b4752;
    --brand: #1f2a33;
    --brand-text: #ffffff;
    --brand-fade: rgba(31, 42, 51, 0);
    --chip-on: #1f2a33;
    --accent: #2e6b1f;
    --accent-hover: #255a18;
    --accent-ink: #2e6b1f;
    --accent-soft: #eef6ea;
    --accent-line: #a9cf9b;
    --accent-deep: #1f4a14;
    --danger: #b00020;
    --danger-fill: #b00020;
    --danger-soft: #fdecee;
    --danger-line: #e3a6b0;
    --danger-deep: #7a0016;
    --required: #8b0000;
    --warn: #8a5a00;
    --warn-soft: #fff4dc;
    --warn-line: #ecd08f;
    --info: #1f5f99;
    --info-fill: #1f5f99;
    --info-soft: #e8f1fa;
    --info-line: #a8c8e6;
    --info-deep: #174a78;
    /* Scanned paperwork, rate cons, barcodes and PDF pages stay on white paper in both themes. */
    --paper: #ffffff;
    --radius: 10px;
    --shadow: 0 1px 2px rgba(16, 24, 32, .06), 0 2px 8px rgba(16, 24, 32, .05);
    --menu-shadow: 0 6px 18px rgba(20, 30, 40, .16);
    --tap: 46px;
    color-scheme: light;
}
/* Dark colors: used on screen when the device is set to dark (Theme: Auto) or
   when someone picks Theme: Dark. The two blocks must stay the same. Printing
   always uses the light colors. */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #11171c;
        --surface: #1a2229;
        --surface-2: #212b33;
        --text: #e3e9ee;
        --muted: #9eabb6;
        --border: #33414d;
        --field: #121a20;
        --field-border: #4a5a67;
        --neutral: #34424e;
        --neutral-soft: #2c3842;
        --neutral-text: #cfd8df;
        --brand: #0e1418;
        --brand-text: #ffffff;
        --brand-fade: rgba(14, 20, 24, 0);
        --chip-on: #3a7f28;
        --accent: #3a7f28;
        --accent-hover: #46922f;
        --accent-ink: #7fc96a;
        --accent-soft: #1d2e1a;
        --accent-line: #3d6a30;
        --accent-deep: #b6e3a6;
        --danger: #ff8a96;
        --danger-fill: #c62a3f;
        --danger-soft: #3a1c21;
        --danger-line: #7a3540;
        --danger-deep: #ffc2c9;
        --required: #ff7676;
        --warn: #f0c060;
        --warn-soft: #362b14;
        --warn-line: #6e5520;
        --info: #78b6f0;
        --info-fill: #2d6fae;
        --info-soft: #172a3d;
        --info-line: #33587c;
        --info-deep: #b7d8f7;
        --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
        --menu-shadow: 0 6px 18px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}
@media screen {
    :root[data-theme="dark"] {
        --bg: #11171c;
        --surface: #1a2229;
        --surface-2: #212b33;
        --text: #e3e9ee;
        --muted: #9eabb6;
        --border: #33414d;
        --field: #121a20;
        --field-border: #4a5a67;
        --neutral: #34424e;
        --neutral-soft: #2c3842;
        --neutral-text: #cfd8df;
        --brand: #0e1418;
        --brand-text: #ffffff;
        --brand-fade: rgba(14, 20, 24, 0);
        --chip-on: #3a7f28;
        --accent: #3a7f28;
        --accent-hover: #46922f;
        --accent-ink: #7fc96a;
        --accent-soft: #1d2e1a;
        --accent-line: #3d6a30;
        --accent-deep: #b6e3a6;
        --danger: #ff8a96;
        --danger-fill: #c62a3f;
        --danger-soft: #3a1c21;
        --danger-line: #7a3540;
        --danger-deep: #ffc2c9;
        --required: #ff7676;
        --warn: #f0c060;
        --warn-soft: #362b14;
        --warn-line: #6e5520;
        --info: #78b6f0;
        --info-fill: #2d6fae;
        --info-soft: #172a3d;
        --info-line: #33587c;
        --info-deep: #b7d8f7;
        --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .25);
        --menu-shadow: 0 6px 18px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
}
a { color: var(--info); }
h1 { font-size: 1.45rem; margin: 0 0 .25rem; line-height: 1.2; }
h2 { font-size: 1.1rem; margin: 1.25rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1rem 0 .5rem; }
p { margin: .4rem 0; }
small, .small { font-size: .85rem; }
.muted { color: var(--muted); }
.icon { flex: none; vertical-align: middle; }
[hidden] { display: none !important; }

/* ---- Top bar and navigation ---- */
.topbar {
    position: sticky; top: 0; z-index: 20;
    display: flex; align-items: center; gap: 10px;
    min-height: 56px; padding: 0 12px;
    padding-top: env(safe-area-inset-top);
    background: var(--brand); color: var(--brand-text);
}
.brand { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; font-weight: 700; font-size: 1.1rem; }
.tenant { display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: .85rem; opacity: .8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50vw; }
/* Phones: the menu is a full-width strip under the bar that swipes sideways
   from edge to edge. Desktop: the same links sit inline in the bar. */
.topbar { flex-wrap: wrap; }
.mainnav {
    order: 1; flex: 0 0 auto; width: calc(100% + 24px); margin: 0 -12px;
    display: flex; align-items: center; gap: 4px;
    padding: 6px 12px 8px; border-top: 1px solid rgba(255,255,255,.12);
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 12px;
    scrollbar-width: none;
}
.mainnav::-webkit-scrollbar { display: none; }
/* Slide buttons: when more links sit off one side of the strip, a button
   fades in at that edge and scrolls the strip a page that way on a tap.
   app.js sets more-left / more-right as it scrolls and does the scrolling.
   The buttons are sticky so they stay pinned to the edges; the negative
   margin (button width + gap) keeps them from taking room in the row. */
.nav-scroll {
    position: sticky; z-index: 1; flex: none; align-self: stretch;
    display: flex; align-items: center; box-sizing: border-box; width: 28px; margin: -6px -32px -8px 0;
    padding: 0; border: 0; font-family: inherit; font-size: 1.35rem; line-height: 1;
    color: rgba(255,255,255,.75); cursor: pointer;
    pointer-events: none; opacity: 0; transition: opacity .2s;
}
.nav-scroll-left {
    left: -12px; padding-left: 4px; justify-content: flex-start;
    background: linear-gradient(to right, var(--brand) 40%, var(--brand-fade));
}
.nav-scroll-right {
    right: -12px; margin: -6px 0 -8px -32px; padding-right: 4px; justify-content: flex-end;
    background: linear-gradient(to left, var(--brand) 40%, var(--brand-fade));
}
.mainnav.more-left .nav-scroll-left, .mainnav.more-right .nav-scroll-right { opacity: 1; pointer-events: auto; }
.mainnav a, .mainnav .linkish {
    flex: none; display: flex; align-items: center; gap: 6px; white-space: nowrap;
    padding: 8px 12px; border-radius: 999px; scroll-snap-align: start;
    color: #dfe6ec; text-decoration: none; font-size: .95rem;
    border: 0; background: rgba(255,255,255,.06); cursor: pointer; font-family: inherit;
}
.mainnav a:hover, .mainnav .linkish:hover { background: rgba(255,255,255,.12); color: #fff; }
.mainnav a.active { background: var(--accent); color: #fff; font-weight: 700; }
/* How many customer conversations wait on the office (Messages). */
.nav-count { display: inline-block; min-width: 1.4em; padding: 0 .4em; margin-left: .3em; border-radius: 999px; background: #d9534f; color: #fff; font-size: .75em; font-weight: 700; line-height: 1.5; text-align: center; vertical-align: .1em; }
.mainnav small { color: #b6c2cc; font-weight: 400; }
.mainnav a.active small { color: inherit; }
.nav-user { flex: none; display: flex; align-items: center; gap: 4px; margin-left: 8px; }
.nav-user form { margin: 0; }
/* Every role (admin, dispatcher, driver) gets this same menu; only the
   links in it differ. bin/check-menus.php keeps it that way. */

/* A menu group (Fleet): the link opens the group's own page, and with a
   mouse, hovering it (or tabbing into it) drops down the links under it.
   The drop is position: fixed so the scrolling menu strip can't clip it;
   app.js puts it under the link. Touch screens get no drop: a tap goes
   straight to the group's page, which has the same links. */
.nav-group { flex: none; display: flex; }
.nav-caret { font-size: .7rem; opacity: .7; margin-left: -2px; }
.nav-drop { display: none; }
@media (hover: hover) and (pointer: fine) {
    .nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop {
        position: fixed; z-index: 40; display: flex; flex-direction: column; gap: 2px;
        min-width: 180px; padding: 6px; border-radius: 10px;
        background: var(--brand); box-shadow: 0 8px 24px rgba(0,0,0,.28);
        border: 1px solid rgba(255,255,255,.12);
    }
    .mainnav .nav-drop a { border-radius: 6px; background: transparent; padding: 9px 12px; scroll-snap-align: none; }
    .mainnav .nav-drop a:hover, .mainnav .nav-drop a:focus-visible { background: rgba(255,255,255,.12); }
    .mainnav .nav-drop a.active { background: var(--accent); }
}

/* Wide screens have room for the whole office menu inline in the bar;
   narrower desktops keep the full-width strip so no link hides off the edge. */
@media (min-width: 1200px) {
    .mainnav { gap: 2px; }
    .mainnav a, .mainnav .linkish { padding: 8px 9px; }
}
@media (min-width: 1760px) {
    .topbar { flex-wrap: nowrap; }
    .tenant { margin-left: 0; padding-left: 12px; border-left: 1px solid rgba(255,255,255,.25); max-width: 40vw; }
    .mainnav {
        order: 0; flex: 0 1 auto; width: auto; min-width: 0; margin: 0 0 0 auto;
        padding: 0; border: 0; scroll-snap-type: none;
    }
    .mainnav a, .mainnav .linkish { padding: 8px 10px; border-radius: 8px; background: transparent; }
    .mainnav a:hover, .mainnav .linkish:hover { background: rgba(255,255,255,.08); }
    .mainnav a.active { background: rgba(255,255,255,.14); }
    .nav-scroll-left { left: 0; margin: 0 -30px 0 0; }
    .nav-scroll-right { right: 0; margin: 0 0 0 -30px; }
}

/* Quick links at the top of every page in a menu group (Fleet, Books, People,
   Load board), drawn by the layout with views/layout/_quick_links.php. */
.menu-quick { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.menu-quick .btn.active, .menu-quick .btn.active:hover { background: var(--chip-on); color: #fff; border-color: var(--chip-on); }

.acting-bar { background: var(--warn-soft); color: var(--warn); padding: 8px 16px; font-size: .9rem; text-align: center; }
.billing-bar { background: var(--info-soft); color: var(--info); padding: 8px 16px; font-size: .9rem; text-align: center; }
.billing-bar-bad { background: var(--danger-soft); color: var(--danger); }
.billing-bar a { color: inherit; font-weight: 600; }

/* ---- Page layout ---- */
.page { max-width: 1180px; margin: 0 auto; padding: 16px 16px 32px; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; margin: 4px 0 14px; }
.page-head .sub { color: var(--muted); margin: 0; }
.page-head .btns { display: flex; flex-wrap: wrap; gap: 8px; }
.page-head .resend { display: flex; gap: 4px; }
.page-head .resend select { width: auto; }
.tenant > span { overflow: hidden; text-overflow: ellipsis; }
.company-logo { flex: none; width: auto; height: 36px; max-width: 90px; object-fit: contain; border-radius: 6px; }
.logo-preview { display: block; max-width: 160px; max-height: 160px; margin: 8px 0; border-radius: 8px; }
/* FarmTrackerPro's own logo may be wide (Admin > Logo): keep it in its row. */
.brand img, .guest-brand img { max-width: 40vw; object-fit: contain; }
.logo-samples { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 16px; }
.logo-samples figure { margin: 0; text-align: center; font-size: .8rem; color: var(--muted, #52606d); }
.logo-sample { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 88px; height: 88px; padding: 0 12px; margin-bottom: 4px; border-radius: 10px; background: var(--neutral-soft); color: #fff; font-weight: 700; }
.logo-sample-bar, .logo-sample-guest { background: var(--brand); }
.logo-sample-guest { font-size: 1.3rem; font-weight: 800; }
.logo-sample-round { border-radius: 50%; }
.logo-sample-ios { border-radius: 14px; }
/* Trip report band, like the PDF header: company logo in the upper right corner. */
.trip-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #2e3138; color: #fff; border-radius: 8px; padding: 12px 12px 12px 18px; margin: 4px 0 18px; border-bottom: 4px solid #e8762b; box-shadow: 0 3px 0 #26b0a5; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.trip-brand-title { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.trip-brand-sub { font-size: .9rem; color: #e8762b; font-weight: 600; }
.trip-brand-sub a { color: #fff; }
.trip-brand img { width: 72px; height: 72px; object-fit: contain; border-radius: 6px; flex: none; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin: 0 0 16px; }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.card-head h2 { margin: 0; }
.card-head .btns { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.grid-2 > .grid-btn, .grid-3 > .grid-btn, .grid-4 > .grid-btn { align-items: end; margin-top: 12px; }
@media (min-width: 640px) { .grid-2 > .grid-btn, .grid-3 > .grid-btn, .grid-4 > .grid-btn { margin-top: 0; } }
.empty { text-align: center; color: var(--muted); padding: 28px 16px; }

.grid { display: grid; gap: 16px; }
@media (min-width: 760px) { .grid-main { grid-template-columns: 2fr 1fr; } .cols-2 { grid-template-columns: 1fr 1fr; } }

.stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1100px) { .stats-5 { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 760px) and (max-width: 1279px) { .stats-6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .stats-6 { grid-template-columns: repeat(6, 1fr); } }
.stat-paid b { color: var(--accent-deep); }
.list-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
.list-totals > div { display: flex; flex-direction: column; min-width: 0; }
.list-totals span { color: var(--muted); font-size: .85rem; }
.list-totals b { font-size: 1.2rem; line-height: 1.2; }
.list-totals b.pos { color: var(--accent-deep); }
.list-totals small { color: var(--muted); font-size: .8rem; }
.list-totals p { grid-column: 1 / -1; margin: 0; }
@media (max-width: 479px) { .list-totals { grid-template-columns: 1fr 1fr; } .list-totals > div:first-child { grid-column: 1 / -1; } }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; text-decoration: none; color: inherit; box-shadow: var(--shadow); }
.stat b { display: block; font-size: 1.6rem; line-height: 1.1; }
.stat span { color: var(--muted); font-size: .88rem; }
.stat.warn b { color: var(--warn); }

/* ---- Forms ---- */
label { display: block; font-weight: 600; margin: 12px 0 4px; font-size: .95rem; }
/* Required fields: public/assets/required.js adds .is-required to the label of any field marked required. */
.is-required::after { content: " *"; content: " *" / ""; color: var(--required); font-weight: 700; }
input[type=text], input[type=url], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date],
input[type=time], input[type=datetime-local], input[type=search], input:not([type]), select, textarea {
    width: 100%; min-height: var(--tap); padding: 10px 12px;
    font: inherit; font-size: 16px; color: var(--text);
    background: var(--field); border: 1px solid var(--field-border); border-radius: 8px;
}
textarea { min-height: 88px; resize: vertical; }
/* Safari on iPhone and iPad draws date fields wider than their column and centers the date. */
input[type=date], input[type=time], input[type=datetime-local] { display: block; min-width: 0; max-width: 100%; }
input::-webkit-date-and-time-value { text-align: left; }
@supports (-webkit-touch-callout: none) {
    input[type=date], input[type=time], input[type=datetime-local] { -webkit-appearance: none; appearance: none; height: var(--tap); line-height: 1.3; }
}
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width: 0; }
input:focus, select:focus, textarea:focus { outline: 3px solid rgba(46, 107, 31, .25); border-color: var(--accent); }
.form .actions, .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.grid-2, .grid-3, .grid-4 { display: grid; gap: 0 14px; }
@media (min-width: 640px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
.help { font-size: .88rem; color: var(--muted); margin: 3px 0 6px; font-weight: 400; }
.check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.check > input[type=checkbox], .check > input[type=radio] { flex: none; margin-top: 3px; }
.consent-box { margin: 8px 0 12px; }
.consent-box .help { margin: 4px 0 0 26px; }
.input-row { display: flex; gap: 8px; }
.input-row input { flex: 1; min-width: 0; }
.input-row .btn { flex: none; }
[data-dot-result] .alert { margin: 8px 0 0; }

/* ---- Buttons ---- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: var(--tap); padding: 10px 16px;
    font: inherit; font-weight: 600; text-decoration: none; cursor: pointer;
    color: var(--text); background: var(--surface); border: 1px solid var(--field-border); border-radius: 8px;
}
.btn:hover { background: var(--surface-2); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { color: var(--danger); border-color: var(--danger-line); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-big { min-height: 56px; font-size: 1.1rem; }
.btn[disabled] { opacity: .6; cursor: default; }
.inline { display: inline; margin: 0; }
.linkish { font: inherit; color: var(--info); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; -webkit-appearance: none; appearance: none; }

/* ---- Alerts and badges ---- */
.alert { padding: 12px 14px; border-radius: 8px; margin: 0 0 14px; border: 1px solid; }
.alert-success { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-deep); }
.alert-error { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger-deep); }
.alert-warning { background: var(--warn-soft); border-color: var(--warn-line); color: var(--warn); }
.alert-info { background: var(--info-soft); border-color: var(--info-line); color: var(--info-deep); }

.badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 700; white-space: nowrap; background: var(--neutral-soft); color: var(--neutral-text); }
.badge-dispatched, .badge-arrived, .badge-submitted { background: var(--info-soft); color: var(--info); }
.badge-in_progress, .badge-maintenance { background: var(--warn-soft); color: var(--warn); }
.badge-completed, .badge-active, .badge-complete { background: var(--accent-soft); color: var(--accent-ink); }
.badge-cancelled, .badge-out_of_service, .badge-inactive, .badge-suspended, .badge-skipped { background: var(--danger-soft); color: var(--danger); }

/* ---- Tables become cards on phones ---- */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 16px; }
/* A table too wide for its box slides sideways instead of losing its right-hand columns
   (phones too: tables that don't turn into cards, like the Books profit and loss). */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
/* Phones: money tables that keep their columns hold the first column (the account or
   name) still while the numbers slide under it, and give it room so names don't wrap
   one word a line. */
@media (max-width: 759px) {
    .money-table:not(.stack) th:first-child, .money-table:not(.stack) td:first-child:not([colspan]) {
        position: sticky; left: 0; z-index: 1; background: var(--surface);
        min-width: 11.5em; max-width: 14em; box-shadow: 1px 0 0 var(--border);
    }
    .money-table:not(.stack) th:first-child { background: var(--surface-2); }
    .money-table.books-pl:not(.stack) tr.sec td:first-child { background: var(--surface-2); }
}
/* Fleet lists (trucks, trailers, equipment) have many columns: give them more of a wide screen. */
.page:has(.table-wrap.wide) { max-width: 1640px; }
@media (min-width: 760px) { .table-wrap.wide .table th, .table-wrap.wide .table td { padding: 10px 8px; } }
@media (max-width: 759px) {
    .table.stack thead { display: none; }
    .table.stack, .table.stack tbody, .table.stack tr, .table.stack td { display: block; width: 100%; }
    .table.stack tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
    .table.stack td { border: 0; padding: 3px 0; display: flex; gap: 10px; }
    .table.stack td[data-label]::before { content: attr(data-label); flex: 0 0 38%; color: var(--muted); font-size: .85rem; }
    .table.stack td[data-label]:empty { display: none; }
    .table.stack td.primary { display: block; font-weight: 700; font-size: 1.05rem; }
    .table.stack td.primary small { font-weight: 400; }
    .table.stack td.primary::before { display: none; }
}

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; }
.filters input, .filters select { width: auto; flex: 1 1 160px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); text-decoration: none; color: var(--text); font-size: .9rem; }
.chip.active { background: var(--chip-on); color: #fff; border-color: var(--chip-on); }

.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Routes and stops ---- */
.route-card { display: block; text-decoration: none; color: inherit; }
.route-card .ref { font-weight: 700; font-size: 1.05rem; }
.route-card .lane { color: var(--muted); }
.eta { color: var(--accent-ink); font-weight: 600; }
.eta svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }
.progress { height: 6px; border-radius: 6px; background: var(--neutral); overflow: hidden; margin: 8px 0 2px; }
.progress span { display: block; height: 100%; background: var(--accent); }

.stops { list-style: none; margin: 0; padding: 0; counter-reset: stop; }
.stop { position: relative; padding: 0 0 18px 40px; }
.stop::before {
    counter-increment: stop; content: counter(stop);
    position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: .85rem;
    background: var(--neutral); color: var(--text);
}
.stop::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: var(--neutral); }
.stop:last-child::after { display: none; }
.stop.done::before { background: var(--accent); color: #fff; }
.stop.arrived::before { background: var(--info-fill); color: #fff; }
.stop.current { }
.stop .stop-type { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.stop .stop-name { font-weight: 700; }
.stop .stop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.stop .stop-actions form { margin: 0; }

.stop-editor { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; background: var(--surface-2); }
.stop-editor-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.stop-editor-head strong { font-size: .95rem; }
.stop-editor .tools { display: flex; gap: 6px; }

/* ---- Messages ---- */
.messages { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 88%; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.msg.mine { align-self: flex-end; background: var(--accent-soft); border-color: var(--accent-line); }
.msg .meta { font-size: .78rem; color: var(--muted); }
.msg p { margin: 2px 0 0; white-space: pre-wrap; }

/* ---- Driver today view ---- */
.hero { background: #1f2a33; color: #fff; border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.hero .muted { color: #b6c2cc; }
.hero h1 { color: #fff; }
.hero .btn { background: #fff; border-color: #fff; color: #1b242c; }
.next-stop { background: rgba(255,255,255,.08); border-radius: 8px; padding: 10px 12px; margin-top: 12px; }
.big-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 12px; }

/* ---- Trip report (ported from the iLandClearing form) ---- */
.trip { max-width: 640px; margin: 0 auto; font-size: 17px; }
.trip fieldset { border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 18px; }
.trip legend { font-weight: 700; padding: 0 6px; }
.trip .half { display: flex; gap: 10px; margin: 6px 0 0; }
.trip .half label { flex: 1; margin: 0; border: 2px solid var(--field-border); border-radius: 8px; padding: 12px; text-align: center; cursor: pointer; font-weight: 700; background: var(--field); position: relative; }
.trip .half input { position: absolute; opacity: 0; }
.trip .half label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.trip .half label.is-done { opacity: .55; }
.trip .thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.trip .thumbs img { width: 70px; height: 70px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); display: block; }
.trip .tile { position: relative; }
.trip .tile .del { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--danger-fill); color: #fff; font-size: 16px; line-height: 22px; text-align: center; border: 2px solid var(--surface); cursor: pointer; }
.trip .file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.trip .add { display: inline-block; margin: 4px 0 0; padding: 10px 16px; border: 2px dashed var(--accent-ink); border-radius: 8px; color: var(--accent-ink); font-weight: 700; cursor: pointer; }
.trip .doc { display: flex; align-items: center; max-width: 100%; padding: 6px 10px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); font-size: 14px; word-break: break-all; }
.trip .count { font-size: 14px; margin-top: 4px; }
.trip .count.bad { color: var(--danger); }
.trip .submit { width: 100%; padding: 14px; font-size: 18px; font-weight: 700; border: 0; border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; }
.trip .submit[disabled] { opacity: .6; }
.trip .save-draft { width: 100%; margin-top: 10px; padding: 12px; font-size: 17px; font-weight: 700; border: 2px solid var(--accent-ink); border-radius: 8px; background: var(--surface); color: var(--accent-ink); cursor: pointer; }
.trip .save-draft[disabled] { opacity: .6; }
.trip .save-draft-help { margin-top: 6px; }
.trip .draft-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 12px 14px; margin: 0 0 16px; border: 1px solid var(--warn-line); border-radius: var(--radius); background: var(--warn-soft); }
.trip .draft-note p { margin: 0; flex: 1 1 260px; }
.trip .draft-note form { margin: 0; }
.trip .draft-list { margin: 0 0 18px; }
.trip .draft-list h2 { font-size: 1.1rem; margin: 0 0 6px; }
.trip .tile.saved img, .trip .tile.saved .doc { border-color: var(--accent-line); }
.trip .msg-box { padding: 12px; border-radius: 6px; margin: 0 0 16px; display: none; }
.trip .msg-box.ok { display: block; background: var(--accent-soft); border: 1px solid var(--accent); }
.trip .msg-box.err { display: block; background: var(--danger-soft); border: 1px solid var(--danger); }
.trip .load-fixed { font-size: 1.15rem; font-weight: 700; }
.trip .load-results { margin: 4px 0 14px; }
.trip .load-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); max-height: 340px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.trip .load-list li + li { border-top: 1px solid var(--border); }
.trip .load-list a { display: block; padding: 11px 14px; min-height: 44px; text-decoration: none; color: var(--text); line-height: 1.3; }
.trip .load-list a:hover, .trip .load-list a:focus { background: var(--accent-soft); outline: none; }
.trip .load-list strong { display: block; font-size: 1.05rem; letter-spacing: .02em; }
.trip .load-list small { display: block; color: var(--muted); font-size: .85rem; }
.trip .load-results[aria-busy] .load-list { opacity: .85; }

.gallery { display: flex; flex-wrap: wrap; gap: 8px; }
.gallery a { display: block; }
.gallery img { width: 120px; height: 120px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; }
@media (min-width: 640px) { .gallery img { width: 150px; height: 150px; } }
.gallery .pdf-tile { width: 120px; height: 120px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); text-decoration: none; color: var(--text); font-size: 12px; padding: 6px; text-align: center; word-break: break-all; }
@media (min-width: 640px) { .gallery .pdf-tile { width: 150px; height: 150px; } }

/* ---- Guest (sign in) ---- */
body.guest { background: var(--brand); min-height: 100vh; }
.guest-wrap { max-width: 420px; margin: 0 auto; padding: 48px 16px; }
.guest-brand { display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-size: 1.6rem; font-weight: 800; margin-bottom: 20px; }
.guest-card { padding: 22px; }
.guest-card h1 { margin-bottom: 8px; }
.guest-card .btn { margin-top: 18px; }
.guest-card .option-row .btn { margin-top: 12px; text-align: left; justify-content: flex-start; }
.guest-card .option-row p { margin: 4px 0 0; }
.recovery-codes { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 16px; list-style: none; padding: 0; }
.recovery-codes code, .totp-key { font-size: 1.05em; letter-spacing: .04em; }
.totp-qr { width: 200px; max-width: 100%; background: #fff; border-radius: 8px; }
.totp-qr svg { display: block; width: 100%; height: auto; }

@media print {
    .topbar, .no-print, .acting-bar, .billing-bar { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; }
}

.guest-foot { text-align: center; color: #dfe6ec; }
.guest-foot a { color: #fff; font-weight: 700; }

/* ---- Fleet (ELD data) ---- */
.fleet-map { height: 420px; padding: 0; overflow: hidden; z-index: 0; }
@media (max-width: 759px) { .fleet-map { height: 300px; } }
/* Customer conversation someone else has open (views/customers/message.php). */
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.bare.held input, fieldset.bare.held textarea { opacity: .7; }
.claim-held p { margin: 0 0 10px; }
.claim-held .btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.claim-held .btns form { margin: 0; }
.badge-error, .badge-paused { background: var(--warn-soft); color: var(--warn); }
.badge-duty-driving, .badge-duty-d { background: var(--info-soft); color: var(--info); }
.badge-duty-on_duty, .badge-duty-on { background: var(--warn-soft); color: var(--warn); }
.badge-duty-off_duty, .badge-duty-sleeper, .badge-duty-sb, .badge-duty-off { background: var(--neutral-soft); color: var(--neutral-text); }
.hos-low { color: var(--danger); font-weight: 700; }
.eld-edit summary, details.card summary { cursor: pointer; }
.bill-to-box { margin: 14px 0 4px; }
.bill-to-box > summary { cursor: pointer; padding: 6px 0; }
.eld-edit { margin-top: 12px; }
.eld-conn .kv { margin-bottom: 10px; }
.eld-live { border-top: 1px solid var(--border); padding-top: 10px; margin-bottom: 10px; }
.eld-live .help { margin: 6px 0 8px; }
.badge-off { background: var(--neutral-soft); color: var(--neutral-text); }
.eld-method { border: 0; padding: 0; margin: 12px 0 4px; }
.eld-method legend { font-weight: 600; margin-bottom: 4px; }
.eld-method .check { display: block; margin: 4px 0; }
.rate-type { border: 0; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.rate-type legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.eld-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--border); }
.eld-row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.eld-link { display: flex; gap: 6px; margin: 0; }
.eld-link select { width: auto; min-height: 36px; padding: 6px 10px; }
.eld-unmatched .card-head { flex-wrap: wrap; }
.eld-unmatched .btn { white-space: nowrap; }

/* ---- Truck and driver documents ---- */
.visually-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.doc-upload-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.doc-picked { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.doc-picked li { display: flex; align-items: center; gap: 10px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.doc-picked img, .doc-picked .tag { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; flex: none; display: flex; align-items: center; justify-content: center; background: var(--paper); color: #1b242c; font-size: 12px; font-weight: 700; }
.doc-picked .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; }
.doc-picked .del { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--danger-fill); color: #fff; font-size: 18px; cursor: pointer; flex: none; }
.doc-form .msg-box, form[data-doc-upload] .msg-box { display: none; padding: 12px; border-radius: 6px; margin: 0 0 12px; }
.doc-form .msg-box.err, form[data-doc-upload] .msg-box.err { display: block; background: var(--danger-soft); border: 1px solid var(--danger); }
.doc-title { font-weight: 700; font-size: 1.05rem; margin-left: 6px; }
.doc-card .card-head { align-items: flex-start; }
.esign-inline { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.esign-inline .esign-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.esign-inline p { margin: 8px 0; }
.doc-file { display: flex; flex-direction: column; gap: 4px; }
.doc-file-meta { display: flex; gap: 10px; align-items: center; min-height: 28px; }
.doc-file-meta .check { margin: 0; }
.rate-con-upload { margin-top: 14px; }
.danger-link { color: var(--danger); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.combine-bar { border-color: var(--accent); }
.ssn-saved { margin: 4px 0; display: flex; gap: 10px; align-items: center; font-family: ui-monospace, monospace; }
.mark-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
ul.plain { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }

/* ---- Route map and miles ---- */
.route-map { height: 340px; margin: 0 -16px 12px; z-index: 0; }
@media (max-width: 759px) { .route-map { height: 260px; } }
.plan-pin { box-sizing: border-box; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.4); background: #6b7a88; color: #fff; font-weight: 800; font-size: .85rem; }
.plan-pin-pickup { background: #1e8a4c; }
.plan-pin-delivery { background: #1f6fb2; }
.plan-pin-done { opacity: .55; }
.plan-pin-scale { background: #a15c00; border-radius: 5px; font-size: .7rem; }
.plan-pin-scale-around { background: #6b7a88; }
.plan-pin-scale-truckstop { background: #2e7d32; }
.leaflet-tooltip.scale-label { padding: 1px 6px; font-size: .72rem; font-weight: 700; color: #fff; background: #a15c00; border: 0; box-shadow: 0 1px 3px rgba(0,0,0,.35); white-space: nowrap; }
.leaflet-tooltip.scale-label::before { display: none; }
.leaflet-tooltip.scale-label.plan-pin-scale-around { background: #6b7a88; }
.leaflet-tooltip.scale-label.plan-pin-scale-truckstop { background: #2e7d32; }
.scale-labels-off .leaflet-tooltip.scale-label { display: none; }
.plan-pin-fuel { background: #c2410c; border-radius: 5px; font-size: .75rem; }
.leaflet-tooltip.scale-label.plan-pin-fuel { background: #c2410c; }
.fuel-plan { margin-top: 12px; }
.fuel-plan h3 { margin: 0 0 6px; }
.fuel-stops { margin: 6px 0; padding-left: 1.4em; }
.fuel-stops li { margin: 3px 0; }
.fuel-start { width: auto; display: inline-block; margin-left: 4px; }
.truck-pin { position: relative; }
.truck-pin .truck-dot { box-sizing: border-box; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 1px 6px rgba(0,0,0,.45); background: #e8590c; color: #fff; }
.truck-pin b { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); white-space: nowrap; background: #fff; color: #222; font-size: .72rem; padding: 0 5px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.truck-pin-stale .truck-dot { background: #8a6d5a; }
.live-truck { margin: 0 0 12px; padding: 8px 10px; border-left: 4px solid #e8590c; background: var(--surface-2); border-radius: 6px; }
.live-truck p { margin: 0; }
/* This week's EIA diesel averages under the route map. */
.diesel-prices { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.diesel-prices h3 { margin: 0 0 6px; font-size: 1rem; }
.diesel-list { list-style: none; margin: 0 0 6px; padding: 0; }
.diesel-list li { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; }
.live-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 2px; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: #2fb344; box-shadow: 0 0 0 3px rgba(47,179,68,.25); }
.live-dot-stale { background: #9aa4ad; box-shadow: none; }
.plan-total { font-size: 1.15rem; margin-bottom: 8px; }
.plan-legs td.num, .plan-legs th:not(:first-child) { text-align: right; white-space: nowrap; }
.plan-total-row td { font-weight: 700; background: var(--surface-2); }
.warn-text { color: var(--warn); }
.plan-miles-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.fmcsa-card h3 { margin: 18px 0 8px; font-size: 1rem; }
.fmcsa-card .table-wrap { overflow-x: auto; box-shadow: none; }

/* ---- Load board and brokers ---- */
.load-card { display: block; text-decoration: none; color: inherit; }
.load-card .card-head { margin-bottom: 4px; align-items: flex-start; }
.load-card .lane { font-weight: 700; font-size: 1.05rem; }
/* Load lists that refresh on their own (live.js): new and changed cards stand out for a while. */
.live-note { margin: 4px 0 8px; }
.load-card.live-new { box-shadow: 0 0 0 2px var(--accent), var(--shadow); animation: live-glow 12s ease-out forwards; }
.load-card.live-changed { box-shadow: 0 0 0 2px var(--info), var(--shadow); animation: live-glow-info 12s ease-out forwards; }
.live-new .live-badge { background: var(--accent); color: #fff; }
.live-changed .live-badge { background: var(--info-fill); color: #fff; }
@keyframes live-glow { 0%, 60% { background: var(--accent-soft); } 100% { background: var(--surface); } }
@keyframes live-glow-info { 0%, 60% { background: var(--info-soft); } 100% { background: var(--surface); } }
@media (prefers-reduced-motion: reduce) { .load-card.live-new, .load-card.live-changed { animation: none; } }
.load-rate { font-weight: 700; color: var(--accent-ink); white-space: nowrap; }
.load-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .92rem; margin-bottom: 4px; }
.load-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.load-tags:empty { display: none; }
.load-filters select { flex: 1 1 140px; }
.load-filters .lane-pick { display: flex; gap: 6px; flex: 2 1 300px; min-width: 0; position: relative; }
.load-filters .lane-pick input { flex: 1 1 160px; min-width: 0; }
.load-filters .lane-pick .lane-miles { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; color: var(--muted); }
.load-filters .lane-pick .lane-miles input { flex: 0 0 auto; width: 72px; text-align: right; }
.multi-pick { position: relative; flex: 1 1 180px; min-width: 0; }
.multi-pick > summary { list-style: none; cursor: pointer; padding: 10px 32px 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
.multi-pick > summary::-webkit-details-marker { display: none; }
.multi-pick > summary::after { content: ""; position: absolute; right: 12px; top: 50%; margin-top: -3px; border: 5px solid transparent; border-top-color: var(--muted); }
.multi-pick-menu { position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 240px; max-height: 60vh; overflow-y: auto; padding: 6px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--menu-shadow); }
.multi-pick-group { padding: 4px 0; }
.multi-pick-group + .multi-pick-group { border-top: 1px solid var(--border); }
.multi-pick-menu label { display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 30px; margin: 0; font-weight: normal; cursor: pointer; }
.multi-pick-menu label.multi-pick-head { padding-left: 12px; font-weight: 600; }
.multi-pick-menu input[type=checkbox] { width: auto; flex: none; margin: 0; }
.lane-away { color: var(--accent-ink); margin-top: 2px; }
.offers { gap: 0; }
.offer { padding: 12px 0; border-top: 1px solid var(--border); }
.offer:first-child { border-top: 0; padding-top: 0; }
.offer .card-head { margin-bottom: 2px; }
.offer-declined, .offer-withdrawn { opacity: .6; }
.broker-docs { gap: 0; }
.broker-doc { padding: 10px 0; border-top: 1px solid var(--border); }
.broker-doc:first-child { border-top: 0; padding-top: 0; }
.broker-doc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.broker-doc-file { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.broker-doc-file a { display: inline-flex; align-items: center; gap: 4px; overflow-wrap: anywhere; }
.broker-upload { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 4px; }
input[type=file] { width: 100%; min-height: var(--tap); padding: 8px 0; font: inherit; }
.mail-way { border: 0; padding: 0; margin: 4px 0 8px; }
.mail-way legend { font-weight: 600; margin-bottom: 4px; }
.mail-way .check { display: flex; align-items: flex-start; margin: 8px 0; }
.mail-way .check input { margin-top: 3px; }
.mail-way .check.is-off { color: var(--muted); cursor: default; }
.mail-way small { display: block; color: var(--muted); }
.mail-fields { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; }

/* ---- Route form with the rate confirmation beside it ---- */
.page:has(.ratecon-layout) { max-width: 1640px; }
.ratecon-layout { display: grid; gap: 16px; }
.ratecon-pane .card-head { gap: 8px; flex-wrap: wrap; }
.ratecon-pick { width: auto; max-width: 100%; }
.ratecon-view { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow: auto; margin-bottom: 10px; }
.ratecon-view img { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); }
.ratecon-view iframe { width: 100%; height: 58vh; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); }
.ratecon-pane input.visually-hidden { width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; pointer-events: none; }
.ratecon-pages { display: flex; flex-direction: column; gap: 8px; }
.ratecon-pages canvas { width: 100%; height: auto; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); }
.ratecon-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.ratecon-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ratecon-pane .msg-box { padding: 10px 12px; border-radius: 6px; margin: 10px 0 0; }
.ratecon-pane .msg-box.ok { background: var(--accent-soft); border: 1px solid var(--accent); }
.ratecon-pane .msg-box.err { background: var(--danger-soft); border: 1px solid var(--danger); }
.ratecon-summary { margin-top: 12px; font-size: .92rem; }
.ai-filled { background: var(--warn-soft) !important; border-color: #d9a520 !important; }
@media (min-width: 1100px) {
    .ratecon-layout { grid-template-columns: minmax(380px, 5fr) 7fr; align-items: start; }
    .ratecon-pane { position: sticky; top: 12px; }
    .ratecon-view { max-height: calc(100vh - 230px); }
    .ratecon-view iframe { height: calc(100vh - 250px); }
}

/* Install the phone app (PWA) banner, shown by install.js. */
.install-bar {
    display: flex; align-items: center; gap: 12px;
    background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--accent);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 8px 10px 12px; margin: 0 0 16px;
}
.install-bar img { flex: none; border-radius: 9px; }
.install-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.install-text span { color: var(--muted); font-size: .88rem; }
.install-text .icon { vertical-align: -3px; }
.install-close {
    flex: none; width: 36px; height: 36px; border: 0; background: transparent; color: var(--muted);
    font-size: 1.5rem; line-height: 1; border-radius: 8px; cursor: pointer;
}
.install-close:hover { background: var(--surface-2); }

/* Route page: send to phone map */
.phone-map-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.phone-map-btns form { margin: 0; }
.phone-map-send { display: flex; gap: 16px; align-items: center; margin-top: 12px; }
.phone-map-qr { flex: 0 0 auto; width: 148px; height: 148px; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: var(--paper); }
.phone-map-qr svg { display: block; width: 100%; height: 100%; }
.phone-map-scan { margin: 0 0 8px; }
.phone-map-note { margin: 12px 0 0; }

/* Load agent */
.agent-truck .card-head h2 { font-size: 1.05rem; }
.agent-matches, .agent-ask { display: grid; gap: 0; }
.agent-match, .agent-pick { padding: 12px 0; border-top: 1px solid var(--border); }
.agent-match:first-child { border-top: 0; padding-top: 4px; }
.agent-match .card-head, .agent-pick .card-head { margin-bottom: 4px; align-items: flex-start; }
.agent-match .lane { font-weight: 700; }
.agent-reasons { margin: 2px 0 8px; padding-left: 18px; }
.agent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.agent-offer { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.agent-offer input[type="number"] { width: 120px; }
.agent-offer input[name="note"] { flex: 1 1 220px; }
.agent-fits { gap: 0; }
.agent-fit { padding: 8px 0; border-top: 1px solid var(--border); }
.agent-fit:first-child { border-top: 0; padding-top: 0; }

/* ---- Subscriptions ---- */
.badge-sub-free, .badge-sub-subscribed { background: var(--accent-soft); color: var(--accent-ink); }
.badge-sub-trial { background: var(--info-soft); color: var(--info); }
.badge-sub-past_due { background: var(--warn-soft); color: var(--warn); }
.badge-sub-ended { background: var(--danger-soft); color: var(--danger); }
.plan-choice { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; margin: 8px 0; }
.plan-choice input { margin-top: 4px; }
details > summary.btn { list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }
details[open] > summary.btn { margin-bottom: 8px; }

/* Maintenance reminders */
.badge-maint-ok { background: var(--accent-soft); color: var(--accent-ink); }
.badge-maint-soon { background: var(--warn-soft); color: var(--warn); }
.badge-maint-due { background: var(--danger-soft); color: var(--danger); }
.progress-soon span { background: var(--warn); }
.progress-due span { background: var(--danger); }
.stat.bad b { color: var(--danger); }
.maint-item.maint-soon { border-left: 4px solid var(--warn); }
.maint-item.maint-due { border-left: 4px solid var(--danger); }
.maint-item .actions { align-items: flex-start; }
.maint-item details { flex: 1 1 100%; }
.maint-item details:not([open]) { flex: 0 0 auto; }
/* ---- Specs: fluids, filters, tires ---- */
.specs-table th[scope="row"] { font-weight: 600; white-space: nowrap; }
.specs-table td input, .specs-table td select { margin: 0; }
.input-pair { display: flex; gap: 6px; }
.input-pair input { flex: 1 1 5em; min-width: 0; }
.input-pair select { flex: 0 0 auto; width: auto; }
.specs-choose { margin: 12px 0; }
.specs-choose summary { cursor: pointer; font-weight: 600; }
.specs-choices { display: grid; gap: 0 24px; }
@media (min-width: 640px) { .specs-choices { grid-template-columns: 1fr 1fr; } }
.specs-choices fieldset { border: 0; padding: 0; margin: 0; }
.specs-choices legend { font-weight: 600; padding: 0; margin: 8px 0 4px; }
.specs-choices label.check { display: block; margin: 4px 0; }
/* ---- Driver pay ---- */
.money-table .num { text-align: right; white-space: nowrap; }
.stat-net b { color: var(--accent-ink); }
.settle-group .card-head strong { font-size: 1.1rem; }
.line-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
td.num .line-edit { justify-content: flex-end; }
.line-edit input { flex: none; width: 6.5em; min-height: 36px; padding: 4px 8px; }
.settle-sum { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 2px 0 6px; }
.settle-sum span { display: flex; flex-direction: column; }
.settle-sum strong { font-size: 1.35rem; color: var(--accent-ink); }
.pre-wrap { white-space: pre-wrap; }
.forecast-text { overflow-wrap: anywhere; max-height: 70vh; overflow-y: auto; }
.note-row { border-top: 1px solid var(--border); padding: 10px 0 4px; }
.note-row > p { margin: 0 0 6px; overflow-wrap: anywhere; }
.note-row details form { margin-top: 8px; }
@media (max-width: 759px) { .table.stack td.num { text-align: left; } td.num .line-edit { justify-content: flex-start; } }
.badge-approved { background: var(--info-soft); color: var(--info); }
.badge-paid { background: var(--accent-soft); color: var(--accent-ink); }
.badge-draft { background: var(--warn-soft); color: var(--warn); }

/* Public route status page (views/track) */
.track-wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 48px; }
.track-card h1 { margin: 0 0 6px; }
.track-company { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.track-company img { width: auto; max-width: 140px; height: 56px; object-fit: contain; }
.track-company p { margin: 0; }
.track-headline { font-size: 1.1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.track-map { margin: 12px 0; border-radius: 8px; }
.tracking-card .stops { margin-top: 16px; }
.tracking-card h3 { margin-top: 16px; }
.track-foot { color: #c9d3db; text-align: center; }
.track-foot a { color: inherit; text-decoration: underline; }
.status-links td { vertical-align: top; }

/* Truck data connectivity: details show once a kind is ticked. */
.connectivity, .owner { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px 4px; margin: 12px 0; }
.connectivity legend, .owner legend { font-weight: 700; padding: 0 6px; }
.standard-maint { border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px 4px; margin: 12px 0; }
.conn-type { border-top: 1px solid var(--border); padding: 8px 0; }
.conn-type:first-of-type { border-top: 0; }
.conn-type .conn-fields { display: none; }
.conn-type:has(input[type=checkbox]:checked) .conn-fields { display: grid; }
.conn-type:has(input[type=checkbox]:checked) > .conn-fields:not(.grid-4) { display: block; }
.badge-conn { background: var(--info-soft); color: var(--info); margin: 1px 0; }

/* Emailed loads */
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.plain-list li { border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.plain-list li:last-child { border-bottom: 0; padding-bottom: 0; }
ol.plain-list { list-style: decimal; padding-left: 20px; }
.copy-row { display: flex; gap: 8px; align-items: center; }
.copy-row input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.combine-bar .btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* Dash cam safety events */
.badge-safety { background: var(--warn-soft); color: var(--warn); }
.badge-safety-serious { background: var(--danger-soft); color: var(--danger); }
.safety-video { display: block; width: 100%; max-height: 70vh; background: #000; border-radius: 8px; margin-bottom: 10px; }
.safety-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-top: 10px; }
.safety-images img { display: block; width: 100%; border-radius: 6px; }
.safety-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.safety-list li { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }

/* Weather card and alerts (route page, driver's Today page). */
.weather-box:empty { display: none; }
.weather-loading { padding: 4px 0 14px; }
.weather-alert strong { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; }
.weather-alert details { margin-top: 6px; }
.weather-alert details p { margin: 6px 0 0; font-size: .92em; }
.weather-stop { padding: 10px 0; border-bottom: 1px solid var(--border); }
.weather-stop:first-of-type { padding-top: 0; }
.weather-now { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; font-size: 1.05em; }
.weather-temp { font-size: 1.8em; font-weight: 700; line-height: 1; }
.weather-stop p { margin: 6px 0 0; }
.weather-foot { margin: 10px 0 0; }

/* Suggestions while typing (suggest.js) */
.suggest-list { position: absolute; z-index: 30; margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--menu-shadow); max-height: 300px; overflow-y: auto; }
.suggest-list li { padding: 8px 12px; cursor: pointer; line-height: 1.3; }
.suggest-list li small { display: block; color: var(--muted); font-size: .82rem; }
.suggest-list li.active, .suggest-list li:hover { background: var(--accent-soft); }

/* ZIP first addresses in USPS style */
.grid-street { display: grid; gap: 0 14px; }
@media (min-width: 640px) { .grid-street { grid-template-columns: 2fr 1fr; } }
.addr-usps { margin: 2px 0 8px; }
.addr-usps .help { margin: 4px 0 2px; }
.addr-usps .help strong { color: var(--text); font-weight: 600; letter-spacing: .01em; }
.addr-usps .check { font-size: .88rem; color: var(--muted); }

/* Freight invoices (carrier) and invoices from carriers (broker) */
.badge-inv-draft { background: var(--warn-soft); color: var(--warn); }
.badge-inv-open { background: var(--info-soft); color: var(--info); }
.badge-inv-overdue, .badge-inv-void { background: var(--danger-soft); color: var(--danger); }
.badge-inv-paid { background: var(--accent-soft); color: var(--accent-ink); }
.text-bad { color: var(--danger); }
.aging-table td.num.late { color: var(--danger); }
.aging-table tfoot td { font-weight: 700; border-top: 2px solid var(--border); }
.inv-total-row td { font-weight: 700; }
.inv-paperwork { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.inv-paperwork li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inv-paperwork a { overflow-wrap: anywhere; }
.inv-paper-upload, .trip-paper-upload { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.inv-paper-upload h3, .trip-paper-upload h3 { margin-top: 0; }
.inv-paper-upload select, .trip-paper-upload select { max-width: 340px; }
.inv-line-form { display: grid; grid-template-columns: 1.2fr 2fr .7fr 1fr auto; gap: 6px; align-items: end; margin: 0; }
.inv-line-form label { font-size: .8rem; }
@media (max-width: 720px) {
    .inv-line-form { grid-template-columns: 1fr 1fr; }
    .inv-line-form .wide { grid-column: 1 / -1; }
}
/* ---- Cost per mile ---- */
.load-cost { display: flex; flex-direction: column; gap: 1px; margin: 6px 0 4px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--border); }
.load-cost-pair { font-weight: 600; }
.load-profit { color: var(--accent-ink); font-weight: 600; }
.load-loss { color: var(--danger); font-weight: 600; }
.agent-cost { margin: 4px 0 0; }

/* Equipment keys and codes, once shown. */
.code-value { font-size: 1.05rem; font-weight: 600; letter-spacing: .04em; user-select: all; }

/* Settings > Menus: one switch per menu section */
.menu-switches { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 20px; margin: 8px 0 4px; }
.menu-switch { align-items: flex-start; margin: 6px 0; }
.menu-switch input { margin-top: 3px; flex: none; }
/* ---- Fuel rewards: a list of stations, then one card at a time, big enough to scan at the pump ---- */
.fuel-stations { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fuel-station { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px; color: inherit; text-decoration: none; }
.fuel-station:hover { border-color: var(--accent); }
.fuel-station .icon { width: 28px; height: 28px; }
.fuel-station span { display: flex; flex-direction: column; gap: 2px; font-size: 1.15rem; }
.fuel-station small { font-size: .85rem; }
.fuel-today { display: flex; flex-wrap: wrap; gap: 8px; }
.fuel-drivers { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.fuel-show {
    background: #fff; color: #000; border-radius: 12px; border: 1px solid var(--border);
    display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
    padding: 20px 16px;
}
.fuel-show h1 { display: flex; align-items: center; gap: 10px; margin: 0; color: #000; font-size: 1.7rem; }
.fuel-show h1 .icon { width: 28px; height: 28px; }
.fuel-show .pump-number { max-width: 100%; overflow-wrap: anywhere; font: 700 2.2rem/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; }
.fuel-show .muted { color: #333; }
.fuel-show .actions { justify-content: center; }
.fuel-show .actions .btn { min-width: 120px; justify-content: center; }
.reward-code { display: block; max-width: 100%; max-height: 60vh; background: var(--paper); border-radius: 8px; }
.reward-code-small { max-height: 160px; margin: 6px 0; border: 1px solid var(--border); }

/* ---- Feedback ---- */
.feedback-kinds { border: 0; padding: 0; margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.feedback-kinds legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.feedback-body { white-space: normal; overflow-wrap: anywhere; }
.feedback-shot { display: block; max-width: 100%; max-height: 480px; border: 1px solid var(--border); border-radius: 6px; }
.feedback-release { border-left: 4px solid var(--accent); }
.badge-fb-building, .badge-fb-releasing { background: var(--info-soft); color: var(--info); }
.badge-fb-built, .badge-fb-held { background: var(--warn-soft); color: var(--warn); }
.badge-fb-released { background: var(--accent-soft); color: var(--accent-ink); }
.badge-fb-failed { background: var(--danger-soft); color: var(--danger); }

/* Super admin company page: jump links, group titles, folded FMCSA card. */
.card > input[type=hidden]:first-child + h2 { margin-top: 0; }
.section-jump { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.section-jump .chip { white-space: nowrap; }
.jump-target { scroll-margin-top: 110px; }
.section-title { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 26px 0 8px; }
.company-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#profile, #fmcsa, #sign-in, #menus, #features, #account { scroll-margin-top: 110px; }
details.fmcsa-card > summary { list-style: none; margin-bottom: 0; }
details.fmcsa-card > summary::-webkit-details-marker { display: none; }
details.fmcsa-card > summary h2::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--muted); }
details.fmcsa-card[open] > summary { margin-bottom: 10px; }
details.fmcsa-card[open] > summary h2::before { content: "▾"; }
.danger-card { border-color: var(--danger-line); }
.machine-data .plain-list { margin-bottom: 12px; }
.telematics-link { min-width: 0; flex: 1; } .telematics-link select { width: 100%; max-width: 320px; }

/* ---- Theme button (menu) and dark mode extras ---- */
.theme-toggle .theme-icon-auto, .theme-toggle .theme-icon-light, .theme-toggle .theme-icon-dark { display: none; }
:root[data-theme="auto"] .theme-icon-auto, :root:not([data-theme]) .theme-icon-auto,
:root[data-theme="light"] .theme-icon-light, :root[data-theme="dark"] .theme-icon-dark { display: inline-flex; }
/* Dark maps: the street tiles are darkened, truck and stop pins keep their colors.
   Same rules twice: once for Theme: Auto on a dark device, once for Theme: Dark. */
@media screen and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .leaflet-container { background: #1b2329; }
    :root:not([data-theme="light"]) .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }
    :root:not([data-theme="light"]) .leaflet-bar a, :root:not([data-theme="light"]) .leaflet-control-layers { background: var(--surface); color: var(--text); border-color: var(--border); }
    :root:not([data-theme="light"]) .leaflet-popup-content-wrapper, :root:not([data-theme="light"]) .leaflet-popup-tip { background: var(--surface); color: var(--text); }
    :root:not([data-theme="light"]) .leaflet-container .leaflet-control-attribution { background: rgba(26, 34, 41, .8); color: var(--muted); }
    :root:not([data-theme="light"]) .leaflet-container a { color: var(--info); }
}
@media screen {
    :root[data-theme="dark"] .leaflet-container { background: #1b2329; }
    :root[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.9) contrast(.9) saturate(.6); }
    :root[data-theme="dark"] .leaflet-bar a, :root[data-theme="dark"] .leaflet-control-layers { background: var(--surface); color: var(--text); border-color: var(--border); }
    :root[data-theme="dark"] .leaflet-popup-content-wrapper, :root[data-theme="dark"] .leaflet-popup-tip { background: var(--surface); color: var(--text); }
    :root[data-theme="dark"] .leaflet-container .leaflet-control-attribution { background: rgba(26, 34, 41, .8); color: var(--muted); }
    :root[data-theme="dark"] .leaflet-container a { color: var(--info); }
}

/* Thank-you card when someone's feedback goes live (views/layout/app.php) */
.celebrate-overlay { position: fixed; inset: 0; z-index: 100; background: rgb(0 0 0 / 0.45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.celebrate { position: relative; z-index: 1; background: var(--surface); color: var(--text); border-radius: 14px; padding: 24px 20px 16px; width: 100%; max-width: 420px; max-height: calc(100dvh - 32px); overflow-y: auto; text-align: center; box-shadow: 0 12px 40px rgb(0 0 0 / 0.25); }
.celebrate h2 { margin: 4px 0 8px; font-size: 1.35rem; }
.celebrate p { margin: 0 0 12px; line-height: 1.5; }
.celebrate-icon { font-size: 2.6rem; }
.celebrate-summary { text-align: left; font-size: 0.9rem; color: var(--muted); }
.celebrate-streak { padding: 8px 12px; border-radius: 10px; background: #fff7e6; color: #1b242c; }
.celebrate-share { padding: 10px 12px; border-radius: 10px; background: var(--surface-2, #eef6f1); font-size: 0.95rem; }
.celebrate-share .btn { margin-top: 6px; }
.celebrate-actions { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; }
.confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.confetti span { position: absolute; top: -10%; font-size: 1.6rem; animation: confetti-fall 2.6s ease-in forwards; }
@keyframes confetti-fall { to { transform: translateY(115vh) rotate(540deg); opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }

/* Accountant feed key (Invoices > Reports): long, copied in one tap. */
.copy-key { word-break: break-all; user-select: all; }

/* Books (views/books) */
.books-pl tr.sec td { font-weight: 700; background: var(--surface-2); }
.books-pl tr.tot td, .books-table tr.tot td { font-weight: 700; border-top: 2px solid var(--border); }
.books-pl td.ind, .books-table td.ind { padding-left: 28px; }
.books-nowrap { white-space: nowrap; }
.money-table .pos { color: var(--accent-deep); }
.money-table .neg, .stat b.neg, .kv .neg, .books-warn { color: var(--danger); }
/* Negative money, on every page: public/assets/money.js wraps it in .money-neg.
   It looks exactly like the number around it, only red. !important because the
   span sits inside text whose own span rules would win (".stat span" made a
   negative Net pay small and grey; ".settle-sum span" is a flex column). */
.money-neg { color: var(--danger) !important; font: inherit !important; display: inline !important; }
.btn .money-neg, .badge .money-neg, .alert-error .money-neg { color: inherit !important; }
.kv .pos { color: var(--accent-deep); }
.stat b.pos { color: var(--accent-deep); }
@media (min-width: 800px) { .books-stats { grid-template-columns: repeat(4, 1fr); } }
.bank-sort { display: grid; gap: 6px 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .bank-sort { grid-template-columns: 2fr 1.4fr 1.2fr auto; align-items: end; } }
.bank-sort label { font-size: .82rem; }
.bank-purge-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.bank-purge-bar .check { margin: 0; }
.bank-bulk { display: flex; flex: 1 1 420px; min-width: 0; max-width: 100%; flex-wrap: wrap; align-items: center; gap: 6px; }
.bank-bulk select { flex: 1 1 160px; min-width: 0; width: auto; max-width: 100%; }
.split-piece { display: grid; gap: 6px 10px; grid-template-columns: 1fr; padding: 10px 0; border-bottom: 1px solid var(--border); }
@media (min-width: 900px) { .split-piece { grid-template-columns: 2fr 1.6fr 1fr auto; align-items: end; } }
.split-piece label { font-size: .82rem; }
.split-left { font-weight: 600; margin: 12px 0 0; }
.table th a.sort-head { color: inherit; text-decoration: none; white-space: nowrap; }
.table th a.sort-head:hover { color: var(--text); text-decoration: underline; }
.bank-search input[type="search"] { flex: 3 1 220px; }
.bank-desc { word-break: break-word; }
@media (max-width: 600px) {
    .books-pl th, .books-pl td { padding: 8px 6px; font-size: .85rem; }
    .books-pl td.ind { padding-left: 12px; }
    .books-stats .stat { min-width: 0; }
    .books-stats .stat b { font-size: 1.15rem; overflow-wrap: anywhere; }
}
.books-paper { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
.books-paper-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.books-paper-row select { flex: 1 1 260px; min-width: 0; }

/* Books > 1099s and W-9s: a field with its button on one line. */
.tax-field { display: flex; gap: 8px; align-items: stretch; }
.tax-field input, .tax-field select { flex: 1 1 auto; min-width: 0; width: auto; }
.tax-field .btn { flex: 0 0 auto; }
.w9-cert { margin: 0 0 12px 1.2em; padding: 0; }
.w9-cert li { margin-bottom: 6px; }

/* The row a Books report line opened (#open-item). */
.table tr.row-open > td { background: var(--warn-soft); }
#open-item { scroll-margin-top: 140px; }

/* Route page: re-plan the rest of the trip around weather or tapped areas */
.replan { margin: 10px 0; }
.replan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.replan-taps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0; }
.replan-compare { border: 1px solid var(--border); border-left: 4px solid #2e6b1f; border-radius: 8px; padding: 10px 12px; margin: 10px 0; }
.replan-compare table { margin: 6px 0; }
.replan-new-row td { font-weight: 600; }
.replan-note { border-left: 4px solid #2e6b1f; padding-left: 8px; }
.map-tapping, .map-tapping .leaflet-interactive { cursor: crosshair; }

/* Which build is running, at the foot of every page */
.app-version { margin: 32px 0 8px; text-align: center; font-size: .75rem; color: var(--muted, #5c6a76); }
@media print { .app-version { display: none; } }

/* DO NOT CARRY customers: the badge, and the question on the route form. */
.badge-dnc { background: var(--danger-fill); color: #fff; letter-spacing: .02em; vertical-align: middle; }
.dnc-check strong { color: var(--danger); }
.dnc-box p { margin: 6px 0 8px; }
.dnc-dialog { max-width: min(460px, calc(100vw - 32px)); border: 2px solid var(--danger-line); border-radius: var(--radius); padding: 20px; background: var(--surface); color: var(--text); box-shadow: var(--menu-shadow); }
.dnc-dialog::backdrop { background: rgba(10, 15, 20, .55); }
.dnc-dialog h2 { color: var(--danger); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.dnc-dialog .dnc-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
/* Admin > Super admins */
.super-areas { margin-top: 4px; row-gap: 10px; }
.super-admin-actions { border-top: 1px solid var(--border); padding-top: 14px; }

/* A row's Edit form opened on its own full-width row (app.js). */
.table tr.row-editing > td { border-bottom: 0; }
.table tr.row-editing:not(.row-open) > td, .table tr.row-edit-panel:not(.row-open) > td { background: var(--surface-2); }
.table tr.row-edit-panel > td { padding: 4px 16px 18px; }
.table tr.row-edit-panel .form { max-width: 920px; }
.table tr.row-edit-panel form + form { margin-top: 10px; }
@media (max-width: 759px) { .table.stack td > details[open] { flex: 1 1 auto; min-width: 0; } }

/* Settings > Driver agreement: placing the signature boxes (esign-place.js). */
.esign-editor { margin-top: 18px; }
.esign-editor h3 { margin: 0 0 4px; font-size: 1rem; }
.esign-tools { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.esign-tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.esign-who { display: inline-block; min-width: 5.5em; font-weight: 600; padding-left: 8px; border-left: 4px solid; }
.esign-who.esign-driver { border-color: var(--info); }
.esign-who.esign-company { border-color: var(--warn); }
.esign-pages { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; max-width: 900px; }
.esign-page { position: relative; width: 100%; border: 1px solid var(--border); border-radius: 6px; background: var(--paper); }
.esign-page canvas { display: block; width: 100%; height: 100%; border-radius: 5px; }
.esign-editor.placing .esign-page { cursor: crosshair; }
.esign-page-num { margin-bottom: -10px; }
.esign-box { position: absolute; box-sizing: border-box; border: 2px solid; border-radius: 4px; cursor: move; touch-action: none; user-select: none; display: flex; align-items: center; min-width: 0; }
.esign-box.esign-driver { border-color: var(--info); background: rgba(31, 95, 153, .16); color: #174a78; }
.esign-box.esign-company { border-color: var(--warn); background: rgba(138, 90, 0, .16); color: #6b4600; }
.esign-box-label { flex: 1; min-width: 0; padding: 0 4px; font-size: .72rem; font-weight: 600; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.esign-box-x { position: absolute; top: -11px; right: -11px; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 15px; line-height: 19px; text-align: center; cursor: pointer; }
.esign-box-grip { position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; cursor: nwse-resize; background: linear-gradient(135deg, transparent 50%, currentColor 50%); }
.esign-order { border: 0; padding: 0; margin: 12px 0 4px; }
.esign-order legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.esign-box.esign-check .esign-box-label { display: none; }
.esign-box.esign-check { align-items: stretch; }
.esign-choices { display: flex; flex-direction: column; justify-content: space-around; width: 100%; height: 100%; min-width: 0; padding: 0 2px; overflow: hidden; }
.esign-choice { display: flex; align-items: center; gap: 3px; flex: 1; min-height: 0; font-size: .62rem; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; }
.esign-sq { flex: none; width: 8px; height: 8px; box-sizing: border-box; border: 1.5px solid currentColor; border-radius: 2px; background: var(--paper); }
.esign-choice-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.esign-box.esign-lone { align-items: center; justify-content: center; }
.esign-box.esign-lone .esign-choices { padding: 0; align-items: center; }
.esign-box.esign-lone .esign-choice { flex: none; }
.esign-box.esign-lone .esign-sq { width: 6px; height: 6px; border-width: 1px; }
.esign-box.esign-lone .esign-box-grip { display: none; }
.esign-box.esign-selected { outline: 2px dashed currentColor; outline-offset: 2px; }
/* Floats over the pages so it is in reach wherever the box is. */
.esign-choice-panel { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(440px, calc(100vw - 32px)); max-height: 50vh; max-height: 50dvh; overflow-y: auto; box-sizing: border-box; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: 0 8px 28px rgba(0, 0, 0, .22); }
.esign-choice-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.esign-choice-head h4 { margin: 0; font-size: .95rem; }
.esign-choice-panel .help { margin: 0 0 8px; }
.esign-choice-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.esign-choice-row input { flex: 1; min-width: 0; margin: 0; }
.esign-choice-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.esign-choice-pick { display: flex; gap: 6px; }
.esign-choice-pick select { width: auto; margin: 0; }
.esign-choice-panel .check { margin: 8px 0 0; }
.esign-box.esign-check .esign-box-x { top: 50%; right: auto; left: calc(100% + 4px); width: 22px; height: 22px; margin-top: -11px; font-size: 14px; line-height: 19px; }
.esign-box.esign-check.esign-near-right .esign-box-x { left: auto; right: calc(100% + 4px); }
.esign-order .check { margin: 4px 0; }
.esign-box.esign-check.esign-required { border-width: 3px; }
@media (pointer: coarse) {
    .esign-box.esign-check .esign-box-x { width: 28px; height: 28px; margin-top: -14px; font-size: 17px; line-height: 25px; }
}
#esign-status.error { color: var(--danger); font-weight: 600; }
/* Fingers: a bigger × and corner to grab. */
@media (pointer: coarse) {
    .esign-box-x { top: -15px; right: -15px; width: 30px; height: 30px; font-size: 18px; line-height: 27px; }
    .esign-box-grip { right: -9px; bottom: -9px; width: 20px; height: 20px; }
}
@media (max-width: 640px) {
    .esign-who { flex-basis: 100%; }
    .esign-box-label { font-size: .58rem; padding: 0 2px; }
}

/* Customers > Duplicates and Merge customers */
.dupe-list { list-style: none; margin: 0 0 6px; padding: 0; }
.dupe-list > li { padding: 8px 0; border-top: 1px solid var(--border); }
.dupe-list > li:first-child { border-top: 0; }
.dupe-list .check { margin: 0; }
.dupe-list .muted.small { display: block; margin-top: 2px; }
.merge-who { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.merge-who > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.merge-who .btns { display: flex; flex-wrap: wrap; gap: 6px; }
.merge-pick { border: 0; padding: 0; margin: 0 0 16px; min-width: 0; }
.merge-pick legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.merge-pick .check { margin: 6px 0; overflow-wrap: anywhere; }
.merge-pick p { margin: 0; }
.merge-moves { margin: 0 0 10px; padding-left: 20px; }
.merge-log-do { white-space: nowrap; }
.merge-log-do form + form { margin-left: 6px; }
@media (max-width: 640px) { .merge-log-do { white-space: normal; } }

/* ---- Farm: scanning, photos, pedigree (public/assets/scan.js) ---- */
.input-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.input-row > input { flex: 1 1 180px; min-width: 0; }
.scan-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.scan-box { position: relative; width: min(560px, 100%); background: #000; border-radius: 12px; overflow: hidden; }
.scan-box video { display: block; width: 100%; max-height: 70vh; object-fit: cover; }
.scan-frame { position: absolute; left: 12%; right: 12%; top: 22%; bottom: 30%; border: 3px solid rgba(255, 255, 255, .85); border-radius: 10px; pointer-events: none; }
.scan-msg { margin: 0; padding: 10px 14px; color: #fff; background: rgba(0, 0, 0, .6); }
.scan-actions { display: flex; justify-content: flex-end; padding: 0 14px 12px; background: rgba(0, 0, 0, .6); }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); }
.photo-grid figcaption { font-size: .85rem; color: var(--muted); margin-top: 4px; }
.pedigree { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: center; }
.pedigree > div { border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--surface-2); font-size: .92rem; min-height: 2.6em; }
.pedigree .ped-self { grid-row: span 4; }
.pedigree .ped-parent { grid-row: span 2; }
.tag-label { width: 3.5in; border: 1px dashed var(--border); padding: 12px; display: flex; gap: 12px; align-items: center; background: #fff; color: #000; }
.tag-label canvas, .tag-label img { width: 1.4in; height: 1.4in; }
.tag-label strong { font-size: 1.6rem; display: block; }
@media print { .tag-label { border: 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Farm statuses */
.badge-growing, .badge-harvested, .badge-received, .badge-ordered, .badge-planned { background: var(--accent-soft); color: var(--accent-ink); }
.badge-planned, .badge-ordered { background: var(--info-soft); color: var(--info); }
.badge-resting, .badge-missing { background: var(--warn-soft); color: var(--warn); }
.badge-sold, .badge-retired, .badge-removed { background: var(--neutral-soft); color: var(--neutral-text); }
.badge-died, .badge-culled, .badge-failed { background: var(--danger-soft); color: var(--danger); }
.input-sm { width: auto; display: inline-block; padding: 4px 6px; }