/* ============================================================
   forms.css - FORMS
   ============================================================ */

/* ============================================================
   FORM LABELS
   ============================================================ */
.form-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    margin-bottom: var(--space-1);
    font-size: var(--font-size-sm);
}

    .form-label i {
        color: var(--color-primary);
        margin-right: var(--space-1);
    }

    .form-label.required::after {
        content: " *";
        color: var(--color-danger);
        font-weight: var(--font-weight-bold);
    }

/* ============================================================
   FORM CONTROLS
   ============================================================ */
.form-control {
    display: block;
    width: 100%;
    padding: 0.55rem 0.9rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    min-height: var(--control-min-height);
}

    .form-control::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    .form-control:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-focus);
        background: var(--color-surface);
        outline: none;
    }

    .form-control:disabled,
    .form-control[readonly] {
        background: var(--color-background);
        opacity: 0.7;
        cursor: not-allowed;
    }

    .form-control.is-valid {
        border-color: var(--color-success);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    }

    .form-control.is-invalid {
        border-color: var(--color-danger);
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
    }

/* ============================================================
   FORM SELECT
   ============================================================ */
.form-select {
    display: block;
    width: 100%;
    padding: 0.55rem 2.25rem 0.55rem 0.9rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background: var(--color-surface-alt) url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 0.75rem center / 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    appearance: none;
    min-height: var(--control-min-height);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

    .form-select:focus {
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px var(--color-primary-focus);
        outline: none;
    }

    .form-select:disabled {
        background-color: var(--color-background);
        opacity: 0.7;
        cursor: not-allowed;
    }

/* ============================================================
   TEXTAREA
   ============================================================ */
textarea.form-control {
    resize: vertical;
    min-height: 60px;
}

/* ============================================================
   INPUT GROUP
   ============================================================ */
.input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

    .input-group > .form-control,
    .input-group > .form-select {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
    }

        .input-group > .form-control:not(:first-child),
        .input-group > .form-select:not(:first-child) {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }

        .input-group > .form-control:not(:last-child),
        .input-group > .form-select:not(:last-child) {
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-text-muted);
    text-align: center;
    white-space: nowrap;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    min-height: var(--control-min-height);
}

    .input-group-text:first-child {
        border-right: 0;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .input-group-text:last-child {
        border-left: 0;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

.toggle-password {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.75rem;
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-left: 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    min-height: var(--control-min-height);
    min-width: 36px;
    cursor: pointer;
    transition: var(--transition-fast);
}

    .toggle-password:hover {
        background: #E5E7EB;
        color: var(--color-text);
    }

/* ============================================================
   FLOATING LABELS
   ============================================================ */
.form-floating {
    position: relative;
}

    .form-floating > .form-control,
    .form-floating > .form-select {
        height: calc(3.5rem + 2px);
        padding: var(--space-4) 0.75rem 0.625rem;
    }

        .form-floating > .form-control:focus,
        .form-floating > .form-control:not(:placeholder-shown) {
            padding-top: 1.625rem;
            padding-bottom: 0.625rem;
        }

    .form-floating > .form-select {
        padding-top: 1.625rem;
        padding-bottom: 0.625rem;
    }

    .form-floating > label {
        position: absolute;
        top: 0;
        left: 0;
        padding: var(--space-4) 0.75rem;
        font-size: var(--font-size-base);
        color: var(--color-text-muted);
        pointer-events: none;
        transition: transform var(--transition), opacity var(--transition);
        height: 100%;
        display: flex;
        align-items: center;
        transform-origin: 0 0;
        border: 1px solid transparent;
    }

    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label,
    .form-floating > .form-select ~ label {
        opacity: 0.65;
        transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    }

/* ============================================================
   CHECKS & SWITCHES
   ============================================================ */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.form-check-input {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    appearance: none;
    background: var(--color-surface);
    cursor: pointer;
    transition: var(--transition-fast);
    margin-top: 0;
}

    .form-check-input:checked {
        background-color: var(--color-primary);
        border-color: var(--color-primary);
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
        background-size: 0.75rem 0.75rem;
        background-position: center;
        background-repeat: no-repeat;
    }

    .form-check-input:focus {
        box-shadow: 0 0 0 3px var(--color-primary-focus);
    }

.form-check-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

/* Switch */
.form-switch {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

    .form-switch .form-check-input {
        width: 2.5rem;
        height: 1.25rem;
        border-radius: var(--radius-full);
        border: 2px solid var(--color-border);
        background: var(--color-border);
        appearance: none;
        cursor: pointer;
        transition: var(--transition-fast);
        flex-shrink: 0;
    }

        .form-switch .form-check-input:checked {
            background-color: var(--color-primary);
            border-color: var(--color-primary);
            background-image: none;
        }

            .form-switch .form-check-input:checked::before {
                transform: translateX(1.25rem);
            }

        .form-switch .form-check-input::before {
            content: '';
            display: block;
            width: 0.75rem;
            height: 0.75rem;
            border-radius: var(--radius-full);
            background: var(--color-surface);
            transition: transform var(--transition);
            margin: 1px;
        }

    .form-switch .form-check-label {
        cursor: pointer;
    }

/* ============================================================
   VALIDATION MESSAGES
   ============================================================ */
.field-validation-error,
.text-danger.small {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-xs);
    color: var(--color-danger);
}

.validation-summary-errors {
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    background: var(--color-danger-light);
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--color-danger);
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: var(--space-4);
    }

/* ============================================================
   ALERTS
   ============================================================ */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    border: 0;
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-3);
}

.alert-danger {
    background: var(--color-danger-light);
    color: var(--color-danger);
}

.alert-info {
    background: var(--color-info-light);
    color: #1E40AF;
}

.alert-success {
    background: var(--color-success-light);
    color: #065F46;
}

.alert-warning {
    background: var(--color-warning-light);
    color: #92400E;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 575.98px) {
    .form-floating > .form-control,
    .form-floating > .form-select {
        height: calc(3.5rem + 2px);
        padding: var(--space-4) 0.75rem 0.625rem;
        font-size: 0.9rem;
    }

    .form-floating > label {
        padding: var(--space-4) 0.75rem;
        font-size: 0.85rem;
    }

    .form-floating > .form-control:focus ~ label,
    .form-floating > .form-control:not(:placeholder-shown) ~ label,
    .form-floating > .form-select ~ label {
        transform: scale(0.8) translateY(-0.5rem) translateX(0.15rem);
    }

    .form-control,
    .form-select,
    .input-group-text,
    .toggle-password {
        font-size: 0.9rem;
        min-height: 38px;
    }

    .input-group-text {
        padding: 0 0.6rem;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .form-floating > .form-control,
    .form-floating > .form-select {
        font-size: 0.95rem;
    }

    .form-floating > label {
        font-size: 0.9rem;
    }
}

/* ============================================================
   TOUCH DEVICES
   ============================================================ */
@media (pointer: coarse) {
    .form-control,
    .form-select,
    .input-group-text,
    .toggle-password {
        min-height: var(--touch-target-comfort);
    }

    .form-check-input {
        width: 20px;
        height: 20px;
    }

    .form-switch .form-check-input {
        width: 2.75rem;
        height: 1.5rem;
    }

        .form-switch .form-check-input::before {
            width: 0.9rem;
            height: 0.9rem;
        }

        .form-switch .form-check-input:checked::before {
            transform: translateX(1.25rem);
        }
}