/* ===========================
   CSS Custom Properties
   =========================== */
:root {
  /* Colors */
  --color-primary: #1a73e8;
  --color-primary-dark: #1557b0;
  --color-success: #34a853;
  --color-warning: #f9ab00;
  --color-danger: #ea4335;
  --color-neutral: #757575;
  --color-background: #ffffff;
  --color-surface: #f8f9fa;
  --color-text: #202124;
  --color-text-secondary: #5f6368;
  --color-border: #dadce0;
  --color-offline-bg: #fef7e0;
  --color-offline-text: #856404;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Typography */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --line-height: 1.5;

  /* Touch targets */
  --touch-target-min: 44px;
  --touch-target-spacing: 8px;

  /* Layout */
  --map-height-mobile: 70vh;
  --panel-max-height: 50vh;
  --border-radius: 8px;
  --border-radius-sm: 4px;

  /* Transitions */
  --transition-speed: 0.3s;
  --transition-easing: ease-in-out;

  /* Z-index layers */
  --z-map: 1;
  --z-filter-panel: 100;
  --z-station-detail: 200;
  --z-offline-banner: 300;
  --z-message-overlay: 400;
}

/* ===========================
   Reset & Base
   =========================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--font-size-base);
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background-color: var(--color-background);
  overflow-x: hidden;
  min-height: 100vh;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ===========================
   App Layout
   =========================== */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ===========================
   Offline Banner
   =========================== */
.offline-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-offline-banner);
  background-color: var(--color-offline-bg);
  color: var(--color-offline-text);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
  font-size: var(--font-size-base);
  font-weight: 500;
  border-bottom: 1px solid var(--color-border);
}

.offline-banner[hidden] {
  display: none;
}

/* ===========================
   Search Bar
   =========================== */
.search-bar {
  position: fixed;
  top: var(--spacing-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-filter-panel);
  display: flex;
  gap: var(--spacing-sm);
  width: calc(100% - var(--spacing-xl));
  max-width: 480px;
  background-color: var(--color-background);
  padding: var(--spacing-sm);
  border-radius: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
  transition: all var(--transition-speed) var(--transition-easing);
}

.search-bar[hidden] {
  display: none;
}

.search-bar__input {
  flex: 1;
  min-height: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  outline: none;
}

.search-bar__input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.2);
}

.search-bar__btn {
  border-radius: 50%;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: 0;
  font-size: 18px;
}

.search-bar__collapse {
  min-width: 32px;
  min-height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 50%;
  padding: 0;
}

.search-bar__collapse:hover {
  color: var(--color-text);
  background-color: var(--color-surface);
}

/* Small floating button to re-open search */
.search-expand-btn {
  position: fixed;
  top: var(--spacing-md);
  right: var(--spacing-md);
  z-index: var(--z-filter-panel);
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  background-color: var(--color-background);
  border: none;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-expand-btn[hidden] {
  display: none;
}

.search-expand-btn:hover {
  background-color: var(--color-surface);
}

/* ===========================
   Map Container
   =========================== */
.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  z-index: var(--z-map);
}

.map {
  width: 100%;
  height: 100%;
}

/* ===========================
   Filter Panel (Drawer)
   =========================== */
.filter-panel {
  position: fixed;
  bottom: 50px;
  left: 0;
  right: 0;
  z-index: var(--z-filter-panel);
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  transition: transform var(--transition-speed) var(--transition-easing);
}

.filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text);
  background-color: var(--color-surface);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.filter-toggle__icon {
  transition: transform var(--transition-speed) var(--transition-easing);
}

.filter-toggle[aria-expanded="true"] .filter-toggle__icon {
  transform: rotate(180deg);
}

.filter-content {
  padding: var(--spacing-md);
  max-height: var(--panel-max-height);
  overflow-y: auto;
}

.filter-content[hidden] {
  display: none;
}

/* ===========================
   Station Detail Panel
   =========================== */
.station-detail-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-station-detail);
  background-color: var(--color-background);
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  max-height: var(--panel-max-height);
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform var(--transition-speed) var(--transition-easing);
}

.station-detail-panel[hidden] {
  display: none;
}

.station-detail-panel.station-detail-panel--visible {
  transform: translateY(0);
}

.station-detail-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-md);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  background-color: var(--color-background);
}

.station-detail-panel__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin: 0;
}

.station-detail-panel__close {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xl);
  color: var(--color-text-secondary);
  border-radius: var(--border-radius-sm);
}

.station-detail-panel__close:hover,
.station-detail-panel__close:focus {
  background-color: var(--color-surface);
  color: var(--color-text);
}

.station-detail-panel__content {
  padding: var(--spacing-md);
}

/* ===========================
   Message Overlay
   =========================== */
.message-overlay {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-message-overlay);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  text-align: center;
  max-width: 90%;
  width: 320px;
}

.message-overlay[hidden] {
  display: none;
}

.message-overlay__text {
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

.message-overlay__action {
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: var(--font-size-base);
  font-weight: 500;
  border-radius: var(--border-radius-sm);
}

.message-overlay__action:hover,
.message-overlay__action:focus {
  background-color: var(--color-primary-dark);
}

.message-overlay__action[hidden] {
  display: none;
}

/* ===========================
   Common Button Styles
   =========================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-base);
  font-weight: 500;
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-speed) var(--transition-easing);
}

.btn--primary {
  background-color: var(--color-primary);
  color: #ffffff;
}

.btn--primary:hover,
.btn--primary:focus {
  background-color: var(--color-primary-dark);
}

.btn--primary:disabled {
  background-color: var(--color-neutral);
  cursor: not-allowed;
}

/* ===========================
   Filter Chip Styles
   =========================== */
.filter-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-target-min);
  min-height: var(--touch-target-min);
  padding: var(--spacing-sm) var(--spacing-md);
  margin: calc(var(--touch-target-spacing) / 2);
  font-size: var(--font-size-base);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  cursor: pointer;
  transition: all var(--transition-speed) var(--transition-easing);
}

.filter-chip--active {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.filter-chip:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* ===========================
   Status Badge
   =========================== */
.status-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border-radius: var(--border-radius-sm);
}

.status-badge--available {
  background-color: #e6f4ea;
  color: #137333;
}

.status-badge--in-use {
  background-color: #fef7e0;
  color: #856404;
}

.status-badge--out-of-service {
  background-color: #fce8e6;
  color: #c5221f;
}

.status-badge--unknown {
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
}

/* ===========================
   Responsive: Tablet and Desktop
   =========================== */
@media (min-width: 768px) {
  :root {
    --map-height-mobile: 60vh;
  }

  .map-container {
    height: 100vh;
    min-height: 100vh;
  }

  .filter-panel {
    position: fixed;
    top: 80px;
    left: var(--spacing-md);
    right: auto;
    bottom: auto;
    width: 320px;
    border-radius: var(--border-radius);
    border-top: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  }

  .filter-toggle {
    border-radius: var(--border-radius) var(--border-radius) 0 0;
  }

  .station-detail-panel {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    left: auto;
    bottom: auto;
    width: 360px;
    max-height: calc(100vh - var(--spacing-xl));
    border-radius: var(--border-radius);
    transform: translateX(120%);
  }

  .station-detail-panel.station-detail-panel--visible {
    transform: translateX(0);
  }
}

@media (min-width: 1024px) {
  .filter-panel {
    width: 360px;
  }

  .station-detail-panel {
    width: 400px;
  }
}

/* ===========================
   Map Marker Icons
   =========================== */
.marker-icon-wrapper {
  background: transparent !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target-min) !important;
  height: var(--touch-target-min) !important;
}

.marker-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(0, 0, 0, 0.3);
  color: #ffffff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.marker-icon__symbol {
  display: block;
  font-style: normal;
}

/* EV: circle shape */
.marker-icon--ev {
  border-radius: 50%;
}

/* Fuel: rounded square shape */
.marker-icon--fuel {
  border-radius: 6px;
}

/* Petrol: diamond/rotated square (legacy) */
.marker-icon--petrol {
  border-radius: 6px;
}

/* Diesel: triangle (legacy) */
.marker-icon--diesel {
  border-radius: 6px;
}

/* ===========================
   Station Detail Content
   =========================== */
.station-detail__address,
.station-detail__operator,
.station-detail__cost {
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
}

.station-detail__cost {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--font-size-lg);
}

.station-detail__status {
  margin-bottom: var(--spacing-md);
}

.station-detail__connectors {
  margin-bottom: var(--spacing-md);
}

.station-detail__connectors-title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin-bottom: var(--spacing-sm);
}

.station-detail__connector-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.station-detail__connector-item {
  padding: var(--spacing-xs) 0;
  padding-left: var(--spacing-md);
  position: relative;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.station-detail__connector-item::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: bold;
}

.station-detail__connectors-empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin-bottom: var(--spacing-md);
}

.station-detail__navigate {
  display: block;
  width: 100%;
  margin-top: var(--spacing-md);
  text-align: center;
  text-decoration: none;
}

.station-detail__ad {
  margin: var(--spacing-md) 0;
  min-height: 100px;
  background-color: var(--color-surface);
  border-radius: var(--border-radius-sm);
  overflow: hidden;
}

.station-detail__nav-unavailable {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-top: var(--spacing-sm);
}

/* ===========================
   Map Legend (collapsible)
   =========================== */
.map-legend {
  position: fixed;
  bottom: 66px;
  left: var(--spacing-md);
  z-index: var(--z-filter-panel);
  background-color: var(--color-background);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  font-size: var(--font-size-sm);
  overflow: hidden;
}

.map-legend__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  background: none;
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text);
}

.map-legend__chevron {
  font-size: 10px;
  transition: transform var(--transition-speed) var(--transition-easing);
}

.map-legend--collapsed .map-legend__chevron {
  transform: rotate(-90deg);
}

.map-legend__content {
  padding: 0 var(--spacing-md) var(--spacing-sm);
}

.map-legend--collapsed .map-legend__content {
  display: none;
}

.map-legend__title {
  font-weight: 600;
  margin: 0;
  font-size: var(--font-size-sm);
}

.map-legend__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: 2px 0;
}

.map-legend__dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.map-legend__dot--green { background-color: #34a853; }
.map-legend__dot--amber { background-color: #f9ab00; }
.map-legend__dot--red { background-color: #ea4335; }
.map-legend__dot--grey { background-color: #757575; }

/* Start collapsed on mobile */
@media (max-width: 767px) {
  .map-legend {
    bottom: 60px;
  }
  .map-legend .map-legend__content {
    display: none;
  }
  .map-legend .map-legend__chevron {
    transform: rotate(-90deg);
  }
  .map-legend.map-legend--expanded .map-legend__content {
    display: block;
  }
  .map-legend.map-legend--expanded .map-legend__chevron {
    transform: rotate(0deg);
  }
}

/* ===========================
   Search This Area Button
   =========================== */
.search-area-btn {
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background-color: var(--color-background);
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: 24px;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  min-height: var(--touch-target-min);
  transition: all var(--transition-speed) var(--transition-easing);
}

.search-area-btn:hover,
.search-area-btn:focus {
  background-color: var(--color-primary);
  color: #ffffff;
}

.search-area-btn[hidden] {
  display: none;
}

/* ===========================
   Ad Banner
   =========================== */
.ad-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: center;
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-banner[hidden] {
  display: none;
}

.ad-banner__content {
  width: 100%;
  max-width: 728px;
}

.ad-banner__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-decoration: none;
  color: var(--color-text);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
}

.ad-banner__link:hover {
  background-color: #f0f4ff;
  border-color: var(--color-primary);
}

.ad-banner__text {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.ad-banner__sponsor {
  font-size: 11px;
  color: var(--color-text-secondary);
  opacity: 0.7;
}

.ad-banner__placeholder {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

.ad-banner__placeholder a {
  color: var(--color-primary);
}

.ad-banner__remove {
  font-size: 11px;
  color: var(--color-text-secondary);
  text-decoration: underline;
  margin-left: var(--spacing-sm);
}

/* ===========================
   Routing Panel Override
   =========================== */
.leaflet-routing-container {
  background: var(--color-background);
  border-radius: var(--border-radius);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  max-height: 40vh;
  overflow-y: auto;
  max-width: 320px;
}

.leaflet-routing-alt {
  padding: var(--spacing-sm);
}

.leaflet-routing-alt h2 {
  font-size: var(--font-size-base);
  margin-bottom: var(--spacing-sm);
}

.leaflet-routing-alt table td {
  padding: var(--spacing-xs) var(--spacing-sm);
}

/* ===========================
   Utility Classes
   =========================== */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}