/*
 * 6Flaschen WeinApp
 * Zentrale Dark-Mode Surface Guard
 * Hotfix 8.4.9 Revision 9.2
 * Stand: 2026-08-09 Europe/Berlin
 *
 * Ziel:
 * Im Dark Mode duerfen neutrale Oberflaechen und Formularfelder nicht
 * auf helle/weiße Light-Mode-Flaechen zurueckfallen.
 *
 * Diese Datei wird bewusst ALS LETZTE Stylesheet-Schicht geladen.
 * Sie ist keine seitenbezogene Sonderloesung, sondern eine globale
 * Theme-Invariante fuer alle bestehenden und dynamisch erzeugten Komponenten.
 */

html[data-theme="dark"].coastal-ui {
  color-scheme: dark;

  /* Coastal */
  --coastal-bg: #071c27;
  --coastal-bg-deep: #0b2633;
  --coastal-surface: rgba(10, 34, 46, 0.96);
  --coastal-surface-soft: rgba(13, 42, 55, 0.92);
  --coastal-surface-solid: #0b2633;
  --coastal-text: #f5efe4;
  --coastal-muted: #bcc8cc;
  --coastal-separator: rgba(211, 222, 224, 0.15);

  /* Capture */
  --capture-ink: #f5efe4;
  --capture-muted: #bcc8cc;
  --capture-line: rgba(211, 222, 224, 0.16);
  --capture-soft: rgba(10, 34, 46, 0.96);

  /* UI Components */
  --ui-surface-page: #071c27;
  --ui-surface-card: rgba(10, 34, 46, 0.96);
  --ui-surface-card-solid: #0b2633;
  --ui-surface-field: #102f3d;
  --ui-surface-elevated: #102f3d;
  --ui-action-secondary: rgba(12, 39, 51, 0.96);
  --ui-text-primary: #f5efe4;
  --ui-text-secondary: #bcc8cc;
  --ui-border-default: rgba(211, 222, 224, 0.15);
}

/* --------------------------------------------------------------------------
 * 1. Zentrale neutrale Oberflaechen
 * -------------------------------------------------------------------------- */
html[data-theme="dark"][data-theme="dark"].coastal-ui body .card-soft,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .capture-label-panel,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .capture-quick-data,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .capture-primary-axis-editor,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .capture-score-panel,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .capture-mode-switch,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .capture-detailed-intro,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .capture-detailed-axis-editor,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .capture-detailed-score-section,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .capture-detailed-extra-section,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .capture-axis-slider-row,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .wine-axis-editor,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .wine-axis-row,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .edit-record-meta {
  color: #f5efe4 !important;
  background: linear-gradient(155deg, rgba(16, 44, 57, 0.98), rgba(8, 29, 40, 0.98)) !important;
  border-color: rgba(211, 222, 224, 0.16) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.20) !important;
}

/* Upload-Kacheln bleiben dunkler als die umgebende Karte. */
html[data-theme="dark"][data-theme="dark"].coastal-ui body .upload-card,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .label-upload-tile.upload-card,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .existing-image,
html[data-theme="dark"][data-theme="dark"].coastal-ui body .upload-current {
  color: #f5efe4 !important;
  background: #0d2b39 !important;
  border-color: rgba(214, 175, 98, 0.24) !important;
}

/* Native File-Input innerhalb der kompakten Etikett-Kacheln bleibt unsichtbar.
   Das verhindert das Durchscheinen von "Keine Datei ausgewählt". */
html[data-theme="dark"][data-theme="dark"].coastal-ui body .label-upload-input {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  background: transparent !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* --------------------------------------------------------------------------
 * 2. Alle normalen Formularfelder dunkel
 *
 * Der bisherige sylt-dark.css setzte diese absichtlich auf #fffdf8.
 * Revision 9.2 macht Dark Mode konsequent dunkel.
 * -------------------------------------------------------------------------- */
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body
input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body select,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body textarea,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body .input,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body .select,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body .textarea,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body .ui-field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body .ui-field select,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body .ui-field textarea,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body .coastal-recommendation-page .wine-recommendation-field select,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body .wr6-archive-filter input,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body .wr6-archive-filter select,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body .wr6-step-two-form select {
  color: #f5efe4 !important;
  -webkit-text-fill-color: #f5efe4 !important;
  background: #102f3d !important;
  background-color: #102f3d !important;
  border-color: rgba(214, 175, 98, 0.28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025) !important;
  caret-color: #f5efe4 !important;
  color-scheme: dark !important;
}

html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body
input:not([type="hidden"])::placeholder,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body textarea::placeholder {
  color: #91a4ab !important;
  -webkit-text-fill-color: #91a4ab !important;
  opacity: 1 !important;
}

html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body option,
html[data-theme="dark"][data-theme="dark"][data-theme="dark"].coastal-ui body optgroup {
  color: #f5efe4 !important;
  background: #102f3d !important;
}

/* Readonly/disabled bleiben dunkel, werden nur visuell gedimmt. */
html[data-theme="dark"][data-theme="dark"].coastal-ui body
input[readonly],
html[data-theme="dark"][data-theme="dark"].coastal-ui body
input:disabled,
html[data-theme="dark"][data-theme="dark"].coastal-ui body
select:disabled,
html[data-theme="dark"][data-theme="dark"].coastal-ui body
textarea:disabled {
  color: #aebbc0 !important;
  -webkit-text-fill-color: #aebbc0 !important;
  background: #0c2734 !important;
  opacity: 0.82 !important;
}

/* Browser-Autofill darf keine helle Flaeche zurueckbringen. */
html[data-theme="dark"][data-theme="dark"].coastal-ui body input:-webkit-autofill,
html[data-theme="dark"][data-theme="dark"].coastal-ui body input:-webkit-autofill:hover,
html[data-theme="dark"][data-theme="dark"].coastal-ui body input:-webkit-autofill:focus {
  -webkit-text-fill-color: #f5efe4 !important;
  -webkit-box-shadow: 0 0 0 1000px #102f3d inset !important;
  box-shadow: 0 0 0 1000px #102f3d inset !important;
  caret-color: #f5efe4 !important;
}

/* Allgemeine File-Inputs, wenn sie nicht als unsichtbare Upload-Kachel laufen. */
html[data-theme="dark"][data-theme="dark"].coastal-ui body
input[type="file"]:not(.label-upload-input) {
  color: #d6dde0 !important;
  -webkit-text-fill-color: #d6dde0 !important;
  background: #102f3d !important;
  border-color: rgba(214, 175, 98, 0.28) !important;
  color-scheme: dark !important;
}

html[data-theme="dark"][data-theme="dark"].coastal-ui body
input[type="file"]:not(.label-upload-input)::file-selector-button {
  color: #10232b !important;
  background: linear-gradient(135deg, #d8b675, #bd8d3d) !important;
  border: 0 !important;
  border-radius: 10px !important;
}

/* --------------------------------------------------------------------------
 * 3. Capture-Typografie und Achsen
 * -------------------------------------------------------------------------- */
html[data-theme="dark"][data-theme="dark"].coastal-ui body.coastal-capture-page
.capture-panel-title,
html[data-theme="dark"][data-theme="dark"].coastal-ui body.coastal-capture-page
.capture-primary-axis-editor > summary,
html[data-theme="dark"][data-theme="dark"].coastal-ui body.coastal-capture-page
.capture-score-number {
  color: #fffaf1 !important;
  -webkit-text-fill-color: #fffaf1 !important;
}

html[data-theme="dark"][data-theme="dark"].coastal-ui body.coastal-capture-page
.capture-panel-copy,
html[data-theme="dark"][data-theme="dark"].coastal-ui body.coastal-capture-page
.capture-score-explanation,
html[data-theme="dark"][data-theme="dark"].coastal-ui body.coastal-capture-page
.wine-axis-intro,
html[data-theme="dark"][data-theme="dark"].coastal-ui body.coastal-capture-page
.wine-axis-pole,
html[data-theme="dark"][data-theme="dark"].coastal-ui body.coastal-capture-page
.hint {
  color: #bcc8cc !important;
  -webkit-text-fill-color: #bcc8cc !important;
}

/* --------------------------------------------------------------------------
 * 4. Bekannte alte Light-Mode-Sonderfaelle anderer Seiten neutralisieren
 * -------------------------------------------------------------------------- */
html[data-theme="dark"][data-theme="dark"].coastal-ui body
.coastal-recommendation-page .wine-recommendation-panel,
html[data-theme="dark"][data-theme="dark"].coastal-ui body
.coastal-recommendation-page .wine-recommendation-package-meta > *,
html[data-theme="dark"][data-theme="dark"].coastal-ui body
.coastal-recommendation-page .wine-recommendation-merchant-badge {
  background: rgba(10, 34, 46, 0.96) !important;
  color: #f5efe4 !important;
  border-color: rgba(211, 222, 224, 0.15) !important;
}

/* Statusfarben duerfen farbig sein, aber nicht hell/weiß. */
html[data-theme="dark"][data-theme="dark"].coastal-ui body
.coastal-recommendation-page .wine-recommendation-status-card {
  background: linear-gradient(145deg, rgba(23, 55, 45, 0.98), rgba(14, 39, 34, 0.98)) !important;
}

/* --------------------------------------------------------------------------
 * 5. Fokus
 * -------------------------------------------------------------------------- */
html[data-theme="dark"][data-theme="dark"].coastal-ui body
input:focus,
html[data-theme="dark"][data-theme="dark"].coastal-ui body
select:focus,
html[data-theme="dark"][data-theme="dark"].coastal-ui body
textarea:focus {
  outline: 3px solid rgba(214, 175, 98, 0.18) !important;
  border-color: rgba(214, 175, 98, 0.58) !important;
}