/* ============================================================================
   brand-theme.css — FreightDeck brand (Alabama Creates, 10/2026). TEST APP ONLY.
   Loaded LAST. Pure styling: colors, fonts, buttons, cards, inputs, nav.
   No layout or logic changes — every page keeps working exactly as before.
   Palette (Joe's brand guide / Brooke's site): Perfect Weather #EAF9FF · Port Side Freight #00A0E7
   · Midnight Haul #1D4784 · Guidance Orange #FFB833 · Overcast #F4F2EE · ink #1B2A3A
   ============================================================================ */

/* ---- fonts: the app's existing font names now render the brand fonts (catches inline JS styles too) ---- */
@font-face{font-family:'Oswald';src:url(/fonts/brand/octosquares-regular.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Oswald';src:url(/fonts/brand/octosquares-medium.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Oswald';src:url(/fonts/brand/octosquares-demibold.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Oswald';src:url(/fonts/brand/octosquares-bold.woff2) format('woff2');font-weight:700 900;font-display:swap}
@font-face{font-family:'Octosquares';src:url(/fonts/brand/octosquares-bold.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Inter';src:url(/fonts/brand/NunitoSans.ttf) format('truetype');font-weight:200 1000;font-display:swap}
@font-face{font-family:'Libre Franklin';src:url(/fonts/brand/NunitoSans.ttf) format('truetype');font-weight:200 1000;font-display:swap}
@font-face{font-family:'IBM Plex Sans';src:url(/fonts/brand/NunitoSans.ttf) format('truetype');font-weight:200 1000;font-display:swap}
@font-face{font-family:'Nunito Sans';src:url(/fonts/brand/NunitoSans.ttf) format('truetype');font-weight:200 1000;font-display:swap}

/* ---- Level 1: color tokens (the app's single source of truth for color) ---- */
:root{
  --fd-bg:#EAF9FF; --fd-panel:#FFFFFF; --fd-panel2:#F6FCFF; --fd-bg2:#DDF3FD;
  --fd-surf-3:#E3F5FD; --fd-surf-4:#E6F6FD; --fd-surf-5:#F7FCFF; --fd-surf-6:#CDEBF8; --fd-surf-7:#E2F1FB; --fd-surf-8:#E8F4FC; --fd-surf-9:#CFE3F1; --fd-surf-10:#EEF6FB;
  --fd-tint-good:#DCEFE2; --fd-tint-warn:#FFF0CF; --fd-tint-bad:#F8DCDC; --fd-tint-warn2:#FBE7D3; --fd-tint-warn3:#FFF6E0;
  --fd-border:#A9DDF4; --fd-border2:#7CCBEE;
  --fd-ink:#1B2A3A; --fd-ink2:#1D3352; --fd-muted2:#33465A; --fd-muted:#4A5B6C; --fd-dim:#667788;
  --fd-accent:#1D4784; --fd-accent2:#163868; --fd-purple:#5B3FB8; --fd-good:#137A3B; --fd-warn:#A8520F; --fd-bad:#B42318;
  --fd-panel-rgb:255,255,255; --fd-bg-rgb:234,249,255; --fd-panel2-rgb:246,252,255; --fd-bg2-rgb:221,243,253;
  --fd-surf5-rgb:247,252,255; --fd-surf7-rgb:226,241,251; --fd-surf9-rgb:207,227,241;
  --fd-accent-rgb:29,71,132; --fd-muted-rgb:74,91,108; --fd-border-rgb:169,221,244; --fd-border2-rgb:124,203,238;
  --fd-wash-rgb:27,42,58; --fd-overlay-rgb:16,32,56;
  --fdb-line:#00A0E7; --fdb-navy:#1D4784; --fdb-orange:#FFB833; --fdb-hatch:repeating-linear-gradient(-50deg,#FFB833 0 1.6px,transparent 1.6px 5px);
  --fdb-hatch-blue:repeating-linear-gradient(-50deg,rgba(0,160,231,.75) 0 1.3px,transparent 1.3px 6.5px);
}
:root[data-theme="dark"]{
  --fd-bg:#0C1A2E; --fd-panel:#12253F; --fd-panel2:#0F2038; --fd-bg2:#173052;
  --fd-surf-3:#0E1E35; --fd-surf-4:#10223B; --fd-surf-5:#142A47; --fd-surf-6:#1C3A63; --fd-surf-7:#16304F; --fd-surf-8:#183456; --fd-surf-9:#21426B; --fd-surf-10:#132842;
  --fd-tint-good:#123B2A; --fd-tint-warn:#3D2E10; --fd-tint-bad:#3E1A1C; --fd-tint-warn2:#3A2614; --fd-tint-warn3:#33290F;
  --fd-border:#24497A; --fd-border2:#2F5E97;
  --fd-ink:#EAF9FF; --fd-ink2:#D3ECF8; --fd-muted2:#B6CFE0; --fd-muted:#9DB8CC; --fd-dim:#7E98AE;
  --fd-accent:#00A0E7; --fd-accent2:#33B5EE; --fd-good:#3DBE76; --fd-warn:#FFB833; --fd-bad:#F07167;
  --fd-panel-rgb:18,37,63; --fd-bg-rgb:12,26,46; --fd-panel2-rgb:15,32,56; --fd-bg2-rgb:23,48,82;
  --fd-surf5-rgb:20,42,71; --fd-surf7-rgb:22,48,79; --fd-surf9-rgb:33,66,107;
  --fd-accent-rgb:0,160,231; --fd-muted-rgb:157,184,204; --fd-border-rgb:36,73,122; --fd-border2-rgb:47,94,151;
  --fd-wash-rgb:234,249,255; --fd-overlay-rgb:4,10,20;
}

/* ---- typography ---- */
body,input,select,textarea,button{font-family:'Nunito Sans','Segoe UI',system-ui,sans-serif}
h1,h2,h3{color:var(--fd-accent)}
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3{color:var(--fd-ink)}

/* ---- Level 2: components in the website's style ---- */
/* square-ish corners, thin blueprint lines */
.btn,.btn-sm,.btn-primary,.btn-secondary,input,select,textarea,.account-card,.quotes-stat-card,.tv-card,.rfp-card,.tn-qr-card,.modal-content,.tn-menu,
[class*="-card"]:not([class*="avatar"]),[class*="panel"]:not([class*="avatar"]){border-radius:3px!important}
input:focus,select:focus,textarea:focus{outline:2px solid var(--fdb-line)!important;outline-offset:0;border-color:var(--fdb-line)!important}

/* buttons: uppercase, tracked, navy primary / outlined secondary, orange hatch hover accent */
.btn,.btn-primary,.btn-secondary,.tn-seg-btn,.tn-qr-act-btn{text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.btn-primary,#calcRouteBtn{background:var(--fdb-navy)!important;border-color:var(--fdb-navy)!important;color:#fff!important;box-shadow:none!important}
.btn-primary:hover,#calcRouteBtn:hover{background:#163868!important;box-shadow:inset 0 -3px 0 var(--fdb-orange)!important}
.btn-secondary{background:transparent!important;border:1px solid var(--fdb-line)!important;color:var(--fdb-navy)!important}
.btn-secondary:hover{background:rgba(0,160,231,.08)!important}
:root[data-theme="dark"] .btn-secondary{color:var(--fd-ink)!important}

/* top bar: sky background, blueprint hairline, uppercase tracked links, orange hatch under the active tab */
.tn-topbar{background:var(--fd-bg)!important;border-bottom:1px solid var(--fdb-line)!important;box-shadow:none!important}
.tn-link,.nav-item-label{text-transform:uppercase;letter-spacing:.07em}
.tn-link.active,.tn-link[aria-current],.nav-item.active{position:relative}
.tn-link.active::after,.tn-link[aria-current]::after{content:"";position:absolute;left:8px;right:8px;bottom:-2px;height:5px;background:var(--fdb-hatch)}

/* section headings get the brand hatch tick */
.account-section-title,.tn-qr-title{position:relative;padding-left:14px}
.account-section-title::before,.tn-qr-title::before{content:"";position:absolute;left:0;top:.15em;bottom:.15em;width:6px;background:var(--fdb-hatch)}

/* tables: navy header text, blueprint row lines */
table th{color:var(--fdb-navy);letter-spacing:.04em}
:root[data-theme="dark"] table th{color:var(--fd-ink)}
table td,table th{border-color:var(--fd-border)!important}

/* badges / beta tags in the brand orange */
.tn-qr-beta,[class*="beta-badge"]{background:var(--fdb-orange)!important;color:#1B2A3A!important}

/* Octosquares is wider than the old Oswald: keep compact rows on one line */
.btn,.btn-sm,.btn-primary,.btn-secondary{letter-spacing:.02em}
.btn-sm,#tbPasteBtn2,#tbBrowseBtn2,#tbAddItemBtn,.tn-seg-btn{font-size:11.5px!important;letter-spacing:.02em!important;padding-left:10px!important;padding-right:10px!important}
.tn-link{letter-spacing:.04em}

/* ===================== cohesion pass 1 (audit 10/21) ===================== */
/* section titles: the old 3px navy bar becomes the brand orange hatch tick (as on the website) */
h1::before,h2::before,h3::before,h4::before{background:var(--fdb-hatch)!important;width:6px!important}
.quotes-title,.fdlc-hd,#tbItemCount{border-left:6px solid transparent!important;border-image:repeating-linear-gradient(-50deg,#FFB833 0 1.6px,transparent 1.6px 5px) 1!important}

/* top nav: one active treatment only (orange hatch underline), no box */
.tn-link.active{background:none!important;border-color:transparent!important;color:var(--fdb-navy)!important}
:root[data-theme="dark"] .tn-link.active{color:var(--fd-ink)!important}

/* dark mode: light logo so it doesn't vanish on the navy header */
:root[data-theme="dark"] .tn-brand img,:root[data-theme="dark"] img[src*="favicon.svg"]{filter:brightness(0) invert(1)}

/* dashboard KPI accents: brand palette instead of pink/green/orange */
.kpi-1::before{background:var(--fdb-navy)!important}
.kpi-2::before{background:var(--fdb-line)!important}
.kpi-3::before{background:var(--fdb-orange)!important}
.kpi-4::before{background:var(--fdb-hatch),#1D4784!important}
.kpi-1 .kpi-icon{background:rgba(29,71,132,.12)!important;color:var(--fdb-navy)!important}
.kpi-2 .kpi-icon{background:rgba(0,160,231,.14)!important;color:#0079B3!important}
.kpi-3 .kpi-icon,.kpi-4 .kpi-icon{background:rgba(255,184,51,.20)!important;color:#A8520F!important}
.kpi-icon{border-radius:3px!important}

/* RFP rater steps: squared like every other control */
.rfp-step{border-radius:3px!important;text-transform:uppercase;letter-spacing:.04em;font-size:12px!important}
.rfp-step.active{background:var(--fdb-navy)!important}
.rfp-step-num{border-radius:2px!important}

/* legal rate check: brand map canvas + the Paste button matches other buttons */
.leaflet-container{background:var(--fd-bg2)!important}
.map-placeholder{background:rgba(var(--fd-bg-rgb),.75)!important}
.paste-target-mini{border-radius:3px!important}
.paste-target-mini .paste-text{font-size:11.5px!important;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fdb-navy)}

/* phone: Snap-the-rate-request card, flat navy with the hatch accent, square corners */
.fd-mcam{background:var(--fdb-navy)!important;border-radius:3px!important;box-shadow:inset 6px 0 0 #FFB833!important}
.fd-mcam .fd-mcam-lens{display:none!important}