/* ─── Design Tokens ──────────────────────────────────── */
:root {
  --navy:          #0a1628;
  --navy-soft:     #142339;
  --teal:          #4fc3a1;
  --teal-dark:     #2f9b7d;
  --bg:            #f4f6f8;
  --card-bg:       #ffffff;
  --text-primary:  #11202f;
  --text-secondary:#5b6b7c;
  --text-tertiary: #8a98a8;
  --border:        #e7ebef;
  --border-strong: #cfd6dd;
  --green:         #1a7a42;
  --green-bg:      #e9f7ef;
  --orange:        #b56a00;
  --orange-bg:     #fff3e0;
  --red:           #c0392b;
  --red-bg:        #fdecea;
  --r-sm:  6px;
  --r-md:  10px;
  --r-lg:  14px;
  --r-xl:  20px;
  --nav-h: 62px;
  --font:  'Inter', system-ui, -apple-system, sans-serif;
  --font-ar:'Cairo', 'Inter', system-ui, sans-serif;
}

/* ─── Reset ──────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; overflow:hidden; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; }
body { font-family:var(--font); background:var(--navy); color:var(--text-primary); overscroll-behavior:none; }
button { border:none; background:none; cursor:pointer; font-family:inherit; }
input,select,textarea { font-family:inherit; border:none; outline:none; background:none; }
svg { display:block; flex-shrink:0; }
a   { text-decoration:none; color:inherit; }

/* ─── App Shell ──────────────────────────────────────── */
#app { height:100dvh; height:100vh; display:flex; flex-direction:column; }

#shell { display:flex; flex-direction:column; height:100%; background:var(--bg); }

#content-area { flex:1; display:flex; flex-direction:column; overflow:hidden; position:relative; }

/* ─── Bottom Navigation (5 tabs) ─────────────────────── */
#bottom-nav {
  display:flex;
  height:var(--nav-h);
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--card-bg);
  border-top:1px solid var(--border);
  flex-shrink:0;
  position:relative;
  z-index:9500;
}

.nav-btn {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  color:var(--text-tertiary);
  transition:color .15s;
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.2px;
  padding:0 2px;
}

.nav-btn.active { color:var(--teal); }
.nav-btn svg { transition:transform .15s; }
.nav-btn.active svg { transform:scale(1.08); }

/* ─── MAP TAB (home screen) ──────────────────────────── */
.map-screen {
  display:flex;
  flex-direction:column;
  height:100%;
  overflow:hidden;
}

/* Slim topbar for map screen */
.map-topbar {
  display:flex;
  flex-direction:column;
  background:var(--navy);
  padding:10px 14px 12px;
  padding-top:calc(10px + env(safe-area-inset-top));
  flex-shrink:0;
  gap:10px;
}

/* Row 1: Brand bar */
.map-brand-bar {
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.map-brand-left {
  display:flex;
  align-items:center;
  gap:10px;
}
.map-brand-bolt {
  width:36px; height:36px;
  border-radius:10px;
  background:rgba(79,195,161,.18);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.map-brand-names {
  display:flex; flex-direction:column;
}
.map-brand-en {
  font-size:20px; font-weight:800; color:#fff;
  line-height:1.1; letter-spacing:.5px;
}
.map-brand-ar {
  font-size:12px; font-family:var(--font-ar);
  font-weight:600; color:var(--teal); line-height:1.2;
}

/* Row 2: Search row */
.map-search-row {
  display:flex;
  align-items:center;
  gap:8px;
}

.icon-btn {
  width:36px;
  height:36px;
  border-radius:var(--r-md);
  background:rgba(255,255,255,.09);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.85);
  flex-shrink:0;
}

/* Map body — flex container that splits into 45% map / 55% list */
.map-body {
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  min-height:0;
}

/* Leaflet map container */
.leaflet-container-wrap {
  flex:80;
  position:relative;
  overflow:hidden;
  min-height:0;
}

/* Fix leaflet divIcon default white-box rendering */
.leaflet-div-icon {
  background:transparent !important;
  border:none !important;
}

#leaflet-map {
  width:100%;
  height:100%;
  background:#d8ebe1;
}

/* Override leaflet attribution */
.leaflet-control-attribution { font-size:8px !important; }
.leaflet-control-zoom { margin:8px !important; }
.leaflet-control-zoom a {
  width:30px !important;
  height:30px !important;
  line-height:30px !important;
  font-size:16px !important;
  border-radius:8px !important;
  box-shadow:0 2px 8px rgba(0,0,0,.2) !important;
}

/* Station count overlay on map */
.map-stat-overlay {
  position:absolute;
  top:10px;
  right:10px;
  z-index:400;
  background:rgba(10,22,40,.9);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  padding:8px 12px;
  text-align:right;
  pointer-events:none;
}

.map-stat-num   { font-size:16px; font-weight:700; color:var(--teal); line-height:1; }
.map-stat-label { font-size:9px;  font-weight:600; color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.6px; }

/* Below-map section — company grid */
.map-below {
  flex:20;
  display:flex;
  flex-direction:column;
  background:var(--navy);
  border-top:1px solid rgba(255,255,255,.08);
  padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));
  flex-shrink:0;
  min-height:90px;
  max-height:150px;
}

/* ─── Filter Bars ────────────────────────────────────── */
.filter-bar {
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  overflow-x:auto;
  scrollbar-width:none;
  background:var(--card-bg);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.filter-bar::-webkit-scrollbar { display:none; }

.quick-filter-bar {
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 12px;
  overflow-x:auto;
  scrollbar-width:none;
  background:var(--bg);
  flex-shrink:0;
}
.quick-filter-bar::-webkit-scrollbar { display:none; }

.chip {
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 11px;
  border-radius:100px;
  border:1.5px solid var(--border);
  background:var(--bg);
  font-size:12px;
  font-weight:600;
  color:var(--text-secondary);
  white-space:nowrap;
  transition:all .15s;
  flex-shrink:0;
}
.chip.active { background:var(--navy); border-color:var(--navy); color:#fff; }
.chip.chip-green.active { background:var(--green); border-color:var(--green); }

.chip-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }

/* ─── Stations Scroll Area ───────────────────────────── */
.stations-scroll {
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

.stations-list {
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:8px 12px 24px;
}

.stations-list-label {
  font-size:10px;
  font-weight:600;
  color:var(--text-tertiary);
  text-transform:uppercase;
  letter-spacing:.9px;
  padding:6px 14px 2px;
}

/* ─── LIST TAB ───────────────────────────────────────── */
.list-screen { display:flex; flex-direction:column; height:100%; overflow:hidden; }

.list-topbar {
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--navy);
  padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  flex-shrink:0;
}

.search-box {
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r-md);
  padding:0 12px;
  height:38px;
}
.search-box svg { opacity:.6; }
.search-input { flex:1; color:#fff; font-size:14px; height:100%; }
.search-input::placeholder { color:rgba(255,255,255,.4); }

.section-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:10px 16px 4px;
}
.section-count { font-size:10px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.9px; }
.section-age   { font-size:10px; color:var(--text-tertiary); }

/* ─── Station Card ───────────────────────────────────── */
.station-card {
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:13px;
  cursor:pointer;
  transition:box-shadow .15s;
  -webkit-user-select:none;
  user-select:none;
}
.station-card:active { transform:scale(.985); }

.card-header { display:flex; align-items:center; gap:11px; margin-bottom:10px; }
.card-logo { width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.card-info { flex:1; min-width:0; }
.card-name-row { display:flex; align-items:baseline; gap:0; flex-wrap:wrap; }
.card-name { font-size:14px; font-weight:600; color:var(--text-primary); }
.card-name-ar { font-size:12px; font-family:var(--font-ar); color:var(--text-tertiary); margin-left:4px; }
.card-loc { display:flex; align-items:center; gap:4px; margin-top:2px; }
.card-loc-text { font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card-fav { width:28px; height:28px; border-radius:8px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.card-meta { display:flex; flex-wrap:wrap; gap:5px; margin-bottom:10px; }
.status-badge { display:flex; align-items:center; gap:5px; padding:3px 8px; border-radius:100px; font-size:11px; font-weight:600; }
.type-badge { display:flex; align-items:center; gap:4px; padding:3px 8px; border-radius:100px; background:#f1f4f7; font-size:11px; font-weight:600; color:var(--text-secondary); }

.card-footer { display:flex; align-items:center; justify-content:space-between; padding-top:10px; border-top:1px solid var(--border); gap:10px; }
.card-foot-left { display:flex; align-items:center; gap:10px; flex:1; }
.card-dist { display:flex; align-items:center; gap:4px; font-size:12px; font-weight:600; color:var(--text-primary); }
.card-divider { width:3px; height:3px; border-radius:2px; background:var(--text-tertiary); }
.card-price { font-size:12px; color:var(--text-secondary); }
.card-go { display:flex; align-items:center; gap:5px; background:var(--navy); border-radius:9px; padding:7px 14px; font-size:12px; font-weight:600; color:var(--teal); flex-shrink:0; }

/* ─── Empty / Loading ────────────────────────────────── */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:10px; padding:60px 16px; color:var(--text-tertiary); }
.empty-state p { font-size:13px; }
.loading-state { display:flex; align-items:center; justify-content:center; padding:60px; }
.spinner { width:30px; height:30px; border:3px solid var(--border); border-top-color:var(--teal); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ─── Detail Panel ───────────────────────────────────── */
.detail-overlay {
  position:fixed; top:0; right:0; bottom:0; left:0;
  background:rgba(10,22,40,.5);
  z-index:8000; opacity:0; transition:opacity .25s;
}
.detail-overlay.visible { opacity:1; }
.detail-overlay.hidden  { display:none; }

.detail-panel {
  position:fixed; top:0; right:0; bottom:var(--nav-h); left:0;
  z-index:9000;
  background:var(--bg);
  border-radius:0;
  display:flex; flex-direction:column;
  transform:translateY(100%);
  transition:transform .3s cubic-bezier(.32,.72,0,1);
}
.detail-panel.open { transform:translateY(0); }

.detail-handle { display:none; }
.detail-handle-bar { display:none; }

.detail-header {
  display:flex; align-items:center; gap:12px;
  background:var(--navy); padding:14px 16px; flex-shrink:0;
}
.detail-back { width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.18); border:1.5px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.detail-header-title { flex:1; display:flex; align-items:baseline; gap:6px; }
.detail-header-en { font-size:16px; font-weight:600; color:#fff; }
.detail-header-ar { font-size:14px; font-family:var(--font-ar); font-weight:600; color:var(--teal); }

.detail-scroll {
  flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:16px; padding-bottom:calc(24px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; gap:12px;
}

.company-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:100px; align-self:flex-start; }
.company-badge-dot { width:8px; height:8px; border-radius:50%; }
.company-badge-name { font-size:12px; font-weight:600; }
.detail-station-name { font-size:21px; font-weight:700; color:var(--text-primary); }
.detail-loc { display:flex; align-items:center; gap:6px; color:var(--text-secondary); font-size:13px; }

.info-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.info-row { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; }
.info-row + .info-row { border-top:1px solid var(--border); }
.info-row-icon { color:var(--text-tertiary); margin-top:2px; }
.info-content { flex:1; }
.info-label { font-size:11px; font-weight:500; color:var(--text-tertiary); margin-bottom:2px; }
.info-value { font-size:14px; font-weight:600; color:var(--text-primary); }

.chargers-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; }
.chargers-title { font-size:12px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.8px; margin-bottom:12px; }
.charger-row { display:flex; align-items:center; gap:12px; padding:6px 0; }
.charger-row + .charger-row { border-top:1px solid var(--border); }
.charger-type-badge { padding:5px 10px; border-radius:8px; font-size:12px; font-weight:700; flex-shrink:0; }
.charger-info { flex:1; }
.charger-power { font-size:14px; font-weight:600; color:var(--text-primary); line-height:1.2; }
.charger-conn  { font-size:12px; color:var(--text-secondary); }
.charger-status { padding:4px 10px; border-radius:100px; font-size:12px; font-weight:600; flex-shrink:0; }

.detail-actions { display:flex; gap:10px; margin-top:4px; }
.navigate-btn {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--navy); border-radius:var(--r-lg); padding:15px;
  font-size:15px; font-weight:600; color:var(--teal);
}
.call-btn {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--green-bg); border-radius:var(--r-lg); padding:15px 18px;
  font-size:15px; font-weight:600; color:var(--green);
}
.maps-btn {
  display:flex; align-items:center; justify-content:center; gap:6px;
  background:var(--surface); border-radius:var(--r-lg); padding:13px 16px;
  font-size:13px; font-weight:600; color:var(--text-secondary);
}
.navigate-btn:active, .call-btn:active, .maps-btn:active { opacity:.85; }

/* ─── User Location Dot ──────────────────────────────── */
.user-location-dot {
  width:20px; height:20px; border-radius:50%;
  background:#2196F3; border:3px solid #fff;
  box-shadow:0 0 0 0 rgba(33,150,243,.5);
  animation:loc-pulse 2s ease-out infinite;
}
@keyframes loc-pulse {
  0%   { box-shadow:0 0 0 0 rgba(33,150,243,.5); }
  70%  { box-shadow:0 0 0 14px rgba(33,150,243,0); }
  100% { box-shadow:0 0 0 0 rgba(33,150,243,0); }
}

/* ─── Map Topbar Back Button ─────────────────────────── */
.map-back-btn {
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  border:1.5px solid rgba(255,255,255,.22);
  display:none;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.map-back-btn.visible { display:flex; }
.map-back-btn:active { opacity:.75; }

/* ─── Map Topbar Search Bar ──────────────────────────── */
.map-search-box {
  flex:1;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.12);
  border-radius:100px;
  padding:0 14px;
  height:40px;
  min-width:0;
}
.map-search-input {
  flex:1;
  background:none;
  color:#fff;
  font-size:14px;
  min-width:0;
  caret-color:#4fc3a1;
}
.map-search-input::placeholder { color:rgba(255,255,255,.45); }

/* ─── Locate Me Button ───────────────────────────────── */
.locate-btn {
  position:absolute;
  bottom:14px;
  right:14px;
  z-index:500;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--navy);
  box-shadow:0 3px 14px rgba(0,0,0,.45);
  display:flex; align-items:center; justify-content:center;
}
.locate-btn:active { transform:scale(.92); }

/* ─── Route Screen Extras ────────────────────────────── */
.route-loc-text { flex:1; font-size:14px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.route-input-filled { border-color:var(--teal) !important; }
.route-clear-btn { width:28px; height:28px; border-radius:6px; background:var(--bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.route-btn[disabled] { opacity:0.5; cursor:default; }

/* ─── ROUTE TAB ──────────────────────────────────────── */
.route-screen { display:flex; flex-direction:column; height:100%; overflow:hidden; }

.route-header {
  background:var(--navy); padding:16px;
  padding-top:calc(16px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.route-header-logo { width:32px; height:32px; border-radius:8px; object-fit:cover; }
.route-header-title { font-size:18px; font-weight:700; color:#fff; }
.route-header-title-ar { font-size:14px; font-family:var(--font-ar); font-weight:600; color:var(--teal); margin-left:6px; }

.route-scroll { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }

.route-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:12px; }

.route-input-label { font-size:11px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; }

.route-input-box {
  display:flex; align-items:center; gap:10px;
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--r-md); padding:10px 14px;
}
.route-input-box input { flex:1; font-size:14px; color:var(--text-primary); }
.route-input-box input::placeholder { color:var(--text-tertiary); }

.route-btn {
  background:var(--navy); color:var(--teal);
  border-radius:var(--r-lg); padding:14px;
  font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
}

.route-tip {
  background:var(--card-bg); border:1px solid var(--border);
  border-radius:var(--r-lg); padding:14px;
  display:flex; gap:12px; align-items:flex-start;
}
.route-tip-text { font-size:13px; color:var(--text-secondary); line-height:1.5; }

/* ─── HISTORY TAB ────────────────────────────────────── */
.history-screen { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.history-header {
  background:var(--navy); padding:16px;
  padding-top:calc(16px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.history-scroll { flex:1; overflow-y:auto; padding:20px 16px; display:flex; flex-direction:column; gap:12px; }

.history-stat-row { display:flex; gap:10px; }
.history-stat { flex:1; background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:14px; text-align:center; }
.history-stat-num { font-size:22px; font-weight:700; color:var(--teal); }
.history-stat-label { font-size:11px; color:var(--text-secondary); margin-top:2px; }

/* ─── PROFILE TAB ────────────────────────────────────── */
.profile-screen { display:flex; flex-direction:column; height:100%; overflow:hidden; }

.profile-header {
  background:var(--navy); padding:14px 16px;
  padding-top:calc(14px + env(safe-area-inset-top));
  display:flex; align-items:center; gap:12px; flex-shrink:0;
}
.profile-header-logo { width:34px; height:34px; border-radius:9px; object-fit:cover; }
.profile-header-en { font-size:17px; font-weight:700; color:#fff; }
.profile-header-ar { font-size:13px; font-family:var(--font-ar); font-weight:600; color:var(--teal); margin-left:4px; }

.profile-scroll { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px; padding-bottom:40px; display:flex; flex-direction:column; gap:16px; }

.profile-avatar { display:flex; flex-direction:column; align-items:center; padding:20px 0; gap:6px; }
.avatar-circle {
  width:76px; height:76px; border-radius:50%;
  background:rgba(79,195,161,.12); border:2px solid var(--teal);
  display:flex; align-items:center; justify-content:center; margin-bottom:4px;
}
.avatar-name { font-size:18px; font-weight:600; color:var(--text-primary); }
.avatar-sub  { font-size:13px; color:var(--text-secondary); }

.section-label-sm { font-size:10px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:1px; padding:0 4px 8px; }

.settings-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.settings-row { display:flex; align-items:center; gap:12px; padding:12px 14px; }
.settings-row + .settings-row { border-top:1px solid var(--border); }
.settings-row-icon { width:34px; height:34px; border-radius:10px; background:#f1f4f7; display:flex; align-items:center; justify-content:center; color:var(--text-secondary); flex-shrink:0; }
.settings-row-icon.red { background:var(--red-bg); color:var(--red); }
.settings-row-label { flex:1; font-size:14px; font-weight:500; color:var(--text-primary); }
.settings-row-label.red { color:var(--red); }
.settings-row-value { font-size:13px; color:var(--text-secondary); }

/* Form elements inside profile */
.form-select, .form-input {
  background:var(--bg); border:1.5px solid var(--border);
  border-radius:var(--r-md); padding:10px 12px;
  font-size:14px; color:var(--text-primary); width:100%;
  -webkit-appearance:none; appearance:none;
}
.form-select:focus, .form-input:focus { border-color:var(--teal); }

.form-row { display:flex; flex-direction:column; gap:6px; }
.form-row label { font-size:12px; font-weight:600; color:var(--text-secondary); }

.form-card { background:var(--card-bg); border:1px solid var(--border); border-radius:var(--r-lg); padding:16px; display:flex; flex-direction:column; gap:14px; }

.save-btn {
  background:var(--teal); color:var(--navy);
  border-radius:var(--r-lg); padding:14px;
  font-size:15px; font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
}
.save-btn:active { opacity:.85; }

.pref-companies { display:flex; flex-wrap:wrap; gap:8px; }
.pref-chip {
  padding:6px 12px; border-radius:100px;
  border:1.5px solid var(--border); background:var(--bg);
  font-size:12px; font-weight:600; color:var(--text-secondary);
  transition:all .15s; cursor:pointer;
}
.pref-chip.on { background:var(--navy); border-color:var(--navy); color:#fff; }

/* Toggle switch */
.toggle { position:relative; width:44px; height:26px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--border-strong); border-radius:13px; transition:background .2s; }
.toggle-slider::before { content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:3px; left:3px; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.toggle input:checked + .toggle-slider { background:var(--teal); }
.toggle input:checked + .toggle-slider::before { transform:translateX(18px); }

/* ─── Toast ──────────────────────────────────────────── */
.toast {
  position:fixed;
  bottom:calc(var(--nav-h) + 12px + env(safe-area-inset-bottom));
  left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--navy-soft); color:#fff;
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--r-lg); padding:10px 16px;
  font-size:13px; font-weight:500;
  display:flex; align-items:center; gap:8px;
  z-index:60; box-shadow:0 4px 16px rgba(0,0,0,.3);
  white-space:nowrap; opacity:0;
  transition:opacity .2s, transform .2s;
  pointer-events:none;
}
.toast.visible { opacity:1; transform:translateX(-50%) translateY(0); }

/* ─── Install Banner ─────────────────────────────────── */
.install-banner {
  position:fixed; top:0; left:0; right:0;
  background:var(--teal); z-index:70;
  padding:10px 14px;
  padding-top:calc(10px + env(safe-area-inset-top));
  transform:translateY(-100%); transition:transform .3s;
}
.install-banner.visible { transform:translateY(0); }
.install-banner.hidden  { display:none; }
.install-banner-content { display:flex; align-items:center; gap:10px; }
.install-banner-text { flex:1; }
.install-banner-title { font-size:13px; font-weight:700; color:var(--navy); }
.install-banner-sub   { font-size:11px; color:rgba(10,22,40,.7); }
.install-btn { background:var(--navy); color:var(--teal); border-radius:var(--r-sm); padding:6px 14px; font-size:13px; font-weight:700; flex-shrink:0; }
.install-dismiss { color:var(--navy); opacity:.7; padding:4px; display:flex; align-items:center; }

/* ─── Leaflet custom marker ──────────────────────────── */
.map-marker { cursor:pointer; }
.map-marker-inner {
  width:30px; height:30px; border-radius:50%;
  border:2.5px solid #fff;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
  display:flex; align-items:center; justify-content:center;
  transition:transform .15s;
}
.map-marker-inner:active { transform:scale(1.2); }

/* ─── Station Status Row ─────────────────────────────── */
.station-status-row {
  display:flex; align-items:center; flex-wrap:wrap; gap:8px;
  margin-bottom:12px;
}
.report-meta {
  font-size:11px; color:var(--text-tertiary); font-weight:500;
}

/* ─── Report Section ─────────────────────────────────── */
.report-section {
  background:var(--bg); border-radius:var(--r-lg);
  padding:14px; margin-top:4px;
}
.report-section-title {
  font-size:13px; font-weight:600; color:var(--text-secondary);
  margin-bottom:10px;
}
.report-btn-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:8px;
}
.report-btn {
  padding:10px 6px; border-radius:var(--r-md);
  font-size:12px; font-weight:600;
  border:1.5px solid transparent;
  transition:opacity .15s, transform .1s;
  text-align:center;
}
.report-btn:active { transform:scale(.96); }
.report-btn:disabled { opacity:.4; pointer-events:none; }

.report-btn.report-available  { background:var(--green-bg);  color:var(--green);  border-color:#b6dfc4; }
.report-btn.report-in-use     { background:var(--orange-bg); color:var(--orange); border-color:#f5d5a0; }
.report-btn.report-offline    { background:var(--red-bg);    color:var(--red);    border-color:#f0b9b3; }
.report-btn.report-issue      { background:#fff8e1; color:#7a5c00; border-color:#f5d98a; }

.report-thanks {
  margin-top:10px; font-size:13px; font-weight:600;
  color:var(--teal-dark); text-align:center;
}

/* ─── Map Pins (status-coloured circles with charger count) ───── */
.cv-pin {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid rgba(255,255,255,.88);
  box-shadow:0 2px 8px rgba(0,0,0,.55);
  cursor:pointer;
  will-change:transform;
  transition:transform .1s;
}
.cv-pin:active { transform:scale(.88); }
.cv-pin-n {
  font-size:11px; font-weight:700; color:#fff;
  font-family:'Inter',system-ui,sans-serif;
  line-height:1; pointer-events:none;
}

/* ─── Cluster bubble ──────────────────────────────────────────── */
.cv-cluster {
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:2.5px solid rgba(79,195,161,.85);
  box-shadow:0 3px 12px rgba(0,0,0,.6);
  cursor:pointer;
}
.cv-cluster span {
  font-size:13px; font-weight:700;
  font-family:'Inter',system-ui,sans-serif;
  pointer-events:none;
}
.cv-cl-avail { background:#1a5c38; border-color:#27ae60; }
.cv-cl-avail span { color:#5ddb8a; }
.cv-cl-inuse { background:#5c3a00; border-color:#e67e22; }
.cv-cl-inuse span { color:#ffa040; }
.cv-cl-off   { background:#5c1a1a; border-color:#e74c3c; }
.cv-cl-off   span { color:#ff7070; }
.cv-cl-unk   { background:#1e2d40; border-color:#4fc3a1; }
.cv-cl-unk   span { color:#4fc3a1; }

/* ─── Company Grid (map tab) ─────────────────────────── */
.co-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:5px;
  flex:1;
  align-content:center;
}

.co-cell {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:5px 2px;
  border-radius:8px;
  border:1.5px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05);
  cursor:pointer;
  transition:all .15s;
  -webkit-user-select:none;
  user-select:none;
  min-height:0;
}

.co-cell span {
  font-size:9px;
  font-weight:600;
  color:rgba(255,255,255,.62);
  text-align:center;
  line-height:1.1;
  white-space:nowrap;
  font-family:var(--font);
}

.co-dot {
  width:8px; height:8px;
  border-radius:50%;
  flex-shrink:0;
}

.co-cell.co-active span { color:#fff; }
.co-cell.co-active { background:rgba(255,255,255,.1); }
.co-cell:active { transform:scale(.93); }