/* OFT dashboard — "Daylight" theme (Direction C).
   Warm paper white, slate ink, hairline rules, brand red (#ED1C24) as a mark.
   Class names are unchanged from the dark theme so templates keep working. */
:root{
  --bg:#faf8f4; --panel:#ffffff; --panel2:#f4efe7; --line:#e7e1d7;
  --ink:#1f232b; --dim:#6b7280; --accent:#ED1C24; --accent-dim:#fdecec;
  --good:#1a7f37; --warn:#b45309; --bad:#cf222e; --bar:#ED1C24;
  --bar2:#c8102e;
  --danger-bg:#fdecec; --danger-fg:#b3261e; --danger-border:#f5c6c4;
  --warn-bg:#fdf5e8; --warn-fg:#b45309; --warn-border:#f0dcc0;
  --good-bg:#eaf6ee; --good-fg:#1a7f37; --good-border:#cfe9d7;

  --shadow:0 1px 2px rgba(31,35,43,.05), 0 8px 24px -12px rgba(31,35,43,.10);
  --ff:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-cond:var(--ff);
  --ff-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
html[data-theme="dark"]{
  --bg:#17181b; --panel:#1f2124; --panel2:#28292d; --line:#35373b;
  --ink:#ece9e2; --dim:#9a978f; --accent:#ff3b3b; --accent-dim:rgba(255,59,59,.16);
  --good:#3fb968; --warn:#e0a458; --bad:#ff6b6b; --bar:#ff3b3b;
  --bar2:#c8102e;
  --danger-bg:rgba(255,59,59,.14); --danger-fg:#ff8a8a; --danger-border:rgba(255,59,59,.35);
  --warn-bg:rgba(224,164,88,.14); --warn-fg:#e0a458; --warn-border:rgba(224,164,88,.35);
  --good-bg:rgba(63,185,104,.14); --good-fg:#5fd685; --good-border:rgba(63,185,104,.35);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden}
body{background:var(--bg);color:var(--ink);
  font:14px/1.5 var(--ff);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}
.muted{color:var(--dim);font-size:12px}
h1,h2,h3,h4{font-family:var(--ff);font-weight:700;letter-spacing:-.01em}

/* An author `display` rule beats the browser's own [hidden] rule, so any
   element that sets display AND gets hidden stays visible. That has now
   caused the same bug twice - a tarp checkbox and the loadboard's Advanced
   search panel, which renders inside .controls (display:flex) and so
   ignored its hidden attribute entirely. Fixed once, globally. */
[hidden]{display:none !important}

/* ---- app shell: top navigation + content ---- */
/* Was a 16-item sidebar; now 7 grouped menus across the top (Polo,
   2026-09-17). The extra horizontal room matters on the wide screens this
   is used on, where a load board or a customer page wants every pixel. */
.shell{display:flex;flex-direction:column;min-height:100vh}

.topnav{display:flex;align-items:center;gap:6px;padding:0 18px;height:54px;
  background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.topnav .brand{display:flex;align-items:center;margin-right:14px;flex:0 0 auto}
.topnav .brand img{height:26px;width:auto}
.topnav .brand{gap:9px;text-decoration:none}
.topnav .brand-name{font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--ink);
  padding-left:9px;border-left:1px solid var(--line);line-height:1}
@media (max-width:640px){.topnav .brand-name{font-size:14px}}
.topnav nav{display:flex;align-items:center;gap:2px;min-width:0;flex-wrap:wrap}

.tn-link,.tn-btn{display:inline-flex;align-items:center;gap:5px;font:inherit;font-size:13px;
  font-weight:600;color:var(--dim);background:none;border:0;border-radius:8px;
  padding:8px 12px;cursor:pointer;white-space:nowrap;line-height:1}
.tn-link:hover,.tn-btn:hover{background:var(--panel2);color:var(--ink)}
.tn-link.on{background:var(--accent);color:#fff}
.tn-group.on > .tn-btn{color:var(--ink)}
.tn-group.on > .tn-btn::after{content:"";position:absolute;left:12px;right:12px;bottom:-1px;
  height:2px;background:var(--accent);border-radius:2px}
.tn-caret{font-size:9px;opacity:.6}

.tn-group,.tn-user{position:relative}
.tn-group > .tn-btn{position:relative}
.tn-menu{position:absolute;top:calc(100% + 5px);left:0;min-width:210px;z-index:60;
  background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:6px;
  box-shadow:0 12px 30px rgba(0,0,0,.15);display:none}
.tn-menu-right{left:auto;right:0}
.tn-group.open > .tn-menu,.tn-user.open > .tn-menu{display:block}
.tn-menu a{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:8px;
  font-size:13px;font-weight:500;color:var(--dim);white-space:nowrap}
.tn-menu a:hover{background:var(--panel2);color:var(--ink)}
.tn-menu a.on{background:var(--accent);color:#fff;font-weight:600}
.tn-menu a .ico{width:16px;text-align:center;font-size:13px;opacity:.85}
.tn-who{padding:6px 11px 8px;font-size:11px;color:var(--dim);border-bottom:1px solid var(--line);
  margin-bottom:4px}

.tn-right{margin-left:auto;display:flex;align-items:center;gap:6px;flex:0 0 auto}
.tn-help{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--panel2);color:var(--dim);font-weight:700;font-size:13px}
.tn-help:hover{background:var(--accent);color:#fff}

.navtoggle{display:none;background:none;border:0;font-size:20px;color:var(--dim);cursor:pointer;
  padding:4px 8px;border-radius:8px}
@media(max-width:940px){
  .topnav{flex-wrap:wrap;height:auto;padding:8px 14px}
  .navtoggle{display:block;order:2;margin-left:auto}
  .topnav nav{display:none;order:4;width:100%;flex-direction:column;align-items:stretch;
    padding:6px 0 10px;gap:0}
  .topnav nav.open{display:flex}
  .tn-group,.tn-user{position:static}
  .tn-menu{position:static;box-shadow:none;border:0;padding:0 0 4px 22px;min-width:0}
  .tn-link,.tn-btn{width:100%;justify-content:space-between}
  .tn-right{order:3}
}

.content{flex:1;min-width:0;display:flex;flex-direction:column;overflow-x:clip}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);
  background:var(--panel);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.topbar h1{font-size:15px;margin:0;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}
main{padding:22px;max-width:1240px;width:100%;margin:0 auto;min-width:0}

/* mobile */
@media(max-width:820px){
  main{padding:14px}

  /* topbar: heading row, then full-width search on its own line */
  .topbar{padding:10px 14px;gap:8px}
  .topbar h1{flex:1}
  #syncInfo{display:none}
  #gsearch{margin-left:0;order:3;flex-basis:100%;width:100%}
  #gsInput{width:100%;max-width:none;font-size:16px;padding:10px 12px}
}

/* ---- shared components ---- */
.controls{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--panel)}
.seg button{background:transparent;color:var(--dim);border:0;padding:6px 12px;cursor:pointer;
  font-size:12px;font-weight:600;letter-spacing:.2px;transition:background .12s,color .12s}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--accent);color:#fff}
.seg button:not(:last-child){border-right:1px solid var(--line)}
/* Every kind of text box, including a bare <input> with no type: the
   address book's form uses those, and in dark mode they fell back to the
   browser's black text on a dark background (Polo, 2026-09-17). */
input:not([type]),input[type=date],input[type=search],input[type=text],input[type=email],input[type=tel],
input[type=number],input[type=url],input[type=password],input[type=time],select,textarea{background:var(--panel);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;outline:none;font-family:inherit}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}
::placeholder{color:var(--dim)}
label.fld{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--dim);
  text-transform:uppercase;letter-spacing:.5px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpis.kpis-2{grid-template-columns:repeat(2,1fr)}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;position:relative;
  overflow:hidden;box-shadow:var(--shadow);min-width:0}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.kpi .v{font-family:var(--ff-cond);font-size:26px;font-weight:600;letter-spacing:0;font-variant-numeric:tabular-nums}
.kpi .l{font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.8px;margin-bottom:4px}
.kpi .d{font-size:12px;margin-top:3px;font-weight:600;font-variant-numeric:tabular-nums}
.up{color:var(--good)} .down{color:var(--bad)}
.grid{display:grid;grid-template-columns:1.1fr .9fr;gap:16px}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media(max-width:900px){.grid{grid-template-columns:1fr}}
@media(max-width:640px){
  .kpis{grid-template-columns:repeat(2,1fr)!important;gap:8px}.kpi{padding:10px 12px}.kpi .v{font-size:18px}
  .barrow{grid-template-columns:96px 1fr 74px;gap:6px}.barrow .val{font-size:11px}
  table{font-size:12px}th,td{padding:6px}
  .card{padding:13px}
  /* 16px on real text inputs stops iOS Safari from zooming the page on focus */
  input[type=date],input[type=search],input[type=text],input[type=number],select,textarea{font-size:16px;padding:9px 10px}
  /* bigger tap targets */
  .seg{flex-wrap:wrap}
  .seg button{padding:10px 14px;font-size:13px}
  .chip{padding:8px 12px;font-size:13px}
  .topnav nav a,.tn-menu a{padding:14px}
  /* Filter/control rows used to force a single line with a sideways
     scroll instead of wrapping - Polo, 2026-09-15: in portrait that
     scroll wasn't actually reachable ("I still cant scroll to the
     right"), while landscape (wide enough to wrap without scrolling
     at all) showed everything fine. Wrapping is what already worked,
     so let it wrap in portrait too instead of relying on a touch
     gesture that wasn't working for him - both the row (.controls'
     own flex-wrap:wrap, unchanged) and a single .seg with too many
     buttons for one line (wrap added just above) now drop extra
     buttons to the next line instead of running off-screen. */
  .metricToggle{margin-left:0}
  /* keep charts inside the viewport */
  .card svg,main>svg{max-width:100%;height:auto}
}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.card h2{font-size:11px;text-transform:uppercase;letter-spacing:.9px;color:var(--dim);margin:0 0 12px;font-weight:700}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:right;padding:8px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--dim);font-weight:700}
th:first-child,td:first-child{text-align:left}
td{font-variant-numeric:tabular-nums}
td.num,td.money{font-family:var(--ff-mono);font-size:12px}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--panel2)}
tbody tr.sel{background:var(--accent-dim)}
tbody tr.clickable{cursor:pointer}
.bars{display:flex;flex-direction:column;gap:8px}
.barrow{display:grid;grid-template-columns:135px 1fr 92px;align-items:center;gap:10px;font-size:12px}
.barrow .track{background:var(--panel2);border-radius:4px;height:16px;overflow:hidden}
.barrow .fill{background:linear-gradient(90deg,var(--bar2),var(--bar));height:100%;border-radius:4px}
.barrow .name{overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-weight:600}
.barrow .name:hover{color:var(--accent)}
.barrow .val{text-align:right;color:var(--dim);font-variant-numeric:tabular-nums;font-family:var(--ff-mono);font-size:11px}
.pill{display:inline-block;padding:2px 7px;border-radius:5px;font-size:10px;border:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.3px;color:var(--dim)}
.filterbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px;min-height:26px}
.chip{background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;font-weight:600}
.chip:hover{border-color:var(--accent)}
.chip b{color:var(--accent)}
.warnbox{background:var(--accent-dim);
  border:1px solid var(--danger-border);color:var(--danger-fg);border-radius:10px;padding:9px 14px;font-size:12px;margin-bottom:14px;font-weight:600}
.metricToggle{margin-left:auto}
svg text{fill:var(--dim)}
.stub{max-width:560px;margin:40px auto;text-align:center;color:var(--dim)}
.stub h2{color:var(--ink);font-size:18px;text-transform:none;letter-spacing:0}
.stub ul{text-align:left;display:inline-block;line-height:1.9}

/* ---- dark mode: neon OFT sign + floating toggle ---- */
.topnav .brand img{transition:filter .25s ease}
html[data-theme="dark"] .topnav .brand img{
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 6px #ff3b3b)
    drop-shadow(0 0 16px #ff3b3b)
    drop-shadow(0 0 32px rgba(255,59,59,.8));
  animation:neonFlicker 5s infinite ease-in-out;
}
@keyframes neonFlicker{
  0%,89%,91%,100%{opacity:1}
  90%{opacity:.82}
}
@media(prefers-reduced-motion:reduce){
  html[data-theme="dark"] .topnav .brand img{animation:none}
}
.theme-toggle{width:32px;height:32px;border-radius:50%;flex:none;
  background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;line-height:1}
.theme-toggle:hover{border-color:var(--accent)}

/* A floor for every button on the site, at zero specificity (:where), so any
   page or class rule still wins. Without it, a button a page forgot to style
   renders as the browser's grey bevel, which is what made the load page and
   several customer-page "Edit" buttons look out of place. */
:where(button){font:inherit;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ink);
  background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer}
:where(button:hover:not(:disabled)){border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
:where(button:disabled){opacity:.5;cursor:default}
:where(button:focus-visible){outline:2px solid var(--accent);outline-offset:2px}

/* ---- Buttons and icons, shared by every page (design pass, 2026-09-18) ----
   Polo: the load page's History / Rate confirmation / Send buttons "don't
   match the aesthetic". They had no style of their own, so they fell back to
   the browser's grey bevel, with emoji for icons. One button, three weights:
     .btn            a secondary action (look, open, change)
     .btn.primary    THE action on the screen (send, save); one per group
     .btn.quiet      low-emphasis (cancel, dismiss)
   Icons are one line-drawn set (the <symbol>s in base.html), drawn in the
   button's own colour, so they read the same in light and dark mode.
   Page styles that already set .btn (e.g. ".nlbar .btn") still win. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit;font-size:13px;
  font-weight:600;line-height:1;padding:9px 15px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:border-color .12s,background .12s,box-shadow .12s}
.btn:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--panel2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:default;transform:none}
.btn.ghost{background:var(--panel);color:var(--ink);border:1px solid var(--line)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 1px 2px color-mix(in srgb,var(--accent) 35%,transparent)}
.btn.primary:hover{background:var(--accent);filter:brightness(1.07)}
.btn.quiet{background:transparent;border-color:transparent;color:var(--dim)}
.btn.quiet:hover{background:var(--panel2);color:var(--ink)}
.btn.sm{font-size:12px;padding:7px 11px;border-radius:8px}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.btn.sm .ic{width:14px;height:14px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:active{transform:none}}
/* Load status as a small pill (Loads board, Revenue). Colour carries state:
   red = no carrier yet, amber = rolling, green = delivered, grey = covered. */
.spill{display:inline-block;font-size:11px;font-weight:700;line-height:1;padding:4px 8px;border-radius:999px;
  background:var(--panel2);color:var(--dim);white-space:nowrap}
.spill[data-b^="uncovered"]{background:color-mix(in srgb,var(--bad) 13%,transparent);color:var(--bad)}
.spill[data-b="in_transit"]{background:color-mix(in srgb,var(--warn) 15%,transparent);color:var(--warn)}
.spill[data-b="delivered"]{background:color-mix(in srgb,var(--good) 13%,transparent);color:var(--good)}
.spill[data-b="covered"]{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink)}