/* ============================================================ ROOT — TRIDOMINITAMA THEME: HITAM | MERAH | PUTIH */
    :root {
        --brand-primary:   #111111;   /* deep black */
        --brand-accent:    #cc1a1a;   /* brand red */
        --brand-red-dark:  #a01010;   /* dark red hover */
        --brand-red-light: #e53030;   /* bright red */
        --sidebar-bg:      #111111;   /* sidebar black */
        --sidebar-hover:   #1f1f1f;   /* hover black */
        --sidebar-act:     #2a0000;   /* active dark red */
        --sidebar-icon:    #aaaaaa;   /* icon gray */
        --header-bg:       #111111;   /* header black */
        --content-bg:      #f5f5f5;   /* off-white bg */
        --card-bg:         #ffffff;   /* white card */
        --text-dark:       #1a1a1a;   /* near black text */
        --text-muted:      #777777;   /* muted gray */
        --border:          #e0e0e0;   /* light border */
        --teal:            #0d9488;
        --green:           #16a34a;
        --orange:          #d97706;
        --red:             #cc1a1a;   /* = brand red */
        --blue:            #1d4ed8;
        --yellow:          #ca8a04;
    }
    *,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
    body { font-family:'Inter',sans-serif; background:var(--content-bg); color:var(--text-dark); overflow:hidden; height:100vh; }

    /* ============================================================ LOADING */
    #loading-screen {
        position:fixed; inset:0;
        background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 50%,#2a0000 100%);
        z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center;
        transition:opacity .6s ease, visibility .6s ease;
    }
    #loading-screen.hide { opacity:0; visibility:hidden; }
    .loading-brand { text-align:center; margin-bottom:60px; animation:fadeDown .8s ease forwards; }
    .loading-brand h1 { font-size:2.6rem; font-weight:800; color:#fff; letter-spacing:3px; text-transform:uppercase; }
    .loading-brand h1 span { color:var(--brand-accent); }
    .loading-brand p { color:rgba(255,255,255,.5); font-size:.85rem; letter-spacing:2px; text-transform:uppercase; margin-top:4px; }
    .road-scene { position:relative; width:700px; max-width:90vw; height:120px; }
    .road { position:absolute; bottom:0; left:0; right:0; height:40px; background:#1a1a1a; border-radius:4px; overflow:hidden; border-top: 2px solid #333; }
    .road-line { position:absolute; top:50%; transform:translateY(-50%); width:60px; height:6px; background:#cc1a1a; border-radius:3px; animation:roadMove .6s linear infinite; }
    .road-line:nth-child(1){left:0%} .road-line:nth-child(2){left:20%} .road-line:nth-child(3){left:40%}
    .road-line:nth-child(4){left:60%} .road-line:nth-child(5){left:80%} .road-line:nth-child(6){left:100%}
    @keyframes roadMove { 0%{transform:translateY(-50%) translateX(0)} 100%{transform:translateY(-50%) translateX(-140px)} }
    .truck-wrapper { position:absolute; bottom:40px; left:-160px; animation:truckDrive 3s cubic-bezier(.4,0,.2,1) forwards; }
    @keyframes truckDrive { 0%{left:-160px} 40%{left:calc(50% - 80px)} 60%{left:calc(50% - 80px)} 100%{left:calc(100% + 20px)} }
    .truck-svg { width:160px; height:80px; filter:drop-shadow(4px 4px 10px rgba(0,0,0,.5)); }
    .wheel-anim { animation:spin .4s linear infinite; transform-origin:center; transform-box:fill-box; }
    @keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
    .smoke { position:absolute; bottom:44px; left:-12px; display:flex; flex-direction:column; gap:4px; }
    .smoke-puff { width:10px; height:10px; background:rgba(255,255,255,.3); border-radius:50%; animation:smokePuff .8s ease-out infinite; }
    .smoke-puff:nth-child(2){animation-delay:.3s} .smoke-puff:nth-child(3){animation-delay:.6s}
    @keyframes smokePuff { 0%{transform:translateY(0) scale(.5);opacity:.6} 100%{transform:translateY(-30px) scale(1.8);opacity:0} }
    .loading-progress { margin-top:40px; width:700px; max-width:90vw; text-align:center; }
    .progress-bar-track { width:100%; height:4px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; margin-bottom:12px; }
    .progress-bar-fill { height:100%; background:linear-gradient(to right,#a01010,#e53030); border-radius:4px; width:0%; animation:progressFill 3s ease-in-out forwards; }
    @keyframes progressFill { 0%{width:0%} 30%{width:40%} 60%{width:65%} 100%{width:100%} }
    .loading-text { color:rgba(255,255,255,.5); font-size:.8rem; letter-spacing:1px; }
    .loading-dots span { animation:blink 1.4s infinite; }
    .loading-dots span:nth-child(2){animation-delay:.2s} .loading-dots span:nth-child(3){animation-delay:.4s}
    @keyframes blink { 0%,80%,100%{opacity:0} 40%{opacity:1} }
    @keyframes fadeDown { from{opacity:0;transform:translateY(-20px)} to{opacity:1;transform:translateY(0)} }

    /* ============================================================ LOGIN */
    #login-page {
        position:fixed; inset:0;
        background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 60%,#2a0000 100%);
        display:flex; align-items:center; justify-content:center;
        z-index:9999; opacity:0; visibility:hidden;
        transition:opacity .6s ease, visibility .6s ease; overflow:hidden;
    }
    #login-page.show { opacity:1; visibility:visible; }
    .bg-shapes { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
    .shape { position:absolute; border-radius:50%; background:rgba(204,26,26,.05); animation:floatShape 10s ease-in-out infinite alternate; }
    .shape-1{width:400px;height:400px;top:-100px;left:-100px;animation-delay:0s}
    .shape-2{width:300px;height:300px;bottom:-80px;right:-80px;animation-delay:2s}
    .shape-3{width:200px;height:200px;top:40%;left:60%;animation-delay:4s}
    @keyframes floatShape { from{transform:translate(0,0) scale(1)} to{transform:translate(30px,20px) scale(1.05)} }
    .login-card { background:rgba(255,255,255,.05); backdrop-filter:blur(20px); border:1px solid rgba(204,26,26,.25); border-radius:20px; padding:35px 30px; width:360px; box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(204,26,26,.1); z-index:1; animation:cardIn .6s ease forwards; }
    @keyframes cardIn { from{opacity:0;transform:translateY(30px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
    .login-logo { text-align:center; margin-bottom:35px; }
    .login-logo .logo-icon { width:54px; height:54px; background:linear-gradient(135deg,#a01010,#e53030); border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 8px 25px rgba(204,26,26,.5); }
    .login-logo .logo-icon i { font-size:28px; color:#fff; }
    .login-logo h2 { font-size:1.25rem; font-weight:800; color:#fff; letter-spacing:2px; }
    .login-logo p { font-size:.78rem; color:rgba(255,255,255,.4); letter-spacing:1.5px; text-transform:uppercase; margin-top:3px; }
    .login-title { font-size:0.95rem; font-weight:600; color:rgba(255,255,255,.9); margin-bottom:20px; padding-bottom:12px; border-bottom:1px solid rgba(255,255,255,.1); }
    .form-group { margin-bottom:18px; }
    .form-group label { display:block; font-size:.8rem; font-weight:500; color:rgba(255,255,255,.55); margin-bottom:7px; letter-spacing:.5px; text-transform:uppercase; }
    .input-wrapper { position:relative; }
    .input-wrapper i { position:absolute; left:15px; top:50%; transform:translateY(-50%); color:rgba(255,255,255,.3); font-size:.9rem; }
    .form-control { width:100%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); border-radius:10px; padding:13px 15px 13px 42px; font-size:.92rem; color:#fff; font-family:'Inter',sans-serif; transition:all .3s; outline:none; }
    .form-control::placeholder { color:rgba(255,255,255,.2); }
    .form-control:focus { border-color:var(--brand-accent); background:rgba(255,255,255,.12); box-shadow:0 0 0 3px rgba(204,26,26,.2); }
    .btn-login { width:100%; padding:14px; background:linear-gradient(135deg,#a01010,#e53030); color:#fff; font-weight:700; font-size:.95rem; border:none; border-radius:10px; cursor:pointer; letter-spacing:1px; text-transform:uppercase; transition:all .3s; box-shadow:0 8px 25px rgba(204,26,26,.4); margin-top:8px; display:flex; align-items:center; justify-content:center; gap:8px; }
    .btn-login:hover { transform:translateY(-2px); box-shadow:0 12px 35px rgba(204,26,26,.6); }
    .login-footer { text-align:center; margin-top:25px; font-size:.75rem; color:rgba(255,255,255,.3); }

    /* ============================================================ APP LAYOUT */
    #app { display:none; height:100vh; overflow:hidden; flex-direction:column; }
    #app.show { display:flex; }

    /* Header */
    .app-header { height:56px; background:var(--header-bg); display:flex; align-items:center; box-shadow:0 2px 12px rgba(0,0,0,.5); z-index:500; flex-shrink:0; border-bottom: 2px solid var(--brand-accent); }
    .app-header .brand { width:62px; display:flex; align-items:center; justify-content:center; height:100%; background:rgba(204,26,26,.15); flex-shrink:0; }
    .app-header .brand-text { font-size:1.1rem; font-weight:800; color:var(--brand-accent); letter-spacing:1px; }
    .header-toolbar { flex:1; display:flex; align-items:center; padding:0 15px; gap:12px; }
    .toggle-btn { background:transparent; border:none; color:rgba(255,255,255,.8); font-size:1.2rem; cursor:pointer; padding:7px 10px; border-radius:6px; transition:background .2s; }
    .toggle-btn:hover { background:rgba(255,255,255,.1); }
    .header-page-title { font-size:1rem; font-weight:600; color:rgba(255,255,255,.95); }
    .header-right { margin-left:auto; display:flex; align-items:center; gap:15px; padding-right:20px; }
    .hdr-btn { background:transparent; border:none; color:rgba(255,255,255,.7); font-size:1.1rem; cursor:pointer; padding:6px 8px; border-radius:6px; transition:all .2s; position:relative; }
    .hdr-btn:hover { background:rgba(255,255,255,.12); color:#fff; }
    .badge-dot { position:absolute; top:4px; right:4px; width:8px; height:8px; background:var(--brand-accent); border-radius:50%; border:1.5px solid var(--header-bg); }
    .avatar-btn { display:flex; align-items:center; gap:10px; cursor:pointer; padding:5px 10px; border-radius:8px; transition:background .2s; }
    .avatar-btn:hover { background:rgba(255,255,255,.1); }
    .avatar-circle { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,#a01010,#e53030); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.8rem; color:#fff; }
    .avatar-name { font-size:.85rem; font-weight:600; color:rgba(255,255,255,.9); }

    /* App Body */
    .app-body { display:flex; flex:1; overflow:hidden; }

    /* Sidebar */
    .app-sidebar { width:62px; background:var(--sidebar-bg); display:flex; flex-direction:column; overflow:hidden; transition:width .3s cubic-bezier(.4,0,.2,1); flex-shrink:0; box-shadow:2px 0 20px rgba(0,0,0,.15); z-index:400; }
    .sidebar-nav { flex:1; overflow-y:auto; overflow-x:hidden; padding:12px 0; }
    .sidebar-nav::-webkit-scrollbar { width:4px; }
    .sidebar-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }
    .nav-item { position:relative; }
    .nav-link { display:flex; align-items:center; height:50px; padding:0 20px; gap:16px; color:var(--sidebar-icon); cursor:pointer; transition:all .2s; white-space:nowrap; border-left:3px solid transparent; }
    .nav-link:hover,.nav-item.open>.nav-link { background:var(--sidebar-hover); color:#fff; }
    .nav-link.active-parent { border-left-color:var(--brand-accent); color:var(--brand-accent); background:var(--sidebar-act); }
    .nav-link i.nav-icon { width:22px; text-align:center; font-size:1.05rem; flex-shrink:0; }
    .nav-link .nav-label { font-size:.88rem; font-weight:500; opacity:0; transition:opacity .2s; flex:1; }
    .nav-link .nav-arrow { font-size:.7rem; opacity:0; transition:opacity .2s,transform .3s; flex-shrink:0; }
    .nav-item.open>.nav-link .nav-arrow { transform:rotate(90deg); }
    /* Popout (collapsed) */
    .submenu-popout { position:absolute; left:62px; top:0; min-width:240px; background:#1a1a1a; border:1px solid #333; border-radius:0 8px 8px 0; box-shadow:5px 5px 25px rgba(0,0,0,.6); padding:8px 0; z-index:500; opacity:0; visibility:hidden; transform:translateX(-10px); transition:all .2s; }
    .nav-item:hover .submenu-popout { opacity:1; visibility:visible; transform:translateX(0); }
    .app-sidebar.expanded .submenu-popout { display: none !important; }
    .submenu-popout-header { padding:12px 20px 10px; font-size:.82rem; font-weight:700; color:var(--brand-accent); letter-spacing:.5px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:4px; text-transform: uppercase; }
    .submenu-popout ul { list-style:none; }
    .submenu-popout ul li a { display:flex; align-items:center; gap:12px; padding:10px 20px; font-size:.88rem; color:#aaaaaa; text-decoration:none; transition:all .2s; cursor:pointer; }
    .submenu-popout ul li a:hover { background:rgba(204,26,26,.12); color:#fff; padding-left:24px; }
    /* Inline submenu (expanded) */
    .nav-submenu { overflow:hidden; max-height:0; transition:max-height .3s; background:rgba(0,0,0,.15); }
    .nav-item.open>.nav-submenu { max-height:500px; }
    .nav-submenu a { display:flex; align-items:center; gap:14px; padding:10px 20px 10px 58px; font-size:.88rem; color:#aaaaaa; text-decoration:none; transition:all .2s; line-height: 1.3; }
    .nav-submenu a:hover { color:#fff; background:rgba(204,26,26,.1); }
    .nav-submenu a.active { color:var(--brand-accent); font-weight:500; }
    .nav-submenu a i { font-size:.45rem; flex-shrink:0; }
    .nav-sep { height:1px; background:rgba(255,255,255,.05); margin:10px 16px; }

    /* ============================================================ CONTENT */
    .app-content { flex:1; overflow-y:auto; background:var(--content-bg); display:flex; flex-direction:column; }
    .app-content::-webkit-scrollbar { width:8px; }
    .app-content::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
    .app-content::-webkit-scrollbar-track { background: transparent; }

    /* Page container */
    .page { display:none; flex-direction:column; flex:1; animation: fadeIn .3s ease-out; }
    .page.active { display:flex; }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* ============================================================ HOME PAGE */
    .home-content { padding:30px; }
    .page-header-bar { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:28px; }
    .page-title { font-size:1.75rem; font-weight:700; color:var(--text-dark); letter-spacing: -0.5px; }
    .page-subtitle { font-size:.9rem; color:var(--text-muted); margin-top:4px; }
    .stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-bottom:28px; }
    .stat-card { background:var(--card-bg); border-radius:16px; padding:24px; box-shadow:0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03); display:flex; align-items:center; gap:20px; border-left:4px solid transparent; transition:transform .2s,box-shadow .2s; }
    .stat-card:hover { transform:translateY(-4px); box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -2px rgba(0,0,0,.05); }
    .stat-card:nth-child(1){border-left-color:var(--blue)} .stat-card:nth-child(2){border-left-color:var(--green)}
    .stat-card:nth-child(3){border-left-color:var(--orange)} .stat-card:nth-child(4){border-left-color:var(--red)}
    .stat-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.5rem; flex-shrink:0; }
    .stat-card:nth-child(1) .stat-icon{background:rgba(59,130,246,.12);color:var(--blue)}
    .stat-card:nth-child(2) .stat-icon{background:rgba(16,185,129,.12);color:var(--green)}
    .stat-card:nth-child(3) .stat-icon{background:rgba(245,158,11,.12);color:var(--orange)}
    .stat-card:nth-child(4) .stat-icon{background:rgba(239,68,68,.12);color:var(--red)}
    .stat-value { font-size:2rem; font-weight:800; color:var(--text-dark); line-height:1; }
    .stat-label { font-size:.85rem; font-weight:500; color:var(--text-muted); margin-top:6px; }
    .dashboard-grid { display:grid; grid-template-columns:2fr 1fr; gap:20px; }
    .widget-card { background:var(--card-bg); border-radius:16px; padding:24px; box-shadow:0 4px 6px -1px rgba(0,0,0,.05); }
    .widget-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
    .widget-title { font-size:1.1rem; font-weight:600; color:var(--text-dark); }
    
    .quick-list { list-style:none; }
    .quick-list li { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(0,0,0,.04); cursor:pointer; transition:padding-left .2s; }
    .quick-list li:last-child { border-bottom:none; }
    .quick-list li:hover { padding-left:5px; }
    .q-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; flex-shrink:0; }
    .q-icon.blue{background:rgba(59,130,246,.1);color:var(--blue)} .q-icon.green{background:rgba(16,185,129,.1);color:var(--green)}
    .q-icon.orange{background:rgba(245,158,11,.1);color:var(--orange)} .q-icon.red{background:rgba(239,68,68,.1);color:var(--red)} .q-icon.purple{background:rgba(168,85,247,.1);color:#a855f7}
    .q-label { font-size:.9rem; font-weight:500; color:var(--text-dark); }
    .q-sub { font-size:.75rem; color:var(--text-muted); }
    .q-arr { margin-left:auto; color:var(--text-muted); font-size:.8rem; }

    /* ============================================================ STUFFING TABLE PAGE */
    .stuffing-page { padding:0; display:flex; flex-direction:column; flex:1; }
    .stuffing-header { background:#fff; padding:12px 18px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .stuffing-header h2 { font-size:1.2rem; font-weight:700; color:var(--text-dark); margin-right:6px; }
    .stuffing-header .list-icon { color:var(--text-muted); font-size:1rem; }
    .breadcrumb { margin-left:auto; font-size:.75rem; color:var(--text-muted); }
    /* Toolbar */
    .stuffing-toolbar { background:#fff; padding:10px 16px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
    .select-limit-old { padding:5px 10px; border:1px solid var(--border); border-radius:5px; font-size:.82rem; color:var(--text-dark); cursor:pointer; }
    .search-box-old { flex:1; min-width:200px; max-width:400px; position:relative; }
    .search-box-old input { width:100%; padding:6px 12px 6px 12px; border:1px solid var(--border); border-radius:5px 0 0 5px; font-size:.83rem; outline:none; }
    .search-box-old input:focus { border-color:var(--teal); }
    .btn-search { background:var(--teal); color:#fff; border:none; padding:6px 14px; border-radius:0 5px 5px 0; cursor:pointer; font-size:.85rem; }
    .btn-view { background:var(--orange); color:#fff; border:none; padding:6px 14px; border-radius:5px; cursor:pointer; font-size:.83rem; font-weight:500; display:flex; align-items:center; gap:6px; }
    .btn-view:hover { background:#d97706; }
    .btn-new { background:var(--teal); color:#fff; border:none; padding:6px 14px; border-radius:5px; cursor:pointer; font-size:.83rem; font-weight:500; display:flex; align-items:center; gap:6px; }
    .btn-new:hover { background:#0f766e; }
    .btn-monitor { background:var(--brand-primary); color:#fff; border:none; padding:6px 14px; border-radius:5px; cursor:pointer; font-size:.83rem; font-weight:500; display:flex; align-items:center; gap:6px; margin-left:auto; }
    .btn-monitor:hover { background:#122b44; }
    /* Table */
    .stuffing-table-wrapper { flex:1; overflow:auto; }
    .stuffing-table-wrapper::-webkit-scrollbar { height:6px; width:6px; }
    .stuffing-table-wrapper::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; }
    .stuffing-tbl { width:100%; border-collapse:collapse; min-width:1200px; font-size:.8rem; }
    .stuffing-tbl thead tr { background:#f5f5f5; }
    .stuffing-tbl th { padding:10px; text-align:left; font-weight:600; color:var(--brand-accent); font-size:.75rem; border-bottom:2px solid var(--border); white-space:nowrap; position:sticky; top:0; background:#f5f5f5; z-index:10; }
    .stuffing-tbl td { padding:10px; border-bottom:1px solid #eeeeee; vertical-align:top; }
    .stuffing-tbl tbody tr:hover { background:#fdf5f5; }
    .stuffing-tbl tbody tr:nth-child(even) { background:#fafafa; }
    .stuffing-tbl tbody tr:nth-child(even):hover { background:#fdf5f5; }
    .vessel-name { font-weight:600; color:var(--text-dark); font-size:.78rem; line-height:1.4; }
    .status-select { width:130px; padding:4px 6px; border:1px solid #ccc; border-radius:4px; font-size:.75rem; cursor:pointer; }
    .status-select.CONFIRMED { color:var(--green); font-weight:600; }
    .status-select.NEW { color:var(--orange); font-weight:600; }
    /* Action Buttons */
    .act-btn { width:28px; height:28px; border:none; border-radius:4px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.7rem; color:#fff; margin:1px; transition:opacity .2s; }
    .act-btn:hover { opacity:.82; }
    .act-btn.green { background:var(--green); } .act-btn.blue { background:var(--blue); }
    .act-btn.orange { background:var(--orange); } .act-btn.red { background:var(--red); }
    .act-btn.teal { background:var(--teal); }
    .act-group { display:flex; flex-wrap:wrap; max-width:80px; }
    .opr-btns { display:flex; gap:4px; }
    .note-text { font-size:.75rem; color:var(--text-muted); max-width:140px; }

    /* ============================================================ STUFFING MONITOR PAGE */
    .monitor-page { background:#080e14; flex:1; overflow:auto; padding:8px; display:none; flex-direction:column; }
    .monitor-page.active { display:flex; }
    .monitor-toolbar { display:flex; align-items:center; gap:10px; padding:6px 8px; background:#0d1a24; border-radius:6px; margin-bottom:8px; }
    .monitor-title { color:var(--brand-accent); font-size:.85rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; }
    .monitor-time { color:rgba(255,255,255,.5); font-size:.78rem; margin-left:auto; font-family:'Roboto Mono',monospace; }
    .btn-back-list { background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.12); padding:5px 12px; border-radius:5px; cursor:pointer; font-size:.78rem; display:flex; align-items:center; gap:6px; }
    .btn-back-list:hover { background:rgba(255,255,255,.15); }
    .monitor-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; align-content:start; }
    /* Vessel Card */
    .vessel-card { background:#111111; border:1px solid #2a0000; border-radius:6px; overflow:hidden; }
    .vessel-card-header { background:#1a1a1a; padding:6px 10px; display:flex; align-items:center; justify-content:space-between; border-bottom: 1px solid var(--brand-accent); }
    .vessel-card-name { font-size:.72rem; font-weight:700; color:var(--brand-accent); letter-spacing:.3px; flex:1; line-height:1.3; }
    .vessel-card-num { width:18px; height:18px; background:rgba(255,255,255,.15); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.65rem; color:rgba(255,255,255,.7); font-weight:700; flex-shrink:0; }
    /* Table inside card */
    .vc-table { width:100%; border-collapse:collapse; }
    .vc-table thead tr { background:#1a1a1a; }
    .vc-table th { font-size:.6rem; color:rgba(255,255,255,.4); padding:4px 6px; text-align:left; font-weight:500; border-bottom:1px solid rgba(255,255,255,.06); }
    .vc-table td { font-size:.65rem; padding:5px 6px; border-bottom:1px solid rgba(255,255,255,.04); color:rgba(255,255,255,.75); vertical-align:middle; }
    .vc-table tbody tr:hover { background:rgba(255,255,255,.03); }
    .vc-num { font-family:'Roboto Mono',monospace; color:#fff; font-weight:600; font-size:.65rem; }
    .vc-bl { font-family:'Roboto Mono',monospace; color:#4fc3f7; font-size:.62rem; }
    .vc-driver { color:#81d4fa; font-size:.63rem; font-weight:500; }
    .vc-note { color:rgba(255,255,255,.55); font-size:.62rem; max-width:100px; }
    .vc-date { font-family:'Roboto Mono',monospace; font-size:.62rem; color:rgba(255,255,255,.6); }
    .vc-temp { font-size:.62rem; font-weight:600; }
    .vc-temp.neg { color:#4fc3f7; }
    .vc-temp.zero { color:#81c784; }
    .dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
    .dot.green { background:#4caf50; box-shadow:0 0 6px #4caf50; }
    .dot.orange { background:#ff9800; box-shadow:0 0 6px #ff9800; }
    .dot.red { background:#f44336; box-shadow:0 0 6px #f44336; }
    .dots-wrap { display:flex; gap:3px; align-items:center; }
    .vc-table tbody tr.hl-red { background:rgba(244,67,54,.12); }
    .monitor-page::-webkit-scrollbar { width:6px; }
    .monitor-page::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:3px; }
    
    /* ============================================================ SHARED TABLE STYLES (TRUCK LIST) */
    .table-page { padding: 24px 30px; display:flex; flex-direction:column; flex:1; }
    .table-card { background:var(--card-bg); border-radius:16px; box-shadow:0 4px 6px -1px rgba(0,0,0,.06); display:flex; flex-direction:column; flex:1; overflow:hidden; border-top: 3px solid var(--brand-accent); }
    .table-header { padding:20px 24px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:15px; }
    .table-title-group { display:flex; align-items:center; gap:12px; }
    .table-title { font-size:1.25rem; font-weight:700; color:var(--text-dark); }
    .table-icon { color:var(--brand-accent); font-size:1.1rem; }
    .table-toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
    .select-limit { padding:8px 14px; border:1px solid var(--border); border-radius:8px; font-size:.85rem; color:var(--text-dark); cursor:pointer; background: #fff; outline: none; transition: border-color .2s; }
    .select-limit:focus { border-color: var(--brand-accent); }
    .search-box { position:relative; min-width: 250px; }
    .search-box input { width:100%; padding:9px 16px 9px 40px; border:1px solid var(--border); border-radius:8px; font-size:.85rem; outline:none; transition: border-color .2s, box-shadow .2s; }
    .search-box input:focus { border-color:var(--brand-accent); box-shadow: 0 0 0 3px rgba(204,26,26,.12); }
    .search-box i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
    
    .btn-action { background:var(--brand-accent); color:#fff; border:none; padding:9px 18px; border-radius:8px; cursor:pointer; font-size:.85rem; font-weight:600; display:flex; align-items:center; gap:8px; transition: background .2s, transform .1s; box-shadow: 0 2px 4px rgba(204,26,26,.3); }
    .btn-action:hover { background:var(--brand-red-dark); transform: translateY(-1px); }
    .btn-action:active { transform: translateY(0); }
    
    .table-wrapper { flex:1; overflow:auto; padding: 0 24px 24px; }
    .table-wrapper::-webkit-scrollbar { height:8px; width:8px; }
    .table-wrapper::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:4px; }
    .data-tbl { width:100%; border-collapse:separate; border-spacing: 0; min-width:1000px; font-size:.85rem; }
    .data-tbl thead th { position:sticky; top:0; background:#f5f5f5; padding:14px 16px; text-align:left; font-weight:600; color:var(--brand-accent); font-size:.75rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom:2px solid var(--border); z-index:10; }
    .data-tbl tbody td { padding:14px 16px; border-bottom:1px solid var(--border); vertical-align:middle; color: var(--text-dark); transition: background .2s; }
    .data-tbl tbody tr:hover td { background:#fdf5f5; }
    .data-tbl tbody tr:last-child td { border-bottom: none; }
    
    /* Checkbox styling */
    .custom-checkbox { display: block; position: relative; padding-left: 25px; margin-bottom: 20px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
    .custom-checkbox input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
    .checkmark { position: absolute; top: -10px; left: 0; height: 18px; width: 18px; background-color: #fff; border: 2px solid #cbd5e1; border-radius: 4px; transition: all .2s; }
    .custom-checkbox:hover input ~ .checkmark { border-color: var(--brand-accent); }
    .custom-checkbox input:checked ~ .checkmark { background-color: var(--brand-accent); border-color: var(--brand-accent); }
    .checkmark:after { content: ""; position: absolute; display: none; }
    .custom-checkbox input:checked ~ .checkmark:after { display: block; }
    .custom-checkbox .checkmark:after { left: 5px; top: 1px; width: 4px; height: 9px; border: solid white; border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
    
    /* Badges */
    .badge { display:inline-flex; align-items: center; justify-content: center; padding:4px 10px; border-radius:6px; font-size:.75rem; font-weight:600; text-transform: uppercase; letter-spacing: 0.5px; }
    .badge.blue { background:rgba(59,130,246,.15); color:var(--blue); }
    .badge.green { background:rgba(16,185,129,.15); color:var(--green); }
    .badge.red { background:rgba(239,68,68,.15); color:var(--red); }
    
    /* Action Buttons in Table */
    .tbl-actions { display:flex; gap:6px; }
    .btn-icon { width:32px; height:32px; border:none; border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:#fff; transition:all .2s; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
    .btn-icon:hover { transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0,0,0,.15); }
    .btn-icon.red { background: var(--brand-accent); } .btn-icon.red:hover { background: var(--brand-red-dark); }
    .btn-icon.teal { background: #0284c7; } .btn-icon.teal:hover { background: #0369a1; }
    .btn-icon.blue { background: #333333; } .btn-icon.blue:hover { background: #111111; }

    /* ============================================================ GPS MONITOR PAGE */
    .gps-page { display:flex; flex:1; overflow:hidden; }
    .gps-sidebar { width:320px; background:#fff; display:flex; flex-direction:column; border-right:1px solid var(--border); z-index: 10; box-shadow: 2px 0 10px rgba(0,0,0,.05); }
    .gps-header { padding:20px; border-bottom:1px solid var(--border); }
    .gps-title { font-size:1.1rem; font-weight:700; color:var(--text-dark); margin-bottom: 5px;}
    .gps-subtitle { font-size:.8rem; color:var(--text-muted); }
    .gps-search { margin-top: 15px; position: relative; }
    .gps-search input { width:100%; padding:8px 14px 8px 36px; border:1px solid var(--border); border-radius:8px; font-size:.85rem; outline:none; background: #f8fafc; }
    .gps-search input:focus { border-color:var(--blue); background: #fff; }
    .gps-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); font-size: .9rem; }
    
    .gps-list { flex:1; overflow-y:auto; }
    .gps-list::-webkit-scrollbar { width:4px; }
    .gps-list::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:2px; }
    .gps-item { padding:15px 20px; border-bottom:1px solid var(--border); cursor:pointer; transition: background .2s; display:flex; gap: 12px; align-items: flex-start; }
    .gps-item:hover { background:#fdf5f5; }
    .gps-item.active { background:#fff0f0; border-left: 3px solid var(--brand-accent); padding-left: 17px; }
    
    .gps-item-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(204,26,26,.1); color: var(--brand-accent); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; }
    .gps-item-info { flex: 1; }
    .gps-plat { font-weight: 700; color: var(--text-dark); font-size: .95rem; margin-bottom: 2px; }
    .gps-loc { font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; margin-bottom: 6px; }
    .gps-status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: .7rem; font-weight: 600; }
    .gps-status.moving { background: rgba(16,185,129,.15); color: var(--green); }
    .gps-status.idle { background: rgba(245,158,11,.15); color: var(--orange); }
    
    .map-container { flex:1; position: relative; z-index: 1; }
    #leaflet-map { width: 100%; height: 100%; }

    /* Custom Leaflet popup styling to make it elegant */
    .leaflet-popup-content-wrapper { border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0,0,0,.15); }
    .leaflet-popup-content { margin: 15px; }
    .map-popup-header { display:flex; align-items:center; gap:10px; margin-bottom:10px; border-bottom: 1px solid #eee; padding-bottom: 8px; }
    .map-popup-title { font-weight: 700; font-size: 1.1rem; color: var(--text-dark); }
    .map-popup-badge { padding: 2px 6px; border-radius: 4px; font-size: .65rem; font-weight: 700; background: rgba(16,185,129,.15); color: var(--green); }
    .map-popup-details { font-size: .85rem; color: #555; line-height: 1.6; }
    .map-popup-details i { width: 16px; color: var(--brand-accent); text-align: center; margin-right: 6px; }

    /* ============================================================ RESPONSIVE */
    @media (max-width: 1100px) {
        .gps-sidebar { width: 280px; }
        .monitor-grid { grid-template-columns:repeat(2,1fr); }
    }
    @media (max-width: 768px) {
        .gps-page { flex-direction: column; }
        .gps-sidebar { width: 100%; height: 250px; border-right: none; border-bottom: 1px solid var(--border); }
        .monitor-grid { grid-template-columns:1fr; }
    }
    
    /* Custom Scrollbar & Utility */
    ::-webkit-scrollbar { width: 6px; height: 6px; }
    ::-webkit-scrollbar-track { background: #f1f5f9; }
    ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
    
    .chart-container {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      height: 300px;
      max-height: 380px;
    }
    @media (min-width: 768px) {
      .chart-container { height: 320px; }
    }
    
    .glass-card {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(226, 232, 240, 0.8);
    }
    /* ============================================================ MONITOR ORDER PAGE */
    .mo-page{display:flex;flex-direction:column;flex:1;min-height:calc(100vh - 56px);overflow:hidden;background:#0d0d0d;}
    .mo-header{background:linear-gradient(135deg,#111 0%,#1a1a1a 100%);border-bottom:2px solid #cc1a1a;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
    .mo-header-left{display:flex;align-items:center;gap:16px;}
    .mo-header-icon{width:46px;height:46px;background:linear-gradient(135deg,#cc1a1a,#e53030);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;box-shadow:0 4px 15px rgba(204,26,26,.4);flex-shrink:0;}
    .mo-header-title{font-size:1.2rem;font-weight:800;color:#fff;letter-spacing:.5px;display:flex;align-items:center;gap:10px;}
    .mo-live-badge{background:rgba(16,185,129,.15);color:#10b981;border:1px solid rgba(16,185,129,.3);border-radius:20px;padding:2px 10px;font-size:.65rem;font-weight:700;letter-spacing:1.5px;display:inline-flex;align-items:center;gap:5px;}
    .mo-live-badge i{font-size:.45rem;animation:pulse-dot 1.5s infinite;}
    @keyframes pulse-dot{0%,100%{opacity:1}50%{opacity:.3}}
    .mo-header-sub{font-size:.78rem;color:rgba(255,255,255,.4);margin-top:2px;}
    .mo-header-right{display:flex;align-items:center;gap:12px;}
    .mo-clock{font-family:'Roboto Mono',monospace;font-size:.85rem;color:rgba(255,255,255,.6);background:rgba(255,255,255,.05);padding:6px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.08);}
    .mo-filter-select{background:#1f1f1f;border:1px solid #333;color:#fff;padding:7px 14px;border-radius:8px;font-size:.82rem;outline:none;cursor:pointer;}
    .mo-filter-select:focus{border-color:#cc1a1a;}
    .mo-btn-refresh{background:rgba(204,26,26,.15);color:#e57373;border:1px solid rgba(204,26,26,.3);padding:7px 16px;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:7px;transition:all .2s;}
    .mo-btn-refresh:hover{background:rgba(204,26,26,.3);color:#fff;}
    .mo-stats-bar{background:#111;border-bottom:1px solid #222;padding:10px 24px;display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0;}
    .mo-stat-chip{display:flex;align-items:center;gap:7px;padding:6px 14px;border-radius:20px;font-size:.78rem;font-weight:600;}
    .mo-stat-chip.total{background:rgba(255,255,255,.07);color:#ccc;border:1px solid rgba(255,255,255,.1);}
    .mo-stat-chip.order{background:rgba(99,102,241,.15);color:#818cf8;border:1px solid rgba(99,102,241,.25);}
    .mo-stat-chip.loading{background:rgba(234,179,8,.12);color:#eab308;border:1px solid rgba(234,179,8,.25);}
    .mo-stat-chip.depart{background:rgba(59,130,246,.12);color:#60a5fa;border:1px solid rgba(59,130,246,.25);}
    .mo-stat-chip.arrive{background:rgba(16,185,129,.12);color:#34d399;border:1px solid rgba(16,185,129,.25);}
    .mo-stat-chip.pod{background:rgba(204,26,26,.12);color:#e57373;border:1px solid rgba(204,26,26,.25);}
    .mo-pipeline-header{display:flex;background:#111;border-bottom:2px solid #1a1a1a;flex-shrink:0;min-width:100%;overflow:hidden;padding: 0 22px 0 16px;}
    .mo-pipe-col{flex:1;width:0;padding:10px 4px;font-size:.62rem;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:1px;border-right:1px solid #1a1a1a;text-align:center;}
    .mo-pipe-col:nth-child(1){flex:1.2;} /* Order Info */
    .mo-pipe-col:nth-child(2){color:#818cf8;}
    .mo-pipe-col:nth-child(n+3):nth-child(-n+16){color:#60a5fa;}
    .mo-pipe-col:nth-child(17){color:#34d399;}
    .mo-pipe-col:nth-child(18){color:#10b981;}
    .mo-board-scroll{flex:1;overflow-y:auto;padding:16px 16px 24px;}
    .mo-board-scroll::-webkit-scrollbar{width:6px;}
    .mo-board-scroll::-webkit-scrollbar-track{background:#111;}
    .mo-board-scroll::-webkit-scrollbar-thumb{background:#333;border-radius:4px;}
    .mo-custom-h-scroll::-webkit-scrollbar{height:8px;}
    .mo-custom-h-scroll::-webkit-scrollbar-track{background:#111;}
    .mo-custom-h-scroll::-webkit-scrollbar-thumb{background:#333;border-radius:4px;}
    .mo-board{display:flex;flex-direction:column;gap:8px;min-width:100%;}
    .mo-order-row{display:flex;background:#141414;border:1px solid #222;border-radius:10px;overflow:hidden;transition:border-color .2s,box-shadow .2s;}
    .mo-order-row:hover{border-color:#cc1a1a;box-shadow:0 0 0 1px rgba(204,26,26,.2);}
    .mo-info-col{flex:1.2;width:0;background:#1a1a1a;padding:12px 10px;border-right:1px solid #222;display:flex;flex-direction:column;gap:3px;cursor:pointer;transition:background .15s;}
    .mo-info-col:hover{background:#242424;}
    .mo-order-no{font-size:.75rem;font-weight:800;color:#cc1a1a;letter-spacing:.5px;}
    .mo-order-truck{font-size:.7rem;font-weight:600;color:#fff;margin-top:2px;}
    .mo-order-driver{font-size:.64rem;color:#888;}
    .mo-order-dest{font-size:.62rem;color:#aaa;margin-top:4px;background:rgba(255,255,255,.05);padding:2px 6px;border-radius:4px;display:inline-block;}
    .mo-order-date{font-size:.6rem;color:#555;margin-top:3px;}
    .mo-stage-cell{flex:1;width:0;border-right:1px solid #1a1a1a;display:flex;align-items:center;justify-content:center;position:relative;min-height:70px;transition:background 0.2s;}
    .mo-stage-cell:hover{background:rgba(255,255,255,0.03);}
    .mo-stage-cell:last-child{border-right:none;}
    .mo-travel-cell{flex:1;width:0;display:flex;align-items:center;justify-content:center;position:relative;min-height:70px;}
    .mo-stage-dot{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;position:relative;z-index:1;}
    .mo-stage-dot.done{background:rgba(16,185,129,.18);border:2px solid #10b981;color:#10b981;}
    .mo-stage-dot.active{background:rgba(204,26,26,.2);border:2px solid #cc1a1a;color:#cc1a1a;box-shadow:0 0 14px rgba(204,26,26,.5);animation:pulse-ring .9s ease infinite alternate;}
    .mo-stage-dot.pending{background:rgba(255,255,255,.03);border:2px dashed #2a2a2a;color:#333;}
    @keyframes pulse-ring{from{box-shadow:0 0 6px rgba(204,26,26,.3)}to{box-shadow:0 0 18px rgba(204,26,26,.7)}}
    .mo-stage-cell::before{content:'';position:absolute;left:0;right:50%;top:50%;height:2px;background:#1f1f1f;transform:translateY(-50%);z-index:0;}
    .mo-stage-cell::after{content:'';position:absolute;left:50%;right:0;top:50%;height:2px;background:#1f1f1f;transform:translateY(-50%);z-index:0;}
    .mo-stage-cell.s-done::before,.mo-stage-cell.s-done::after{background:#10b981;}
    .mo-stage-cell.s-active::before{background:#10b981;}
    .mo-stage-cell.s-active::after{background:#1f1f1f;}
    .mo-stage-cell.s-pod::before{background:#10b981;}
    .mo-stage-time{font-size:.56rem;color:#444;position:absolute;bottom:4px;left:50%;transform:translateX(-50%);white-space:nowrap;z-index:2;}
    .mo-stage-cell.s-done .mo-stage-time,.mo-stage-cell.s-active .mo-stage-time{color:#666;}
    .mo-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px;}
    .mo-modal-overlay.hidden{display:none;}
    .mo-modal-card{background:#1a1a1a;border:1px solid #333;border-radius:16px;width:100%;max-width:740px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 30px 60px rgba(0,0,0,.9);animation:cardIn .3s ease;}
    .mo-modal-header{background:#111;padding:16px 20px;border-bottom:2px solid #cc1a1a;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
    .mo-modal-title{font-size:1rem;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px;}
    .mo-modal-title i{color:#cc1a1a;}
    .mo-modal-close{width:32px;height:32px;border:none;border-radius:8px;background:rgba(255,255,255,.08);color:#aaa;cursor:pointer;font-size:.9rem;transition:all .2s;}
    .mo-modal-close:hover{background:#cc1a1a;color:#fff;}
    .mo-modal-body{padding:20px;overflow-y:auto;flex:1;}
    .mo-modal-body::-webkit-scrollbar{width:4px;}
    .mo-modal-body::-webkit-scrollbar-thumb{background:#333;border-radius:2px;}
    .mo-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px;padding:14px;background:rgba(255,255,255,.03);border-radius:10px;border:1px solid #222;}
    .mo-detail-item label{display:block;font-size:.62rem;font-weight:600;color:#555;text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px;}
    .mo-detail-item span{display:block;font-size:.88rem;font-weight:600;color:#e0e0e0;}
    .mo-tl-section-title{font-size:.72rem;font-weight:700;color:#cc1a1a;text-transform:uppercase;letter-spacing:1px;margin-bottom:14px;padding-bottom:6px;border-bottom:1px solid #222;}
    .mo-timeline{display:flex;flex-direction:column;}
    .mo-tl-step{display:flex;gap:14px;position:relative;}
    .mo-tl-step:not(:last-child){padding-bottom:4px;}
    .mo-tl-step:not(:last-child)::after{content:'';position:absolute;left:19px;top:44px;width:2px;height:calc(100% - 24px);background:#222;z-index:0;}
    .mo-tl-step.s-done:not(:last-child)::after{background:linear-gradient(to bottom,#10b981 60%,#222);}
    .mo-tl-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0;z-index:1;margin-bottom:20px;}
    .mo-tl-icon.s-done{background:rgba(16,185,129,.2);border:2px solid #10b981;color:#10b981;}
    .mo-tl-icon.s-active{background:rgba(204,26,26,.2);border:2px solid #cc1a1a;color:#cc1a1a;box-shadow:0 0 12px rgba(204,26,26,.5);}
    .mo-tl-icon.s-pending{background:#181818;border:2px dashed #2a2a2a;color:#333;}
    .mo-tl-content{flex:1;}
    .mo-tl-title{font-size:.88rem;font-weight:700;color:#e0e0e0;margin-bottom:1px;}
    .mo-tl-title.s-pending{color:#444;}
    .mo-tl-meta{font-size:.72rem;color:#555;margin-bottom:5px;}
    .mo-tl-meta.s-done,.mo-tl-meta.s-active{color:#888;}
    .mo-tl-note{font-size:.78rem;background:rgba(255,255,255,.04);border-left:3px solid #2a2a2a;padding:6px 10px;border-radius:0 6px 6px 0;color:#777;}
    .mo-tl-note.s-done{border-left-color:#10b981;color:#aaa;}
    .mo-tl-note.s-active{border-left-color:#cc1a1a;color:#ccc;}
    .mo-pod-box{margin-top:6px;background:rgba(204,26,26,.08);border:1px solid rgba(204,26,26,.25);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:12px;}
    .mo-pod-box i{color:#cc1a1a;font-size:1.3rem;}
    .mo-pod-text{font-size:.82rem;color:#e0e0e0;font-weight:600;}
    .mo-pod-sub{font-size:.7rem;color:#777;}
    .mo-no-data{text-align:center;padding:60px 20px;color:#444;}
    .mo-no-data i{font-size:3rem;margin-bottom:12px;display:block;}

    /* ============================================================ DRIVER APP (Android Native) */
    .drv-app { background:#f5f5f5; font-family:'Roboto','Inter',sans-serif; flex-direction:column; height:100vh; overflow:hidden; width:100%; max-width:100%; margin:0 auto; position:relative; }
    .drv-statusbar { height:24px; background:#0a0a0a; display:flex; align-items:center; justify-content:flex-end; padding:0 16px; gap:6px; }
    .drv-statusbar i { color:#ccc; font-size:9px; }
    .drv-statusbar span { color:#ccc; font-size:9px; font-weight:600; }
    .drv-appbar { background:linear-gradient(135deg, #b71c1c, #d32f2f); padding:0 16px; height:56px; display:flex; align-items:center; justify-content:space-between; box-shadow:0 2px 8px rgba(0,0,0,0.25); z-index:10; }
    .drv-appbar-title { display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:1.15rem; letter-spacing:1px; }
    .drv-appbar-title i { font-size:1.3rem; }
    .drv-appbar-right { display:flex; align-items:center; gap:14px; }
    .drv-appbar-right .drv-notif { position:relative; color:#fff; font-size:1.1rem; cursor:pointer; padding:6px; }
    .drv-appbar-right .drv-notif .drv-notif-dot { position:absolute; top:2px; right:2px; width:8px; height:8px; background:#ffeb3b; border-radius:50%; border:2px solid #b71c1c; }
    .drv-avatar-sm { width:34px; height:34px; border-radius:50%; background:#fff; color:#b71c1c; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:0.75rem; border:2px solid rgba(255,255,255,0.3); }

    .drv-body { flex:1; overflow-y:auto; padding:16px; padding-bottom:90px; }
    .drv-body.drv-body--fullwidth { padding:0; padding-bottom:90px; }
    .drv-body::-webkit-scrollbar { width:4px; }
    .drv-body::-webkit-scrollbar-thumb { background:#ccc; border-radius:3px; }
    .drv-body-inner { width: 100%; }

    /* Welcome Banner */
    .drv-welcome { background:linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-radius:16px; padding:20px; margin-bottom:16px; position:relative; overflow:hidden; }
    .drv-welcome::after { content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px; background:rgba(211,47,47,0.15); border-radius:50%; }
    .drv-welcome-greet { color:#94a3b8; font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; }
    .drv-welcome-name { color:#fff; font-size:1.3rem; font-weight:800; margin-top:4px; }
    .drv-welcome-sub { color:#64748b; font-size:0.78rem; margin-top:6px; display:flex; align-items:center; gap:6px; }
    .drv-welcome-sub i { color:#d32f2f; }

    /* Order Card */
    .drv-order-card { background:#fff; border-radius:16px; margin-bottom:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.08); border:1px solid #f0f0f0; }
    .drv-card-accent { height:4px; background:linear-gradient(90deg, #d32f2f, #ff5722, #ff9800); }
    .drv-card-header { padding:16px 16px 0; display:flex; justify-content:space-between; align-items:flex-start; }
    .drv-card-job { font-size:1rem; font-weight:800; color:#1a1a1a; letter-spacing:0.3px; }
    .drv-card-badge { font-size:0.65rem; font-weight:800; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:0.5px; }
    .drv-card-badge.active { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
    .drv-card-badge.completed { background:#ecfdf5; color:#059669; border:1px solid #a7f3d0; }

    /* Route visualization */
    .drv-route { padding:12px 16px; display:flex; gap:14px; }
    .drv-route-dots { display:flex; flex-direction:column; align-items:center; padding-top:4px; }
    .drv-route-dot { width:10px; height:10px; border-radius:50%; flex-shrink:0; }
    .drv-route-dot.origin { background:#64748b; border:2px solid #94a3b8; }
    .drv-route-dot.dest { background:#d32f2f; border:2px solid #ef4444; box-shadow:0 0 0 3px rgba(211,47,47,0.15); }
    .drv-route-line { width:2px; flex:1; background:repeating-linear-gradient(to bottom, #cbd5e1 0px, #cbd5e1 4px, transparent 4px, transparent 8px); min-height:24px; }
    .drv-route-info { flex:1; display:flex; flex-direction:column; gap:12px; }
    .drv-route-label { font-size:0.65rem; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:1px; }
    .drv-route-value { font-size:0.9rem; font-weight:700; color:#1e293b; margin-top:1px; }

    /* Info chips row */
    .drv-info-chips { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 16px 12px; }
    .drv-chip { background:#f8fafc; border:1px solid #f1f5f9; border-radius:10px; padding:10px 12px; text-align:center; }
    .drv-chip-label { font-size:0.6rem; font-weight:800; color:#94a3b8; text-transform:uppercase; letter-spacing:1px; }
    .drv-chip-value { font-size:0.85rem; font-weight:800; color:#0f172a; margin-top:3px; }

    /* Stepper Pipeline */
    .drv-stepper { padding:8px 16px 16px; }
    .drv-stepper-title { font-size:0.7rem; font-weight:800; color:#64748b; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; display:flex; align-items:center; gap:6px; }
    .drv-stepper-title i { color:#d32f2f; }
    .drv-steps { display:flex; align-items:flex-start; gap:0; padding-bottom:12px; width:100%; overflow-x:auto; scroll-behavior:smooth; }
    .drv-steps::-webkit-scrollbar { height: 4px; }
    .drv-steps::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
    .drv-steps::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
    .drv-step { display:flex; flex-direction:column; align-items:center; flex: 0 0 auto; min-width: 68px; position:relative; }
    .drv-step-icon { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.6rem; z-index:2; transition:all 0.3s; flex-shrink:0; }
    .drv-step-icon.done { background:#059669; color:#fff; box-shadow:0 2px 6px rgba(5,150,105,0.3); }
    .drv-step-icon.active { background:#d32f2f; color:#fff; box-shadow:0 0 0 4px rgba(211,47,47,0.2); animation:drv-pulse 1.5s infinite; }
    .drv-step-icon.pending { background:#e5e7eb; color:#9ca3af; }
    @keyframes drv-pulse { 0%,100%{box-shadow:0 0 0 4px rgba(211,47,47,0.2)} 50%{box-shadow:0 0 0 8px rgba(211,47,47,0.1)} }
    .drv-step-label { font-size:0.6rem; font-weight:700; color:#94a3b8; margin-top:5px; text-align:center; line-height:1.2; }
    .drv-step-label.done { color:#059669; }
    .drv-step-label.active { color:#d32f2f; font-weight:800; }
    .drv-step-connector { position:absolute; top:15px; left:calc(50% + 15px); right:calc(-50% + 15px); height:3px; z-index:1; border-radius:2px; }
    .drv-step-connector.done { background:#059669; }
    .drv-step-connector.active { background:linear-gradient(90deg, #059669, #d32f2f); }
    .drv-step-connector.pending { background:#e5e7eb; }
    
    @media (min-width: 481px) {
        body.driver-mode #app { background: #1a1a1a; }
        body.driver-mode .app-content { background: #1a1a1a; padding: 2vh 0; display: flex; align-items: center; justify-content: center; flex-direction: row; }
        body.driver-mode .drv-app { width: 380px; height: 750px; max-height: 95vh; border-radius: 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); overflow: hidden; border: 14px solid #111; flex-shrink: 0; background: #fff; }
    }

    /* Action Button */
    .drv-action-area { padding:0 16px 16px; }
    .drv-action-btn { width:100%; padding:16px; border:none; border-radius:14px; font-size:0.95rem; font-weight:800; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; transition:all 0.2s; -webkit-tap-highlight-color:transparent; }
    .drv-action-btn.primary { background:#e53030; color:#fff; box-shadow:0 4px 15px rgba(229,48,48,0.25); border-radius:30px; }
    .drv-action-btn.primary:active { transform:scale(0.97); box-shadow:0 2px 8px rgba(211,47,47,0.2); }
    .drv-action-btn.completed { background:#e8f5e9; color:#2e7d32; cursor:default; }

    /* Bottom Nav */
    .drv-bottom-nav { position:absolute; bottom:0; left:0; right:0; background:#fff; display:flex; justify-content:space-around; align-items:center; height:65px; padding-bottom:env(safe-area-inset-bottom, 0px); box-shadow:0 -4px 30px rgba(0,0,0,0.03); z-index:100; border-top:1px solid #f1f5f9; }
    .drv-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; cursor:pointer; padding:6px 16px; border-radius:12px; transition:background 0.2s; -webkit-tap-highlight-color:transparent; }
    .drv-nav-item:active { background:#f5f5f5; }
    .drv-nav-item i { font-size:1.15rem; }
    .drv-nav-item span { font-size:0.65rem; font-weight:700; }
    .drv-nav-item.active i { color:#e53030; }
    .drv-nav-item.active span { color:#e53030; }
    .drv-nav-item:not(.active) i { color:#9ca3af; }
    .drv-nav-item:not(.active) span { color:#9ca3af; }

    /* Upload Modal (Android-style centered sheet) */
    .drv-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:9999; display:flex; align-items:center; justify-content:center; animation:drv-fade-in 0.2s; padding:20px; }
    .drv-modal-overlay.hidden { display:none; }
    @keyframes drv-fade-in { from{opacity:0} to{opacity:1} }
    .drv-bottom-sheet { background:#fff; border-radius:20px; width:100%; max-width:420px; max-height:85vh; overflow-y:auto; animation:drv-sheet-in 0.3s ease; box-shadow:0 20px 60px rgba(0,0,0,0.3); }
    @keyframes drv-sheet-in { from{transform:scale(0.9); opacity:0} to{transform:scale(1); opacity:1} }
    .drv-sheet-handle { width:40px; height:4px; background:#ddd; border-radius:2px; margin:12px auto 0; }
    .drv-sheet-header { padding:16px 20px 8px; display:flex; align-items:center; justify-content:space-between; }
    .drv-sheet-title { font-size:1.1rem; font-weight:800; color:#1a1a1a; }
    .drv-sheet-close { width:32px; height:32px; border:none; background:#f5f5f5; border-radius:50%; color:#666; font-size:0.9rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .drv-sheet-body { padding:0 20px 24px; }
    .drv-upload-zone { border:2px dashed #d1d5db; border-radius:14px; padding:24px; text-align:center; margin-top:12px; cursor:pointer; transition:all 0.2s; background:#fafafa; }
    .drv-upload-zone:active { border-color:#d32f2f; background:#fef2f2; }
    .drv-upload-zone i { font-size:2rem; color:#9ca3af; margin-bottom:8px; display:block; }
    .drv-upload-zone-text { font-size:0.85rem; font-weight:600; color:#6b7280; }
    .drv-upload-zone-sub { font-size:0.7rem; color:#9ca3af; margin-top:4px; }
    .drv-upload-preview { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
    .drv-upload-thumb { width:72px; height:72px; border-radius:10px; background:#f1f5f9; border:1px solid #e2e8f0; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
    .drv-upload-thumb img { width:100%; height:100%; object-fit:cover; }
    .drv-upload-thumb .drv-thumb-remove { position:absolute; top:2px; right:2px; width:18px; height:18px; border-radius:50%; background:rgba(0,0,0,0.6); color:#fff; border:none; font-size:0.55rem; cursor:pointer; display:flex; align-items:center; justify-content:center; }
    .drv-field-group { margin-top:16px; }
    .drv-field-label { font-size:0.75rem; font-weight:700; color:#4b5563; margin-bottom:6px; display:flex; align-items:center; gap:5px; }
    .drv-field-label i { color:#d32f2f; font-size:0.7rem; }
    .drv-field-input { width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:10px; font-size:0.9rem; outline:none; transition:border-color 0.2s; background:#fafafa; }
    .drv-field-input:focus { border-color:#d32f2f; box-shadow:0 0 0 3px rgba(211,47,47,0.1); }
    .drv-gps-box { background:#f0fdf4; border:1px solid #bbf7d0; border-radius:10px; padding:12px 14px; margin-top:12px; display:flex; align-items:center; gap:10px; }
    .drv-gps-box i { color:#16a34a; font-size:1.1rem; }
    .drv-gps-box-text { font-size:0.8rem; font-weight:600; color:#166534; }
    .drv-gps-box-coords { font-size:0.7rem; color:#4ade80; margin-top:2px; }
    .drv-sheet-submit { width:100%; padding:14px; background:#e53030; color:#fff; border:none; border-radius:30px; font-size:0.95rem; font-weight:800; margin-top:20px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }
    .drv-sheet-submit:active { transform:scale(0.98); }
    .drv-sheet-submit:disabled { background:#9ca3af; cursor:not-allowed; }

    /* No order state */
    .drv-empty-state { text-align:center; padding:60px 30px; }
    .drv-empty-state i { font-size:4rem; color:#e5e7eb; margin-bottom:16px; }
    .drv-empty-state h3 { font-size:1.1rem; font-weight:800; color:#6b7280; }
    .drv-empty-state p { font-size:0.85rem; color:#9ca3af; margin-top:6px; }

    /* Notification Panel */
    .drv-notif-panel { position:absolute; top:80px; right:16px; width:320px; max-width:calc(100% - 32px); background:#fff; border-radius:16px; box-shadow:0 12px 40px rgba(0,0,0,0.2); z-index:9998; animation:drv-sheet-in 0.2s ease; overflow:hidden; }
    .drv-notif-panel.hidden { display:none; }
    .drv-notif-panel-header { background:linear-gradient(135deg, #b71c1c, #d32f2f); padding:14px 16px; color:#fff; font-weight:800; font-size:0.9rem; display:flex; align-items:center; justify-content:space-between; }
    .drv-notif-panel-body { max-height:350px; overflow-y:auto; padding:8px; }
    .drv-notif-panel-body::-webkit-scrollbar { width:3px; }
    .drv-notif-panel-body::-webkit-scrollbar-thumb { background:#ddd; border-radius:2px; }
    .drv-notif-item { padding:12px; border-radius:12px; background:#fafafa; border:1px solid #f0f0f0; margin-bottom:6px; cursor:pointer; transition:background 0.2s; }
    .drv-notif-item:hover { background:#fef2f2; }
    .drv-notif-item.unread { background:#fef2f2; border-left:3px solid #d32f2f; }
    .drv-notif-item-title { font-size:0.8rem; font-weight:800; color:#1a1a1a; display:flex; align-items:center; gap:6px; }
    .drv-notif-item-title i { color:#d32f2f; font-size:0.7rem; }
    .drv-notif-item-sub { font-size:0.7rem; color:#64748b; margin-top:4px; line-height:1.4; }
    .drv-notif-item-time { font-size:0.6rem; color:#9ca3af; margin-top:4px; font-weight:600; }
    .drv-notif-empty { text-align:center; padding:30px; color:#9ca3af; font-size:0.85rem; }
    .drv-notif-count { position:absolute; top:0; right:0; min-width:18px; height:18px; background:#ffeb3b; color:#b71c1c; border-radius:9px; font-size:0.6rem; font-weight:900; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid #b71c1c; }

    


/* Mobile Responsive Sidebar Fix */
@media (max-width: 768px) {
    .app-body {
        position: relative;
    }
    .app-sidebar {
        position: absolute !important;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100% !important;
        z-index: 1000 !important;
        width: 240px !important;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(.4,0,.2,1) !important;
        box-shadow: 2px 0 20px rgba(0,0,0,0.5) !important;
    }
    .app-sidebar.expanded {
        transform: translateX(0);
    }
    .app-content {
        width: 100%;
        max-width: 100vw;
    }
    /* Dim background when sidebar is open */
    .mobile-overlay {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 999;
    }
    body.sidebar-mobile-open .mobile-overlay {
        display: block;
    }
}