/* ── Fonts ─────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
  --teal:         #3DBFAE;
  --teal-dark:    #2EA090;
  --teal-dim:     rgba(61,191,174,0.12);
  --teal-border:  rgba(61,191,174,0.35);
  --navy:         #1A1A2E;
  --green:        #2EA090;
  --red:          #E03E3E;
  --red-dim:      rgba(224,62,62,0.10);
  --bg:           #F7F9FB;
  --surface:      #FFFFFF;
  --surface2:     #F0F5F9;
  --border:       #DDE4EC;
  --border-dark:  #C4CFD9;
  --text:         #1A1A2E;
  --text-muted:   #8096AB;
  --map-bg:       #0F1923;
  --map-surface:  #162230;
  --map-surface2: #1D2E3F;
  --map-border:   #243C52;
  --map-text:     #D0DFE8;
  --map-muted:    #5A7A90;
  --radius-sm:    6px;
  --radius:       10px;
  --radius-lg:    14px;
  --shadow:       0 2px 10px rgba(26,26,46,0.08);
  --shadow-md:    0 4px 20px rgba(26,26,46,0.13);
  --font:         'Inter', sans-serif;
  --mono:         'JetBrains Mono', monospace;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }

/* ── Common inputs ────────────────────────────────────────────────────────── */
.field { margin-bottom: 14px; }
.field:last-child { margin-bottom: 0; }
label.field-label { display:block; font-size:11px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; }
input[type=text], input[type=password], select { width:100%; background:var(--surface); border:1.5px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-family:var(--font); font-size:14px; padding:10px 13px; outline:none; transition:border-color 0.15s, box-shadow 0.15s; }
input[type=text]:focus, input[type=password]:focus, select:focus { border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-dim); }

/* ── Range slider ─────────────────────────────────────────────────────────── */
.range-row { display:flex; align-items:center; gap:10px; }
input[type=range] { flex:1; -webkit-appearance:none; height:4px; background:var(--map-border); border-radius:2px; outline:none; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:var(--teal); cursor:pointer; border:2px solid var(--map-bg); box-shadow:0 0 0 2px var(--teal); }
.range-val { font-family:var(--mono); font-size:12px; font-weight:500; color:var(--teal); min-width:60px; text-align:right; white-space:nowrap; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; font-family:var(--font); font-size:13px; font-weight:600; letter-spacing:0.03em; padding:10px 18px; border-radius:var(--radius-sm); border:none; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.btn:disabled { opacity:0.4; cursor:not-allowed; }
.btn-primary { background:var(--teal); color:#fff; width:100%; padding:12px; font-size:14px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; }
.btn-primary:hover:not(:disabled) { background:var(--teal-dark); box-shadow:0 3px 10px rgba(61,191,174,0.35); }
.btn-outline { background:transparent; border:1.5px solid var(--border-dark); color:var(--text-muted); }
.btn-outline:hover:not(:disabled) { border-color:var(--teal); color:var(--teal); }
.btn-ghost { background:transparent; color:var(--text-muted); padding:6px 10px; }
.btn-ghost:hover { background:var(--surface2); color:var(--text); }
.btn-danger { background:var(--red); color:#fff; }
.btn-danger:hover:not(:disabled) { background:#c03030; }
.btn-success { background:var(--teal); color:#fff; }
.btn-success:hover:not(:disabled) { background:var(--teal-dark); }
.btn-gmaps { width:100%; background:var(--map-surface2); border:1.5px solid var(--map-border); color:var(--map-text); font-size:12px; padding:9px; margin-top:6px; border-radius:var(--radius-sm); }
.btn-gmaps:hover:not(:disabled) { background:var(--map-surface); border-color:var(--teal); color:var(--teal); }

/* ── Spinner ──────────────────────────────────────────────────────────────── */
.spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.7s linear infinite; display:none; }
.loading .spinner { display:block; }
.loading .btn-text { opacity:0.6; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Alerts ───────────────────────────────────────────────────────────────── */
.alert { padding:10px 14px; border-radius:var(--radius-sm); font-size:12px; font-family:var(--mono); margin-top:10px; display:none; line-height:1.5; }
.alert.show { display:block; }
.alert-error   { background:var(--red-dim);   border:1px solid rgba(224,62,62,0.25);  color:#dc2626; }
.alert-success { background:rgba(61,191,174,0.1); border:1px solid rgba(61,191,174,0.3); color:var(--teal-dark); }

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--map-border); border-radius:3px; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  LOGIN PAGE                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */
body.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); background-image:radial-gradient(ellipse 600px 500px at 110% -10%, rgba(61,191,174,0.18) 0%, transparent 70%), radial-gradient(ellipse 400px 400px at -10% 110%, rgba(61,191,174,0.10) 0%, transparent 70%); }
.login-card { background:var(--surface); border-radius:var(--radius-lg); padding:48px 44px; width:400px; box-shadow:var(--shadow-md); border:1px solid var(--border); }
.login-logo { text-align:center; margin-bottom:34px; }
.login-logo .logo-mark { display:inline-flex; align-items:center; gap:10px; margin-bottom:14px; }
.login-logo .arc-icon { width:44px; height:44px; position:relative; }
.login-logo .arc-icon::before, .login-logo .arc-icon::after, .login-logo .arc-icon span { content:''; display:block; position:absolute; border-radius:50%; border:3px solid var(--teal); opacity:0; }
.login-logo .arc-icon::before { width:44px; height:44px; top:0; left:0; opacity:0.25; }
.login-logo .arc-icon::after  { width:30px; height:30px; top:7px; left:7px; opacity:0.5; }
.login-logo .arc-icon span    { width:16px; height:16px; top:14px; left:14px; opacity:1; background:var(--teal); border:none; border-radius:50%; }
.login-logo .logo-name { font-size:22px; font-weight:800; color:var(--text); letter-spacing:-0.02em; }
.login-logo .logo-name span { color:var(--teal); }
.login-logo h1 { font-size:16px; font-weight:600; color:var(--text); letter-spacing:-0.01em; }
.login-logo p  { font-size:13px; color:var(--text-muted); margin-top:3px; }
.login-card .btn-primary { margin-top:8px; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  ADMIN PAGE                                                                 */
/* ═══════════════════════════════════════════════════════════════════════════ */
body.admin-page { min-height:100vh; background:var(--bg); }
.admin-header { background:var(--surface); border-bottom:2px solid var(--teal); padding:0 28px; height:58px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow); position:sticky; top:0; z-index:100; }
.admin-header .logo { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:800; color:var(--text); letter-spacing:-0.02em; }
.admin-header .logo-dot { width:10px; height:10px; background:var(--teal); border-radius:50%; }
.admin-header .logo-sub { font-size:11px; font-weight:500; color:var(--text-muted); margin-left:2px; }
.admin-header nav { display:flex; align-items:center; gap:8px; }
.admin-header .nav-link { color:var(--text-muted); font-size:13px; font-weight:500; text-decoration:none; padding:6px 12px; border-radius:var(--radius-sm); transition:all 0.15s; }
.admin-header .nav-link:hover { background:var(--teal-dim); color:var(--teal-dark); }
.admin-header .user-chip { font-size:12px; font-family:var(--mono); color:var(--text-muted); background:var(--surface2); padding:4px 10px; border-radius:20px; border:1px solid var(--border); }
.admin-header .btn-logout { background:transparent; border:1.5px solid var(--border-dark); color:var(--text-muted); font-size:12px; font-family:var(--font); font-weight:600; padding:5px 12px; border-radius:var(--radius-sm); cursor:pointer; transition:all 0.15s; }
.admin-header .btn-logout:hover { border-color:var(--red); color:var(--red); }
.admin-body { max-width:980px; margin:0 auto; padding:36px 24px; }
.admin-section { margin-bottom:44px; }
.admin-section h2 { font-size:19px; font-weight:700; color:var(--text); margin-bottom:5px; letter-spacing:-0.02em; }
.admin-section .section-desc { font-size:13px; color:var(--text-muted); margin-bottom:20px; }
.admin-toolbar { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.admin-toolbar h2 { margin-bottom:0; }
.user-table { width:100%; border-collapse:collapse; background:var(--surface); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--border); }
.user-table th { background:var(--navy); color:rgba(255,255,255,0.65); font-size:11px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; padding:11px 16px; text-align:left; }
.user-table td { padding:12px 16px; font-size:13px; border-bottom:1px solid var(--border); }
.user-table tr:last-child td { border-bottom:none; }
.user-table tr:hover td { background:var(--surface2); }
.badge { display:inline-block; font-size:10px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; padding:3px 9px; border-radius:20px; }
.badge-admin { background:var(--teal-dim); color:var(--teal-dark); border:1px solid var(--teal-border); }
.badge-user  { background:var(--surface2); color:var(--text-muted); border:1px solid var(--border); }
.action-btn { background:transparent; border:none; cursor:pointer; padding:4px 8px; border-radius:var(--radius-sm); font-size:12px; font-weight:600; transition:all 0.15s; font-family:var(--font); }
.action-btn.edit   { color:var(--teal-dark); } .action-btn.edit:hover   { background:var(--teal-dim); }
.action-btn.delete { color:var(--red); }        .action-btn.delete:hover { background:var(--red-dim);  }
.scrape-log { background:var(--navy); border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius); padding:16px; font-family:var(--mono); font-size:12px; color:#4ade80; max-height:280px; overflow-y:auto; white-space:pre-wrap; line-height:1.6; display:none; }
.scrape-log.show { display:block; }
.csv-meta { font-size:12px; color:var(--text-muted); font-family:var(--mono); padding:8px 12px; background:var(--surface2); border-radius:var(--radius-sm); border:1px solid var(--border); display:inline-block; }
.modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; z-index:1000; }
.modal-overlay.show { display:flex; }
.modal { background:var(--surface); border-radius:var(--radius-lg); padding:32px; width:420px; box-shadow:var(--shadow-md); border:1px solid var(--border); }
.modal h3 { font-size:18px; font-weight:700; margin-bottom:20px; letter-spacing:-0.02em; }
.modal-actions { display:flex; gap:10px; margin-top:20px; }
.modal-actions .btn { flex:1; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  APP PAGE — DESKTOP LAYOUT                                                  */
/* ═══════════════════════════════════════════════════════════════════════════ */
body.app-page {
  height: 100dvh;
  display: grid;
  grid-template-columns: 360px 1fr;
  grid-template-rows: 52px 1fr;
  overflow: hidden;
  background: var(--map-bg);
}

/* ── App header ───────────────────────────────────────────────────────────── */
.app-header {
  grid-column: 1 / -1;
  background: var(--surface);
  border-bottom: 2px solid var(--teal);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 200;
}
.app-header .logo { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800; color:var(--text); letter-spacing:-0.02em; }
.app-header .logo-dot { width:9px; height:9px; background:var(--teal); border-radius:50%; flex-shrink:0; }
.app-header .logo-badge { font-size:11px; font-weight:800; background:var(--teal); color:#fff; padding:2px 8px; border-radius:4px; letter-spacing:0.05em; }
.app-header .header-right { display:flex; align-items:center; gap:8px; }
.app-header .user-pill { font-size:11px; color:var(--text-muted); font-family:var(--mono); background:var(--surface2); padding:3px 10px; border-radius:20px; border:1px solid var(--border); }
.app-header .btn-header { -webkit-appearance:none; appearance:none; background:transparent; border:1.5px solid var(--border-dark); color:var(--text-muted); font-size:11px; font-weight:600; font-family:var(--font); padding:4px 10px; border-radius:var(--radius-sm); cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; transition:all 0.15s; }
.app-header .btn-header:hover { border-color:var(--teal); color:var(--teal-dark); }
.app-header .btn-header.logout:hover { border-color:var(--red); color:var(--red); }

/* Hamburger — only shown on mobile */
.btn-menu {
  display: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: 1.5px solid var(--border-dark);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 4px 9px;
  cursor: pointer;
  transition: all 0.15s;
}
.btn-menu:hover { border-color: var(--teal); color: var(--teal-dark); }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
aside.sidebar {
  display: flex;
  flex-direction: column;
  overflow: hidden;        /* critical: allows inner flex:1 to work */
  min-height: 0;
  background: var(--map-surface);
  border-right: 1px solid var(--map-border);
}

/* Sidebar header — title + close button (hidden on desktop) */
.sidebar-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 46px;
  min-height: 46px;
  border-bottom: 1px solid var(--map-border);
  background: var(--map-surface);
  flex-shrink: 0;
}
.sidebar-title { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--map-muted); }
.sidebar-close {
  -webkit-appearance: none;
  appearance: none;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: var(--map-surface2);
  border: 1px solid var(--map-border);
  border-radius: 50%;
  color: var(--map-muted);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.sidebar-close:hover { color: var(--red); border-color: var(--red); }

/* Sidebar body: form sections, fixed height */
.sidebar-body {
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 62%;
}

/* Sidebar results: takes remaining space, independent scroll */
.results-area {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.results-header {
  padding: 13px 18px 4px;
  flex-shrink: 0;
}

.sidebar-section { padding:16px 18px; border-bottom:1px solid var(--map-border); flex-shrink:0; }
.section-label { font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--map-muted); margin-bottom:11px; }

aside input[type=text] { background:var(--map-bg); border-color:var(--map-border); color:var(--map-text); font-size:13px; padding:8px 11px; }
aside input[type=text]:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(61,191,174,0.12); }
aside label.field-label { color:var(--map-muted); }

/* Fuel buttons */
.fuel-group { display:grid; grid-template-columns:1fr 1fr 1fr; gap:5px; }
.fuel-btn { -webkit-appearance:none; appearance:none; background:var(--map-bg); border:1.5px solid var(--map-border); border-radius:var(--radius-sm); color:var(--map-muted); font-family:var(--font); font-size:11px; font-weight:600; padding:7px 4px; cursor:pointer; text-align:center; transition:all 0.15s; }
.fuel-btn:hover { border-color:var(--teal); color:var(--map-text); }
.fuel-btn.active { background:var(--teal); border-color:var(--teal); color:#fff; }

/* Advanced toggle */
.advanced-toggle {
  -webkit-appearance: none; appearance: none;
  width: 100%; background: var(--map-bg);
  border: none; border-top: 1px solid var(--map-border); border-bottom: 1px solid var(--map-border);
  padding: 11px 18px; display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; flex-shrink: 0; font-family: var(--font); transition: background 0.15s;
}
.advanced-toggle:hover { background: var(--map-surface2); }
.adv-label { font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--map-muted); }
.adv-arrow { font-size:10px; color:var(--map-muted); transition:transform 0.2s; }
.advanced-toggle.open .adv-arrow { transform: rotate(180deg); }
.advanced-toggle.open .adv-label { color: var(--teal); }
.advanced-body { display:none; flex-shrink:0; }
.advanced-body.open { display:block; }

/* Search button */
.btn-search { -webkit-appearance:none; appearance:none; width:100%; background:var(--teal); border:none; border-radius:var(--radius-sm); color:#fff; font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; padding:12px; cursor:pointer; transition:background 0.15s; display:flex; align-items:center; justify-content:center; gap:8px; }
.btn-search:hover { background:var(--teal-dark); }
.btn-search:disabled { background:var(--map-border); color:var(--map-muted); cursor:not-allowed; }

/* Route summary */
.route-meta { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.meta-pill { background:var(--map-bg); border:1px solid var(--map-border); border-radius:20px; padding:4px 11px; font-family:var(--mono); font-size:11px; color:var(--map-text); transition:opacity 0.2s; }
.meta-pill strong { color:var(--teal); }
.meta-pill.updating { opacity:0.4; }
.via-indicator { display:none; align-items:center; gap:8px; padding:7px 11px; background:rgba(61,191,174,0.08); border:1px solid rgba(61,191,174,0.25); border-radius:var(--radius-sm); font-family:var(--mono); font-size:11px; color:var(--teal); margin-bottom:8px; }
.via-indicator.show { display:flex; }
.via-clear { margin-left:auto; cursor:pointer; color:var(--map-muted); font-size:14px; transition:color 0.15s; }
.via-clear:hover { color:var(--red); }

/* ── Station list ─────────────────────────────────────────────────────────── */
.station-list { padding: 0 18px 20px; }
.click-hint { text-align:center; font-family:var(--mono); font-size:10px; color:var(--map-muted); padding:8px 0 10px; letter-spacing:0.04em; }

/*
 * STATION CARD
 * - NO position:relative, NO overflow:hidden (these caused the badge overlap)
 * - Accent bar done with inset box-shadow (no ::before pseudo-element needed)
 */
.station-card {
  background: var(--map-bg);
  border: 1.5px solid var(--map-border);
  border-radius: var(--radius-sm);
  padding: 11px 12px;
  margin-bottom: 7px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: inset 3px 0 0 var(--map-border);  /* left accent bar */
}
.station-card:hover    { border-color: var(--map-surface2); transform: translateX(2px); box-shadow: inset 3px 0 0 var(--teal); }
.station-card.rank-1   { box-shadow: inset 3px 0 0 var(--teal); }
.station-card.selected { border-color: var(--teal); box-shadow: inset 3px 0 0 var(--teal), 0 0 0 1px rgba(61,191,174,0.2); transform: translateX(2px); }

/* Card top row: [badge + name]  |  [price] */
.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.card-top-left {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  flex: 1;
  min-width: 0;
}
.rank-badge {
  position: static;   /* explicit: never let any rule make this absolute */
  flex-shrink: 0;
  background: var(--map-surface2);
  border: 1px solid var(--map-border);
  border-radius: var(--radius-sm);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--map-muted);
  padding: 2px 6px;
  line-height: 1.6;
  margin-top: 1px;
}
.station-card.rank-1   .rank-badge { background: var(--teal); border-color: var(--teal); color: #fff; }
.station-card.selected .rank-badge { background: var(--teal); border-color: var(--teal); color: #fff; }

.card-name-wrap { flex: 1; min-width: 0; }
.station-name  { font-size: 13px; font-weight: 700; color: var(--map-text); line-height: 1.3; }
.station-brand { font-family: var(--mono); font-size: 10px; color: var(--map-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; }

.price-tag { flex-shrink: 0; font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--teal); white-space: nowrap; line-height: 1.2; }
.price-tag .currency { font-size: 10px; color: var(--map-muted); margin-right: 2px; }

.card-meta { display:flex; gap:10px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; color:var(--map-muted); }
.card-meta .detour { color:var(--teal); font-weight:500; }
.card-meta .detour.loading-detour { opacity:0.4; }

.empty-state { padding:36px 18px; text-align:center; color:var(--map-muted); display:flex; flex-direction:column; align-items:center; gap:10px; }
.empty-icon { font-size:32px; opacity:0.4; }
.empty-state p { font-size:13px; line-height:1.6; max-width:260px; }

/* ── Map ──────────────────────────────────────────────────────────────────── */
#map { width:100%; height:100%; background:var(--map-bg); }

/* ── Autocomplete ─────────────────────────────────────────────────────────── */
.autocomplete-wrap { position:relative; }
.autocomplete-drop { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--navy); border:1.5px solid var(--map-border); border-radius:var(--radius-sm); z-index:500; overflow:hidden; box-shadow:var(--shadow-md); display:none; }
.autocomplete-drop.open { display:block; }
.ac-item { padding:9px 12px; cursor:pointer; transition:background 0.1s; border-bottom:1px solid var(--map-border); }
.ac-item:last-child { border-bottom:none; }
.ac-item:hover, .ac-item.focused { background:var(--map-surface2); }
.ac-item .ac-name { font-size:13px; color:var(--map-text); font-weight:500; }
.ac-item .ac-city { font-size:11px; color:var(--map-muted); margin-top:1px; }

/* ── Location button next to inputs ──────────────────────────────────────── */
.input-with-loc {
  display: flex;
  gap: 6px;
  align-items: center;
}
.input-with-loc input { flex: 1; min-width: 0; }
.btn-loc {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--map-surface2);
  border: 1.5px solid var(--map-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.btn-loc:hover   { border-color: var(--teal); background: var(--map-bg); }
.btn-loc:disabled { opacity: 0.5; cursor: not-allowed; }
.sidebar-backdrop { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:150; }
.sidebar-backdrop.show { display:block; }

/* ═══════════════════════════════════════════════════════════════════════════ */
/*  MOBILE ≤ 767px                                                             */
/* ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  body.app-page {
    grid-template-columns: 1fr;
    grid-template-rows: 52px 1fr;
    overflow: hidden;
  }

  /* Header */
  .app-header { padding: 0 12px; gap: 6px; }
  .app-header .user-pill { display: none; }
  .app-header .logo { font-size: 12px; gap: 6px; }
  .btn-menu { display: flex; }

  /* Map fills the full content row */
  #map { grid-column: 1; grid-row: 2; width: 100%; height: 100%; }

  /*
   * Sidebar on mobile:
   * - Always position:fixed so it's outside the grid completely
   * - Visibility is controlled ONLY via JS inline style (display:none/flex)
   * - No CSS class toggles — they fight the cascade and lose
   */
  aside.sidebar {
    position: fixed !important;
    top: 52px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 9999 !important;
    border-right: none;
    flex-direction: column;
    overflow: hidden;
    /* display is set by JS: none by default, flex when open */
  }

  .sidebar-header { display: flex; }
  .sidebar-body { max-height: 55%; }
  .sidebar-section { padding: 11px 14px; }
  .results-header  { padding: 11px 14px 4px; }
  .station-list    { padding: 0 14px 16px; }
  .advanced-toggle { padding: 11px 14px; }
}