/* =========================================
   form.css
========================================= */

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

.form{

    display:flex;

    flex-direction:column;

    gap:20px;

}

.form-row{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.form-group{

    flex:1;

    display:flex;

    flex-direction:column;

    min-width:220px;

}

/* ==========================
    Label
========================== */

.form-label{

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#374151;

}

/* ==========================
    Input
========================== */

.form-input,

.form-select,

.form-textarea{

    width:100%;

    border:1px solid #d1d5db;

    border-radius:8px;

    background:white;

    padding:10px 14px;

    font-size:14px;

    outline:none;

    transition:.2s;

}

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

.form-input:focus,

.form-select:focus,

.form-textarea:focus{

    border-color:#2563eb;

    box-shadow:

        0 0 0 3px

        rgba(37,99,235,.15);

}

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

.form-input::placeholder,

.form-textarea::placeholder{

    color:#9ca3af;

}

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

.form-textarea{

    resize:vertical;

    min-height:120px;

}

/* ==========================
    Select
========================== */

.form-select{

    cursor:pointer;

}

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

.checkbox{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

.checkbox input{

    width:18px;

    height:18px;

}

/* ==========================
    Radio
========================== */

.radio{

    display:flex;

    align-items:center;

    gap:10px;

    cursor:pointer;

}

.radio input{

    width:18px;

    height:18px;

}

/* ==========================
    Search Box
========================== */

.search-box{

    position:relative;

    width:320px;

}

.search-box input{

    width:100%;

    padding:

        10px 16px;

    border:1px solid #d1d5db;

    border-radius:8px;

    outline:none;

    transition:.2s;

}

.search-box input:focus{

    border-color:#2563eb;

    box-shadow:

        0 0 0 3px

        rgba(37,99,235,.15);

}

/* ==========================
    Date
========================== */

.form-date{

    width:180px;

}

/* ==========================
    Hint
========================== */

.form-hint{

    margin-top:6px;

    font-size:12px;

    color:#6b7280;

}

/* ==========================
    Error
========================== */

.form-error{

    margin-top:6px;

    font-size:12px;

    color:#dc2626;

}

/* ==========================
    Success
========================== */

.form-success{

    margin-top:6px;

    font-size:12px;

    color:#16a34a;

}

/* ==========================
    Divider
========================== */

.form-divider{

    height:1px;

    background:#e5e7eb;

    margin:10px 0;

}

/* ==========================
    Footer
========================== */

.form-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    margin-top:20px;

}

/* ==========================
    Dialog Form
========================== */

.dialog-form{

    max-width:700px;

}

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

@media (max-width:768px){

    .form-row{

        flex-direction:column;

    }

    .search-box{

        width:100%;

    }

    .form-date{

        width:100%;

    }

    .form-footer{

        flex-direction:column;

    }

}