/* ──────────────────────────────────────────────────────────────────────────
   EditPage layout — közös stílusok a /vessel_settings/{entity}/{id|new}
   edit-page-ekhez. A Pages/EditPages/EditPageShell.razor használja.
   ────────────────────────────────────────────────────────────────────────── */

.edit-page {
    /* a nautech-page (display: grid; gap: 2rem) gap-jét finomítjuk a form-szerű
       elrendezéshez: a header és a form között kisebb hézag, a form-on belül
       az edit-page-form maga ad gap-et. */
    gap: 1rem;
}

.edit-page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.edit-page-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.25rem;
}

.edit-page-card {
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
    background: var(--list-bg);
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    padding: 1.5rem;
    box-shadow: 0 1px 2px var(--c-shadow-xs), 0 2px 8px var(--c-shadow-xs);
}

.edit-page-form {
    display: grid;
    gap: 1rem;
    width: 100%;
}

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

.edit-page-form fluent-text-field,
.edit-page-form fluent-number-field,
.edit-page-form fluent-combobox,
.edit-page-form fluent-select {
    width: 100%;
}

.edit-page-form fluent-text-field:focus-visible,
.edit-page-form fluent-number-field:focus-visible,
.edit-page-form fluent-combobox:focus-visible,
.edit-page-form fluent-select:focus-visible {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
    border-radius: inherit;
}

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

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

.edit-page-form fluent-number-field.invalid {
    outline: none;
}

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

/* Kötelező-mező csillag a select-ek LabelTemplate-jében — a text-field Required piros csillagához illesztve.
   (A select-eknél NEM használunk natív Required-et, mert a FluentSelect natív validációja Firefoxon
   „ElementInternals.setValidity: Need to provide validation message" konzol-hibát dobott.) */
.edit-page-form .req-star {
    color: var(--error-clr);
    font-weight: 600;
    margin-inline-start: 0.15rem;
}

.edit-page-footer {
    display: flex;
    gap: 0.5rem;
    padding-block-start: 1.25rem;
    margin-block-start: 1rem;
    border-block-start: var(--border-thin);
}

.edit-page-header {
    width: 100%;
    max-width: 40rem;
    margin-inline: auto;
}

@media (max-width: 600px) {
    .edit-page-card {
        padding: 1rem;
        border-radius: 0;
        margin-inline: calc(var(--main-padding) * -1);
    }
}

/* DC NMEA mezők grid az ElectricalDevice page-en (és más helyütt 4-cella autofit). */
.edit-page-form .electrical-nmea-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

@media (max-width: 600px) {
    .edit-page-header {
        gap: 0.5rem;
    }

    .edit-page-form .electrical-nmea-grid {
        grid-template-columns: 1fr;
    }

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

/* ──────────────────────────────────────────────────────────────────────────
   Kétoszlopos mezőpár — pl. engine: type + power egymás mellett.
   ────────────────────────────────────────────────────────────────────────── */
.edit-page-form .field-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

/* ──────────────────────────────────────────────────────────────────────────
   Yes/No toggle-kártyák (engine: electric / spare) — a sima rádiógombok helyett.
   Két kártya egymás mellett, mindegyik ikon + felirat + kapcsoló.
   ────────────────────────────────────────────────────────────────────────── */
.edit-page-form .toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.edit-page-form .toggle-card {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem;
    border: var(--border-thin);
    border-radius: var(--list-border-radius);
    background: var(--neutral-layer-2, var(--list-bg));
}

.edit-page-form .toggle-card__icon {
    color: var(--muted-clr);
    flex: none;
}

.edit-page-form .toggle-card__label {
    flex: 1;
    /* felülírjuk az .edit-page-form label italic-muted „segédszöveg” stílusát */
    font-style: normal;
    color: var(--text-clr);
    line-height: 1.2;
}

/* ──────────────────────────────────────────────────────────────────────────
   Ikonos választó-kártyák (tank: fuel/water · geofence: enter/exit) — a rádió-
   gombok helyett. Kártyánként egy ikon + felirat; a kijelölt kártya kiemelt.
   ────────────────────────────────────────────────────────────────────────── */
.edit-page-form .choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.edit-page-form .choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 1rem 0.75rem;
    border: 2px solid var(--c-divider);
    border-radius: var(--list-border-radius);
    background: var(--neutral-layer-2, var(--list-bg));
    color: var(--muted-clr);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.edit-page-form .choice-card:hover {
    border-color: color-mix(in srgb, var(--primary-clr) 45%, var(--c-divider));
}

.edit-page-form .choice-card:focus-visible {
    outline: 2px solid var(--primary-clr);
    outline-offset: 2px;
}

.edit-page-form .choice-card__label {
    font-weight: 600;
    font-size: 0.95rem;
}

.edit-page-form .choice-card--selected {
    border-color: var(--primary-clr);
    background: color-mix(in srgb, var(--primary-clr) 12%, var(--neutral-layer-2, var(--list-bg)));
    color: var(--text-clr);
}

/* ──────────────────────────────────────────────────────────────────────────
   Alarm-szint választó — a notifikációs chip-ekhez igazodó, kattintható chip-ek.
   A kijelölt szint teli színben, a többi elhalványítva.
   ────────────────────────────────────────────────────────────────────────── */
.edit-page-form .level-choice-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.edit-page-form .level-choice {
    display: inline-flex;
    padding: 0;
    border: none;
    background: none;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0.4;
    filter: grayscale(0.5);
    transition: opacity .15s ease, filter .15s ease, box-shadow .15s ease;
}

.edit-page-form .level-choice:hover {
    opacity: 0.8;
    filter: grayscale(0.2);
}

.edit-page-form .level-choice--active {
    opacity: 1;
    filter: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-clr) 55%, transparent);
}

.edit-page-form .level-choice:focus-visible {
    outline: 2px solid var(--primary-clr);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .edit-page-form .field-grid-2,
    .edit-page-form .toggle-grid,
    .edit-page-form .choice-grid {
        grid-template-columns: 1fr;
    }
}