/* ==========================================================
   ADMIN CSS FRAMEWORK
   File : components/forms.css
   Purpose : Professional Form System
========================================================== */


/* ===========================
   FORM
=========================== */

.form{

    width:100%;

}

.form-row{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:6px;

}


/* ===========================
   LABEL
=========================== */

.form-label{

    display:flex;

    align-items:center;

    gap:6px;

    color:var(--heading);

    font-size:13px;

    font-weight:600;

}

.required{

    color:var(--danger);

}


/* ===========================
   INPUT
=========================== */

.form-control,
.form-select,
.form-textarea{

    width:100%;

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

    border-radius:var(--radius-md);

    background:#fff;

    color:var(--text);

    font-size:14px;

    transition:var(--transition);

    box-shadow:none;

}


/* ===========================
   INPUT HEIGHT
=========================== */

.form-control,
.form-select{

    height:44px;

    padding:0 14px;

}

.form-textarea{

    min-height:120px;

    padding:12px 14px;

    resize:vertical;

}


/* ===========================
   FOCUS
=========================== */

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

    border-color:var(--primary);

    box-shadow:0 0 0 3px rgba(63,154,214,.15);

}


/* ===========================
   PLACEHOLDER
=========================== */

.form-control::placeholder,
.form-textarea::placeholder{

    color:#94a3b8;

}


/* ===========================
   READONLY
=========================== */

.form-control[readonly],
.form-textarea[readonly]{

    background:#f8fafc;

}


/* ===========================
   DISABLED
=========================== */

.form-control:disabled,
.form-select:disabled,
.form-textarea:disabled{

    background:#f1f5f9;

    cursor:not-allowed;

}


/* ===========================
   INPUT GROUP
=========================== */

.input-group{

    display:flex;

    align-items:center;

}

.input-group-text{

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:44px;

    padding:0 14px;

    background:#f8fafc;

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

    color:var(--muted);

}

.input-group>.form-control{

    border-radius:0;

}

.input-group>.input-group-text:first-child{

    border-radius:var(--radius-md) 0 0 var(--radius-md);

}

.input-group>.form-control:last-child{

    border-radius:0 var(--radius-md) var(--radius-md) 0;

}


/* ===========================
   CHECKBOX & RADIO
=========================== */

.form-check{

    display:flex;

    align-items:center;

    gap:8px;

}

.form-check input{

    width:18px;

    height:18px;

    accent-color:var(--primary);

}

.form-check label{

    cursor:pointer;

}


/* ===========================
   SWITCH
=========================== */

.form-switch{

    display:flex;

    align-items:center;

    gap:10px;

}


/* ===========================
   HELP TEXT
=========================== */

.form-text{

    font-size:12px;

    color:var(--muted);

}


/* ===========================
   VALIDATION
=========================== */

.is-valid{

    border-color:var(--success)!important;

}

.is-invalid{

    border-color:var(--danger)!important;

}

.valid-feedback{

    margin-top:4px;

    color:var(--success);

    font-size:12px;

}

.invalid-feedback{

    margin-top:4px;

    color:var(--danger);

    font-size:12px;

}


/* ===========================
   SEARCH
=========================== */

.search-box{

    position:relative;

}

.search-box i{

    position:absolute;

    top:50%;

    left:14px;

    transform:translateY(-50%);

    color:#94a3b8;

}

.search-box .form-control{

    padding-left:42px;

}


/* ===========================
   FILE
=========================== */

.form-file{

    display:block;

    width:100%;

    padding:10px 14px;

    border:2px dashed var(--border);

    border-radius:var(--radius-md);

    background:#fafafa;

    transition:var(--transition);

}

.form-file:hover{

    border-color:var(--primary);

}


/* ===========================
   IMAGE PREVIEW
=========================== */

.image-preview{

    width:120px;

    height:120px;

    overflow:hidden;

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

    border-radius:var(--radius-md);

    background:#fff;

}

.image-preview img{

    width:100%;

    height:100%;

    object-fit:cover;

}


/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:768px){

    .form-row{

        grid-template-columns:1fr;

        gap:16px;

    }

    .input-group{

        flex-wrap:nowrap;

    }

}