/* =============================================================================
   fluent-overrides.css — FluentUI komponens-override-ok (legutolsó token-fájl)
   -----------------------------------------------------------------------------
   A Fluent saját JS-vezérelt design-token rendszert + shadow-DOM-ot használ, amit a
   `--*-clr` aliasok nem érnek el közvetlenül. Itt a `::part`-okat színezzük a téma-
   tokenekkel (colors.css `--primary-clr`/`--text-clr`/`--background-clr`, `--c-overlay-loading`),
   hogy a Fluent elemek a brandet és a témát kövessék. Az index.html-ben LEGUTOLSÓNAK
   töltjük, hogy felülírja a Fluent default stílusait.
   ============================================================================= */

/* ---- Fluent accent gombok brand-színre (Save / Reset / Submit / dialógus-akciók) ----
   A <fluent-button appearance="accent"> a Fluent SAJÁT --accent-fill-* tokenjeit használja
   (NEM a --primary-clr-t) — ezért night módban kéken maradna a piros téma közepén. A
   shadow-DOM ::part(control) háttér felülírása megkerüli a JS-tokeneket, így minden accent
   gomb mindhárom témán a brand --primary-clr-t kapja. A fehér felirat mindhárom shade-en AA-felett. */
:is(fluent-button, fluent-anchor)[appearance="accent"]::part(control) {
    background: var(--primary-clr);
    border-color: var(--primary-clr);
    color: #fff;
}

:is(fluent-button, fluent-anchor)[appearance="accent"]:hover::part(control) {
    background: color-mix(in srgb, var(--primary-clr) 88%, #000);
    border-color: color-mix(in srgb, var(--primary-clr) 88%, #000);
}

:is(fluent-button, fluent-anchor)[appearance="accent"]:active::part(control) {
    background: color-mix(in srgb, var(--primary-clr) 78%, #000);
}

/* Fluent hyperlink (nem-accent anchor) színe dark / night témán a brand --primary-clr-re. A Fluent
   sötétkék hyperlink (#023b8f) a sötét kártyán alig látszik és kirí a piros night-témából. */
:root[data-theme="dark"] fluent-anchor:not([appearance="accent"])::part(control),
:root[data-theme="night"] fluent-anchor:not([appearance="accent"])::part(control) {
    color: var(--primary-clr);
}

/* ---- Fluent input-mezők dark / night témán ----
   A <FluentDesignTheme> ellenére a Fluent design-tokenek itt light módban ragadnak: a mezők fehér
   háttérrel, a label + érték + border pedig --neutral-foreground-rest ≈ #1a1a1a-val rajzolódnak.
   A sötét kártyán így a label és a border láthatatlan, a fehér mező pedig kirí a sötét témából.
   A ::part-okat közvetlenül színezzük (téma-tokenekkel), hogy a mezők a sötét témába illeszkedjenek. */
/* Label szín — minden field-szerű Fluent komponensnél (csak color, layoutot nem érint). */
:root[data-theme="dark"] :is(fluent-text-field, fluent-number-field, fluent-search, fluent-text-area, fluent-select, fluent-combobox, fluent-date-picker)::part(label),
:root[data-theme="night"] :is(fluent-text-field, fluent-number-field, fluent-search, fluent-text-area, fluent-select, fluent-combobox, fluent-date-picker)::part(label) {
    color: var(--text-clr);
}

/* Mező-háttér + border. A text-field/number/search a ::part(root)-on hordozza a dobozt; a
   text-area/select/combobox/date-picker a ::part(control)-on. */
:root[data-theme="dark"] :is(fluent-text-field, fluent-number-field, fluent-search)::part(root),
:root[data-theme="night"] :is(fluent-text-field, fluent-number-field, fluent-search)::part(root),
:root[data-theme="dark"] :is(fluent-text-area, fluent-select, fluent-combobox, fluent-date-picker)::part(control),
:root[data-theme="night"] :is(fluent-text-area, fluent-select, fluent-combobox, fluent-date-picker)::part(control) {
    background: var(--background-clr);
    border-color: var(--extra-muted-clr);
}

/* Érték/szöveg szín a mezőkben. */
:root[data-theme="dark"] :is(fluent-text-field, fluent-number-field, fluent-search, fluent-text-area, fluent-select, fluent-combobox, fluent-date-picker)::part(control),
:root[data-theme="night"] :is(fluent-text-field, fluent-number-field, fluent-search, fluent-text-area, fluent-select, fluent-combobox, fluent-date-picker)::part(control) {
    color: var(--text-clr);
}

/* Legördülő opciók (select/combobox popup) — különben fehér popup marad a sötét témán. */
:root[data-theme="dark"] fluent-option,
:root[data-theme="night"] fluent-option {
    background: var(--list-bg);
    color: var(--text-clr);
}

/* .fluent-input-label — egyedi label-osztály az edit / automation / alarm / geofence / tank form-okban.
   Több komponens scoped CSS-e color: var(--neutral-foreground-rest)-tel színezi (Fluent #1a1a1a),
   ami night-ban láthatatlan a sötét kártyán. Témakövető --text-clr-re állítjuk (a scoped rule
   class+attribútum specificitása miatt !important kell). */
:root[data-theme="dark"] .fluent-input-label,
:root[data-theme="night"] .fluent-input-label {
    color: var(--text-clr) !important;
}

/* Radio / checkbox / switch felirat. A .label part SAJÁT #1a1a1a színt hordoz (a host color nem
   örökli felül), ezért közvetlenül a ::part(label)-t színezzük. */
:root[data-theme="dark"] :is(fluent-radio, fluent-checkbox, fluent-switch, fluent-radio-group),
:root[data-theme="night"] :is(fluent-radio, fluent-checkbox, fluent-switch, fluent-radio-group),
:root[data-theme="dark"] :is(fluent-radio, fluent-checkbox, fluent-switch)::part(label),
:root[data-theme="night"] :is(fluent-radio, fluent-checkbox, fluent-switch)::part(label) {
    color: var(--text-clr);
}

/* Kiválasztott radio-pötty / checkbox-pipa a brand-színre (Fluent kék #036ac4 accent helyett). */
:root[data-theme="dark"] :is(fluent-radio, fluent-checkbox)[aria-checked="true"]::part(control),
:root[data-theme="night"] :is(fluent-radio, fluent-checkbox)[aria-checked="true"]::part(control) {
    background: var(--primary-clr);
    border-color: var(--primary-clr);
}

/* ---- FluentOverlay loading / "nincs adat" scrim — témafüggő háttér ----
   A FluentUI FluentOverlay BackgroundColor paramétere CSAK literál hexet fogad (CSS var()-t
   nem — ezért a komponensekben #bbccdd fallback van). Itt tesszük témafüggővé: a komponens
   inline background-color-t rak a .fluent-overlay-re, ezért az override-hoz !important kell.

   FONTOS — csak a SAJÁT scrim-overlay-einkre (Transparent=false) szabad ráhúzni a színt.
   A FluentUI popup-komponensek (FluentDatePicker, FluentSelect, FluentCombobox, FluentMenu,
   FluentAutocomplete) egy Transparent=true, full-screen, "kattintás-elkapó" .fluent-overlay-t
   renderelnek a popup bezárásához — ez inline background-color NÉLKÜL jön. Egy szűrés nélküli
   `.fluent-overlay { background-color: ... !important }` ezekre is ráfeküdne, így a #bbccdd
   átlátszatlan lappal letakarná az EGÉSZ viewportot (csak a popup látszana), és az oldal
   eltűnne — pl. a Date Interval dialog naptárának megnyitásakor (DateIntervalPickerDialog).
   A [style*="background-color"] szűrő csak azokat fogja meg, amik maguk is színt kérnek. */
.fluent-overlay[style*="background-color"] {
    background-color: var(--c-overlay-loading) !important;
}

/* ---- Fluent slider / number-field ::part méretezés (korábban app.css) ----
   A ::part a Fluent komponensek shadow-DOM-ját célozza, ezért GLOBÁLIS (scoped nem érné el). */
/* ::part only works here, not in isolation */
.volume-slider::part(positioning-region) {
    top: 10px;
}

.seek-slider::part(positioning-region) {
    margin: 0 2px;
}

.threshold-input::part(root),
.threshold-input::part(control) {
    height: 3rem;
}

.threshold-input::part(control) {
    width: 5rem;
    font-size: 1.5rem;
}

.threshold-input::part(controls) {
    top: 10px;
}