/**
 * forms.css – Form Styling & Validation States
 *
 * Works with Bootstrap 5.3 forms: floating labels, custom selects,
 * server-side validation feedback, inline validation hints.
 *
 * @package GiaSuAnhSao
 */

/* ===================================================================
   1. GENERAL FORM CONTAINERS
   =================================================================== */

.form-card {
    background: #fff;
    border-radius: .6rem;
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    overflow: hidden;
}
.form-card .card-header {
    background: linear-gradient(135deg, var(--color-primary), #3b82f6);
    color: #fff;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    padding: 1rem 1.25rem;
    border-bottom: 0;
}
.form-card .card-header h4,
.form-card .card-header h5 {
    color: #fff;
    margin-bottom: 0;
}

/* ===================================================================
   2. INPUTS, SELECTS, TEXTAREAS
   =================================================================== */

.form-control,
.form-select {
    border: 1px solid var(--color-border);
    border-radius: .4rem;
    padding: .6rem .9rem;
    font-size: .92rem;
    color: var(--color-text);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 .2rem rgba(37,99,235,.15);
}
.form-control::placeholder {
    color: #9ca3af;
}

textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

/* Smaller size overrides */
.form-control-sm,
.form-select-sm {
    padding: .4rem .7rem;
    font-size: .85rem;
}

/* ===================================================================
   3. LABELS
   =================================================================== */

.form-label {
    font-weight: 600;
    font-size: .88rem;
    color: #374151;
    margin-bottom: .35rem;
}
.form-label .text-danger {
    font-size: .8rem;
}

/* Floating label tweaks */
.form-floating > .form-control,
.form-floating > .form-select {
    border-radius: .4rem;
}
.form-floating > label {
    color: var(--color-muted);
    font-size: .9rem;
}

/* ===================================================================
   4. FORM TEXT / HINTS
   =================================================================== */

.form-text {
    font-size: .78rem;
    color: var(--color-muted);
    margin-top: .3rem;
}

/* ===================================================================
   5. VALIDATION STATES
   =================================================================== */

/* ── Valid ───────────────────────────────────────────── */
.form-control.is-valid,
.form-select.is-valid {
    border-color: var(--color-secondary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2310B981' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}
.form-control.is-valid:focus,
.form-select.is-valid:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 .2rem rgba(16,185,129,.2);
}

/* ── Invalid ────────────────────────────────────────── */
.form-control.is-invalid,
.form-select.is-invalid {
    border-color: #ef4444;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ef4444' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0-1A6 6 0 1 0 8 2a6 6 0 0 0 0 12M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 1rem;
    padding-right: 2.5rem;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
    border-color: #ef4444;
    box-shadow: 0 0 0 .2rem rgba(239,68,68,.2);
}

/* ── Feedback text ──────────────────────────────────── */
.valid-feedback {
    color: var(--color-secondary);
    font-size: .8rem;
    margin-top: .3rem;
}
.invalid-feedback {
    color: #ef4444;
    font-size: .8rem;
    margin-top: .3rem;
}

/* Show feedback after validation */
.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-select:valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-feedback,
.form-select.is-valid ~ .valid-feedback {
    display: block;
}
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-select:invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-feedback,
.form-select.is-invalid ~ .invalid-feedback {
    display: block;
}

/* ===================================================================
   6. CHECKBOXES & RADIO BUTTONS
   =================================================================== */

.form-check-input {
    width: 1.1em;
    height: 1.1em;
    border: 2px solid var(--color-border);
    transition: all .15s ease;
}
.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}
.form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(37,99,235,.2);
    border-color: var(--color-primary);
}
.form-check-label {
    font-size: .9rem;
    padding-left: .15rem;
}

/* ── Switches ───────────────────────────────────────── */
.form-switch .form-check-input {
    width: 2.5em;
    border-radius: 50rem;
}
.form-switch .form-check-input:checked {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* ===================================================================
   7. INPUT GROUPS
   =================================================================== */

.input-group .input-group-text {
    background: #f9fafb;
    border-color: var(--color-border);
    color: var(--color-muted);
    font-size: .88rem;
}
.input-group .form-control:focus {
    z-index: 3;
}

/* ===================================================================
   8. FILE INPUTS
   =================================================================== */

.form-control[type="file"] {
    padding: .5rem .75rem;
    font-size: .85rem;
}
.form-control[type="file"]::file-selector-button {
    background: var(--color-primary);
    color: #fff;
    border: 0;
    padding: .35rem .75rem;
    margin-right: .75rem;
    border-radius: .3rem;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.form-control[type="file"]::file-selector-button:hover {
    background: #1d4ed8;
}

/* ===================================================================
   9. INLINE ERROR LIST (server-side)
   =================================================================== */

.error-list {
    list-style: none;
    padding: 0;
    margin: 0 0 .5rem;
}
.error-list li {
    position: relative;
    padding-left: 1.25rem;
    margin-bottom: .3rem;
    font-size: .88rem;
    color: #991b1b;
}
.error-list li::before {
    content: '\f06a'; /* fa-exclamation-circle */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: .15em;
    font-size: .75rem;
    color: #ef4444;
}

/* ===================================================================
   10. REQUIRED FIELD INDICATOR
   =================================================================== */

.required-note {
    font-size: .78rem;
    color: var(--color-muted);
    margin-bottom: 1.25rem;
}
.required-note span {
    color: #ef4444;
    font-weight: 700;
}

/* ===================================================================
   11. FORM ACTIONS / BUTTON ROW
   =================================================================== */

.form-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    margin-top: 1.5rem;
}

/* ===================================================================
   12. PASSWORD STRENGTH INDICATOR
   =================================================================== */

.password-strength {
    height: 4px;
    border-radius: 2px;
    margin-top: .35rem;
    background: #e5e7eb;
    overflow: hidden;
}
.password-strength .strength-bar {
    height: 100%;
    border-radius: 2px;
    transition: width .3s ease, background .3s ease;
}
.password-strength .strength-bar.weak    { width: 25%;  background: #ef4444; }
.password-strength .strength-bar.fair    { width: 50%;  background: #f59e0b; }
.password-strength .strength-bar.good    { width: 75%;  background: #3b82f6; }
.password-strength .strength-bar.strong  { width: 100%; background: #10b981; }