/* Ergaenzungen NUR fuer das Werber-Portal (werber.html). styles.css bleibt
   unangetastet -> die Hauptseite (index.html) aendert sich nicht. */

/* MapLibre-Popups dunkel (maplibre-gl.css laedt NACH dieser Datei -> !important). */
.maplibregl-popup .maplibregl-popup-content {
  background: #15171c !important; color: #e7e9ee !important;
  border: 1px solid var(--border); border-radius: var(--radius); font: inherit;
  box-shadow: 0 4px 16px rgba(0,0,0,.5);
}
.maplibregl-popup .maplibregl-popup-content .muted { color: #9aa0aa !important; }
.maplibregl-popup-close-button { color: #e7e9ee !important; }

/* Login-Tabs (Werber E-Mail/Passwort vs. Betreiber-Google) */
.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab {
  flex: 1; padding: 10px; text-align: center; cursor: pointer;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--muted); font-weight: 600;
}
.tab.active { color: var(--text); border-color: var(--primary); }

.form-row { margin-bottom: 12px; }
.form-row label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.form-row input {
  width: 100%; padding: 10px; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
}
.link-btn { background: none; border: none; color: var(--primary); cursor: pointer; padding: 0; font-size: 13px; }

/* Sprach-Test (TTS) + KI-Panel im Anzeigen-Editor */
.voice-field textarea {
  width: 100%; min-height: 60px; box-sizing: border-box; resize: vertical;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); color: var(--text);
  padding: 10px; font: inherit;
}
.voice-tools { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.meter { font-size: 13px; color: var(--muted); }
.meter b { color: var(--text); }
.budget-ok { color: var(--success); }
.budget-over { color: var(--warning); }

.ai-panel {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 12px; margin: 8px 0 16px; background: var(--bg);
}
.ai-panel h3 { margin: 0 0 8px; font-size: 14px; color: var(--primary); text-transform: uppercase; letter-spacing: .04em; }
.ai-panel .hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

.review-note {
  border-left: 3px solid var(--warning); padding: 6px 10px; margin-top: 8px;
  font-size: 13px; color: var(--text); background: var(--bg); border-radius: 4px;
}

/* Zusaetzliche Toast-Varianten (styles.css kennt nur ok/err). */
.toast.warn { border-color: var(--warning); color: var(--warning); }
.toast.info { border-color: var(--primary); color: var(--primary); }

/* Marke als Home-Link, aber wie Text aussehen (nicht wie ein Link). */
a.brand { color: var(--text); text-decoration: none; }
a.brand:hover { opacity: .85; }

/* Owner-Diff: was der Werber seit der Freigabe geaendert hat */
.diff-box {
  margin-top: 8px; padding: 8px 10px; border-radius: var(--radius);
  background: var(--bg); border: 1px solid var(--warning);
}
.diff-title { font-size: 12px; color: var(--warning); font-weight: 600; margin-bottom: 4px; }
.diff-row { font-size: 13px; color: var(--text); margin: 2px 0; }
.diff-field { color: var(--muted); }
.diff-old { color: var(--muted); text-decoration: line-through; }
.diff-new { color: var(--text); font-weight: 600; }
.diff-img { height: 32px; border-radius: 4px; vertical-align: middle; border: 1px solid var(--border); }

/* POI-Standort-Picker im Anzeigen-Editor */
.poi-map { height: 260px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }

/* Statistik-Diagramm */
.chart-box { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; margin: 6px 0; }
.chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 4px 0; font-size: 12px; color: var(--muted); }
.chart-leg { display: flex; align-items: center; gap: 5px; }
.chart-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }

/* ID-Chip (Klick = kopieren) */
.id-line { margin: 3px 0; }
.id-chip {
  display: inline-block; font-size: 11px; color: var(--muted);
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px;
  padding: 1px 6px; cursor: pointer; font-family: ui-monospace, monospace;
}
.id-chip:hover { color: var(--text); border-color: var(--primary); }

/* Statistik-Tabelle */
.stat-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.stat-table th, .stat-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.stat-table th { color: var(--muted); font-weight: 600; font-size: 12px; }
.stat-table td:not(:first-child), .stat-table th:not(:first-child) { text-align: right; }

/* Interaktives Statistik-Diagramm (Chart.js) */
.stats-canvas-box { position: relative; height: 260px; margin: 4px 0; }
.stat-bar { display: flex; align-items: center; margin: 4px 0; }
.stat-range { display: flex; gap: 6px; flex-wrap: wrap; }