/* Mobile-first dark UI */
:root{
  --bg:#0b0d10;
  --card:#12161c;
  --card2:#0f1318;
  --border:#202630;
  --muted:#9bb0c2;
  --text:#e9eef4;
  --warning:#f6c423;
  --chip:#1b222c;
}
html, body { height:100%; background:var(--bg); }
body { color:var(--text); }
.content{ padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
.app-shell{ min-height:100%; display:flex; flex-direction:column; }
.topbar{
  position:sticky; top:0; z-index:20;
  padding:12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top));
  border-bottom:1px solid var(--border);
  background:rgba(11,13,16,.85);
  backdrop-filter: blur(10px);
  display:flex; align-items:center; justify-content:space-between;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand-badge{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg, #1d2632, #12161c);
  border:1px solid var(--border);
  color:var(--warning);
}
.brand-title{ font-weight:700; letter-spacing:.2px; }
.brand-sub{ font-size:12px; color:var(--muted); margin-top:-2px; }
.content{ flex:1; padding:14px; max-width:980px; margin:0 auto; width:100%; }
.footer{ padding:14px; border-top:1px solid var(--border); text-align:center; }
.card-dark{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}
.muted{ color:var(--muted); }

/* Make form labels more readable in dark mode */
.form-label{ color:#c9d6e3; font-weight:600; letter-spacing:.15px; }
.form-check-label{ color:#c9d6e3; }
.form-control-dark, .form-select-dark{
  background:var(--card2) !important;
  border:1px solid var(--border) !important;
  color:var(--text) !important;
  border-radius:14px !important;
}
.form-control-dark:focus, .form-select-dark:focus{
  box-shadow:0 0 0 .2rem rgba(246,196,35,.15) !important;
  border-color:#3a4657 !important;
}
.filters-meta{ display:flex; flex-wrap:wrap; gap:8px; }
.meta-pill{
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card2);
  color:var(--muted);
  font-size:12px;
}

.booking-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  margin-bottom:12px;
}
.booking-card:active{ transform: scale(0.997); }
.booking-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.booking-time{ font-weight:700; }
.booking-zone{ font-size:12px; color:var(--muted); }
.badge-alloc{
  border:1px solid rgba(246,196,35,.45);
  background: rgba(246,196,35,.10);
  color: var(--warning);
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
}
.booking-body{ margin-top:8px; }
.pill-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.pill{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card2);
  font-size:12px;
  color:var(--text);
  font-weight:700;
  letter-spacing:.15px;
}
.pill-account{ border-color: rgba(79, 193, 255, .70); background: rgba(79, 193, 255, .22); }
.pill-cash{ border-color: rgba(160, 175, 190, .65); background: rgba(160, 175, 190, .18); }
.pill-pay{ border-color: rgba(246, 196, 35, .70); background: rgba(246, 196, 35, .20); }
.addr{ display:flex; gap:8px; align-items:flex-start; font-size:13px; }
.addr i{ color:var(--warning); margin-top:2px; }
.addr .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  padding:4px 8px;
  border-radius:999px;
  background:var(--chip);
  border:1px solid var(--border);
  font-size:12px;
  color:var(--text);
}
.chip.muted{ color:var(--muted); }
.booking-meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.kv{
  padding:6px 10px;
  border-radius:14px;
  background:var(--card2);
  border:1px solid var(--border);
  font-size:12px;
  color:var(--muted);
}
.kv strong{ color:var(--text); font-weight:600; }
.modal-dark{ background:var(--card); color:var(--text); border:1px solid var(--border); }
.map-wrap{ border:1px solid var(--border); border-radius:18px; overflow:hidden; }
.map{ height:300px; width:100%; background:#0a0a0a; }
pre.mono{ white-space: pre-wrap; word-break: break-word; }
.details-grid{ display:grid; gap:10px; }
.detail{ padding:10px; border-radius:16px; background:var(--card2); border:1px solid var(--border); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:12.5px; }
pre.mono{ white-space: pre-wrap; word-break: break-word; margin:0; }
@media (min-width: 768px){
  .details-grid{ grid-template-columns: 1fr 1fr; }
  .map{ height:360px; }
}