/* ============================================================
   Malaysia E-Hailing — custom styles
   ============================================================ */
:root {
  --ink: #0b1220;
  --ink2: #131c2e;
  --line: #253148;
  --brand: #12b76a;
}

html, body { margin: 0; padding: 0; height: 100%; }
body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

/* ---------- layout ---------- */
.app-shell { min-height: 100dvh; display: flex; flex-direction: column; }
.app-header {
  position: sticky; top: 0; z-index: 900;
  background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
  border-bottom: 1px solid var(--line);
}
.app-main { flex: 1 1 auto; }

/* ---------- mode tabs ---------- */
.mode-tab {
  flex: 1 1 0; padding: .55rem .5rem; border-radius: .65rem; font-size: .8rem; font-weight: 600;
  color: #94a3b8; background: transparent; border: 1px solid transparent; cursor: pointer;
  transition: all .15s ease; white-space: nowrap;
}
.mode-tab:hover { color: #e2e8f0; background: #1e293b; }
.mode-tab.active { color: #04240f; background: var(--brand); border-color: var(--brand); }
.mode-tab.active.warn { background: #f79009; border-color: #f79009; color: #22150a; }
.mode-tab.active.danger { background: #f04438; border-color: #f04438; color: #fff; }

/* ---------- inputs ---------- */
.inp {
  width: 100%; padding: .7rem .85rem; border-radius: .7rem; background: #0f172a;
  border: 1px solid var(--line); color: #e2e8f0; font-size: .92rem; outline: none;
}
.inp:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(18,183,106,.18); }
.inp::placeholder { color: #64748b; }
.lbl { display:block; font-size:.75rem; font-weight:600; color:#94a3b8; margin: 0 0 .3rem .1rem; letter-spacing:.02em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem 1rem; border-radius: .7rem; font-weight: 600; font-size: .9rem;
  cursor: pointer; border: 1px solid transparent; transition: all .15s ease; line-height: 1.1;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--brand); color: #04240f; }
.btn-primary:hover:not(:disabled) { background: #0e9f5e; }
.btn-ghost { background: #16203a; color: #cbd5e1; border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { background: #1e2b48; }
.btn-danger { background: #f04438; color: #fff; }
.btn-danger:hover:not(:disabled) { background: #d92d20; }
.btn-warn { background: #f79009; color: #22150a; }
.btn-blue { background: #2563eb; color: #fff; }
.btn-blue:hover:not(:disabled) { background: #1d4ed8; }
.btn-block { width: 100%; }
.btn-sm { padding: .45rem .7rem; font-size: .78rem; border-radius: .55rem; }

/* ---------- cards ---------- */
.card { background: #0f172a; border: 1px solid var(--line); border-radius: .9rem; }
.card-pad { padding: 1rem; }

/* ---------- map ----------
   IMPORTANT: percentage heights do NOT resolve inside a flex item whose
   height is auto, so the map wrapper must be positioned and the map itself
   absolutely positioned to fill it (standard Leaflet pattern).
   Without this the container collapses to 0px height -> "black" map. */
.map-box { position: absolute; inset: 0; border-radius: .9rem; overflow: hidden; background: #0b1220; }
#map, #dmap { position: absolute; inset: 0; width: 100%; height: 100%; }
#amap { width: 100%; height: 100%; }
.leaflet-container { background: #0b1220; font-family: inherit; }
.pin-price {
  background: #12b76a; color: #04240f; font-weight: 800; font-size: .74rem;
  padding: .18rem .42rem; border-radius: .45rem; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.45); border: 2px solid #04240f;
}
.pin-price.pending { background: #12b76a; }
.pin-price.mine { background: #2563eb; color:#fff; border-color:#0b1220; }
.pin-me { background: #2563eb; color: #fff; }

/* ---------- misc ---------- */
.badge { display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:99px; font-size:.7rem; font-weight:700; }
.b-green { background: rgba(18,183,106,.15); color:#3ddc91; }
.b-amber { background: rgba(247,144,9,.15); color:#fbbf24; }
.b-red   { background: rgba(240,68,56,.15); color:#fca5a5; }
.b-blue  { background: rgba(37,99,235,.18); color:#93c5fd; }
.b-gray  { background: rgba(148,163,184,.15); color:#cbd5e1; }

.divider { height:1px; background: var(--line); }
.scroll-y { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 800;
  background: #0f172a; border-top: 1px solid var(--line);
  border-radius: 1.1rem 1.1rem 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.5);
  max-height: 62%; display: flex; flex-direction: column;
}
.sheet.collapsed { max-height: 4.4rem; overflow: hidden; }
.handle { width: 42px; height: 4px; border-radius: 99px; background: #334155; margin: .55rem auto .3rem; }
.map-wrap { position: relative; flex: 1 1 auto; min-height: 320px; }

.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity:1 } 50% { opacity:.45 } }

table.tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
table.tbl th { text-align: left; color: #94a3b8; font-weight:600; padding:.5rem .55rem; background:#111c30; position: sticky; top:0; }
table.tbl td { padding:.5rem .55rem; border-top: 1px solid var(--line); }
table.tbl tr:hover td { background: #131c2e; }

.toast { padding:.7rem .9rem; border-radius:.7rem; font-size:.85rem; font-weight:600; box-shadow:0 8px 24px rgba(0,0,0,.45); animation: drop .2s ease; }
.toast.ok { background:#0e9f5e; color:#04240f; }
.toast.err { background:#d92d20; color:#fff; }
.toast.info { background:#2563eb; color:#fff; }
@keyframes drop { from { transform: translateY(-8px); opacity:0 } }

.leaflet-bar a { background:#0f172a !important; color:#cbd5e1 !important; border-color: var(--line) !important; }
.leaflet-popup-content-wrapper { background:#0f172a; color:#e2e8f0; border-radius:.7rem; border:1px solid var(--line); }
.leaflet-popup-tip { background:#0f172a; }
.leaflet-popup-close-button { color:#94a3b8 !important; }