/* =============================================================================
   lib/styles/components/forms.css — Fishermens Academy
   Initial scope: TextInput
   ============================================================================= */

.academy-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
}

.academy-form-field__helper {
    margin: 0 0 var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--color-slate-gray);
}

.academy-form-field__control {
    position: relative;
    width: 100%;
}

.academy-form-field__input {
    width: 100%;
    min-height: 56px;
    padding: 22px 16px 12px;
    border: 1px solid rgba(74, 85, 104, 0.22);
    border-radius: var(--radius-student);
    background-color: var(--color-white);
    color: var(--color-dark-charcoal);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.academy-form-field__input::placeholder {
    color: transparent;
}

.academy-form-field__input:hover:not(:disabled) {
    border-color: rgba(26, 54, 93, 0.32);
}

.academy-form-field__input:focus {
    border-color: var(--color-sunrise-gold);
    box-shadow: 0 0 0 2px rgba(214, 158, 46, 0.18);
    outline: none;
}

.academy-form-field__input--multiline {
    min-height: 132px;
    resize: vertical;
    padding-top: 28px;
}

.academy-form-field__label {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: calc(100% - 32px);
    padding: 0 4px;
    background-color: var(--color-white);
    color: var(--color-slate-gray);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1;
    pointer-events: none;
    transform-origin: left top;
    transition:
        transform var(--transition-fast),
        color var(--transition-fast),
        top var(--transition-fast);
}

.academy-form-field__label-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.academy-form-field__required {
    color: var(--color-clay-terra);
    font-weight: var(--fw-semibold);
}

.academy-form-field--has-value .academy-form-field__label,
.academy-form-field__input:focus+.academy-form-field__label {
    transform: translateY(-14px) scale(0.82);
    color: var(--color-harbor-blue);
}

.academy-form-field--multiline .academy-form-field__label {
    top: 18px;
}

.academy-form-field__footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    min-height: 20px;
}

.academy-form-field__message {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
}

.academy-form-field__message--hint {
    color: var(--color-slate-gray);
}

.academy-form-field__message--error {
    color: var(--color-alert-crimson);
}

.academy-form-field__counter {
    margin: 0 0 0 auto;
    flex-shrink: 0;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    line-height: var(--lh-label);
    color: var(--color-slate-gray);
}

.academy-form-field--invalid .academy-form-field__input {
    border-color: var(--color-alert-crimson);
    background-color: rgba(197, 48, 48, 0.03);
}

.academy-form-field--invalid .academy-form-field__input:focus {
    border-color: var(--color-alert-crimson);
    box-shadow: 0 0 0 2px rgba(197, 48, 48, 0.12);
}

.academy-form-field--invalid .academy-form-field__label {
    color: var(--color-alert-crimson);
}

.academy-form-field--invalid .academy-form-field__counter {
    color: var(--color-alert-crimson);
}

.academy-form-field--disabled .academy-form-field__input {
    background-color: rgba(74, 85, 104, 0.08);
    color: rgba(74, 85, 104, 0.78);
    cursor: not-allowed;
}

.academy-form-field--disabled .academy-form-field__label,
.academy-form-field--disabled .academy-form-field__helper,
.academy-form-field--disabled .academy-form-field__counter {
    color: rgba(74, 85, 104, 0.72);
}

@media screen and (max-width: 639px) {
    .academy-form-field__input {
        min-height: 56px;
        font-size: 16px;
    }

    .academy-form-field__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .academy-form-field__counter {
        margin-left: 0;
    }
}

/* =============================================================================
   FILE UPLOAD DROPZONE — lib/components/forms/file_upload_dropzone.dart
   ============================================================================= */

.academy-upload {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
}

.academy-upload__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.academy-upload__label {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-semibold);
    line-height: var(--lh-small);
    color: var(--color-harbor-blue);
}

.academy-upload__required {
    color: var(--color-clay-terra);
    font-weight: var(--fw-semibold);
}

.academy-upload__helper {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--color-slate-gray);
    max-width: 60ch;
}

.academy-upload__surface {
    position: relative;
    min-height: 176px;
    border: 2px dashed rgba(26, 54, 93, 0.28);
    border-radius: var(--radius-student);
    background:
        linear-gradient(180deg,
            rgba(248, 249, 250, 1) 0%,
            rgba(248, 249, 250, 0.96) 100%);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
    overflow: hidden;
}

.academy-upload__surface:hover {
    border-color: var(--color-sunrise-gold);
    box-shadow: 0 0 0 2px rgba(214, 158, 46, 0.12);
}

/* Updated interaction states for active drop / focus */
.academy-upload--highlighted .academy-upload__surface,
.academy-upload__surface:focus-within {
    border-color: var(--color-sunrise-gold);
    border-style: solid;
    box-shadow: 0 0 0 4px rgba(214, 158, 46, 0.15);
    background: rgba(214, 158, 46, 0.05);
}

.academy-upload__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.academy-upload__content {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 176px;
    padding: var(--space-xl);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
}

.academy-upload__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background-color: rgba(26, 54, 93, 0.08);
    color: var(--color-harbor-blue);
    font-size: 24px;
    line-height: 1;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.academy-upload--highlighted .academy-upload__icon,
.academy-upload__surface:focus-within .academy-upload__icon {
    color: var(--color-sunrise-gold);
    transform: translateY(-4px);
}

.academy-upload__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    line-height: var(--lh-heading-4);
    color: var(--color-harbor-blue);
}

.academy-upload__text,
.academy-upload__hint {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-slate-gray);
    max-width: 40ch;
}

.academy-upload__hint {
    font-size: var(--fs-small);
}

.academy-upload__file-list {
    margin: 0;
    padding-left: var(--space-lg);
    color: var(--color-slate-gray);
}

.academy-upload__file-item {
    margin-bottom: var(--space-xs);
    word-break: break-word;
}

.academy-upload--disabled .academy-upload__surface {
    background: rgba(74, 85, 104, 0.06);
    border-color: rgba(74, 85, 104, 0.18);
    box-shadow: none;
}

.academy-upload--disabled .academy-upload__input {
    cursor: not-allowed;
}

.academy-upload--disabled .academy-upload__label,
.academy-upload--disabled .academy-upload__helper,
.academy-upload--disabled .academy-upload__text,
.academy-upload--disabled .academy-upload__hint {
    color: rgba(74, 85, 104, 0.72);
}

@media screen and (max-width: 639px) {

    .academy-upload__surface,
    .academy-upload__content {
        min-height: 192px;
    }

    .academy-upload__content {
        padding: var(--space-lg);
    }

    .academy-upload__input {
        min-height: var(--min-touch-target);
    }
}

/* =============================================================================
   FORM VALIDATOR — lib/components/forms/form_validator.dart
   ============================================================================= */

.academy-form-validator {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: var(--space-lg);
    padding: var(--space-md) var(--space-lg);
    background-color: rgba(197, 48, 48, 0.04);
    border: 1px solid rgba(197, 48, 48, 0.25);
    border-radius: var(--radius-student);
    animation: validator-slide-down var(--transition-normal) forwards;
}

.academy-form-validator--hidden {
    display: none;
}

@keyframes validator-slide-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.academy-form-validator__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.academy-form-validator__title-wrap {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.academy-form-validator__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background-color: var(--color-alert-crimson);
    color: var(--color-white);
    font-size: 14px;
    font-weight: var(--fw-bold);
    line-height: 1;
}

.academy-form-validator__title {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--fs-h5);
    font-weight: var(--fw-semibold);
    color: var(--color-alert-crimson);
}

.academy-form-validator__actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.academy-form-validator__toggle {
    background: transparent;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-alert-crimson);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.academy-form-validator__toggle:hover {
    background-color: rgba(197, 48, 48, 0.08);
}

.academy-form-validator__toggle:focus-visible {
    outline: 2px solid var(--color-sunrise-gold);
    outline-offset: 2px;
}

.academy-form-validator__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--color-alert-crimson);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.academy-form-validator__dismiss:hover {
    background-color: rgba(197, 48, 48, 0.08);
}

.academy-form-validator__list {
    margin: var(--space-sm) 0 0 0;
    padding: 0 0 0 28px;
    /* Align with text, bypassing icon */
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    animation: validator-list-fade-in var(--transition-fast) forwards;
}

@keyframes validator-list-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.academy-form-validator__item {
    position: relative;
}

.academy-form-validator__item::before {
    content: "•";
    position: absolute;
    left: -12px;
    color: var(--color-alert-crimson);
}

.academy-form-validator__link {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-dark-charcoal);
    text-decoration: underline;
    text-decoration-color: rgba(197, 48, 48, 0.3);
    text-underline-offset: 3px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.academy-form-validator__link:hover {
    color: var(--color-alert-crimson);
    text-decoration-color: var(--color-alert-crimson);
}

.academy-form-validator__link:focus-visible {
    outline: 2px solid var(--color-sunrise-gold);
    outline-offset: 2px;
    border-radius: 2px;
}

@media screen and (max-width: 639px) {
    .academy-form-validator__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =============================================================================
   FORM ELEMENTS — Fishermens Academy Brand Override
   ============================================================================= */

/* Shared Focus Ring */
.form-field__select:focus-visible,
.checkbox__input:focus-visible,
.radio__input:focus-visible,
.text-input:focus-visible {
    outline: 2px solid var(--color-sunrise-gold);
    outline-offset: 2px;
}

/* Inline Restorative Error Message */
.form-field__error-text {
    margin-top: var(--space-xs);
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--color-alert-crimson);
}

.form-field--error .form-field__select,
.checkbox-group--error .checkbox__input,
.radio-group--error .radio__indicator {
    border-color: var(--color-alert-crimson);
}

/* Checkbox Brand Accents */
.checkbox__input:checked {
    background-color: var(--color-sunrise-gold);
    border-color: var(--color-sunrise-gold);
}

.checkbox__indicator--checked .checkbox__checkmark {
    color: var(--color-harbor-blue);
    /* Tick inside gold box */
}

/* Radio Brand Accents */
.radio__indicator {
    border: 2px solid var(--color-slate-gray);
}

.radio__indicator--checked {
    border-color: var(--color-harbor-blue);
}

.radio__dot {
    background-color: var(--color-sunrise-gold);
}

/* Select Dropdown */
.form-field__select {
    border: 1px solid var(--color-slate-gray);
    color: var(--color-harbor-blue);
}