/*=========================================================
 ERP UI FRAMEWORK
 File        : erp_forms.css
 Version     : 1.0
 Purpose     : Common ERP Form Controls
=========================================================*/


/*=========================================================
 FORM GROUP
=========================================================*/
.erp-form-group{
    margin-bottom:6px;
}

/*=========================================================
 FORM LABEL GROUP
=========================================================*/
.erp-form label,
.form-label,
.erp-form-label,
.erp-card-body label{
    display:block;
    margin-bottom:4px;
    font-size:12px;
    font-weight:var(--erp-font-bold);
    color:var(--erp-text-color);
}

/*=========================================================
 REQUIRED FIELD GROUP
=========================================================*/
.erp-required::after{
    content:" *";
    color:var(--erp-required);
}

/*=========================================================
INPUT CONTROL GROUP
=========================================================*/
.form-control,
.erp-input{
    width:100%;
    height:var(--erp-control-height);
    padding:var(--erp-control-padding);
    font-size:12px;
    box-sizing:border-box;
    line-height:1.2;

    background:#fff;
    border:1px solid var(--erp-border-color);
    border-radius:var(--erp-border-radius);

    box-shadow:none;
    outline:none;
}

.form-control:focus,
.form-select:focus,
.erp-input:focus,
.erp-select:focus{
    border-color:#86b7fe;
    box-shadow:0 0 0 .15rem rgba(13,110,253,.15);
}

/*=========================================================
SELECT CONTROL GROUP
=========================================================*/
.form-select,
.erp-select{
    width:100%;
    height:var(--erp-control-height);
    padding:3px 32px 3px 8px;
    font-size:12px;
    line-height:1.2;

    border:1px solid var(--erp-border-color);
    border-radius:var(--erp-border-radius);

    background-color:#ffffff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 6l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 8px center;
    background-size:12px;

    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;

    box-shadow:none;
    outline:none;
}



/*=========================================================
 TEXTAREA GROUP
=========================================================*/
textarea.form-control,
.erp-textarea{
    height:auto;
    resize:vertical;
    padding:6px 8px;
    font-size:12px;
    line-height:1.2;
}

/*=========================================================
 DATE CONTROL GROUP
=========================================================*/
.erp-date{
    font-size:12px;
    height:var(--erp-control-height);
}

/*=========================================================
 NUMBER CONTROL GROUP
=========================================================*/
.erp-number{
    text-align:right;
}

/*=========================================================
 PLACEHOLDER GROUP
=========================================================*/
.form-control::placeholder,
.erp-input::placeholder,
textarea::placeholder{
    color:#999;
    font-size:12px;
}

/*=========================================================
 READONLY CONTROL GROUP
=========================================================*/
.form-control[readonly],
.erp-readonly{
    background:var(--erp-disabled-bg);
    cursor:not-allowed;
    color:var(--erp-text-color);
}
/*=========================================================
 DISABLED CONTROL GROUP
=========================================================*/
.form-control:disabled,
.form-select:disabled,
.erp-disabled{
    background:var(--erp-disabled-bg);
    color:var(--erp-disabled-text);
    cursor:not-allowed;
}

/*=========================================================
 CHECKBOX GROUP
=========================================================*/
.form-check-input{
    width:14px;
    height:14px;
    margin-top:0;
}

.form-check-label{
    font-size:12px;
    font-weight:var(--erp-font-bold);
}

.form-check{
    min-height:auto;
    display:flex;
    align-items:center;
    gap:6px;
}


/*=========================================================
 RADIO GROUP
=========================================================*/
.form-check-input[type="radio"]{
    width:14px;
    height:14px;
}

/*=========================================================
 VALIDATION GROUP
=========================================================*/
.invalid-feedback,
.valid-feedback{
    font-size:11px;
    margin-top:2px;
}

/*=========================================================
 HELP TEXT GROUP
=========================================================*/
.erp-help-text{
    display:block;
    margin-top:2px;
    font-size:11px;
    color:#6c757d;
}

/*=========================================================
 FORM ALIGNMENT GROUP
=========================================================*/
.erp-label-right{
    text-align:right;
}

.erp-label-center{
    text-align:center;
}