/* Belt-and-braces for every `hidden` attribute in this app: several elements below
   (`.office-view`, `.login-screen`, ...) also set their own `display` when shown, which
   ties with the browser's default `[hidden] { display: none }` at equal specificity --
   and the author stylesheet wins that tie, so `el.hidden = true` silently did nothing
   and the element stayed laid out on screen (that's exactly what happened to the login
   screen: it never disappeared after login). One global, maximum-specificity rule here
   closes off the whole bug class instead of chasing it element by element -- this is
   the same fix already used in public/driver/styles.css. */
[hidden] { display: none !important; }

body { padding-bottom: 40px; }

/* ---- Dark theme (explicit toggle, never automatic) --------------------------------
   Opt-in via the topbar toggle (kept in localStorage per browser), not prefers-color-
   scheme: base.css is shared with the driver app and the POD print popup, neither of
   which should ever go dark on its own. The POD preview inside the dialog is pinned to
   paper colours below so a dark portal still shows (and exports) a white document. */
/* Red used as TEXT gets its own token: the brand red is fine on white but only ~2.4:1 on
   the dark surfaces, so dark mode lifts it. (Red backgrounds keep --red.) */
:root { --red-text: #b4192a; }
html[data-theme="dark"] {
  color-scheme: dark;
  --red-text: #ff8a95;
  --ink: #eef1f4;
  --text: #e6e9ed;
  --muted: #9aa3ad;
  --paper: #14181d;
  --surface: #1d2229;
  --line: #2f3741;
  --green-soft: #12301f;
  --amber-soft: #33270c;
  --red-soft: #3a1418;
  --blue-soft: #14283d;
}
html[data-theme="dark"] .office-tab:hover { background: #262d36; }
html[data-theme="dark"] .segmented { background: #262d36; }
html[data-theme="dark"] .segment.active { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .segment-count { background: rgba(255, 255, 255, 0.12); }
html[data-theme="dark"] .primary-button, html[data-theme="dark"] .ghost-button, html[data-theme="dark"] .text-button, html[data-theme="dark"] .danger-button { background: var(--surface); color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .primary-button { background: var(--brand); border-color: var(--brand); color: white; }
html[data-theme="dark"] .danger-button { color: #ff8a95; border-color: #ff8a95; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea, html[data-theme="dark"] .toolbar input[type="search"], html[data-theme="dark"] .toolbar input[type="date"], html[data-theme="dark"] .edit-table input, html[data-theme="dark"] .form-grid input[type="number"], html[data-theme="dark"] .inline-fields input { background: #11161b; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .tag { background: #2a323c; color: var(--muted); }
html[data-theme="dark"] .tag.done { background: var(--green-soft); color: #6fd29a; }
html[data-theme="dark"] .tag.open { background: var(--red-soft); color: #ff8a95; }
html[data-theme="dark"] .tag.info { background: var(--blue-soft); color: #86b7ec; }
html[data-theme="dark"] .tag.issue { background: var(--amber-soft); color: #f0b45a; }
html[data-theme="dark"] .manager-alert { color: #ffb3ba; }
html[data-theme="dark"] .manager-alert.resolved-alert { color: #8fe0b3; }
html[data-theme="dark"] .manager-alert.info-alert { color: #a9cdf3; }
html[data-theme="dark"] .manager-alert.warn-alert { color: #f3cf8f; }
html[data-theme="dark"] .readiness { color: #f3cf8f; }
html[data-theme="dark"] .readiness.ready { color: #8fe0b3; }
html[data-theme="dark"] .drop-col-head, html[data-theme="dark"] .report-section th, html[data-theme="dark"] .log-list .log-row, html[data-theme="dark"] .pod-history-metrics { background: #242b33; }
html[data-theme="dark"] .progress-bar, html[data-theme="dark"] .unit-status { background: #2a323c; }
html[data-theme="dark"] .dialog-card, html[data-theme="dark"] dialog { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .login-card, html[data-theme="dark"] .empty-state { background: var(--surface); }
html[data-theme="dark"] code { background: #2a323c; }
html[data-theme="dark"] .route-card.has-issue { background: #2a171b; }
html[data-theme="dark"] .issue-row { background: #2c2410; }
html[data-theme="dark"] .issue-row.resolved { background: #12301f; }
html[data-theme="dark"] .office-list .issue-row { background: var(--surface); }
html[data-theme="dark"] .manager-item-row { border-top-color: #2a323c; }
html[data-theme="dark"] .manager-item-detail[open] > summary { background: var(--blue-soft); }
/* The POD document is paper, whatever the portal's theme. */
.pod-print, .pod-print * { color-scheme: light; }
.pod-print { --ink: #222226; --text: #222226; --muted: #5d6269; --surface: #ffffff; --line: #dadde1; --paper: #f4f5f7; color: var(--text); }
.theme-toggle { min-height: 34px; padding: 0 8px; font-size: 1.05rem; color: var(--muted); }

/* ---- Shell: topbar + side navigation + content ---------------------------------- */

.office-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  position: sticky;
  top: 0;
  z-index: 20;
}
.office-topbar .eyebrow { color: var(--muted); margin-bottom: 2px; }
.office-topbar h1 { color: var(--ink); font-size: 1.35rem; line-height: 1.1; }
.topbar-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.danger-button { background: white; color: var(--red-text); border-color: var(--red); }

.office-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: calc(100vh - 64px); }
.office-sidenav {
  position: sticky;
  top: 64px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 18px 12px;
  border-right: 1px solid var(--line);
  background: var(--surface);
  min-height: calc(100vh - 64px);
}
.nav-group-label { margin: 12px 10px 4px; color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.nav-group-label:first-child { margin-top: 0; }
.office-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.office-tab:hover { background: #f0f2f5; }
.office-tab.active { background: var(--brand); color: white; }
.office-tab .nav-icon { width: 20px; text-align: center; font-size: 0.95rem; opacity: 0.85; }
.office-tab .nav-label { flex: 1; }
.nav-badge { min-width: 22px; padding: 2px 7px; border-radius: 999px; background: var(--red); color: white; font-size: 0.72rem; font-weight: 800; text-align: center; }
.office-tab.active .nav-badge { background: white; color: var(--brand); }
/* The poll rewrites this every few seconds -- fixed-width digits so the time ticking over
   never changes its width and nudges the topbar around it. */
#liveStatus { font-variant-numeric: tabular-nums; }

/* Sidebar "Online" panel (who's logged in / live) -- desktop only, see the 900px rule. */
.nav-online { margin-top: 12px; }
.nav-online-summary { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 4px 10px; border-radius: 6px; color: var(--muted); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; list-style: none; }
.nav-online-summary::-webkit-details-marker { display: none; }
.nav-online-summary::after { content: "\25BE"; margin-left: auto; font-size: 0.8rem; transition: transform 0.15s; }
.nav-online:not([open]) .nav-online-summary::after { transform: rotate(-90deg); }
.nav-online-summary:hover { background: #f0f2f5; }
.nav-online-count { padding: 1px 7px; border-radius: 999px; background: var(--green); color: white; font-size: 0.68rem; letter-spacing: 0; text-transform: none; }
.nav-online-list { display: grid; gap: 1px; max-height: 45vh; overflow-y: auto; }
.nav-online-person { display: grid; grid-template-columns: 10px minmax(0, 1fr); column-gap: 10px; align-items: center; width: 100%; padding: 5px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.nav-online-person:hover { background: #f0f2f5; }
.nav-online-person .online-dot { width: 8px; height: 8px; box-shadow: none; }
.nav-online-name { overflow: hidden; font-size: 0.86rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nav-online-sub { grid-column: 2; overflow: hidden; color: var(--muted); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.nav-online-sub.doing { color: var(--green); font-weight: 700; }
.nav-online-empty { margin: 2px 10px; color: var(--muted); font-size: 0.8rem; }
.nav-online-more { margin: 4px 0 0; padding: 4px 10px; border: 0; background: none; color: var(--blue); font: inherit; font-size: 0.78rem; font-weight: 700; text-align: left; cursor: pointer; }
html[data-theme="dark"] .nav-online-summary:hover, html[data-theme="dark"] .nav-online-person:hover { background: #262d36; }

.office-shell { max-width: 1440px; width: 100%; margin: 0 auto; padding: 22px 28px 60px; min-width: 0; }

/* ---- Common building blocks ------------------------------------------------------- */

.section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.section-heading h2 { margin: 0; font-size: 1.35rem; color: var(--ink); }
.section-heading p { margin: 0; color: var(--muted); font-size: 0.86rem; }
.section-heading-sub { margin-top: 26px; }
.section-heading-sub h2 { font-size: 1.1rem; }
.section-heading-actions { display: flex; align-items: center; gap: 4px; flex: none; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar input[type="search"] { flex: 1 1 260px; min-width: 200px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 7px; background: white; }
.toolbar select { width: auto; min-width: 160px; min-height: 40px; padding: 6px 10px; }
.segmented { display: inline-flex; padding: 3px; border-radius: 8px; background: #e7ebef; }
.segment { min-height: 34px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; white-space: nowrap; }
.segment.active { background: white; color: var(--ink); box-shadow: 0 1px 3px rgba(16, 24, 32, 0.12); }
.segment-count { display: inline-block; min-width: 1.4em; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: rgba(16, 24, 32, 0.08); font-size: 0.74rem; font-weight: 800; text-align: center; }
.segment-count:empty { display: none; }
.segment.active .segment-count { background: var(--brand); color: white; }

.bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 8px 12px; border: 1px solid var(--blue); border-radius: 8px; background: var(--blue-soft); }
.bulk-bar strong { color: var(--blue); margin-right: 6px; }
.checkbox-field.compact { margin: 0; font-size: 0.86rem; white-space: nowrap; }
.toolbar input[type="date"] { min-height: 40px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 7px; background: white; width: auto; }
.card-select { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; vertical-align: middle; }
.card-select input { width: 18px; height: 18px; cursor: pointer; }
.route-card.selected { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-soft); }
.route-card.archived { opacity: 0.75; }
.issue-row .issue-select { float: right; margin-left: 8px; }
.issue-row.selected { outline: 2px solid var(--blue); }

.empty-state { padding: 26px 18px; border: 1px dashed var(--line); border-radius: 8px; background: var(--surface); color: var(--muted); text-align: center; }
.empty-state strong { display: block; color: var(--ink); margin-bottom: 4px; }

.kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.kpi { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.kpi strong { color: var(--ink); font-size: 1.5rem; line-height: 1.1; }
.kpi span { color: var(--muted); font-size: 0.8rem; font-weight: 700; }
.kpi.attention { border-color: var(--red); background: var(--red-soft); }
.kpi.attention strong { color: var(--red-text); }
.kpi.good strong { color: var(--green); }

.progress-bar { height: 8px; border-radius: 999px; background: #e7edf2; overflow: hidden; margin-top: 10px; }
.progress-bar > span { display: block; height: 100%; background: var(--green); }
.progress-row { display: grid; gap: 4px; }
.progress-row .progress-bar { margin-top: 0; }
.progress-row > span { color: var(--muted); font-size: 0.78rem; font-weight: 700; }

.manager-alert { display: grid; gap: 3px; margin: 10px 0; padding: 10px 12px; border-left: 4px solid var(--red); border-radius: 0 6px 6px 0; background: var(--red-soft); color: #842828; font-size: 0.85rem; }
.manager-alert strong { font-size: 0.9rem; }
.manager-alert.compact { margin: 8px 0; padding: 7px 9px; font-size: 0.78rem; }
.manager-alert.compact strong { font-size: 0.8rem; }
.manager-alert.resolved-alert { border-left-color: var(--green); background: var(--green-soft); color: #145839; }
.cold-route :is(.needs-planner, .needs-staff, .needs-owner):not(.cold-keep), .cold-route [data-cold-hide] { display: none !important; }
.manager-alert.info-alert { border-left-color: var(--blue); background: var(--blue-soft); color: #1f4c7a; }
.manager-alert.warn-alert { border-left-color: var(--amber); background: var(--amber-soft); color: #6b430a; }

.actions-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions-row button, .actions-row .ghost-button { white-space: nowrap; }
.ghost-button.small, .text-button.small, .primary-button.small, .danger-button.small { min-height: 32px; padding: 0 10px; font-size: 0.8rem; }
.link-button { display: inline-flex; align-items: center; text-decoration: none; }
.panel-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.form-grid-full { grid-column: 1 / -1; }
.form-grid input[type="number"] { width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: white; }

/* ---- Dashboard layout + activity feed ---------------------------------------------- */

.dashboard-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.dashboard-aside { position: sticky; top: 80px; }
.dashboard-aside .section-heading-sub { margin-top: 26px; }
.activity-feed { display: grid; gap: 6px; max-height: calc(100vh - 200px); overflow-y: auto; padding-right: 4px; }
.activity-item { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); font-size: 0.82rem; }
.activity-item::before { content: ""; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--muted); }
.activity-item.tone-issue::before { background: var(--red); }
.activity-item.tone-good::before { background: var(--green); }
.activity-item.tone-info::before { background: var(--blue); }
.activity-item.tone-warn::before { background: var(--amber); }
.activity-item .activity-summary { color: var(--ink); overflow-wrap: anywhere; }
.activity-item .activity-meta { color: var(--muted); font-size: 0.74rem; margin-top: 2px; }
.activity-item .activity-meta button { font-size: 0.74rem; }
.activity-item.fresh { border-color: var(--brand); }
/* One-way "archive from view" per entry -- see activity.mjs's ARCHIVE_KEY. Small and
   quiet by default (this is a dismiss action sitting next to a lot of other small
   text, not a primary action) but with a large-enough hit target and a hover state
   so it doesn't read as decorative. */
.activity-dismiss { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; flex: none; }
.activity-dismiss:hover, .activity-dismiss:focus-visible { background: var(--red-soft); color: var(--red-text); outline: none; }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 2px 16px; }
.checkbox-grid .checkbox-field { margin: 4px 0; font-size: 0.88rem; }
.log-details { margin-top: 12px; }
.log-details > summary { cursor: pointer; font-weight: 700; color: var(--muted); }
.log-list { display: grid; gap: 4px; margin-top: 8px; max-height: 260px; overflow-y: auto; font-size: 0.78rem; }
.log-list .log-row { display: flex; gap: 10px; padding: 5px 8px; border-radius: 5px; background: #f7f9fb; }
.log-list .log-row.bad { background: var(--red-soft); color: var(--red-text); }
.log-list .log-row .muted { flex: none; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85em; background: #eef2f5; padding: 1px 5px; border-radius: 4px; }

/* ---- Dashboard groups + route cards ------------------------------------------------ */

.dashboard-group { margin-bottom: 24px; }
.dashboard-group > h3 { margin-bottom: 10px; color: var(--ink); font-size: 1rem; }
.dashboard-group.attention-group { padding: 14px 16px 4px; margin-bottom: 28px; border: 1px solid var(--red); border-radius: 8px; background: rgba(180, 25, 42, 0.04); }
.dashboard-group.attention-group > h3 { display: flex; align-items: center; gap: 8px; color: var(--red-text); font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; }
.dashboard-group.attention-group > h3::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--red); flex: none; }

.route-card-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
/* Tiles: several routes side by side rather than one long column, so a day running
   up to ~5 routes is glanceable without scrolling. Each .route-card's own
   container-type: inline-size (above) makes it collapse to its narrower stacked
   layout automatically once it's genuinely this narrow, the same @container rules
   the plain single-column Routes-tab list already relies on -- no separate layout
   needed here, just more columns. Compound selector (not source order) is what beats
   .route-card-grid's own single-column default above, since both classes sit on the
   same element and a plain .dashboard-tile-grid rule here would depend on staying
   below it in the file. */
.route-card-grid.dashboard-tile-grid { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); align-items: start; }
.dashboard-main { min-width: 0; }
.route-card {
  padding: 16px 20px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.08);
  cursor: pointer;
  /* A container query can't target the SAME element that establishes the container
     (that's a no-op, self-referential containment is disallowed) -- so this has to sit
     on the outer .route-card while .route-card-inner (below) is what the @container
     rules actually restyle. That inner wrapper's rendered width then reflects THIS
     card's own column in whatever grid it's sitting in -- collapsing sooner in
     dashboard-tile-grid, where several cards sit side by side, than in the
     single-column Routes-tab list, even when both grids are the same overall width. */
  container-type: inline-size;
}
.route-card:hover, .route-card:focus-visible { border-color: var(--brand); outline: none; box-shadow: 0 2px 8px rgba(16, 24, 32, 0.14); }
.route-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.route-card.has-issue { border-color: var(--red); border-width: 2px; padding: 15px 19px 13px; background: var(--red-soft); }
.route-card-inner {
  display: grid;
  grid-template-columns: minmax(200px, 1.2fr) minmax(150px, 1fr) minmax(110px, 0.7fr) minmax(120px, 0.8fr) minmax(150px, 0.9fr);
  align-items: center;
  gap: 10px 20px;
}
.route-card-primary, .route-card-field { min-width: 0; }
.route-card-primary h3 { margin: 0 0 4px; color: var(--ink); font-size: 1.2rem; text-transform: uppercase; }
.route-card-primary p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.route-card-field { display: grid; align-content: center; gap: 4px; }
.route-card-field > span { color: var(--muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.route-card-field > strong { color: var(--ink); font-size: 0.98rem; overflow-wrap: anywhere; }
.route-card-field > strong.unset { color: var(--muted); font-weight: 600; }
.route-card-status { display: flex; justify-content: stretch; min-width: 0; }
.route-status-label { display: grid; width: 100%; min-height: 42px; place-items: center; padding: 6px 10px; border-radius: 6px; font-size: 0.78rem; font-weight: 800; text-align: center; text-transform: uppercase; letter-spacing: 0.02em; }
.route-status-label.attention { background: var(--amber-soft); color: var(--amber); }
.route-status-label.progress { background: var(--blue-soft); color: var(--blue); }
.route-status-label.ready { background: var(--green-soft); color: var(--green); }
.route-status-label.issue { background: var(--red); color: white; }
.route-status-label.muted { background: #eef2f5; color: var(--muted); }
html[data-theme="dark"] .route-status-label.muted { background: #262d36; color: #c3cad2; }
.route-card-progress { grid-column: 1 / -1; }
.route-card-detail { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; padding-top: 10px; border-top: 1px solid var(--line); }
.route-card.has-issue .route-card-detail { border-top-color: rgba(180, 25, 42, 0.2); }
.route-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; min-width: 0; color: var(--muted); font-size: 0.82rem; }
.route-card-detail > .manager-alert { grid-column: 1 / -1; }
.route-card .route-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; grid-column: 2; grid-row: 1; }
.route-card .route-card-actions button { white-space: nowrap; }

/* ---- Route detail ------------------------------------------------------------------ */

.back-link { margin-bottom: 8px; padding: 0; color: var(--muted); }
.back-link:hover { color: var(--brand); }
.detail-header { display: grid; gap: 12px; margin-bottom: 16px; }
.detail-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.detail-title-row h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; color: var(--ink); font-size: 1.6rem; }
.detail-subtitle { margin: 4px 0 0; color: var(--muted); font-size: 0.95rem; }
.detail-subtitle strong { color: var(--ink); }
.detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fact { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); min-width: 0; }
.fact > span { color: var(--muted); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.fact > strong { color: var(--ink); font-size: 1rem; overflow-wrap: anywhere; }
.fact > small { color: var(--muted); font-size: 0.76rem; }
.fact.good > strong { color: var(--green); }
.fact.warn > strong { color: var(--amber); }
.fact.bad > strong { color: var(--red-text); }
.fact .progress-bar { margin-top: 6px; }
.readiness { display: grid; gap: 4px; padding: 10px 12px; border-left: 4px solid var(--amber); border-radius: 0 6px 6px 0; background: var(--amber-soft); font-size: 0.85rem; }
.readiness.ready { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.detail-loading { padding: 40px; text-align: center; color: var(--muted); }

.drop-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; align-items: start; }
.drop-col { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); overflow: hidden; }
.drop-col.has-load-issue { border-color: var(--red); }
.drop-col-head { padding: 12px 14px; border-bottom: 1px solid var(--line); background: #f7f9fb; }
.drop-col-head h3 { font-size: 1rem; margin-bottom: 4px; }
.drop-title-button { background: none; border: 0; padding: 0; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer; text-align: left; }
.drop-title-button:hover { color: var(--brand); text-decoration: underline; }
.drop-col-head .muted { color: var(--muted); font-size: 0.82rem; margin: 2px 0; }
.drop-col-head .lock-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.drop-col-head .lock-row .tag { min-height: 24px; font-size: 0.72rem; }
.drop-col-body { padding: 10px 14px 14px; display: grid; gap: 10px; }
.drop-col-tools { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

.drop-note-box { padding: 10px 12px; border-radius: 6px; border: 1px solid var(--amber); background: var(--amber-soft); font-size: 0.84rem; }
.drop-note-box p { margin: 0; }
.drop-note-box p + p { margin-top: 4px; }
.drop-note-box .muted { font-size: 0.74rem; }
.drop-note-label { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--amber); }

.order-block { border-top: 1px solid var(--line); padding-top: 8px; }
.order-block:first-child { border-top: 0; padding-top: 0; }
.order-block h4 { font-size: 0.88rem; margin-bottom: 4px; }
.order-block .progress-bar { margin-top: 4px; margin-bottom: 6px; }
.order-block > details > summary { cursor: pointer; padding: 4px 0; }

.reference-list { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.reference-list > .eyebrow { color: var(--muted); margin-bottom: 4px; }
.reference-row { padding: 4px 0; border-top: 1px solid #eef1f4; font-size: 0.78rem; }
.reference-row-top { display: flex; align-items: baseline; gap: 8px; }
.reference-row-top .ref-seq { color: var(--muted); min-width: 18px; flex: none; }
.reference-row-desc { margin-top: 1px; color: var(--muted); font-size: 0.74rem; }

.grouping-review-panel { margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--amber); border-radius: 8px; background: var(--amber-soft); }
.grouping-review-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.grouping-review-head h3 { margin: 0 0 2px; font-size: 1.02rem; color: var(--ink); }
.grouping-review-head .muted { color: var(--muted); font-size: 0.82rem; margin: 0; }
.grouping-review-list { display: grid; gap: 8px; margin-top: 12px; }
.grouping-review-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); flex-wrap: wrap; }
.grouping-review-row .muted { color: var(--muted); font-size: 0.8rem; margin: 2px 0 6px; }
.hansa-line-list { margin: 0; padding-left: 18px; font-size: 0.78rem; color: var(--muted); }

.pickup-requests-panel { margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--blue); border-radius: 8px; background: var(--blue-soft); }
.pickup-requests-panel h3 { margin: 0 0 2px; font-size: 1.02rem; color: var(--ink); }
.pickup-requests-panel > .muted { color: var(--muted); font-size: 0.82rem; margin: 0; }
.pickup-requests-list { display: grid; gap: 8px; margin-top: 12px; }
.pickup-request-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); flex-wrap: wrap; }
.pickup-request-row .muted { color: var(--muted); font-size: 0.8rem; margin: 2px 0 0; }
.pickup-request-actions { display: flex; gap: 8px; }

/* Route changes (route-changes.mjs): delivery order panel, cancelled orders, returns. */
.rc-order-panel, .rc-returns-panel { margin-bottom: 18px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.rc-returns-panel { border-color: var(--amber); background: var(--amber-soft); }
.rc-returns-panel > summary { cursor: pointer; list-style-position: outside; }
.rc-returns-panel > summary h3 { display: inline; }
.rc-check-all { margin-top: 10px; }
.rc-panel-head h3 { margin: 0 0 2px; font-size: 1.02rem; color: var(--ink); }
.rc-panel-head .muted { margin: 0; color: var(--muted); font-size: 0.82rem; }
.rc-order-list { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.rc-order-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.rc-order-row.locked { background: var(--paper); }
.rc-pos { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 999px; background: var(--paper); font-weight: 800; font-size: 0.82rem; }
.rc-name { min-width: 0; overflow-wrap: anywhere; font-size: 0.9rem; }
.rc-name span { color: var(--muted); }
.rc-move { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 4px; }
.rc-move .ghost-button.small { min-width: 40px; min-height: 40px; padding: 0; font-size: 1.05rem; }
@media (max-width: 560px) {
  .rc-order-row { grid-template-columns: 28px minmax(0, 1fr) auto; }
  .rc-order-row > .tag { grid-column: 2; justify-self: start; }
  .rc-order-row > .rc-move { grid-column: 3; grid-row: 1 / span 2; }
}
.rc-order-change { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0 0; font-size: 0.8rem; overflow-wrap: anywhere; }
.rc-order-change.cancelled { padding: 6px 8px; border-radius: 6px; background: var(--red-soft); color: var(--red-text, var(--red)); }
.order-block.rc-cancelled-order > details { opacity: 0.7; }
.rc-panel-order { display: grid; gap: 2px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.86rem; }
.rc-panel-order:last-child { border-bottom: 0; }
.rc-skip-line { margin: 6px 0; padding: 8px 10px; border-radius: 6px; background: var(--amber-soft); font-size: 0.85rem; }
.rc-skip-line.cancelled { background: var(--red-soft); }
.rc-return-list { display: grid; gap: 6px; margin-top: 10px; }
.rc-return-list h3 { margin: 6px 0 0; font-size: 0.95rem; }
.rc-return-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.rc-return-row.checked-in { opacity: 0.8; }
.rc-return-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 240px; overflow-wrap: anywhere; font-size: 0.86rem; }
.rc-return-main .muted { font-size: 0.8rem; }
.rc-return-why { font-size: 0.8rem; font-weight: 700; color: var(--amber); }
.rc-return-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.78rem; }
.rc-return-state small { color: var(--muted); overflow-wrap: anywhere; }
.rc-returns-dialog .dialog-card { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; }
.kpi-button { text-align: left; font: inherit; cursor: pointer; }
.kpi-button:hover { border-color: var(--brand); }

.manager-item-row {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 5px 0;
  font-size: 0.82rem;
  border-top: 1px solid #eef1f4;
}
.manager-item-row:first-of-type { border-top: 0; }
.manager-item-detail > summary { cursor: pointer; list-style: none; }
.manager-item-detail > summary::-webkit-details-marker { display: none; }
.manager-item-detail[open] > summary { background: var(--blue-soft); }
.hansa-lines { margin: 0 0 6px 34px; padding: 7px 10px; border-left: 2px solid var(--line); color: var(--muted); font-size: 0.78rem; }
.hansa-lines > div { margin: 3px 0; }
.unit-status { padding: 3px 6px; color: var(--muted); background: #eef2f5; border-radius: 4px; font-size: 0.7rem; white-space: nowrap; }
.unit-status.loaded { color: var(--green); background: var(--green-soft); }
.unit-status.delivered { color: white; background: var(--green); }
.unit-status.issue { color: var(--red-text); background: var(--red-soft); }
.unit-status.exception { color: var(--amber); background: var(--amber-soft); }
.manager-item-row .seq { color: var(--muted); font-weight: 800; }
.manager-item-row .desc { overflow-wrap: anywhere; }
.manager-item-row .item-tools { display: flex; gap: 4px; align-items: center; }
.manager-item-row .item-tools .text-button { min-height: 24px; padding: 0 6px; font-size: 0.72rem; color: var(--blue); text-decoration: underline; }

/* ---- Issues ------------------------------------------------------------------------- */

.issue-list { display: grid; gap: 8px; margin: 0 0 10px; }
.issue-list > h4 { margin: 0; font-size: 0.88rem; }
.issue-row { padding: 10px 12px; border-radius: 6px; background: var(--amber-soft); font-size: 0.82rem; }
.issue-row.resolved { background: var(--green-soft); }
.issue-row .issue-row-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex-wrap: wrap; }
.issue-row .issue-row-top strong { font-size: 0.92rem; }
.issue-row p { margin: 5px 0; }
.issue-context { color: var(--muted); }
.issue-context a, .issue-context button { color: var(--blue); }
.issue-row .issue-row-actions { display: flex; gap: 8px; margin-top: 8px; }
.office-list { display: grid; gap: 10px; }
.office-list .issue-row { padding: 14px 16px; border: 1px solid var(--line); background: var(--surface); }
.office-list .issue-row:not(.resolved) { border-left: 4px solid var(--red); }
.office-list .issue-row.resolved { border-left: 4px solid var(--green); }

/* ---- Reports ------------------------------------------------------------------------ */

.report-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 8px; }
.report-metrics > div { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.report-metrics strong { color: var(--ink); font-size: 1.25rem; }
.report-metrics span { color: var(--muted); font-size: 0.8rem; }
.report-section { margin-top: 22px; }
.report-section h3 { font-size: 1rem; margin-bottom: 8px; }
.report-section table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.report-section th, .report-section td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; font-size: 0.86rem; vertical-align: middle; }
.report-section th { background: #f7f9fb; color: var(--muted); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.04em; }
.report-section tr:last-child td { border-bottom: 0; }
.report-section td.num, .report-section th.num { text-align: right; font-variant-numeric: tabular-nums; }
.row-link { background: none; border: 0; padding: 0; color: var(--blue); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.table-wrap { overflow-x: auto; }

/* ---- Settings ----------------------------------------------------------------------- */

/* Wraps onto a second line when the window is too narrow for every tab (a phone): as
   a single no-wrap strip it ran off the right edge, the last tabs couldn't be tapped. */
.settings-nav { display: flex; flex-wrap: wrap; gap: 10px 18px; max-width: 100%; margin-bottom: 16px; align-items: flex-end; }
/* Grouped (v0.8.17): a small label over each group's tabs. */
.settings-nav-group { display: grid; gap: 4px; min-width: 0; max-width: 100%; }
.settings-nav-label { margin: 0; color: var(--muted); font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.settings-nav .segmented { display: flex; flex-wrap: wrap; gap: 2px; max-width: 100%; }
.settings-section-title { margin: -4px 0 12px; font-size: 1.1rem; font-weight: 800; color: var(--ink); }
/* minmax(0, 1fr) rather than the implicit auto column: a grid item's min-width is its
   content's, so one wide child (a customer-override row, a long webhook URL) pushed
   the whole Settings page wider than a phone screen and it scrolled sideways. */
.settings-section { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.settings-panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.settings-panel-heading .eyebrow { margin-bottom: 2px; }
.settings-panel-heading .muted { margin: 0; color: var(--muted); font-size: 0.84rem; }
.settings-panel-heading > button, .settings-panel-heading > .ghost-button { flex: none; }
.settings-panel-buttons { display: flex; flex: none; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.settings-list { display: grid; gap: 8px; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); flex-wrap: wrap; }
/* A webhook URL or token label is one unbroken string: let it wrap anywhere instead of
   stretching the row (and the page) past the screen edge. */
.settings-row-main { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; overflow-wrap: anywhere; }
.settings-row-main > * { min-width: 0; }
.settings-row-actions { display: flex; gap: 6px; flex: none; }
.settings-row-actions .text-button { color: var(--blue); }
.checkbox-field { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-weight: 500; }
.checkbox-field input[type="checkbox"] { width: 18px; height: 18px; }
.company-logo-row { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
.company-logo-preview { max-height: 56px; max-width: 160px; object-fit: contain; border: 1px solid var(--line); background: #fff; padding: 4px; }
.color-field-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.color-field-row input[type="color"] { width: 44px; height: 32px; padding: 2px; border: 1px solid var(--line); border-radius: 4px; background: none; cursor: pointer; }
/* Settings -> Online */
.nav-count { display: inline-block; min-width: 20px; margin-left: 4px; padding: 1px 6px; border-radius: 999px; background: var(--green); color: white; font-size: 0.72rem; font-weight: 800; text-align: center; }
.online-group { margin-top: 14px; }
.online-group > summary { cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 6px 0 10px; font-weight: 700; list-style: none; }
.online-group > summary::-webkit-details-marker { display: none; }
.online-group > summary::before { content: "\25B8"; color: var(--muted); transition: transform 0.15s; }
.online-group[open] > summary::before { transform: rotate(90deg); }
.online-group-count { color: var(--muted); font-weight: 600; }
.online-row .settings-row-main { flex: 1 1 260px; min-width: 0; }
.online-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--muted); opacity: 0.45; box-shadow: 0 0 0 3px transparent; }
.online-dot.live { opacity: 1; }
.online-dot.live { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.online-meta { width: 100%; padding-left: 20px; font-size: 0.85rem; color: var(--muted); }
.online-status { flex: none; font-size: 0.85rem; color: var(--muted); }
.online-device-dot { display: inline-block; width: 6px; height: 6px; margin-right: 7px; border-radius: 50%; background: var(--muted); opacity: 0.45; vertical-align: middle; }
.online-device-dot.live { background: var(--green); opacity: 1; }
.online-live-text { color: var(--green); font-weight: 700; }
.online-this { color: var(--muted); font-style: italic; }
.online-status.live { color: var(--green); font-weight: 700; }
.small-note { font-size: 0.8rem; white-space: nowrap; }
[data-settings-section="online"] .settings-panel-heading { flex-wrap: wrap; }
.about-usage small { display: block; margin-top: 4px; font-size: 0.78rem; line-height: 1.35; font-weight: 400; }
.settings-row-badge { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--surface-2, #eee); border-radius: 4px; padding: 2px 6px; }
.danger-panel { border-color: var(--red); }
.edit-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.edit-table th { text-align: left; color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; padding: 6px 8px; }
.edit-table td { padding: 4px 8px; vertical-align: middle; }
.edit-table input[type="text"], .edit-table input[type="number"], .edit-table input[type="email"] { width: 100%; min-height: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: white; }
.edit-table td.narrow { width: 90px; }
.edit-table .text-button { color: var(--red-text); }
.inline-fields { display: flex; align-items: center; gap: 8px; }
.inline-fields input { width: 80px; min-height: 40px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; }

/* Settings -> Notifications -> Customer texts */
.field-hint { margin: 4px 0 0; color: var(--muted); font-size: 0.78rem; }
#smsPanel input[type="password"], #smsPanel input[type="tel"], #smsPanel input[type="time"], #smsPanel input[type="number"] { width: 100%; min-height: 44px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px; background: white; }
#smsPanel .inline-fields input[type="time"] { width: 124px; }
#smsPanel .settings-panel-heading .tag { flex: none; }
.sms-message-list { display: grid; gap: 12px; margin-top: 16px; }
.sms-message { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.sms-message .checkbox-field { margin: 0; font-weight: 700; }
.sms-message .sms-when { margin: 2px 0 8px 26px; color: var(--muted); font-size: 0.8rem; }
.sms-preview { margin-top: 8px; max-width: 420px; padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: #eef2f6; font-size: 0.86rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.sms-count { margin-top: 4px; color: var(--muted); font-size: 0.78rem; }
.sms-count.warn { color: var(--amber); font-weight: 600; }
.sms-placeholder-list { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin-top: 8px; font-size: 0.82rem; }
.sms-placeholder-list button { justify-self: start; padding: 1px 6px; border: 1px solid var(--line); border-radius: 5px; background: transparent; color: inherit; font: 600 0.8rem ui-monospace, monospace; cursor: pointer; }
.sms-summary { margin: 12px 0 0; font-size: 0.84rem; }
.sms-test-row { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.sms-test-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.sms-test-fields input[type="tel"] { flex: 1 1 150px; width: auto; }
.sms-test-fields select { flex: 1 1 190px; width: auto; }
.sms-test-fields button { flex: none; }
.log-list .log-row .sms-log-main { display: grid; gap: 2px; min-width: 0; }
.log-list .log-row .sms-log-body { color: var(--muted); overflow-wrap: anywhere; }
.log-list .log-row.skipped { background: var(--amber-soft); }
.edit-table td.check { width: 70px; text-align: center; }
html[data-theme="dark"] #smsPanel input { background: #11161b; color: var(--ink); border-color: var(--line); }
html[data-theme="dark"] .sms-preview { background: #1c242c; }
.reason-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.reason-chips button { min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: white; font-size: 0.78rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.reason-chips button:hover { background: var(--blue-soft); border-color: var(--blue); }
.issue-row.overdue { border-left-color: var(--red); background: #fff3f4; }
.issue-row .overdue-tag { background: var(--red); color: white; }
/* Role-based affordances: the server enforces every rule; this just hides buttons a
   Viewer / Planner can't use so the portal doesn't offer dead ends. */
[data-role="viewer"] .needs-planner, [data-role="viewer"] .needs-staff, [data-role="planner"] .needs-staff { display: none !important; }
/* Settings saving is Owner-only (v0.7.2). Anyone else sees the settings read-only:
   the save buttons are hidden, the fields are disabled through their <fieldset>
   (manager.mjs), and a short note explains why. */
body:not([data-role="owner"]) .needs-owner { display: none !important; }
.owner-fieldset { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.owner-fieldset:disabled input, .owner-fieldset:disabled select, .owner-fieldset:disabled textarea { opacity: 0.75; cursor: not-allowed; }
.owner-only-note { display: none; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--blue-soft); color: var(--ink); font-size: 0.88rem; }
body[data-role]:not([data-role="owner"]) .owner-only-note { display: block; }
.token-reveal { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; word-break: break-all; user-select: all; }

/* ---- Login / bootstrap screen ------------------------------------------------ */
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; }
.login-card { width: 100%; max-width: 360px; padding: 24px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.login-card input, .login-card select { width: 100%; margin-bottom: 4px; }
.login-card .primary-button { width: 100%; margin-top: 12px; }
.form-error { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: var(--red-soft); color: var(--red-text); font-size: 0.85rem; }
.who-am-i { white-space: nowrap; }
.app-version { white-space: nowrap; font-size: 0.76rem; }
.login-card .app-version { display: block; margin-top: 14px; text-align: center; font-size: 0.76rem; }

#officeAccountDialog input, #officeAccountDialog select { width: 100%; }


#podDialog { width: min(94vw, 780px); }
.pod-availability { margin: 0 0 12px; font-size: 0.82rem; }

.loaded-by { color: var(--green); font-weight: 700; }

/* ---- POD search list ---------------------------------------------------------- */
.pod-history-list { display: grid; gap: 10px; }
.pod-history-row {
  display: grid;
  width: 100%;
  gap: 10px;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  box-shadow: 0 1px 3px rgba(16, 24, 32, 0.08);
  cursor: pointer;
  font: inherit;
}
.pod-history-row:hover, .pod-history-row:focus-visible { border-color: var(--brand); }
.pod-history-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Pending drops are one-line stubs: no POD to show yet, so no facts/metrics block. */
.pod-history-row--pending { gap: 6px; padding: 10px 16px; border-left: 4px solid var(--amber); box-shadow: none; }
.pod-history-row--pending .pod-history-title { font-size: 0.95rem; }
.pod-history-row--pending .pod-history-status { min-width: 0; min-height: 26px; padding: 3px 8px; font-size: 0.7rem; }
.pod-history-row--pending .pod-history-subtitle { margin-top: 0; }
.pod-history-group { margin: 8px 0 -2px; color: var(--muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.pod-history-group:first-child { margin-top: 0; }
.pod-history-head, .pod-history-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pod-history-title { min-width: 0; font-size: 1.05rem; font-weight: 800; text-transform: uppercase; overflow-wrap: anywhere; }
.pod-history-status { display: grid; min-width: 130px; min-height: 34px; place-items: center; padding: 5px 10px; border-radius: 5px; font-size: 0.76rem; font-weight: 800; text-align: center; text-transform: uppercase; }
.pod-history-status.complete { background: var(--green-soft); color: var(--green); }
.pod-history-status.pending { background: var(--amber-soft); color: var(--amber); }
.pod-history-subtitle { margin-top: -4px; color: var(--muted); font-size: 0.88rem; }
.pod-history-facts, .pod-history-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pod-history-facts > span, .pod-history-metrics > span { display: grid; align-content: start; gap: 3px; min-width: 0; }
.pod-history-facts strong, .pod-history-metrics strong { font-size: 0.95rem; overflow-wrap: anywhere; }
.pod-history-label { color: var(--muted); font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.pod-history-metrics { gap: 0; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f8f9fa; }
.pod-history-metrics > span { padding: 0 12px; text-align: center; }
.pod-history-metrics > span + span { border-left: 1px solid var(--line); }
.pod-history-metrics strong { font-size: 1.05rem; }
.pod-history-foot { color: var(--muted); font-size: 0.82rem; }
.pod-history-foot > span:last-child { color: var(--brand); font-weight: 700; text-align: right; }

.gallery-grid .thumb { aspect-ratio: 1; cursor: pointer; }
.gallery-grid img { width: 100%; }

/* ---- Drop panel + timeline ------------------------------------------------------- */
.wide-dialog { width: min(96vw, 1100px); }
.dialog-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.dialog-head h2 { margin: 0; }
.dialog-head .muted { margin: 4px 0 0; }
.drop-dialog-body { display: grid; gap: 16px; max-height: 76vh; overflow-y: auto; padding-right: 4px; }
.drop-dialog-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.9fr); gap: 16px; align-items: start; }
.drop-section { padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.drop-section > h4 { margin: 0 0 8px; font-size: 0.92rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.contact-actions a { color: var(--blue); font-weight: 700; }
.timeline { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.timeline li { display: grid; grid-template-columns: 72px 14px minmax(0, 1fr); gap: 8px; align-items: start; padding: 4px 0; font-size: 0.84rem; }
.timeline .tl-time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 0.78rem; padding-top: 2px; }
.timeline .tl-dot { width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--line); position: relative; }
.timeline li:not(:last-child) .tl-dot::after { content: ""; position: absolute; left: 4px; top: 12px; width: 2px; height: calc(100% + 6px); background: var(--line); }
.timeline .tl-dot.good { background: var(--green); }
.timeline .tl-dot.info { background: var(--blue); }
.timeline .tl-dot.issue { background: var(--red); }
.timeline .tl-dot.warn { background: var(--amber); }
.timeline .tl-text strong { color: var(--ink); }
.timeline .tl-text span { color: var(--muted); }
.timeline .tl-gap { color: var(--muted); font-size: 0.74rem; }
.items-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.items-table th, .items-table td { padding: 6px 8px; border-bottom: 1px solid #eef1f4; text-align: left; vertical-align: top; }
.items-table th { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.items-table td.seq { color: var(--muted); font-weight: 800; white-space: nowrap; }
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.photo-card { display: grid; gap: 4px; }
.photo-card .thumb { aspect-ratio: 4 / 3; }
.photo-card figcaption { font-size: 0.72rem; color: var(--muted); display: flex; justify-content: space-between; gap: 6px; }
.photo-card figcaption a { color: var(--blue); font-weight: 700; }
.map-link { color: var(--blue); font-weight: 700; }
.detail-timeline { margin-top: 4px; }
.detail-timeline > summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 8px 0; }
.detail-timeline .timeline { padding: 4px 0 4px 4px; }
@media (max-width: 800px) {
  .drop-dialog-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---- Responsive --------------------------------------------------------------------- */

/* Card columns collapse by the card's OWN rendered width (container-type: inline-size
   is on .route-card itself), not the viewport -- so this fires for the Routes tab's
   full-width rows only on a genuinely narrow window, but fires for a
   dashboard-tile-grid card much sooner, since several of those sit side by side and
   each one is only a few hundred pixels wide even on a wide screen. */
@container (max-width: 960px) {
  .route-card-inner { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); }
  .route-card-status { grid-column: 1 / -1; }
  .route-card-detail { grid-column: 1 / -1; }
}
@container (max-width: 560px) {
  .route-card { padding: 14px; }
  .route-card-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .route-card-primary, .route-card-status, .route-card-detail { grid-column: 1 / -1; }
  .route-card-detail { grid-template-columns: minmax(0, 1fr); }
  .route-card .route-card-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
}

@media (max-width: 1180px) {
  .dashboard-layout { grid-template-columns: minmax(0, 1fr); }
  .dashboard-aside { position: static; }
  .activity-feed { max-height: 420px; }
}

@media (max-width: 900px) {
  .office-topbar { position: static; }
  .office-layout { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .office-sidenav { position: sticky; top: 0; flex-direction: row; gap: 4px; padding: 8px 10px; min-height: 0; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); z-index: 20; }
  .nav-group-label { display: none; }
  .nav-online { display: none; }
  .office-tab { width: auto; flex: none; padding: 0 12px; }
  .office-shell { padding: 16px 16px 40px; }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .drop-columns { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .office-topbar { flex-wrap: wrap; gap: 10px; padding: 12px 16px; }
  .office-topbar h1 { font-size: 1.1rem; }
  .topbar-actions { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 8px; }
  .topbar-actions .who-am-i { display: none; }
  .topbar-actions .app-version { display: none; }
  .topbar-actions .ghost-button { min-height: 34px; padding: 0 10px; font-size: 0.85rem; }
  #liveStatus { font-size: 0.68rem; }
  .office-shell { padding: 14px 12px 40px; }
  .office-tab { flex: none; min-height: 38px; padding: 0 10px; white-space: nowrap; }
  .office-tab .nav-label { font-size: 0.86rem; }
  .section-heading { display: block; }
  .detail-title-row h2 { font-size: 1.3rem; }
  .toolbar select { flex: 1 1 140px; }
  .route-card-grid, .drop-columns { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .route-card { padding: 16px; }
  .route-card-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .route-card-primary, .route-card-status, .route-card-detail { grid-column: 1 / -1; }
  .route-card-primary h3 { margin-bottom: 4px; }
  .route-card-field { gap: 5px; }
  .route-card-detail { grid-template-columns: minmax(0, 1fr); }
  .route-card .route-card-actions { grid-column: 1; grid-row: auto; justify-content: flex-start; }
  .pod-history-row { gap: 14px; padding: 16px; }
  .pod-history-head, .pod-history-foot { align-items: flex-start; }
  .pod-history-head { flex-wrap: wrap; }
  .pod-history-title { font-size: 1.1rem; }
  .pod-history-status { min-width: 0; min-height: 34px; padding: 5px 10px; }
  .pod-history-subtitle { margin-top: -6px; }
  .pod-history-facts, .pod-history-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .pod-history-metrics { padding: 12px 0; gap: 0; }
  .pod-history-metrics > span { min-height: 62px; padding: 8px; }
  .pod-history-metrics > span:nth-child(3) { border-left: 0; }
  .pod-history-metrics > span:nth-child(n+3) { border-top: 1px solid var(--line); }
  .pod-history-foot { flex-direction: column; gap: 4px; }
  .pod-history-foot > span:last-child { text-align: left; }
}

/* POD document -- styled after a real haulier's multi-page Proof of Delivery PDF:
   a header info grid + signature on page 1, a detail-lines table on page 2, then one
   photo per page. On screen the pages are shown stacked with a visible gap; printing
   (or "Save as PDF") breaks cleanly at each .pod-page via the @media print rule below. */
.pod-print { max-height: 74vh; overflow-y: auto; margin: -4px; padding: 4px; background: #e7edf2; }
.pod-page {
  margin: 0 0 16px;
  padding: 18px 22px 14px;
  background: white;
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(16, 24, 32, 0.08);
}
.pod-page:last-child { margin-bottom: 0; }

.pod-doc-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pod-brand { display: grid; gap: 2px; }
.pod-brand-logo { max-height: 40px; max-width: 160px; object-fit: contain; margin-bottom: 4px; }
.pod-brand strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.1rem; letter-spacing: 0.02em; }
.pod-brand span { font-weight: 800; font-size: 0.82rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.pod-doc-meta { display: grid; gap: 1px; text-align: right; font-size: 0.74rem; color: var(--muted); }
.pod-rule { height: 4px; background: var(--ink); margin: 8px 0 12px; }

.pod-info-grid, .pod-sign-grid, .pod-lines-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.pod-info-grid td { border: 1px solid var(--line); padding: 5px 7px; vertical-align: top; }
.pod-info-grid td.pod-k { width: 13%; font-weight: 800; background: #f7f9fb; }
/* Fixed layout so one long unbroken value (an account name, a GPS link) wraps inside
   its own cell rather than widening the table past the A4 page and clipping it. The
   label cells can wrap too ("Vehicle / Departed") -- with fixed widths a no-wrap label
   would spill over the value next to it. */
.pod-info-grid { table-layout: fixed; width: 100%; }
.pod-info-grid td.pod-v { width: 20.33%; overflow-wrap: anywhere; }

.pod-sign-grid { margin-top: 10px; }
.pod-sign-grid th { text-align: left; padding: 5px 7px; border: 1px solid var(--line); background: #f7f9fb; font-size: 0.76rem; }
.pod-sign-grid td { border: 1px solid var(--line); padding: 8px; vertical-align: top; }
.pod-sign-cell { width: 45%; }
/* Scoped to .pod-sign-cell rather than requiring a .pod-print ancestor: the "Save as
   PDF" export (manager.mjs's rasterizePodPages) clones and rasterizes each .pod-page
   on its own, outside the .pod-print wrapper div the on-screen dialog and print popup
   both use -- an ancestor-dependent selector silently stopped matching there, so the
   signature rendered at its full native pixel size (a signature pad canvas capture can
   be well over 1000px on a side) instead of the intended small preview, which in turn
   forced the whole info/signature table wider than the page and clipped its right edge
   in the rasterized output. */
.pod-sign-cell img.signature { display: block; max-width: 260px; max-height: 110px; border-bottom: 1px solid var(--line); background: white; }
.pod-captured { margin-top: 6px; color: var(--muted); font-size: 0.72rem; }

.pod-section-title { margin: 4px 0 8px; font-size: 0.95rem; }
.pod-lines-table th, .pod-lines-table td { border: 1px solid var(--line); padding: 4px 6px; text-align: left; }
.pod-lines-table th { background: #f7f9fb; }
/* Fixed column widths: paginateDetailLines() (pod.mjs) measures each row inside the one
   full table, then moves rows onto continuation pages. With automatic layout the
   columns re-sized to whichever rows were left in each table, rows re-wrapped taller
   than measured and a continuation page ran past the bottom of the A4 sheet. */
.pod-lines-table { table-layout: fixed; }
.pod-lines-table td { overflow-wrap: anywhere; }
.pod-lines-table th:nth-child(1) { width: 12%; }
.pod-lines-table th:nth-child(2) { width: 6%; }
.pod-lines-table th:nth-child(3) { width: 14%; }
.pod-lines-table th:nth-child(4) { width: 32%; }
.pod-lines-table th:nth-child(5) { width: 6%; }
.pod-lines-table th:nth-child(6) { width: 10%; }
.pod-lines-table th:nth-child(7) { width: 20%; }
.pod-lines-table tr { break-inside: avoid; page-break-inside: avoid; }
/* Reference/blank-item rows (Delivered = N/A) are kept in the table for a complete Seq
   audit, but lightly greyed so the actual deliverable items still read clearly at a
   glance, on screen and when printed. */
.pod-lines-table tr.pod-line-na { color: var(--muted); background: #fafbfc; }
.pod-lines-table tr.pod-line-na td { border-color: #eef1f4; }

/* A drop can have 30-40 photos, so these are laid out several-per-page (see
   PHOTOS_PER_PAGE in manager.mjs) rather than one full-size photo per sheet -- each
   image is cropped to a fixed-size box (object-fit: cover) so every page's height is
   predictable regardless of the source photos' own aspect ratios. */
.pod-photo-page { display: flex; flex-direction: column; }
.pod-photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10mm; margin-top: 8px; }
.pod-photo-cell { display: flex; flex-direction: column; }
.pod-photo-cell img { display: block; width: 100%; height: 95mm; object-fit: cover; border: 1px solid var(--line); background: #f0f0f0; }
.pod-photo-caption { margin-top: 4px; font-size: 0.76rem; color: var(--muted); }

.pod-page-footer { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 0.72rem; }

.gallery-grid .thumb { aspect-ratio: 1; cursor: pointer; }
.gallery-grid img { width: 100%; }

/* NOTE: no @media print rule here. This stylesheet is shared by both the manager
   page and the POD print popup (printPodDocument() in manager.mjs links it too),
   so a print rule written against `body` here would hide the popup's own content
   as well. The "blank the manager page if someone hits Ctrl+P on it directly"
   rule lives in index.html's own inline <style>, scoped to that page only. */

/* ---- Sortable report tables ------------------------------------------------------ */
.report-section th[data-sortable] { cursor: pointer; user-select: none; }
.report-section th[data-sortable]:hover { color: var(--ink); }
.report-section th[data-sort="asc"]::after { content: " \2191"; }
.report-section th[data-sort="desc"]::after { content: " \2193"; }

/* Geotag lines on a drop panel (arrival / POD sign-off GPS fix). */
.geo-line { margin: 4px 0; font-size: 0.86rem; }
.geo-line a { color: var(--blue); font-weight: 700; }

/* Addresses: the address book (addresses.mjs). */
.address-list { display: grid; gap: 8px; }
.address-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.address-row:hover, .address-row:focus-visible { border-color: var(--brand); outline: none; }
.address-row-photo { display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 6px; background: #eef1f4; color: var(--muted); font-size: 1.6rem; }
.address-row-photo.small { width: 52px; height: 52px; flex: none; }
.address-row-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.address-row-main { display: grid; gap: 2px; min-width: 0; }
.address-row-main strong { color: var(--ink); overflow-wrap: anywhere; }
.address-row-main .muted { font-size: 0.84rem; overflow-wrap: anywhere; }
.address-row-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; color: var(--muted); font-size: 0.78rem; }
.address-row-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.address-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.address-detail-head h2 { margin: 0 0 4px; color: var(--ink); font-size: 1.3rem; overflow-wrap: anywhere; }
.address-detail-head p { margin: 2px 0; }
.address-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.address-detail-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.address-detail-col { display: grid; gap: 16px; min-width: 0; }
.address-detail .manager-alert { margin-bottom: 12px; }
.address-match { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.address-match:first-of-type { border-top: 0; padding-top: 0; }
.address-match-main { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.address-match-main strong { overflow-wrap: anywhere; }
.address-match-main p { margin: 2px 0 4px; font-size: 0.82rem; }
.address-match-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.address-notes { display: grid; gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; }
.address-notes li { display: grid; gap: 3px; padding: 8px 10px; border-radius: 6px; background: var(--amber-soft); }
.address-notes p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.address-notes .muted { font-size: 0.78rem; }
.address-note-actions { display: flex; gap: 6px; }
.address-note-form textarea { width: 100%; }
.address-note-form .primary-button { margin-top: 8px; }
.danger-text { color: var(--red-text); }
.address-geos, .address-aliases { display: grid; gap: 4px; margin: 0; padding-left: 18px; font-size: 0.84rem; overflow-wrap: anywhere; }
.address-geos a { color: var(--blue); font-weight: 700; }
.address-deliveries td { overflow-wrap: anywhere; }
.address-deliveries td:last-child { white-space: nowrap; }
.address-own-photo { max-width: 240px; margin: 0 0 8px; }
#addressMoveDialog select { width: 100%; }
html[data-theme="dark"] .address-row-photo { background: #262d36; }
html[data-theme="dark"] .address-notes li { color: var(--text); }
@media (max-width: 900px) { .address-detail-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .address-row { grid-template-columns: 52px minmax(0, 1fr); }
  .address-row-photo { width: 52px; height: 52px; }
  .address-row-tags { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: flex-start; }
  .address-deliveries th:nth-child(4), .address-deliveries td:nth-child(4) { display: none; }
}

/* "(tablet time)" / "(reported by the driver's tablet)" after a POD time or GPS fix:
   the tablet's own claim, shown quieter than the server-recorded facts around it. */
.pod-reported { color: var(--muted); font-size: 0.72rem; }

/* Clearing up the schedule (v0.8.10): removed routes/orders and the demo routes. */
.removed-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.removed-row:first-of-type { border-top: 0; }
.removed-orders-panel { border-left: 4px solid var(--amber); }
.cleanup-block { padding: 10px 0; }
.cleanup-block + .cleanup-block { border-top: 1px solid var(--line); margin-top: 6px; }
.cleanup-block p { margin: 0 0 6px; }

/* Two-factor login (v0.8.14): the set-up steps and Settings -> My login. */
#twoFactorSetupScreen h2 { margin: 8px 0 4px; font-size: 1.15rem; }
.tf-steps { margin: 12px 0; padding-left: 20px; display: grid; gap: 12px; }
.tf-steps li { line-height: 1.4; }
.tf-qr { width: 200px; max-width: 70vw; margin: 10px 0 6px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.tf-qr svg { display: block; width: 100%; height: auto; }
.tf-key summary { cursor: pointer; font-weight: 600; }
.tf-secret { font-size: 1rem; letter-spacing: 0.04em; word-break: break-all; }
.tf-confirm { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.tf-confirm .tf-code { flex: 1 1 140px; max-width: 180px; font-size: 1.1rem; letter-spacing: 0.1em; }
.tf-codes { padding: 10px 12px; background: #f4f5f7; color: #111; border-radius: 8px; font-size: 1rem; line-height: 1.6; letter-spacing: 0.05em; user-select: all; }
.tf-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.tf-status { margin: 0 0 6px; }
.small-print { font-size: 0.8rem; margin: 4px 0 10px; }
#twoFactorBack { margin-top: 6px; }

/* A file picker styled as a button (Upload logo, Restore from a file): a <label>, so it
   needs the same box as the <button>s beside it to line its text up (v0.8.15). */
label.photo-button { display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

/* On a phone a panel's heading stacks: text first, then its buttons (or filter) on
   their own line, so two buttons side by side never push the page sideways (v0.8.15). */
@media (max-width: 640px) {
  .settings-panel-heading { flex-wrap: wrap; }
  .settings-panel-heading > .settings-panel-buttons, .settings-panel-heading > .inline-fields { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
  .settings-panel-heading > .inline-fields select { min-width: 0 !important; flex: 1 1 auto; }
}


/* ---- v0.8.17 ---------------------------------------------------------------------------- */

/* Unsaved changes: the panel gets an amber edge and a bar above its Save button. */
.panel.is-dirty { box-shadow: inset 4px 0 0 var(--amber); }
.unsaved-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 14px; padding: 8px 12px; border: 1px solid var(--amber); border-radius: 8px; background: var(--amber-soft); color: var(--ink); font-size: 0.86rem; }
.unsaved-bar + .panel-actions { margin-top: 10px; }
.unsaved-actions { display: flex; gap: 8px; }

/* The menu under your name in the topbar. */
.user-menu { position: relative; }
.user-menu-button { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 700; font-size: 0.86rem; cursor: pointer; list-style: none; white-space: nowrap; }
.user-menu-button::-webkit-details-marker { display: none; }
.user-menu-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.user-menu-caret { color: var(--muted); font-size: 0.7rem; }
.user-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; display: grid; min-width: 250px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); box-shadow: 0 10px 30px rgba(16, 24, 32, 0.16); }
.user-menu-item { display: grid; gap: 2px; width: 100%; padding: 9px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; font-size: 0.9rem; text-align: left; cursor: pointer; }
.user-menu-item small { color: var(--muted); font-weight: 400; font-size: 0.78rem; }
.user-menu-item:hover, .user-menu-item:focus-visible { background: var(--paper); outline: none; }
.user-menu-item.active { background: var(--blue-soft); }
.user-menu-item .nav-count { justify-self: start; }
html[data-theme="dark"] .user-menu-list { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }

/* Route cards: the next-action button, and the quiet note for optional groupings. */
.route-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.route-card-note { margin: 4px 0 0; color: var(--muted); font-size: 0.8rem; }

/* Grouping review (route page): a compact table that folds away. */
details.grouping-review-panel > summary { list-style: none; cursor: pointer; }
details.grouping-review-panel > summary::-webkit-details-marker { display: none; }
.grouping-review-head { align-items: center; }
.grouping-review-head > span:first-child { display: grid; gap: 2px; }
.grouping-review-title { font-size: 1.02rem; color: var(--ink); }
.grouping-review-toggle::after { content: "Hide"; font-size: 0.8rem; font-weight: 700; }
details.grouping-review-panel:not([open]) .grouping-review-toggle::after { content: "Show"; }
.grouping-review-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin: 10px 0 8px; }
.grouping-review-table { width: 100%; border-collapse: collapse; font-size: 0.84rem; background: var(--surface); border-radius: 6px; }
.grouping-review-table th, .grouping-review-table td { padding: 7px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.grouping-review-table th { color: var(--muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }
.grouping-review-table tr:last-child td { border-bottom: 0; }
.grouping-review-table .check { width: 34px; }
.grouping-review-table td.muted { color: var(--muted); font-size: 0.8rem; }

/* Reports: period picker. */
.report-range { margin-bottom: 14px; }
.report-range .segmented { flex-wrap: wrap; }
.report-custom-range { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Notification / email event lists grouped by stage. */
.event-groups { display: grid; gap: 12px; margin-top: 10px; }
.event-group { position: relative; margin: 0; padding: 10px 12px 8px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; }
.event-group legend { padding: 0 6px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.event-group-actions { position: absolute; top: -12px; right: 10px; display: flex; gap: 2px; padding: 0 4px; background: var(--surface); }

/* Keeping data: small headings between its groups of fields. */
.form-subhead { margin: 14px 0 4px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.form-subhead:first-of-type { margin-top: 4px; }
#podFileNamePreview { overflow-wrap: anywhere; }
#podFileNamePreview.invalid { color: var(--red-text); font-family: inherit; }
.settings-moved-note { margin: 0; font-size: 0.84rem; }

/* Address corrections on the Addresses page: a folding panel above the list. */
#addressOverridesPanel { margin-bottom: 14px; }
.panel-summary { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.panel-summary .eyebrow { margin: 0; }
#addressOverridesDetails[open] > .panel-summary { margin-bottom: 10px; }

@media (max-width: 600px) {
  .topbar-actions .user-menu .who-am-i { display: inline-block; max-width: 34vw; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
  .user-menu-button { min-height: 34px; padding: 0 8px; font-size: 0.8rem; }
  .user-menu-list { position: fixed; left: 12px; right: 12px; top: auto; min-width: 0; }
  .settings-nav { gap: 8px; }
  .report-range .segment { padding: 0 9px; }
  .grouping-review-table th:nth-child(6), .grouping-review-table td:nth-child(6) { display: none; }
}
/* Scrolled to from a route card: clear of the sticky topbar. */
.grouping-review-panel, .pickup-requests-panel { scroll-margin-top: 84px; }
.panel-summary { list-style: none; }
.panel-summary::-webkit-details-marker { display: none; }
.panel-summary::after { content: "Show"; margin-left: auto; color: var(--blue); font-size: 0.82rem; font-weight: 700; }
details[open] > .panel-summary::after { content: "Hide"; }
#logoutButton { white-space: nowrap; }
@media (max-width: 600px) {
  .user-menu .who-role { display: none; }
  .topbar-actions { gap: 6px; }
}

/* ---- v0.8.18: dashboard tiles open their lists; "to schedule" is amber, not red ---- */
.kpi.warn { border-color: var(--amber); background: var(--amber-soft); }
.kpi.warn strong { color: var(--amber); }
.kpi-button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
html[data-theme="dark"] .kpi-button { color: var(--ink); }
/* Eight tiles fit one row on a desktop (they wrapped a lone tile onto a second row). */
.kpi-strip { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
@media (max-width: 600px) { .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Routes from Hansa (v0.8.22, hansa.mjs) ---- */
dialog.hansa-dialog { width: min(900px, calc(100vw - 24px)); }
.hansa-dialog .dialog-card { max-height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden; }
.hansa-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hansa-dialog-head h2 { margin: 0; }
#hansaStatus { margin: 8px 0 0; font-size: 0.9rem; }
.hansa-pull-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 4px; }
.hansa-pull-row .field-label { margin: 0; }
.hansa-pull-row input[type="date"] { width: auto; min-width: 9.5rem; }
.hansa-route { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 12px 0; background: var(--surface); }
.hansa-route-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.hansa-route-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.hansa-route-title strong { font-size: 1.02rem; }
.hansa-counts { margin: 6px 0 0; }
.hansa-route .field-hint { margin-top: 6px; }
.hansa-orders, .hansa-left-out, .hansa-history { margin-top: 8px; }
.hansa-orders summary, .hansa-left-out summary, .hansa-history summary { cursor: pointer; font-weight: 700; }
.hansa-left-out, .hansa-history { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 14px; }
.hansa-route .edit-table td, .hansa-dialog .edit-table td { vertical-align: top; }
@media (max-width: 560px) {
  .hansa-route { padding: 10px; }
  /* Orders as small cards on a phone, so "where it stands" isn't scrolled off the side. */
  .hansa-orders thead { display: none; }
  .hansa-orders tr { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .hansa-orders td { padding: 0; }
  .hansa-orders td:first-child::before { content: attr(data-label) " "; color: var(--muted); }
  .hansa-orders td:nth-child(2) { font-weight: 700; }
  .hansa-orders td:nth-child(n+3) { grid-column: 1 / -1; }
  .hansa-pull-row input[type="date"] { flex: 1 1 8.5rem; }
  .hansa-pull-row .primary-button { width: 100%; }
}