/* ============================================================
   JHZ industry theme — replaces the pure black scheme
   Palette rationale: freight/logistics buyers expect stability
   and trust: deep navy (authority) + teal (data) + light canvas.
   No background gradients (design system rule B4).
   ============================================================ */

:root{
  /* brand surfaces */
  --navy:#0E2A47;
  --navy-2:#12314F;
  --navy-3:#17395C;
  --navy-line:#234A70;

  /* accent */
  --brand:#0F766E;
  --brand-600:#0B6259;
  --brand-soft:#E7F3F1;

  /* canvas */
  --bg:#FFFFFF;
  --bg-soft:#F5F7FA;
  --bg-tint:#EDF2F7;
  --line:#E1E7EF;
  --line-2:#EEF2F7;

  /* type */
  --text:#0F1B2A;
  --text-2:#40536B;
  --muted:#71829A;

  /* semantic */
  --up:#15803D;
  --down:#B42318;
  --warn:#B45309;
}

/* ---------- dark surfaces use navy, not black ---------- */
.hero,.phero,.cta,.ftr,.tagline,.drawer{background:var(--navy);color:#fff}
.hdr-in{background:rgba(14,42,71,.82);border-color:rgba(255,255,255,.10);box-shadow:0 8px 28px rgba(14,42,71,.28)}
.hdr.scrolled .hdr-in{background:rgba(14,42,71,.95);box-shadow:0 12px 36px rgba(14,42,71,.34)}
.hero-panel{background:var(--navy-2);border-color:var(--navy-line)}
.hp-head{border-bottom-color:var(--navy-line)}
.hp-row{border-bottom-color:var(--navy-line)}
.hp-route{color:#fff}
.hp-sub,.hp-head span,.hp-foot{color:#93A7BF}
.hp-route .a{color:#5C7A99}
.ftr-bot{border-top-color:var(--navy-line);color:#8FA3BB}
.ftr a{color:#B7C6D8}
.ftr-brand p{color:#8FA3BB}
.ftr h4{color:#fff}
.cta p{color:#A9BACE}
.phero p,.hero-lede{color:#B7C6D8}
.crumb{color:#8FA3BB}
.tagline .w{color:#3A5675}
.tagline .w.on{color:#fff}

/* buttons on navy surfaces */
.hdr-cta .btn-ghost{border-color:rgba(255,255,255,.22);color:#fff}
.hdr-cta .btn-ghost:hover{background:rgba(255,255,255,.10)}
.hdr-cta .btn-primary{background:#fff;color:var(--navy)}
.hdr-cta .btn-primary:hover{background:#E7EEF6}
.cta .btn-dark{background:#fff;color:var(--navy)}
.cta .btn-dark:hover{background:#E7EEF6}

/* brand accent goes teal on navy */
.hero h1 span,.hero h1 em{background:linear-gradient(90deg,#fff 0%,#9FB6CE 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav a[aria-current="page"]{background:#fff;color:var(--navy)}

/* light surfaces */
.card,.spot-card,.lane-card,.step,.carrier-card,.table-wrap,.stats,.pulse-strip,.search-card{background:#fff;border-color:var(--line)}
.stat{border-right-color:var(--line)}
.sec.soft{background:var(--bg-soft);border-color:var(--line-2)}
.card:hover,.spot-card:hover,.lane-card:hover,.carrier-card:hover{box-shadow:0 12px 30px rgba(14,42,71,.10);border-color:#CFDAE8}
.card .ic{background:var(--brand-soft);color:var(--brand)}
.step::before{background:var(--navy)}
table.data thead th{background:var(--bg-soft);color:var(--muted)}
table.data tbody tr:hover{background:#F9FBFD}
.badge{background:var(--bg-soft);border-color:var(--line);color:var(--text-2)}
.badge.green{background:#EBF7EF;border-color:#C6E9D3;color:#15803D}
.badge.amber{background:#FDF6E8;border-color:#EFDDB4;color:#92600A}
.badge.blue{background:#EEF4FB;border-color:#CFDEEF;color:#1D4ED8}
.btn-primary{background:var(--navy);color:#fff}
.btn-primary:hover{background:var(--navy-3)}
.btn-ghost{border-color:var(--line);color:var(--text)}
.btn-ghost:hover{background:var(--bg-soft);border-color:#C9D6E5}
.btn-link{color:var(--brand)}
.field select,.field input,.field textarea{border-color:var(--line)}
.field select:focus,.field input:focus,.field textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(15,118,110,.14)}
.note{background:var(--bg-soft);border-color:var(--line);color:var(--text-2)}
.note.info{background:#EEF4FB;border-color:#CFDEEF;color:#1D4ED8}
.eyebrow{color:var(--muted)}
.spot-meta{border-color:var(--line-2)}
.spot-price b,.lane-price{color:var(--text)}
.idx-chart .line{stroke:var(--brand)}
.idx-chart .area{fill:rgba(15,118,110,.10)}
.idx-chart .grid{stroke:var(--line-2)}
.idx-chart .axis{fill:var(--muted)}

/* ---------- foolproofing primitives ---------- */
.field-hint{font-size:12px;line-height:16px;color:var(--muted);margin-top:2px}
.field-error{font-size:12px;line-height:16px;color:var(--down);margin-top:2px;display:none}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--down);box-shadow:0 0 0 3px rgba(180,35,24,.10)}
.field.invalid .field-error{display:block}
.field.valid input,.field.valid select{border-color:#8CCBA5}
.req{color:var(--down);margin-left:2px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none!important}

/* filter summary + clear */
.filter-summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:16px 0 4px;min-height:28px}
.filter-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--brand-soft);border:1px solid #C9E6E1;color:var(--brand-600);font-size:12px;line-height:16px;font-weight:600}
.filter-chip button{color:inherit;font-size:14px;line-height:1;padding:0 2px}
.filter-clear{font-size:12px;line-height:16px;font-weight:600;color:var(--text-2);text-decoration:underline;text-underline-offset:2px}

/* skeletons (loading state) */
.skeleton{background:linear-gradient(90deg,var(--bg-soft) 25%,#EDF2F7 37%,var(--bg-soft) 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:var(--r-lg)}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}
.sk-row{height:56px;margin-bottom:8px}
.sk-card{height:220px;border-radius:var(--r-2xl)}

/* modal + toast */
.modal-back{position:fixed;inset:0;z-index:120;background:rgba(14,42,71,.55);display:grid;place-items:center;padding:24px;opacity:0;pointer-events:none;transition:opacity 240ms var(--ease)}
.modal-back.open{opacity:1;pointer-events:auto}
.modal{background:#fff;border-radius:var(--r-3xl);max-width:520px;width:100%;padding:32px;box-shadow:0 32px 80px rgba(14,42,71,.28);transform:translateY(12px) scale(.98);transition:transform 320ms var(--ease)}
.modal-back.open .modal{transform:none}
.modal h3{font-size:20px;line-height:28px;font-weight:600}
.modal dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:20px 0 0;font-size:14px;line-height:20px}
.modal dt{color:var(--muted)}
.modal dd{margin:0;font-weight:600;text-align:right}
.modal .btn-row{margin-top:24px}
.toast-wrap{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:130;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--navy);color:#fff;border-radius:999px;padding:10px 18px;font-size:14px;line-height:20px;font-weight:500;box-shadow:0 12px 32px rgba(14,42,71,.32);opacity:0;transform:translateY(8px);transition:opacity 240ms var(--ease),transform 240ms var(--ease)}
.toast.show{opacity:1;transform:none}

/* ---------- searchable combobox ---------- */
.combo{position:relative}
.combo input{width:100%}
.combo-native{display:none!important}
.combo-list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;max-height:288px;overflow:auto;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:0 16px 40px rgba(14,42,71,.16);padding:6px}
.combo-item{display:flex;align-items:baseline;justify-content:space-between;gap:12px;width:100%;text-align:left;
  padding:10px 12px;border-radius:var(--r-lg);font-size:14px;line-height:20px;color:var(--text)}
.combo-item:hover,.combo-item[aria-selected="true"]{background:var(--bg-soft)}
.combo-name b{color:var(--brand);font-weight:700}
.combo-sub{color:var(--muted);font-size:12px;line-height:16px;white-space:nowrap}
.combo-empty{padding:12px;font-size:13px;color:var(--muted)}
.combo-clear{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:24px;height:24px;border-radius:999px;
  display:grid;place-items:center;color:var(--muted);font-size:16px;line-height:1}
.combo-clear:hover{background:var(--bg-soft);color:var(--text)}
.combo-group{font-size:11px;line-height:16px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;padding:6px 12px 2px}

/* ---------- kill legacy hero glows (site.css radial gradients) ---------- */
.hero,.phero{background:var(--navy)!important;background-image:none!important}
.hero::before,.hero::after,.phero::before,.phero::after,.cta::before,.cta::after{
  content:none!important;display:none!important;background:none!important;background-image:none!important;
}
.hero-in,.phero{position:relative;z-index:1}
/* one calm accent line instead of glows */
.hero{border-bottom:1px solid var(--navy-line)}
/* ---------- nav: remove shadow/blur banding over the hero ---------- */
.hdr{background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
.hdr-in{box-shadow:none!important;backdrop-filter:none!important;background:rgba(18,49,79,.94)!important;
  border:1px solid rgba(255,255,255,.14)!important}
.hdr.scrolled .hdr-in{box-shadow:0 10px 28px rgba(0,0,0,.22)!important;background:rgba(18,49,79,.98)!important}