/* Shared look for every office page (same as the demo). Pages keep their own layout rules and
   read these color tokens. Light/dark: follows the computer unless the toggle picks one. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --bg:#f3f5f7; --card:#ffffff; --text:#141d29; --muted:#4a5565; --line:#d9dfe6; --lane:#eef1f4; --soft:#eef1f4;
  --accent:#1f5fbf; --accent-bg:#e3ecfa; --ok:#11704a; --ok-bg:#ddf1e6; --warn:#8f4c05; --warn-bg:#fbebd2;
  --bad:#a8231b; --bad-bg:#fbe3e1; --ex-bg:#e4e8ed; --done:#6b7684; --plan:#c4ccd6; --co-bg:#1f5fbf; --co-fg:#ffffff;
  --sans:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif; --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg:#0f141a; --card:#18202a; --text:#eef2f6; --muted:#b4bfcc; --line:#2e3946; --lane:#202a35; --soft:#202a35;
  --accent:#8ab4f5; --accent-bg:#1c2d48; --ok:#5fd9a0; --ok-bg:#153527; --warn:#f6b45e; --warn-bg:#3a2b15;
  --bad:#ff958c; --bad-bg:#40201d; --ex-bg:#2b3644; --done:#8793a1; --plan:#3b4756; --co-bg:#8ab4f5; --co-fg:#0f141a; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg:#0f141a; --card:#18202a; --text:#eef2f6; --muted:#b4bfcc; --line:#2e3946; --lane:#202a35; --soft:#202a35;
  --accent:#8ab4f5; --accent-bg:#1c2d48; --ok:#5fd9a0; --ok-bg:#153527; --warn:#f6b45e; --warn-bg:#3a2b15;
  --bad:#ff958c; --bad-bg:#40201d; --ex-bg:#2b3644; --done:#8793a1; --plan:#3b4756; --co-bg:#8ab4f5; --co-fg:#0f141a; color-scheme: dark; }

/* Page rules like `.actions { display:flex }` must not un-hide elements marked hidden. */
[hidden] { display: none !important; }

body { font-family: var(--sans) !important; font-size: 14.5px; background: var(--bg); color: var(--text); }
/* Small print stays readable: never below 13px, and grey text has strong contrast in both themes. */
.note, .small { font-size: 13px !important; }
.muted { color: var(--muted); }
code, .mono, .num { font-family: var(--mono); }
header h1 { font-weight: 600; letter-spacing: -0.01em; }
header a { font-weight: 500; text-decoration: none; padding: 4px 8px; border-radius: 6px; }
header a:hover { background: var(--accent-bg); }
header a[aria-current="page"] { background: var(--accent-bg); color: var(--accent); }
/* Filled buttons: white text on the dark-blue accent in light mode, dark text on the light-blue accent in dark mode. */
button.primary, .primary, button.on, .seg button.on { color: #fff; }
:root[data-theme="dark"] :is(button.primary, .primary, button.on, .seg button.on) { color: #0f141a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(button.primary, .primary, button.on, .seg button.on) { color: #0f141a; } }

.theme-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.theme-toggle button { border: none; border-radius: 0; padding: 5px 9px; font-size: 13px; background: var(--card); color: var(--text); cursor: pointer; }
.theme-toggle button[aria-pressed="true"] { background: var(--accent); color: var(--card); }

/* Text only screen readers hear. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Phone layout (720px and narrower): slim header, tabs at the bottom, "More" sheet ---------- */
.m-tabs, .m-sheet { display: none; }
@media (max-width: 720px) {
  .has-mtabs .m-tabs {
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500;
    background: var(--card); border-top: 1px solid var(--line);
    padding: 4px max(4px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
  }
  .m-tabs a, .m-tabs button {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 52px; padding: 4px 2px; border: 0; background: none; cursor: pointer;
    font: 500 11px/1.2 var(--sans); color: var(--muted); text-decoration: none;
  }
  .m-tabs svg { width: 24px; height: 24px; }
  .m-tabs [aria-current="page"] { color: var(--accent); font-weight: 600; }
  .m-tabs a:focus-visible, .m-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 8px; }
  .m-badge {
    position: absolute; top: 2px; left: calc(50% + 6px); min-width: 16px; padding: 0 5px; border-radius: 999px;
    background: var(--bad); color: var(--card); font-size: 10px; font-weight: 600; line-height: 16px; text-align: center;
  }
  .has-mtabs body { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
  .has-mtabs .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }

  .m-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 1600; }
  .m-shade { position: absolute; inset: 0; background: rgba(8, 12, 18, .5); }
  .m-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; background: var(--card); color: var(--text); border-radius: 18px 18px 0 0;
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .25);
  }
  .m-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; margin: 4px 0 10px; }
  .m-who { display: grid; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
  .m-who span { color: var(--muted); font-size: 13px; }
  .m-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
  .m-row select { font: inherit; font-size: 16px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); max-width: 60%; }
  .m-item { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 16px; }
  .m-item span { color: var(--muted); font-size: 13px; }
  .m-item[aria-current="page"] { color: var(--accent); font-weight: 600; }
  .m-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding-top: 14px; }
  .m-foot .theme-toggle button { min-height: 40px; padding: 6px 12px; font-size: 14px; }
  .m-foot > button { font: inherit; min-height: 40px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); cursor: pointer; }
  .m-locked, .m-locked body { overflow: hidden; }

  /* Slim header: page name (and that page's own controls) only. Links live in the tabs. */
  .has-mtabs header a[href], .has-mtabs header .hdr-extra { display: none !important; }
  .has-mtabs header { padding: 10px max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)) !important; gap: 8px !important; }
  .has-mtabs header h1 { font-size: 18px; }
  .has-mtabs header > div:first-child { min-width: 0; max-width: 100%; }
  .has-mtabs header > div:first-child > :not(h1) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .has-mtabs header > div:empty { display: none; }

  /* Fingers, not mouse pointers: bigger targets, and 16px text in fields so iPhones don't zoom in. */
  :is(main, header, .dialog) :is(button, select, input:not([type="checkbox"]):not([type="radio"])):not(.pill) { min-height: 40px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; }
  /* Wide tables slide inside their own box instead of crushing their columns; the page itself never moves sideways. */
  :is(.scroll, .wrap) > table :is(th, td) { min-width: 6.5em; }
  :is(.scroll, .wrap) > table :is(th, td):first-child { min-width: 8.5em; }
  :is(.scroll, .wrap) { -webkit-overflow-scrolling: touch; }
  html, body { overflow-x: hidden; }
}

/* Links to details: a driver's name, a trip, a run. Dashed until hovered, so they read as text first. */
a.go { color: inherit; text-decoration: underline dashed var(--muted); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a.go:hover, a.go:focus-visible { color: var(--accent); text-decoration: underline solid var(--accent); outline: none; }

/* Help: ? buttons, their note, the tip line and the Help menu. */
.np-q { display: inline-grid; place-items: center; width: 20px; height: 20px; min-height: 0 !important; min-width: 0 !important; padding: 0 !important; margin-left: 4px; border-radius: 50%; border: 1px solid var(--line); background: var(--card); color: var(--muted); font: 600 12px/1 var(--sans); cursor: pointer; vertical-align: middle; }
.np-q:hover, .np-q:focus-visible, .np-q[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); outline: none; }
[hidden] + .np-q { display: none; }
.np-pop { position: absolute; z-index: 2500; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; line-height: 1.45; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.np-tip { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--accent-bg); color: var(--text); font-size: 13.5px; border-bottom: 1px solid var(--line); }
.np-tip b { color: var(--accent); }
.np-tip button { font: inherit; font-size: 13px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); cursor: pointer; }
.np-help { position: relative; display: inline-block; }
#npHelp { font: inherit; font-size: 14px; padding: 4px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); cursor: pointer; }
.np-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 2100; width: 230px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.18); display: grid; gap: 2px; }
.np-row { display: flex; gap: 8px; align-items: center; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.np-row:hover { background: var(--soft); }
.np-small { color: var(--muted); font-size: 12.5px; padding: 4px 8px; }

/* The tour: the page dims except the thing being explained, with a card next to it. */
.np-touring, .np-touring body { overflow: hidden; }
.np-spot { position: fixed; z-index: 3000; border-radius: 8px; box-shadow: 0 0 0 3px var(--accent), 0 0 0 9999px rgba(8,12,18,.6); pointer-events: none; transition: all .2s ease; }
.np-tour { position: fixed; z-index: 3001; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: 0 12px 32px rgba(0,0,0,.3); }
.np-tour h4 { margin: 0 0 4px; font-size: 16px; }
.np-tour p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.45; }
.np-tour-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.np-tour-foot button { font: inherit; font-size: 14px; padding: 6px 12px; margin-left: 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); cursor: pointer; }
.np-tour-foot button.primary { background: var(--accent); border-color: var(--accent); }
.np-dots { display: flex; gap: 5px; } .np-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line); } .np-dots i.on { background: var(--accent); }
.np-tour .np-small { padding: 6px 0 0; }
.m-check input { width: 22px; height: 22px; accent-color: var(--accent); }
button.m-item { width: 100%; background: none; border-left: 0; border-right: 0; border-top: 0; font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .np-spot { transition: none; } }

/* Notifications: the bell, its panel (full screen on phones) and pop-ups for urgent ones. */
.np-bell-wrap { position: relative; display: inline-block; }
.np-bell { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); cursor: pointer; }
.np-bell svg { width: 18px; height: 18px; }
.np-bell[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.np-bell-n { position: absolute; top: -7px; right: -8px; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--bad); color: var(--card); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
.np-bell-n[hidden] { display: none; }
.np-npanel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 2200; width: min(400px, calc(100vw - 24px)); max-height: min(560px, calc(100vh - 90px)); display: flex; flex-direction: column; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.22); text-align: left; font-size: 14px; }
.np-npanel[hidden] { display: none; }
.np-n-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 14px 6px; }
.np-n-head h2 { margin: 0; font-size: 16px; }
.np-link { font: inherit; font-size: 13px; padding: 2px 4px; border: 0; background: none; color: var(--accent); cursor: pointer; }
.np-n-x { color: var(--muted); font-size: 15px; margin-left: 4px; }
.np-n-tabs { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 14px 10px; }
.np-n-tabs button { font: inherit; font-size: 12px; padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); cursor: pointer; }
.np-n-tabs button.on { background: var(--accent); border-color: var(--accent); color: var(--card); }
.np-n-list { overflow-y: auto; flex: 1; border-top: 1px solid var(--line); }
.np-n-grp { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 10px 14px 4px; }
.np-n { display: grid; grid-template-columns: 10px 1fr; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--line); color: inherit; text-decoration: none; }
.np-n-grp + .np-n { border-top: 0; }
.np-n:hover, .np-n:focus-visible { background: var(--soft); outline: none; }
.np-n-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; }
.np-n.unread .np-n-dot { background: var(--accent); }
.np-n-body { display: grid; gap: 2px; min-width: 0; }
.np-n-title { font-size: 14px; overflow-wrap: anywhere; }
.np-n.unread .np-n-title { font-weight: 600; }
.np-n-detail { font-size: 12.5px; color: var(--muted); overflow-wrap: anywhere; }
.np-n-meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.np-n-kind { font-size: 11px; padding: 0 7px; border-radius: 999px; background: var(--ex-bg); }
.np-n-kind.k-Trips { background: var(--bad-bg); color: var(--bad); }
.np-n-kind.k-Drivers { background: var(--warn-bg); color: var(--warn); }
.np-n-kind.k-Pay, .np-n-kind.k-Team { background: var(--accent-bg); color: var(--accent); }
.np-n-empty { padding: 28px 18px; color: var(--muted); text-align: center; font-size: 14px; }
.np-n-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); }
.np-n-set > .np-small { padding: 10px 14px 0; margin: 0; }
.np-n-opt { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 8px 14px; cursor: pointer; }
.np-n-opt input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.np-n-opt b { display: block; font-size: 14px; font-weight: 500; }
.np-n-opt span span { font-size: 12.5px; color: var(--muted); }
.np-toasts { position: fixed; right: 16px; bottom: 16px; z-index: 2600; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.np-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; background: var(--card); color: var(--text); border: 1px solid var(--line); border-left: 4px solid var(--bad); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.2); font-size: 14px; }
.np-toast-i svg { width: 18px; height: 18px; color: var(--bad); margin-top: 2px; }
.np-toast .np-link { padding: 4px 0 0; }
/* Phones hide header links (they move to the bottom tabs); not the ones in the panel. */
.has-mtabs header .np-npanel a.np-n[href] { display: grid !important; }
@media (max-width: 720px) {
  .np-npanel { position: fixed; inset: 0; width: auto; max-height: none; border-radius: 0; border: 0; z-index: 2700; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
  .np-n-locked, .np-n-locked body { overflow: hidden; }
  .has-mtabs body > header { position: relative; }
  .has-mtabs body > header > div:first-child { padding-right: 48px; }
  .has-mtabs header .np-bell-wrap { position: absolute; top: 10px; right: max(16px, env(safe-area-inset-right, 0px)); }
  .np-toasts { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); right: 12px; width: calc(100vw - 24px); }
  .np-n-tabs button { padding: 4px 12px; font-size: 13px; }
}

/* ---- Boxed page title: icon tile + name + one line + count boxes (theme.js fills it) ---------- */
.titlebox { display: flex; align-items: center; gap: 12px; min-width: 0; }
.titlebox > div:last-child { min-width: 0; }
.ticon { width: 42px; height: 42px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); display: flex; align-items: center; justify-content: center; flex: none; }
.titlebox .note { white-space: normal; }
.counts { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.counts:empty { display: none; }
/* Company box: first in the tab row on every page; on phones a copy sits above the page title. */
.cowrap { position: relative; display: inline-flex; vertical-align: middle; max-width: 100%; }
.cobox { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; border: 0; border-radius: 8px; padding: 5px 11px; font: inherit; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--co-fg); background: var(--co-bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.cobox { cursor: pointer; }
button.cobox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cobox svg { flex: none; }
.cobox .car { opacity: .8; font-weight: 400; }
.comenu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; display: grid; gap: 6px; min-width: 240px; padding: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.comenu button { text-align: left; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.comenu button:hover { border-color: var(--accent); }
.comenu button small { display: block; color: var(--muted); font-weight: 400; font-size: 11px; }
.comenu button.cur { border-color: var(--accent); background: var(--accent-bg); }
.cowrap.cobox-m { display: none; }
/* Tabs always on their own row under the page title, so the company box sits in the same spot everywhere. */
@media (min-width: 721px) { body > header > .titlebox { flex: 1 0 100%; } }
.counts span { font-size: 12px; line-height: 1.5; border: 1px solid var(--line); border-radius: 8px; padding: 1px 8px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.counts b { color: var(--text); font-weight: 600; }
.counts .t-bad { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.counts .t-warn { border-color: var(--warn); background: var(--warn-bg); color: var(--warn); }
.counts .t-ok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); }
.counts .t-bad b, .counts .t-warn b, .counts .t-ok b { color: inherit; }
@media (max-width: 720px) {
  .has-mtabs header > .titlebox > * { white-space: normal; overflow: visible; }
  .has-mtabs .titlebox { gap: 10px; }
  .has-mtabs .ticon { width: 34px; height: 34px; border-radius: 9px; }
  .has-mtabs .ticon svg { width: 20px; height: 20px; }
  .has-mtabs .titlebox h1 { font-size: 17px; }
  .has-mtabs .cowrap.cobox-m { display: flex; width: fit-content; margin-bottom: 6px; }
  /* let the company menu open past the title area */
  .has-mtabs header > .titlebox > div:not(.ticon) { overflow: visible; }
  /* On the phone the one-line description is left out; the name and count boxes stay. */
  .has-mtabs .titlebox h1 ~ :not(.counts) { display: none; }
}

/* Viewer role: look only. Money and buttons that change things are hidden (the server leaves the data out too). */
html[data-viewer] .nv, html[data-viewer] .np-q { display: none !important; }
.viewer-note { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:0 auto; max-width:1400px; padding:6px 12px; font-size:13px; color:var(--muted); }
.viewer-note b { background:var(--line); color:var(--text); border-radius:999px; padding:1px 8px; font-weight:600; font-size:12px; }