:root {
    --bg:#0c1220;--surface:#0f1829;--surface2:#111d2e;--border:#1e2d42;--border2:#243448;
    --text:#e8edf5;--text2:#a7b6c9;--text3:#71849c;
    --blue:#60a5fa;--blue-dark:#3b82f6;--blue-light:rgba(96,165,250,.08);--blue-mid:rgba(96,165,250,.15);
    --sidebar-bg:#080d18;--sidebar-border:#131f2e;--sidebar-text:rgba(255,255,255,.9);--sidebar-text2:rgba(255,255,255,.68);--sidebar-text3:rgba(255,255,255,.46);
    --green:#34d399;--green-light:rgba(52,211,153,.08);--green-mid:rgba(52,211,153,.15);
    --amber:#f59e0b;--amber-light:rgba(245,158,11,.08);--amber-mid:rgba(245,158,11,.15);
    --red:#f87171;--red-light:rgba(248,113,113,.08);--red-mid:rgba(248,113,113,.15);
    --slate:#4a637d;--slate-light:#111d2e;
    --font:'Inter',sans-serif;--mono:'DM Mono',monospace;
    --shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2);
    --shadow-md:0 4px 6px rgba(0,0,0,.4),0 2px 4px rgba(0,0,0,.3);
  }
  body.theme-light {
    --bg:#cdd5e0;--surface:#dce4ee;--surface2:#d3dce8;--border:#b0bccf;--border2:#96a6bc;
    --text:#07111f;--text2:#1a2a3d;--text3:#3d5269;
    --blue:#1a3fa8;--blue-dark:#1636a0;--blue-light:rgba(26,63,168,.1);--blue-mid:rgba(26,63,168,.2);
    --sidebar-bg:#e8eef6;--sidebar-border:#b8c5d6;--sidebar-text:#07111f;--sidebar-text2:#1a2a3d;--sidebar-text3:#3d5269;
    --green:#035f47;--green-light:rgba(3,95,71,.1);--green-mid:rgba(3,95,71,.18);
    --amber:#7c4a00;--amber-light:rgba(124,74,0,.1);--amber-mid:rgba(124,74,0,.18);
    --red:#991b1b;--red-light:rgba(153,27,27,.1);--red-mid:rgba(153,27,27,.18);
    --slate:#3d5269;--slate-light:#d8e2ef;
    --shadow:0 1px 4px rgba(15,23,42,.18),0 1px 2px rgba(15,23,42,.12);
    --shadow-md:0 8px 22px rgba(15,23,42,.18),0 2px 5px rgba(15,23,42,.12);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body{font-family:var(--font);background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden;}

  /* TOPBAR */
  .topbar{height:56px;background:#070b14;display:flex;align-items:center;padding:0 20px;gap:16px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.15);}
  .topbar-div{width:1px;height:24px;background:rgba(255,255,255,.2);}
  .topbar-label{font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.04em;}
  .topbar-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
  .live-badge{display:flex;align-items:center;gap:6px;min-width:74px;justify-content:center;height:28px;padding:0 9px;border-radius:999px;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.22);font-size:10px;font-weight:800;color:#86efac;font-family:var(--mono);letter-spacing:.04em;white-space:nowrap;}
  .live-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 3px rgba(74,222,128,.12);animation:blink 2s infinite;}
  .live-badge.saving{background:rgba(96,165,250,.12);border-color:rgba(96,165,250,.28);color:#bfdbfe;}
  .live-badge.saving .live-dot{background:#60a5fa;box-shadow:0 0 0 3px rgba(96,165,250,.14);animation:blink 1s infinite;}
  .live-badge.offline{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.3);color:#fecaca;}
  .live-badge.offline .live-dot{background:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.14);animation:none;}
  .live-badge.warning{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.3);color:#fde68a;}
  .live-badge.warning .live-dot{background:#f59e0b;box-shadow:0 0 0 3px rgba(245,158,11,.14);animation:blink 1.2s infinite;}
  @keyframes blink{0%,100%{opacity:1;}50%{opacity:.3;}}
  @keyframes bellShake{
    0%,100%{transform:rotate(0);}
    10%,30%,50%,70%{transform:rotate(-12deg);}
    20%,40%,60%,80%{transform:rotate(12deg);}
    90%{transform:rotate(-4deg);}
  }
  .bell-shaking{animation:bellShake .6s ease both;}
  .clock{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.5);}
  .fsc-pill{display:flex;align-items:center;gap:6px;height:34px;padding:0 9px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.72);font-size:10px;font-weight:800;letter-spacing:.08em;}
  .fsc-pill input{width:50px;height:24px;border:0;border-radius:6px;background:rgba(255,255,255,.12);color:#fff;font-family:var(--mono);font-size:12px;font-weight:700;text-align:center;outline:none;}
  .fsc-pill input:focus{background:rgba(59,130,246,.22);box-shadow:0 0 0 1px rgba(96,165,250,.55);}
  .fsc-pill input::-webkit-outer-spin-button,
  .fsc-pill input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
  .theme-toggle{display:flex;align-items:center;gap:2px;padding:3px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:8px;}
  .theme-option{border:0;border-radius:6px;background:transparent;color:rgba(255,255,255,.62);font-size:11px;font-weight:800;font-family:var(--font);padding:6px 8px;cursor:pointer;line-height:1;}
  .theme-option.active{background:#3b82f6;color:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18);}

  /* LAYOUT */
  .layout{display:flex;flex:1;overflow:hidden;height:100%;min-width:0;}
  body.board-mode .layout{background:var(--sidebar-bg);}
  body.board-mode .sidebar{flex:1 1 100% !important;max-width:none !important;width:100% !important;border-right:0;}
  body.board-mode .sidebar-top{padding:16px 18px 12px;}
  body.board-mode .map-area,
  body.board-mode .workspace-area,
  body.board-mode .detail{display:none !important;}
  body.board-mode .load-list{display:flex;align-items:stretch;gap:14px;padding:14px 18px 18px;background:linear-gradient(180deg,#0a101b,#0d1523);overflow-x:auto;overflow-y:hidden;min-height:0;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.45) transparent;}
  body.board-mode .load-list::-webkit-scrollbar{height:8px;}
  body.board-mode .load-list::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:999px;}
  body.board-mode .board-lane{flex:1 0 430px;max-width:620px;min-width:min(100%,430px);min-height:0;max-height:100%;display:flex;flex-direction:column;border:1px solid rgba(148,163,184,.16);border-radius:12px;background:rgba(15,23,42,.58);box-shadow:0 14px 34px rgba(0,0,0,.18);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.45) transparent;}
  body.board-mode .board-lane::-webkit-scrollbar{width:7px;}
  body.board-mode .board-lane::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:999px;}
  body.board-mode .section-divider{position:sticky;top:0;z-index:2;padding:12px 14px;background:rgba(17,28,45,.96);border-bottom:1px solid rgba(148,163,184,.18);font-size:12px;color:rgba(226,232,240,.82);}
  body.board-mode .load-item{margin:10px 12px 0;padding:14px 16px;border:1px solid rgba(148,163,184,.18);border-left:4px solid transparent;border-radius:10px;background:rgba(255,255,255,.045);box-shadow:0 8px 24px rgba(0,0,0,.12);}
  body.board-mode .load-item:last-child{margin-bottom:12px;}
  body.board-mode .load-route{font-size:15px;font-weight:800;margin-top:2px;margin-bottom:6px;}
  body.board-mode .load-pro{font-size:12px;}
  body.board-mode .badge{font-size:10px;padding:3px 9px;}
  body.board-mode .load-item:hover{background:rgba(96,165,250,.11);box-shadow:0 10px 28px rgba(0,0,0,.18);}
  body.focus-mode .sidebar{display:none !important;}
  body.focus-mode .layout{position:relative;}
  body.focus-mode .detail{flex:0 0 24%;max-width:440px;}
  body.focus-mode .board-back-btn{display:inline-flex;}
  body.board-mode .board-back-btn{display:none;}
  .board-back-btn{display:none;align-items:center;justify-content:center;margin-left:18px;padding:8px 12px;border-radius:8px;border:1px solid rgba(148,163,184,.24);background:rgba(255,255,255,.09);color:#dbeafe;font-size:12px;font-weight:800;font-family:var(--font);cursor:pointer;white-space:nowrap;}
  .board-back-btn:hover{background:rgba(96,165,250,.18);border-color:rgba(96,165,250,.38);color:#fff;}
  body.focus-mode .open-map-load-btn{margin-left:8px;}
  body.board-mode .open-map-load-btn{display:none;}

  /* SIDEBAR */
  .sidebar{flex:0 0 34%;min-width:280px;max-width:460px;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;overflow:hidden;height:100%;transition:flex-basis .25s ease,max-width .25s ease;}
  .sidebar-top{padding:14px;border-bottom:1px solid var(--sidebar-border);}
  .stats-row{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-bottom:14px;}
  .stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:11px 8px;text-align:center;box-shadow:0 2px 8px rgba(0,0,0,.18);}
  .stat-filter{transition:transform .1s, box-shadow .1s;}
  .stat-filter:hover{transform:scale(1.04);}
  .stat-filter.stat-active{box-shadow:0 0 0 2px #93c5fd inset,0 4px 12px rgba(0,0,0,.22);transform:scale(1.06);}
  .stat-filter.stat-active-delayed{box-shadow:0 0 0 2px #fca5a5 inset,0 4px 12px rgba(0,0,0,.22);transform:scale(1.06);}
  .stat-filter.stat-active-gps{box-shadow:0 0 0 2px #6ee7b7 inset,0 4px 12px rgba(0,0,0,.22);transform:scale(1.06);}
  .stat-filter.stat-active-email{box-shadow:0 0 0 2px #fcd34d inset,0 4px 12px rgba(0,0,0,.22);transform:scale(1.06);}
  .stat-val{font-size:22px;font-weight:800;line-height:1;color:#fff !important;}
  .stat-lbl{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:4px;font-weight:700;}
  .search-wrap{position:relative;}
  .search-wrap input{width:100%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:8px;padding:8px 10px 8px 30px;font-size:13px;color:#fff;font-family:var(--font);outline:none;transition:border .15s;}
  .search-wrap input:focus{border-color:rgba(255,255,255,.4);}
  .search-wrap input::placeholder{color:rgba(255,255,255,.35);}
  .search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:rgba(255,255,255,.4);font-size:13px;pointer-events:none;}

  /* CUSTOMER FILTER */
  .filter-row{display:flex;gap:6px;margin-top:10px;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.45) transparent;}
  .filter-row::-webkit-scrollbar{height:6px;}
  .filter-row::-webkit-scrollbar-thumb{background:rgba(148,163,184,.45);border-radius:999px;}
  .filter-chip{padding:3px 10px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1.5px solid rgba(255,255,255,.24);background:rgba(255,255,255,.08);color:rgba(255,255,255,.78);white-space:nowrap;transition:all .15s;flex:0 0 auto;}
  .filter-chip.active{border-color:#3b82f6;background:rgba(59,130,246,.2);color:#93c5fd;font-weight:600;}

  /* LOAD LIST */
  .load-list{flex:1;overflow-y:auto;background:var(--sidebar-bg);}
  .load-list::-webkit-scrollbar{width:4px;}
  .load-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}

  /* CUSTOMER SECTION HEADER */

  .load-item{padding:11px 14px;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer;transition:background .1s, box-shadow .1s, border-color .1s;position:relative;border-left:3px solid transparent;}
  .load-item:hover{background:rgba(255,255,255,.07);}
  .load-item.active{background:rgba(59,130,246,.18);border-left-color:#60a5fa;box-shadow:inset 0 0 0 1px rgba(96,165,250,.28);}
  .load-item-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:3px;}
  .load-pro{font-family:var(--mono);font-size:11px;color:rgba(255,255,255,.72);font-weight:500;}
  .load-item.active .load-pro{color:#93c5fd;}
  .badge{font-size:10px;padding:2px 8px;border-radius:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;}
  .b-dispatched,.b-pickedup,.b-transit{background:rgba(52,211,153,.13);color:#86efac;}
  .b-arrived,.b-arrived-del{background:rgba(96,165,250,.14);color:#93c5fd;}
  .b-doc-review,.b-email,.b-pending{background:rgba(245,158,11,.14);color:#fcd34d;}
  .b-delayed{background:rgba(248,113,113,.16);color:#fca5a5;}
  .b-delivered{background:rgba(148,163,184,.16);color:#cbd5e1;}
  .load-route{font-size:13px;color:#fff;margin-bottom:3px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .doc-pending-badge{font-size:9px;font-weight:800;color:#fcd34d;background:rgba(245,158,11,.14);border:1px solid rgba(245,158,11,.28);border-radius:999px;padding:2px 7px;white-space:nowrap;}

  /* SIDEBAR BOTTOM */
  .sidebar-btns{padding:12px 14px;border-top:1px solid rgba(255,255,255,.1);display:flex;gap:8px;background:var(--sidebar-bg);}
  .btn-add{flex:1;padding:9px;background:#3b82f6;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;transition:background .15s;}
  .btn-add:hover{background:#2563eb;}

  body.theme-light .topbar{background:#070b14;border-bottom:1px solid #131f2e;box-shadow:0 1px 8px rgba(15,23,42,.18);}
  body.theme-light .topbar-div{background:rgba(255,255,255,.2);}
  body.theme-light .topbar-label{color:rgba(255,255,255,.72);}
  body.theme-light .clock{color:rgba(255,255,255,.62);}
  body.theme-light .fsc-pill{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.72);}
  body.theme-light .fsc-pill input{background:rgba(255,255,255,.14);color:#fff;}
  body.theme-light .theme-toggle{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);}
  body.theme-light .theme-option{color:rgba(255,255,255,.68);}
  body.theme-light .theme-option.active{background:#2563eb;color:#fff;}
  body.theme-light #bell-btn{background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.18) !important;color:#e8edf5 !important;}
  body.theme-light #notif-panel{background:#ffffff !important;border-color:#dbe4ef !important;box-shadow:0 16px 44px rgba(15,23,42,.18) !important;}
  body.theme-light #notif-panel [style*="color:#fff"]{color:#0f172a !important;}
  body.theme-light #topbar-user{background:rgba(255,255,255,.1) !important;border-color:rgba(255,255,255,.18) !important;}
  body.theme-light #topbar-user span{color:#e8edf5 !important;}
  body.theme-light .sidebar{background:#d8e2ee;}
  body.theme-light .sidebar-top{background:#d8e2ee;}
  body.theme-light .stat{box-shadow:0 2px 8px rgba(0,0,0,.15);}
  body.theme-light .stat-val{font-size:22px;font-weight:900;}
  body.theme-light .stat-lbl{font-weight:800;}
  body.theme-light #sf-active{background:#1d4ed8 !important;border-color:#1e40af !important;}
  body.theme-light #sf-active .stat-val{color:#fff !important;}
  body.theme-light #sf-active .stat-lbl{color:rgba(255,255,255,.8) !important;}
  body.theme-light #sf-delayed{background:#dc2626 !important;border-color:#b91c1c !important;}
  body.theme-light #sf-delayed .stat-val{color:#fff !important;}
  body.theme-light #sf-delayed .stat-lbl{color:rgba(255,255,255,.8) !important;}
  body.theme-light #sf-gps{background:#059669 !important;border-color:#047857 !important;}
  body.theme-light #sf-gps .stat-val{color:#fff !important;}
  body.theme-light #sf-gps .stat-lbl{color:rgba(255,255,255,.8) !important;}
  body.theme-light #sf-email{background:#d97706 !important;border-color:#b45309 !important;}
  body.theme-light #sf-email .stat-val{color:#fff !important;}
  body.theme-light #sf-email .stat-lbl{color:rgba(255,255,255,.8) !important;}
  body.theme-light .search-wrap input{background:#c8d5e5;border-color:#96a6bc;color:#07111f;}
  body.theme-light .search-wrap input::placeholder{color:#3d5269;}
  body.theme-light .search-icon{color:#3d5269;}
  body.theme-light .filter-chip{background:#c8d5e5;border-color:#96a6bc;color:#1a2a3d;}
  body.theme-light .filter-chip.active{background:#a8c0e0;border-color:#1a3fa8;color:#1a3fa8;}
  body.theme-light .load-list{background:#cdd8e5;}
  body.theme-light .load-item{background:#d8e4f0;border-bottom-color:#a8b8cc;border-left-color:#b89820;}
  body.theme-light .load-item:hover{background:#ccd8ec;}
  body.theme-light .load-item.active{background:#b8ccec;border-left-color:#1a3fa8;box-shadow:inset 0 0 0 1px rgba(26,63,168,.3);}
  body.theme-light .load-pro{color:#334155;}
  body.theme-light .load-item.active .load-pro{color:#1d4ed8;}
  body.theme-light .load-route{color:#07111f;font-weight:650;}
  body.theme-light .load-item [style*="color:#fff"],
  body.theme-light .load-item [style*="color:#ffffff"],
  body.theme-light .load-item [style*="color: #fff"],
  body.theme-light .load-item [style*="color: #ffffff"]{color:#07111f !important;}
  body.theme-light .load-item [style*="color:rgba(255,255,255"],
  body.theme-light .load-item [style*="color: rgba(255,255,255"]{color:#526173 !important;}
  body.theme-light .load-item [style*="background:rgba(255,255,255"],
  body.theme-light .load-item [style*="background: rgba(255,255,255"]{background:#eef3f8 !important;}
  body.theme-light .load-item [style*="color:#fbbf24"],
  body.theme-light .load-item [style*="color:#f59e0b"]{color:#a16207 !important;}
  body.theme-light .load-item [style*="color:#fca5a5"],
  body.theme-light .load-item [style*="color:#f87171"]{color:#b91c1c !important;}
  body.theme-light .load-item [style*="color:#86efac"],
  body.theme-light .load-item [style*="color:#34d399"]{color:#047857 !important;}
  body.theme-light .sidebar-btns{background:#c8d4e0;border-top-color:#a4b4c4;}
  body.theme-light .detail{background:#cdd8e5;border-left-color:#a4b4c4;}
  body.theme-light .detail [style*="color:#fff"],
  body.theme-light .detail [style*="color:#ffffff"],
  body.theme-light .detail [style*="color: #fff"],
  body.theme-light .detail [style*="color: #ffffff"],
  body.theme-light .detail [style*="color:#e8edf5"]{color:#07111f !important;}
  body.theme-light .detail [style*="color:#cbd5e1"],
  body.theme-light .detail [style*="color:#94a3b8"],
  body.theme-light .detail [style*="color:#71849c"]{color:#526173 !important;}
  body.theme-light .detail [style*="color:rgba(255,255,255"],
  body.theme-light .detail [style*="color: rgba(255,255,255"]{color:#526173 !important;}
  body.theme-light .detail [style*="background:rgba(255,255,255"],
  body.theme-light .detail [style*="background: rgba(255,255,255"]{background:#f3f6fa !important;}
  body.theme-light .detail [style*="color:#fbbf24"],
  body.theme-light .detail [style*="color:#f59e0b"],
  body.theme-light .detail [style*="color:#fcd34d"]{color:#a16207 !important;}
  body.theme-light .detail [style*="color:#fca5a5"],
  body.theme-light .detail [style*="color:#f87171"]{color:#b91c1c !important;}
  body.theme-light .detail [style*="color:#86efac"],
  body.theme-light .detail [style*="color:#34d399"],
  body.theme-light .detail [style*="color:#16a34a"]{color:#047857 !important;}
  body.theme-light .detail button[onclick^="openSMS"]{background:#e9f8f1 !important;border-color:#8fd8b6 !important;color:#075f46 !important;}
  body.theme-light .b-dispatched,
  body.theme-light .b-pickedup,
  body.theme-light .b-transit{background:#e5f7ef;color:#047857;border:1px solid #a7e3c7;}
  body.theme-light .b-arrived,
  body.theme-light .b-arrived-del{background:#e8f1ff;color:#2457c5;border:1px solid #b7cdfa;}
  body.theme-light .b-doc-review,
  body.theme-light .b-email,
  body.theme-light .b-pending{background:#fff7df;color:#a16207;border:1px solid #f0ca73;}
  body.theme-light .b-delayed{background:#fff1f1;color:#b91c1c;border:1px solid #f3b2b2;}
  body.theme-light .b-delivered{background:#e8edf3;color:#334155;border:1px solid #cbd5e1;}
  body.theme-light .doc-pending-badge{background:#fff7df;color:#a16207;border-color:#f0ca73;}
  body.theme-light .map-area{background:#dfe8f1;}
  body.theme-light .modal-bg{background:rgba(15,23,42,.38);}
  body.theme-light .modal{background:#f4f7fa;}
  body.theme-light .field input,
  body.theme-light .field select,
  body.theme-light .update-input textarea,
  body.theme-light .src-select,
  body.theme-light .notes-edit-form textarea,
  body.theme-light .notes-edit-form input{background:#f8fafc;color:#0f172a;border-color:#cbd5e1;}
  body.theme-light .field input::placeholder,
  body.theme-light .notes-edit-form input::placeholder{color:#94a3b8;}
  body.theme-light .btn-cancel,
  body.theme-light .btn-s{background:#f8fafc;color:#26364a;border-color:#cbd5e1;}
  body.theme-light .stats-row{gap:8px;}
  body.theme-light .load-list{background:#cdd8e5;}
  body.theme-light .load-item{background:#d8e4f0;border-bottom-color:#a8b8cc;border-left-color:#b89820;box-shadow:none;}
  body.theme-light .load-item:hover{background:#ccd8ec;}
  body.theme-light .load-item.active{background:#b8ccec !important;border-left-color:#1a3fa8 !important;box-shadow:inset 0 0 0 1px rgba(26,63,168,.3),0 1px 3px rgba(15,23,42,.12) !important;}
  body.theme-light .load-item [style*="border-top:1px solid rgba(255,255,255"]{border-top-color:#a8b8cc !important;}
  body.theme-light .load-item span[style*="background:rgba(245,158,11"]{background:#d8c888 !important;border-color:#b0a040 !important;color:#07111f !important;}
  body.theme-light .load-item [style*="background:rgba(255,255,255,.04"]{background:#c8d5e5 !important;border:1px solid #a0b0c4;}
  body.theme-light .load-item [style*="color:rgba(255,255,255,.65"]{color:#1a2a3d !important;}
  body.theme-light .load-item [style*="color:rgba(255,255,255,.62"]{color:#1a2a3d !important;}
  body.theme-light .load-item [style*="color:rgba(255,255,255,.55"]{color:#3d5269 !important;}
  body.theme-light .load-item [style*="color:rgba(255,255,255,.3"]{color:#526173 !important;}
  body.theme-light .load-item [style*="color:#fbbf24"]{color:#7c4a00 !important;}
  body.theme-light .load-item [style*="color:#fca5a5"]{color:#991b1b !important;}
  body.theme-light .load-item [style*="color:#86efac"]{color:#035f47 !important;}
  body.theme-light .detail{background:#cdd8e5;border-left-color:#a4b4c4;}
  body.theme-light .detail [style*="background:rgba(245,158,11"]{background:rgba(124,74,0,.12) !important;border-color:rgba(124,74,0,.35) !important;}
  body.theme-light .detail [style*="background:rgba(52,211,153"]{background:rgba(3,95,71,.12) !important;border-color:rgba(3,95,71,.35) !important;}
  body.theme-light .detail [style*="background:rgba(248,113,113"]{background:#fff1f1 !important;border-color:#ef8f8f !important;}
  body.theme-light .gm-style .gm-style-iw-c{background:#ffffff !important;border:1px solid #cbd5e1 !important;box-shadow:0 14px 32px rgba(15,23,42,.16) !important;}
  body.theme-light .gm-style .gm-style-iw-d{background:#ffffff !important;color:#07111f !important;}
  body.theme-light .gm-style .gm-style-iw-d > div > div{background:#ffffff !important;color:#07111f !important;border-color:#cbd5e1 !important;}
  body.theme-light .gm-style .gm-style-iw-d div[style*="background:rgba(255,255,255,.07"]{background:#f1f5f9 !important;}
  body.theme-light .gm-style .gm-style-iw-d div[style*="color:#fff"]{color:#07111f !important;}
  body.theme-light .gm-style .gm-style-iw-d div[style*="color:rgba(255,255,255"]{color:#526173 !important;}
  body.theme-light .gm-style .gm-style-iw-d span[style*="color:rgba(255,255,255"]{color:#526173 !important;}
  body.theme-light .gm-style .gm-style-iw-d span[style*="color:#93c5fd"]{color:#1d4ed8 !important;}
  body.theme-light .gm-style .gm-style-iw-d div[style*="color:#4ade80"]{color:#047857 !important;}
  body.theme-light .gm-style .gm-style-iw-d button{background:#f8fafc !important;color:#334155 !important;border-color:#cbd5e1 !important;}
  body.theme-light .gm-style .gm-style-iw-t::after{background:#ffffff !important;}

  /* MAP */
  .map-area{flex:1;background:var(--blue-light);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;transition:flex .25s ease;}
  .map-area.collapsed{flex:0 0 18px !important;min-width:18px !important;max-width:18px !important;}
  .map-area.collapsed ~ .detail{flex:0 0 24%;max-width:none;}
  .layout:has(.map-area.collapsed) .sidebar{flex:0 0 34%;max-width:680px;}
  .map-collapse-btn{position:absolute;left:0;top:50%;transform:translateY(-50%);width:18px;background:rgba(30,41,59,.95);border:none;border-right:1px solid rgba(255,255,255,.12);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 0;z-index:20;height:60px;border-radius:0 6px 6px 0;}
  .map-collapse-btn:hover{background:rgba(59,130,246,.4);}
  .map-collapsed-label{writing-mode:vertical-rl;text-orientation:mixed;font-size:9px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.08em;text-transform:uppercase;display:none;white-space:nowrap;}
  .map-area.collapsed .map-collapsed-label{display:block;}
  .map-area.collapsed #mapbox-map,
  .map-area.collapsed #ops-pipeline-strip,
  .map-area.collapsed .map-legend-strip{display:none !important;}
  .map-area.map-focused #ops-pipeline-strip{display:none !important;}
  #ops-urgent-section{display:none !important;}
  /* WORKSPACE AREA WRAPPER */

  /* LOAD HEADER STRIP */
  /* light theme */

  /* SELECTED LOAD WORKSPACE */
  .open-map-load-btn{margin-left:24px;margin-right:auto;padding:8px 14px;border-radius:8px;border:1px solid rgba(96,165,250,.35);background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;font-size:12px;font-weight:800;font-family:var(--font);cursor:pointer;box-shadow:0 10px 24px rgba(37,99,235,.22);white-space:nowrap;}
  .open-map-load-btn:hover{filter:brightness(1.08);}
  .load-card-meta{margin-top:5px;font-size:10px;color:#67e8f9;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.map-area:not(.collapsed) ~ .detail{flex:0 0 30%;max-width:430px;}
.layout:has(.map-area.collapsed) .detail{flex:0 0 24%;max-width:none;}
  /* pale-color overrides inside workspace panels — appointment boxes etc */
  /* detail panel pale-color overrides */
  body.theme-light .detail [style*="color:#93c5fd"],
  body.theme-light .detail [style*="color:#60a5fa"],
  body.theme-light .detail [style*="color:#bfdbfe"]{color:#1a3fa8 !important;}
  body.theme-light .detail [style*="color:#6ee7b7"],
  body.theme-light .detail [style*="color:#4ade80"]{color:#035f47 !important;}
  body.theme-light .detail [style*="color:#2563eb"]{color:#1a3fa8 !important;}
  body.theme-light .detail [style*="background:rgba(96,165,250"]{background:rgba(26,63,168,.1) !important;border-color:rgba(26,63,168,.3) !important;}
  body.theme-light .detail [style*="background:rgba(245,158,11"]{background:rgba(124,74,0,.1) !important;border-color:rgba(124,74,0,.3) !important;}
  body.theme-light .detail [style*="background:rgba(52,211,153"]{background:rgba(3,95,71,.1) !important;border-color:rgba(3,95,71,.3) !important;}
  body.theme-light .detail [style*="background:rgba(255,255,255,.025"]{background:rgba(15,23,42,.04) !important;}
  body.theme-light .detail [style*="background:rgba(255,255,255,.06"]{background:#dce5f0 !important;}
  body.theme-light .detail [style*="background:rgba(255,255,255,.08"]{background:#d4dde9 !important;border-color:#a8b8cc !important;}
  /* load header strip pale-color overrides */
  @media (max-width: 1200px){.open-map-load-btn{margin-left:12px;padding:7px 10px;font-size:11px;}}
  @media (max-width: 768px) and (pointer: coarse){.open-map-load-btn{display:none;}}
  /* DETAIL PANEL */
  .detail{flex:0 0 30%;min-width:260px;max-width:400px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;box-shadow:-2px 0 8px rgba(0,0,0,.04);height:100%;transition:flex-basis .25s ease,max-width .25s ease;position:relative;}

  /* CUSTOMER BADGE IN DETAIL */

  /* ROUTE */

  /* UPDATES */

  /* DRIVER CHAT PANEL */

  /* UPDATE INPUT */

  /* DETAIL ACTIONS */

  /* MODALS */
  .modal-bg{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(2px);}
  .modal-bg.open{display:flex;}
  .modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:440px;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-md);}
  .modal h3{font-size:17px;font-weight:600;margin-bottom:4px;}
  .modal-sub{font-size:13px;color:var(--text2);margin-bottom:18px;line-height:1.5;}
  .field{margin-bottom:12px;}
  .field label{font-size:11px;color:var(--text2);display:block;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
  .field input,.field select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;font-size:13px;color:var(--text);font-family:var(--font);outline:none;transition:border .15s;}
  .field input:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,86,219,.08);}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .field:has(#a-stop){display:none;}
  .add-stop-row{display:grid;grid-template-columns:1fr auto;gap:7px;align-items:center;}
  .add-stop-row button{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);background:var(--surface2);color:var(--red);font-size:16px;font-weight:800;cursor:pointer;}
  .req{color:var(--red);}
  .modal-actions{display:flex;gap:8px;margin-top:18px;}
  .btn-cancel{flex:1;padding:10px;background:var(--surface2);color:var(--text2);border:1px solid var(--border);border-radius:8px;font-size:13px;font-family:var(--font);cursor:pointer;}
  .btn-cancel:hover{border-color:var(--border2);}
  .btn-go{flex:2;padding:10px;background:var(--blue);color:#0c1220;border:none;border-radius:8px;font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;}
  .btn-go:hover{background:var(--blue-dark);}
  .btn-go:disabled{opacity:.5;cursor:not-allowed;filter:saturate(.5);}
  .btn-go.amber{background:var(--amber);}
  .sms-box{background:var(--blue-light);border:1px solid var(--blue-mid);border-radius:8px;padding:10px 12px;font-size:11px;color:var(--text2);line-height:1.6;margin-top:10px;}
  .sms-box strong{color:var(--text);}
  #modal-sms .modal{width:720px;max-width:94vw;}
  #modal-sms .sms-box{max-height:48vh;overflow:auto;font-size:12px;}
  .sms-consent-box{display:flex;align-items:flex-start;gap:10px;margin:4px 0 12px;padding:12px;border:1px solid var(--amber-mid);border-radius:9px;background:var(--amber-light);color:var(--text2);font-size:11px;line-height:1.45;cursor:pointer;}
  .sms-consent-box input{width:16px;height:16px;margin-top:1px;accent-color:var(--amber);flex:0 0 auto;}
  .sms-consent-box a{color:var(--blue);font-weight:800;text-decoration:none;}
  .sms-consent-box a:hover{text-decoration:underline;}
  .sms-copy-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:rgba(96,165,250,.12);border:1px solid rgba(96,165,250,.28);border-radius:7px;color:#bfdbfe;font-size:11px;font-weight:700;font-family:var(--font);cursor:pointer;}
  .sms-copy-btn:hover{background:rgba(96,165,250,.2);}

  /* SECTION DIVIDER */
  .section-divider{padding:6px 14px;background:rgba(0,0,0,.25);border-bottom:1px solid rgba(255,255,255,.07);font-size:11px;font-weight:600;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.07em;display:flex;align-items:center;justify-content:space-between;}

  /* NOTES SECTION */

  /* NAV RAIL */
  .nav-rail{width:54px;background:#0f172a;display:flex;flex-direction:column;align-items:center;padding:12px 0;gap:2px;flex-shrink:0;height:100%;}
  .nav-icon{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:17px;transition:background .15s;position:relative;border:none;background:transparent;}
  .nav-icon:hover{background:rgba(255,255,255,.12);}
  .nav-icon.active{background:rgba(255,255,255,.2);}
  .nav-tip{position:absolute;left:46px;background:#0f172a;color:#fff;font-size:11px;padding:4px 9px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:999;}
  .nav-icon:hover .nav-tip{opacity:1;}
  .nav-bottom{margin-top:auto;}
  /* LOGIN */
  .login-overlay{position:fixed;inset:0;background:#070b14;display:flex;align-items:center;justify-content:center;z-index:999;flex-direction:column;}
  .login-box{background:#0f1829;border-radius:16px;padding:36px 32px;width:360px;box-shadow:0 20px 60px rgba(0,0,0,.6);border:1px solid #1e2d42;}
  .login-logo{text-align:center;margin-bottom:24px;}
  .login-logo img{height:44px;}
  .login-title{font-size:16px;font-weight:600;color:#e8edf5;text-align:center;margin-bottom:4px;}
  .login-sub{font-size:13px;color:#4a637d;text-align:center;margin-bottom:24px;}
  .login-field{margin-bottom:14px;}
  .login-field label{font-size:11px;font-weight:600;color:#475569;display:block;margin-bottom:5px;text-transform:uppercase;letter-spacing:.05em;}
  .login-field input{width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#0f172a;font-family:'Inter',sans-serif;outline:none;transition:border .15s;}
  .login-field input:focus{border-color:#1a56db;box-shadow:0 0 0 3px rgba(26,86,219,.08);}
  .login-btn{width:100%;padding:11px;background:#f59e0b;color:#0c1220;border:none;border-radius:8px;font-size:14px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;margin-top:8px;transition:background .15s;}
  .login-btn:hover{background:#d97706;}
  .login-error{background:#fef2f2;border:1px solid #fecaca;border-radius:8px;padding:10px 14px;font-size:12px;color:#dc2626;margin-bottom:14px;display:none;text-align:center;}
  .login-footer{text-align:center;margin-top:20px;font-size:11px;color:rgba(255,255,255,.5);}

  /* ── MOBILE RESPONSIVE ─────────────────────────────────────────── */
  @media (max-width: 768px) and (pointer: coarse) {
    body{overflow:hidden;}

    /* Hide desktop nav rail */
    .nav-rail{display:none !important;}

    /* Full width layout */
    .layout{position:relative;height:100%;}

    /* Sidebar full screen */
    .sidebar{
      width:100% !important;
      min-width:100% !important;
      position:absolute;
      top:0;left:0;right:0;bottom:0;
      z-index:10;
      transition:transform .28s cubic-bezier(.4,0,.2,1);
    }
    .sidebar.hide-mobile{transform:translateX(-100%);}

    /* Hide map on mobile */
    .map-area{display:none !important;}

    /* Detail panel full screen, slides in from right */
    .detail{
      width:100% !important;
      min-width:100% !important;
      position:absolute;
      top:0;left:0;right:0;bottom:0;
      z-index:20;
      transform:translateX(100%);
      transition:transform .28s cubic-bezier(.4,0,.2,1);
      display:flex;
      flex-direction:column;
    }

    /* Topbar — compact on mobile */
    .topbar{
      padding:0 12px;
      gap:8px;
      height:52px;
    }
    .topbar-label{display:none;}
    .topbar-div{display:none;}
    /* Hide clocks on mobile */
    #clock-est,#clock-cst,#clock-pst{display:none;}
    .topbar > div:last-child > div:last-child:not(.tb-user-wrap){display:none;} /* old clock group; keep the user menu (Log out, theme) */
    .fsc-pill{height:32px;padding:0 7px;font-size:9px;gap:4px;}
    .fsc-pill input{width:42px;height:23px;font-size:11px;}
    /* Make logo smaller */
    /* Hide export button text on mobile, keep icon */
    /* Bell button */
    #bell-btn{width:32px;height:32px;}

    /* Mobile back button in detail panel */

    /* Sidebar top stats */
    .stats-row{grid-template-columns:1fr 1fr 1fr 1fr;gap:6px;margin-bottom:10px;}
    .stat{padding:10px 6px;}
    .stat-val{font-size:24px !important;}
    .stat-lbl{font-size:10px !important;}

    /* Search bar */
    .search-wrap input{
      padding:12px 10px 12px 34px !important;
      font-size:15px !important;
      border-radius:10px;
    }

    /* Filter chips */
    .filter-chip{
      padding:6px 14px;
      font-size:12px;
      border-radius:20px;
    }

    /* Load items — big touch targets */
    .load-item{
      padding:16px 16px !important;
      border-left-width:4px;
    }
    .load-route{font-size:15px !important;font-weight:600;}
    .load-pro{font-size:12px !important;}
    .badge{font-size:11px !important;padding:3px 10px !important;}

    /* Add load button */
    .sidebar-btns{padding:14px 16px;gap:10px;}
    .btn-add{
      padding:14px !important;
      font-size:15px !important;
      border-radius:10px;
      font-weight:600;
    }

    /* Detail panel tabs */

    /* Detail content — bigger text */

    /* Status buttons grid */

    /* Update log entries */

    /* Update input area */
    #upd-loc{font-size:14px !important;}

    /* Action buttons */

    /* Modal — slides up from bottom */
    .modal-bg{
      align-items:flex-end;
      padding:0;
    }
    .modal{
      width:100% !important;
      max-width:100% !important;
      border-radius:20px 20px 0 0 !important;
      max-height:92vh;
      overflow-y:auto;
      padding:20px 16px 32px;
    }
    /* Modal drag handle */
    .modal::before{
      content:'';
      display:block;
      width:40px;
      height:4px;
      background:var(--border2);
      border-radius:2px;
      margin:0 auto 16px;
    }
    .field input,.field select{
      padding:12px !important;
      font-size:15px !important;
      border-radius:10px;
    }
    .field label{font-size:12px !important;}
    .btn-cancel,.btn-go{
      padding:14px !important;
      font-size:15px !important;
      border-radius:10px;
    }

    /* Quick add tabs */
    #qa-tab-quick,#qa-tab-full{
      padding:8px 14px !important;
      font-size:13px !important;
    }

    /* Route steps */

    /* Notes section */

    /* Bottom nav */
    .mobile-bottom-nav{display:flex !important;}

    /* Add padding to load list for bottom nav */
    .load-list{padding-bottom:64px;}

    /* Detail scroll padding */

    /* Appointment boxes */

    /* Customer section header */

    /* Section divider */
    .section-divider{padding:8px 16px;font-size:12px !important;}

    /* Toast moves up above bottom nav */
    .toast{bottom:72px !important;}

    /* Notif panel — full width on mobile */
    #notif-panel{
      position:fixed !important; /* anchored to the screen, not the bell (the user menu now sits to its right) */
      left:12px !important;
      right:12px !important;
      width:auto !important;
      top:56px !important;
    }

    /* History page adjustments */
  }

  /* Mobile back button - hidden on desktop */

  /* Mobile bottom nav - hidden on desktop */
  .mobile-bottom-nav{
    display:none;
    position:fixed;
    bottom:0;left:0;right:0;
    height:60px;
    background:#0f172a;
    border-top:1px solid rgba(255,255,255,.12);
    z-index:50;
    align-items:center;
    justify-content:space-around;
    padding:0 8px;
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mbn-item{
    display:flex;flex-direction:column;align-items:center;
    gap:3px;cursor:pointer;
    padding:6px 14px;border-radius:10px;
    transition:background .15s;
    flex:1;
    max-width:80px;
  }
  .mbn-item.active{background:rgba(59,130,246,.2);}
  .mbn-item svg{width:22px;height:22px;stroke:rgba(255,255,255,.55);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .mbn-item.active svg{stroke:#93c5fd;}
  .mbn-label{font-size:10px;color:rgba(255,255,255,.45);font-weight:500;letter-spacing:.01em;}
  .mbn-item.active .mbn-label{color:#93c5fd;font-weight:600;}

  /* TOAST */
  .toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(60px);padding:10px 20px;border-radius:8px;font-size:13px;font-weight:500;transition:transform .3s;z-index:200;pointer-events:none;box-shadow:var(--shadow-md);}
  .toast.show{transform:translateX(-50%) translateY(0);}
  .toast.success{background:var(--green);color:#fff;}
  .toast.warn{background:var(--amber);color:#fff;}
  .toast.info{background:var(--blue);color:#fff;}

  /* LIGHT THEME POLISH
     Keep this late in the file so it wins over older light-theme overrides. */
  body.theme-light{
    --bg:#f0f4f8;
    --surface:#ffffff;
    --surface2:#f7fafc;
    --surface3:#edf3f8;
    --border:#d7e2ee;
    --border2:#b8c8da;
    --text:#102033;
    --text2:#34465d;
    --text3:#6b7e95;
    --green:#087f5b;
    --amber:#b7791f;
    --red:#c2413a;
    --blue:#2563eb;
    background:#f0f4f8;
    color:#102033;
  }
  body.theme-light .layout{background:#f0f4f8;}
  body.theme-light .nav-rail{
    background:linear-gradient(180deg,#1e3a5f 0%,#142843 100%);
    border-right:1px solid rgba(255,255,255,.08);
    box-shadow:2px 0 16px rgba(15,23,42,.16);
  }
  body.theme-light .sidebar,
  body.theme-light .sidebar-top,
  body.theme-light .sidebar-btns{
    background:#f0f4f8;
    border-color:#d7e2ee;
  }
  body.theme-light .stats-row{
    gap:10px;
  }
  body.theme-light .stat{
    background:#ffffff;
    border-color:#d7e2ee;
    box-shadow:0 8px 18px rgba(30,58,95,.08);
  }
  body.theme-light .stat-val{
    color:#0b1728 !important;
    text-shadow:none;
  }
  body.theme-light .stat-lbl{color:#5b7088;}
  body.theme-light .stat[style*="rgba(248,113,113"]{
    background:#fff5f4 !important;
    border-color:#f1b4ae !important;
  }
  body.theme-light .stat[style*="rgba(52,211,153"]{
    background:#edfdf6 !important;
    border-color:#9cdec3 !important;
  }
  body.theme-light .stat[style*="rgba(245,158,11"]{
    background:#fff8e7 !important;
    border-color:#edcb77 !important;
  }
  body.theme-light .search-wrap input,
  body.theme-light .field input,
  body.theme-light .field select,
  body.theme-light .update-input textarea,
  body.theme-light .src-select,
  body.theme-light .notes-edit-form textarea,
  body.theme-light .notes-edit-form input{
    background:#ffffff;
    border-color:#c3d0df;
    color:#102033;
    box-shadow:0 1px 2px rgba(30,58,95,.04);
  }
  body.theme-light .search-wrap input::placeholder,
  body.theme-light .field input::placeholder,
  body.theme-light .notes-edit-form input::placeholder{
    color:#7b8da3;
  }
  body.theme-light .filter-chip{
    background:#ffffff;
    border-color:#c5d2e1;
    color:#34465d;
    box-shadow:0 1px 2px rgba(30,58,95,.04);
  }
  body.theme-light .filter-chip:hover{
    background:#f5f9fd;
    border-color:#9db4cc;
  }
  body.theme-light .filter-chip.active{
    background:#e7f0ff;
    border-color:#3b82f6;
    color:#1d4ed8;
  }
  body.theme-light .load-list{
    background:#f0f4f8;
  }
  body.theme-light .load-item{
    background:#ffffff;
    border-bottom-color:#d7e2ee;
    border-left-color:#d0a326;
    box-shadow:0 1px 0 rgba(30,58,95,.04);
  }
  body.theme-light .load-item:hover{
    background:#f5f9fe;
    box-shadow:0 8px 18px rgba(30,58,95,.08);
  }
  body.theme-light .load-item.active{
    background:#e8f1ff !important;
    border-left-color:#2563eb !important;
    box-shadow:inset 0 0 0 1px rgba(37,99,235,.28),0 8px 18px rgba(30,58,95,.1) !important;
  }
  body.theme-light .load-route{
    color:#102033;
    font-weight:750;
  }
  body.theme-light .load-pro,
  body.theme-light .load-meta{
    color:#46596f;
  }
  body.theme-light .load-item.active .load-pro{color:#1d4ed8;}
  body.theme-light .load-card-meta{color:#0f8a74 !important;}
  body.theme-light .load-item [style*="background:rgba(255,255,255"],
  body.theme-light .load-item [style*="background: rgba(255,255,255"]{
    background:#eef4fa !important;
  }

  /* ── RYDER ALERTS ────────────────────────────────────────────────────────── */
  .ryder-card{border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;transition:border-color .15s;}
  .ryder-card:hover{filter:brightness(1.04);}
  .ryder-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .ryder-status-badge{font-size:10px;font-weight:800;font-family:var(--mono);letter-spacing:.06em;text-transform:uppercase;}
  .ryder-route{display:flex;align-items:center;gap:8px;}
  .ryder-city{font-size:15px;font-weight:800;color:var(--text);}
  .ryder-card-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:6px;border-top:1px solid rgba(255,255,255,.06);}
  .ryder-btn{padding:6px 14px;border-radius:7px;font-size:12px;font-weight:700;cursor:pointer;border:none;font-family:var(--font);transition:opacity .12s;}
  .ryder-btn:hover{opacity:.82;}
  .ryder-btn-primary{background:#3b82f6;color:#fff;}
  .ryder-btn-warning{background:#d97706;color:#fff;}
  .ryder-btn-success{background:#059669;color:#fff;}
  .ryder-btn-skip{background:var(--surface2);color:var(--text2);border:1px solid var(--border2);}
  .ryder-filter-chip{padding:4px 12px;border-radius:999px;font-size:11px;font-weight:700;font-family:var(--font);cursor:pointer;background:var(--surface2);border:1px solid var(--border);color:var(--text2);transition:all .12s;}
  .ryder-filter-chip.active{background:#3b82f6;border-color:#3b82f6;color:#fff;}
  .ryder-filter-chip:hover:not(.active){border-color:var(--blue);color:var(--blue);}
  body.theme-light .ryder-btn-skip{background:var(--surface2);color:var(--text);}
  body.theme-light .ryder-card-actions{border-top-color:rgba(0,0,0,.08);}

  /* ══════════════════════════════════════════════════════════════════════
     REDESIGN PHASE 1 — LET BRAND LIGHT THEME
     Brand: LET blue #0066CC, header navy #0B1F44. Keep this block LAST so it
     wins over the older light-theme overrides above. Dark theme is untouched.
     ══════════════════════════════════════════════════════════════════════ */
  .topbar-logo{height:34px;width:auto;flex-shrink:0;display:block;}
  .login-logo-img{height:48px;width:auto;display:inline-block;}

  body.theme-light{
    --bg:#f4f6f9;
    --surface:#ffffff;
    --surface2:#f7f9fc;
    --surface3:#eef2f7;
    --border:#e2e8f0;
    --border2:#cbd5e1;
    --text:#0f1b2d;
    --text2:#3b4a5e;
    --text3:#6b7a90;
    --blue:#0066cc;
    --blue-dark:#0052a3;
    --blue-light:rgba(0,102,204,.07);
    --blue-mid:rgba(0,102,204,.15);
    --green:#15803d;
    --green-light:rgba(21,128,61,.08);
    --green-mid:rgba(21,128,61,.16);
    --amber:#b45309;
    --amber-light:rgba(180,83,9,.08);
    --amber-mid:rgba(180,83,9,.16);
    --red:#c62828;
    --red-light:rgba(198,40,40,.07);
    --red-mid:rgba(198,40,40,.15);
    --shadow:0 1px 2px rgba(15,27,45,.06),0 1px 3px rgba(15,27,45,.08);
    --shadow-md:0 4px 14px rgba(15,27,45,.10),0 1px 3px rgba(15,27,45,.08);
    background:#f4f6f9;
    color:#0f1b2d;
  }
  body.theme-light .layout{background:#f4f6f9;}

  /* Header + nav rail: LET navy */
  body.theme-light .topbar{background:#0b1f44;border-bottom:1px solid #0a1a3a;box-shadow:0 1px 6px rgba(11,31,68,.25);}
  body.theme-light .nav-rail{background:#0b1f44;border-right:1px solid rgba(255,255,255,.06);box-shadow:none;}
  body.theme-light .nav-btn.active,
  body.theme-light .nav-icon.active{background:rgba(0,102,204,.35);color:#fff;box-shadow:inset 3px 0 0 #3d8fe6;}
  body.theme-light .theme-option.active{background:#0066cc;}

  /* Brand blue on primary actions */
  body.theme-light .ryder-filter-chip.active{background:#0066cc;border-color:#0066cc;}

  /* Login */
  body.theme-light .login-box{background:#0b1f44;border-color:#16305e;}

  /* Load board lanes (light) */
  body.theme-light.board-mode .load-list{background:#f4f6f9;}
  body.theme-light.board-mode .board-lane{background:#eef2f7;border:1px solid #e2e8f0;box-shadow:none;}
  body.theme-light .board-lane .section-divider{background:#ffffff;color:#0f1b2d;border-bottom:1px solid #e2e8f0;}
  body.theme-light .btn-add{background:#0066cc;}
  body.theme-light .btn-add:hover{background:#0052a3;}

  /* Login screen (light theme = LET navy) */
  body.theme-light .login-overlay{background:linear-gradient(160deg,#0b1f44 0%,#061431 100%);}
  body.theme-light .login-btn{background:#0066cc;color:#fff;}
  body.theme-light .login-btn:hover{background:#0052a3;}

  /* ══════════════════════════════════════════════════════════════════════
     REDESIGN PHASE 2 — LABELED SIDEBAR
     Expanded 224px with labels, collapses to a 64px icon rail (body.nav-collapsed).
     ══════════════════════════════════════════════════════════════════════ */
  body .nav-rail{
    width:224px;flex-shrink:0;height:100%;
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    padding:14px 12px 12px;background:#0b1f44;
    border-right:1px solid rgba(255,255,255,.06);box-shadow:none;
    overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
    transition:width .2s ease,padding .2s ease;
  }
  body .nav-rail::-webkit-scrollbar{display:none;}

  /* Add Load — primary action */
  body .nav-rail .nav-cta{
    display:flex;align-items:center;gap:10px;height:42px;padding:0 14px;margin-bottom:18px;
    background:#0066cc;color:#fff;border-radius:10px;cursor:pointer;position:relative;
    font-size:13.5px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
    box-shadow:0 4px 14px rgba(0,102,204,.35),inset 0 1px 0 rgba(255,255,255,.14);
    transition:background .15s,transform .1s,box-shadow .15s;
  }
  body .nav-rail .nav-cta:hover{background:#0a74e0;box-shadow:0 6px 18px rgba(0,102,204,.45),inset 0 1px 0 rgba(255,255,255,.18);}
  body .nav-rail .nav-cta:active{transform:translateY(1px);}
  body .nav-rail .nav-cta .nav-svg{width:18px;height:18px;stroke-width:2.4;}

  body .nav-rail .nav-section{display:flex;flex-direction:column;gap:2px;margin-bottom:16px;}
  body .nav-rail .nav-section-label{
    font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:rgba(255,255,255,.36);padding:0 12px 6px;white-space:nowrap;overflow:hidden;
    transition:opacity .15s;
  }

  body .nav-rail .nav-icon{
    width:auto;height:38px;display:flex;align-items:center;justify-content:flex-start;gap:12px;
    padding:0 12px;border-radius:8px;cursor:pointer;position:relative;
    color:rgba(255,255,255,.66);background:transparent;box-shadow:none;
    font-size:13.5px;font-weight:500;white-space:nowrap;
    transition:background .15s,color .15s;
  }
  body .nav-rail .nav-icon svg{color:inherit !important;flex-shrink:0;}
  body .nav-rail .nav-icon:hover{background:rgba(255,255,255,.07);color:#fff;}
  body .nav-rail .nav-icon.active{
    background:rgba(61,143,230,.18);color:#fff;font-weight:600;
    box-shadow:inset 3px 0 0 #3d8fe6;
  }
  body .nav-rail .nav-icon.active svg{color:#7cb6f5 !important;}
  body .nav-rail .nav-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;transition:opacity .15s;}

  /* Badges */
  body .nav-rail .nav-count-badge{
    position:static;margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;
    background:#ef4444;color:#fff;font-size:10.5px;font-weight:700;line-height:20px;
    align-items:center;justify-content:center;font-family:var(--mono);
  }
  body .nav-rail .nav-dot-badge{
    position:static;margin-left:auto;width:8px;height:8px;border-radius:50%;background:#34d399;
    box-shadow:0 0 0 3px rgba(52,211,153,.18);
  }

  body .nav-rail .nav-bottom{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);}
  body .nav-rail .nav-collapse-btn svg{transition:transform .2s;}
  body .nav-rail .nav-logout:hover{background:rgba(239,68,68,.14);color:#fecaca;}

  /* Tooltips only when collapsed */
  body .nav-rail .nav-tip{
    position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
    background:#0f172a;color:#fff;font-size:12px;font-weight:500;padding:5px 10px;border-radius:6px;
    white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s;z-index:1000;
    box-shadow:0 6px 18px rgba(0,0,0,.25);display:none;
  }

  /* Collapsed */
  body.nav-collapsed .nav-rail{width:64px;padding:14px 10px 12px;overflow:visible;}
  body.nav-collapsed .nav-rail .nav-label,
  body.nav-collapsed .nav-rail .nav-section-label{opacity:0;width:0;flex:0 0 0;padding:0;height:0;overflow:hidden;}
  body.nav-collapsed .nav-rail .nav-section{margin-bottom:10px;}
  body.nav-collapsed .nav-rail .nav-section + .nav-section{padding-top:10px;border-top:1px solid rgba(255,255,255,.08);}
  body.nav-collapsed .nav-rail .nav-icon,
  body.nav-collapsed .nav-rail .nav-cta{justify-content:center;padding:0;gap:0;}
  body.nav-collapsed .nav-rail .nav-cta{height:44px;}
  body.nav-collapsed .nav-rail .nav-tip{display:block;}
  body.nav-collapsed .nav-rail .nav-icon:hover .nav-tip,
  body.nav-collapsed .nav-rail .nav-cta:hover .nav-tip{opacity:1;}
  body.nav-collapsed .nav-rail .nav-collapse-btn svg{transform:rotate(180deg);}
  body.nav-collapsed .nav-rail .nav-count-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;line-height:16px;font-size:9px;padding:0 4px;margin:0;}
  body.nav-collapsed .nav-rail .nav-dot-badge{position:absolute;top:7px;right:9px;margin:0;}

  /* Topbar: breathing room for the logo */
  body .topbar{padding-left:22px;}
  body{--nav-w:224px;}
  body.nav-collapsed{--nav-w:64px;}
  #contacts-panel,#ryder-panel{transition:left .2s ease;}
  /* Sidebar has Add Load now — hide the old bottom bar button on the board */
  body.theme-light .sidebar-btns{display:none;}
  @media (max-width:768px) and (pointer:coarse){ #contacts-panel,#ryder-panel{left:0 !important;} }
  body.board-mode .board-lane{flex:1 0 340px;min-width:min(100%,340px);}

  /* Fix: long customer filter row pushed the page wider than the screen */
  .layout > .sidebar,body.board-mode .sidebar{min-width:0;}
  .sidebar-top{min-width:0;}
  .filter-row{flex-wrap:wrap;row-gap:6px;min-width:0;}
  body .nav-rail .nav-kbd{margin-left:auto;font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.18);color:rgba(255,255,255,.85);}
  body.nav-collapsed .nav-rail .nav-kbd{display:none;}
/* Secure driver-code dialog; code is fetched only on explicit staff request. */
.driver-access-dialog{width:min(440px,calc(100vw - 40px));box-sizing:border-box;border:1px solid var(--border,#dbe4ef);border-radius:18px;padding:24px;background:var(--surface,#fff);color:var(--text,#172b45);box-shadow:0 24px 80px #071a3540;font-family:inherit;}
.driver-access-dialog::backdrop{background:#071a3580;}
.driver-access-dialog h2{margin:0 0 12px;font-size:22px;}
.driver-access-dialog p{font-size:14px;line-height:1.6;}
.driver-access-dialog label{display:block;font-size:12px;font-weight:700;margin-top:20px;}
.driver-access-dialog input{box-sizing:border-box;width:100%;margin-top:8px;padding:16px;border:1px solid #b7cef2;border-radius:12px;background:#eef5ff;color:#155bd7;font-size:25px;font-weight:800;letter-spacing:2px;text-align:center;}
.driver-access-dialog .driver-access-hint{color:var(--text2,#52657e);}
.driver-access-actions{display:flex;gap:10px;margin-top:20px;}
.driver-access-actions button{border:1px solid #cbd8e9;border-radius:10px;min-height:44px;padding:10px 16px;font:inherit;font-size:14px;font-weight:700;cursor:pointer;}
.driver-access-actions button:first-child{flex:1;background:#155bd7;color:white;border-color:#155bd7;}
.driver-access-actions button:disabled{opacity:.5;cursor:wait;}