/* station-layer styles — scoped to .sl- prefix */

/* Fallback positioning context: .card--map non è relative in app.css.
   Lo diventa solo quando ospita i nostri elementi assoluti. */
.card--map:has(.sl-bar),
.card--map:has(.sl-chip) { position: relative; }

.sl-bar {
  position: absolute;
  top: 56px;  /* below map-info-bar */
  left: 8px;
  right: 8px;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.14);
  font-size: 13px;
  line-height: 1.2;
}
[data-theme="dark"] .sl-bar {
  background: rgba(30, 30, 30, 0.94);
  color: #f0f0f0;
}

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

.sl-bar label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

.sl-bar select {
  padding: 5px 6px;
  font: inherit;
  min-height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  background: #fff;
}
[data-theme="dark"] .sl-bar select {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.3);
  color: #f0f0f0;
}

.sl-search {
  flex: 1;
  min-width: 180px;
  position: relative;
}
.sl-search input {
  width: 100%;
  padding: 5px 8px 5px 28px;
  font: inherit;
  min-height: 32px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
.sl-search::before {
  content: '🔍';
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.6;
}
.sl-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  margin-top: 4px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  z-index: 50;
}
.sl-search-dropdown[hidden] { display: none; }
.sl-search-item {
  padding: 8px 12px;
  cursor: pointer;
}
.sl-search-item:hover,
.sl-search-item[aria-selected="true"] {
  background: rgba(26, 115, 232, 0.12);
}

.sl-badge {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  gap: 6px;
  align-items: center;
}
[data-theme="dark"] .sl-badge { color: rgba(240, 240, 240, 0.8); }

.sl-refresh-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  font-size: 14px;
  opacity: 0.7;
}
.sl-refresh-btn:hover { opacity: 1; }

/* Mobile chip */
.sl-chip {
  display: none;
}
@media (max-width: 700px) {
  .sl-bar { display: none; }
  .sl-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    background: rgba(255,255,255,0.94);
    border-radius: 16px;
    font-size: 13px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    position: absolute;
    top: 56px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    gap: 6px;
    min-height: 40px;
  }
  [data-theme="dark"] .sl-chip {
    background: rgba(30, 30, 30, 0.94);
    color: #f0f0f0;
  }
}

/* Bottom sheet for mobile */
.sl-sheet {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  max-height: 72vh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
  z-index: 100;
  padding: 16px;
  gap: 12px;
  flex-direction: column;
}
.sl-sheet[data-open="true"] { display: flex; }
[data-theme="dark"] .sl-sheet { background: #222; color: #f0f0f0; }
.sl-sheet label { display: flex; flex-direction: column; gap: 4px; }
.sl-sheet select, .sl-sheet input {
  padding: 10px;
  font-size: 15px;
  border: 1px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  min-height: 44px;
}
.sl-sheet-close {
  position: absolute;
  top: 12px; right: 12px;
  background: none; border: none; font-size: 22px; cursor: pointer;
  min-width: 44px; min-height: 44px;
}

.sl-drawer {
  position: fixed;
  top: 64px; right: 8px;
  width: 380px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 80px);
  background: #fff;
  color: #222;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  z-index: 60;
  display: none;
  flex-direction: column;
  overflow: hidden;
}
[data-theme="dark"] .sl-drawer { background: #222; color: #f0f0f0; }
.sl-drawer[data-open="true"] { display: flex; }

.sl-drawer-header {
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  position: sticky; top: 0;
  background: inherit;
}
.sl-drawer-title {
  font-size: 16px;
  font-weight: 600;
}
.sl-drawer-sub {
  font-size: 12px;
  color: rgba(0,0,0,0.55);
  margin-top: 4px;
}
[data-theme="dark"] .sl-drawer-sub { color: rgba(240,240,240,0.65); }
.sl-source-license {
  font-size: 11px;
  opacity: 0.75;
  font-style: italic;
}
.sl-drawer-close {
  position: absolute; top: 10px; right: 10px;
  background: none; border: none; font-size: 22px; cursor: pointer;
  min-width: 44px; min-height: 44px;
  line-height: 1;
}

.sl-drawer-body { padding: 12px 16px; overflow-y: auto; flex: 1; }

.sl-big-value {
  font-size: 40px;
  font-weight: 500;
  margin: 8px 0 0;
}
.sl-agg-desc { font-size: 13px; color: rgba(0,0,0,0.6); }
[data-theme="dark"] .sl-agg-desc { color: rgba(240,240,240,0.7); }
.sl-origin {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: rgba(26,115,232,0.1);
  margin-top: 4px;
}
.sl-origin.sl-origin-interp { background: rgba(255,152,0,0.15); }
.sl-origin.sl-origin-coarse  { background: rgba(158,158,158,0.2); }

.sl-sparkline { margin: 16px 0; min-height: 160px; }

.sl-dashboard {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  font-size: 13px;
  margin-top: 12px;
}
.sl-dashboard-item { padding: 6px 8px; background: rgba(0,0,0,0.03); border-radius: 6px; }
[data-theme="dark"] .sl-dashboard-item { background: rgba(255,255,255,0.05); }

.sl-cta { display: flex; gap: 8px; margin-top: 16px; }
.sl-cta a, .sl-cta button {
  flex: 1; padding: 10px; text-align: center;
  background: rgba(26,115,232,0.18);
  border: 1px solid rgba(26,115,232,0.5);
  border-radius: 6px;
  text-decoration: none;
  color: #0b4c9a;           /* 7.06:1 contrast vs background */
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  min-height: 40px;
}
.sl-cta a:hover, .sl-cta button:hover { background: rgba(26,115,232,0.28); }
[data-theme="dark"] .sl-cta a, [data-theme="dark"] .sl-cta button {
  background: rgba(90,160,255,0.18);
  border-color: rgba(90,160,255,0.5);
  color: #a8c8ff;          /* 8.3:1 contrast vs dark bg */
}

/* Mobile bottom sheet */
@media (max-width: 700px) {
  .sl-drawer {
    top: auto;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: 60vh;
    border-radius: 16px 16px 0 0;
    max-height: 90vh;
  }
}

/* Rispetto preferenza utente: disabilita animazioni/transizioni */
@media (prefers-reduced-motion: reduce) {
  .sl-bar, .sl-drawer, .sl-sheet, .sl-chip,
  .sl-search-dropdown, .sl-refresh-btn, .sl-cta a, .sl-cta button,
  .sl-drawer-close, .sl-sheet-close {
    transition: none !important;
    animation: none !important;
  }
}