/* ═══════════════════════════════════════════════════════════
   IzaEazy Design System v2 — Professional Mobile-First
   ═══════════════════════════════════════════════════════════ */

/* ── Reset & Base ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
:root {
  --bg:    #070C18;
  --bg2:   #0D1321;
  --bg3:   #131C2E;
  --bg4:   #192238;
  --bg5:   #1E2A42;
  --bg6:   #243350;

  --gold:  #F5A623; --gold2: #FBBF24; --gold3: #FCD34D;
  --teal:  #00D4AA; --teal2: #10B981; --teal3: #34D399;
  --blue:  #3B82F6; --blue2: #60A5FA;
  --red:   #EF4444; --red2:  #F87171;
  --purple:#8B5CF6; --purple2:#A78BFA;
  --orange:#F97316; --orange2:#FB923C;

  --text:  #F1F5F9; --text2: #94A3B8; --text3: #4B5E77; --text4: #2D3F5C;

  --border: #162032; --border2: #1E2D45; --border3: #253650;

  --r: 10px; --rl: 14px; --rxl: 18px; --rxxl: 24px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.4);
  --shadow:    0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.55);

  --sb-width: 240px;
  --topbar-h: 60px;
  --transition: all .18s cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', 'Inter', 'Segoe UI', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none }
button { cursor: pointer; font-family: inherit; border: none; -webkit-tap-highlight-color: transparent }
input, select, textarea { font-family: inherit; outline: none }
img { max-width: 100% }

/* ── Layout ── */
.app { display: flex; min-height: 100vh }

/* ── Sidebar ── */
.sidebar {
  width: var(--sb-width);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  overflow-y: auto;
  transform: translateX(0);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  scrollbar-width: thin;
  scrollbar-color: rgba(128,128,128,.35) transparent;
}
/* ── Scrollbars ── */
::-webkit-scrollbar { width: 8px; height: 8px }
::-webkit-scrollbar-track { background: rgba(0,0,0,.06); border-radius: 4px }
::-webkit-scrollbar-thumb { background: rgba(100,100,100,.45); border-radius: 4px; border: 2px solid transparent; background-clip: content-box }
::-webkit-scrollbar-thumb:hover { background: rgba(100,100,100,.75); border-radius: 4px; border: 2px solid transparent; background-clip: content-box }
::-webkit-scrollbar-corner { background: transparent }
/* Sidebar — lighter on dark bg */
.sidebar { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent }
.sidebar::-webkit-scrollbar { width: 6px }
.sidebar::-webkit-scrollbar-track { background: transparent }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; border: none }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.45) }
.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.65);
  z-index: 99;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.sidebar-overlay.show { display: block }

/* ── Main ── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--sb-width);
  transition: margin-left .28s cubic-bezier(.4,0,.2,1);
}

/* ── Topbar ── */
.topbar {
  height: var(--topbar-h);
  background: rgba(13,19,33,.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  flex-shrink: 0;
}
.topbar-left { display: flex; align-items: center; gap: 10px }
.menu-btn {
  display: none;
  width: 36px; height: 36px;
  border-radius: var(--r);
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.content { flex: 1; overflow-y: auto; padding: 20px }

/* ── Sidebar components ── */
.sb-head {
  padding: 14px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--bg3), var(--bg2));
}
.sb-logo {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; color: #000;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.sb-brand { font-size: 15px; font-weight: 800; letter-spacing: -.3px; line-height: 1.1 }
.sb-role-tag { font-size: 9px; color: var(--text3); letter-spacing: .5px; margin-top: 2px }

.sb-nav { flex: 1; padding: 8px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent }
.sb-nav::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: transparent }
::-webkit-scrollbar-thumb { background: rgba(128,128,128,.35); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: rgba(128,128,128,.6) }
.sb-sec {
  font-size: 9px; color: var(--text3);
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 12px 8px 5px;
  font-weight: 600;
}
.sb-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  border-radius: var(--r);
  font-size: 13px; color: var(--text2);
  background: none; border: none; width: 100%; text-align: left;
  transition: var(--transition);
  margin-bottom: 2px; cursor: pointer; white-space: nowrap;
  position: relative;
}
.sb-item:hover { background: var(--bg3); color: var(--text) }
.sb-item.active {
  background: linear-gradient(135deg, rgba(245,166,35,.14), rgba(245,166,35,.06));
  color: var(--gold); font-weight: 600;
  border: 1px solid rgba(245,166,35,.18);
}
.sb-item.active i { color: var(--gold) }
.sb-item i { font-size: 16px; width: 20px; flex-shrink: 0; color: var(--text3); transition: var(--transition) }
.sb-item:hover i { color: var(--text) }
.sb-badge {
  margin-left: auto; font-size: 9px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px; color: #000; flex-shrink: 0;
  min-width: 18px; text-align: center;
}

.sb-foot { padding: 10px; border-top: 1px solid var(--border); flex-shrink: 0 }
.sb-profile {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: var(--r); margin-bottom: 8px;
}
.sb-avatar {
  width: 32px; height: 32px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
}
.sb-pname { font-size: 12.5px; font-weight: 600; line-height: 1.2 }
.sb-prole { font-size: 10px; color: var(--text3) }
.sb-switch {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 8px;
  border-radius: var(--r);
  background: rgba(239,68,68,.07);
  color: var(--red2); font-size: 12px; font-weight: 500;
  border: 1px solid rgba(239,68,68,.2);
  transition: var(--transition); cursor: pointer;
}
.sb-switch:hover { background: rgba(239,68,68,.14) }
.sb-restrict {
  margin: 8px 8px 0;
  padding: 10px;
  background: rgba(239,68,68,.04);
  border: 1px solid rgba(239,68,68,.14);
  border-radius: var(--r);
  font-size: 11px; color: var(--text3); line-height: 2;
}
.sb-restrict i { color: var(--red); margin-right: 4px }

/* ── Topbar elements ── */
.tb-title { font-size: 16px; font-weight: 700; letter-spacing: -.2px }
.tb-right { display: flex; align-items: center; gap: 8px }
.live-pill {
  display: flex; align-items: center; gap: 5px;
  background: rgba(239,68,68,.1);
  padding: 5px 11px; border-radius: 20px;
  font-size: 11px; font-weight: 600; color: var(--red);
  border: 1px solid rgba(239,68,68,.2);
}
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: pulse 1.5s infinite }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.8)} }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border-radius: var(--r);
  font-size: 13px; font-weight: 600;
  cursor: pointer; border: 1px solid transparent;
  transition: var(--transition);
  font-family: inherit; white-space: nowrap;
  letter-spacing: -.1px;
}
.btn:active { transform: scale(.96) }
.btn-primary { background: var(--gold); color: #000; border-color: var(--gold); box-shadow: 0 2px 12px rgba(245,166,35,.3) }
.btn-primary:hover { background: var(--gold2); box-shadow: 0 4px 18px rgba(245,166,35,.4) }
.btn-teal { background: var(--teal); color: #000; border-color: var(--teal); box-shadow: 0 2px 12px rgba(0,212,170,.25) }
.btn-teal:hover { background: var(--teal2); box-shadow: 0 4px 18px rgba(0,212,170,.35) }
.btn-ghost { background: transparent; color: var(--text2); border-color: var(--border3) }
.btn-ghost:hover { background: var(--bg3); color: var(--text); border-color: var(--border2) }
.btn-danger { background: rgba(239,68,68,.1); color: var(--red); border-color: rgba(239,68,68,.3) }
.btn-danger:hover { background: rgba(239,68,68,.18) }
.btn-purple { background: rgba(139,92,246,.12); color: var(--purple); border-color: rgba(139,92,246,.3) }
.btn-purple:hover { background: rgba(139,92,246,.2) }
.btn-orange { background: rgba(249,115,22,.12); color: var(--orange); border-color: rgba(249,115,22,.3) }
.btn-orange:hover { background: rgba(249,115,22,.2) }
.btn-blue { background: rgba(59,130,246,.12); color: var(--blue); border-color: rgba(59,130,246,.3) }
.btn-blue:hover { background: rgba(59,130,246,.2) }
.btn-sm { padding: 5px 11px; font-size: 12px }
.btn-lg { padding: 13px 24px; font-size: 14.5px; font-weight: 700; border-radius: var(--rl) }
.btn-block { width: 100%; justify-content: center }
.btn-icon { padding: 8px; border-radius: var(--r); width: 36px; height: 36px }

/* ── Cards ── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 18px;
  margin-bottom: 14px;
  transition: border-color .2s;
}
.card:last-child { margin-bottom: 0 }
.card-hover:hover { border-color: var(--border3) }
.ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 8px }
.ct { font-size: 13.5px; font-weight: 600; display: flex; align-items: center; gap: 7px }

/* ── Stats ── */
.stats { display: grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap: 12px; margin-bottom: 18px }
.stat {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 16px 14px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.stat::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent,rgba(255,255,255,.015)); pointer-events:none }
.stat:hover { border-color: var(--border3); transform: translateY(-2px); box-shadow: var(--shadow) }
.stat-l { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; font-weight: 600 }
.stat-v { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.5px }
.stat-s { font-size: 11px; color: var(--text3); margin-top: 6px }

/* ── Badges ── */
.bdg { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .1px }
.bdg-paid     { background: rgba(16,185,129,.12); color: #10B981; border: 1px solid rgba(16,185,129,.2) }
.bdg-pending  { background: rgba(245,166,35,.12);  color: var(--gold);   border: 1px solid rgba(245,166,35,.2) }
.bdg-reserved { background: rgba(59,130,246,.12);  color: var(--blue);   border: 1px solid rgba(59,130,246,.2) }
.bdg-failed   { background: rgba(239,68,68,.12);   color: var(--red);    border: 1px solid rgba(239,68,68,.2) }
.bdg-refunded { background: rgba(139,92,246,.12);  color: var(--purple); border: 1px solid rgba(139,92,246,.2) }
.bdg-transit  { background: rgba(0,212,170,.12);   color: var(--teal);   border: 1px solid rgba(0,212,170,.2) }
.bdg-boarding { background: rgba(249,115,22,.12);  color: var(--orange); border: 1px solid rgba(249,115,22,.2) }
.bdg-scheduled{ background: rgba(100,116,139,.1);  color: var(--text2);  border: 1px solid var(--border2) }
.bdg-warn     { background: rgba(249,115,22,.12);  color: var(--orange); border: 1px solid rgba(249,115,22,.2) }
.bdg-active   { background: rgba(16,185,129,.12);  color: #10B981;       border: 1px solid rgba(16,185,129,.2) }

/* ── Tables ── */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r); border: 1px solid var(--border) }
table { width: 100%; border-collapse: collapse; min-width: 400px }
th { font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); background: var(--bg3); white-space: nowrap; font-weight: 600 }
td { padding: 11px 14px; font-size: 13px; border-bottom: 1px solid var(--border); vertical-align: middle }
tr:last-child td { border-bottom: none }
tr:hover td { background: rgba(255,255,255,.012) }
code { font-family: 'DM Mono','Courier New',monospace; color: var(--blue2); font-size: 11.5px; background: rgba(59,130,246,.08); padding: 1px 5px; border-radius: 4px }

/* ── Forms ── */
.fg { margin-bottom: 14px }
.fg:last-child { margin-bottom: 0 }
.fl { display: block; font-size: 10px; color: var(--text3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; font-weight: 600 }
.fc {
  width: 100%;
  background: var(--bg3);
  border: 1.5px solid var(--border2);
  color: var(--text);
  padding: 10px 13px;
  border-radius: var(--r);
  font-size: 13.5px;
  transition: var(--transition);
}
.fc:focus { border-color: var(--gold); background: var(--bg4); box-shadow: 0 0 0 3px rgba(245,166,35,.1) }
.fc::placeholder { color: var(--text3) }
select.fc option { background: var(--bg3) }
textarea.fc { resize: vertical; min-height: 75px }

/* ── Grid helpers ── */
.g2 { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px }
.g3 { display: grid; grid-template-columns: repeat(auto-fit,minmax(160px,1fr)); gap: 12px }
.g4 { display: grid; grid-template-columns: repeat(auto-fit,minmax(120px,1fr)); gap: 12px }

/* ── Progress ── */
.prog { height: 6px; background: var(--bg5); border-radius: 3px; overflow: hidden; margin-top: 5px }
.pf { height: 100%; border-radius: 3px; transition: width .5s ease }

/* ── Alerts ── */
.alert { padding: 11px 15px; border-radius: var(--r); font-size: 13px; display: flex; align-items: flex-start; gap: 9px; margin-bottom: 14px; line-height: 1.5 }
.alert i, .alert svg { flex-shrink: 0; margin-top: 1px }
.alert-warn    { background: rgba(245,166,35,.07); border: 1px solid rgba(245,166,35,.25); color: var(--gold2) }
.alert-success { background: rgba(16,185,129,.07); border: 1px solid rgba(16,185,129,.25); color: #34D399 }
.alert-info    { background: rgba(59,130,246,.07);  border: 1px solid rgba(59,130,246,.25);  color: var(--blue2) }
.alert-danger  { background: rgba(239,68,68,.07);  border: 1px solid rgba(239,68,68,.25);  color: var(--red2) }

/* ── Timeline ── */
.timeline { padding-left: 26px; position: relative }
.timeline::before { content:''; position:absolute; left:7px; top:6px; bottom:6px; width:2px; background:var(--border2); border-radius:1px }
.tl-item { position: relative; padding-bottom: 18px }
.tl-item:last-child { padding-bottom: 0 }
.tl-dot { position:absolute; left:-22px; width:16px; height:16px; border-radius:50%; border:2px solid var(--border2); background:var(--bg3); top:2px; transition:var(--transition) }
.tl-dot.done { background:var(--teal); border-color:var(--teal); box-shadow:0 0 0 3px rgba(0,212,170,.15) }
.tl-dot.now  { background:var(--gold); border-color:var(--gold); animation:pulse 1.5s infinite; box-shadow:0 0 0 3px rgba(245,166,35,.2) }
.tl-l { font-size: 13px; font-weight: 500 }
.tl-m { font-size: 11.5px; color: var(--text3); margin-top: 3px }

/* ── Toggle ── */
.toggle { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0 }
.toggle input { opacity:0; width:0; height:0 }
.tslider { position:absolute; inset:0; background:var(--bg5); border-radius:12px; transition:.3s; cursor:pointer; border:1px solid var(--border2) }
.tslider::before { content:''; position:absolute; height:16px; width:16px; left:3px; bottom:3px; background:var(--text3); border-radius:50%; transition:.3s }
.toggle input:checked + .tslider { background:var(--teal); border-color:var(--teal) }
.toggle input:checked + .tslider::before { transform:translateX(20px); background:#fff }

/* ── Modal ── */
.modal-bg { position:fixed; inset:0; background:rgba(0,0,0,.8); z-index:200; display:none; align-items:center; justify-content:center; padding:16px; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px) }
.modal {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--rxl);
  padding: 24px;
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-lg);
  animation: modalIn .22s cubic-bezier(.34,1.3,.64,1);
}
@keyframes modalIn { from{opacity:0;transform:scale(.94)translateY(10px)} to{opacity:1;transform:scale(1)translateY(0)} }
.modal-title { font-size: 16px; font-weight: 700; margin-bottom: 18px; display:flex; align-items:center; gap:9px; letter-spacing:-.2px }
.modal-x {
  position:absolute; top:16px; right:16px;
  background:var(--bg4); border:1px solid var(--border2);
  color:var(--text2); width:30px; height:30px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:16px; transition:var(--transition);
}
.modal-x:hover { color:var(--text); background:var(--bg5) }

/* ── OTP ── */
.otp-box { background:var(--bg3); border:2px dashed var(--gold); border-radius:var(--rl); padding:18px; text-align:center }
.otp-code { font-family:'DM Mono','Courier New',monospace; font-size:38px; font-weight:700; color:var(--gold); letter-spacing:10px }

/* ── Scan Zone ── */
.scan-zone {
  border: 2px dashed var(--border3);
  border-radius: var(--rxl);
  padding: 42px 24px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  background: rgba(255,255,255,.01);
}
.scan-zone:hover { border-color:var(--orange); background:rgba(249,115,22,.04) }
.scan-zone i { font-size:52px; color:var(--border3); display:block; margin-bottom:12px; transition:var(--transition) }
.scan-zone:hover i { color:var(--orange) }

/* ── Payment Methods ── */
.pay-method {
  border: 1.5px solid var(--border2);
  border-radius: var(--rl);
  padding: 14px;
  cursor: pointer;
  transition: var(--transition);
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 13px;
  background: var(--bg3);
}
.pay-method:hover { border-color:var(--border3); background:var(--bg4) }
.pay-method.on { border-color:var(--teal); background:rgba(0,212,170,.05); box-shadow:0 0 0 3px rgba(0,212,170,.08) }
.pm-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0 }

/* ── Progress Steps ── */
.step-bar { display:flex; align-items:center; margin-bottom:22px }
.step { flex:1; text-align:center; font-size:11px; color:var(--text3) }
.step.active { color:var(--gold); font-weight:600 }
.step.done { color:var(--teal) }
.step-dot { width:28px; height:28px; border-radius:50%; border:2px solid var(--border3); display:flex; align-items:center; justify-content:center; margin:0 auto 5px; font-size:11px; font-weight:600; background:var(--bg3); transition:var(--transition) }
.step.active .step-dot { border-color:var(--gold); background:var(--gold); color:#000; box-shadow:0 0 0 4px rgba(245,166,35,.2) }
.step.done .step-dot { border-color:var(--teal); background:var(--teal); color:#000 }
.step-line { height:2px; background:var(--border2); flex-shrink:0; width:20px; margin-bottom:20px; border-radius:1px }
.step-line.done { background:var(--teal) }

/* ── Bus Cards (passenger) ── */
.bus-card {
  background: var(--bg3);
  border: 1.5px solid var(--border2);
  border-radius: var(--rl);
  padding: 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}
.bus-card::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent,rgba(255,255,255,.02)); pointer-events:none }
.bus-card:hover { border-color:var(--border3); transform:translateY(-2px); box-shadow:var(--shadow) }
.bus-card.feat { border-color:rgba(245,166,35,.4); background:linear-gradient(135deg,rgba(245,166,35,.04),rgba(245,166,35,.01)) }
.bus-card.feat:hover { border-color:var(--gold); box-shadow:0 4px 24px rgba(245,166,35,.15) }
.feat-tag { background:var(--gold); color:#000; font-size:9px; font-weight:700; padding:2px 8px; border-radius:20px; letter-spacing:.5px; text-transform:uppercase }

/* ── Operator Cards ── */
.op-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:10px; margin-bottom:14px }
.op-card { border:1.5px solid var(--border2); border-radius:var(--rl); padding:14px; text-align:center; cursor:pointer; transition:var(--transition); background:var(--bg3) }
.op-card:hover { transform:translateY(-2px); border-color:var(--border3) }
.op-card.on { border-width:2px }
.op-logo { width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; color:#000; margin:0 auto 9px; box-shadow:var(--shadow-sm) }

/* ── Luggage Accordion ── */
.lug-accordion { border:1px solid var(--border2); border-radius:var(--rl); overflow:hidden; margin-top:12px }
.lug-header { display:flex; align-items:center; justify-content:space-between; padding:12px 15px; cursor:pointer; background:var(--bg3); transition:var(--transition); user-select:none }
.lug-header:hover { background:var(--bg4) }
.lug-body { display:none; padding:14px 15px; border-top:1px solid var(--border) }
.lug-body.open { display:block; animation:fadeIn .18s ease }
@keyframes fadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:translateY(0)} }
.lug-item { display:flex; align-items:center; gap:10px; padding:10px; background:var(--bg4); border-radius:var(--r); margin-bottom:8px; border:1px solid var(--border) }

/* ── Dispatch Card ── */
.dispatch-row { display:flex; align-items:center; gap:12px; padding:13px; background:var(--bg3); border-radius:var(--rl); margin-bottom:8px; border:1px solid var(--border); transition:var(--transition) }
.dispatch-row:hover { border-color:var(--border2) }
.dispatch-bus-id { font-family:'DM Mono','Courier New',monospace; font-size:12.5px; font-weight:700; color:var(--gold); min-width:74px }

/* ── Cash Card ── */
.cash-card { background:var(--bg3); border:1.5px solid var(--border2); border-radius:var(--rl); padding:15px; margin-bottom:10px }
.cash-card.done { border-color:rgba(0,212,170,.3); background:rgba(0,212,170,.03) }
.cash-card.rejected { border-color:rgba(239,68,68,.3); opacity:.6 }
.cash-collect-card { border:1.5px solid var(--border2); border-radius:var(--rl); padding:15px; margin-bottom:10px; background:var(--bg3) }
.cash-collect-card.done { border-color:rgba(0,212,170,.3); background:rgba(0,212,170,.03) }

/* ── Route Occupancy ── */
.occ-table { width:100%; border-collapse:collapse }
.occ-table th { font-size:10px; color:var(--text3); text-transform:uppercase; letter-spacing:1px; padding:8px 12px; border-bottom:1px solid var(--border); text-align:left }
.occ-table td { padding:10px 12px; font-size:13px; border-bottom:1px solid var(--border) }
.occ-table tr.highlight td { background:rgba(245,166,35,.06); color:var(--gold) }
.occ-bar { height:6px; background:var(--bg5); border-radius:3px; overflow:hidden; margin-top:4px; min-width:60px }
.occ-fill { height:100%; border-radius:3px }

/* ── Fraud Card ── */
.fraud-card { border:1px solid rgba(239,68,68,.25); background:rgba(239,68,68,.03); border-radius:var(--rl); padding:16px; margin-bottom:12px }

/* ── Seat Grid ── */
.seat-grid { background:var(--bg3); border-radius:var(--rl); padding:14px; border:1px solid var(--border) }
.seat { aspect-ratio:1; border-radius:7px; border:1.5px solid var(--border2); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; cursor:pointer; transition:var(--transition); background:var(--bg2); color:var(--text2) }
.seat.avail:hover,.seat.sel { background:var(--gold); border-color:var(--gold); color:#000; transform:scale(1.05); box-shadow:0 0 0 3px rgba(245,166,35,.2) }
.seat.taken { background:var(--bg5); border-color:var(--border); color:var(--text3); cursor:not-allowed; opacity:.45 }

/* ── Toast ── */
.toast {
  position: fixed;
  bottom: 24px; right: 20px;
  padding: 11px 18px;
  border-radius: var(--rl);
  font-size: 13.5px; font-weight: 500;
  z-index: 500; display: none;
  animation: toastIn .22s cubic-bezier(.34,1.3,.64,1);
  box-shadow: var(--shadow-lg);
  max-width: calc(100vw - 40px);
}
@keyframes toastIn { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:translateY(0)} }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:4px; height:4px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border2); border-radius:2px }

/* ── Pages ── */
.page { display:none }
.page.active { display:block; animation:fadeIn .18s ease }

/* ── Landing ── */
.portal-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; max-width:640px; width:100% }
.pcard { background:var(--bg2); border:1.5px solid var(--border); border-radius:var(--rxl); padding:26px 18px; text-align:center; cursor:pointer; transition:var(--transition); display:block; position:relative; overflow:hidden }
.pcard::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,transparent,rgba(255,255,255,.015)); pointer-events:none }
.pcard:hover { transform:translateY(-4px); box-shadow:var(--shadow) }
.pcard.p:hover,.pcard.p.active { border-color:#3B82F6 }
.pcard.c:hover,.pcard.c.active { border-color:#F97316 }
.pcard.s:hover,.pcard.s.active { border-color:#8B5CF6 }
.pcard.a:hover,.pcard.a.active { border-color:var(--gold) }
.pcard.p .picon { background:rgba(59,130,246,.12); color:#3B82F6 }
.pcard.c .picon { background:rgba(249,115,22,.12); color:#F97316 }
.pcard.s .picon { background:rgba(139,92,246,.12); color:#8B5CF6 }
.pcard.a .picon { background:rgba(245,166,35,.12); color:var(--gold) }
.picon { width:58px; height:58px; border-radius:16px; display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-size:26px }
.ptag { position:absolute; top:10px; right:10px; font-size:9px; font-weight:700; padding:2px 8px; border-radius:20px; letter-spacing:.5px }
.pcard.p .ptag { background:rgba(59,130,246,.12); color:#3B82F6 }
.pcard.c .ptag { background:rgba(249,115,22,.12); color:#F97316 }
.pcard.s .ptag { background:rgba(139,92,246,.12); color:#8B5CF6 }
.pcard.a .ptag { background:rgba(245,166,35,.12); color:var(--gold) }

/* ═══════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — full phone support
   ═══════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
  :root { --sb-width: 220px }
  .content { padding: 16px }
  .stats { grid-template-columns: repeat(2,1fr) }
}

/* Mobile — sidebar becomes drawer */
@media (max-width: 700px) {
  :root { --sb-width: 260px }

  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: translateX(0) }

  .main { margin-left: 0 }

  .menu-btn { display: flex }

  .topbar { padding: 0 14px }
  .tb-title { font-size: 15px }
  .live-pill { display: none }

  .content { padding: 14px }

  .stats { grid-template-columns: 1fr 1fr; gap: 10px }
  .stat { padding: 13px 12px }
  .stat-v { font-size: 22px }

  .g2, .g3, .g4 { grid-template-columns: 1fr }

  .card { padding: 14px; border-radius: var(--rl) }

  .modal { padding: 18px; max-height: 88vh }
  .modal-bg { padding: 10px; align-items: flex-end }
  .modal { border-radius: var(--rxl) var(--rxl) 0 0; max-width: 100%; max-height: 88vh }
  @keyframes modalIn { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }

  .tbl-wrap { border-radius: var(--r) }
  th, td { padding: 9px 10px; font-size: 12px }

  .toast { bottom: 80px; left: 14px; right: 14px; text-align: center }

  .btn-lg { padding: 12px 20px; font-size: 14px }

  .op-grid { grid-template-columns: repeat(2,1fr) }

  .portal-grid { grid-template-columns: 1fr }

  .step-bar { gap: 0 }
  .step { font-size: 10px }
  .step-dot { width: 24px; height: 24px; font-size: 10px }
}

/* Small mobile */
@media (max-width: 420px) {
  .stats { grid-template-columns: 1fr 1fr }
  .stat-v { font-size: 20px }
  .topbar { padding: 0 12px }
  .content { padding: 12px }
  .card { padding: 12px }
  .ch { margin-bottom: 12px }
  .btn { font-size: 12.5px; padding: 7px 13px }
  .btn-lg { padding: 11px 18px; font-size: 13.5px }
  .modal { padding: 16px }
}

/* ═══════════════════════════════════════════════════════════
   GIS / MAP COMPONENTS
   ═══════════════════════════════════════════════════════════ */
.map-container {
  border-radius: var(--rl);
  overflow: hidden;
  border: 1.5px solid var(--border2);
  background: var(--bg3);
  position: relative;
}
.map-container .leaflet-container {
  background: #0d1420;
  font-family: 'DM Sans', sans-serif;
}
/* Dark Leaflet tiles overlay */
.map-container::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  border-radius: var(--rl);
  box-shadow: inset 0 0 0 1.5px rgba(0,212,170,.15);
}
.stop-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 13px;
  background: var(--bg3);
  border: 1.5px solid var(--border2);
  border-radius: var(--r);
  margin-bottom: 7px;
  transition: all .15s;
  cursor: pointer;
}
.stop-chip.active  { border-color: var(--teal);   background: rgba(0,212,170,.06); }
.stop-chip.origin  { border-color: var(--gold);   background: rgba(245,166,35,.06); }
.stop-chip.dest    { border-color: var(--purple);  background: rgba(139,92,246,.06); }
.stop-chip.disabled{ opacity:.4; border-color:var(--border); }
.stop-seq {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; flex-shrink: 0;
  background: var(--bg4); color: var(--text3);
}
.stop-chip.active  .stop-seq { background:var(--teal);   color:#000; }
.stop-chip.origin  .stop-seq { background:var(--gold);   color:#000; }
.stop-chip.dest    .stop-seq { background:var(--purple);  color:#fff; }

.route-line {
  width: 2px; background: var(--border2); margin: 0 12px;
  height: 14px; flex-shrink: 0;
}
.geofence-badge {
  font-size: 10px; color: var(--text3);
  background: var(--bg4); padding: 2px 6px; border-radius: 10px;
  margin-left: auto; flex-shrink: 0;
}
.eta-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--rl);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.eta-approaching { border-color: rgba(0,212,170,.4); background: rgba(0,212,170,.05); }

/* ── Map containers ── */
.map-container, [id$="-map"]:not(.modal-bg):not(.modal) {
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg4);
  min-height: 200px;
}
/* Leaflet dark theme overrides */
.leaflet-container { background: #0D1321 !important; font-family: 'DM Sans',sans-serif }
.leaflet-popup-content-wrapper { background:var(--bg2);color:var(--text);border:1px solid var(--border2);border-radius:var(--r);box-shadow:var(--shadow) }
.leaflet-popup-tip { background:var(--bg2) }
.leaflet-popup-content { font-size:12px;line-height:1.5 }
.leaflet-bar a { background:var(--bg2);color:var(--text2);border-color:var(--border2) }
.leaflet-bar a:hover { background:var(--bg3);color:var(--text) }

/* ── Map label visibility boost ── */
.leaflet-tile-pane .leaflet-layer { filter: brightness(1.15) contrast(1.1); }
.leaflet-container .leaflet-layer img { image-rendering: auto; }
/* CartoDB dark — force label layer to be crisp white */
.map-tiles-bright { filter: brightness(1.2) contrast(1.15) saturate(0.9); }
/* Station name tooltips on map — always visible */
.leaflet-tooltip {
  background: rgba(0,0,0,.85) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 3px 7px !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
}
.leaflet-tooltip-top:before { border-top-color: rgba(0,0,0,.7) !important; }