/* preisarchiv.css – Preisarchiv-Seite (Spritpreise im Zeitverlauf)
   Globale Resets (*, body) und .wrap werden vom Twig-Basis-Layout übernommen. */

/* Hilfe-Button relativ zum Content-Bereich verankern */
.content-inner { position: relative; }

h2 { font-size: 1rem; margin: 0 0 10px; color: #444; }

/* Modus-Tabs */
.tab-bar { display: flex; gap: 4px; margin-bottom: 16px; flex-wrap: wrap; }
.tab-btn { padding: 7px 16px; border: 1px solid #ccc; background: #fff; border-radius: 4px; cursor: pointer; font-size: 13px; }
.tab-btn.active { background: #2d6a2d; color: #fff; border-color: #2d6a2d; }

/* Controls */
.controls { background: #fff; border-radius: 8px; padding: 14px 16px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ctrl-group { display: flex; flex-direction: column; gap: 4px; }
.ctrl-group label { font-size: 12px; color: #666; font-weight: 500; }
.ctrl-group select, .ctrl-group input { padding: 5px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; background: #fff; }
.ctrl-group input[type=checkbox] { width: auto; }
.sorte-group { display: flex; gap: 8px; flex-wrap: wrap; }
.sorte-cb { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.sorte-cb input { margin: 0; }
.btn-load { padding: 7px 20px; background: #2d6a2d; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; align-self: flex-end; }
.btn-load:hover { background: #245a24; }

/* Chart + Tabelle */
.chart-box { background: #fff; border-radius: 8px; padding: 16px; margin-bottom: 16px; }
.chart-wrap { position: relative; }
.table-box { background: #fff; border-radius: 8px; padding: 16px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { background: #f5f5f5; padding: 7px 10px; text-align: left; border-bottom: 2px solid #ddd; white-space: nowrap; }
td { padding: 6px 10px; border-bottom: 1px solid #eee; white-space: nowrap; }
tr:hover td { background: #fafff7; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.highlight { font-weight: 600; color: #2d6a2d; }

/* Info-Bar */
.info-bar { font-size: 12px; color: #888; margin-bottom: 8px; }
.badge { display: inline-block; padding: 2px 8px; border-radius: 10px; background: #e8f5e9; color: #2d6a2d; font-size: 11px; font-weight: 600; margin-left: 6px; }

/* Loading / Error */
.loading { padding: 40px; text-align: center; color: #888; }
.error-msg { padding: 12px 16px; background: #fff3cd; border-left: 4px solid #f0a500; border-radius: 4px; margin-bottom: 12px; font-size: 13px; }

/* CSV-Bereich */
.csv-section { background: #fff; border-radius: 8px; padding: 14px 16px; margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-csv { padding: 6px 16px; background: #fff; color: #2d6a2d; border: 1px solid #2d6a2d; border-radius: 4px; cursor: pointer; font-size: 13px; }
.btn-csv:hover { background: #f0f8f0; }
.btn-png { padding: 6px 16px; background: #fff; color: #1a4e8c; border: 1px solid #1a4e8c; border-radius: 4px; cursor: pointer; font-size: 13px; }
.btn-png:hover { background: #f0f4ff; }
.btn-minmax { padding: 6px 16px; background: #fff; color: #666; border: 1px solid #bbb; border-radius: 4px; cursor: pointer; font-size: 13px; }
.btn-minmax:hover { background: #f5f5f5; }
.btn-minmax.active { background: #fff8e1; color: #92400e; border-color: #d97706; }
.csv-info { font-size: 12px; color: #888; }
.chart-wt-hint { font-size: 12px; color: #666; text-align: center; padding: 4px 0 2px; display: none; }
.chart-wt-hint strong { font-weight: 500; color: #444; }
.aufschl-legende { display: none; justify-content: center; flex-wrap: wrap; gap: 6px 14px; padding: 4px 8px 6px; font-size: 12px; color: #555; }
.aufschl-legende-item { display: inline-flex; align-items: center; gap: 5px; }
.aufschl-legende-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 2px; flex-shrink: 0; }

/* Sortenfarben */
.color-super  { color: #4e9a43; }
.color-e10    { color: #2196f3; }
.color-diesel { color: #222222; }
.color-oel    { color: #e53935; }

/* Währungsleiste */
.currency-bar { background: #fff; border-radius: 8px; padding: 7px 14px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.currency-bar label { font-size: 12px; color: #666; font-weight: 500; white-space: nowrap; }
.currency-bar select { padding: 4px 8px; border: 1px solid #ccc; border-radius: 4px; font-size: 13px; background: #fff; }
.currency-rate { font-size: 11px; color: #aaa; }

/* Kalender-Einfärbung Tabelle */
tr.row-wochenende  td { background: #fff0f0; }
tr.row-wochenende:hover  td { background: #fde8e8; }
tr.row-feiertag    td { background: #e8f0ff; }
tr.row-feiertag:hover    td { background: #d8e4ff; }
tr.row-ferien      td { background: #f0fff4; }
tr.row-ferien:hover      td { background: #dcf5e4; }
tr.row-brueckentag td { background: #fffde8; }
tr.row-brueckentag:hover td { background: #fff5c0; }

/* Kalender-Filter: Klassen am #table-area blenden Farben aus */
#table-area.hide-we tr.row-wochenende  td,
#table-area.hide-we tr.row-wochenende:hover  td { background: none !important; }
#table-area.hide-ft tr.row-feiertag    td,
#table-area.hide-ft tr.row-feiertag:hover    td { background: none !important; }
#table-area.hide-fr tr.row-ferien      td,
#table-area.hide-fr tr.row-ferien:hover      td { background: none !important; }
#table-area.hide-bt tr.row-brueckentag td,
#table-area.hide-bt tr.row-brueckentag:hover td { background: none !important; }

/* Kalender-Legende */
.kal-legende { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #555; margin-bottom: 8px; align-items: center; }
.kal-sw { display: inline-block; width: 14px; height: 14px; border-radius: 2px; vertical-align: middle; margin-right: 4px; }
.kal-sw-we { background: #fff0f0; border: 1px solid #f5c0c0; }
.kal-sw-ft { background: #e8f0ff; border: 1px solid #a0b8ff; }
.kal-sw-fr { background: #f0fff4; border: 1px solid #90d9a0; }
.kal-sw-bt { background: #fffde8; border: 1px solid #e0d070; }

/* Tag-Optionen Panel (Kalender + Wochentage) */
.tag-panel { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; padding: 10px 12px; background: #f8f9fc; border: 1px solid #dde2ef; border-radius: 6px; }
.tag-panel-section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tag-panel-section > .tps-label { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #9096a8; }
.tag-panel-divider { width: 1px; background: #dde2ef; align-self: stretch; }

/* Kalender-Filter-Checkboxen */
.kal-filter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.kal-filter > label { display: flex; align-items: center; gap: 4px; font-size: 12px; cursor: pointer; }
.kal-filter .kal-badge { padding: 1px 7px; border-radius: 3px; font-size: 11px; }

/* Wochentag-Filter */
.wt-filter { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.wt-filter > label { display: flex; align-items: center; gap: 0; font-size: 12px; cursor: pointer; }
.wt-filter > label input { display: none; }
.wt-day { display: inline-block; min-width: 30px; text-align: center; padding: 3px 5px; border-radius: 3px; font-size: 12px; font-weight: 600; background: #f0f0f0; border: 1px solid #ccc; transition: background .1s, color .1s; user-select: none; }
.wt-filter > label input:not(:checked) + .wt-day { opacity: .35; }
.wt-day.wt-we { background: #fff0f0; border-color: #f5c0c0; color: #c04040; }
.wt-quick { display: flex; gap: 4px; margin-top: 2px; }
.wt-filter-btn { font-size: 11px; padding: 2px 8px; border: 1px solid #ccc; border-radius: 3px; background: #f8f8f8; cursor: pointer; color: #555; }
.wt-filter-btn:hover { background: #e8e8e8; }

/* Preisaufschlüsselung */
.aufschl-note { font-size: 11px; color: #8a6000; background: #fff8e1; border: 1px solid #ffe082; border-radius: 3px; padding: 3px 8px; margin-top: 4px; display: none; }

/* Hilfe-Modal: Tabellenzellen umbrechen */
.bp-help-table td, .bp-help-table th { word-break: break-word; overflow-wrap: break-word; white-space: normal; }