/* ============================================================
   Spritpreise Dashboard – Stylesheet
   Mobile-Typografie:
   - 16px-Basis, Meta/Labels ≥ .85rem, Buttons .9rem, Preise 1.15rem
   - Touch-Targets ≥ 44px auf Touch-Geräten (pointer: coarse)
   - Inputs 16px auf Touch-Geräten → verhindert iOS-Auto-Zoom
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:          #0f1117;
  --surface:     #1a1d2e;
  --border:      #2a2d45;
  --text:        #e2e4f0;
  --muted:       #666c8a;
  --diesel:      #ffd166;
  --e5:          #06d6a0;
  --e10:         #56b4f5;
  /* Textvarianten – im Dunkelmodus gleich wie Chart-Farben */
  --diesel-text: var(--diesel);
  --e5-text:     var(--e5);
  --e10-text:    var(--e10);
  /* Interaktionsfarbe */
  --accent:      #4d9fff;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  min-height: 100vh;
}

/* ── Layout ── */
.wrap    { max-width: 1100px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

/* ── Header ── */
header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
header h1  { font-size: 1.5rem; font-weight: 700; letter-spacing: -.3px; }
header h1 span { margin-right: .4rem; }
.last-update { font-size: .875rem; color: var(--muted); }

.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .9rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: .9rem;
  cursor: pointer;
  font-family: inherit;
  transition: all .18s;
}
.btn-refresh:hover { border-color: var(--accent); color: var(--accent); }
.btn-refresh:disabled { opacity: .5; cursor: not-allowed; }
.btn-refresh.loading { border-color: color-mix(in srgb, var(--accent) 33%, transparent); color: var(--accent); }
.btn-refresh.loading .icon { animation: spin .8s linear infinite; }
.btn-refresh.success { border-color: #00d2b4; color: #00d2b4; }
.btn-refresh.error   { border-color: #f48771; color: #f48771; }
@keyframes spin { to { transform: rotate(360deg); } }

.refresh-msg {
  font-size: .85rem;
  color: var(--muted);
  margin-left: .3rem;
}

/* ── Controls ── */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.control-group { display: flex; gap: .4rem; flex-wrap: wrap; }
.control-label  { font-size: .85rem; color: var(--muted); align-self: center; margin-right: .1rem; }

.btn {
  padding: .45rem .9rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-size: .9rem;
  cursor: pointer;
  transition: all .18s;
  font-family: inherit;
  white-space: nowrap;
}
.btn:hover { border-color: #444; color: var(--text); }
.btn.active { color: #fff; border-color: transparent; }

/* Station-Buttons: farbiger Punkt links, klarer aktiv/inaktiv-Kontrast */
.btn-station {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding-left: .7rem;
}
.btn-station::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c);
  flex-shrink: 0;
  transition: opacity .18s;
}
/* Inaktiv: Punkt ausgegraut, Text grau, dunkler Hintergrund */
.btn-station:not(.active) {
  background: #13151f;
  border-color: var(--border);
  color: var(--muted);
}
.btn-station:not(.active)::before { opacity: .3; }
.btn-station:not(.active):hover { border-color: #444; color: #999; }
.btn-station:not(.active):hover::before { opacity: .6; }

/* Aktiv: farbiger Rand, farbiger Text, sichtbarer Hintergrund */
.btn-station.active {
  border-color: var(--c);
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent);
}

/* Alle-Button */
.btn-all { font-weight: 600; }
.btn-all.active {
  background: #252840;
  border-color: #666c8a;
  color: var(--text);
}

/* ── Preiskarten ── */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  position: relative;
  transition: border-color .2s;
}
.card:hover { border-color: #3a3d5a; }
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: .75rem;
}
.card-name  { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.card-brand { font-size: .85rem; color: var(--muted); margin-top: .1rem; }
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-top: .3rem;
  flex-shrink: 0;
}
.status-dot.open   { background: #00d2b4; box-shadow: 0 0 6px #00d2b490; }
.status-dot.closed { background: #555; }

.prices { display: flex; flex-direction: column; gap: .3rem; }
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1rem;
}
.price-label { color: var(--muted); font-size: .875rem; }
.price-val   { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.price-val.diesel-color { color: var(--diesel-text); }
.price-val.e5-color     { color: var(--e5-text); }
.price-val.e10-color    { color: var(--e10-text); }

.badge-cheap {
  font-size: .8rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  background: #1a3a2a;
  color: #00d2b4;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-left: .4rem;
}
.color-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  border-radius: 10px 0 0 10px;
}

/* ── Chart-Bereich ── */
.chart-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1rem;
}
.chart-controls {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.fuel-tabs { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.btn-avg   { margin-left: .5rem; color: var(--muted); }
.btn-trend { margin-left: .2rem; color: var(--muted); }
.btn-avg.active   { background: #252820; color: #c8c860; border-color: #a0a040; }
.btn-trend.active { background: #1a2e2e; color: #60c0c0; border-color: #408080; }
.btn-fuel.active[data-fuel="diesel"] { background: color-mix(in srgb, var(--diesel-text) 12%, transparent); color: var(--diesel-text); border-color: var(--diesel-text); }
.btn-fuel.active[data-fuel="e5"]     { background: color-mix(in srgb, var(--e5-text)     12%, transparent); color: var(--e5-text);     border-color: var(--e5-text); }
.btn-fuel.active[data-fuel="e10"]    { background: color-mix(in srgb, var(--e10-text)    12%, transparent); color: var(--e10-text);    border-color: var(--e10-text); }

.time-tabs { display: flex; gap: .4rem; flex-wrap: wrap; }
.btn-range.active { background: #252840; color: var(--text); border-color: #555; }

/* ── Datepicker ── */
.date-range {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
}
.date-range label {
  font-size: .85rem;
  color: var(--muted);
}
input[type="date"] {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  padding: .35rem .6rem;
  cursor: pointer;
  transition: border-color .15s;
  outline: none;
}
input[type="date"]:hover  { border-color: #444; }
input[type="date"]:focus  { border-color: #555c7a; }
input[type="date"].active { border-color: #569cd6; color: #9cdcfe; }
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(.5);
  cursor: pointer;
}
.btn-reset-dates {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 .2rem;
  display: none;
  transition: color .15s;
}
.btn-reset-dates:hover { color: #f48771; }
.btn-reset-dates.visible { display: inline; }
.time-controls {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.time-sep {
  width: 1px;
  height: 16px;
  background: var(--border);
  flex-shrink: 0;
}

.chart-wrap { position: relative; height: clamp(260px, 38vh, 440px); }

.no-data {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--muted);
  font-size: 1rem;
}

/* ── Empfehlung ── */
.rec-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.25rem 1.25rem 1rem;
  margin-bottom: 1.5rem;
}
.rec-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.1rem;
  flex-wrap: wrap;
}
.rec-header h2 { font-size: 1.1rem; font-weight: 600; color: var(--text); }
.rec-badge {
  font-size: .8rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.rec-badge-0 { background: color-mix(in srgb, var(--muted) 18%, var(--surface)); color: var(--muted); }
.rec-badge-1 { background: color-mix(in srgb, #dcdcaa 15%, var(--surface));   color: #dcdcaa; }
.rec-badge-2 { background: color-mix(in srgb, var(--e10-text) 15%, var(--surface)); color: var(--e10-text); }
.rec-badge-3 { background: color-mix(in srgb, var(--e5-text)  15%, var(--surface)); color: var(--e5-text); }

.rec-period-controls { display: flex; gap: .25rem; margin-left: .25rem; }
.btn-rec-period { padding: .3rem .65rem; font-size: .85rem; }
.btn-rec-period.active { background: color-mix(in srgb, var(--accent) 15%, var(--surface)); border-color: var(--accent); color: var(--accent); }

.theme-select {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 6px;
  padding: .32rem .55rem;
  font-size: .85rem;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  max-width: 150px;
  transition: border-color .18s, color .18s;
}
.theme-select:hover { border-color: #444; color: var(--text); }
.theme-select option { background: #1a1d2e; }
.btn-save-theme { font-size: .85rem; padding: .32rem .7rem; }
.theme-save-msg { font-size: .85rem; color: var(--e5-text); opacity: 0; transition: opacity .3s; }
.theme-save-msg.visible { opacity: 1; }
.theme-save-msg.error    { color: #f48771; }

.rec-body { display: flex; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.rec-text-wrap { flex: 1; min-width: 200px; }
.rec-fazit {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text);
}
.rec-fazit strong { color: var(--text); }
.rec-savings {
  font-size: .9rem;
  color: var(--muted);
  margin-top: .4rem;
}
.rec-savings span { color: var(--e5-text); font-weight: 600; }
.rec-empty {
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.7;
}
.rec-empty .rec-hint {
  margin-top: .5rem;
  font-size: .875rem;
  color: #444c6a;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.rec-chart-wrap {
  flex: 0 0 420px;
  max-width: 100%;
  height: 130px;
  position: relative;
}

/* ── Admin-Login ── */
.admin-bar {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.login-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.login-form input {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: inherit;
  font-size: .9rem;
  padding: .32rem .7rem;
  outline: none;
  transition: border-color .15s;
}
.login-form input:focus { border-color: #555c7a; }
.login-form button {
  padding: .32rem .9rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  font-family: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: all .15s;
}
.login-form button:hover { border-color: #4d9fff; color: #4d9fff; }
.login-error { font-size: .875rem; color: #f48771; }
.admin-info  { font-size: .9rem; color: var(--muted); display: flex; align-items: center; gap: .75rem; }
.admin-info strong { color: var(--text); }
.admin-info a { color: var(--muted); font-size: .85rem; text-decoration: none; transition: color .15s; }
.admin-info a:hover { color: #f48771; }

/* ── Debug-Panel ── */
.debug-panel {
  margin-top: 2rem;
  border: 1px solid #2a2d45;
  border-radius: 10px;
  overflow: hidden;
}
.debug-panel summary {
  padding: .75rem 1.1rem;
  cursor: pointer;
  font-size: .95rem;
  color: var(--muted);
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: .5rem;
  transition: background .15s;
}
.debug-panel summary::-webkit-details-marker { display: none; }
.debug-panel summary::before {
  content: '▶';
  font-size: .65rem; /* dekoratives Icon, kein Text */
  transition: transform .2s;
}
.debug-panel[open] summary::before { transform: rotate(90deg); }
.debug-panel[open] summary { background: #13151f; color: var(--text); }
.debug-panel summary:hover { background: #13151f; }

.debug-panel h3 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  padding: 1rem 1.1rem .5rem;
}
.debug-panel h3 span { text-transform: none; letter-spacing: 0; font-weight: normal; }

.debug-scroll { overflow-x: auto; padding: 0 1.1rem 1rem; }
.debug-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: .85rem;
  font-family: monospace;
  min-width: 560px;
}
.debug-panel th {
  text-align: left;
  color: #555c7a;
  font-weight: normal;
  border-bottom: 1px solid #2a2d45;
  padding: .3rem .6rem .3rem 0;
}
.debug-panel td {
  padding: .3rem .6rem .3rem 0;
  border-bottom: 1px solid #1f2235;
  color: var(--text);
  white-space: nowrap;
}
.debug-panel tr:last-child td { border-bottom: none; }
.debug-panel .dim    { color: var(--muted); }
.debug-panel .mono   { color: #9cdcfe; }
.debug-panel .diesel { color: var(--diesel-text); }
.debug-panel .e5     { color: var(--e5-text); }
.debug-panel .e10    { color: var(--e10-text); }
.dot-open   { color: #00d2b4; }
.dot-closed { color: #444; }

.status-badge {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: .8rem;
  font-family: monospace;
}
.status-ok  { background: #1e3a2f; color: #00d2b4; }
.status-nc  { background: #252840; color: #666c8a; }
.status-err { background: #3a1e1e; color: #f48771; }

/* ── Touch-Geräte (Handy & Tablet) ────────────────────────────
   pointer: coarse trifft alle Touch-Geräte unabhängig von der
   Bildschirmbreite. Zwei Ziele:
   1. Touch-Targets min. 44px (Apple HIG / Material Guidelines)
   2. Inputs/Selects min. 16px Schrift → iOS Safari zoomt sonst
      beim Fokussieren automatisch in die Seite hinein.          */
@media (pointer: coarse) {
  .btn,
  .btn-refresh,
  .btn-rec-period,
  .login-form button {
    min-height: 44px;
    padding: .55rem 1rem;
    font-size: .9rem;
  }
  .btn-reset-dates {
    min-width: 44px;
    min-height: 44px;
    font-size: 1.2rem;
  }
  input[type="date"],
  .login-form input,
  .theme-select {
    font-size: 16px;   /* iOS-Auto-Zoom-Schwelle */
    min-height: 44px;
    padding: .45rem .7rem;
  }
  .theme-select { max-width: 170px; }
  .control-group, .fuel-tabs, .time-tabs { gap: .5rem; }
  .price-row  { font-size: 1.05rem; }
  .price-val  { font-size: 1.25rem; }
}

/* ── Schmale Viewports (Layout) ──────────────────────────────── */
@media (max-width: 640px) {
  .wrap { padding: 1rem .75rem 2.5rem; }
  header h1 { font-size: 1.25rem; }
  .chart-section, .rec-section { padding: 1rem .85rem .85rem; }
  .chart-wrap { height: clamp(240px, 45vh, 380px); }
  .rec-chart-wrap { flex: 1 1 100%; }
  .time-sep { display: none; }
}

/* ── Light-Mode Overrides ─────────────────────────────────────
   Greifen wenn data-theme-mode="light" auf <html> gesetzt wird.
   Überschreiben alle hardcodierten Dunkelfarben.               */
[data-theme-mode="light"] {
  --diesel-text: #8b6a00;
  --e5-text:     #0a7a50;
  --e10-text:    #1060cc;
  --accent:      #1868cc; /* CSS-Fallback – JS setzt den theme-spezifischen Wert */
}

/* Empfehlungs-Text: strong in echten Theme-Farben, nicht weiß */
[data-theme-mode="light"] .rec-fazit strong       { font-weight: 700; }
[data-theme-mode="light"] .rec-badge-1            { background: #fff8d6; color: #7a6000; }
[data-theme-mode="light"] .rec-empty .rec-hint    { color: var(--muted); }

/* Stationsbuttons: kein fast-schwarzer Hintergrund */
[data-theme-mode="light"] .btn-station:not(.active) {
  background: var(--surface);
  border-color: var(--border);
  color: var(--muted);
}
[data-theme-mode="light"] .btn-station:not(.active):hover {
  border-color: var(--muted);
  color: var(--text);
}
[data-theme-mode="light"] .btn-station:not(.active)::before { opacity: .5; }

/* Alle-Button */
[data-theme-mode="light"] .btn-all.active {
  background: color-mix(in srgb, var(--text) 10%, var(--surface));
  border-color: var(--border);
  color: var(--text);
}

/* Allgemeines Button-Hover */
[data-theme-mode="light"] .btn:hover { border-color: var(--muted); color: var(--text); }

/* Zeitraum-Buttons aktiv */
[data-theme-mode="light"] .btn-range.active {
  background: color-mix(in srgb, var(--text) 10%, var(--surface));
  color: var(--text);
  border-color: var(--muted);
}

/* Ø / ≈ Overlay-Buttons aktiv */
[data-theme-mode="light"] .btn-avg.active   { background: #faf8d0; color: #5a5000; border-color: #8a7800; }
[data-theme-mode="light"] .btn-trend.active { background: #d0f4f4; color: #005050; border-color: #008080; }

/* Karten-Hover */
[data-theme-mode="light"] .card:hover { border-color: var(--muted); }

/* Günstig-Badge auf Karten */
[data-theme-mode="light"] .badge-cheap {
  background: color-mix(in srgb, var(--e5-text) 12%, transparent);
  color: var(--e5-text);
}

/* Refresh-Button Status */
[data-theme-mode="light"] .btn-refresh.success { border-color: var(--e5-text); color: var(--e5-text); }
[data-theme-mode="light"] .btn-refresh.error   { border-color: #cc2200; color: #cc2200; }
[data-theme-mode="light"] .btn-reset-dates:hover { color: #cc2200; }

/* Datepicker aktiv */
[data-theme-mode="light"] input[type="date"]:hover  { border-color: var(--muted); }
[data-theme-mode="light"] input[type="date"]:focus  { border-color: var(--accent); }
[data-theme-mode="light"] input[type="date"].active { border-color: var(--accent); color: var(--accent); }
[data-theme-mode="light"] input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

/* Theme-Dropdown Option-Hintergrund */
[data-theme-mode="light"] .theme-select option { background: var(--surface); color: var(--text); }
[data-theme-mode="light"] .theme-select:hover  { border-color: var(--muted); color: var(--text); }

/* Debug-Panel */
[data-theme-mode="light"] .debug-panel th   { color: var(--muted); border-bottom-color: var(--border); }
[data-theme-mode="light"] .debug-panel td   { border-bottom-color: var(--border); }
[data-theme-mode="light"] .debug-panel .mono { color: var(--accent); }
[data-theme-mode="light"] .dot-open  { color: var(--e5-text); }
[data-theme-mode="light"] .dot-closed { color: var(--muted); }
[data-theme-mode="light"] .status-ok  { background: color-mix(in srgb, var(--e5-text) 12%, transparent); color: var(--e5-text); }
[data-theme-mode="light"] .status-nc  { background: color-mix(in srgb, var(--muted) 12%, transparent);   color: var(--muted); }
[data-theme-mode="light"] .status-err { background: color-mix(in srgb, #cc2200 10%, transparent);        color: #cc2200; }