/* FleetCollect UI v2 — shell (fonts, tokens, sidebar, top bar, phone tabs).
   Loaded by native v2 pages (with ui_v2.css) AND by classic pages rendered in the
   v2 shell (with bridge.css). Everything here is prefixed .v2-* so it can't touch
   classic page markup. */

@font-face{font-family:Switzer;src:url(fonts/switzer-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Switzer;src:url(fonts/switzer-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Switzer;src:url(fonts/switzer-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:Switzer;src:url(fonts/switzer-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  --brand:#E50B95; --brand-strong:#C20A7E; --brand-deep:#9B0865; --brand-ink:#7D0852;
  --brand-50:#FEEEF8; --brand-200:#F9A9DC; --brand-300:#F570C4;
  --nav-bg:#1A2332; --nav-active:#2A3A52; --nav-line:#2C3B52; --nav-text:#C9D1DC; --nav-muted:#8C98AB; --nav-chip:#34455F;
  --ink:#1C2A38; --text:#334155; --muted:#4B5563; --subtle:#5B6472;
  --bg:#F5F6F8; --surface:#FFFFFF; --line:#E3E6EB; --line-soft:#EEF0F3; --field:#D5DAE1; --track:#EDEFF3; --chip:#F1F3F6;
  --ok-bg:#ECF8F3; --ok-fg:#0B6E4F; --ok-dot:#12B76A;
  --warn-bg:#FFF7E6; --warn-fg:#9A5B00; --warn-dot:#F59E0B; --warn-line:#F5D9A8;
  --crit-bg:#FEF3F2; --crit-fg:#B42318; --crit-dot:#D92D20; --crit-line:#FBD0CB;
  --na-bg:#F1F3F6; --na-fg:#5B6472;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:14px;
  /* Status pill tones (optimization palette). Review / "needs your OK" uses the brand tint. */
  --v2st-red:#B42318; --v2st-amber:#9A5B00; --v2st-green:#0B6E4F; --v2st-indigo:#9B0865; --v2st-gray:#5B6472;
  /* Table header row: small uppercase muted labels on a faint band */
  --th-bg:#FAFBFC; --th-fg:var(--muted);
  --v2-tabs-h:64px;   /* phone tab bar height without the safe-area inset */
}

/* ---------- Shell ---------- */
.v2-shell{min-height:100vh;display:flex;flex-wrap:wrap}
.v2-side{flex:0 0 240px;background:var(--nav-bg);color:var(--nav-text);padding:20px 14px;display:flex;flex-direction:column;gap:20px;position:sticky;top:0;height:100vh;overflow-y:auto}
.v2-brand{display:flex;align-items:center;gap:10px;padding:0 8px;text-decoration:none}
.v2-brand img{width:36px;height:36px;border-radius:10px;background:#fff}
.v2-brand span{font-weight:700;font-size:16px;color:#fff;letter-spacing:-.01em}
.v2-company{display:flex;flex-direction:column;padding:8px 12px;border-radius:10px;border:1px solid var(--nav-chip);background:#223046}
.v2-company small{font-size:11px;color:#9AA6B8;text-transform:uppercase;letter-spacing:.06em}
.v2-company b{color:#fff;font-weight:600;overflow-wrap:anywhere}
.v2-company select{appearance:none;-webkit-appearance:none;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239AA6B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 0 center;color:#fff;font:inherit;font-weight:600;font-size:14px;padding:2px 18px 2px 0;margin:0;cursor:pointer;width:100%;min-height:28px}
.v2-company select option{color:#1C2A38}
.v2-nav{display:flex;flex-direction:column;gap:2px}
.v2-nav h4{margin:14px 0 4px;padding:0 12px;font-size:11px;font-weight:600;color:var(--nav-muted);text-transform:uppercase;letter-spacing:.08em}
.v2-nav a{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:8px;color:var(--nav-text);text-decoration:none}
.v2-nav a:hover{background:#223046;color:#fff}
.v2-nav a.on{background:var(--nav-active);color:#fff;font-weight:600}
.v2-nav a.on svg{stroke:var(--brand-300)}
.v2-nav svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v2-nav .count{margin-left:auto;font-size:12px;font-weight:600;background:var(--nav-chip);color:#fff;border-radius:999px;padding:1px 8px}
.v2-side-foot{margin-top:auto;border-top:1px solid var(--nav-line);padding-top:12px;display:flex;flex-direction:column;gap:2px}
.v2-me{display:flex;align-items:center;gap:10px;padding:10px 12px 0}
.v2-me .av{width:32px;height:32px;border-radius:999px;background:var(--nav-chip);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px}
.v2-me b{display:block;color:#fff;font-size:13px}
.v2-me small{color:#9AA6B8;font-size:12px}

.v2-main{flex:999 1 560px;min-width:0;padding-bottom:48px}
.v2-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:12px 32px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.v2-search{flex:1 1 280px;max-width:460px;display:flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--field);border-radius:10px;background:#F8F9FB;color:var(--subtle)}
.v2-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--ink);outline:none}
.v2-top-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.v2-wrap{max-width:1240px;margin:0 auto;padding:24px 32px 0;display:flex;flex-direction:column;gap:20px}
.v2-preview{background:var(--brand-50);color:var(--brand-ink);font-size:13px;padding:8px 32px;display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.v2-preview a{font-weight:600}

/* Mobile bottom tabs */
.v2-tabs{display:none}
@media (max-width: 860px){
  .v2-side{display:none}
  .v2-top{padding:10px 16px}
  .v2-wrap{padding:16px 16px 0}
  .v2-preview{padding:8px 16px}
  .v2-main{padding-bottom:calc(var(--v2-tabs-h) + 24px + env(safe-area-inset-bottom))}
  .v2-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);padding:6px 4px calc(10px + env(safe-area-inset-bottom))}
  .v2-tabs a{position:relative;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);text-decoration:none;font-size:12px;line-height:1.2;-webkit-tap-highlight-color:transparent}
  .v2-tabs a span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .v2-tabs a.on{color:var(--brand-strong);font-weight:600}
  .v2-tabs svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .v2-mobile-brand{display:flex !important}
}
.v2-mobile-brand{display:none;align-items:center;gap:8px;font-weight:600}
.v2-mobile-brand img{width:28px;height:28px;border-radius:8px}


.v2-nav a.sub{min-height:34px;padding-left:40px;font-size:13px;color:#AEB8C6;position:relative}
.v2-nav a.sub.on{background:transparent;color:#fff;font-weight:600}
.v2-nav a.sub.on::before{content:"";position:absolute;left:24px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:999px;background:var(--brand-300)}   /* the dot never shifts the label */
.v2-top-spacer{flex:1}
.v2-side .v2-nav a,.v2-side .v2-nav a:hover{text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Specificity guard: ui_v2.css's `.v2 a` (brand link colour) loads after this file;
   keep shell navigation colours regardless of load order. */
.v2-side .v2-nav a{color:var(--nav-text)}
.v2-side .v2-nav a:hover,.v2-side .v2-nav a.on{color:#fff}
.v2-side .v2-nav a.sub{color:#AEB8C6}
.v2-side .v2-nav a.sub.on{color:#fff}
.v2-side .v2-brand,.v2-side .v2-brand span{color:#fff}
body .v2-tabs a{color:var(--muted)}
body .v2-tabs a.on{color:var(--brand-strong)}

.v2-top-icon{position:relative;width:40px;height:40px;border-radius:10px;border:1px solid var(--field);display:flex;align-items:center;justify-content:center;color:#334155;text-decoration:none}
.v2-top-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.v2-top-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:#D92D20;color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-shadow:0 0 0 2px #fff}
.v2-preview a{text-decoration:underline;font-weight:600;color:var(--brand-ink)}

/* Phone (owner 2026-10-27): no search button in the top bar on a phone, on any screen (native v2
   and bridged classic pages) — the bar is brand · Ask · inbox · menu only. Each list keeps its
   own search box. Desktop keeps the top-bar search. */
@media (max-width:860px){ .v2-top .v2-search{display:none !important} }
/* (older rules below: the collapsed-icon search, now hidden on phones) */
.v2-search-ico{display:flex;align-items:center;cursor:pointer;color:inherit}
@media (max-width:860px){
  .v2-top{flex-wrap:nowrap}
  .v2-search{flex:0 0 auto;width:40px;min-height:40px;padding:0;justify-content:center;transition:width .15s ease}
  .v2-search input{width:0;flex:0 0 0;padding:0;opacity:0}
  .v2-search:focus-within{position:absolute;left:12px;right:12px;width:auto;z-index:5;padding:0 12px;justify-content:flex-start;background:#fff}
  .v2-search:focus-within input{flex:1 1 auto;width:auto;opacity:1}
  .v2-top{position:sticky;top:0;z-index:30}   /* owner 2026-10-27: header stays frozen at the top on phones */
  .v2-mobile-brand{margin-right:auto}
}

/* ---------- Phone tab bar: unread badge on More + the More sheet (_tabs.html) ---------- */
.v2-sheet{position:fixed;inset:0;z-index:80;font-size:14px;line-height:1.45}
.v2-sheet[hidden]{display:none}
.v2-sheet-scrim{position:absolute;inset:0;background:rgba(15,23,42,.5);opacity:0;transition:opacity .2s ease}
.v2-sheet.open .v2-sheet-scrim{opacity:1}
.v2-sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:calc(100% - 32px - env(safe-area-inset-top));display:flex;flex-direction:column;background:var(--nav-bg);color:var(--nav-text);border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.3);transform:translateY(100%);transition:transform .2s ease;outline:none}
.v2-sheet.open .v2-sheet-panel{transform:none}
.v2-sheet-head{flex:none;position:relative;display:flex;align-items:center;gap:12px;padding:22px 12px 10px 24px;touch-action:none}
.v2-sheet-grab{position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:#3A4C66}
.v2-sheet-title{flex:1;min-width:0}
.v2-sheet .v2-sheet-title h2{margin:0;font-size:18px;line-height:1.3;font-weight:700;color:#fff;letter-spacing:-.01em}
.v2-sheet-title small{display:block;font-size:13px;color:#9AA6B8;overflow-wrap:anywhere}
.v2-sheet .v2-sheet-x{flex:none;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:#223046;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.v2-sheet-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.v2-sheet-x:focus-visible{outline:2px solid var(--brand-300);outline-offset:2px}
.v2-sheet-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:0 12px calc(20px + env(safe-area-inset-bottom))}
.v2-sheet .v2-nav a{min-height:44px;color:var(--nav-text);text-decoration:none}
.v2-sheet .v2-nav a:hover,.v2-sheet .v2-nav a.on{color:#fff}
.v2-sheet .v2-nav a.sub{min-height:44px;color:#AEB8C6}
.v2-sheet .v2-nav a.sub.on{color:#fff}
.v2-sheet .v2-nav a:focus-visible{outline:2px solid var(--brand-300);outline-offset:-2px}
.v2-sheet .v2-nav h4{margin:16px 0 4px}
.v2-sheet-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--nav-line)}
html.v2-sheet-lock,html.v2-sheet-lock body{overflow:hidden}
html.v2-sheet-lock body{position:fixed;left:0;right:0;width:100%}
@media (min-width:861px){.v2-sheet{display:none !important}}
@media (prefers-reduced-motion:reduce){.v2-sheet-panel,.v2-sheet-scrim{transition:none}}
.v2-sheet .brain-side .k{display:none}

/* ---------- Phone top bar + preview strip ---------- */
.v2-preview-short{display:none}
@media (max-width:860px){
  /* page actions (base.html topbar_actions) drop to their own row under brand / search /
     inbox instead of squeezing into a two-line cluster next to the logo */
  .v2-top{flex-wrap:wrap;row-gap:8px}
  .v2-top-actions{display:contents}
  .v2-mobile-brand{order:0}
  .v2-search{order:1}
  .v2-top-actions > .v2-top-icon{order:2}
  .v2-top:has(.v2-top-actions > :not(.v2-top-icon))::after{content:"";order:3;flex-basis:100%;height:0}
  .v2-top-actions > :not(.v2-top-icon){order:4;flex:1 1 auto}
  /* the whole 40px search button is the tap target, not just the 16px glyph */
  .v2-search-ico{flex:none;width:38px;height:38px;justify-content:center}
  .v2-top-badge{font-size:12px}
  .v2-search:focus-within .v2-search-ico{width:auto;height:auto}
  /* preview strip: one short line + the way back */
  .v2-preview{flex-wrap:nowrap;gap:12px;padding-top:2px;padding-bottom:2px;font-size:13px}
  .v2-preview-long{display:none}
  .v2-preview-short{display:inline}
  .v2-preview > span{min-width:0}
  .v2-preview a{flex:none;display:inline-flex;align-items:center;min-height:40px}
}
/* Leaflet panes/controls use z-index 400-1000 and painted over the sticky top bar (z 20).
   Each map gets its own stacking context so nothing inside it can rise above page chrome. */
.leaflet-container{isolation:isolate;z-index:0}

/* ---------- Phone usability pass (owner 2026-10-26: "the mobile version is almost unusable") ----------
   1. iOS Safari zooms the whole page in when a field under 16px gets focus and never zooms back
      out, so every search box / filter / pop-up field left the page zoomed and sideways-scrolling.
      Every field is 16px on a phone (native and bridged pages: this file loads on both).
   2. The preview strip goes on a phone: Classic view is in the More sheet (_nav_foot.html), and
      the strip cost a full row above every page. */
@media (max-width:860px){
  body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]),
  body select,body textarea{font-size:16px !important}
  .v2-preview{display:none}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
}

/* ---------- Phone hubs (owner 2026-10-26: "so many hidden menu items") ----------
   Bottom bar = Home + product hubs (_tabs.html); the open hub's pages are a row under the top
   bar (_hub_row.html): 44px, current page underlined (no pills), sideways scroll with an edge
   fade while more is off-screen; the full menu sits behind the top-bar menu button. */
.v2-hubrow,.v2-top-menu{display:none}
@media (max-width:860px){
  .v2-top-menu{display:flex;padding:0;background:var(--surface);font:inherit;cursor:pointer}
  .v2-top{column-gap:8px}
  /* frozen under the frozen top bar (owner 2026-10-27); --v2-top-h is set by phone_scroll.js */
  .v2-hubrow{display:block;position:sticky;top:var(--v2-top-h,61px);z-index:29;background:var(--surface);border-bottom:1px solid var(--line)}
  .v2-hubrow-s{display:flex;gap:2px;overflow-x:auto;padding:0 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .v2-hubrow-s::-webkit-scrollbar{display:none}
  body .v2-hubrow a{flex:none;position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap;-webkit-tap-highlight-color:transparent}
  body .v2-hubrow a.on{color:var(--brand-strong);font-weight:600}
  .v2-hubrow a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:2px;border-radius:2px;background:var(--brand)}
  .v2-hubrow a:focus-visible{outline:2px solid var(--brand);outline-offset:-4px;border-radius:6px}
  .v2-hubrow::before,.v2-hubrow::after{content:"";position:absolute;top:0;bottom:1px;width:36px;pointer-events:none;opacity:0;transition:opacity .15s;z-index:1}
  .v2-hubrow::before{left:0;background:linear-gradient(to left,rgba(255,255,255,0),#fff 70%)}
  .v2-hubrow::after{right:0;background:linear-gradient(to right,rgba(255,255,255,0),#fff 70%)}
  .v2-hubrow.more-l::before,.v2-hubrow.more-r::after{opacity:1}
}

/* bridged pages (body.v2b, no ui_v2.css): segmented switches 44px on a phone too */
@media (max-width:860px){body.v2b [class*="seg"] > :is(a,button):not(.sr-only){min-height:44px}}

/* Buttons always contain their label (owner 2026-10-27: "Mark not needed" spilled out of its
   button). A width set for equal-width lists can grow, never clip: the label sets the floor. */
.btn{min-width:fit-content;box-sizing:border-box}