/* CargoTrack v2 — Dark Industrial Theme */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0d0d1a;--surface:#161628;--surface2:#1e1e36;--border:#2a2a4a;
  --text:#e2e8f0;--text-muted:#6b7280;--text-dim:#9ca3af;
  --primary:#4f46e5;--primary-light:#6366f1;--accent:#7c3aed;
  --green:#16a34a;--green-light:#4ade80;--red:#dc2626;--red-light:#f87171;
  --yellow:#d97706;--yellow-light:#fbbf24;--blue:#2563eb;
  --sidebar-w:220px;
}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;display:flex;overflow-x:hidden}

/* ── Sidebar ── */
.sidebar{width:var(--sidebar-w);min-height:100vh;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:100;transition:transform .3s}
.sidebar-logo{padding:20px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.logo-icon{width:40px;height:40px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.logo-title{font-size:16px;font-weight:800;color:#fff}
.logo-sub{font-size:10px;color:var(--text-muted)}
.sidebar-nav{flex:1;padding:12px 8px;overflow-y:auto}
.nav-section{font-size:10px;font-weight:700;color:var(--text-muted);padding:12px 8px 4px;letter-spacing:1px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--text-dim);text-decoration:none;font-size:13px;font-weight:500;transition:all .15s;margin-bottom:2px}
.nav-item:hover{background:var(--surface2);color:var(--text)}
.nav-item.active{background:linear-gradient(90deg,rgba(79,70,229,.2),transparent);color:#a5b4fc;border-left:3px solid var(--primary)}
.nav-icon{font-size:15px;width:20px;text-align:center}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border)}
.user-badge{display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;flex-shrink:0}
.user-name{font-size:13px;font-weight:600;color:var(--text)}
.user-role{font-size:11px;color:var(--text-muted);max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.logout-btn{margin-left:auto;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:16px;padding:4px;border-radius:6px;transition:color .2s}
.logout-btn:hover{color:var(--red-light)}

/* ── Main ── */
.main-wrap{margin-left:var(--sidebar-w);flex:1;min-height:100vh;display:flex;flex-direction:column}
.topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:12px 24px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:50}
.menu-btn{background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;display:none}
.search-wrap{flex:1;max-width:500px;position:relative}
.search-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:9px 14px;color:var(--text);font-size:13px;outline:none;transition:border-color .2s}
.search-input:focus{border-color:var(--primary)}
.search-results{position:absolute;top:calc(100%+6px);left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:10px;z-index:200;display:none;max-height:320px;overflow-y:auto;box-shadow:0 8px 32px rgba(0,0,0,.4)}
.search-item{padding:10px 16px;cursor:pointer;transition:background .15s;display:flex;flex-direction:column;gap:2px}
.search-item:hover{background:var(--surface2)}
.search-item strong{font-size:13px;color:var(--text)}
.search-item span{font-size:11px;color:var(--text-muted)}
.topbar-right{display:flex;gap:10px;margin-left:auto}
.content{flex:1;padding:24px}

/* ── Pages ── */
.page{display:none}
.page.active{display:block}
.page-header{display:flex;align-items:center;gap:16px;margin-bottom:24px;flex-wrap:wrap}
.page-header h1{font-size:22px;font-weight:800;flex:1}
.date-badge{background:var(--surface2);border:1px solid var(--border);padding:5px 14px;border-radius:20px;font-size:12px;color:var(--text-muted)}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.card-header h3{font-size:14px;font-weight:700;color:var(--text)}

/* ── Stats ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;position:relative;overflow:hidden}
.stat-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(79,70,229,.08),transparent);pointer-events:none}
.stat-card.loaded::before{background:linear-gradient(135deg,rgba(22,163,74,.1),transparent)}
.stat-card.revenue::before{background:linear-gradient(135deg,rgba(124,58,237,.1),transparent)}
.stat-icon{font-size:22px;margin-bottom:10px}
.stat-value{font-size:26px;font-weight:900;color:#fff;line-height:1.1}
.stat-value small{font-size:14px;color:var(--text-muted);font-weight:500}
.stat-label{font-size:11px;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.5px}

/* ── Dashboard Grid ── */
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.list-row{padding:12px 16px;border-bottom:1px solid var(--border);transition:background .15s}
.list-row:hover{background:var(--surface2)}
.list-row:last-child{border-bottom:none}
.text-sm{font-size:12px;margin-top:2px}
.text-muted{color:var(--text-muted)}
.text-green{color:var(--green-light)}
.text-red{color:var(--red-light)}
.empty-state{padding:32px;text-align:center;color:var(--text-muted);font-size:13px}

/* ── Table ── */
.table{width:100%;border-collapse:collapse;font-size:13px}
.table th{padding:10px 16px;text-align:left;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;background:var(--surface2);border-bottom:1px solid var(--border)}
.table td{padding:11px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tr:hover td{background:rgba(255,255,255,.02)}
.table tr:last-child td{border-bottom:none}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;background:var(--surface2);color:var(--text-muted);border:1px solid var(--border)}
.badge-draft{background:rgba(107,114,128,.15);color:#9ca3af;border-color:#374151}
.badge-received{background:rgba(37,99,235,.15);color:#93c5fd;border-color:#1e40af}
.badge-in_warehouse,.badge-in_progress{background:rgba(234,179,8,.15);color:#fcd34d;border-color:#854d0e}
.badge-ready_for_loading,.badge-loading{background:rgba(234,88,12,.15);color:#fdba74;border-color:#9a3412}
.badge-partially_loaded{background:rgba(124,58,237,.15);color:#c4b5fd;border-color:#5b21b6}
.badge-loaded{background:rgba(22,163,74,.15);color:#86efac;border-color:#14532d}
.badge-departed,.badge-delivered{background:rgba(16,185,129,.15);color:#6ee7b7;border-color:#065f46}
.badge-cancelled{background:rgba(220,38,38,.15);color:#fca5a5;border-color:#7f1d1d}
.badge-pending{background:rgba(217,119,6,.15);color:#fcd34d;border-color:#78350f}
.badge-partial{background:rgba(124,58,237,.15);color:#c4b5fd;border-color:#5b21b6}
.badge-paid{background:rgba(22,163,74,.15);color:#86efac;border-color:#14532d}
.badge-valid,.badge-active{background:rgba(22,163,74,.15);color:#86efac;border-color:#14532d}
.badge-duplicate{background:rgba(220,38,38,.15);color:#fca5a5;border-color:#7f1d1d}
.badge-unknown{background:var(--surface2);color:var(--text-muted)}
.mark-badge{display:inline-flex;align-items:center;background:rgba(79,70,229,.2);color:#a5b4fc;border:1px solid rgba(79,70,229,.4);padding:2px 10px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.5px}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:10px;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all .2s;text-decoration:none}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#fff}
.btn-primary:hover{opacity:.88}
.btn-outline{background:transparent;border:1px solid var(--border);color:var(--text-dim)}
.btn-outline:hover{border-color:var(--primary);color:var(--primary-light);background:rgba(79,70,229,.08)}
.btn-success{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff}
.btn-danger{background:transparent;border:1px solid rgba(220,38,38,.4);color:var(--red-light)}
.btn-danger:hover{background:rgba(220,38,38,.15)}
.btn-sm{padding:5px 12px;font-size:11px;border-radius:7px}
.btn-lg{padding:12px 28px;font-size:15px}
.action-btns{display:flex;gap:6px;flex-wrap:wrap}

/* ── Filter Bar ── */
.filter-bar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.filter-btn{background:var(--surface);border:1px solid var(--border);color:var(--text-dim);padding:6px 16px;border-radius:20px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}
.filter-btn.active{background:rgba(79,70,229,.2);border-color:var(--primary);color:#a5b4fc}
.filter-btn:hover{border-color:var(--primary-light);color:var(--text)}

/* ── Job Detail ── */
.job-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.detail-list{padding:4px 0}
.detail-row{display:flex;justify-content:space-between;align-items:center;padding:10px 20px;border-bottom:1px solid var(--border);font-size:13px}
.detail-row:last-child{border-bottom:none}
.detail-row span:first-child{color:var(--text-muted)}
.cartons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;padding:16px}
.carton-chip{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 14px}
.carton-chip.loaded{border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.05)}
.carton-serial{font-size:11px;font-weight:700;font-family:monospace;color:var(--text)}
.carton-info{font-size:10px;color:var(--text-muted);margin-top:2px}
.carton-status{font-size:11px;margin-top:4px}
.status-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* ── Scanner ── */
.scan-layout{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.scan-card h3{padding:16px 20px;border-bottom:1px solid var(--border);font-size:14px;font-weight:700}
.scan-input-wrap{display:flex;gap:10px;padding:20px}
.scan-input{flex:1;background:var(--surface2);border:2px solid var(--border);border-radius:12px;padding:14px 18px;color:var(--text);font-size:16px;font-family:monospace;outline:none;transition:border-color .2s}
.scan-input:focus{border-color:var(--primary)}
.scan-result{padding:16px 20px}
.scan-ok{background:rgba(22,163,74,.1);border:1px solid rgba(22,163,74,.3);border-radius:12px;padding:20px;text-align:center}
.scan-dup{background:rgba(217,119,6,.1);border:1px solid rgba(217,119,6,.3);border-radius:12px;padding:20px;text-align:center}
.scan-unk{background:rgba(107,114,128,.1);border:1px solid rgba(107,114,128,.3);border-radius:12px;padding:20px;text-align:center}
.scan-result-icon{font-size:40px;margin-bottom:8px}
.scan-result-msg{font-size:18px;font-weight:700}
.scan-result-detail{font-size:13px;color:var(--text-muted);margin-top:6px}
.scan-history{padding:8px}
.scan-history-row{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:12px;margin-bottom:4px}
.scan-history-row.valid{background:rgba(22,163,74,.08)}
.scan-history-row.duplicate{background:rgba(217,119,6,.08)}
.scan-history-row.unknown_qr{background:rgba(107,114,128,.08)}

/* ── Queue ── */
.queue-wrap{}

/* ── Reports ── */
.reports-grid{display:grid;gap:16px}
.report-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:16px}
.report-stat{text-align:center;padding:16px;background:var(--surface2);border-radius:10px}
.report-stat-val{font-size:22px;font-weight:800;color:#fff;margin-bottom:4px}
.form-input{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-size:13px;outline:none}
.form-input:focus{border-color:var(--primary)}

/* ── Modals ── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:18px;width:100%;max-width:520px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-lg{max-width:720px}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.modal-header h2{font-size:17px;font-weight:800}
.modal-close{background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s}
.modal-close:hover{background:var(--surface2);color:var(--text)}
.modal-body{padding:20px 24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}

/* ── Forms ── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group.form-full{grid-column:1/-1}
.form-group label{font-size:12px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.3px}
.form-group input,.form-group select,.form-group textarea{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-size:13px;outline:none;transition:border-color .2s;font-family:inherit}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary)}
.form-group select option{background:var(--surface)}
.cbm-preview{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-size:13px;color:var(--text-muted)}

/* ── Toast ── */
.toast{position:fixed;bottom:24px;right:24px;background:var(--surface);border:1px solid var(--border);padding:12px 20px;border-radius:12px;font-size:13px;font-weight:600;color:var(--text);box-shadow:0 8px 32px rgba(0,0,0,.4);transform:translateY(100px);opacity:0;transition:all .3s;z-index:9999;max-width:320px}
.toast.show{transform:translateY(0);opacity:1}
.toast.toast-success{border-color:rgba(22,163,74,.5);background:rgba(22,163,74,.12);color:var(--green-light)}
.toast.toast-error{border-color:rgba(220,38,38,.5);background:rgba(220,38,38,.12);color:var(--red-light)}

/* ── Responsive ── */
@media(max-width:1024px){
  .dash-grid{grid-template-columns:1fr}
  .job-detail-grid{grid-template-columns:1fr}
  .scan-layout{grid-template-columns:1fr}
  .report-stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-wrap{margin-left:0}
  .menu-btn{display:block}
  .stats-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .form-group.form-full{grid-column:1}
}



/* ===== MOBILE RESPONSIVE - CargoTrack ===== */

/* --- Sidebar overlay (backdrop when sidebar open on mobile) --- */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.55);
  z-index: 99;
}
.sidebar-overlay.active { display: block; }

/* --- Desktop: menu-btn hidden --- */
.menu-btn { display: none; }

/* ===== TABLET 1024px ===== */
@media (max-width: 1024px) {
  :root { --sidebar-w: 200px; }
  .content { padding: 16px; }
}

/* ===== MOBILE 768px ===== */
@media (max-width: 768px) {
  :root { --sidebar-w: 260px; }

  /* --- Hamburger button visible on mobile --- */
  .menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text);
    font-size: 22px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 8px;
    flex-shrink: 0;
    margin-right: 4px;
  }
  .menu-btn:hover { background: var(--surface2); }

  /* --- Sidebar: slide off-screen by default, slide in on open --- */
  .sidebar {
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    z-index: 100 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    width: var(--sidebar-w) !important;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.4) !important;
  }

  /* --- Main wrap: no left margin on mobile --- */
  .main-wrap {
    margin-left: 0 !important;
    width: 100% !important;
  }

  /* --- Topbar: compact for mobile --- */
  .topbar {
    padding: 8px 12px !important;
    gap: 8px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
  }
  .search-wrap {
    flex: 1 !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .topbar-right {
    flex-shrink: 0;
  }
  .topbar-right .btn-primary {
    font-size: 12px !important;
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  /* --- Content area --- */
  .content {
    padding: 12px !important;
  }

  /* --- Page header --- */
  .page-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
  }
  .page-header h1 { font-size: 18px !important; }

  /* --- Stats grid: 2 columns --- */
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .stat-value { font-size: 20px !important; }

  /* --- Dashboard grid: single column --- */
  .dash-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* --- Cards --- */
  .card {
    border-radius: 10px !important;
    padding: 14px !important;
  }
  .card-header {
    padding: 12px 16px !important;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* --- Tables: horizontal scroll --- */
  .table-wrap, .card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    font-size: 13px !important;
  }
  th, td {
    padding: 8px 10px !important;
    white-space: nowrap;
  }

  /* --- Filter bar --- */
  .filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    margin-bottom: 12px !important;
  }
  .filter-btn {
    font-size: 12px !important;
    padding: 6px 12px !important;
  }

  /* --- Forms: single column --- */
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .form-group { margin-bottom: 0 !important; }
  .form-full { grid-column: span 1 !important; }
  input, select, textarea {
    font-size: 16px !important;
    padding: 10px 12px !important;
  }

  /* --- Modals: full screen on mobile --- */
  .modal-overlay {
    padding: 0 !important;
    align-items: flex-end !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 92vh !important;
    overflow-y: auto !important;
  }
  .modal-header {
    padding: 16px !important;
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 1;
  }
  .modal-body { padding: 16px !important; }
  .modal-footer {
    padding: 12px 16px !important;
    position: sticky;
    bottom: 0;
    background: var(--surface);
  }

  /* --- Buttons --- */
  .btn, button.btn {
    font-size: 14px !important;
    padding: 10px 16px !important;
  }
  .btn-sm {
    font-size: 12px !important;
    padding: 6px 10px !important;
  }

  /* --- Job detail panel --- */
  .job-info-grid, .info-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  /* --- Reports page --- */
  .reports-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* --- Packing list --- */
  #plModal > div {
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    min-height: 100vh !important;
  }
  #plContent .info-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* --- QR Scanner --- */
  #qr-reader { width: 100% !important; }

  /* --- Headings --- */
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
  h3 { font-size: 15px !important; }
}

/* ===== SMALL MOBILE 480px ===== */
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .stat-card { padding: 14px !important; }
  .stat-value { font-size: 18px !important; }
  .stat-label { font-size: 10px !important; }

  /* Dashboard grid: single col */
  .dash-grid, .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Packing list single col */
  #plContent .info-grid,
  #plContent > div > div:first-of-type {
    grid-template-columns: 1fr 1fr !important;
  }

  .sign-grid {
    grid-template-columns: 1fr !important;
  }

  /* Topbar: hide search on very small screens */
  .search-wrap { display: none !important; }
  .topbar { justify-content: space-between !important; }

  /* Very small buttons */
  .topbar-right .btn-primary {
    font-size: 11px !important;
    padding: 7px 8px !important;
  }

  table { font-size: 12px !important; }
  th, td { padding: 6px 8px !important; }
}

/* ── Permission Grid ─────────────────────────────── */
.perm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.perm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
  transition: background 0.15s, border-color 0.15s;
  user-select: none;
}
.perm-item:hover {
  background: var(--surface3, #2a2d3e);
  border-color: var(--primary);
}
.perm-item input[type="checkbox"] {
  accent-color: var(--primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}
.perm-item input[type="checkbox"]:checked + * {
  color: var(--primary);
  font-weight: 500;
}
@media (max-width: 600px) {
  .perm-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Driver Queue Card Layout ──────────────────────────── */
.queue-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.queue-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
  gap: 12px;
}
.queue-card:last-child { border-bottom: none; }
.queue-card:hover { background: var(--surface2); }

.queue-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  flex-wrap: wrap;
  min-width: 0;
}

.queue-card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}

.queue-number {
  font-weight: 700;
  font-size: 13px;
  color: var(--primary);
  white-space: nowrap;
}

.queue-card-driver {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  min-width: 100px;
}

.queue-mobile {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--surface2);
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

.queue-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.queue-card-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

.queue-card-actions .btn {
  white-space: nowrap;
}

.queue-card-done { opacity: 0.65; }
.queue-done-list .queue-card { padding: 10px 16px; }

/* Mobile: stack layout */
@media (max-width: 600px) {
  .queue-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
  }
  .queue-card-top {
    width: 100%;
    gap: 6px;
  }
  .queue-card-info { min-width: unset; }
  .queue-card-driver { min-width: unset; font-size: 15px; }
  .queue-card-meta { flex-wrap: wrap; }
  .queue-card-actions {
    width: 100%;
    flex-wrap: wrap;
  }
  .queue-card-actions .btn {
    flex: 1;
    text-align: center;
    min-width: 100px;
  }
}

/* Queue action anchor buttons */
.queue-card-actions a.btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/* QR Scanner mobile fix */
@media (max-width: 768px) {
  #page-scan .scan-layout {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  #page-scan .scan-card {
    padding: 14px !important;
  }
  #page-scan .scan-input-wrap {
    padding: 10px !important;
    gap: 8px !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
  }
  #page-scan .scan-input {
    font-size: 15px !important;
    padding: 14px 12px !important;
    min-width: 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
  }
  #page-scan .scan-input-wrap .btn {
    flex-shrink: 0 !important;
    padding: 14px 16px !important;
    font-size: 18px !important;
    white-space: nowrap !important;
    min-width: 52px !important;
  }
  #cameraVideo {
    max-height: 60vw !important;
    border-radius: 6px !important;
  }
  #page-scan .scan-result { padding: 12px !important; }
  #page-scan .scan-history { padding: 6px !important; }
  #page-scan .scan-card h3 { font-size: 13px; padding: 10px 14px; }
}

/* ======================================================
   REPORTS PAGE — MOBILE RESPONSIVE STYLES
   ====================================================== */

/* Report cards: stack vertically on mobile */
#reportsContent .card,
#dailyReportContent .card {
  margin-bottom: 16px;
}

/* Report tables: horizontal scroll on small screens */
#reportsContent table,
#dailyReportContent table,
#vesselReportResult table {
  font-size: 12px;
}

/* Vessel report control bar: stack on mobile */
#vesselReportResult {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Report summary stats — responsive grid */
.report-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}
.report-stat {
  min-width: 80px;
  flex: 1 1 80px;
}

@media (max-width: 600px) {
  /* Vessel/Barge Report card controls: stack vertically */
  #reportsContent .card-header + div[style*="flex"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #vesselReportSelect {
    min-width: 100% !important;
    width: 100% !important;
    font-size: 15px !important;
    padding: 12px !important;
  }
  /* Report export buttons: wrap nicely */
  .card-header div[style*="flex"] {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .card-header div[style*="flex"] button {
    flex: 1 1 auto !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
    white-space: nowrap !important;
  }
  /* Tables: horizontal scroll */
  #reportsContent .card > div,
  #vesselReportResult > div {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Revenue stats: 2 per row on phone */
  .report-stat {
    flex: 1 1 calc(50% - 10px) !important;
    min-width: 0 !important;
  }
  /* Vessel report job blocks: full width */
  #vesselReportResult [style*="border:1px solid"] {
    padding: 10px !important;
  }
  /* Vessel report summary row: wrap */
  #vesselReportResult [style*="display:flex;gap:24px"] {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  /* Report page heading font */
  #reportsContent .card-header h3 {
    font-size: 15px !important;
  }
}

@media (max-width: 400px) {
  /* Extra small phones */
  #reportsContent table th,
  #reportsContent table td,
  #vesselReportResult table th,
  #vesselReportResult table td {
    padding: 4px 5px !important;
    font-size: 11px !important;
  }
  .report-stat-val {
    font-size: 20px !important;
  }
}