/* ================= LABEL ================= */

.form-label{

    font-size:14px;

    font-weight:600;

    color:#374151;

    margin-bottom:8px;
}

/* ================= INPUT ================= */

.form-control,
.form-select,
textarea{

    min-height:48px;

    border-radius:10px;

    border:
    1px solid rgba(209,213,219,0.9);

    background:#ffffff;

    font-size:15px;

    color:#111827;

    padding:12px 14px;

    transition:var(--transition);

    box-shadow:none;
}

/* ================= TEXTAREA ================= */

textarea.form-control{

    min-height:120px;

    resize:vertical;
}

/* ================= PLACEHOLDER ================= */

.form-control::placeholder,
textarea::placeholder{

    color:#9ca3af;
}

/* ================= FOCUS ================= */

.form-control:focus,
.form-select:focus,
textarea:focus{

    border-color:
    rgba(37,99,235,0.5);

    box-shadow:
    0 0 0 2px rgba(37,99,235,0.10);

    background:white;
}

/* ================= DISABLED ================= */

.form-control:disabled,
.form-select:disabled{

    background:#f3f4f6;
}

/* ================= CHECKBOX ================= */

.form-check-input{

    width:18px;

    height:18px;

    cursor:pointer;
}

.form-check-input:checked{

    background-color:var(--color-primary);

    border-color:var(--color-primary);
}

.form-check-label{

    cursor:pointer;

    padding-left:6px;

    color:#374151;

    font-weight:500;
}

/* ================= FILTER BAR ================= */

.filter-card{

    background:white;

    border-radius:12px;

    padding:20px;

    border:
    1px solid rgba(229,231,235,0.7);

    box-shadow:none;

    margin-bottom:24px;
}

/* ================= FORM SECTION ================= */

.form-section{

    margin-bottom:32px;
}

.form-section-title{

    font-size:17px;

    font-weight:700;

    color:#111827;

    margin-bottom:18px;
}

/* ================= INPUT GROUP ================= */

.input-group-text{

    border-radius:10px 0 0 10px;

    border:
    1px solid rgba(209,213,219,0.9);

    background:#f9fafb;
}

/* ================= BUTTON ================= */

.btn{

    min-height:46px;

    padding:10px 18px;

    font-size:15px;

    font-weight:600;

    border-radius:10px;
}

/* ================= SMALL BUTTON ================= */

.btn-sm{

    min-height:auto;

    padding:7px 12px;

    border-radius:10px;

    font-size:13px;
}

/* ================= FORM INFO ================= */

.form-text{

    font-size:13px;

    color:#94a3b8;
}

/* ================= VALIDATION ================= */

.is-invalid{

    border-color:#dc2626 !important;
}

.invalid-feedback{

    font-size:13px;
}

/* ================= ROLE CHECKLIST ================= */

.role-check-card{

    min-height:48px;

    display:flex;

    align-items:center;

    gap:10px;

    padding:12px 14px;

    border:1px solid rgba(209,213,219,0.9);

    border-radius:10px;

    background:#ffffff;

    cursor:pointer;

    font-weight:600;

    color:#111827;

    touch-action:manipulation;
}

.role-check-card input{

    width:18px;

    height:18px;

    flex:0 0 auto;
}

.role-check-card:has(input:checked){

    border-color:rgba(37,99,235,0.55);

    background:rgba(37,99,235,0.08);
}
