/* ──────────────────────────────────────────────────────────────────────────
   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-radius: var(--list-border-radius);
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.06);
}

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

.edit-page-form label {
    font-style: italic;
    width: fit-content;
}

.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-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-text-area.invalid::part(control),
.edit-page-form fluent-text-field.invalid::part(root) {
    outline: calc(var(--stroke-width) * 1px) solid var(--error-clr);
}

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

.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);
    }
}

/* A nautech-page-en belüli back-btn — globális, hogy a Details.razor scoped
   `.back-btn` szelektorán kívül is működjön (mivel a scoped CSS csak a Details
   oldalon érvényes, az új edit-page-eknek saját szabály kell). */
.edit-page .back-btn {
    width: fit-content;
    color: white;
    background: var(--primary-clr);
}

/* 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;
    }
}