:root{
  --bg:#070b12;
  --bg2:#0c1320;
  --text:#e6edf7;
  --muted:#a7b1c1;
  --line:#273244;
  --card:#0f1622;
  --soft:#0a121e;
  --orange:#f47a20;
  --orange-soft:rgba(244,122,32,.15);
  --radius:26px;
  --shadow:0 18px 40px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color:var(--text);
  background:
    radial-gradient(80% 45% at 90% 0%, rgba(244,122,32,.16) 0%, rgba(244,122,32,0) 62%),
    linear-gradient(180deg,#09111d 0%, #060b14 40%, #050a12 100%);
}
a{color:var(--text)}
img{max-width:100%;display:block}
.container{width:min(1200px, calc(100% - 32px)); margin:0 auto}
.container-wide{width:min(1880px, calc(100% - 24px));}
.site-header{
  background:linear-gradient(180deg,var(--bg) 0%, var(--bg2) 100%);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#fff;
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:18px 0;
}
.brand{display:flex; align-items:center; gap:14px}
.logo{width:208px; height:auto}
.brand-title{font-size:1rem; font-weight:700; color:#fff}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700;
  color:#f59e0b;
}
.header-note{
  color:#cbd5e1; font-size:.95rem; text-align:right;
}
.page{padding:34px 0 48px}
.hero{
  display:grid; grid-template-columns:1.1fr .9fr; gap:24px; align-items:start; margin-bottom:26px;
}
.hero-copy h1{
  font-size:clamp(2rem,4vw,3.35rem);
  line-height:1.02; letter-spacing:-.04em; margin:.5rem 0 .9rem;
}
.hero-copy p{font-size:1.06rem; line-height:1.8; color:var(--muted); max-width:780px}
.hero-card{
  background:#0f172a; color:#fff; border-radius:28px; padding:24px 24px 18px; box-shadow:var(--shadow)
}
.hero-card ul{padding-left:18px; line-height:1.85; color:#e2e8f0}
.mini-label{font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; color:#f59e0b; font-weight:700}
.app-grid{
  display:grid; grid-template-columns:1.16fr .84fr; gap:24px;
}
.app-panel,.panel-card{
  background:var(--card); border:1px solid var(--line); border-radius:28px; box-shadow:var(--shadow)
}
.app-panel{padding:22px}
.stepper{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:24px;
}
.step{
  border:1px solid var(--line); border-radius:16px; background:#172132; color:#9fb1c7;
  font-weight:700; padding:12px; cursor:pointer;
}
.step.active{background:linear-gradient(135deg,#f47a20,#dc6718);color:#fff}
.step.done{background:#223048;color:#e6edf7}
.step-screen{display:none}
.step-screen.active{display:block}
.section-head h2{margin:8px 0 8px; font-size:1.8rem; letter-spacing:-.03em}
.section-head p{margin:0 0 18px; color:var(--muted); line-height:1.75}
.mode-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px}
.mode-card{
  border:1.5px solid var(--line); border-radius:22px; background:#121b2b; padding:18px;
  cursor:pointer; transition:all .18s ease;
}
.mode-card:hover{transform:translateY(-2px); box-shadow:0 14px 28px rgba(2,6,23,.05)}
.mode-card.active{border-color:var(--orange); background:rgba(244,122,32,.12)}
.mode-label{font-size:1.05rem; font-weight:800; margin-top:6px}
.mode-desc{color:#9eb0c5; line-height:1.6; font-size:.92rem; margin-top:6px}
.hidden{display:none}
.not-sure-helper{margin-top:18px; border:1px solid #fed7aa; background:#fff7ed; border-radius:22px; padding:18px}
.not-sure-helper h3{margin:0 0 12px}
.grid{display:grid; gap:14px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
label span{display:block; font-weight:700; font-size:.93rem; margin-bottom:8px; color:#d2ddec}
input, select, textarea{
  width:100%; border:1px solid #34445c; border-radius:14px; background:#0d1726;
  padding:12px 14px; font:inherit; color:var(--text);
}
input:focus, select:focus, textarea:focus{outline:2px solid rgba(244,122,32,.2); border-color:#f59e0b}
.check-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.check-grid label{
  display:flex; align-items:flex-start; gap:10px; background:#101a2b; border:1px solid var(--line);
  padding:14px; border-radius:18px; font-weight:600; color:#cfd9e8;
}
.check-inline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  font-weight:600;
}
.check-grid input{width:18px; height:18px; margin-top:1px}
.warning-box,.suggestion-box,.summary-card,.info-box{
  border-radius:22px; padding:18px;
}
.warning-box{margin-top:16px; background:rgba(244,122,32,.12); border:1px solid rgba(244,122,32,.35); line-height:1.8; color:#ffcbab}
.suggestion-box{background:#111827; color:#fff; margin-top:16px}
.suggestion{font-size:1.35rem; font-weight:800; margin-top:6px}
.helper-text{color:#9eb0c5; font-size:.9rem; line-height:1.7; margin-top:6px}
.span-2{grid-column:span 2}
#modeSpecific{margin-top:18px}
.mode-subpanel{
  margin-top:18px; border:1px solid var(--line); border-radius:24px; padding:18px; background:#121b2b;
}
.mode-subpanel h3{margin:0 0 10px}
.nested-subpanel{
  margin-top:14px;
  background:#121b2b;
  border-color:#e2e8f0;
}
.compact-subpanel{
  margin-top:14px;
  background:#121b2b;
}
.accessorial-category{
  border:1px solid var(--line);
  border-radius:20px;
  padding:14px;
  background:#121b2b;
}
.accessorial-category + .accessorial-category{margin-top:12px}
.accessorial-head h3{
  margin:0 0 10px;
  font-size:1rem;
}
.accessorial-meta{
  display:block;
  color:#9eb0c5;
  font-size:.78rem;
  font-weight:600;
  margin-top:2px;
}
.pallet-list{display:grid; gap:12px}
.pallet-row{
  border:1px solid var(--line); border-radius:18px; background:#121b2b; padding:14px;
}
.pallet-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px}
.pallet-head strong{font-size:1rem}
.small-btn,.secondary-btn,.primary-btn{
  border:none; border-radius:14px; padding:12px 16px; font:inherit; font-weight:700; cursor:pointer;
}
.small-btn,.secondary-btn{background:#1a2537; color:#d2ddec}
.primary-btn{background:linear-gradient(135deg,#f47a20,#dc6718);color:#fff}
.primary-btn:hover{background:linear-gradient(135deg,#ff8c3a,#e76f1d)}
.secondary-btn:hover,.small-btn:hover{background:#24344c}
.small-btn[disabled], .secondary-btn[disabled], .primary-btn[disabled]{opacity:.55; cursor:not-allowed}
.nav-row{
  margin-top:22px; display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-top:1px solid var(--line); padding-top:18px;
}
.summary-card{
  background:rgba(244,122,32,.12); border:1px solid rgba(244,122,32,.35); color:#ffcbab;
}
.route-target{font-size:1.35rem; font-weight:800; margin:.35rem 0 .65rem}
.summary-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:16px}
.summary-col{
  border:1px solid var(--line); border-radius:22px; background:#121b2b; padding:16px;
}
.summary-col h3{margin:0 0 12px}
.stack-list{display:grid; gap:10px}
.stack-item{
  background:#101a2b; border:1px solid var(--line); border-radius:16px; padding:12px;
  line-height:1.7; color:#d2ddec;
}
.submit-band{margin-top:16px}
.summary-panel{display:grid; gap:16px}
.panel-card{padding:20px}
.panel-card h3{margin:0 0 14px}
.metric-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}
.metric{
  border:1px solid var(--line); border-radius:18px; padding:14px; background:#121b2b;
}
.metric-label{font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:#9eb0c5; font-weight:700}
.metric-value{font-size:1.2rem; font-weight:800; margin-top:6px}
.progress-card{
  margin-top:12px; border:1px solid var(--line); border-radius:18px; background:#121b2b; padding:14px;
}
.progress-bar{
  height:12px; background:#223048; border-radius:999px; overflow:hidden; margin:10px 0 8px;
}
.progress-bar div{height:100%; width:0; background:linear-gradient(135deg,#f47a20,#dc6718)}
.progress-label{font-size:.9rem; color:#9eb0c5}
.info-box{
  margin-top:12px; background:rgba(244,122,32,.12); border:1px solid rgba(244,122,32,.35); line-height:1.7; color:#ffcbab
}
.priority-list{margin:0; padding-left:18px; line-height:1.9; color:#d2ddec}
.success-box{
  margin-top:12px; background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46;
  border-radius:18px; padding:14px; line-height:1.7;
}
.success-link-btn{
  border:none;
  background:none;
  color:#065f46;
  font-weight:700;
  font:inherit;
  cursor:pointer;
  padding:0;
  text-decoration:underline;
}
.success-link-btn:hover{
  color:#047857;
}
@media (max-width: 980px){
  .hero,.app-grid{grid-template-columns:1fr}
}
@media (max-width: 720px){
  .container{width:min(100% - 20px, 1200px)}
  .container-wide{width:min(100% - 20px, 1880px)}
  .header-inner{flex-direction:column; align-items:flex-start}
  .stepper{grid-template-columns:repeat(2,1fr)}
  .mode-grid,.grid.two,.grid.three,.grid.four,.summary-grid,.check-grid,.metric-grid{grid-template-columns:1fr}
  .span-2{grid-column:span 1}
  .logo{width:170px}
  .hero-copy p{font-size:1rem}
  input, select, textarea{font-size:16px}
}

/* ── Dashboard extras (v6.1) ───────────────────────────────────── */
.status-badge{
  display:inline-block; padding:4px 10px; border-radius:10px;
  font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
}
.status-badge.new{background:#dbeafe; color:#1e40af}
.status-badge.reviewing{background:#fef3c7; color:#92400e}
.status-badge.waiting_customer{background:#fed7aa; color:#9a3412}
.status-badge.quoted{background:#d1fae5; color:#065f46}
.status-badge.closed{background:#e5e7eb; color:#374151}
.dashboard-nav{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.dashboard-nav a{
  color:#f59e0b; text-decoration:none; font-weight:700;
}
.quote-detail-link{
  color:var(--orange); text-decoration:none; font-weight:600; font-size:.88rem;
}
.quote-detail-link:hover{text-decoration:underline}
.success-box a{color:#065f46; font-weight:700}



.ops-toolbar{
  display:grid;
  grid-template-columns:180px 180px 1fr auto;
  gap:12px;
  align-items:end;
}
.ops-search{
  min-width:0;
}
.queue-card{
  background:#121b2b;
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
}
.queue-card-top{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
}
.queue-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.queue-mode{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  background:#101a2b;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.8rem;
  color:#9eb0c5;
  font-weight:700;
}
.status-badge{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  text-transform:capitalize;
}
.status-badge.new{background:#fff7ed;color:#9a3412;border:1px solid #fdba74}
.status-badge.new_request{background:#fff7ed;color:#9a3412;border:1px solid #fdba74}
.status-badge.reviewing{background:#eff6ff;color:#1d4ed8;border:1px solid #93c5fd}
.status-badge.waiting_customer{background:#fefce8;color:#a16207;border:1px solid #fde68a}
.status-badge.quoted{background:#ecfdf5;color:#047857;border:1px solid #86efac}
.status-badge.live{background:#eef2ff;color:#4338ca;border:1px solid #a5b4fc}
.status-badge.booked{background:#eff6ff;color:#1d4ed8;border:1px solid #93c5fd}
.status-badge.dispatched{background:#ede9fe;color:#6d28d9;border:1px solid #c4b5fd}
.status-badge.in_transit{background:#dcfce7;color:#166534;border:1px solid #86efac}
.status-badge.delivered{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}
.status-badge.invoiced{background:#fce7f3;color:#be185d;border:1px solid #f9a8d4}
.status-badge.closed{background:#f1f5f9;color:#475569;border:1px solid #cbd5e1}
.status-badge.canceled{background:#fee2e2;color:#b91c1c;border:1px solid #fca5a5}
.status-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.raw-box{
  margin:0;
  white-space:pre-wrap;
  word-break:break-word;
  background:#0f172a;
  color:#e2e8f0;
  border-radius:18px;
  padding:16px;
  overflow:auto;
  line-height:1.6;
  font-size:.88rem;
}
.ops-board-scroll{
  width:100%;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:18px;
  background:#0f172a;
}
.ops-board-table{
  width:max(2200px,100%);
  border-collapse:collapse;
  font-size:.84rem;
}
.ops-board-table th{
  text-align:left;
  white-space:nowrap;
  padding:10px 12px;
  background:#111b2d;
  color:#94a3b8;
  border-bottom:1px solid var(--line);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.ops-board-table td{
  padding:10px 12px;
  border-bottom:1px solid rgba(148,163,184,.18);
  white-space:nowrap;
  vertical-align:top;
}
.ops-board-table tbody tr:hover{
  background:#172132;
}
.ops-row-due{
  background:rgba(245,158,11,.06);
}
@media (max-width: 900px){
  .ops-toolbar{
    grid-template-columns:1fr;
  }
  .queue-card-top{
    flex-direction:column;
  }
}


.ops-toolbar-wide{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.ops-toolbar-wide .ops-search{
  grid-column:span 2;
}
.ops-toolbar-detail{
  grid-template-columns:180px 180px 180px auto auto auto;
}
.check-inline{
  display:flex;
  align-items:center;
  gap:8px;
  padding-bottom:12px;
}
.check-inline input{
  width:18px;
  height:18px;
}
.owner-chip,
.due-chip{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:800;
  border:1px solid var(--line);
  background:#101a2b;
  color:#9eb0c5;
}
.due-chip-alert{
  border-color:#fdba74;
  background:#fff7ed;
  color:#9a3412;
}
.queue-card-due{
  border-color:#fdba74;
  box-shadow:0 0 0 1px rgba(251,146,60,.15) inset;
}
.queue-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:18px 0 16px;
  padding:6px;
  border-radius:999px;
  background:#121b2b;
  border:1px solid var(--line);
}
.queue-toggle-btn{
  border:none;
  border-radius:999px;
  padding:10px 16px;
  font:inherit;
  font-weight:800;
  cursor:pointer;
  background:transparent;
  color:#9eb0c5;
}
.queue-toggle-btn.active{
  background:linear-gradient(135deg,#f47a20,#dc6718);
  color:#fff;
  box-shadow:0 10px 25px rgba(15,23,42,.16);
}
.load-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}
.detail-actions-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.load-stops-list{
  display:grid;
  gap:12px;
}
.stop-card{
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  background:#121b2b;
}
.stop-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.stop-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.stop-inline-meta{
  color:#9eb0c5;
  font-size:.86rem;
  line-height:1.6;
}
.stop-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.stop-form-grid .span-2{
  grid-column:span 2;
}
.detail-section-divider{
  margin-top:22px;
}
@media (max-width: 1100px){
  .ops-toolbar-wide,
  .ops-toolbar-detail{
    grid-template-columns:1fr;
  }
  .ops-toolbar-wide .ops-search{
    grid-column:span 1;
  }
  .summary-strip{
    grid-template-columns:1fr;
  }
  .load-meta-grid,
  .stop-grid,
  .stop-form-grid{
    grid-template-columns:1fr;
  }
  .stop-form-grid .span-2{
    grid-column:span 1;
  }
}


.ops-next-action{
  min-width:260px;
}

.summary-strip{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.operational-grid-panel{
  width:100%;
}

.board-open-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.latest-activity-card{
  background:#0f2a1f;
  border:1px solid #166534;
  border-radius:8px;
  padding:12px 16px;
  font-size:.92rem;
  color:#86efac;
  line-height:1.6;
}

.timeline-list{
  display:flex;
  flex-direction:column;
  gap:0;
}
.timeline-row{
  display:flex;
  gap:12px;
  align-items:baseline;
  padding:8px 0;
  border-bottom:1px solid var(--line);
  font-size:.88rem;
  line-height:1.5;
}
.timeline-time{
  flex:0 0 110px;
  color:#94a3b8;
  font-size:.82rem;
}
.timeline-summary{
  flex:1;
  color:#d2ddec;
}
.timeline-actor{
  flex:0 0 auto;
  color:#94a3b8;
  font-size:.82rem;
}

.internal-notes-form{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin-bottom:12px;
}
.internal-notes-form textarea{
  flex:1;
  min-height:60px;
}

.internal-note-card{
  background:#121b2b;
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 14px;
  margin-bottom:8px;
}
.note-meta{
  font-size:.82rem;
  color:#9eb0c5;
  margin-bottom:4px;
}
.note-body{
  color:#d2ddec;
  font-size:.9rem;
  line-height:1.6;
  white-space:pre-wrap;
}

.customer-comment-card{
  background:#101a2b;
  border:1px solid var(--line);
  border-radius:6px;
  padding:10px 14px;
  margin-bottom:8px;
}
.comment-meta{
  font-size:.82rem;
  color:#9eb0c5;
  margin-bottom:4px;
}
.comment-body{
  color:#d2ddec;
  font-size:.9rem;
  line-height:1.6;
  white-space:pre-wrap;
}


/* Fuel surcharge intelligence */
.fuel-context{
  margin-top:10px;
  padding:12px 16px;
  background:#0f2a1f;
  border:1px solid #166534;
  border-radius:14px;
  color:#86efac;
  font-size:.9rem;
  font-weight:600;
  line-height:1.7;
}

.accessorial-category{
  margin-top:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#121b2b;
  padding:14px;
}
.accessorial-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.accessorial-head h3{
  margin:0;
  font-size:1rem;
}
.accessorial-meta{
  display:block;
  color:#9eb0c5;
  font-weight:500;
  margin-top:4px;
  text-transform:capitalize;
}