*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#faf8f3;
  --surface:#ffffff;
  --surface2:#f2ede1;
  --border:rgba(30,22,10,0.12);
  --text:#211c14;
  --muted:#6f6656;
  --accent:#9c6400;
  --accent2:#b8471a;
  --green:#1a7a43;
  --red:#c23d2c;
  --blue:#1f6e9c;

  /* Purpose tokens: what text color sits on a FILLED surface of each hue.
     Change these here, once, instead of grepping every button when a fill
     color's brightness changes — this is what broke across ~50 buttons on
     2026-07-17 when --accent was darkened for text-contrast reasons and every
     button hardcoded color:#000 on top of it stopped working all at once. */
  --on-accent:#fff;
  --on-danger:#fff;
  --on-success:#fff;
  --on-info:#fff;
}
body{background:var(--bg);color:var(--text);font-family:'IBM Plex Sans',sans-serif;min-height:100vh;overflow-x:hidden}

/* Grid background */
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background-image:linear-gradient(color-mix(in srgb, var(--accent) 4%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--accent) 4%, transparent) 1px,transparent 1px);background-size:48px 48px;pointer-events:none;z-index:0}

/* Nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:60px;background:rgba(255,255,255,0.85);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.logo{font-family:'Bebas Neue',sans-serif;font-size:26px;letter-spacing:3px;color:var(--accent)}
.logo span{color:var(--text)}
.nav-status{display:flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted)}
.status-dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}

/* Main layout */
.main{padding-top:60px;display:grid;grid-template-columns:340px 1fr;min-height:100vh}

/* Sidebar */
.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:32px 24px;display:flex;flex-direction:column;gap:24px}
.sidebar-title{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:8px}

/* Upload zone */
.upload-zone{border:1px dashed rgba(240,165,0,0.3);border-radius:12px;padding:32px 24px;text-align:center;cursor:pointer;transition:all 0.2s;background:rgba(240,165,0,0.02);position:relative}
.upload-zone:hover{border-color:var(--accent);background:rgba(240,165,0,0.05)}
.upload-zone.dragover{border-color:var(--accent);background:rgba(240,165,0,0.08);transform:scale(1.01)}
.upload-icon{font-size:32px;margin-bottom:12px}
.upload-title{font-size:14px;font-weight:600;margin-bottom:6px;color:var(--text)}
.upload-sub{font-size:12px;color:var(--muted);line-height:1.5}
.upload-input{position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-btn{background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:8px;padding:10px 20px;font-size:13px;font-family:'IBM Plex Sans',sans-serif;font-weight:600;color:var(--on-accent);cursor:pointer;margin-top:16px;width:100%;transition:opacity 0.2s}
.upload-btn:hover{opacity:0.9}
.upload-btn:disabled{opacity:0.4;cursor:not-allowed}

/* File list */
.file-list{display:flex;flex-direction:column;gap:8px}
.file-item{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;align-items:center;gap:10px;font-size:12px}
.file-icon{color:var(--accent);font-size:16px;flex-shrink:0}
.file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text)}
.file-size{color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:10px;flex-shrink:0}
.file-remove{color:var(--muted);cursor:pointer;flex-shrink:0;background:none;border:none;font-size:14px;line-height:1;padding:2px}
.file-remove:hover{color:var(--red)}

/* Stats bar */
.stats-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.stat-box{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px}
.stat-label{font-family:'IBM Plex Sans',sans-serif;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:4px}
.stat-value{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;color:var(--accent);line-height:1}
.stat-sub{font-size:10px;color:var(--muted);margin-top:2px}

/* Tab nav */
.tab-nav{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 32px;background:var(--surface)}
.tab-btn{font-family:'IBM Plex Sans',sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:0.5px;padding:14px 20px;border:none;background:none;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 0.15s,border-color 0.15s}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--accent);border-bottom-color:var(--accent)}

/* Content area */
.content{padding:32px;overflow-y:auto;max-height:calc(100vh - 104px)}

/* Invoice table */
.inv-table{width:100%;border-collapse:collapse;font-size:14px}
.inv-table th{font-family:'IBM Plex Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);white-space:nowrap}
.inv-table td{padding:16px 14px;border-bottom:1px solid var(--border);vertical-align:middle;color:var(--text)}
.inv-table tr:nth-child(even) td{background:rgba(30,22,10,0.02)}
.inv-table tr:hover td{background:rgba(30,22,10,0.045)}
.inv-badge{display:inline-block;padding:3px 8px;border-radius:4px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:1px}
.inv-badge.sent{background:var(--blue);color:var(--on-info)}
.inv-badge.paid{background:var(--green);color:var(--on-success)}
.inv-badge.overdue{background:color-mix(in srgb, var(--red) 15%, transparent);color:var(--red)}
.inv-badge.void{background:color-mix(in srgb, var(--muted) 15%, transparent);color:var(--muted)}
.inv-badge.written_off{background:var(--red);color:var(--on-danger)}
.inv-badge.disputed{background:color-mix(in srgb, var(--accent) 15%, transparent);color:var(--accent)}
.inv-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:8px;margin-bottom:28px}
input[type="date"]{color-scheme:light}

/* Loading state */
.loading-state{display:none;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px}
.loading-state.visible{display:flex}
.loading-ring{width:48px;height:48px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted)}
.loading-steps{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.loading-step{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.loading-step.active{color:var(--accent)}
.loading-step.done{color:var(--green)}
.step-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}

/* Empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px;text-align:center}
.empty-icon{font-size:48px;opacity:0.3}
.empty-title{font-family:'Bebas Neue',sans-serif;font-size:28px;letter-spacing:2px;color:var(--muted)}
.empty-sub{font-size:13px;color:var(--muted);max-width:320px;line-height:1.6}

/* Unmatched BOL panel */
.unmatched-panel{background:rgba(224,92,26,0.05);border:1px solid rgba(224,92,26,0.25);border-radius:12px;padding:16px;margin-bottom:20px}
.unmatched-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.unmatched-title{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--text);text-transform:uppercase;letter-spacing:2px}
.unmatched-hint{font-size:11px;color:var(--muted)}
.unmatched-bols{display:flex;flex-wrap:wrap;gap:8px}
.unmatched-bol-chip{background:var(--surface2);border:1px solid rgba(224,92,26,0.3);border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;gap:3px;min-width:160px}
.unmatched-bol-name{color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:11px}
.unmatched-bol-info{color:var(--muted);font-size:10px}
/* Assign button + dropdown */
.assign-wrap{position:relative;display:inline-block}
.assign-btn{background:rgba(240,165,0,0.08);border:1px dashed rgba(240,165,0,0.5);border-radius:6px;padding:5px 12px;font-size:11px;color:var(--accent);cursor:pointer;font-family:'IBM Plex Sans',sans-serif;transition:background 0.15s}
.assign-btn:hover{background:rgba(240,165,0,0.15)}
.assign-menu{position:absolute;bottom:calc(100% + 6px);left:0;background:var(--surface2);border:1px solid var(--border);border-radius:10px;overflow:hidden;min-width:240px;z-index:200;box-shadow:0 8px 32px rgba(0,0,0,0.5);display:none}
.assign-menu.open{display:block}
.assign-menu-title{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:2px;padding:10px 14px 6px}
.assign-option{padding:10px 14px;cursor:pointer;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--border)}
.assign-option:hover{background:rgba(240,165,0,0.07)}
.assign-option-name{color:var(--text);font-family:'IBM Plex Mono',monospace;font-size:11px}
.assign-option-info{color:var(--muted);font-size:10px}

/* Section header */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:2px;color:var(--text)}
.section-badge{font-family:'IBM Plex Mono',monospace;font-size:10px;background:rgba(240,165,0,0.15);color:var(--accent);border:1px solid rgba(240,165,0,0.3);padding:4px 10px;border-radius:100px}

/* Load cards */
.loads-grid{display:flex;flex-direction:column;gap:16px}
.load-card{background:var(--surface);border:1px solid rgba(30,22,10,0.18);border-radius:14px;overflow:hidden;transition:border-color 0.2s,background 0.2s}
.load-card-header{padding:16px 20px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--border);cursor:pointer}
.load-id{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;color:var(--accent)}
.load-broker{font-size:13px;font-weight:500;flex:1}
.load-rate{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:1px;color:var(--text)}
.load-status{font-family:'IBM Plex Mono',monospace;font-size:9px;padding:3px 8px;border-radius:4px;text-transform:uppercase;letter-spacing:1px}

.load-card-body{padding:20px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.load-field{display:flex;flex-direction:column;gap:4px}
.load-field-label{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:2px}
.load-field-value{font-size:13px;color:var(--text);line-height:1.4}

.load-route{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--surface2);border-radius:8px;font-size:13px}
.route-city{font-weight:500}
.route-state{color:var(--muted);font-size:11px}
.route-arrow{color:var(--accent);font-size:18px;flex-shrink:0}
.route-miles{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--muted);margin-left:auto}

.load-card-footer{padding:12px 20px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
.footer-info{font-size:11px;color:var(--muted);font-family:'IBM Plex Mono',monospace}
.footer-actions{display:flex;align-items:center;gap:8px}
.action-btn{padding:7px 14px;border-radius:6px;font-size:12px;font-family:'IBM Plex Sans',sans-serif;font-weight:500;cursor:pointer;transition:all 0.15s;border:1px solid var(--border);background:var(--surface2);color:var(--text)}
.action-btn:hover{border-color:var(--accent);color:var(--accent)}
.action-btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:var(--on-accent);font-weight:600}
.action-btn.primary:hover{opacity:0.9}

/* Quick pay badge */
.qp-badge{display:inline-flex;align-items:center;gap:4px;font-family:'IBM Plex Mono',monospace;font-size:10px;background:rgba(240,165,0,0.1);color:var(--accent);border:1px solid rgba(240,165,0,0.25);padding:2px 8px;border-radius:4px}

/* Alerts panel */
.alerts-panel{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;margin-top:0}
.alert{border-radius:8px;padding:12px 16px;display:flex;align-items:flex-start;gap:12px;font-size:13px;border:1px solid}
.alert-warn{background:rgba(240,165,0,0.08);border-color:rgba(240,165,0,0.25);color:var(--text)}
.alert-error{background:rgba(231,76,60,0.08);border-color:rgba(231,76,60,0.25);color:var(--text)}
.alert-success{background:rgba(46,204,113,0.08);border-color:rgba(46,204,113,0.25);color:var(--text)}
.alert-icon{flex-shrink:0;font-size:16px}
.alert-content{flex:1}
.alert-title{font-weight:600;margin-bottom:2px}
.alert-desc{font-size:12px;color:var(--muted)}

/* Broker MC confirmation cards */
.broker-mc-panel{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.broker-mc-input{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:8px 12px;font-size:13px;color:var(--text);font-family:'IBM Plex Mono',monospace;outline:none;min-width:0}
.broker-mc-input:focus{border-color:var(--accent)}
.broker-mc-confirm{background:var(--accent);border:none;border-radius:7px;padding:8px 16px;font-size:12px;font-weight:700;color:var(--on-accent);cursor:pointer;font-family:'IBM Plex Sans',sans-serif;white-space:nowrap;flex-shrink:0}
.broker-mc-confirm:disabled{opacity:0.5;cursor:not-allowed}
.broker-mc-dismiss{background:none;border:none;color:var(--muted);font-size:16px;cursor:pointer;padding:2px 6px;line-height:1;flex-shrink:0}
.broker-mc-dismiss:hover{color:var(--text)}

/* Possible Matches panel (needs_review BOLs) */
.possible-matches-panel{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.pm-card{background:var(--surface);border:1px solid color-mix(in srgb, var(--blue) 35%, transparent);border-radius:10px;padding:14px 16px}
.pm-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
.pm-card-label{font-size:11px;font-weight:700;color:var(--blue);letter-spacing:0.04em;text-transform:uppercase;margin-bottom:3px}
.pm-card-title{font-size:14px;font-weight:600;color:var(--text)}
.pm-card-meta{font-size:12px;color:var(--muted);margin-top:2px}
.pm-match-box{background:var(--surface2);border-radius:7px;padding:10px 12px;margin-bottom:10px}
.pm-match-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.pm-match-name{font-size:13px;font-weight:600;color:var(--text)}
.pm-match-detail{font-size:12px;color:var(--muted);margin-top:2px}
.pm-confidence{display:inline-block;background:color-mix(in srgb, var(--blue) 15%, transparent);color:var(--blue);border-radius:5px;padding:2px 7px;font-size:11px;font-weight:700;margin-left:6px}
.pm-actions{display:flex;gap:8px}
.pm-confirm-btn{flex:1;background:var(--blue);border:none;border-radius:7px;padding:9px 16px;font-size:12px;font-weight:700;color:var(--on-info);cursor:pointer;font-family:'IBM Plex Sans',sans-serif}
.pm-confirm-btn:hover{background:#17587d}
.pm-assign-btn{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:9px 16px;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;font-family:'IBM Plex Sans',sans-serif}
.pm-assign-btn:hover{border-color:var(--muted)}
.pm-assign-select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:7px;padding:8px 12px;font-size:13px;color:var(--text);font-family:'IBM Plex Sans',sans-serif;outline:none;margin-top:8px}
.pm-assign-select:focus{border-color:var(--blue)}

/* Detail panel */
.detail-panel{display:none;position:fixed;right:0;top:60px;bottom:0;width:480px;background:var(--surface);border-left:1px solid var(--border);z-index:50;overflow-y:auto;padding:24px;transform:translateX(100%);transition:transform 0.3s ease}
.detail-panel.open{display:block;transform:translateX(0)}
.detail-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;line-height:1}
.detail-close:hover{color:var(--text)}
.detail-section{margin-bottom:20px}
.detail-section-title{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:3px;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.detail-field{display:flex;flex-direction:column;gap:3px}
.detail-label{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.detail-value{font-size:13px;color:var(--text);word-break:break-all}
.detail-value.highlight{color:var(--accent);font-weight:600}
.detail-full{grid-column:1/-1}

/* Error box */
.error-box{display:none;background:var(--red);border-radius:8px;padding:14px 16px;font-size:13px;color:var(--on-danger);margin-bottom:16px}
.error-box.visible{display:block}

/* Carrier selector (factoring mode) */
.carrier-selector{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.ob-label{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:9px}
.ob-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:14px 16px;font-size:16px;color:var(--text);font-family:'IBM Plex Sans',sans-serif;outline:none;box-sizing:border-box}
.ob-input::placeholder{color:var(--muted)}
.ob-input:focus{border-color:var(--accent)}
.carrier-selector-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carrier-selector-hint{font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',monospace}

/* Carrier manager modal list */
.carrier-row{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:12px 14px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.carrier-row-code{font-family:'IBM Plex Mono',monospace;font-size:11px;background:rgba(240,165,0,0.12);color:var(--accent);border:1px solid rgba(240,165,0,0.25);padding:2px 7px;border-radius:4px;flex-shrink:0}
.carrier-row-info{flex:1;min-width:0}
.carrier-row-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.carrier-row-sub{font-size:11px;color:var(--muted);margin-top:2px}
.carrier-row-actions{display:flex;gap:6px;flex-shrink:0}

/* Scrollbar */
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}

@media(max-width:900px){
  .main{grid-template-columns:1fr}
  .sidebar{border-right:none;border-bottom:1px solid var(--border)}
  .load-card-body{grid-template-columns:1fr 1fr}
  .detail-panel{width:100%}
}

/* ── Mobile upload zone styles (shared) ── */
.mob-upload-section{display:none}
.mob-doc-block{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:12px}
.mob-doc-label{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
.mob-doc-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mob-btn{display:flex;flex-direction:column;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 10px;cursor:pointer;transition:border-color 0.15s,background 0.15s;font-family:'IBM Plex Sans',sans-serif}
.mob-btn:active{background:rgba(240,165,0,0.08);border-color:var(--accent)}
.mob-btn-icon{font-size:22px;line-height:1}
.mob-btn-label{font-size:11px;font-weight:600;color:var(--text)}
.mob-btn-sub{font-size:10px;color:var(--muted)}
.mob-btn.primary{border-color:rgba(240,165,0,0.4)}
.mob-file-list{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.mob-file-chip{display:flex;align-items:center;gap:8px;background:rgba(240,165,0,0.06);border:1px solid rgba(240,165,0,0.25);border-radius:7px;padding:7px 10px;font-size:11px;color:var(--text)}
.mob-file-chip span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mob-file-chip button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:13px;padding:0;line-height:1}

/* ── Driver screen ── */
#driverScreen{position:fixed;inset:0;background:var(--bg);z-index:600;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0;overflow-y:auto}
.drv-header{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border);background:rgba(13,14,15,0.97)}
.drv-logo{font-family:'Bebas Neue',sans-serif;font-size:22px;letter-spacing:3px;color:var(--accent)}
.drv-role-badge{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:3px 8px;text-transform:uppercase;letter-spacing:1px}
.drv-body{width:100%;max-width:480px;padding:24px 20px 48px;display:flex;flex-direction:column;gap:16px}
.drv-title{font-size:20px;font-weight:700;margin-bottom:4px}
.drv-sub{font-size:13px;color:var(--muted);margin-bottom:8px}
.drv-block{background:var(--surface2);border:1px solid var(--border);border-radius:12px;padding:16px}
.drv-block-label{font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px}
.drv-submit-btn{width:100%;padding:16px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:10px;font-size:16px;font-weight:700;color:var(--on-accent);cursor:pointer;font-family:'IBM Plex Sans',sans-serif;margin-top:4px}
.drv-submit-btn:disabled{opacity:0.4;cursor:not-allowed}
.drv-success{background:rgba(46,204,113,0.1);border:1px solid rgba(46,204,113,0.4);border-radius:10px;padding:20px;text-align:center;display:flex;flex-direction:column;gap:8px}
.drv-count{font-size:12px;color:var(--muted);text-align:center}
/* Driver account panel in profile modal */
#profDriverSection{border-top:1px solid var(--border);padding-top:16px;margin-top:4px}

/* ── Mobile (phones) ── */
@media(max-width:640px){
  /* Prevent iOS Safari auto-zoom on any input/select focus (triggers when font-size < 16px) */
  input,select,textarea{font-size:16px!important}

  /* Hide sidebar entirely — carrier upload moves to main content */
  .sidebar{display:none!important}
  .main{grid-template-columns:1fr;padding-top:60px}

  /* Show mobile upload zone */
  .mob-upload-section{display:block}

  /* emptyState is replaced by the mobile upload section — hide it */
  #emptyState{display:none!important}

  /* Let the page scroll naturally on mobile — the overflow:hidden wrapper
     was trapping the sticky tab-nav, causing it to overlap and hide the BOL label.
     With overflow:visible, position:sticky top:60px works correctly vs viewport. */
  #contentWrapper{overflow:visible!important;max-height:none!important}
  .content{overflow-y:visible!important;max-height:none!important;overflow-x:hidden}

  /* box-sizing for mobile upload buttons */
  .mob-doc-block,.mob-doc-btns,.mob-btn{box-sizing:border-box}

  /* Compact nav — hide desktop links, show mobile profile button */
  nav{padding:0 16px}
  #navCompanyName{display:none!important}
  #navTermsLinks{display:none!important}
  #navUserSection{display:none!important}
  #mobileProfileBtn{display:flex!important}

  /* Tabs */
  .tab-nav{padding:0 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:sticky;top:60px;z-index:50}
  .tab-nav::-webkit-scrollbar{display:none}
  .tab-btn{padding:12px 14px;font-size:12px;white-space:nowrap;flex-shrink:0}

  /* Content */
  .content{padding:16px 16px 32px;max-height:calc(100dvh - 104px);overflow-y:auto}

  /* Invoice table — horizontal scroll */
  #invTableWrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .inv-table{min-width:0;width:100%}
  /* Hide: Carrier(2), Load#(4), Generated(6), Actions(8) — keep Invoice#, Broker, Amount, Status */
  .inv-table th:nth-child(2),
  .inv-table td:nth-child(2),
  .inv-table th:nth-child(4),
  .inv-table td:nth-child(4),
  .inv-table th:nth-child(6),
  .inv-table td:nth-child(6),
  .inv-table th:nth-child(8),
  .inv-table td:nth-child(8){display:none}

  /* Invoice summary cards — 3 in one compact row */
  .inv-summary{grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px}
  .stat-value{font-size:18px}
  .stat-label{font-size:9px}
  .stat-box{padding:10px}

  /* Load cards */
  .load-card-body{grid-template-columns:1fr 1fr;gap:12px}
  .load-card-header{padding:12px 16px;gap:10px}
  .load-card-footer{padding:10px 16px;flex-wrap:wrap}
  .footer-actions{flex-wrap:wrap;gap:6px}
  .action-btn{padding:8px 12px;font-size:12px}

  /* Route bar */
  .load-route{flex-wrap:wrap;gap:6px}
  .route-miles{margin-left:0}

  /* Section header */
  .section-header{flex-wrap:wrap;gap:8px}

  /* Onboarding modal — full screen */
  #onboardingInner{padding:24px 20px!important;width:100vw!important;max-width:100vw!important;border-radius:0!important;height:100dvh;max-height:100dvh!important;box-sizing:border-box!important}
  #obStep1 [style*="grid-template-columns:1fr 1fr"],
  #obStep2 [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important}
  #obStep1 [style*="grid-template-columns:1fr 80px"],
  #obStep2 [style*="grid-template-columns:1fr 80px"]{grid-template-columns:1fr 60px 80px!important}

  /* Filter bar on invoices tab — hide month picker and carrier filter on mobile */
  #invFilterRow{flex-wrap:wrap;gap:8px}
  #invFilterRow select,#invFilterRow input{flex:1 1 140px;min-width:0}
  #invMonthFilter,#invCarrierFilter{display:none!important}

  /* Payables table scroll */
  #payablesContent{overflow-x:auto;-webkit-overflow-scrolling:touch}

  /* Invoice overlay — view-only on mobile: hide edit fields and download button */
  #invEditFields{display:none!important}
  #invoiceOverlay [onclick="downloadInvoicePDF()"]{display:none!important}
  #invoiceOverlay>div:first-child{padding:12px 16px}
  #invoiceOverlay>div:nth-child(2){padding:16px 16px 48px}

  /* Detail panel full screen */
  .detail-panel{width:100%;top:60px}
}

/* ── Visibility utility (CSS refactor) ────────────────────────── */
.hidden { display: none !important; }

/* Elements whose visible display type is not block */
#navUserSection,
#authModal,
#authTosCheck,
#carrierModal,
#carrierSetupModal,
#editInvoiceModal,
#emailInvoiceModal,
#emptyState,
#fcCarrierEditModal,
#loggedOutState,
#obStep2Factoring,
#onboardingModal,
#profileModal,
#rejectModal,
#upgradeModal,
#profileBanner,
#obFactoringCompanyName,
#obEmailInviteSection,
#carrierPickerModal,
#confirmModal
{ display: flex; }

#carrierStatsBar:not(.hidden) { display: grid; }
#profCarrierFields { display: grid; }
#obCarrierAutoFields { display: flex; }

#tab-generate,
#tab-invoices,
#tab-payables,
#tab-submissions
{ display: inline-block; }

/* ── Dispatch Assistant ────────────────────────────────────────────────────── */
#da-btn {
  position:fixed; bottom:24px; right:24px; z-index:9000;
  width:52px; height:52px; border-radius:50%;
  background:var(--accent); border:none; cursor:pointer;
  box-shadow:0 4px 16px rgba(0,0,0,0.4);
  display:none; align-items:center; justify-content:center;
  transition:transform .15s;
}
#da-btn:hover { transform:scale(1.08); }
#da-btn svg { width:24px; height:24px; fill:none; stroke:#fff; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
#da-panel {
  position:fixed; bottom:88px; right:24px; z-index:9000;
  width:360px; max-height:520px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:12px; display:none; flex-direction:column;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
  font-family:'IBM Plex Sans',sans-serif;
}
#da-header {
  padding:14px 16px; border-bottom:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
}
#da-header span { font-weight:600; font-size:14px; color:var(--text); }
#da-header small { color:var(--accent); font-size:11px; }
#da-close { background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; }
#da-messages {
  flex:1; overflow-y:auto; padding:12px 14px;
  display:flex; flex-direction:column; gap:10px;
  scroll-behavior:smooth;
}
.da-msg { max-width:88%; border-radius:8px; padding:9px 12px; font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.da-msg.user { align-self:flex-end; background:var(--accent); color:var(--on-accent); }
.da-msg.assistant { align-self:flex-start; background:var(--surface2); color:var(--text); }
.da-msg.thinking { color:var(--muted); font-style:italic; background:var(--surface2); align-self:flex-start; }
#da-footer { padding:10px 12px; border-top:1px solid var(--border); display:flex; gap:8px; }
#da-input {
  flex:1; background:var(--surface2); border:1px solid var(--border);
  border-radius:8px; padding:8px 11px; color:var(--text);
  font-size:13px; font-family:'IBM Plex Sans',sans-serif;
  resize:none; height:40px; max-height:120px; line-height:1.4;
  overflow-y:auto;
}
#da-input:focus { outline:none; border-color:var(--accent); }
#da-send {
  background:var(--accent); border:none; border-radius:8px;
  width:38px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
#da-send svg { width:16px; height:16px; fill:none; stroke:#fff; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }

/* Driver sign-in banner: show on mobile, hide on desktop */
@media(max-width:767px){
  #authDriverBanner{display:block!important}
  #authDriverLinkWrap{display:none!important}
}
@media(min-width:768px){
  #authDriverBanner{display:none!important}
  #authDriverLinkWrap{display:block}
}