﻿/* =========================================================
   RAPID HMS ENTERPRISE FORMS
   ========================================================= */

/* =========================================================
   FORM GRID
   ========================================================= */

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* FULL */
.form-full {
    grid-column: 1 / -1;
}

/* =========================================================
   FIELD
   ========================================================= */

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    /* LABEL */
    .field label {
        font-size: 13px;
        font-weight: 600;
        color: #475569;
    }

    /* =========================================================
   INPUTS
   ========================================================= */

    .field input,
    .field select,
    .field textarea {
        width: 100%;
        min-height: 46px;
        border: 1px solid #dbe2ea;
        border-radius: 14px;
        background: white;
        padding: 0 14px;
        font-size: 14px;
        color: #0f172a;
        outline: none;
        transition: .2s ease;
    }

    /* TEXTAREA */
    .field textarea {
        min-height: 120px;
        padding-top: 12px;
        resize: vertical;
    }

        /* FOCUS */
        .field input:focus,
        .field select:focus,
        .field textarea:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 4px rgba(59,130,246,.08);
        }

        /* PLACEHOLDER */
        .field input::placeholder,
        .field textarea::placeholder {
            color: #94a3b8;
        }

/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */

.form-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: #334155;
}

    .form-check input {
        width: 18px;
        height: 18px;
    }

/* =========================================================
   SEARCH FIELD
   ========================================================= */

.search-field {
    position: relative;
}

    .search-field input {
        padding-left: 42px;
    }

    .search-field .search-icon {
        position: absolute;
        top: 50%;
        left: 14px;
        transform: translateY(-50%);
        opacity: .6;
    }

/* =========================================================
   FORM ACTIONS
   ========================================================= */

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
}
/* ─── Validation Errors ─────────────────────────── */
.error-text {
    color: #e53e3e;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.input-error {
    border-color: #e53e3e !important;
    box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:992px) {

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }
}
