*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Inter',sans-serif;background:#0f172a;color:#e2e8f0;min-height:100vh;}

/* LOGIN */
.login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0f172a,#312e81 50%,#4c1d95);z-index:1000;}
.login-box{background:#1e293b;padding:36px 32px;border-radius:16px;box-shadow:0 25px 80px rgba(0,0,0,0.5);width:360px;border:1px solid #334155;}
.login-logo{width:56px;height:56px;background:linear-gradient(135deg,#7c3aed,#a855f7);border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;color:#fff;margin-bottom:20px;letter-spacing:-1px;}
.login-box h1{font-size:22px;font-weight:800;margin-bottom:4px;}
.login-sub{font-size:13px;color:#94a3b8;margin-bottom:24px;}
.login-box label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#c4b5fd;margin-bottom:6px;margin-top:12px;}
.login-box input{width:100%;padding:10px 12px;background:#0f172a;border:1px solid #334155;border-radius:8px;color:#fff;font-size:14px;font-family:inherit;}
.login-box input:focus{outline:none;border-color:#7c3aed;}
.login-box button{width:100%;margin-top:20px;padding:11px;background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;}
.login-box button:hover{filter:brightness(1.1);}
.login-err{margin-top:10px;font-size:12px;color:#f87171;min-height:16px;}
.back-link{display:block;margin-top:18px;text-align:center;font-size:12px;color:#94a3b8;text-decoration:none;}
.back-link:hover{color:#c4b5fd;}

/* HEADER */
.dash-header{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:#1e293b;border-bottom:1px solid #334155;position:sticky;top:0;z-index:50;}
.dash-brand{display:flex;align-items:center;gap:12px;}
.dash-logo{width:40px;height:40px;background:linear-gradient(135deg,#7c3aed,#a855f7);border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:900;color:#fff;letter-spacing:-1px;}
.dash-title{font-size:16px;font-weight:800;}
.dash-sub{font-size:11px;color:#94a3b8;}
.dash-header-actions{display:flex;gap:8px;}
.btn-ghost{background:transparent;border:1px solid #334155;color:#e2e8f0;padding:8px 14px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-family:inherit;}
.btn-ghost:hover{background:#334155;border-color:#475569;}
.btn-primary{background:linear-gradient(135deg,#7c3aed,#a855f7);border:none;color:#fff;padding:9px 16px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;}
.btn-primary:hover{filter:brightness(1.1);}

/* STATS */
.stats-row{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;padding:20px 24px 12px;}
.stat-card{background:#1e293b;border:1px solid #334155;border-radius:10px;padding:14px 16px;}
.stat-card.stat-accent{border-color:#7c3aed;background:linear-gradient(135deg,rgba(124,58,237,0.15),rgba(168,85,247,0.08));}
.stat-label{font-size:11px;color:#94a3b8;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.stat-value{font-size:26px;font-weight:800;color:#fff;}
@media(max-width:1100px){.stats-row{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.stats-row{grid-template-columns:repeat(2,1fr);}}

/* CONTROLS */
.controls-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;flex-wrap:wrap;}
.tabs{display:inline-flex;background:#1e293b;border:1px solid #334155;border-radius:10px;overflow:hidden;}
.tab{background:transparent;border:none;color:#94a3b8;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px;}
.tab.active{background:#7c3aed;color:#fff;}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.filters select,.filters input{background:#1e293b;border:1px solid #334155;color:#e2e8f0;padding:8px 10px;border-radius:8px;font-size:12px;font-family:inherit;}
.filters select:focus,.filters input:focus{outline:none;border-color:#7c3aed;}
.filters input{width:200px;}

/* VIEW */
.view{padding:0 24px 24px;}
.table-wrap{background:#1e293b;border:1px solid #334155;border-radius:12px;overflow:hidden;}
.dash-table{width:100%;border-collapse:collapse;}
.dash-table thead{background:#0f172a;}
.dash-table th{text-align:left;padding:12px 14px;font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid #334155;white-space:nowrap;}
.dash-table td{padding:12px 14px;font-size:13px;border-bottom:1px solid #283548;}
.dash-table tbody tr{cursor:pointer;transition:background 0.12s;}
.dash-table tbody tr:hover{background:#273449;}
.dash-table tbody tr:last-child td{border-bottom:none;}
.pill{display:inline-block;padding:3px 9px;border-radius:10px;font-size:11px;font-weight:700;}
.pill-delivered{background:rgba(34,197,94,0.18);color:#4ade80;}
.pill-transit{background:rgba(245,158,11,0.18);color:#fbbf24;}
.pill-queued{background:rgba(100,116,139,0.25);color:#cbd5e1;}
.pill-returned{background:rgba(239,68,68,0.18);color:#fca5a5;}
.pill-scanned{background:rgba(168,85,247,0.2);color:#c4b5fd;}
.pill-nope{background:#334155;color:#94a3b8;}
.empty{padding:48px;text-align:center;color:#64748b;font-size:14px;}

/* MAP */
.map-wrap{position:relative;background:#1e293b;border:1px solid #334155;border-radius:12px;overflow:hidden;height:calc(100vh - 260px);min-height:500px;}
#dash-map{width:100%;height:100%;background:#0f172a;}
.map-legend{position:absolute;bottom:14px;left:14px;background:rgba(15,23,42,0.95);border:1px solid #334155;border-radius:10px;padding:10px 14px;display:flex;gap:14px;flex-wrap:wrap;font-size:11px;}
.legend-item{display:flex;align-items:center;gap:6px;color:#cbd5e1;}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;}

/* DRAWER */
.drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:90;display:none;}
.drawer-backdrop.open{display:block;}
.detail-drawer{position:fixed;top:0;right:-520px;width:520px;max-width:100vw;height:100vh;background:#1e293b;border-left:1px solid #334155;z-index:100;transition:right 0.22s ease;overflow-y:auto;}
.detail-drawer.open{right:0;}
.detail-header{display:flex;justify-content:space-between;align-items:flex-start;padding:18px 22px;border-bottom:1px solid #334155;position:sticky;top:0;background:#1e293b;z-index:5;}
.detail-title{font-size:16px;font-weight:800;margin-bottom:2px;}
.detail-sub{font-size:12px;color:#94a3b8;}
.detail-body{padding:18px 22px 60px;}
.detail-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #283548;font-size:13px;}
.dlabel{color:#94a3b8;font-weight:500;}
.dval{color:#fff;font-weight:600;}
.detail-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:#c4b5fd;margin-top:20px;margin-bottom:10px;}
.detail-preview{background:#0f172a;border:1px solid #334155;border-radius:8px;padding:20px;min-height:120px;display:flex;align-items:center;justify-content:center;}
.preview-placeholder{color:#64748b;font-size:12px;text-align:center;}
.detail-timeline{display:flex;flex-direction:column;gap:10px;}
.timeline-item{display:flex;gap:12px;font-size:12px;}
.tl-dot{width:10px;height:10px;border-radius:50%;background:#7c3aed;margin-top:4px;flex-shrink:0;}
.tl-content{flex:1;}
.tl-title{color:#fff;font-weight:600;}
.tl-date{color:#64748b;font-size:11px;}
.detail-body textarea{width:100%;background:#0f172a;border:1px solid #334155;border-radius:8px;color:#fff;padding:10px;min-height:70px;font-family:inherit;font-size:13px;resize:vertical;}
.detail-body textarea:focus{outline:none;border-color:#7c3aed;}
.detail-actions{display:flex;gap:8px;margin-top:16px;}

/* RESPONSIVE */
@media(max-width:768px){
  .filters input{width:140px;}
  .stats-row{padding:14px;}
  .view{padding:0 14px 14px;}
  .controls-bar{padding:10px 14px;}
  .dash-header{padding:12px 14px;}
}

/* =========== FILTER POPOVER =========== */
.filter-wrap{position:relative;display:inline-block;}
.filter-count{background:#7c3aed;color:#fff;border-radius:10px;padding:1px 7px;font-size:10px;font-weight:800;margin-left:2px;display:none;}
.filter-count.active{display:inline-block;}
.filter-pop{display:none;position:absolute;top:calc(100% + 8px);right:0;background:#1e293b;border:1px solid #334155;border-radius:12px;padding:16px;width:280px;box-shadow:0 20px 50px rgba(0,0,0,0.5);z-index:60;}
.filter-pop.open{display:block;}
.fp-title{font-size:13px;font-weight:700;color:#fff;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #334155;}
.filter-pop label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:#c4b5fd;margin:10px 0 4px;}
.filter-pop select{width:100%;background:#0f172a;border:1px solid #334155;color:#e2e8f0;padding:8px 10px;border-radius:8px;font-size:12px;font-family:inherit;}
.fp-actions{display:flex;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid #334155;}
.fp-actions button{flex:1;}

/* Filter chips row */
.filter-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 24px 8px;}
.filter-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(124,58,237,0.18);border:1px solid rgba(124,58,237,0.4);color:#c4b5fd;padding:4px 10px;border-radius:14px;font-size:11px;font-weight:600;}
.filter-chip button{background:transparent;border:none;color:#c4b5fd;cursor:pointer;font-size:14px;padding:0;line-height:1;}
.filter-chip button:hover{color:#fff;}

/* =========== SPLIT PANE =========== */
.view-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:flex-start;}
.split-left .table-wrap{max-height:calc(100vh - 280px);overflow-y:auto;}
.split-left .dash-table thead{position:sticky;top:0;z-index:2;}
.split-right{background:#1e293b;border:1px solid #334155;border-radius:12px;min-height:calc(100vh - 280px);max-height:calc(100vh - 280px);overflow-y:auto;position:sticky;top:92px;}
.detail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;padding:40px;text-align:center;color:#64748b;min-height:300px;}
.de-title{font-size:15px;font-weight:700;color:#cbd5e1;margin-top:12px;}
.de-sub{font-size:12px;color:#64748b;margin-top:4px;max-width:260px;}

/* Selected row */
.dash-table tbody tr.selected{background:rgba(124,58,237,0.15);border-left:3px solid #7c3aed;}
.dash-table tbody tr.selected td:first-child{padding-left:11px;}

/* Detail pane (inside split-right) */
.detail-pane{display:none;}
.detail-pane.active{display:block;}
.detail-pane .detail-header{display:flex;justify-content:space-between;align-items:flex-start;padding:16px 20px;border-bottom:1px solid #334155;position:sticky;top:0;background:#1e293b;z-index:3;}
.detail-pane .detail-body{padding:16px 20px 40px;}
.detail-pane .detail-body textarea{width:100%;background:#0f172a;border:1px solid #334155;border-radius:8px;color:#fff;padding:10px;min-height:70px;font-family:inherit;font-size:13px;resize:vertical;}
.detail-pane .detail-body textarea:focus{outline:none;border-color:#7c3aed;}
.detail-pane .detail-actions{display:flex;gap:8px;margin-top:16px;}
.notes-saved{font-size:10px;color:#4ade80;margin-left:8px;opacity:0;transition:opacity 0.3s;}
.notes-saved.show{opacity:1;}

/* Narrow screens: revert to drawer pattern */
@media(max-width:900px){
  .view-split{grid-template-columns:1fr;}
  .split-right{position:fixed;top:0;right:-520px;width:520px;max-width:100vw;height:100vh;z-index:100;border-radius:0;border-left:1px solid #334155;transition:right 0.22s ease;max-height:100vh;min-height:100vh;}
  .split-right.mobile-open{right:0;}
  .drawer-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:90;}
  .drawer-backdrop.open{display:block;}
  .split-left .table-wrap{max-height:none;}
}
@media(min-width:901px){
  .drawer-backdrop{display:none !important;}
}

/* Hide original Actions column on narrow */
@media(max-width:640px){
  .dash-table th:nth-child(4),.dash-table td:nth-child(4){display:none;}
}