/*
 * EdPhase form design system
 * Loaded after feature styles so every portal shares one accessible form language.
 */

:root {
    --form-control-height: 48px;
    --form-control-radius: 11px;
    --form-control-padding-x: 14px;
    --form-section-gap: clamp(20px, 3vw, 30px);
    --form-panel-padding: clamp(19px, 3vw, 28px);
}

/* Field rhythm and labels */
.form-field,
.field-group {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 7px;
}

.form-field > label,
.field-group > label,
.reject-form > label,
.status-action-grid label,
.result-dialog label,
.promotion-review-form label {
    color: var(--text-strong);
    font-size: .875rem;
    font-weight: 720;
    line-height: 1.35;
}

.required-marker {
    margin-left: .22rem;
    color: var(--danger);
    font-weight: 850;
}

.form-required-note {
    margin: 0 0 18px;
    color: var(--muted);
    font-size: .78rem;
}

.form-required-note .required-marker {
    margin-left: 0;
}

.field-hint,
.form-field > small:not(.field-error),
.dialog-note,
.save-contract,
.search-help {
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
}

/* One control treatment across public, auth, and every portal. */
:where(.public-page, .auth-page, .wizard-page, .portal-page)
    :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea) {
    width: 100%;
    min-width: 0;
    min-height: var(--form-control-height);
    padding: 11px var(--form-control-padding-x);
    border: 1px solid var(--border-strong);
    border-radius: var(--form-control-radius);
    outline: 0;
    color: var(--text);
    background-color: var(--surface);
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

:where(.public-page, .auth-page, .wizard-page, .portal-page)
    :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea):hover:not(:disabled):not([readonly]) {
    border-color: color-mix(in srgb, var(--primary) 38%, var(--border-strong));
}

:where(.public-page, .auth-page, .wizard-page, .portal-page)
    :where(input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="button"]):not([type="submit"]):not([type="reset"]), select, textarea):focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent);
}

:where(.public-page, .auth-page, .wizard-page, .portal-page) textarea {
    min-height: 112px;
    resize: vertical;
    line-height: 1.5;
}

:where(.public-page, .auth-page, .wizard-page, .portal-page) input::placeholder,
:where(.public-page, .auth-page, .wizard-page, .portal-page) textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 78%, transparent);
    opacity: 1;
}

:where(.public-page, .auth-page, .wizard-page, .portal-page)
    :where(input, select, textarea):disabled {
    cursor: not-allowed;
    color: var(--muted);
    border-color: var(--border);
    background: var(--surface-2);
    box-shadow: none;
    opacity: .82;
}

:where(.public-page, .auth-page, .wizard-page, .portal-page)
    :where(input, textarea)[readonly] {
    cursor: default;
    color: var(--muted-strong);
    border-style: dashed;
    background: var(--surface-2);
    box-shadow: none;
}

/* Existing icon/password wrappers keep a single outer border. */
.input-wrap > :where(input, select, textarea),
.slug-input > input {
    min-height: 46px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.input-wrap:focus-within,
.slug-input:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 18%, transparent);
}

/* Validation is communicated by text, shape, and color. */
.field-error:not(:empty) {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    color: var(--danger) !important;
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.45;
}

.field-error:not(:empty)::before {
    display: inline-grid;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    margin-top: 1px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "!";
    font-size: .65rem;
    line-height: 1;
}

.form-field.has-error :where(input, select, textarea),
:where(input, select, textarea)[aria-invalid="true"] {
    border-color: var(--danger) !important;
    background-color: color-mix(in srgb, var(--danger-soft) 42%, var(--surface)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 11%, transparent) !important;
}

.form-field.has-error .input-wrap {
    border-color: var(--danger);
    background-color: color-mix(in srgb, var(--danger-soft) 42%, var(--surface));
}

.form-error-summary,
.alert.alert-error {
    border-left: 4px solid var(--danger);
}

.form-error-summary {
    display: grid;
    gap: 7px;
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border));
    border-left-width: 4px;
    border-radius: var(--radius);
    color: var(--danger);
    background: var(--danger-soft);
}

.form-error-summary > * {
    margin: 0;
}

/* Native choices remain familiar, with larger touch targets. */
:where(.public-page, .auth-page, .wizard-page, .portal-page) input[type="checkbox"],
:where(.public-page, .auth-page, .wizard-page, .portal-page) input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin: 1px 0 0;
    accent-color: var(--primary);
}

.checkbox-row,
.choice-grid label,
.clear-mark-control,
.attendance-choice,
.decision-choice {
    min-height: 44px;
    cursor: pointer;
}

.checkbox-row:hover,
.choice-grid label:hover {
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    background: color-mix(in srgb, var(--primary-soft) 50%, var(--surface));
}

/* File inputs work without JavaScript and gain richer filename feedback with it. */
:where(.public-page, .auth-page, .wizard-page, .portal-page) input[type="file"] {
    height: auto;
    min-height: 52px;
    padding: 6px;
    cursor: pointer;
}

:where(.public-page, .auth-page, .wizard-page, .portal-page) input[type="file"]::file-selector-button {
    min-height: 38px;
    margin-right: 12px;
    padding: 8px 13px;
    border: 0;
    border-radius: 8px;
    color: var(--primary);
    background: var(--primary-soft);
    cursor: pointer;
    font-weight: 750;
}

.upload-card,
.file-drop {
    border-color: var(--border-strong);
    background: var(--surface-2);
}

.upload-card:focus-within,
.file-drop:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--focus) 16%, transparent);
}

.file-feedback {
    display: flex;
    gap: 7px;
    align-items: center;
    color: var(--muted);
    overflow-wrap: anywhere;
}

.file-feedback.has-file {
    color: var(--success);
    font-weight: 700;
}

/* Layout primitives */
.form-row,
.form-grid,
.student-profile-form-grid,
.result-form-grid,
.review-field-grid {
    gap: 18px;
}

.settings-form,
.auth-form,
.wizard-form,
.promotion-review-form,
.reject-form,
.status-action-grid form,
.result-dialog form {
    min-width: 0;
}

.form-section {
    display: grid;
    gap: 18px;
    padding-block: var(--form-section-gap);
    border-top: 1px solid var(--border);
}

.form-section:first-child {
    padding-top: 0;
    border-top: 0;
}

.form-section-heading {
    display: grid;
    gap: 5px;
}

.form-section-heading h2,
.form-section-heading h3 {
    margin: 0;
    font-size: 1.05rem;
}

.form-section-heading p {
    margin: 0;
    color: var(--muted);
    font-size: .82rem;
}

/* Search and filters */
.filter-bar,
.lookup-filters,
.review-filters,
.attendance-selectors,
.result-selectors,
.promotion-filter,
.student-attendance-filters,
.student-result-filters,
.analytics-filter-grid,
.board-choice-search,
.school-search {
    min-width: 0;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.filter-bar .form-field,
.lookup-filters .form-field,
.review-filters .form-field,
.attendance-selectors .form-field,
.result-selectors .form-field,
.promotion-filter .form-field {
    margin: 0;
}

.filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: center;
}

.filter-clear {
    min-height: 44px;
    padding: 10px 12px;
    color: var(--muted-strong);
    font-size: .83rem;
    font-weight: 700;
    text-decoration: none;
}

.filter-clear:hover {
    color: var(--primary);
    text-decoration: underline;
}

/* Actions stay visually separate from data-entry fields. */
.form-actions,
.settings-actions,
.wizard-actions,
.modal-actions,
.attendance-actions,
.result-save-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.form-actions > :first-child,
.settings-actions > :first-child,
.wizard-actions > :first-child {
    margin-right: auto;
}

.button[disabled],
.button[aria-disabled="true"] {
    cursor: wait;
    opacity: .68;
}

.button.is-submitting::before {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    animation: form-spin .65s linear infinite;
}

@keyframes form-spin {
    to { transform: rotate(360deg); }
}

/* Destructive actions read as deliberate decisions, not ordinary settings. */
.reject-form,
.status-action-grid form,
.decision-actions form {
    padding: 17px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface-2);
}

.reject-form:has(.button-danger),
.status-action-grid form:has(.button-danger),
.decision-actions form:has(.button-danger) {
    border-left: 4px solid var(--danger);
}

/* Dialog forms remain usable on short and narrow screens. */
.result-dialog,
dialog {
    max-width: min(620px, calc(100vw - 28px));
    max-height: min(820px, calc(100dvh - 28px));
    overflow: auto;
    overscroll-behavior: contain;
}

.dialog-close,
.password-toggle,
.toast-close,
.icon-button {
    min-width: 40px;
    min-height: 40px;
}

@media (max-width: 900px) {
    .form-grid-3,
    .filter-bar-wide,
    .review-filters.filters-four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .field-span-3 {
        grid-column: span 2;
    }
}

@media (max-width: 680px) {
    :root {
        --form-control-height: 46px;
        --form-control-padding-x: 12px;
    }

    .form-row,
    .form-grid,
    .form-grid-3,
    .student-profile-form-grid,
    .result-form-grid,
    .review-field-grid,
    .filter-bar,
    .filter-bar-wide,
    .lookup-filters,
    .review-filters,
    .review-filters.filters-four,
    .review-filters.filters-three,
    .attendance-selectors,
    .result-selectors,
    .promotion-filter,
    .student-attendance-filters,
    .student-result-filters,
    .analytics-filter-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .field-span-2,
    .field-span-3,
    .form-field-full,
    .result-form-grid .field-wide {
        grid-column: auto;
    }

    .filter-bar,
    .lookup-filters,
    .review-filters,
    .attendance-selectors,
    .result-selectors,
    .promotion-filter,
    .student-attendance-filters,
    .student-result-filters,
    .analytics-filter-grid,
    .board-choice-search,
    .school-search {
        padding: 13px;
    }

    .form-actions,
    .settings-actions,
    .wizard-actions,
    .modal-actions,
    .attendance-actions,
    .result-save-actions,
    .filter-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .form-actions > *,
    .settings-actions > *,
    .wizard-actions > *,
    .modal-actions > *,
    .attendance-actions > *,
    .result-save-actions > *,
    .filter-actions > * {
        width: 100%;
        margin-right: 0 !important;
    }

    .result-dialog,
    dialog {
        width: calc(100vw - 20px);
        max-width: none;
        max-height: calc(100dvh - 20px);
        margin: auto;
    }

    .auth-page,
    .login-shell,
    .selector-shell,
    .login-form-panel,
    .selector-card,
    .login-form-wrap,
    .auth-heading,
    .auth-form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .login-heading h2,
    .wizard-heading h1 {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    :where(.public-page, .auth-page, .wizard-page, .portal-page) input[type="file"]::file-selector-button {
        display: block;
        width: 100%;
        margin: 0 0 7px;
    }
}

@media (max-width: 390px) {
    html,
    body {
        min-width: 0;
    }

    body.wizard-page,
    body.auth-page {
        width: 100%;
        overflow-x: hidden;
    }

    .wizard-main {
        width: 100%;
        padding-top: 28px;
        overflow-x: hidden;
    }

    .wizard-progress {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        padding-inline: 8px;
        overflow-x: visible;
    }

    .wizard-progress span {
        width: 32px;
        height: 32px;
    }

    .wizard-progress li::before {
        top: 16px;
    }

    .wizard-progress strong {
        max-width: 58px;
        font-size: .59rem;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .wizard-card {
        width: calc(100% - 16px);
    }

    .wizard-heading h1,
    .login-heading h2 {
        font-size: clamp(1.65rem, 8.5vw, 2rem);
        line-height: 1.12;
    }

    .content-card,
    .settings-card,
    .wizard-card {
        padding-inline: 15px;
    }

    .checkbox-row,
    .choice-grid label,
    .reject-form,
    .status-action-grid form,
    .decision-actions form {
        padding: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .button.is-submitting::before {
        animation-duration: 1.4s;
    }
}