/**
 * ==========================================================================
 * FORM COMPONENTS
 * ==========================================================================
 *
 * Reusable form element styles including inputs, selects, checkboxes, etc.
 * Used across login, profile, and any data entry forms.
 *
 * FORM STRUCTURE:
 * .form-group              - Wrapper for label + input + help/error text
 *   ├── .form-label        - Label text (add .form-label-required for *)
 *   ├── .form-input        - Text input, textarea, or .form-select
 *   ├── .form-help         - Optional help text below input
 *   └── .form-error        - Error message (shown when .is-error on input)
 *
 * INPUT TYPES:
 * - .form-input            - Standard text input styling
 * - textarea.form-input    - Multiline with resize: vertical
 * - .form-select           - Dropdown with custom arrow icon
 *
 * CHECKBOX/RADIO:
 * .form-check              - Wrapper for checkbox/radio + label
 *   ├── .form-check-input  - The actual checkbox/radio element
 *   └── .form-check-label  - Label text
 *
 * STATES:
 * - :focus         - Accent color border + subtle glow
 * - :disabled      - Grayed out, not-allowed cursor
 * - .is-error      - Red border, shows .form-error message
 *
 * PHP INTEGRATION:
 * - Form field values should be populated from PHP
 * - Error messages should be generated server-side and output in .form-error
 * - Required field indicator (*) added via .form-label-required class
 *
 * ==========================================================================
 */

.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.form-label-required::after {
    content: " *";
    color: var(--color-error);
}

.form-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-base);
    background-color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

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

.form-input::placeholder {
    color: var(--color-text-tertiary);
}

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

/* Textarea */
textarea.form-input {
    min-height: 100px;
    resize: vertical;
}

/* Select */
.form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235f6368' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    background-size: 12px;
    padding-right: var(--space-2xl);
}

/* Error State */
.form-input.is-error {
    border-color: var(--color-error);
}

.form-input.is-error:focus {
    box-shadow: 0 0 0 3px rgba(234, 67, 53, 0.1);
}

.form-error {
    font-size: var(--text-sm);
    color: var(--color-error);
    margin-top: var(--space-xs);
}

/* Help Text */
.form-help {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    margin-top: var(--space-xs);
}

/* Checkbox & Radio */
.form-check {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
}

.form-check-input {
    width: 18px;
    height: 18px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

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