/* Enterprise form composition layer.
 * Mirrors the imported Zenith New Product pattern: compact bordered sections,
 * separated section headers, dense responsive grids, and a bordered action footer.
 */
.mf-form-page {
    width: 100%;
    max-width: 1380px;
}

.mf-form-page--narrow {
    max-width: 980px;
}

.mf-form-heading {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px 20px;
}

.mf-form-heading h1 {
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--foreground);
}

.mf-form-heading p {
    margin-top: 4px;
    max-width: 760px;
    font-size: .8125rem;
    line-height: 1.45rem;
    color: var(--muted-foreground);
}

.mf-form {
    display: grid;
    gap: 16px;
}

/* New Product-style section card: one quiet border, no nested card treatment. */
.mf-form-section {
    padding: 10px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--card);
    box-shadow: 0 1px 2px rgb(0 0 0 / .02);
}

.mf-form-section-head {
    min-height: 58px;
    margin: 0;
    padding: 13px 16px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in oklab, var(--muted) 16%, var(--card));
}

.mf-form-section-actions {
    flex: 0 0 auto;
}

.mf-form-section-title {
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 650;
    letter-spacing: -.01em;
    color: var(--foreground);
}

.mf-form-section-copy {
    margin-top: 3px;
    max-width: 760px;
    font-size: .75rem;
    line-height: 1.2rem;
    color: var(--muted-foreground);
}

.mf-form-section-body {
    padding: 16px;
}

.mf-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 16px;
    align-items: start;
}

.mf-form-grid > * {
    min-width: 0;
}

.mf-col-2,
.mf-col-3,
.mf-col-4,
.mf-col-5,
.mf-col-6,
.mf-col-7,
.mf-col-8,
.mf-col-9,
.mf-col-10,
.mf-col-12 {
    grid-column: 1 / -1;
}

.mf-form-inline {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.mf-form-inline > :first-child {
    min-width: 0;
    flex: 1;
}

/* Zenith form controls are compact (h-9) rather than dashboard-sized. */
.mf-form .mf-field-label {
    margin-bottom: 6px;
    font-size: .75rem;
    line-height: 1rem;
    font-weight: 550;
}

.mf-form .mf-input {
    height: 36px;
    border-radius: calc(var(--radius) - 2px);
    background: var(--background);
    font-size: .8125rem;
    box-shadow: 0 1px 2px rgb(0 0 0 / .02);
}

/* Keep label text separated consistently from every checkbox/radio in the UI. */
input[type="checkbox"],
input[type="radio"] {
    margin-right: 10px !important;
}

.mf-field-help {
    margin-top: 5px;
    font-size: .6875rem;
    line-height: 1.05rem;
    color: var(--muted-foreground);
}

.mf-option-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.mf-option {
    min-height: 40px;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 9px 10px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--background);
    font-size: .8125rem;
    line-height: 1.2rem;
    color: var(--foreground);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.mf-option:hover {
    background: color-mix(in oklab, var(--muted) 34%, transparent);
}

.mf-option:has(input:checked) {
    border-color: color-mix(in oklab, var(--primary) 38%, var(--border));
    background: color-mix(in oklab, var(--primary) 5%, var(--background));
}

.mf-option input[type="checkbox"],
.mf-option input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 1px 10px 0 0;
    flex: 0 0 16px;
    accent-color: var(--primary);
    cursor: pointer;
}

.mf-option input {
    margin-right: 10px;
}

.mf-option input:focus-visible {
    outline: 2px solid color-mix(in oklab, var(--primary) 45%, transparent);
    outline-offset: 2px;
}

/* Matches the bordered footer treatment used below create/edit forms. */
.mf-form-actions {
    min-height: 58px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 2px);
    background: var(--card);
    box-shadow: 0 1px 2px rgb(0 0 0 / .02);
}

.mf-form-actions--between {
    justify-content: space-between;
}

.mf-form-actions-note {
    margin-right: auto;
    font-size: .75rem;
    color: var(--muted-foreground);
}

.mf-form .mf-input[type="file"] {
    height: auto;
    min-height: 36px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.mf-form textarea.mf-input {
    height: auto;
    min-height: 96px;
    padding-top: 9px;
    padding-bottom: 9px;
    line-height: 1.45;
    resize: vertical;
}

@media (min-width: 768px) {
    .mf-form-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .mf-col-2,
    .mf-col-3,
    .mf-col-4,
    .mf-col-5,
    .mf-col-6 {
        grid-column: span 3 / span 3;
    }

    .mf-col-7,
    .mf-col-8,
    .mf-col-9,
    .mf-col-10,
    .mf-col-12 {
        grid-column: span 6 / span 6;
    }

    .mf-option-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .mf-form-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr));
    }

    .mf-col-2 { grid-column: span 2 / span 2; }
    .mf-col-3 { grid-column: span 3 / span 3; }
    .mf-col-4 { grid-column: span 4 / span 4; }
    .mf-col-5 { grid-column: span 5 / span 5; }
    .mf-col-6 { grid-column: span 6 / span 6; }
    .mf-col-7 { grid-column: span 7 / span 7; }
    .mf-col-8 { grid-column: span 8 / span 8; }
    .mf-col-9 { grid-column: span 9 / span 9; }
    .mf-col-10 { grid-column: span 10 / span 10; }
    .mf-col-12 { grid-column: span 12 / span 12; }

    .mf-option-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1500px) {
    .mf-form-grid {
        column-gap: 18px;
    }
}

@media (max-width: 720px) {
    .mf-form-heading {
        margin-bottom: 18px;
    }

    .mf-form {
        gap: 14px;
    }

    .mf-form-section-head {
        min-height: 0;
        padding: 12px 13px;
    }

    .mf-form-section-body {
        padding: 13px;
    }

    .mf-form-actions {
        min-height: 0;
        justify-content: stretch;
        padding: 10px;
    }

    .mf-form-actions .mf-btn {
        flex: 1;
    }
}
