/* ──────────────────────────────────────────────────────────────────────────
   Shadow scale (define once, reuse) — neutral black-alpha, theme-agnostic.
   ────────────────────────────────────────────────────────────────────────── */
:root {
    --dialog-shadow-rest: 0 1px 2px var(--c-shadow-xs), 0 2px 8px var(--c-shadow-xs);
    --dialog-shadow-elevated: 0 4px 16px var(--c-shadow-sm);
}

:root[data-theme="dark"],
:root[data-theme="night"] {
    --dialog-shadow-rest: 0 1px 2px var(--c-shadow-xs), 0 2px 8px var(--c-shadow-sm);
    --dialog-shadow-elevated: 0 6px 22px var(--c-shadow-md);
}

fluent-dialog::part(control) {
    max-height: 90dvh;
    background: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    box-shadow: var(--dialog-shadow-elevated);
}

/* Header/body divider — mirror the edit-page footer treatment. */
.fluent-dialog-header {
    border-bottom: var(--border-thin);
}

.fluent-dialog-body {
    overflow: auto;
    padding: 0.125rem;
}

    .fluent-dialog-body form {
        display: grid;
        gap: 1rem;
        width: 100%;
    }

        .fluent-dialog-body form label {
            font-style: italic;
            width: fit-content;
            color: var(--muted-clr);
        }

    .fluent-dialog-body fluent-text-field,
    .fluent-dialog-body fluent-number-field,
    .fluent-dialog-body fluent-combobox,
    .fluent-dialog-body fluent-select {
        width: 100%;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    /* Valid-state focus ring — accent token (invalid state keeps --error-clr below). */
    .fluent-dialog-body fluent-text-field:not(.invalid):focus-visible,
    .fluent-dialog-body fluent-number-field:not(.invalid):focus-visible,
    .fluent-dialog-body fluent-combobox:not(.invalid):focus-visible,
    .fluent-dialog-body fluent-select:not(.invalid):focus-visible,
    .fluent-dialog-body fluent-text-area:not(.invalid):focus-visible {
        outline: 2px solid var(--primary-clr);
        outline-offset: 2px;
        border-radius: inherit;
    }

    .fluent-dialog-body fluent-radio-group::part(positioning-region) {
        column-gap: 3rem;
        row-gap: 0.5rem;
        flex-wrap: wrap;
    }

    .fluent-dialog-body fluent-radio-group fluent-radio::part(label) {
        padding-inline-start: 0.5rem !important;
        margin: 0;
    }

    .fluent-dialog-body fluent-number-field.invalid {
        outline: none;
    }

    .fluent-dialog-body fluent-number-field.invalid::part(root),
    .fluent-dialog-body [role="checkbox"].invalid::part(control),
    .fluent-dialog-body [role="combobox"].invalid::part(control),
    .fluent-dialog-body fluent-combobox.invalid::part(control),
    .fluent-dialog-body fluent-text-area.invalid::part(control),
    .fluent-dialog-body fluent-text-field.invalid::part(root) {
        outline: calc(var(--stroke-width) * 1px) solid var(--error-clr);
    }


.alarm-threshold {
    display: grid;
    gap: 1rem;
    width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

    .alarm-threshold fluent-number-field {
        width: 100%;
    }

fluent-dialog[id^="id_"]::part(control) {
    padding-inline: min(3dvw, 2rem) !important;
    padding-block: min(3dvh, 2rem) !important;
}

fluent-dialog[id^="id_"] .fluent-dialog-header {
    padding-bottom: min(2dvh, 1rem) !important;
}

/* Lehetővé teszi a fluent-combobox/select listbox popupjának, hogy kilógjon a
   dialog body overflow:auto-jából. Csak a .allow-popup-overflow class-t
   tartalmazó (rövid) form-okra alkalmazzuk, hogy a hosszú dialogusoknál
   (alarm/automation) megmaradjon a scroll. */
.fluent-dialog-body:has(.allow-popup-overflow) {
    overflow: visible;
}

/* ElectricalDevice dialog DC NMEA instance mezői (Voltage / Current / Temperature / SoC).
   auto-fit minmax(14rem, 1fr): deszktopon 2 oszlop, mobilon (keskeny viewport) 1 oszlop. */
.electrical-nmea-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobil layout (<= 600px viewport)
   A Fluent dialog default min-width-je (kb. 580px) nagyobb mint a mobil
   viewport — a control középre van pozícionálva translateX(-50%)-kal, így
   a tartalom mindkét oldalt egyformán kilóg. A javítás: a control max-width-jét
   a viewporthoz kötjük, min-width-jét nullázzuk, és a padding/gap értékeket
   szűkítjük a kisebb helyhez.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    fluent-dialog[id^="id_"]::part(control) {
        max-width: calc(100dvw - 0.5rem) !important;
        min-width: 0 !important;
        max-height: calc(100dvh - 0.5rem) !important;
        padding-inline: 0.75rem !important;
        padding-block: 0.75rem !important;
    }

    .fluent-dialog-body fluent-radio-group::part(positioning-region) {
        column-gap: 1rem;
        row-gap: 0.5rem;
    }

    /* A 4 NMEA combobox biztosan 1 oszlopban */
    .electrical-nmea-grid {
        grid-template-columns: 1fr;
    }
}