/* ============================================================
 * YouthSoccerGenie — Form Control Style Overrides
 * Build: YSG_V03_FORM_CONTROLS
 * Source: coaches-portal-v5.1.html (approved mockup)
 *
 * Purpose: Override Bootstrap form control styles with brand
 * gold focus states and consistent typography. Loads AFTER Bootstrap.
 * ============================================================ */

/* ===== FORM GROUP ===== */
.form-group {
    margin-bottom: 16px;
}

/* ===== FORM LABEL ===== */
.form-label,
label.form-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--navy, #0B1A2E);
    margin-bottom: 6px;
    font-family: 'DM Sans', sans-serif;
}

/* ===== FORM CONTROL (Inputs, Selects, Textareas) ===== */
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--border, #D6D3CE);
    border-radius: 6px;
    font-size: 14px;
    font-family: 'DM Sans', sans-serif;
    transition: border-color 0.2s;
    background: var(--white, #FFFFFF);
    color: var(--navy, #0B1A2E);
}

/* ===== FOCUS STATE — Gold, not Bootstrap blue ===== */
.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    outline: none;
    border-color: var(--gold, #D4A84B);
    box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.15);
}

/* ===== PLACEHOLDER STYLING ===== */
.form-control::placeholder,
input.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--muted, #1E3A5F);
    opacity: 0.5;
}

/* ===== SELECT DROPDOWN ===== */
select.form-control {
    appearance: auto;
}

/* ===== FORM HINT TEXT ===== */
.form-hint {
    font-size: 12px;
    color: var(--muted, #1E3A5F);
    margin-top: 4px;
}

/* ===== VALIDATION STATES ===== */
.form-control.is-invalid,
input.form-control.is-invalid,
select.form-control.is-invalid,
textarea.form-control.is-invalid {
    border-color: var(--red, #EF4444);
}

.form-control.is-invalid:focus,
input.form-control.is-invalid:focus {
    border-color: var(--red, #EF4444);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

.form-control.is-valid,
input.form-control.is-valid,
select.form-control.is-valid,
textarea.form-control.is-valid {
    border-color: var(--green, #22C55E);
}

.form-control.is-valid:focus,
input.form-control.is-valid:focus {
    border-color: var(--green, #22C55E);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15);
}

/* ===== CHECKBOX / RADIO — Custom styling ===== */
.form-check-input:checked {
    background-color: var(--gold, #D4A84B);
    border-color: var(--gold, #D4A84B);
}

.form-check-input:focus {
    border-color: var(--gold, #D4A84B);
    box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.15);
}

/* ===== RANGE INPUT ===== */
input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--light-bg, #F9F7F3);
    outline: none;
    -webkit-appearance: none;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold, #D4A84B);
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gold, #D4A84B);
    cursor: pointer;
    border: none;
}

/* ===== TABLE NUMBER INPUTS ===== */
.data-table input[type="number"] {
    width: 50px;
    text-align: center;
    padding: 4px;
    border: 1px solid var(--border, #D6D3CE);
    border-radius: 4px;
    font-size: 13px;
}

/* ===== BOOTSTRAP OVERRIDE: Remove blue focus ===== */
.form-control:focus,
.form-select:focus {
    border-color: var(--gold, #D4A84B);
    box-shadow: 0 0 0 3px rgba(212, 168, 75, 0.15);
}

.form-check-input:checked {
    background-color: var(--gold, #D4A84B);
    border-color: var(--gold, #D4A84B);
}