:root {
  --bg-primary: #0d1117;
  --bg-secondary: #161b22;
  --bg-tertiary: #21262d;
  --bg-card: #1c2128;
  --bg-hover: #2d333b;
  --border: #30363d;
  --border-light: #21262d;
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-muted: #6e7681;
  --accent: #2563eb;
  --accent-light: #3b82f6;
  --accent-glow: rgba(37,99,235,0.15);
  --success: #16a34a;
  --success-light: #22c55e;
  --danger: #dc2626;
  --danger-light: #ef4444;
  --warning: #d97706;
  --warning-light: #f59e0b;
  --purple: #7c3aed;
  --purple-light: #8b5cf6;
  --cyan: #0891b2;
  --cyan-light: #06b6d4;
  --sidebar-w: 220px;        /* denser shell: was 260 */
  --header-h: 52px;          /* denser shell: was 60 */
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 4px 24px rgba(0,0,0,0.4);
  --transition: 0.22s ease;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

[data-theme="light"] {
  --bg-primary: #f0f2f5;
  --bg-secondary: #ffffff;
  --bg-tertiary: #f8fafc;
  --bg-card: #ffffff;
  --bg-hover: #f1f5f9;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #94a3b8;
  --accent-glow: rgba(37,99,235,0.08);
  --shadow: 0 4px 24px rgba(0,0,0,0.08);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg-primary);color:var(--text-primary);min-height:100vh;overflow-x:hidden;font-size:14px;line-height:1.6}
[data-theme="dark"] body{background:linear-gradient(180deg,rgba(15,23,42,0.96) 0%,rgba(10,14,23,1) 100%)}
[data-theme="light"] body{background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%)}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit}
:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.nav-item:focus-visible,.tab:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation-duration:0.01ms!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}}
input,select,textarea{font-family:inherit}
table{border-collapse:collapse;width:100%}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(148,163,184,0.08)}
::-webkit-scrollbar-thumb{background:rgba(100,116,139,0.5);border-radius:999px}
::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,0.7)}

.app-root, #app{display:flex;min-height:100vh;background:transparent;width:100%;min-width:0}
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);height:100vh;position:fixed;top:0;left:0;background:var(--bg-secondary);border-right:1px solid rgba(148,163,184,0.12);display:flex;flex-direction:column;z-index:100;transition:transform var(--transition),width var(--transition);overflow-y:auto;overflow-x:hidden;box-shadow:0 18px 60px rgba(0,0,0,0.18)}
.sidebar.collapsed{transform:translateX(-100%)}
.main{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh;transition:margin var(--transition);background:transparent;width:calc(100% - var(--sidebar-w));min-width:0}
.main.expanded{margin-left:0}
.header{height:var(--header-h);background:var(--bg-secondary);backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:90;box-shadow:0 10px 30px rgba(0,0,0,0.08)}
.content{flex:1;padding:18px;overflow-y:auto;min-height:calc(100vh - var(--header-h));min-width:0;width:100%}
.page{display:none}
.page.active{display:block}

.breadcrumbs{font-size:12px;color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.breadcrumbs span{display:inline-flex;align-items:center;gap:6px}
.breadcrumbs i{font-size:10px}

.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:20px;padding:14px;background:var(--bg-card);border:1px solid rgba(148,163,184,0.1);border-radius:16px;box-shadow: inset 0 1px 2px rgba(255,255,255,0.03);}
.filter-bar .form-control{max-width:220px;min-width:160px}

.quick-filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}
.quick-filters .filter-chip{padding:8px 14px;border-radius:999px;background:rgba(148,163,184,0.12);color:var(--text-primary);font-size:13px;border:1px solid transparent;cursor:pointer;transition:all var(--transition)}
.quick-filters .filter-chip:hover{background:rgba(148,163,184,0.2);border-color:rgba(148,163,184,0.2)}
.quick-filters .filter-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.fab{position:fixed;right:20px;bottom:24px;width:56px;height:56px;border-radius:50%;background:var(--accent);color:#fff;border:none;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 40px rgba(37,99,235,0.2);z-index:120;transition:transform var(--transition),box-shadow var(--transition)}
.fab:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(37,99,235,0.3)}

/* Ensure table action buttons float above FAB so they're clickable */
.actions-col{position:relative;z-index:130}

.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-heading{font-size:24px;font-weight:700;color:var(--text-primary)}
.page-subheading{font-size:13px;color:var(--text-muted);margin-top:4px}
.breadcrumbs{font-size:12px;color:var(--text-muted);margin-bottom:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.breadcrumbs span{display:inline-flex;align-items:center;gap:6px}
.breadcrumbs i{font-size:10px}

@media(max-width:1024px){
  .sidebar{width:220px;min-width:220px}
  .main{margin-left:220px}
  .header-search{max-width:260px}
}

@media(max-width:768px){
  .sidebar{position:fixed;transform:translateX(-100%);width:100%;min-width:100%;max-width:320px}
  .sidebar.mobile-open{transform:translateX(0)}
  .main{margin-left:0}
  .header{padding:0 14px}
  .header-search{flex:1;max-width:none}
  .content{padding:16px}
  .filter-bar{padding:12px}
  .page-header{margin-bottom:16px}
  .fab{right:16px;bottom:16px}
}
.sidebar-logo{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--accent),var(--purple));border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0}
.logo-text{font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.2}
.logo-sub{font-size:10px;color:var(--text-muted);font-weight:400}
.sidebar-nav{padding:12px 0;flex:1}
.nav-section{padding:6px 20px 4px;font-size:10px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.08em;margin-top:8px}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;color:var(--text-secondary);cursor:pointer;transition:all var(--transition);border-left:3px solid transparent;font-size:13px;font-weight:500;position:relative}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary)}
.nav-item.active{background:var(--accent-glow);color:var(--accent-light);border-left-color:var(--accent)}
.nav-icon{width:18px;text-align:center;font-size:14px;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:10px;padding:1px 6px;border-radius:10px;font-weight:700}
.sidebar-footer{padding:14px 20px;border-top:1px solid var(--border)}
.user-card{display:flex;align-items:center;gap:10px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--purple));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;flex-shrink:0}
.user-name{font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:10px;color:var(--text-muted);text-transform:capitalize}

.header-toggle{width:34px;height:34px;border:1px solid var(--border);background:transparent;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all var(--transition);flex-shrink:0}
.header-toggle:hover{background:var(--bg-hover);color:var(--text-primary)}
.header-search{flex:1;max-width:380px;display:flex;align-items:center;gap:8px;background:var(--bg-tertiary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 12px;transition:border-color var(--transition)}
.header-search:focus-within{border-color:var(--accent)}
.header-search input{background:none;border:none;outline:none;color:var(--text-primary);font-size:13px;width:100%}
.header-search input::placeholder{color:var(--text-muted)}
.header-search i{color:var(--text-muted);font-size:13px}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.header-btn{width:34px;height:34px;border:1px solid var(--border);background:transparent;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all var(--transition);position:relative}
.header-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.notif-dot{position:absolute;top:4px;right:4px;width:6px;height:6px;background:var(--danger);border-radius:50%;border:1px solid var(--bg-secondary)}
.page-title{font-size:15px;font-weight:600;color:var(--text-secondary)}

.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:500;border:1px solid transparent;transition:all var(--transition);white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-light);border-color:var(--accent-light);transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,0.3)}
.btn-secondary{background:var(--bg-tertiary);color:var(--text-primary);border-color:var(--border)}
.btn-secondary:hover{background:var(--bg-hover);border-color:var(--text-muted)}
.btn-success{background:var(--success);color:#fff;border-color:var(--success)}
.btn-success:hover{background:var(--success-light);filter:brightness(1.1)}
.btn-danger{background:transparent;color:var(--danger-light);border-color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-warning{background:var(--warning);color:#fff;border-color:var(--warning)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-icon{padding:7px;gap:0}

.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.card-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.card-actions{margin-left:auto;display:flex;gap:8px;align-items:center}
.card-body{padding:20px}

.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(4px);z-index:200;display:none;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);width:100%;max-width:700px;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow);animation:slideUp 0.2s ease}
.modal-lg{max-width:960px}
.modal-xl{max-width:1200px}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.modal-title{font-size:15px;font-weight:600}
.modal-close{margin-left:auto;background:none;border:none;color:var(--text-muted);font-size:18px;cursor:pointer;padding:2px 6px;border-radius:4px;transition:all var(--transition)}
.modal-close:hover{background:var(--bg-hover);color:var(--text-primary)}
.modal-body{padding:20px;overflow-y:auto;flex:1}
.modal-footer{padding:14px 20px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

.toast-container{position:fixed;bottom:20px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px;max-width:360px}
.toast{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow);animation:toastIn 0.3s ease;font-size:13px}
.toast.removing{animation:toastOut 0.3s ease forwards}
@keyframes toastIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes toastOut{to{transform:translateX(100%);opacity:0}}
.toast-icon{font-size:15px;flex-shrink:0}
.toast-success .toast-icon{color:var(--success-light)}
.toast-error .toast-icon{color:var(--danger-light)}
.toast-warning .toast-icon{color:var(--warning-light)}
.toast-info .toast-icon{color:var(--accent-light)}

.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.page-heading{font-size:20px;font-weight:700;color:var(--text-primary)}
.page-subheading{font-size:13px;color:var(--text-muted);margin-top:2px}
.section-divider{height:1px;background:var(--border);margin:24px 0}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.ml-auto{margin-left:auto}.mt-4{margin-top:16px}.mb-4{margin-bottom:16px}
.text-success{color:var(--success-light)}.text-danger{color:var(--danger-light)}.text-warning{color:var(--warning-light)}.text-muted{color:var(--text-muted)}.text-right{text-align:right}.font-mono{font-family:monospace}.font-bold{font-weight:700}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}

.checkbox-wrap{display:flex;align-items:center;gap:8px;cursor:pointer}
.checkbox-wrap input[type=checkbox]{width:15px;height:15px;accent-color:var(--accent);cursor:pointer}

.filter-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.filter-bar .form-control{max-width:180px}

.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted)}
.empty-state i{font-size:48px;margin-bottom:16px;display:block;opacity:0.4}
.empty-state p{font-size:14px}

.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);background-image:radial-gradient(circle at 20% 50%,rgba(37,99,235,0.06) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(124,58,237,0.06) 0%,transparent 50%)}
.auth-card{background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius);padding:40px;width:100%;max-width:420px;box-shadow:var(--shadow)}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-logo .logo-icon{width:52px;height:52px;margin:0 auto 12px;font-size:22px;border-radius:12px}
.auth-logo h1{font-size:22px;font-weight:700}
.auth-logo p{font-size:13px;color:var(--text-muted);margin-top:4px}
.role-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.role-btn{padding:10px 8px;border:1px solid var(--border);border-radius:var(--radius-sm);text-align:center;cursor:pointer;transition:all var(--transition);background:var(--bg-tertiary);font-size:12px;font-weight:600;color:var(--text-secondary)}
.role-btn:hover,.role-btn.active{border-color:var(--accent);background:var(--accent-glow);color:var(--accent-light)}
.role-btn i{display:block;font-size:18px;margin-bottom:5px}

/* ===== Tabs (Reports / Settlements) ===== */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{padding:10px 18px;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-secondary);font-size:13px;font-weight:600;white-space:nowrap;transition:all var(--transition)}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--accent-light);border-bottom-color:var(--accent)}
.tab-pane{display:none}
.tab-pane.active{display:block;animation:fadeIn 0.2s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* ===== Import drop zone ===== */
.drop-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:48px 24px;text-align:center;cursor:pointer;transition:all var(--transition);background:var(--bg-card);color:var(--text-secondary)}
.drop-zone:hover{border-color:var(--accent);background:var(--accent-glow)}
.drop-zone.dragover{border-color:var(--accent);background:var(--accent-glow);transform:scale(1.01)}
.drop-zone i{font-size:42px;color:var(--accent-light);margin-bottom:14px;display:block}
.drop-zone p{font-size:14px;margin:4px 0}
.drop-zone span{color:var(--accent-light);font-weight:600;text-decoration:underline}

/* ===== Audit log timeline ===== */
.audit-item{display:flex;gap:14px;padding:14px 4px;border-bottom:1px solid var(--border-light)}
.audit-item:last-child{border-bottom:none}
.audit-dot{width:10px;height:10px;border-radius:50%;margin-top:5px;flex-shrink:0;box-shadow:0 0 0 4px rgba(148,163,184,0.12)}
.audit-time{font-size:11px;color:var(--text-muted);margin-top:4px}

/* ===== View modal detail grid ===== */
.view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px 20px}
.view-grid-totals{margin-top:16px;padding-top:16px;border-top:1px solid var(--border)}
.view-row{display:flex;flex-direction:column;gap:2px}
.view-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.04em;font-weight:600}
.view-val{font-size:14px;color:var(--text-primary);font-weight:600}
.view-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin:20px 0 12px}

/* ===== Drag-to-pan + loading + sidebar backdrop ===== */
.table-wrap.dragging{cursor:grabbing;user-select:none}
.table-wrap.dragging *{cursor:grabbing!important}
.loading-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(13,17,23,0.4);backdrop-filter:blur(2px);z-index:20}
.spinner{width:34px;height:34px;border:3px solid rgba(148,163,184,0.25);border-top-color:var(--accent-light);border-radius:50%;animation:spin 0.7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99;opacity:0;visibility:hidden;transition:opacity var(--transition)}
.sidebar-backdrop.show{opacity:1;visibility:visible}

@media(max-width:768px){
  .sidebar{width:100%;transform:translateX(-100%)}
  .sidebar.mobile-open{transform:translateX(0)}
  .main{margin-left:0}
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .charts-grid{grid-template-columns:1fr}
  .form-grid-3,.form-grid-2{grid-template-columns:1fr}
  .grid-2,.grid-3{grid-template-columns:1fr}
  .content{padding:14px}
  .filter-bar{flex-direction:column;align-items:stretch}
  .filter-bar .form-control{max-width:100%;min-width:0;flex:1}
  .page-header{flex-direction:column;align-items:stretch}
  .page-header .flex{flex-wrap:wrap}
  .data-table--register{min-width:1100px}
  .table-wrap--register{max-height:calc(100vh - 260px)}
  /* On phones, freezing 4 columns would cover the screen — swipe horizontally instead */
  .data-table--register th:nth-child(-n+4),
  .data-table--register td:nth-child(-n+4){position:static;width:auto;min-width:0;max-width:none}
  .modal{max-width:100%}
  .view-grid{grid-template-columns:repeat(2,1fr)}
}
/* Phones: swap the wide register table for a compact card/list view */
@media(max-width:640px){
  .table-scroller{display:none}
  .trip-cards{display:flex}
  .pagination-footer{position:static}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .view-grid{grid-template-columns:1fr}
  .header-search{display:none}
  .content{padding:12px}
  .trip-card-grid{grid-template-columns:repeat(2,1fr)}
}

/* ===========================================================================
 * Searchable select (type-to-filter combobox) — searchable-select.js
 * ===========================================================================*/
.ss{position:relative;display:block}
select.ss-native{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0;pointer-events:none}
.ss-input{width:100%;padding-right:34px;cursor:text}
.ss-input::placeholder{color:var(--text-muted)}
.ss-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:.72rem;pointer-events:auto;cursor:pointer;transition:transform var(--transition)}
.ss.open .ss-caret{transform:translateY(-50%) rotate(180deg);color:var(--accent)}
.ss-menu{position:fixed;z-index:2000;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;box-shadow:0 18px 44px rgba(0,0,0,0.28);max-height:288px;overflow-y:auto;padding:6px;display:none;animation:ssIn .12s ease}
.ss-menu.show{display:block}
@keyframes ssIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.ss-opt{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:.9rem;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.ss-opt:hover,.ss-opt.hi{background:var(--bg-hover)}
.ss-opt.sel{font-weight:600;color:var(--accent)}
.ss-opt.sel::after{content:"\f00c";font-family:"Font Awesome 6 Free";font-weight:900;float:right;font-size:.72rem;opacity:.85}
.ss-empty{padding:12px;color:var(--text-muted);font-size:.86rem;text-align:center}
.ss-menu::-webkit-scrollbar{width:8px}
.ss-menu::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px}