/* =====================================================
   Form Layout
===================================================== */

form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

/* =====================================================
   Field
===================================================== */

.field{

    display:flex;

    flex-direction:column;

    gap:8px;

    text-align:right;

}

.field label{

    color:#cbd5e1;

    font-weight:600;

    font-size:15px;

}

/* =====================================================
   Inputs
===================================================== */

.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="file"],
select,
textarea{

    width:100%;

    padding:14px 16px;

    background:#0f172a;

    color:white;

    border:1px solid var(--border);

    border-radius:14px;

    transition:all var(--transition);

    font-family:inherit;

    font-size:15px;

}

/* =====================================================
   Focus
===================================================== */

.form-control:focus,
input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:#3b82f6;

    box-shadow:
        0 0 0 4px rgba(59,130,246,.15);

}

/* =====================================================
   Placeholder
===================================================== */

::placeholder{

    color:#94a3b8;

}

/* =====================================================
   Textarea
===================================================== */

textarea{

    resize:vertical;

    min-height:120px;

}

/* =====================================================
   Checkbox
===================================================== */

.checkbox-field{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px;

    border-radius:14px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

}

.checkbox-field input{

    width:20px;

    height:20px;

    accent-color:#2563eb;

}

/* =====================================================
   Form Actions
===================================================== */

.form-actions{

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

    margin-top:15px;

}

.form-actions .btn{

    min-width:180px;

}

/* =====================================================
   Attachment
===================================================== */

#attachment-container{

    display:flex;

    flex-direction:column;

    gap:15px;

}

.attachment-field{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    align-items:flex-start;

    padding:15px;

    border-radius:14px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(255,255,255,.08);

}

.attachment-field input[type=file]{

    flex:1;

    min-width:240px;

    border:2px dashed rgba(59,130,246,.35);

    cursor:pointer;

}

.attachment-field textarea{

    flex:2;

    min-width:240px;

}

.remove-attachment{

    min-width:100px;

}

/* =====================================================
   Select2
===================================================== */

.select2-container{

    width:100% !important;

}

.select2-selection{

    background:#0f172a !important;

    border:1px solid var(--border) !important;

    border-radius:14px !important;

    min-height:50px !important;

}

.select2-selection__rendered{

    color:white !important;

    line-height:48px !important;

}

.select2-selection__arrow{

    height:48px !important;

}

.select2-dropdown{

    background:#0f172a !important;

    border:1px solid var(--border) !important;

}

.select2-results__option{

    color:white !important;

}

.select2-search__field{

    background:#111827 !important;

    color:white !important;

}

/* =====================================================
   Validation
===================================================== */

.errorlist{

    list-style:none;

    margin-top:5px;

    color:#ef4444;

    font-size:14px;

}

.helptext{

    color:#94a3b8;

    font-size:13px;

}

select option{

    background:#24384f !important;
    color:#ffffff !important;

}

/* =====================================================
   Responsive
===================================================== */

@media(max-width:768px){

    .form-actions{

        flex-direction:column;

    }

    .form-actions .btn{

        width:100%;

    }

    .attachment-field{

        flex-direction:column;

    }

    .attachment-field input,

    .attachment-field textarea{

        width:100%;

    }

}