/*
 * HorizonForms <-> aktives Template: Typografie-Bridge (nur Frontend).
 *
 * Ziel: hui-Elemente "kleben" am aktiven Template (z. B. HorizonTheme). Sie erben
 * Schriftart und Textfarbe des Templates, damit Formulare wie der Rest der Seite
 * aussehen. Bewusst niedrige Spezifitaet (nur .hui-Kontext, keine !important),
 * damit sowohl explizite hui-Optionen (z. B. gewaehlte Farbe) als auch lokale
 * Uebersteuerungen (CSS-/Stil-Element, Feld-CSS-Klasse) weiterhin gewinnen.
 * Wird NICHT im Builder-Backend geladen, dort behaelt hui sein eigenes Aussehen.
 */

/* Formular-Controls erben die Template-Schrift.
   (Ohne dies nutzen input/select/textarea/button die UA-Standardschrift,
   nicht die Schrift des Templates.) */
.hui input,
.hui select,
.hui textarea,
.hui button,
.hui .button,
.hui.button,
.hui.input,
.hui.dropdown,
.hui.checkbox label,
.hui.radio label,
.hui label {
    font-family: inherit;
}

/* Ueberschriften-Element: Groesse und Gewicht kommen aus den Template-Regeln
   (h1..h6), da hui.header selbst keine Schriftgroesse setzt. hui erzwingt nur
   die Textfarbe - die geben wir an den Kontext (Template) zurueck. Eine im
   Element bewusst gewaehlte Farbe (.hui.colored.<name>) hat hoehere Spezifitaet
   und bleibt erhalten. */
.hui.header {
    color: inherit;
}

/* Fliesstext-/Container-Bausteine erben die Textfarbe des Templates. */
.hui.text,
.hui.content,
.hui.segment,
.hui.form,
.hui.list {
    color: inherit;
}

/* ===========================================================================
   Buttons im Template-Look. hui-Buttons (.hui.button / .hui .button) sollen wie
   die Bootstrap-Buttons des aktiven Templates aussehen: gleiche Radius-/Padding-
   Sprache und die Theme-Farbtokens (--bs-*). Die hui-Farbklassen (blue/red/...)
   werden auf die passenden Bootstrap-Kontextfarben gemappt. Nach hui.min.css
   geladen -> gleiche Spezifitaet gewinnt. Icon-only-Buttons (.icon) bleiben
   unangetastet (kompakt). Nur Frontend.
   =========================================================================== */
.hui.button:not(.icon),
.hui .button:not(.icon) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    font-weight: 500;
    line-height: 1.5;
    padding: .5rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--bs-border-radius, .375rem);
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
    text-decoration: none;
    cursor: pointer;
}
.hui.button:not(.icon):hover,
.hui .button:not(.icon):hover { filter: brightness(.93); }
.hui.button:not(.icon):active,
.hui .button:not(.icon):active { filter: brightness(.87); }
.hui.button.disabled,
.hui.button:disabled { opacity: .55; pointer-events: none; }

/* Standard (keine Farbklasse) = neutral/sekundaer im Template-Look. */
.hui.button:not(.icon):not(.blue):not(.red):not(.green):not(.orange):not(.yellow):not(.teal):not(.cyan):not(.grey):not(.gray):not(.black):not(.primary):not(.danger):not(.success):not(.warning):not(.info),
.hui .button:not(.icon):not(.blue):not(.red):not(.green):not(.orange):not(.yellow):not(.teal):not(.cyan):not(.grey):not(.gray):not(.black):not(.primary):not(.danger):not(.success):not(.warning):not(.info) {
    background: var(--bs-secondary-bg, #e9ecef);
    color: var(--bs-body-color, #212529);
    border-color: var(--bs-border-color, #dee2e6);
}
/* hui-Farbklassen -> Bootstrap-Kontextfarben des Templates. */
.hui.button.blue,   .hui .button.blue,   .hui.button.primary, .hui .button.primary { background: var(--bs-primary,   #0d6efd); border-color: var(--bs-primary,   #0d6efd); color: #fff; }
.hui.button.red,    .hui .button.red,    .hui.button.danger,  .hui .button.danger  { background: var(--bs-danger,    #dc3545); border-color: var(--bs-danger,    #dc3545); color: #fff; }
.hui.button.green,  .hui .button.green,  .hui.button.success, .hui .button.success { background: var(--bs-success,   #198754); border-color: var(--bs-success,   #198754); color: #fff; }
.hui.button.orange, .hui .button.orange, .hui.button.yellow,  .hui .button.yellow, .hui.button.warning, .hui .button.warning { background: var(--bs-warning, #ffc107); border-color: var(--bs-warning, #ffc107); color: #000; }
.hui.button.teal,   .hui .button.teal,   .hui.button.cyan,    .hui .button.cyan,   .hui.button.info,    .hui .button.info    { background: var(--bs-info,   #0dcaf0); border-color: var(--bs-info,   #0dcaf0); color: #000; }
.hui.button.grey,   .hui .button.grey,   .hui.button.gray,    .hui .button.gray,   .hui.button.black,   .hui .button.black   { background: var(--bs-secondary, #6c757d); border-color: var(--bs-secondary, #6c757d); color: #fff; }

/* ===========================================================================
   Dark Mode: HorizonForms/hui an das aktive Template angleichen.
   HorizonTheme (Bootstrap 5.3) setzt data-bs-theme="dark" auf <html>. hui hat
   ein eigenes HELLES Schema; hier drehen wir a) hui's HSL-Lightness-Variablen
   fuer Dunkel und b) setzen die wichtigsten Flaechen auf die Template-Farben
   (--bs-*), damit die Formulare exakt wie der Rest der Seite aussehen.
   Greift NUR wenn das Template auf Dunkel steht (kein Mismatch).
   =========================================================================== */
:root[data-bs-theme="dark"] {
    --l: 17%;    /* heller Grund-/Feldhintergrund -> dunkel */
    --lbo: 34%;  /* Rahmen */
    --lt: 88%;   /* Textfarbe -> hell */
    --lfill: 45%; /* Fuellung gewaehlter Optionen: im Dunkeln etwas heller, damit
                     die gefuellte Flaeche sich vom dunklen Grund abhebt. Weisser
                     Text darauf bleibt bei 45% noch ausreichend lesbar. */
}

:root[data-bs-theme="dark"] .hui.text,
:root[data-bs-theme="dark"] .hui.content,
:root[data-bs-theme="dark"] .hui.list,
:root[data-bs-theme="dark"] .hui.form {
    color: var(--bs-body-color, #e6e6e6) !important;
}

:root[data-bs-theme="dark"] .hui input,
:root[data-bs-theme="dark"] .hui select,
:root[data-bs-theme="dark"] .hui textarea,
:root[data-bs-theme="dark"] .hui .input,
:root[data-bs-theme="dark"] .hui.input,
:root[data-bs-theme="dark"] .hui.dropdown,
:root[data-bs-theme="dark"] .hui.segment,
:root[data-bs-theme="dark"] .hui.card,
:root[data-bs-theme="dark"] .hui.table,
:root[data-bs-theme="dark"] .hui.table > :not(caption) > * > * {
    background-color: var(--bs-body-bg, #1e1e1e) !important;
    color: var(--bs-body-color, #e6e6e6) !important;
    border-color: var(--bs-border-color, #444) !important;
}

:root[data-bs-theme="dark"] .hui input::placeholder,
:root[data-bs-theme="dark"] .hui textarea::placeholder {
    color: var(--bs-secondary-color, #9aa0a6) !important;
}

/* ===========================================================================
   Modal-Stacking: hui-Overlays ueber die Template-Chrome heben.
   hui haengt seinen Dimmer per Body.append direkt an <body> (position:fixed),
   aber nur mit z-index:999. HorizonTheme (Bootstrap 5.3) legt Sticky-Header
   (~1020) und Sticky-/Offcanvas-Menue (~1030-1045) darueber - dadurch rutscht
   das Modal sonst UNTER den Header und das linke Menue. Wir heben das komplette
   Modal-Layer an; der Popup bleibt eine Stufe ueber dem Dimmer, damit
   Dropdowns/Tooltips INNERHALB des Modals nicht dahinter verschwinden.
   =========================================================================== */
.hui.dimmer.active {
    z-index: 10000;
}
.hui.popup {
    z-index: 10001;
}

/* ===========================================================================
   Mobile: Feld-Layout responsiv machen. hui stapelt .fields nur innerhalb
   .hui.form (max-width:600) - ein .equal.fields OHNE .hui.form-Kontext bleibt
   sonst in Zeilenrichtung, und .equal>.field{flex:1 1 0} quetscht die Spalten
   am Smartphone auf ~0 Breite ("bis an den rechten Rand"). Hier erzwingen wir
   das Stapeln generell und geben Optionsgruppen volle Breite. Nur Frontend.
   =========================================================================== */
@media only screen and (max-width: 600px) {
    /* Feld-Zeilen + gleich-breite Spalten stapeln (Mehrfachfeld nicht mehr auf 0
       gequetscht). Optionsgruppen sind hier bewusst ausgenommen (siehe unten). */
    .fields,
    .equal.fields {
        flex-direction: column !important;
    }
    .fields > .field,
    .equal.fields > .field {
        width: 100% !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    /* Optionsgruppen (Radios/Checkboxes) NICHT stapeln: die Optionen sollen
       nebeneinander stehen und umbrechen. Die Spalten-/Layout-Einstellung des
       Elements (Spaltenanzahl bzw. Layout=Fließend) bleibt so wirksam. */
    .field_radios .fields,
    .field_checkboxes .fields {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .field_radios .fields > *,
    .field_checkboxes .fields > * {
        width: auto !important;
        flex: 0 1 auto !important;
        min-width: 0;
    }
}