/*
 * Profile Form Baseline Styling
 * Applies to: Settings > Profile and any shared profile input classes.
 * Purpose: Provide consistent sizing, borders, focus states, and validation cues
 *          before theme-specific overrides are applied.
 */

/* ── Shared Text + Readonly Input Baseline ────────────────────────────────── */
.profile-text-input,
.profile-readonly-input {
    box-sizing: border-box;
    min-height: 40px;
    padding: 10px 12px;
    border: 1px solid var(--yc-border);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.4;
}

/* ── Editable Input States ─────────────────────────────────────────────────── */
.profile-text-input {
    color: #111827;
    background-color: #ffffff;
}

.profile-text-input:focus {
    outline: none;
    border-color: #0052cc;
    box-shadow: 0 0 0 1px rgba(0, 82, 204, 0.2);
}

.profile-text-input.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.15);
}

.profile-text-input::placeholder {
    color: #9ca3af;
}

/* ── Readonly / Derived Field States ───────────────────────────────────────── */
.profile-readonly-input {
    color: #6c757d;
    background-color: #f8f9fa;
}

.profile-readonly-input:disabled {
    opacity: 1;
    -webkit-text-fill-color: #6c757d;
}

/* ── City Lookup Dropdown (react-select wrapper) ──────────────────────────── */
.profile-city-suggestions .Select-control {
    min-height: 40px;
    border-radius: 8px;
    border-color: var(--yc-border);
}

.profile-city-suggestions .Select-placeholder,
.profile-city-suggestions .Select-value-label,
.profile-city-suggestions .Select-input > input {
    color: #111827 !important;
}