/* =====================================================================
   EINHEITLICHE ADMIN-GESTALTUNG
   =====================================================================

   Die gemeinsamen Grundbausteine aller Adminseiten an EINER Stelle.
   Vorbild ist admin/navigation.php (Navigationseinstellungen).

   EINGEBUNDEN
   -----------
   - aus admin/includes/sidebar.php, also auf jeder Seite mit Seitenleiste.
     Die Datei steht dort NACH den <style>-Bloecken der einzelnen Seiten
     und gewinnt deshalb bei gleicher Spezifitaet. Genau das ist gewollt:
     die kopierten Kartenstile der Seiten laufen damit nicht mehr
     auseinander.
   - direkt aus admin/live-creator.php und admin/login.php (ohne Seitenleiste).

   REGELN
   ------
   - Groessen in rem. Ausnahme: 1-3px fuer Rahmen und Linien.
   - Blau ist immer #164D9D (--primary). Kein anderes Blau eintragen.
   - Nur Klassen, die es auf den Seiten schon gibt, plus die wenigen neuen
     Bausteine unten (Abschnitt "Bausteine"). Keine Seitenpraefixe hier.

   Beschreibung der Bausteine: dokumentation/admin-gestaltung.md
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. TOKENS
   --------------------------------------------------------------------- */
:root {
    --primary: #164D9D;
    --primary-dark: #10386f;
    --primary-light: #164D9D;
    --primary-hauch: rgba(22, 77, 157, 0.06);
    --primary-schatten: rgba(22, 77, 157, 0.15);
    --white: #ffffff;
    --background: #f8f9fa;
    --card-bg: #ffffff;
    --text-color: #2d3748;
    --text-light: #4a5568;
    --text-muted: #6c757d;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #ced4da;
    --success: #28a745;
    --warning: #ffc107;
    --error: #dc3545;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 0.25rem 0.75rem rgba(22, 77, 157, 0.1);
    --transition: 0.2s ease-in-out;
    --feld-hoehe: 2.375rem;
    --feld-schmal: 13.75rem;

    /* Bootstrap auf dasselbe Blau stellen: Links, Fokus, .text-primary, .bg-primary */
    --bs-primary: #164D9D;
    --bs-primary-rgb: 22, 77, 157;
    --bs-link-color: #164D9D;
    --bs-link-color-rgb: 22, 77, 157;
    --bs-link-hover-color: #10386f;
    --bs-link-hover-color-rgb: 16, 56, 111;
    --bs-primary-text-emphasis: #10386f;
    --bs-primary-bg-subtle: #e8eef7;
    --bs-primary-border-subtle: #b9cae3;
    --bs-focus-ring-color: rgba(22, 77, 157, 0.25);
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--background);
    color: var(--text-color);
}

/* ---------------------------------------------------------------------
   2. SEITENKOPF
   --------------------------------------------------------------------- */
.main-content > .page-header,
.page-header {
    background: var(--white);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--gray-200);
}
.page-header h1 {
    color: var(--text-color);
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.page-header p {
    color: var(--text-light);
    margin-bottom: 0;
}
@media (max-width: 768px) {
    .page-header h1 { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------------
   3. KARTE (.settings-card) MIT VERLAUFSKOPF
   --------------------------------------------------------------------- */
.settings-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: 1.5rem;
}
.settings-card > .card-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    padding: 1rem 1.5rem;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border: none;
    font-weight: 600;
    font-size: 1rem;
}
.settings-card > .card-header h1,
.settings-card > .card-header h2,
.settings-card > .card-header h3,
.settings-card > .card-header h4,
.settings-card > .card-header h5,
.settings-card > .card-header h6 {
    color: inherit;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}
/* Knoepfe im Kartenkopf: hell auf dem Verlauf */
.settings-card > .card-header .btn-outline-primary,
.settings-card > .card-header .btn-outline-secondary,
.settings-card > .card-header .btn-light {
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.6);
    background: transparent;
}
.settings-card > .card-header .btn-outline-primary:hover,
.settings-card > .card-header .btn-outline-secondary:hover,
.settings-card > .card-header .btn-light:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--white);
}
.settings-card > .card-header .text-muted,
.settings-card > .card-header small { color: rgba(255, 255, 255, 0.8) !important; }
.settings-card > .card-body { padding: 1.5rem; }
.settings-card > .card-footer {
    background: var(--gray-100);
    border-top: 1px solid var(--gray-200);
    padding: 1rem 1.5rem;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
@media (max-width: 768px) {
    .settings-card > .card-header { padding: 0.875rem 1rem; }
    .settings-card > .card-body { padding: 1rem; }
}

/* ---------------------------------------------------------------------
   4. INFO-SYMBOL UND TOOLTIP
   --------------------------------------------------------------------- */
.info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--primary);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 600;
    cursor: help;
    margin-left: 0.5rem;
    border: none;
    padding: 0;
    vertical-align: middle;
    transition: var(--transition);
}
.info-btn:hover { background: var(--primary-dark); transform: scale(1.1); }
.info-btn i { font-size: 0.625rem; }
/* Auf dem blauen Kartenkopf: weisses Symbol mit blauem Zeichen */
.settings-card > .card-header .info-btn { background: rgba(255, 255, 255, 0.9); color: var(--primary); }

.custom-tooltip { position: relative; display: inline-block; }
.custom-tooltip .tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    left: 1.875rem;
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-color);
    color: var(--white);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 400;
    line-height: 1.5;
    min-width: 17.5rem;
    max-width: 25rem;
    z-index: 1000;
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.3);
    transition: var(--transition);
    white-space: normal;
    text-align: left;
}
.custom-tooltip .tooltip-content::before {
    content: '';
    position: absolute;
    left: -0.5rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0.5rem solid transparent;
    border-right-color: var(--text-color);
}
.custom-tooltip:hover .tooltip-content,
.custom-tooltip:focus-within .tooltip-content { visibility: visible; opacity: 1; }
@media (max-width: 768px) {
    .custom-tooltip .tooltip-content {
        left: auto; right: 0; top: 1.875rem; transform: none; min-width: 15.625rem;
    }
    .custom-tooltip .tooltip-content::before {
        left: auto; right: 0.625rem; top: -0.5rem;
        border-right-color: transparent; border-bottom-color: var(--text-color);
    }
}

/* ---------------------------------------------------------------------
   5. FELDER
   Beschriftung darueber, Hilfetext darunter, alle Felder gleich hoch.
   --------------------------------------------------------------------- */
.form-label {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 0.5rem;
}
.form-control,
.form-select {
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    transition: var(--transition);
}
.form-control:not(textarea):not([type="file"]):not(.form-control-sm):not(.form-control-lg),
.form-select:not([multiple]):not([size]):not(.form-select-sm):not(.form-select-lg) {
    min-height: var(--feld-hoehe);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-schatten);
}
.form-text,
.settings-card small.text-muted,
.settings-card .form-text {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-muted);
}
.input-group-text {
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    color: var(--text-light);
    font-size: 0.875rem;
}
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.2rem var(--primary-schatten);
}

/* Zahlen- und Farbfelder brauchen keine volle Spaltenbreite */
.settings-card input[type="number"].form-control { max-width: var(--feld-schmal); }
.settings-card .input-group:has(> input[type="number"]) { max-width: var(--feld-schmal); }
.settings-card .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.settings-card .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.settings-card .input-group > .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }

/* Farbfeld (von color-field.php gebaut): so breit und hoch wie ein Zahlenfeld */
.cms-color-field { vertical-align: top; width: 100%; max-width: var(--feld-schmal); }
.cms-color-knopf { height: var(--feld-hoehe); }

/* ---------------------------------------------------------------------
   6. KNOEPFE
   --------------------------------------------------------------------- */
/* admin-style.css gibt JEDEM button.btn / a.btn einen blauen Hintergrund,
   feste px-Groessen und weisse Schrift - mit hoeherer Spezifitaet als die
   Bootstrap-Varianten. Dadurch waren auch „Abbrechen“, Umriss- und
   Loeschknoepfe voll blau. Hier wird wieder Bootstrap das Aussehen der
   Varianten ueberlassen (ueber seine --bs-btn-*-Variablen). */
.btn,
button.btn,
a.btn,
input.btn {
    background: var(--bs-btn-bg, var(--primary));
    color: var(--bs-btn-color, var(--white));
    border: var(--bs-btn-border-width, 1px) solid var(--bs-btn-border-color, transparent);
    padding: var(--bs-btn-padding-y, 0.375rem) var(--bs-btn-padding-x, 0.75rem);
    font-size: var(--bs-btn-font-size, 1rem);
    line-height: var(--bs-btn-line-height, 1.5);
    border-radius: var(--radius-md);
    font-weight: 500;
    box-shadow: none;
}
.btn:hover,
button.btn:hover,
a.btn:hover {
    background: var(--bs-btn-hover-bg, var(--primary-dark));
    color: var(--bs-btn-hover-color, var(--white));
    border-color: var(--bs-btn-hover-border-color, transparent);
    transform: none;
}
.btn.btn-sm { --bs-btn-padding-y: 0.25rem; --bs-btn-padding-x: 0.5rem; --bs-btn-font-size: 0.875rem; }
.btn.btn-lg { --bs-btn-padding-y: 0.625rem; --bs-btn-padding-x: 1.5rem; --bs-btn-font-size: 1rem; }
.btn-close { background-color: transparent; }
/* Bootstrap setzt die Farben der Varianten ueber eigene Variablen (#0d6efd).
   Hier auf das CMS-Blau gestellt. */
.btn.btn-primary {
    --bs-btn-bg: #164D9D; --bs-btn-border-color: #164D9D; --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: #10386f; --bs-btn-hover-border-color: #10386f; --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #10386f; --bs-btn-active-border-color: #10386f;
    --bs-btn-disabled-bg: #164D9D; --bs-btn-disabled-border-color: #164D9D;
}
.btn.btn-outline-primary {
    --bs-btn-bg: transparent; --bs-btn-color: #164D9D; --bs-btn-border-color: #164D9D;
    --bs-btn-hover-bg: #164D9D; --bs-btn-hover-border-color: #164D9D; --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: #164D9D; --bs-btn-active-border-color: #164D9D; --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: #164D9D; --bs-btn-disabled-border-color: #164D9D;
}
.btn.btn-link { --bs-btn-bg: transparent; --bs-btn-color: #164D9D; --bs-btn-hover-color: #10386f; --bs-btn-hover-bg: transparent; }
.btn.btn-primary,
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
    font-weight: 600;
    transition: var(--transition);
}
.btn-primary:hover,
.btn-primary:focus {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--white);
}
.btn-primary:hover { box-shadow: 0 0.25rem 0.75rem rgba(22, 77, 157, 0.3); }
.btn-primary:disabled,
.btn-primary.disabled { background: var(--primary); border-color: var(--primary); opacity: 0.6; }
.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
    background: transparent;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary.active {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}
.btn-secondary {
    background: var(--gray-300);
    border-color: var(--gray-300);
    color: var(--text-color);
    font-weight: 600;
}
.btn-secondary:hover,
.btn-secondary:focus {
    background: var(--text-muted);
    border-color: var(--text-muted);
    color: var(--white);
}
.btn-link { color: var(--primary); }
.btn-lg { padding: 0.625rem 1.5rem; font-size: 1rem; }

/* Speichern-Leiste unten rechts (Baustein) */
.speichern-leiste {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
}

/* ---------------------------------------------------------------------
   7. MELDUNGEN
   --------------------------------------------------------------------- */
.alert { border-radius: var(--radius-md); border: none; padding: 1rem 1.5rem; }
.alert-success { background: rgba(40, 167, 69, 0.1); color: var(--success); }
.alert-danger { background: rgba(220, 53, 69, 0.1); color: var(--error); }
.alert-info { background: var(--primary-hauch); color: var(--primary-dark); }
.alert-warning { background: rgba(255, 193, 7, 0.15); color: var(--text-color); }

/* ---------------------------------------------------------------------
   8. REITER
   Eine Leiste fuer alle Seiten: .nav-reiter (aus einstellungen-stil.php)
   und die eigenen Reitersysteme einzelner Seiten (.nav-tabs, .settings-tabs)
   sehen gleich aus.
   --------------------------------------------------------------------- */
.settings-card.reiter-aus { display: none !important; }
.nav-reiter,
.main-content .nav-tabs,
.main-content .settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 0.5rem;
    margin-bottom: 1.5rem;
}
.nav-reiter button,
.main-content .nav-tabs .nav-link,
.main-content .settings-tabs .settings-tab,
.main-content .settings-tabs button,
.main-content .settings-tabs a {
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0.6rem 1rem;
    margin: 0;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    text-decoration: none;
    transition: var(--transition);
}
.nav-reiter button:hover,
.main-content .nav-tabs .nav-link:hover,
.main-content .settings-tabs .settings-tab:hover,
.main-content .settings-tabs button:hover,
.main-content .settings-tabs a:hover {
    color: var(--primary);
    background: var(--gray-100);
    border: 0;
}
.nav-reiter button.aktiv,
.main-content .nav-tabs .nav-link.active,
.main-content .settings-tabs .settings-tab.active,
.main-content .settings-tabs button.active,
.main-content .settings-tabs a.active {
    color: var(--white);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: 0 0.125rem 0.375rem rgba(22, 77, 157, 0.25);
    border: 0;
}
.main-content .nav-tabs .nav-item { margin: 0; }
.nav-reiter button i,
.main-content .nav-tabs .nav-link i { font-size: 0.95em; opacity: 0.9; }
@media (max-width: 768px) {
    .nav-reiter,
    .main-content .nav-tabs,
    .main-content .settings-tabs { gap: 0.25rem; padding: 0.35rem; }
    .nav-reiter button,
    .main-content .nav-tabs .nav-link,
    .main-content .settings-tabs .settings-tab,
    .main-content .settings-tabs button,
    .main-content .settings-tabs a { padding: 0.5rem 0.7rem; font-size: 0.875rem; }
}
/* Reiter innerhalb einer Karte oder eines Fensters: ohne eigenen Kasten */
.settings-card .nav-tabs,
.modal .nav-tabs {
    box-shadow: none;
    background: var(--gray-100);
    border: 0;
}

/* ---------------------------------------------------------------------
   9. FENSTER (Bootstrap-Modal)
   Kopf wie der Kartenkopf, Fuss hell, Knoepfe rechts.
   --------------------------------------------------------------------- */
.modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border-bottom: 0;
    padding: 1rem 1.5rem;
}
.modal-header .modal-title { font-size: 1.125rem; font-weight: 600; color: inherit; }
.modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: 0.85; }
.modal-header .info-btn { background: rgba(255, 255, 255, 0.9); color: var(--primary); }
.modal-header .btn-close:hover { opacity: 1; }
.modal-header .text-muted,
.modal-header small { color: rgba(255, 255, 255, 0.8) !important; }
.modal-body { padding: 1.5rem; }
.modal-footer {
    background: var(--gray-100);
    border-top: 1px solid var(--gray-200);
    padding: 0.875rem 1.5rem;
    gap: 0.5rem;
}
.modal-footer > * { margin: 0; }

/* ---------------------------------------------------------------------
   10. TABELLEN IN KARTEN
   --------------------------------------------------------------------- */
.settings-card .table { margin-bottom: 0; }
.settings-card .table > thead th {
    font-weight: 600;
    color: var(--text-light);
    font-size: 0.8125rem;
    text-transform: none;
    letter-spacing: 0;
    background: var(--gray-100);
    border-bottom: 1px solid var(--gray-300);
}
.settings-card .table td { vertical-align: middle; }

/* =====================================================================
   BAUSTEINE (neu, fuer alle Seiten)
   ===================================================================== */

/* Kopfzeile "Desktop | Mobile" ueber einem Raster */
.dm-kopf {
    border-bottom: 1px solid var(--gray-200);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}
.dm-kopf h6 {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.dm-kopf h6 i { color: var(--primary); }
@media (max-width: 767.98px) {
    /* gestapelt: die Kopfzeile verliert ihren Sinn, jede Zelle traegt die Geraeteangabe */
    .dm-kopf { display: none; }
}

/* Eine Einstellung = eine Zeile. Beide Zellen gleich hoch, Hilfetext unten buendig. */
.dm-zeile > [class*="col-"] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dm-zeile > [class*="col-"] > .mb-3 {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.dm-zeile > [class*="col-"] > .mb-3 > .form-text,
.dm-zeile > [class*="col-"] > .mb-3 > small.text-muted { margin-top: auto; padding-top: 0.35rem; }
/* Geraeteangabe in der Zelle, nur sichtbar wenn gestapelt */
.dm-geraet { display: none; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; }
@media (max-width: 767.98px) {
    .dm-geraet { display: block; }
    .dm-zeile > [class*="col-"]:empty { display: none; }
}

/* Zwischenueberschrift in einer Karte */
.zwischentitel {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--primary);
    margin: 1.75rem 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--gray-200);
}
/* Ganz oben in einem Bereich kein Abstand nach oben (auch nach versteckten Feldern) */
.zwischentitel:first-child,
input[type="hidden"] + .zwischentitel,
.card-body > form:first-child > .zwischentitel:first-of-type,
[class*="col-"] > form:first-child > .zwischentitel:first-of-type { margin-top: 0; }
.zwischentitel .info-btn { margin-left: 0.25rem; }

/* Grauer Block fuer zusammengehoerende Sonderfaelle */
.hinweis-block {
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 1rem;
    margin-bottom: 1rem;
}
.hinweis-block > h6 { font-weight: 600; margin-bottom: 0.5rem; }

/* Listeneintrag mit Aktion rechts (wie die Mega-Dropdowns in der Navigation) */
.eintrag-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--gray-100);
    border-radius: var(--radius-lg);
    padding: 0.625rem 0.875rem;
    margin-bottom: 0.5rem;
}