:root, [data-theme="light"] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem;
  --radius-sm: 0.375rem; --radius-md: 0.75rem; --radius-lg: 1rem; --radius-xl: 1.5rem; --radius-full: 9999px;
  --color-bg: #f3efe8; --color-surface: #fbf8f3; --color-surface-2: #ffffff; --color-surface-offset: #ebe4da;
  --color-border: rgba(10, 32, 61, 0.12); --color-divider: rgba(10, 32, 61, 0.08);
  --color-text: #10233d; --color-text-muted: #545f6d; --color-text-faint: #8b94a2; --color-text-inverse: #f6efe6;
  --color-primary: #c87b3c; --color-primary-hover: #af6a32; --color-primary-highlight: rgba(200, 123, 60, 0.14);
  --color-secondary: #0b2a52; --color-secondary-soft: #173964; --color-success: #2b8c5f;
  --shadow-sm: 0 6px 16px rgba(15, 24, 39, 0.08); --shadow-md: 0 14px 42px rgba(15, 24, 39, 0.12); --shadow-lg: 0 28px 80px rgba(15, 24, 39, 0.16);
  --header-bg: rgba(251, 248, 243, 0.82); --hero-top: #e7ded1; --point-bg: rgba(16, 35, 61, 0.05);
  --font-body: 'Satoshi', Inter, sans-serif; --font-display: 'Satoshi', Inter, sans-serif; --content-wide: 1240px;
}
[data-theme="dark"] {
  --color-bg: #07172c; --color-surface: #0d2340; --color-surface-2: #112c4e; --color-surface-offset: #18385f;
  --color-border: rgba(233, 221, 209, 0.14); --color-divider: rgba(233, 221, 209, 0.08);
  --color-text: #eef3f7; --color-text-muted: #b5c1cf; --color-text-faint: #89a0b7; --color-text-inverse: #f8f3ec;
  --color-primary: #c87b3c; --color-primary-hover: #de9252; --color-primary-highlight: rgba(200, 123, 60, 0.18);
  --color-secondary: #0a1b31; --color-secondary-soft: #14345d; --color-success: #41b883;
  --shadow-sm: 0 6px 16px rgba(0, 0, 0, 0.28); --shadow-md: 0 14px 42px rgba(0, 0, 0, 0.34); --shadow-lg: 0 28px 80px rgba(0, 0, 0, 0.45);
  --header-bg: rgba(8, 22, 40, 0.72); --hero-top: #091d36; --point-bg: rgba(8, 22, 40, 0.22);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{min-height:100dvh;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:radial-gradient(circle at top left, rgba(200,123,60,0.24), transparent 24%),radial-gradient(circle at top right, rgba(29,74,128,0.28), transparent 22%),linear-gradient(180deg, var(--hero-top) 0%, var(--color-bg) 32%, var(--color-bg) 100%);line-height:1.5}
a{text-decoration:none;color:inherit}img,svg{display:block;max-width:100%}button,input{font:inherit}table{border-collapse:collapse;width:100%}
.container{width:min(calc(100% - 2rem), var(--content-wide));margin:0 auto}.page-shell{padding-bottom:var(--space-16)}
.skip-link{position:absolute;left:-999px;top:1rem;background:var(--color-primary);color:#fff;padding:.75rem 1rem;border-radius:var(--radius-md)}.skip-link:focus{left:1rem;z-index:999}
.site-header{position:sticky;top:0;z-index:40;backdrop-filter:blur(18px);background:var(--header-bg);border-bottom:1px solid var(--color-border)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:80px}.brand{display:inline-flex;align-items:center;gap:var(--space-3);font-weight:900;letter-spacing:.02em}.brand svg{width:44px;height:44px;color:var(--color-primary)}.brand span{font-size:1.35rem;font-weight:900}
.nav-links{display:flex;align-items:center;gap:var(--space-6);color:var(--color-text-muted);font-size:var(--text-sm)}.nav-actions{display:flex;align-items:center;gap:var(--space-3)}
.theme-toggle,.ghost-btn,.primary-btn,.secondary-btn,.dash-btn{min-height:44px;border-radius:var(--radius-full);border:1px solid var(--color-border);padding:0 1rem;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;cursor:pointer}.theme-toggle,.ghost-btn{background:rgba(255,255,255,.02);color:var(--color-text)}.primary-btn{background:var(--color-primary);color:#fff;border-color:transparent;font-weight:700}.secondary-btn{background:transparent;color:var(--color-text)}
.eyebrow{color:var(--color-primary);text-transform:uppercase;letter-spacing:.16em;font-size:var(--text-xs);font-weight:700;margin-bottom:var(--space-4)}
.hero{padding:clamp(3rem,5vw,5rem) 0 var(--space-16)}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--space-8);align-items:stretch}.hero-copy,.hero-panel,.benefit-card,.story-card,.login-card,.dashboard-shell,.footer-card,.panel,.kpi,.stat-panel{border:1px solid var(--color-border);background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));box-shadow:var(--shadow-md)}
.hero-copy{border-radius:28px;padding:clamp(1.5rem,3vw,3rem)}h1{font-family:var(--font-display);font-size:clamp(2.5rem,4vw,4.8rem);line-height:.98;max-width:11ch;margin-bottom:var(--space-5)}.hero-copy p{color:var(--color-text-muted);max-width:58ch;margin-bottom:var(--space-6)}.hero-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-8)}.hero-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}.point{padding:var(--space-4);border-radius:var(--radius-lg);background:var(--point-bg);border:1px solid var(--color-border)}.point strong{display:block;font-size:var(--text-sm);margin-bottom:.35rem}.point span{color:var(--color-text-muted);font-size:var(--text-xs)}
.hero-panel{border-radius:32px;padding:var(--space-5);display:grid;gap:var(--space-5)}.truck-stage{min-height:320px;border-radius:24px;overflow:hidden;position:relative;background:linear-gradient(180deg, rgba(9,29,54,.2), rgba(9,29,54,.72)),url('https://user-gen-media-assets.s3.amazonaws.com/gpt4o_images/232da52e-63d9-4b83-ba73-bb8695b3f626.png?AWSAccessKeyId=ASIA2F3EMEYE7FXSGYZC&Signature=BCZA3zYjb9cVttuCtmjPUKnhPrc%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEND%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMSJIMEYCIQDhaBtqkmb4D2PNQjBa6gTf8WpQGz1QgDTjaQESddrVmgIhAOCXwjL8RRcmUjmL9IQSE%2BtuhbC%2Fmy3Hz%2BjFN126QuwhKvwECJj%2F%2F%2F%2F%2F%2F%2F%2F%2FwEQARoMNjk5NzUzMzA5NzA1Igz3oMX%2Fne8JWbFYENwq0AQ7KMYYhvGA0ItWbJ9Q8soJXbdTbY5Yl4cY4OFYVPNSVyZzhT2VwLYjYmoo3A7juGuSS2hmMRNA5eKNDCXwFSBYsnh%2FFIVw4G1EMYdq%2FBquT51CvQ324OmVVB4jNeerntgbSophYgxUVrcWZC%2Bwk6AoR4ncUfzsmOiqsYHGXHqvrZaq%2FghnIIXDpUMlNfQDUwWHdbQmjFI20Q3Q50ag%2BVvBM%2FnHyZQz9R3pbuEdOGAtk5wO79bYGbAaY%2B%2F6LxRZit3mD6JCWH4L40TyIBSngN0F7XYgYeAFG1a4PvdiLxbxZ6LKC52wE84JqNehrJVPPkTIc1KVxNImUt9bkPV54dmGHAOClq6ZEE%2FqllAGysN%2FOyrO5LzmPA3X3nEWwh1ZH9EBAa6z3dmVnHiiE2wOwCgD%2Bf%2Fae1xDm9M0HL9HG%2FKN%2BSeQYDtVe7%2FLAIXKYuVzFfou2FhHUcL7zMQ2r3eYwgb5fBFju7MnVzXwiz86eBafh03SDOn%2F3yvPLvDPfU%2FhSIYc3Ibq3SEecvUddVPs6sTdybAx6Dn1H4lgdC9lSvoqdgXkZubcKsSf4m5awKgmrhchkCTab%2FGSfhCgBgZrhzr42WXa%2F654r4cimbsKuWpvYKb1CM67c9dHYd1Cd5LdfJZ2f2aZhBo4SYK%2Fyj%2FvjNcFr8NyAuWjmYcUz4iu4tSrM2yks6vP9ya8GkuSCFC2BAbkc7ZgJppkqVwY2fcuyIXqyB3yALYjXfKExN3iMT8wb00UYGVO%2FGV%2FzPxE6FvE6KkCj8VWBbXLVZgLC9xHle1BMNy39dIGOpcBfHUbnUTf0wYcgEaR8PImK2mJvHXm%2Bi0VcLapym5oPUu35GreisYWuDXrJIXh2%2FAPb78cmgUjQVrBZ44f3qjR9lEZJ67ygezJrcgkgfDkRZjua%2F0Wd8WVZ7Dts3pmrfJMmGHPj46gohpdk36FFBWdjlc6l3l8EvPfdrz0FuLT2o0FtKmskZwp0oNWhuahtAWJh0V8ecI%2F3g%3D%3D&Expires=1784506799') center/cover no-repeat}.truck-overlay{position:absolute;inset:auto 1rem 1rem 1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}.mini-stat{padding:.85rem 1rem;border-radius:18px;background:rgba(11,42,82,.88);border:1px solid rgba(255,255,255,.12)}.mini-stat strong{display:block;font-size:var(--text-sm)}.mini-stat span{font-size:var(--text-xs);color:var(--color-text-muted)}
.section{padding-bottom:var(--space-16)}.section-head{margin-bottom:var(--space-6)}.section-head h2{font-size:var(--text-xl);margin-bottom:var(--space-3)}.section-head p,.story-card p,.benefit-card p,.footer-card p,.muted{color:var(--color-text-muted)}
.benefit-grid,.story-grid,.kpi-row,.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}.benefit-card,.story-card,.footer-card,.stat-panel{border-radius:24px;padding:var(--space-5)}.benefit-card .icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--color-primary-highlight);color:var(--color-primary);margin-bottom:var(--space-4)}.benefit-card h3{font-size:var(--text-lg);margin-bottom:var(--space-2)}
.two-col{display:grid;grid-template-columns:1.08fr .92fr;gap:var(--space-8)}
.login-layout{padding:clamp(2rem,4vw,4rem) 0 var(--space-16)}.login-wrap{display:grid;grid-template-columns:1fr 440px;gap:var(--space-8);align-items:start}.login-card{border-radius:28px;padding:var(--space-6);display:grid;gap:var(--space-4)}.field{display:grid;gap:.45rem}.field label{font-size:var(--text-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.08em}.field input,.field select{width:100%;min-height:48px;border-radius:14px;border:1px solid var(--color-border);background:rgba(255,255,255,.04);padding:0 1rem;color:var(--color-text)}
.stat-panel h3{font-size:2rem;margin-top:.35rem}.stack{display:grid;gap:var(--space-4)}
.dashboard-shell{border-radius:32px;overflow:hidden;display:grid;grid-template-columns:240px 1fr;min-height:720px}.sidebar{background:linear-gradient(180deg, rgba(8,22,40,.96), rgba(12,32,58,.98));border-right:1px solid var(--color-border);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-6)}.sidebar nav{display:grid;gap:.45rem}.nav-item{min-height:46px;border-radius:14px;padding:0 .95rem;display:flex;align-items:center;gap:.8rem;color:var(--color-text-muted)}.nav-item.active{background:var(--color-primary-highlight);color:var(--color-text);border:1px solid rgba(200,123,60,.28)}.nav-item svg{width:18px;height:18px}.sidebar-bottom{margin-top:auto}.dashboard-main{background:rgba(248,250,252,.98);color:#12253f}[data-theme="dark"] .dashboard-main{background:linear-gradient(180deg,#f6f2ed 0%,#f8f7f3 100%)}
.dash-top{padding:var(--space-5);border-bottom:1px solid rgba(18,37,63,.08);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4)}.dash-top p{color:#5d6978}.dash-actions{display:flex;gap:var(--space-3);flex-wrap:wrap}.dash-btn{background:white;color:#12253f;border:1px solid rgba(18,37,63,.1);font-weight:700}.dash-btn.primary{background:var(--color-primary);color:#fff;border-color:transparent}.dash-body{padding:var(--space-5);display:grid;gap:var(--space-5)}.kpi-row{grid-template-columns:repeat(4,minmax(0,1fr))}.kpi{background:white;border-radius:22px;padding:var(--space-4);border:1px solid rgba(18,37,63,.08);box-shadow:0 10px 24px rgba(15,23,42,.06)}.kpi span{display:block;color:#647182;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.5rem}.kpi strong{font-size:1.8rem;font-variant-numeric:tabular-nums}.app-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:var(--space-4)}.panel{background:white;border-radius:24px;padding:var(--space-4);border:1px solid rgba(18,37,63,.08);box-shadow:0 10px 24px rgba(15,23,42,.06)}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-4)}.panel-head h3{font-size:var(--text-lg)}th,td{text-align:left;padding:.85rem .55rem;border-bottom:1px solid rgba(18,37,63,.08)}th{color:#607085;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.08em}.status{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}.status::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}.enroute{color:#c87b3c}.available{color:#2b8c5f}.onscene{color:#0b2a52}.map-box{min-height:250px;border-radius:20px;background:radial-gradient(circle at 20% 30%, rgba(200,123,60,.18), transparent 16%),linear-gradient(135deg,#dfe7ef 0%,#f3f6f9 100%);position:relative;overflow:hidden;border:1px solid rgba(18,37,63,.08)}.map-box::before,.map-box::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(18,37,63,.08) 1px, transparent 1px),linear-gradient(90deg, rgba(18,37,63,.08) 1px, transparent 1px);background-size:48px 48px;opacity:.7}.pin{position:absolute;width:18px;height:18px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--color-primary);box-shadow:0 8px 20px rgba(200,123,60,.35)}.pin::after{content:'';width:8px;height:8px;background:white;border-radius:50%;position:absolute;top:5px;left:5px}.queue-list{display:grid;gap:.8rem}.queue-item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:.95rem 1rem;border-radius:18px;background:#f7f7f4;border:1px solid rgba(18,37,63,.06)}
.footer-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5)}.site-footer{padding-bottom:var(--space-12);color:var(--color-text-muted);font-size:var(--text-sm)}
@media (max-width:1100px){.hero-grid,.two-col,.app-grid,.benefit-grid,.story-grid,.kpi-row,.stats-grid,.login-wrap{grid-template-columns:1fr}.dashboard-shell{grid-template-columns:1fr;min-height:0}.sidebar{flex-direction:row;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);overflow-x:auto;overflow-y:hidden;border-right:none;border-bottom:1px solid var(--color-border)}.sidebar .brand{flex:0 0 auto}.sidebar .brand-logo{height:28px;width:auto}.sidebar nav{display:flex;flex:1 1 auto;gap:.3rem;min-width:0;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}.sidebar .nav-item{min-height:40px;padding:0 .7rem;gap:.45rem;white-space:nowrap;flex:0 0 auto}.sidebar-bottom{margin-top:0;flex:0 0 auto}.sidebar-bottom .ghost-btn{width:auto !important;padding:0 .9rem;white-space:nowrap}}
@media (max-width:720px){.sidebar{gap:var(--space-2);padding:var(--space-2) var(--space-3)}.sidebar .brand{display:none}.sidebar .nav-item{font-size:var(--text-sm);padding:0 .55rem}}
@media (max-width:840px){.nav-links{display:none}.header-inner{min-height:72px}.hero-points,.truck-overlay{grid-template-columns:1fr}.footer-card,.dash-top{align-items:flex-start;flex-direction:column}}
@media (max-width:640px){.container{width:min(calc(100% - 1rem), var(--content-wide))}.hero-copy,.hero-panel,.panel,.benefit-card,.story-card,.footer-card,.stat-panel,.login-card{border-radius:20px}h1{font-size:clamp(2.2rem,9vw,3.3rem)}}

/* ---- Fleet map fixes: full-width live map, no placeholder overlay -------- */
.app-grid-single{grid-template-columns:1fr}
.map-box.has-map{background:none}
.map-box.has-map::before,.map-box.has-map::after{display:none}
.map-box-wide{height:360px;min-height:360px}
.map-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:1.2rem;color:var(--color-text-muted,#647182);font-size:.92rem;z-index:800;pointer-events:none}
@media (max-width:760px){.map-box-wide{height:260px;min-height:260px}}

/* ==========================================================================
   App shell layer — the shared vocabulary every dashboard page emits from JS.
   These classes were being rendered with no rules at all, which is why the
   modals appeared as plain text at the bottom of the page and the badges,
   segmented tabs and form grids had no shape. Added here rather than in a
   second file so the pages keep their single stylesheet link.

   The dashboard interior (.dashboard-main) is a LIGHT surface in both themes,
   so it re-declares the text/border custom properties locally. Anything
   nested inside it — including the inline var() styles in the page markup —
   then resolves against the light card instead of the dark marketing shell.
   ========================================================================== */

:root { --text-2xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }

/* The browser's own [hidden] rule is display:none with the weakest possible
   specificity, so ANY class below that sets display — .dash-btn's inline-flex,
   .form-field's grid — silently defeats it. The JS all over this app hides
   things by setting el.hidden = true, so that has to win. Without this the
   "+ Add truck" button shows on the People tab and the invite modal shows the
   new-driver fields and the existing-record picker at the same time. */
[hidden] { display: none !important }

.dashboard-main, .modal {
  --color-text: #12253f;
  --color-text-muted: #5d6978;
  --color-text-faint: #8b94a2;
  --color-border: rgba(18, 37, 63, 0.14);
  --color-divider: rgba(18, 37, 63, 0.08);
  --color-surface: #ffffff;
  --color-surface-2: #f7f7f4;
}

.brand-logo { height: 42px; width: auto; object-fit: contain }

/* ---- page head + segmented tabs ---------------------------------------- */
.app-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap }
.app-page-head h3 { font-size: var(--text-lg) }
.app-page-head p { color: var(--color-text-muted); font-size: var(--text-sm) }

.seg-tabs { display: flex; gap: .4rem; flex-wrap: wrap; border-bottom: 1px solid var(--color-divider); padding-bottom: .1rem }
.seg-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--color-text-muted); font-weight: 700; padding: .6rem .9rem; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: .45rem }
.seg-tab.active { color: var(--color-text); border-bottom-color: var(--color-primary) }
.seg-count { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 .35rem; border-radius: var(--radius-full); background: rgba(18, 37, 63, .08); font-size: var(--text-xs); font-weight: 700 }
.seg-tab.active .seg-count { background: var(--color-primary-highlight); color: var(--color-primary) }
.seg-pane { display: grid; gap: var(--space-5) }
.seg-pane[hidden] { display: none }

/* ---- tables, empty states, small text ---------------------------------- */
.board-state { text-align: center; color: var(--color-text-muted); padding: var(--space-5) var(--space-3); font-size: var(--text-sm) }
.board-state.error, .form-msg[data-kind="error"], .trk-err { color: #b4462f }
.person-sub, .cell-sub, .panel-meta, .rc-meta, .trk-sub, .att-cap, .pm-cap, .inv-sub, .mf-meta, .legal { color: var(--color-text-muted); font-size: var(--text-sm) }
.panel-meta, .person-sub { font-size: var(--text-xs) }
.row-click { cursor: pointer }
.row-click:hover, .row-click:focus-visible { background: rgba(200, 123, 60, .07); outline: none }

/* ---- badges + status pills --------------------------------------------- */
.badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; line-height: 1.6; white-space: nowrap; background: rgba(18, 37, 63, .08); color: var(--color-text-muted) }
.badge.available, .badge.online { background: rgba(43, 140, 95, .14); color: #24734f }
.badge.onscene, .badge.enroute { background: rgba(200, 123, 60, .16); color: #a55f22 }
.badge.offline, .badge.idle, .badge.stale { background: rgba(18, 37, 63, .08); color: #5d6978 }
.badge.high, .badge.danger { background: rgba(180, 70, 47, .14); color: #a03d28 }

.truck-status { display: inline-flex; padding: .2rem .55rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 700; background: rgba(18, 37, 63, .08); color: #5d6978 }
.truck-status.in_service { background: rgba(43, 140, 95, .14); color: #24734f }
.truck-status.maintenance { background: rgba(200, 123, 60, .16); color: #a55f22 }
.truck-status.out_of_service { background: rgba(180, 70, 47, .14); color: #a03d28 }

/* ---- small buttons, chips, inline selects ------------------------------ */
.mini-btn { appearance: none; min-height: 32px; padding: 0 .6rem; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: #fff; color: var(--color-text); font-size: var(--text-xs); font-weight: 700; cursor: pointer }
.mini-btn:hover { border-color: var(--color-primary); color: var(--color-primary) }
.mini-btn.danger { color: #a03d28; border-color: rgba(180, 70, 47, .3) }
.mini-btn.danger:hover { background: rgba(180, 70, 47, .08) }
.mini-btn:disabled { opacity: .5; cursor: not-allowed }

.chip, .filter-chips button { appearance: none; min-height: 36px; padding: 0 .8rem; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: #fff; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 700; cursor: pointer }
.chip.active, .filter-chips button.active { background: var(--color-primary-highlight); border-color: rgba(200, 123, 60, .35); color: #a55f22 }
.filter-chips, .toolbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center }

.assign-select, .search-input, .code-input {
  min-height: 40px; max-width: 220px; width: 100%; border-radius: 12px;
  border: 1px solid var(--color-border); background: #fff; color: var(--color-text); padding: 0 .65rem;
}
.assign-select:disabled { background: rgba(18, 37, 63, .05); color: var(--color-text-faint); cursor: not-allowed }
.search-input { max-width: 320px }
.code-input { max-width: none; text-transform: uppercase; letter-spacing: .28em; text-align: center; font-size: var(--text-lg); font-weight: 700; min-height: 56px }

/* ---- invite codes ------------------------------------------------------- */
.invites { display: grid; gap: .6rem }
.invite-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: .7rem .9rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface-2) }
.invite-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 700; letter-spacing: .12em; font-size: var(--text-base) }
.invite-meta { color: var(--color-text-muted); font-size: var(--text-xs); flex: 1 1 auto }
.invite-actions { display: flex; gap: .4rem; margin-left: auto }

/* ---- forms -------------------------------------------------------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) }
.form-field { display: grid; gap: .35rem; min-width: 0 }
.form-field.col-2 { grid-column: 1 / -1 }
.form-field label { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .06em }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-height: 44px; border-radius: 12px; border: 1px solid var(--color-border);
  background: #fff; color: var(--color-text); padding: .5rem .7rem;
}
.form-field textarea { min-height: 96px; resize: vertical }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus, .assign-select:focus, .search-input:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: transparent }
.form-field input.req:invalid { border-color: rgba(180, 70, 47, .5) }
.form-section-label { grid-column: 1 / -1; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--color-primary); margin-top: var(--space-2) }
.form-link { background: none; border: 0; padding: 0; color: var(--color-primary); font-weight: 700; font-size: var(--text-sm); cursor: pointer; text-align: left }

/* Tow Authorization picker. Written as `.form-field .auth-choice` rather than a
   bare class because `.form-field label` already forces uppercase + tiny type on
   every label in a form, and these labels are full-size choice rows. */
.form-field .auth-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) }
.form-field .auth-choice {
  display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .75rem;
  border: 1px solid var(--color-border); border-radius: 12px; background: #fff;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-text);
  text-transform: none; letter-spacing: normal; cursor: pointer;
}
.form-field .auth-choice input {
  appearance: none; -webkit-appearance: none; width: 18px; height: 18px; min-height: 0;
  flex: 0 0 18px; margin: 0; padding: 0; border: 2px solid var(--color-text-faint);
  border-radius: var(--radius-full); background: transparent; cursor: pointer;
}
.form-field .auth-choice input:checked { border-color: var(--color-primary); box-shadow: inset 0 0 0 4px var(--color-primary) }
.form-field .auth-choice:has(input:checked) { border-color: rgba(200, 123, 60, .45); background: var(--color-primary-highlight) }
.form-field .auth-choice input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px }
@media (max-width: 640px) { .form-field .auth-choices { grid-template-columns: 1fr } }

.form-msg { font-size: var(--text-sm); font-weight: 600 }
.form-msg:empty { display: none }
.form-msg[data-kind="ok"] { color: #24734f }

.form-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3) }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none }
.switch input { position: absolute; opacity: 0; width: 0; height: 0 }
.slider { position: absolute; inset: 0; border-radius: var(--radius-full); background: rgba(18, 37, 63, .18); cursor: pointer; transition: background .18s ease }
.slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(15, 23, 42, .25); transition: transform .18s ease }
.switch input:checked + .slider { background: var(--color-primary) }
.switch input:checked + .slider::before { transform: translateX(20px) }
.switch input:focus-visible + .slider { outline: 2px solid var(--color-primary); outline-offset: 2px }

/* ---- modals ------------------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
  padding: var(--space-4); background: rgba(6, 16, 30, .62); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .16s ease, visibility .16s ease; overflow-y: auto;
  /* A closed overlay must not be merely invisible. It is pinned to all four
     edges at z-index 1000, so at opacity 0 alone it still lies over the whole
     page and swallows every click — the page scrolls, but nothing responds to
     being tapped. Every other modal in the site removes its overlay element on
     close, but newcall.js builds the New Tow Call modal once and closes it by
     dropping the `open` class, so dashboard.html and jobs.html were carrying an
     invisible click-blocker from the moment they finished loading.
     `visibility: hidden` also pulls the modal's inputs out of the tab order and
     the accessibility tree; without it, tabbing across the dashboard walked
     into a form nobody could see. Visibility is deliberately in the transition
     list so it stays visible for the length of the fade-out. */
  visibility: hidden; pointer-events: none;
}
.modal-overlay.open { opacity: 1; visibility: visible; pointer-events: auto }
.modal {
  width: min(100%, 640px); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column;
  background: #fff; color: var(--color-text); border-radius: 22px; box-shadow: var(--shadow-lg);
  transform: translateY(10px); transition: transform .16s ease;
  /* The card is height-capped, so anything taller than it MUST be clipped to
     it. Without this the overflowing part of a long form (New Tow Call is
     ~2100px of fields in a ~930px card) painted straight onto the page with no
     white behind it — that is the "transparent modal": the card was never
     transparent, the form had simply escaped the card. */
  overflow: hidden;
}
/* A form is the flex child in the taller modals (.modal > form > .modal-body),
   so it has to be a shrinkable flex column too, or .modal-body never gets a
   bounded height and its overflow-y:auto has nothing to scroll against.
   min-height:0 is the whole trick: a flex item defaults to min-height:auto,
   which refuses to shrink below its content and is what let the form grow past
   the card in the first place. */
.modal > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0 }
.modal-overlay.open .modal { transform: none }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-divider) }
.modal-head h3 { font-size: var(--text-lg) }
.modal-close { appearance: none; background: transparent; border: 0; font-size: 1.15rem; line-height: 1; color: var(--color-text-muted); cursor: pointer; min-height: 36px; min-width: 36px; border-radius: var(--radius-full) }
.modal-close:hover { background: rgba(18, 37, 63, .07); color: var(--color-text) }
.modal-body { padding: var(--space-5); overflow-y: auto; display: block; flex: 1 1 auto; min-height: 0 }
.modal-foot { display: grid; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-divider) }
.modal-foot .primary-btn, .modal-foot .secondary-btn { width: 100% }

@media (max-width: 640px) {
  .form-grid { grid-template-columns: 1fr }
  .modal { border-radius: 18px }
  .invite-actions { margin-left: 0 }
}

/* ---- auth pages (login / signup / join / password reset) ---------------- */
/* .login-card already has the surface and radius; these give the page the
   centred column it expects and stop the footer link from running together. */
.auth-center { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 6vw, 5rem) var(--space-4) var(--space-16) }
.auth-card { width: min(100%, 460px) }
.login-foot { color: var(--color-text-muted); font-size: var(--text-sm); text-align: center }
.login-foot .form-link, .auth-card .form-link { display: inline; color: var(--color-primary) }
.auth-center .code-input { max-width: none }

/* ---- optional/expandable blocks used by new-call and job detail --------- */
.plate-row, .vin-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap }
.plate-row > *, .vin-row > * { flex: 1 1 auto; min-width: 0 }
.plate-state, .plate-state-other { flex: 0 0 auto; max-width: 130px }
.vin-msg, .ppi-note { font-size: var(--text-xs); color: var(--color-text-muted); flex-basis: 100% }
.role-select { font-weight: 700 }

/* ---- job detail: sections, key/value rows, attachments ----------------- */
.detail-sec { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: #fff; display: grid; gap: var(--space-3) }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) }
.detail-row { display: flex; justify-content: space-between; gap: var(--space-3); padding: .4rem 0; border-bottom: 1px solid var(--color-divider) }
.detail-k, .mk, .pm-label { color: var(--color-text-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em }
.detail-v, .mv { font-weight: 600; text-align: right; word-break: break-word }
.metagrid, .pm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-3) }
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3) }
.att-item { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2) }
.att-item img { width: 100%; height: 110px; object-fit: cover }
.att-open { display: block }
.att-actions { display: flex; gap: .4rem; flex-wrap: wrap }
.att-empty, .noimg { color: var(--color-text-muted); font-size: var(--text-sm); text-align: center; padding: var(--space-4) }
.sigpad { width: 100%; height: 180px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: #fff; touch-action: none }
.sigpad-row { display: flex; gap: .5rem; justify-content: flex-end; margin-top: .5rem }
.sig img { max-height: 120px }

/* Read-only detail fields mirror the New Tow Call form: same two-column grid,
   same small uppercase label, value in a quiet filled box underneath. The old
   .detail-sec was styled as a card but used as a heading, which is why the
   section names sat alone inside their own white boxes. */
.detail-field { display: grid; gap: .25rem; min-width: 0; align-content: center; padding: .5rem .8rem;
  min-height: 52px; border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface-2) }
.detail-field.col-2 { grid-column: 1 / -1 }
.detail-field .detail-v { text-align: left; font-size: var(--text-sm) }
.detail-invoice { grid-column: 1 / -1; font-weight: 700; font-size: var(--text-sm);
  letter-spacing: .04em; color: var(--color-text-muted) }

/* The Call detail footer carries five controls, so it wraps instead of forcing
   each button to full width the way the single-action modals do. */
.detail-foot { display: flex; flex-wrap: wrap; gap: var(--space-3) }
.detail-foot .secondary-btn, .detail-foot .primary-btn { width: auto; flex: 1 1 auto }
.detail-foot .primary-btn { flex-grow: 2 }
.pm-count { display: inline-block; margin-left: .4rem; padding: 0 .45rem; border-radius: var(--radius-full);
  background: var(--color-primary); color: #fff; font-size: var(--text-xs); font-weight: 700 }
.pm-count:empty { display: none }
.pm-count.none { background: rgba(18, 37, 63, .18); color: var(--color-text-muted) }

/* Capture slots had no rule at all, so they drew as bare buttons with the
   caption floating loose underneath a stray plus sign. */
.pm-hint { font-size: var(--text-xs); color: var(--color-text-muted); margin: .15rem 0 .5rem }
.pm-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem; aspect-ratio: 4 / 3; padding: .5rem; overflow: hidden; cursor: pointer; appearance: none;
  text-align: center; color: var(--color-text); background: var(--color-surface-2);
  border: 1px dashed var(--color-border); border-radius: var(--radius-md) }
.pm-slot:hover { border-color: var(--color-primary); color: var(--color-primary) }
.pm-slot .pm-add { display: block; margin: 0; font-size: 1.4rem; line-height: 1; color: var(--color-primary) }
.pm-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.pm-slot .pm-cap { position: relative; z-index: 1; font-size: var(--text-xs); line-height: 1.15 }
.pm-slot.filled { border-style: solid; border-color: var(--color-primary) }
.pm-slot.filled .pm-cap { align-self: stretch; margin-top: auto; padding: .2rem .3rem; border-radius: 8px;
  background: rgba(6, 16, 30, .68); color: #fff }
.docs-overlay { z-index: 1100 }

/* The empty/error line inside the signature grid is a message, not a card, so
   it spans every column instead of being squeezed into the first one. */
.att-grid > .att-empty { grid-column: 1 / -1 }

/* The signature pad is its own overlay on top of everything else. It had no
   positioning rule at all, so it used to render as a stray 180px-tall box at
   the bottom of the page instead of a centred dialog. */
.sigpad-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: var(--space-4); overflow-y: auto; background: rgba(6, 16, 30, .72) }
.sigpad-overlay .sigpad { width: min(100%, 640px); height: auto; padding: var(--space-5); border: 0;
  border-radius: 22px; background: #fff; color: var(--color-text); box-shadow: var(--shadow-lg) }
.sigpad-overlay .sigpad h3 { margin-bottom: var(--space-3); font-size: var(--text-lg) }
.sigpad-overlay canvas { width: 100%; height: 180px; border: 1px dashed var(--color-border);
  border-radius: var(--radius-md); background: #fff; touch-action: none }
.sigpad-overlay .sigpad-row { flex-wrap: wrap }
.sigpad-overlay #sig-name { flex: 1 1 180px; min-height: 44px; padding: 0 .8rem;
  border: 1px solid var(--color-border); border-radius: 12px; background: #fff; color: var(--color-text) }

/* ---- invoice + line-item tables ---------------------------------------- */
.li-lines, .items { display: grid; gap: .4rem }
.li-row, .pp-row, .cp-row { display: grid; grid-template-columns: 1fr 70px 100px 100px 36px; gap: .4rem; align-items: center }
.pp-row, .cp-row { grid-template-columns: 1fr 110px 36px }
.li-desccell, .li-desc, .pp-desc, .cp-desc { min-width: 0 }
.li-qty, .li-price, .pp-price, .cp-price { text-align: right }
.li-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700 }
.li-del, .pp-del, .cp-del { appearance: none; border: 0; background: transparent; color: #a03d28; cursor: pointer; font-size: 1.1rem; line-height: 1 }
.li-add, .pm-add, .imp-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .5rem }
.li-total, .totals, .totalline, .sumrow, .grand { display: flex; justify-content: space-between; gap: var(--space-4); font-variant-numeric: tabular-nums }
.grand, .li-total, .total { font-weight: 700; border-top: 1px solid var(--color-border); padding-top: .5rem }
.big { font-size: var(--text-lg) }
.rc-head, .mf-head { display: flex; justify-content: space-between; gap: var(--space-4); align-items: flex-start; margin-bottom: var(--space-3) }
.rc-co, .mf-co, .inv-word, .mf-title { font-weight: 900 }
.inv-word { font-size: var(--text-xl); letter-spacing: .04em }
.rc-inv, .inv-no { color: var(--color-text-muted); font-size: var(--text-sm) }
.rc-foot { border-top: 1px solid var(--color-border); margin-top: var(--space-4); padding-top: var(--space-3) }
.pagebreak { break-after: page; page-break-after: always }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) }

/* ---- reports: bar + legend --------------------------------------------- */
.report-grid, .perf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4) }
.perf-tile { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: #fff }
.bar-chart { display: grid; gap: .6rem }
.bar-row { display: grid; grid-template-columns: 120px 1fr 90px; gap: var(--space-3); align-items: center }
.bar-label { font-size: var(--text-sm); color: var(--color-text-muted) }
.bar-track { height: 10px; border-radius: var(--radius-full); background: rgba(18, 37, 63, .1); overflow: hidden }
.bar-fill { height: 100%; border-radius: var(--radius-full); background: var(--color-primary) }
.bar-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700 }
.legend { display: flex; gap: var(--space-4); flex-wrap: wrap }
.legend-item { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--text-sm) }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--color-primary) }
.donut-wrap { display: grid; place-items: center; min-height: 200px }

/* ---- live indicators, driver cards, tracking --------------------------- */
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); display: inline-block; box-shadow: 0 0 0 4px rgba(43, 140, 95, .18) }
.gps-pin { width: 14px; height: 14px; border-radius: 50%; background: var(--color-primary); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(15, 23, 42, .35) }
.driver-top { display: flex; align-items: center; gap: var(--space-3) }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-highlight); color: var(--color-primary); font-weight: 900; flex: none }
.driver-stats { display: flex; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-sm); color: var(--color-text-muted) }
.queue-nearest, .queue-assign { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap }
/* Assigned calls sit in the same queue as unassigned ones so a dispatcher can
   move one without leaving the board. They are toned down on purpose: an
   unassigned call is work nobody has picked up and should keep the eye. */
.queue-divider { margin: .9rem 0 .5rem; font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-faint) }
.queue-item-assigned { background: #fbfbfa; border-style: dashed }

.trk-shell { width: min(100%, 640px); margin: 0 auto; display: grid; gap: var(--space-4) }
.trk-card { border: 1px solid var(--color-border); border-radius: 22px; padding: var(--space-5); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: var(--shadow-md) }
.trk-head { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start }
.trk-co { font-weight: 900 }
.trk-status-big { font-size: var(--text-xl); font-weight: 900 }
.trk-eta { color: var(--color-primary); font-weight: 700 }
.trk-steps { display: grid; gap: .6rem }
.trk-step { display: flex; align-items: center; gap: .6rem; color: var(--color-text-muted) }
.trk-step.active, .trk-step.done { color: var(--color-text); font-weight: 700 }
.trk-rows { display: grid; gap: .4rem }
.trk-row { display: flex; justify-content: space-between; gap: var(--space-3) }
.trk-callbtn { width: 100% }
.trk-foot { color: var(--color-text-muted); font-size: var(--text-xs); text-align: center }

@media (max-width: 640px) {
  .detail-grid, .cols { grid-template-columns: 1fr }
  .detail-foot .secondary-btn, .detail-foot .primary-btn { flex-basis: 100% }
  .li-row { grid-template-columns: 1fr 56px 84px 84px 32px }
  .bar-row { grid-template-columns: 84px 1fr 72px }
}

/* Footer legal links. Apple requires a reachable privacy policy, and enterprise
   buyers look for terms; both need to be one click from anywhere on the site. */
.footer-legal { display: inline-flex; gap: var(--space-3); margin-left: var(--space-3) }
.footer-legal a { color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px }
.footer-legal a:hover { color: var(--color-text) }
@media (max-width: 640px) {
  .footer-legal { display: flex; margin-left: 0; margin-top: var(--space-2) }
}


/* ---- job detail: delete block ------------------------------------------- */
/* Kept visually quiet at the bottom of the window. You have to go looking for
   it, and it takes two deliberate clicks to fire. */
.jd-danger {
  margin-top: var(--space-5, 1.25rem);
  padding-top: var(--space-4, 1rem);
  border-top: 1px solid var(--line, #e5e7eb);
}
.jd-danger-head { font-weight: 600; color: #b42318; margin-bottom: .25rem; }
.jd-danger-note {
  margin: 0 0 .7rem;
  font-size: .86rem;
  line-height: 1.45;
  color: var(--muted, #667085);
}
.jd-danger-label {
  display: block;
  font-size: .8rem;
  color: var(--muted, #667085);
  margin-bottom: .25rem;
}
.jd-danger-input {
  width: 100%;
  padding: .5rem .6rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  font: inherit;
  background: #fff;
  color: inherit;
}
.jd-danger-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3, .75rem);
  margin-top: .7rem;
}
.jd-danger-actions .secondary-btn,
.jd-danger-actions .primary-btn,
.jd-danger-actions .danger-btn { width: auto; flex: 1 1 auto; }
.jd-danger-err { margin-top: .6rem; font-size: .85rem; color: #b42318; }

/* ---- job detail: GOA / no-tow block -------------------------------------
   Reuses the delete block's layout but not its colour. Closing a call the truck
   never towed is normal work, not a destructive act, so the heading is the plain
   text colour instead of red — otherwise a driver reads it as "delete" and never
   touches it. The two blocks sit one above the other, so the no-tow one drops
   the divider to keep from drawing a second line across the window. */
/* The box carries .jd-danger too, so spacing and the divider come from there.
   :not([hidden]) matters — the delete box is hidden outright for anyone without
   delete_records, and an unqualified sibling rule would strip its divider even
   when no no-tow block is actually on screen above it. */
.jd-notow:not([hidden]) + .jd-danger { border-top: 0; margin-top: var(--space-4, 1rem); padding-top: 0; }
.jd-notow-head { font-weight: 600; margin-bottom: .25rem; color: inherit; }
.jd-notow-rows { margin: 0 0 .7rem; }
.jd-notow-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3, .75rem);
  padding: .3rem 0;
  border-bottom: 1px solid var(--line, #e5e7eb);
  font-size: .9rem;
}
.jd-notow-row:last-child { border-bottom: 0; }
.jd-notow-row span { color: var(--muted, #667085); }
.jd-notow-row strong { font-weight: 600; text-align: right; }
.jd-notow-opts { display: grid; gap: .35rem; margin-bottom: .7rem; }
.jd-notow-opt {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .45rem .55rem;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
}
.jd-notow-opt:hover { border-color: var(--muted, #667085); }
.jd-notow-opt input { margin-top: .2rem; flex: 0 0 auto; }
.jd-notow-opt span { display: block; font-size: .88rem; line-height: 1.35; }
.jd-notow-opt small { display: block; color: var(--muted, #667085); font-size: .8rem; }

.danger-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-radius: 10px;
  border: 1px solid #fda29b;
  background: #fff;
  color: #b42318;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.danger-btn:hover:not(:disabled) { background: #fef3f2; border-color: #f97066; }
.danger-btn:disabled { opacity: .5; cursor: not-allowed; }


/* ---- settings: recycle bin ----------------------------------------------- */
.rb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-3, .75rem);
  padding: .8rem 0;
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,.08));
}
.rb-row:last-child { border-bottom: 0; }
.rb-main { flex: 1 1 260px; min-width: 0; }
.rb-title { font-weight: 700; }
.rb-sub,
.rb-meta {
  font-size: var(--text-sm, .86rem);
  color: var(--color-text-muted, #8899ab);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.rb-meta { margin-top: .15rem; opacity: .85; }
.rb-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .4rem;
  flex: 0 0 auto;
}
.rb-left {
  font-size: var(--text-sm, .86rem);
  font-weight: 600;
  color: var(--color-text-muted, #8899ab);
  white-space: nowrap;
}
.rb-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.danger-btn.rb-mini { padding: .3rem .7rem; border-radius: 8px; font-size: var(--text-sm, .86rem); }
.rb-confirm {
  flex: 1 1 100%;
  margin-top: .3rem;
  padding: .7rem .8rem;
  border: 1px solid #fda29b;
  border-radius: 10px;
  background: rgba(180, 35, 24, .08);
}
.rb-confirm-text { font-size: var(--text-sm, .86rem); line-height: 1.45; }
.rb-confirm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

@media (max-width: 560px) {
  .rb-side { align-items: flex-start; width: 100%; }
}

/* ---- RESTORED LANDING-PAGE RULES (2026-08-02) --------------------------- */
/* These five selectors are used by index.html but had no rules in this
   stylesheet. They existed in the pre-refactor version (still being served
   by fleethook-multipage.vercel.app) and were dropped when the design
   tokens were reworked. Rewritten here against the CURRENT token names --
   the old ones (--border-soft, --panel-grad) no longer exist. */

/* "How it fits together" band: text column + photo, side by side.
   Without this, .ops-band was an unstyled block, so the role rows spanned
   the full 1240px container and the photo fell underneath. */
.ops-band {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: 24px;
  box-shadow: var(--shadow-md);
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02));
}
.ops-illus { width: 100%; height: auto; border-radius: 14px }
@media (max-width: 900px) { .ops-band { grid-template-columns: 1fr } }

/* Small uppercase label on the benefit cards ("For owners", etc.). */
.kicker {
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: var(--text-xs);
  font-weight: 800;
  margin-bottom: .35rem;
}

/* Hero photo fills its stage. .truck-stage is already position:relative. */
.truck-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px }

/* The hero stage's background-image was a presigned S3 URL that expired on
   2026-07-20, so it resolved to nothing. .truck-photo covers it anyway. */
.truck-stage { background: linear-gradient(180deg, rgba(9, 29, 54, .2), rgba(9, 29, 54, .72)), #0b2039 }

/* Mobile menu button. Breakpoint matches .nav-links{display:none} at 840px
   so the hamburger and the full nav are never both visible. */
.nav-toggle { display: none; padding: 0; width: 44px; color: var(--color-text); background: rgba(255, 255, 255, .03) }
@media (max-width: 840px) { .nav-toggle { display: inline-flex } }

/* Contrast fix: .queue-item paints a near-white card (#f7f7f4), but on the
   dark landing page the text inside inherited the near-white body colour,
   so the role names were near-invisible. Force dark ink inside the card. */
.queue-item, .queue-item strong, .queue-item-assigned, .queue-item-assigned strong { color: #12253f }


/* Wide data tables on small screens. A 7-column board is wider than a
   phone; without this it drags the whole page sideways and clips the
   cards beside it. Here the table scrolls inside its own panel instead. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll > table { min-width: 640px; }


/* The real mobile-overflow fix. CSS grid/flex items default to
   min-width:auto and will NOT shrink below their widest child, so the
   640px board dragged the whole dashboard wider than the phone. Letting
   the chain shrink to 0 lets .table-scroll actually scroll instead, and
   the overflow-x:hidden is a final guard so nothing forces a sideways
   page scroll. Desktop is unaffected - those boxes already fit. */
.dashboard-main, .dash-body, .dash-body > *, .app-grid, .app-grid > *,
.panel, .table-scroll { min-width: 0; /* dash-shrink-fix */ }
.dashboard-main { overflow-x: hidden; }

/* Plan feature-gate empty state (renderUpgradeState in appsession.js) */
.upgrade-state{max-width:560px;margin:clamp(2rem,8vh,6rem) auto;text-align:center;padding:var(--space-8) var(--space-6);border:1px solid var(--color-border);border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:var(--shadow-md)}
.upgrade-state .upgrade-badge{font-size:2.2rem;margin-bottom:var(--space-3)}
.upgrade-state h2{font-size:var(--text-xl);margin-bottom:var(--space-3)}
.upgrade-state p{color:var(--color-text-muted);margin-bottom:var(--space-6);max-width:44ch;margin-left:auto;margin-right:auto}

/* Pricing: EnforcementPro add-on banner + Enterprise card */
.tier-note{display:block;font-size:var(--text-xs);color:var(--color-text-muted);margin-top:.2rem;font-weight:400}
.addon-banner{display:flex;gap:var(--space-5);align-items:center;margin-top:var(--space-6);padding:var(--space-6);
  border-radius:24px;border:1px solid var(--color-primary);
  background:linear-gradient(180deg,var(--color-primary-highlight),transparent);box-shadow:var(--shadow-md)}
.addon-banner .addon-icon{font-size:2.6rem;line-height:1;flex:0 0 auto}
.addon-banner h3{font-size:var(--text-lg);margin-bottom:.4rem}
.addon-banner p{color:var(--color-text-muted);max-width:74ch;line-height:1.55}
.enterprise-card{margin-top:var(--space-6);padding:var(--space-6);border-radius:24px;border:1px solid var(--color-border);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:var(--shadow-md)}
.enterprise-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5)}
.enterprise-title{font-size:var(--text-xl);margin-bottom:.35rem}
.enterprise-sub{color:var(--color-text-muted);max-width:60ch;margin:0}
.enterprise-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);list-style:none;padding:0;margin:0}
.enterprise-list li{position:relative;padding-left:1.6rem;line-height:1.45}
.enterprise-list li::before{content:'\2713';position:absolute;left:0;top:0;color:var(--color-primary);font-weight:700}
@media (max-width:640px){.addon-banner{flex-direction:column;text-align:center}.enterprise-list{grid-template-columns:1fr}.enterprise-head{flex-direction:column;align-items:flex-start}}