/* =============================================================================
   FORM COMPONENTS — lib/styles/components/forms.css
   Covers: FormLabel, TextInput, SelectDropdown, CheckboxGroup, RadioGroup, Progress
   Spec: JusticeMatters Brand Guidelines
   ============================================================================= */

/* --- Wrapper --- */
.form-field {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
}

.form-label-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-sm);
}

/* --- Label --- */
.form-field__label {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-neutral-navy);
    line-height: var(--lh-small);
    cursor: default;
}

.form-field>.form-field__label {
    margin-bottom: var(--space-sm);
}

.form-field__required {
    color: var(--color-alert-red);
    font-weight: var(--fw-bold);
    margin-left: 2px;
}

/* --- Helper text --- */
.form-field__helper {
    display: block;
    font-family: var(--font-body);
    font-size: var(--fs-label);
    font-weight: var(--fw-regular);
    color: var(--color-mid-grey);
    line-height: var(--lh-small);
}

/* --- Input Base (Text, Select, Textarea) --- */
.form-field__input,
.form-field__select {
    width: 100%;
    min-height: 48px;
    padding: 12px var(--space-md);
    background-color: var(--color-white);
    border: 1px solid var(--color-light-grey);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    color: var(--color-neutral-navy);
    box-sizing: border-box;
    /* Added background-color to transitions for smooth disabled states */
    transition: border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.form-field__input::placeholder {
    color: var(--color-mid-grey);
    opacity: 0.8;
}

/* Hover State */
.form-field__input:hover:not(:disabled),
.form-field__select:hover:not(:disabled) {
    border-color: var(--color-mid-grey);
}

/* Focus State */
.form-field__input:focus,
.form-field__select:focus {
    border-color: var(--color-guidance-teal);
    box-shadow: 0 0 0 3px rgba(29, 118, 112, 0.1);
}

/* Validation - Error */
.form-field__input--error,
.form-field__select--error {
    border-width: 2px;
    border-color: var(--color-alert-red);
    padding-left: calc(var(--space-md) - 1px);
    padding-right: calc(var(--space-md) - 1px);
}

.form-field__input--error:focus,
.form-field__select--error:focus {
    border-color: var(--color-alert-red);
    box-shadow: 0 0 0 3px rgba(199, 66, 66, 0.1);
}

/* Disabled State */
.form-field--disabled .form-field__input,
.form-field--disabled .form-field__select {
    background-color: var(--color-paper-white);
    color: var(--color-mid-grey);
    border-color: var(--color-light-grey);
    cursor: not-allowed;
}

.form-field--disabled .form-field__label {
    color: var(--color-mid-grey);
}

/* --- Textarea Specifics --- */
textarea.form-field__input {
    min-height: 120px;
    resize: vertical;
    padding-top: var(--space-md);
}

/* --- Select Dropdown Specifics --- */
.form-field__select-wrapper {
    position: relative;
    display: flex;
    align-items: stretch;
}

.form-field__select {
    padding-right: 48px;
    cursor: pointer;
}

.form-field__select-chevron {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-guidance-teal);
    font-size: 14px;
    pointer-events: none;
    transition: transform var(--transition-fast);
}

.form-field__select:focus~.form-field__select-chevron {
    transform: translateY(-50%) rotate(180deg);
}

/* =============================================================================
   RADIO GROUP
   ============================================================================= */

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.radio-group--disabled {
    opacity: 0.6;
}

.radio-group__legend {
    margin-bottom: 0;
}

.radio-group__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.radio-group__items--horizontal {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-xl);
}

.radio-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    position: relative;
    cursor: pointer;
    min-height: 48px;
    padding: var(--space-sm) 0;
}

.radio-item--disabled {
    cursor: not-allowed;
}

.radio-item__input {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.radio-item__input:disabled {
    cursor: not-allowed;
}

.radio-item__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 0;
    background-color: var(--color-white);
    border: 2px solid var(--color-light-grey);
    border-radius: 50%;
    transition: border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    pointer-events: none;
}

.radio-item:hover:not(.radio-item--disabled) .radio-item__indicator {
    border-color: var(--color-guidance-teal);
}

.radio-item__indicator--checked {
    border-color: var(--color-justice-blue);
}

.radio-item__input:focus-visible~.radio-item__indicator {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* Smooth motion for the inner dot selection */
.radio-item__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-justice-blue);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.radio-item__indicator--checked .radio-item__dot {
    opacity: 1;
    transform: scale(1);
}

.radio-item__label {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    cursor: pointer;
    flex: 1;
    margin-top: 2px;
}

.radio-item--disabled .radio-item__label {
    cursor: not-allowed;
}

.radio-item__text {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    color: var(--color-neutral-navy);
    line-height: var(--lh-body);
}

.radio-item--selected .radio-item__text {
    font-weight: var(--fw-semibold);
}

.radio-item--disabled .radio-item__text {
    color: var(--color-mid-grey);
}

.radio-item__sublabel {
    font-size: var(--fs-small);
    color: var(--color-mid-grey);
    line-height: var(--lh-small);
}

.radio-group--error .radio-item__indicator {
    border-color: var(--color-alert-red);
}

.radio-group--error .radio-item:hover:not(.radio-item--disabled) .radio-item__indicator {
    border-color: var(--color-alert-red);
}

/* =============================================================================
   CHECKBOX GROUP
   ============================================================================= */

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: none;
    padding: 0;
    margin: 0;
    width: 100%;
}

.checkbox-group--disabled {
    opacity: 0.6;
}

.checkbox-group--single {
    gap: 0;
}

.checkbox-group__legend {
    margin-bottom: 0;
}

.checkbox-group__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    position: relative;
    cursor: pointer;
    min-height: 48px;
    padding: var(--space-sm) 0;
}

.checkbox-item--disabled {
    cursor: not-allowed;
}

.checkbox-item__input {
    position: absolute;
    opacity: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.checkbox-item__input:disabled {
    cursor: not-allowed;
}

.checkbox-item__indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 0;
    background-color: var(--color-white);
    border: 2px solid var(--color-light-grey);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast);
    pointer-events: none;
}

.checkbox-item:hover:not(.checkbox-item--disabled) .checkbox-item__indicator {
    border-color: var(--color-guidance-teal);
}

.checkbox-item__indicator--checked {
    background-color: var(--color-justice-blue);
    border-color: var(--color-justice-blue);
}

.checkbox-item__input:focus-visible~.checkbox-item__indicator {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

/* Smooth motion for the checkmark reveal */
.checkbox-item__checkmark {
    font-size: 14px;
    color: var(--color-white);
    line-height: 1;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.checkbox-item__indicator--checked .checkbox-item__checkmark {
    opacity: 1;
    transform: scale(1);
}

.checkbox-item__label {
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-regular);
    color: var(--color-neutral-navy);
    line-height: var(--lh-body);
    cursor: pointer;
    flex: 1;
    margin-top: 2px;
}

.checkbox-item--disabled .checkbox-item__label {
    cursor: not-allowed;
    color: var(--color-mid-grey);
}

.checkbox-item__label a {
    color: var(--color-guidance-teal);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 2px;
    transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
    position: relative;
    z-index: 2;
}

.checkbox-item__label a:hover {
    color: var(--color-justice-blue);
    text-decoration-color: var(--color-justice-blue);
}

.checkbox-group--error .checkbox-item__indicator {
    border-color: var(--color-alert-red);
}

/* =============================================================================
   PROGRESS INDICATOR
   ============================================================================= */

.progress-indicator {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    margin-bottom: var(--space-xl);
}

.progress-indicator__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.progress-indicator__label {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: var(--fw-semibold);
    color: var(--color-justice-blue);
}

.progress-indicator__text {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    color: var(--color-mid-grey);
}

.progress-indicator__track {
    width: 100%;
    height: 8px;
    background-color: var(--color-light-grey);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-indicator__bar {
    height: 100%;
    background-color: var(--color-guidance-teal);
    border-radius: var(--radius-full);
    /* Calm transition token used for structural fill */
    transition: width var(--transition-normal);
}