/*
 * SportDirector — Farbthemen (Dark Mode), SPEC-014. (a) :root hell, (b) dunkel,
 * (c) Regeln, die die Token lesen. „System" löst js/theme.js auf (deshalb keine
 * Media-Query). Muss als LETZTES Stylesheet im <head> stehen (vorlage.php).
 */

/* (a) Hell — exakt die bisher wirksamen Werte; fehlt data-theme, gilt dieser Block. */
:root {
  color-scheme: light;

  --sd-grund: #ffffff;
  --sd-flaeche: #ffffff;
  --sd-flaeche-schwach: #f5f5f5;
  --sd-flaeche-neutral: #eeeeee;
  --sd-flaeche-streifen: #f9f9f9;
  --sd-flaeche-code: #f9f2f4;
  --sd-flaeche-pre: #f5f5f5;
  --sd-flaeche-bild: #fafafa;
  --sd-flaeche-zeile: #f0f4fc;
  --sd-eingabe-flaeche: #ffffff;
  --sd-btn-neutral-flaeche: #f8f8f8;
  --sd-neutral-hover: #e6e6e6;

  --sd-text: #333333;
  --sd-text-schwach: #777777;
  --sd-text-hinweis: #737373;
  --sd-text-eingabe: #555555;
  --sd-text-code: #c7254e;
  --sd-text-stark: #000000;
  --sd-close-schatten: 0 1px 0 #ffffff;
  --sd-close-deckkraft: 0.2;
  --sd-close-deckkraft-hover: 0.5;

  --sd-rahmen: #dddddd;
  --sd-rahmen-schwach: #eeeeee;
  --sd-rahmen-stark: #cccccc;
  --sd-rahmen-well: #e3e3e3;
  --sd-rahmen-hell: #f3f3f3;
  --sd-rahmen-alpha-schwach: rgba(0, 0, 0, .15);
  --sd-rahmen-alpha: rgba(0, 0, 0, .2);

  --sd-link: #337ab7;
  --sd-link-hover: #23527c;
  --sd-primaer: #337ab7;
  --sd-primaer-rahmen: #2e6da4;
  --sd-primaer-hover: #286090;

  --sd-badge-flaeche: #777777;

  --sd-erfolg-flaeche: #dff0d8;
  --sd-erfolg-rahmen: #d6e9c6;
  --sd-erfolg-text: #3c763d;
  --sd-warn-flaeche: #fcf8e3;
  --sd-warn-rahmen: #faebcc;
  --sd-warn-text: #8a6d3b;
  --sd-fehl-flaeche: #f2dede;
  --sd-fehl-rahmen: #ebccd1;
  --sd-fehl-text: #a94442;
  --sd-info-flaeche: #d9edf7;
  --sd-info-rahmen: #bce8f1;
  --sd-info-text: #31708f;

  --sd-aufkleber-flaeche: #eef2fb;
  --sd-aufkleber-rahmen: #c5d3ec;
  --sd-aufkleber-text: #4a6fa5;

  --sd-tab-meister: #80ff80;
  --sd-tab-aufsteiger: #b3ffb3;
  --sd-tab-aufsteiger-rel: #e6ffe6;
  --sd-tab-absteiger: #ff8080;
  --sd-tab-absteiger-rel: #ffb3b3;
  --sd-tab-hover: #ffffff;
  --sd-tab-info-hover: #c4e3f3;
  --sd-tab-aktiv-hover: #e8e8e8;
  --sd-tab-warn-hover: #f7f0d4;
  --sd-tab-erfolg-hover: #d0e7c7;
  --sd-tab-fehl-hover: #e9c9c9;

  --sd-gewonnen-flaeche: #f1fff2;
  --sd-gewonnen-text: #155724;
  --sd-verloren-flaeche: #fff2f2;
  --sd-verloren-text: #721c24;

  --sd-winner: lightgreen;
  --sd-loser: rgb(255, 140, 140);
  --sd-option-disabled-text: firebrick;
  --sd-option-disabled-flaeche: silver;

  --sd-schalter-knopf: #ffffff;
  --sd-suche-ruhe: #aaaaaa;
  --sd-schatten: rgba(0, 0, 0, .15);

  /* Marke und Hilfe (SPEC-021 A28/A32). Diese Werte stehen sonst nur lokal auf
     .navbar-inverse in bootstrap.hack.css; in beiden Darstellungen gleich, weil die
     Kopfzeile in beiden #02316b bleibt. */
  --sd-marke-leiste: #02316b;
  --sd-marke-titel: #dee9f7;
  --sd-marke-akzent: #6ce3ff;

  /* Lesetext der Hilfe. Hell wie überall in der Anwendung. */
  --sd-hilfe-text: var(--sd-text);
}

/* (b) Dunkel — Palette B (blaustichig), am Muster abgenommen. */
html[data-theme="dark"] {
  color-scheme: dark;

  --sd-grund: #0e1524;
  --sd-flaeche: #16203a;
  --sd-flaeche-schwach: #243352;
  --sd-flaeche-neutral: #1e2a49;
  --sd-flaeche-streifen: #131c31;
  --sd-flaeche-code: #33283c;
  --sd-flaeche-pre: #1a2440;
  --sd-flaeche-bild: #111a2e;
  --sd-flaeche-zeile: #22304e;
  --sd-eingabe-flaeche: #111a2e;
  --sd-btn-neutral-flaeche: #2b3a5c;
  --sd-neutral-hover: #2b3a5c;

  --sd-text: #e0e0e0;
  --sd-text-schwach: #9a9a9a;
  --sd-text-hinweis: #9a9a9a;
  --sd-text-eingabe: #e0e0e0;
  --sd-text-code: #f0a0b4;
  --sd-text-stark: #ffffff;
  --sd-close-schatten: 0 1px 0 #000000;
  --sd-close-deckkraft: 0.65;
  --sd-close-deckkraft-hover: 1;

  --sd-rahmen: #2c3a5c;
  --sd-rahmen-schwach: #26334f;
  --sd-rahmen-stark: #3a4a70;
  --sd-rahmen-well: #2c3a5c;
  --sd-rahmen-hell: #3a4a70;
  --sd-rahmen-alpha-schwach: rgba(255, 255, 255, .16);
  --sd-rahmen-alpha: rgba(255, 255, 255, .22);

  --sd-link: #6fb3ff;
  --sd-link-hover: #9ccbff;
  --sd-primaer: #2a5db0;
  --sd-primaer-rahmen: #234f96;
  --sd-primaer-hover: #234f96;

  --sd-badge-flaeche: #3f4d70;

  --sd-erfolg-flaeche: #213825;
  --sd-erfolg-rahmen: #2f6b3c;
  --sd-erfolg-text: #8fdca0;
  --sd-warn-flaeche: #443827;
  --sd-warn-rahmen: #6b5a2f;
  --sd-warn-text: #e8c98a;
  --sd-fehl-flaeche: #442326;
  --sd-fehl-rahmen: #6f3438;
  --sd-fehl-text: #f0a0a6;
  --sd-info-flaeche: #1d3a44;
  --sd-info-rahmen: #2f5d6b;
  --sd-info-text: #8fd0e0;

  --sd-aufkleber-flaeche: #1f2a3d;
  --sd-aufkleber-rahmen: #35486b;
  --sd-aufkleber-text: #9db8dd;

  --sd-tab-meister: #23663f;
  --sd-tab-aufsteiger: #1f513d;
  --sd-tab-aufsteiger-rel: #193b33;
  --sd-tab-absteiger: #6f293f;
  --sd-tab-absteiger-rel: #4a2233;
  --sd-tab-hover: #2b3a5c;
  --sd-tab-info-hover: #26495a;
  --sd-tab-aktiv-hover: #2b3a5c;
  --sd-tab-warn-hover: #4e412d;
  --sd-tab-erfolg-hover: #29442c;
  --sd-tab-fehl-hover: #4e2a2c;

  --sd-gewonnen-flaeche: #17301c;
  --sd-gewonnen-text: #8fdca0;
  --sd-verloren-flaeche: #33191c;
  --sd-verloren-text: #f0a0a6;

  --sd-winner: #2b5c2b;
  --sd-loser: #5c2b2b;
  --sd-option-disabled-text: #e8a0a0;
  --sd-option-disabled-flaeche: #4a4a4a;

  --sd-schalter-knopf: #e0e0e0;
  --sd-suche-ruhe: #9a9a9a;
  --sd-schatten: rgba(0, 0, 0, .6);

  /* Lesetext der Hilfe ruhiger (SPEC-021 A32): --sd-text (#e0e0e0) ergibt auf #16203a
     über 12:1 und blendet; mit diesem Wert gemessen 8,7:1. */
  --sd-hilfe-text: #b6bfd0;
}

/* (c) Regeln: je einmal, gelten in beiden Themes — sie lesen nur Token und
 * überschreiben ausschließlich die Fremd-Stylesheets. */

/* Grundflächen und Text */
body { background-color: var(--sd-grund); color: var(--sd-text); }
a { color: var(--sd-link); }
a:hover, a:focus { color: var(--sd-link-hover); }
hr { border-top-color: var(--sd-rahmen); }
.page-header { border-bottom-color: var(--sd-rahmen-schwach); }
.text-muted { color: var(--sd-text-schwach); }
.help-block { color: var(--sd-text-hinweis); }
.control-label { color: var(--sd-text); }
.text-danger { color: var(--sd-fehl-text); }
.text-success { color: var(--sd-erfolg-text); }
.text-warning { color: var(--sd-warn-text); }

/* Panels und Flächen. `.panel-default`, `.panel-footer` und `.jumbotron` sind am
   2026-09-26 entfallen: wertgleich zu `.panel`, im Bestand ohne Vorkommen bzw. nur von
   den CI-Fehlerseiten benutzt, die theme.css nicht laden. */
.panel-default > .panel-heading { color: var(--sd-text); background-color: var(--sd-flaeche-schwach); border-color: var(--sd-rahmen); }
.well { background-color: var(--sd-flaeche-schwach); border-color: var(--sd-rahmen-well); }
/* `.panel` und `.thumbnail` tragen dieselben zwei Werte — eine Regel, zwei Selektoren. */
.panel, .thumbnail { background-color: var(--sd-flaeche); border-color: var(--sd-rahmen); }
/* Bootstrap setzt .thumbnail .caption hart auf #333 — auf dunkler Fläche 1,28:1
   (Liga-/Relegationskacheln der Saisonseite, Ansprechpartner-Karten). */
.thumbnail .caption { color: var(--sd-text); }
.list-group-item { background-color: var(--sd-flaeche); border-color: var(--sd-rahmen); color: var(--sd-text); }

/* Tabellen */
.table > thead > tr > th, .table > tbody > tr > td, .table > tfoot > tr > td { border-top-color: var(--sd-rahmen); }
.table > thead > tr > th { border-bottom-color: var(--sd-rahmen); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: var(--sd-flaeche-streifen); }
.table-hover > tbody > tr:hover { background-color: var(--sd-flaeche-schwach); }
.table-bordered, .table-bordered > tbody > tr > td, .table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td, .table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td, .table-bordered > thead > tr > th { border-color: var(--sd-rahmen); }

/* Bootstrap färbt Zustandszeilen hell (#fcf8e3 / #f5f5f5) — auf dunkler Fläche stand
   dort dunkle Schrift auf hellem Grund. `.info`/`.active` waren seit SPEC-014 versorgt;
   `.success`/`.warning`/`.danger` fehlten, obwohl die Palette die Token längst hat. Sie
   kamen im Bestand nicht vor, bis die Bestätigungsliste (SPEC-061) die Zeilen des
   Gastgebers (`success`) und der wieder geöffneten Berichte (`warning`) einführte. */
.table > tbody > tr > td.info, .table > tbody > tr.info > td { background-color: var(--sd-info-flaeche); }
.table > tbody > tr > td.active, .table > tbody > tr.active > td { background-color: var(--sd-flaeche-schwach); }
.table > tbody > tr.warning > td, .table > tbody > tr.warning > th { background-color: var(--sd-warn-flaeche); }
.table > tbody > tr.success > td, .table > tbody > tr.success > th { background-color: var(--sd-erfolg-flaeche); }
.table > tbody > tr.danger > td, .table > tbody > tr.danger > th { background-color: var(--sd-fehl-flaeche); }
.table-hover > tbody > tr > td.info:hover, .table-hover > tbody > tr.info:hover > td { background-color: var(--sd-tab-info-hover); }
.table-hover > tbody > tr > td.active:hover, .table-hover > tbody > tr.active:hover > td { background-color: var(--sd-tab-aktiv-hover); }
/* SPEC-061: `.table-hover > tbody > tr:hover` (0,2,2) verliert gegen die Zeilenfarbe
   oben (0,3,2) — die Zeile hätte sich beim Überfahren nicht mehr geregt. */
.table-hover > tbody > tr.warning:hover > td, .table-hover > tbody > tr.warning:hover > th { background-color: var(--sd-tab-warn-hover); }
.table-hover > tbody > tr.success:hover > td, .table-hover > tbody > tr.success:hover > th { background-color: var(--sd-tab-erfolg-hover); }
.table-hover > tbody > tr.danger:hover > td, .table-hover > tbody > tr.danger:hover > th { background-color: var(--sd-tab-fehl-hover); }

/* Formulare */
.form-control { color: var(--sd-text-eingabe); background-color: var(--sd-eingabe-flaeche); border-color: var(--sd-rahmen-stark); }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: var(--sd-flaeche-neutral); }
.input-group-addon { color: var(--sd-text-eingabe); background-color: var(--sd-flaeche-neutral); border-color: var(--sd-rahmen-stark); }
.has-error .form-control { border-color: var(--sd-fehl-rahmen); }
.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox { color: var(--sd-fehl-text); }

/* Schaltflächen */
.btn-default { color: var(--sd-text); background-color: var(--sd-flaeche); border-color: var(--sd-rahmen-stark); }
.btn-default:hover, .btn-default:focus, .btn-default:active, .btn-default.active,
.open > .dropdown-toggle.btn-default { color: var(--sd-text); background-color: var(--sd-neutral-hover); border-color: var(--sd-rahmen-stark); }
.btn-primary { color: #fff; background-color: var(--sd-primaer); border-color: var(--sd-primaer-rahmen); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active,
.open > .dropdown-toggle.btn-primary { background-color: var(--sd-primaer-hover); border-color: var(--sd-primaer-rahmen); }
/* Warnfarbe (SPEC-062): weiß auf #f0ad4e war 1,95:1 — in beiden Darstellungen die
   schwächste Paarung der Oberfläche. Gedreht ist nur die Schriftfarbe; #2b2b2b hält
   auch auf dem gedrückten Ton #d58512 die AA-Schwelle (4,85:1). Die Wählerliste bildet
   Bootstraps Zustände nach — `.btn-warning:active:hover` (& Co.) schlägt sonst mit 0,3,0. */
.btn-warning, .btn-warning:hover, .btn-warning:focus, .btn-warning.focus,
.btn-warning:active, .btn-warning.active,
.btn-warning:active:hover, .btn-warning.active:hover,
.btn-warning:active:focus, .btn-warning.active:focus,
.btn-warning:active.focus, .btn-warning.active.focus,
.open > .dropdown-toggle.btn-warning, .open > .dropdown-toggle.btn-warning:hover,
.open > .dropdown-toggle.btn-warning:focus, .open > .dropdown-toggle.btn-warning.focus { color: #2b2b2b; }
.btn-link { color: var(--sd-link); }
/* Bootstrap setzt `.btn-link:hover`/`:focus` hart auf #23527c (bootstrap.css:3421) — im
   Dunkeln rund 2,0:1 (Aktionsmenüs der Mitgliederliste, Dubletten-Zwischenseite). */
.btn-link:hover, .btn-link:focus { color: var(--sd-link-hover); }

/* Meldungen */
.alert-success { background-color: var(--sd-erfolg-flaeche); border-color: var(--sd-erfolg-rahmen); color: var(--sd-erfolg-text); }
.alert-info    { background-color: var(--sd-info-flaeche);   border-color: var(--sd-info-rahmen);   color: var(--sd-info-text); }
.alert-warning { background-color: var(--sd-warn-flaeche);   border-color: var(--sd-warn-rahmen);   color: var(--sd-warn-text); }
.alert-danger  { background-color: var(--sd-fehl-flaeche);   border-color: var(--sd-fehl-rahmen);   color: var(--sd-fehl-text); }
.close { color: var(--sd-text-stark); text-shadow: var(--sd-close-schatten); opacity: var(--sd-close-deckkraft); }
.close:hover, .close:focus { color: var(--sd-text-stark); opacity: var(--sd-close-deckkraft-hover); }

/* Plaketten. Die Schriftfarbe bleibt Bootstraps `#fff` — in beiden Themen gleich. */
.label-default { background-color: var(--sd-badge-flaeche); }
.badge { background-color: var(--sd-badge-flaeche); }
/* Die gelbe Plakette hat dieselbe Schwäche wie der gelbe Knopf (SPEC-062): weiß auf
   #f0ad4e sind 1,95:1. Betroffen sind „Du" und „Hängt" der Bestätigungsliste (SPEC-061).
   Gedreht wird nur die Schriftfarbe; das Gelb bleibt, es trägt die Bedeutung. */
.label-warning { color: #2b2b2b; }

/* Aufklappmenüs */
.dropdown-menu { background-color: var(--sd-flaeche); border-color: var(--sd-rahmen-alpha-schwach); box-shadow: 0 6px 12px var(--sd-schatten); }
.dropdown-menu > li > a { color: var(--sd-text); }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { background-color: var(--sd-flaeche-schwach); color: var(--sd-text); }
.dropdown-header { color: var(--sd-text-schwach); }
.dropdown-menu .divider { background-color: var(--sd-rahmen); }

/* Dialoge und Einblendungen */
.modal-content { background-color: var(--sd-flaeche); border-color: var(--sd-rahmen-alpha); box-shadow: 0 3px 9px var(--sd-schatten); }
.modal-header, .modal-footer { border-color: var(--sd-rahmen-schwach); }
.popover { background-color: var(--sd-flaeche); border-color: var(--sd-rahmen-alpha); color: var(--sd-text); }
.popover-title { background-color: var(--sd-flaeche-schwach); border-bottom-color: var(--sd-rahmen); color: var(--sd-text); }
.popover.bottom > .arrow:after { border-bottom-color: var(--sd-flaeche); }

/* Quelltext */
code { color: var(--sd-text-code); background-color: var(--sd-flaeche-code); }
pre { color: var(--sd-text); background-color: var(--sd-flaeche-pre); border-color: var(--sd-rahmen-stark); }

/* Reiter */
.nav-tabs { border-bottom-color: var(--sd-rahmen); }
.nav-tabs > li > a:hover { border-color: var(--sd-flaeche-schwach) var(--sd-flaeche-schwach) var(--sd-rahmen); background-color: var(--sd-flaeche-schwach); }
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus { color: var(--sd-text); background-color: var(--sd-flaeche); border-color: var(--sd-rahmen); border-bottom-color: transparent; }

/* Blätterleiste: DataTables erzeugt sie erst im Browser, Bootstrap färbt sie weiß —
   sie steht in keiner View und damit in keiner Zählung des Quelltextes. */
.pagination > li > a, .pagination > li > span { color: var(--sd-link); background-color: var(--sd-flaeche); border-color: var(--sd-rahmen); }
.pagination > li > a:hover, .pagination > li > a:focus,
.pagination > li > span:hover, .pagination > li > span:focus { color: var(--sd-link-hover); background-color: var(--sd-flaeche-neutral); border-color: var(--sd-rahmen); }
.pagination > .active > a, .pagination > .active > a:hover, .pagination > .active > a:focus,
.pagination > .active > span, .pagination > .active > span:hover, .pagination > .active > span:focus { color: #fff; background-color: var(--sd-primaer); border-color: var(--sd-primaer); }
.pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus,
.pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus { color: var(--sd-text-schwach); background-color: var(--sd-flaeche); border-color: var(--sd-rahmen); }

/* Datumsauswahl (bootstrap-datetimepicker) — der Rahmen ist oben abgedeckt. */
.bootstrap-datetimepicker-widget table thead tr:first-child th:hover,
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover,
.bootstrap-datetimepicker-widget table td span:hover { background: var(--sd-flaeche-neutral); }
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active { background-color: var(--sd-primaer); color: #fff; }
.bootstrap-datetimepicker-widget table th.disabled,
.bootstrap-datetimepicker-widget table th.disabled:hover,
.bootstrap-datetimepicker-widget table td.disabled,
.bootstrap-datetimepicker-widget table td.disabled:hover,
.bootstrap-datetimepicker-widget table td span.disabled,
.bootstrap-datetimepicker-widget table td span.disabled:hover { color: var(--sd-text-schwach); }

/* Bildzuschnitt — der weiße 2px-Rahmen des Bereichs bleibt (sichtbar auf jedem Foto). */
.spielerfoto-cropper-arbeitsflaeche { background: var(--sd-flaeche-schwach); border-color: var(--sd-rahmen); }
.spielerfoto-vorschau-rahmen { background: var(--sd-flaeche); border-color: var(--sd-rahmen); box-shadow: inset 0 0 0 1px var(--sd-rahmen-hell); }
.spielerfoto-vorschau-platzhalter { color: var(--sd-text-schwach); }
.spielerfoto-cropper-anfasser { background: var(--sd-flaeche); border-color: var(--sd-primaer); }

/* DataTables */
table.dataTable thead th, table.dataTable tbody td { color: var(--sd-text); }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { color: var(--sd-text-schwach); opacity: 1; }
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after { color: var(--sd-rahmen-stark); }
div.dataTables_wrapper div.dataTables_info, div.dataTables_wrapper div.dataTables_length,
div.dataTables_wrapper div.dataTables_filter { color: var(--sd-text); }

/* Bilder: Platzhalter-Avatare sind einfarbige Silhouetten auf durchsichtigem Grund. Im
   Dunkeln wird nur die Silhouette gedreht; Fotos, Wappen und Logo bleiben unberührt (A5.9). */
html[data-theme="dark"] img[src*="dummy_avatar"] { filter: invert(1) sepia(.6) hue-rotate(180deg) saturate(1.8); }

/* Eigenes Markup (Auf-/Abstieg, Sieg/Niederlage, Berechtigungstabelle, abgesetzte
   Zellen, Treffer der Spielersuche) steht NICHT hier — dieses Blatt überschreibt nur
   Fremd-Stylesheets. Jene Regeln stehen in style_manuell.css bzw. in den Views. */