#mapbox-map .mapboxgl-popup-content{background:#1e293b;color:#fff;border:1px solid #334155;border-radius:10px;padding:12px 14px;font-family:'Inter',sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.4);min-width:200px;}
#mapbox-map .mapboxgl-popup-tip{border-top-color:#1e293b;}
#mapbox-map .mapboxgl-popup-close-button{color:rgba(255,255,255,.5);font-size:16px;padding:4px 8px;}
#mapbox-map .mapboxgl-popup-close-button:hover{color:#fff;background:transparent;}
  :root {
    --bg:#0c1220;--surface:#0f1829;--surface2:#111d2e;--border:#1e2d42;--border2:#243448;
    --text:#e8edf5;--text2:#a7b6c9;--text3:#71849c;
    --blue:#f59e0b;--blue-dark:#d97706;--blue-light:rgba(245,158,11,.08);--blue-mid:rgba(245,158,11,.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);
  }
  *{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);}
  .logo-img{height:36px;}
  .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;font-size:11px;color:#93c5fd;font-family:var(--mono);}
  .live-dot{width:6px;height:6px;border-radius:50%;background:#4ade80;animation:blink 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);}
  .btn-export{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:6px;font-size:12px;font-family:var(--font);cursor:pointer;transition:background .15s;}
  .btn-export:hover{background:rgba(255,255,255,.2);}

  /* LAYOUT */
  .layout{display:flex;flex:1;overflow:hidden;height:100%;}

  /* 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:6px;margin-bottom:12px;}
  .stat{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:8px 6px;text-align:center;}
  .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 #fff inset;transform:scale(1.06);}
  .stat-filter.stat-active-delayed{box-shadow:0 0 0 2px #f87171 inset;transform:scale(1.06);}
  .stat-filter.stat-active-gps{box-shadow:0 0 0 2px #34d399 inset;transform:scale(1.06);}
  .stat-filter.stat-active-email{box-shadow:0 0 0 2px #fbbf24 inset;transform:scale(1.06);}
  .stat-val{font-size:17px;font-weight:600;line-height:1;color:#fff !important;}
  .stat-lbl{font-size:10px;color:rgba(255,255,255,.68);margin-top:2px;font-weight:500;}
  .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;padding-bottom:2px;}
  .filter-row::-webkit-scrollbar{height:0;}
  .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;}
  .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 */
  .customer-header{padding:8px 14px 4px;display:flex;align-items:center;gap:8px;position:sticky;top:0;background:var(--bg);z-index:1;border-bottom:1px solid var(--border);}
  .customer-logo-badge{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;}
  .customer-name{font-size:11px;font-weight:600;color:var(--text2);letter-spacing:.04em;text-transform:uppercase;}
  .customer-count{font-size:10px;color:var(--text3);margin-left:auto;font-family:var(--mono);}

  .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{background:rgba(245,158,11,.15);color:#fcd34d;}
  .b-arrived{background:rgba(96,165,250,.15);color:#93c5fd;}
  .b-pickedup{background:rgba(167,139,250,.15);color:#c4b5fd;}
  .b-transit{background:rgba(52,211,153,.15);color:#6ee7b7;}
  .b-delayed{background:rgba(248,113,113,.18);color:#fca5a5;}
  .b-arrived-del{background:rgba(251,191,36,.15);color:#fde68a;}
  .b-delivered{background:rgba(74,222,128,.15);color:#86efac;}
  .b-pending{background:rgba(255,255,255,.06);color:#8fa3bc;}
  .b-email{background:#fef3c7;color:#92400e;}  .b-email{background:var(--red-mid);color:var(--red);}
  .b-pending{background:var(--blue-mid);color:var(--blue);}
  .b-delivered{background:var(--green-mid);color:var(--green);}
  .load-route{font-size:13px;color:#fff;margin-bottom:3px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .load-meta{font-size:11px;color:rgba(255,255,255,.5);display:flex;justify-content:space-between;}
  .email-indicator{display:flex;align-items:center;gap:3px;font-size:10px;color:var(--amber);margin-top:3px;}

  /* 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;}
  .btn-sms-sm{padding:9px 12px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.8);border:1px solid rgba(255,255,255,.2);border-radius:8px;font-size:12px;font-family:var(--font);cursor:pointer;white-space:nowrap;transition:all .15s;}
  .btn-sms-sm:hover{background:rgba(255,255,255,.2);color:#fff;}

  /* 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:1;max-width:none;}
  .layout:has(.map-area.collapsed) .sidebar{flex:0 0 40%;max-width:560px;}
  .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-placeholder{text-align:center;}
  .map-placeholder p{font-size:14px;color:var(--blue);font-weight:500;}
  .map-placeholder span{font-size:12px;color:var(--text3);}
  .map-legend{position:absolute;bottom:14px;left:14px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--shadow);}
  .legend-item{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--text2);}
  .legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}

  /* 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;}
  .detail-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--surface2);flex-shrink:0;}
  .dtab{flex:1;padding:11px 8px;font-size:12px;cursor:pointer;border:none;background:transparent;color:var(--text2);font-family:var(--font);font-weight:500;border-bottom:2px solid transparent;transition:all .15s;}
  .dtab:hover{color:var(--text);}
  .dtab.active{color:var(--blue);border-bottom-color:var(--blue);background:var(--surface);}
  .detail-scroll{flex:1;overflow-y:auto;}
  .detail-scroll::-webkit-scrollbar{width:4px;}
  .detail-scroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
  .dsection{padding:12px 14px;border-bottom:1px solid var(--border);}
  .dlabel{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px;}
  .dval{font-size:13px;color:var(--text);}
  .dval.blue{color:var(--blue);font-family:var(--mono);font-size:12px;font-weight:500;}

  /* CUSTOMER BADGE IN DETAIL */
  .cust-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;}

  /* ROUTE */
  .rstep{display:flex;gap:10px;padding:6px 0;}
  .ricon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;font-weight:600;}
  .ricon.done{background:var(--green-mid);color:var(--green);border:1.5px solid var(--green);}
  .ricon.now{background:var(--amber-mid);color:var(--amber);border:1.5px solid var(--amber);}
  .ricon.todo{background:var(--border);color:var(--text3);border:1.5px solid var(--border2);}
  .rline{width:1px;height:12px;background:var(--border2);margin:0 0 0 10px;}
  .rtitle{font-size:12px;font-weight:600;color:var(--text);}
  .rsub{font-size:11px;color:var(--text2);margin-top:1px;}

  /* UPDATES */
  .update-entry{padding:10px 14px;border-bottom:1px solid var(--border);}
  .update-time{font-family:var(--mono);font-size:10px;color:var(--text3);margin-bottom:3px;}
  .update-text{font-size:12px;color:var(--text);line-height:1.5;}
  .update-src{font-size:10px;margin-top:3px;font-weight:600;display:inline-block;padding:1px 7px;border-radius:10px;letter-spacing:.03em;}
  .src-email{background:#fef3c7;color:#92400e;}
  .src-gps{background:#d1fae5;color:#065f46;}
  .src-phone{background:#dbeafe;color:#1e40af;}
  .src-manual{background:#f1f5f9;color:#475569;}

  /* UPDATE INPUT */
  .update-input{padding:12px 14px;border-top:1px solid var(--border);background:var(--surface2);flex-shrink:0;}
  .update-input textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;color:var(--text);font-family:var(--font);resize:none;height:60px;outline:none;line-height:1.5;}
  .update-input textarea:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(217,119,6,.08);}
  .update-input textarea::placeholder{color:var(--text3);}
  .update-row{display:flex;gap:6px;margin-top:6px;}
  .src-select{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:7px 8px;font-size:12px;color:var(--text);font-family:var(--font);outline:none;}
  .btn-log{padding:7px 14px;background:var(--amber);color:#fff;border:none;border-radius:8px;font-size:12px;font-weight:600;font-family:var(--font);cursor:pointer;white-space:nowrap;}

  /* DETAIL ACTIONS */
  .detail-actions{padding:12px 14px;display:flex;flex-direction:column;gap:7px;border-top:1px solid var(--border);background:var(--surface2);}
  .btn-p{width:100%;padding:9px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:500;font-family:var(--font);cursor:pointer;transition:background .15s;}
  .btn-p:hover{background:var(--blue-dark);}
  .btn-p.amber{background:var(--amber);}
  .btn-p.amber:hover{background:#b45309;}
  .btn-s{width:100%;padding:8px;background:var(--surface);color:var(--text2);border:1px solid var(--border);border-radius:8px;font-size:12px;font-family:var(--font);cursor:pointer;transition:all .15s;}
  .btn-s:hover{border-color:var(--blue);color:var(--blue);}
  .btn-d{width:100%;padding:8px;background:transparent;color:var(--red);border:1px solid rgba(220,38,38,.2);border-radius:8px;font-size:12px;font-family:var(--font);cursor:pointer;}
  .btn-d:hover{background:var(--red-light);}
  .empty-state{flex:1;display:flex;align-items:center;justify-content:center;padding:30px;text-align:center;}
  .empty-state p{font-size:13px;color:var(--text3);line-height:1.8;}

  /* 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;}
  .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.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);}

  /* 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 */
  .notes-section{padding:12px 14px;border-top:1px solid var(--border);}
  .notes-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
  .notes-header .dlabel{margin-bottom:0;}
  .btn-edit-notes{font-size:11px;color:var(--blue);background:none;border:none;cursor:pointer;font-family:var(--font);font-weight:500;padding:0;}
  .email-chain-box{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;margin-bottom:8px;}
  .email-chain-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;border-bottom:1px solid var(--border);font-size:12px;}
  .email-chain-row:last-child{border-bottom:none;padding-bottom:0;}
  .email-chain-label{color:var(--text2);font-size:11px;min-width:60px;}
  .email-chain-val{color:var(--text);font-size:12px;text-align:right;flex:1;margin-left:8px;word-break:break-all;}
  .copy-btn{font-size:10px;color:var(--blue);background:none;border:none;cursor:pointer;font-family:var(--font);margin-left:6px;white-space:nowrap;padding:2px 6px;border:1px solid var(--blue-mid);border-radius:4px;}
  .notes-freetext{font-size:12px;color:var(--text2);line-height:1.6;white-space:pre-wrap;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;min-height:40px;}
  .notes-edit-form{display:none;}
  .notes-edit-form textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 10px;font-size:12px;color:var(--text);font-family:var(--font);resize:none;height:70px;outline:none;line-height:1.5;margin-bottom:6px;}
  .notes-edit-form textarea:focus{border-color:var(--blue);}
  .notes-edit-form input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:12px;color:var(--text);font-family:var(--font);outline:none;margin-bottom:6px;}
  .notes-edit-form input:focus{border-color:var(--blue);}
  .notes-edit-form .field-label{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;display:block;}
  .notes-save-row{display:flex;gap:6px;}
  .btn-save-notes{flex:1;padding:7px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-size:12px;font-weight:500;font-family:var(--font);cursor:pointer;}
  .btn-cancel-notes{padding:7px 12px;background:transparent;color:var(--text2);border:1px solid var(--border);border-radius:6px;font-size:12px;font-family:var(--font);cursor:pointer;}



  /* 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-rail-div{width:26px;height:1px;background:rgba(255,255,255,.1);margin:5px 0;}
  .nav-bottom{margin-top:auto;}
  .coming-soon{font-size:9px;color:rgba(255,255,255,.3);text-align:center;padding:4px 0;font-family:var(--mono);}
  /* 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);}
  .status-btn{padding:7px 4px;border-radius:6px;font-size:11px;font-weight:600;font-family:var(--font);cursor:pointer;transition:opacity .15s;text-align:center;}
  .status-btn:hover{opacity:.8;}

  .appt-alert{background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.25);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--red);font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
  .appt-warn{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);border-radius:8px;padding:8px 12px;font-size:12px;color:var(--amber);font-weight:500;margin-bottom:8px;display:flex;align-items:center;gap:6px;}
  .load-alert-dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1.5s infinite;}


  /* ── MOBILE RESPONSIVE ─────────────────────────────────────────── */
  @media (max-width: 768px) {
    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;
    }
    .detail.show-mobile{transform:translateX(0);}

    /* 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{display:none;}
    /* Make logo smaller */
    .logo-img{height:30px;}
    /* Hide export button text on mobile, keep icon */
    .btn-export{padding:6px 8px;font-size:11px;}
    /* Bell button */
    #bell-btn{width:32px;height:32px;}

    /* Mobile back button in detail panel */
    .mobile-back{
      display:flex !important;
      align-items:center;
      gap:8px;
      padding:14px 16px;
      background:#0f172a;
      border-bottom:1px solid rgba(255,255,255,.1);
      cursor:pointer;
      font-size:14px;
      font-weight:600;
      color:#93c5fd;
      flex-shrink:0;
    }

    /* 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-meta{font-size:12px !important;margin-top:4px;}
    .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;
    }
    .btn-sms-sm{
      padding:14px 16px !important;
      font-size:13px !important;
      border-radius:10px;
    }

    /* Detail panel tabs */
    .dtab{
      padding:16px 8px !important;
      font-size:14px !important;
    }

    /* Detail content — bigger text */
    .dlabel{font-size:11px !important;letter-spacing:.06em;}
    .dval{font-size:14px !important;}
    .dsection{padding:14px 16px;}

    /* Status buttons grid */
    .status-btn{
      padding:14px 4px !important;
      font-size:13px !important;
      border-radius:8px;
    }

    /* Update log entries */
    .update-entry{padding:14px 16px;}
    .update-text{font-size:13px !important;}
    .update-time{font-size:11px !important;}

    /* Update input area */
    .update-input{padding:14px 16px;}
    .update-input textarea{
      height:70px;
      font-size:14px !important;
      border-radius:10px;
    }
    #upd-loc{font-size:14px !important;}
    .src-select{font-size:13px !important;padding:10px 8px;}
    .btn-log{
      padding:10px 18px !important;
      font-size:13px !important;
      border-radius:8px;
    }

    /* Action buttons */
    .btn-p,.btn-s,.btn-d{
      padding:14px !important;
      font-size:14px !important;
      border-radius:10px;
    }

    /* 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 */
    .rstep{padding:8px 0;}
    .rtitle{font-size:13px !important;}
    .rsub{font-size:12px !important;}

    /* Notes section */
    .notes-section{padding:14px 16px;}
    .notes-freetext{font-size:13px !important;padding:12px;}

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

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

    /* Detail scroll padding */
    .detail-scroll{padding-bottom:20px;}

    /* Appointment boxes */
    .appt-alert,.appt-warn{
      padding:12px 14px;
      font-size:13px !important;
    }

    /* Customer section header */
    .customer-header{padding:10px 16px 6px;}
    .customer-name{font-size:12px !important;}

    /* 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{
      width:calc(100vw - 24px) !important;
      right:-8px !important;
      top:48px !important;
    }

    /* History page adjustments */
    #delivered-page > div:first-child{
      flex-wrap:wrap;
      height:auto !important;
      padding:10px 14px;
      gap:8px;
    }
    #history-stats-bar{
      overflow-x:auto;
      padding:8px 14px;
      gap:16px;
    }
    #hs-customers{display:none;}
    #delivered-list{gap:8px;}
  }

  /* Mobile back button - hidden on desktop */
  .mobile-back{display:none;}

  /* 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;}