/*=========================================================
 ERP UI FRAMEWORK
 File        : erp_layout.css
 Version     : 1.0
 Purpose     : Common ERP Layout Components
=========================================================*/

/*=========================================================
 PAGE CONTAINER GROUP
=========================================================*/
.erp-page{
    width:100%;
    padding:12px;
}

/*=========================================================
 PAGE HEADER GROUP
=========================================================*/
.erp-page-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.erp-page-title{
    font-size:var(--erp-page-title-size);
    font-weight:var(--erp-font-bold);
    color:var(--erp-text-color);
    margin:0;
}

/*=========================================================
 CARD GROUP
=========================================================*/
.erp-card{
    background:#ffffff;
    border:1px solid var(--erp-border-color);
    border-radius:var(--erp-border-radius);
    margin-bottom:12px;
    overflow:hidden;
}

/*=========================================================
 CARD HEADER GROUP
=========================================================*/
.erp-card-header{
    background:#198754 !important;
    color:#ffffff !important;
    font-size:15px !important;
    font-weight:600 !important;
    padding:8px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;   
    border-bottom:1px solid var(--erp-border-color);
    border-radius:var(--erp-border-radius) var(--erp-border-radius) 0 0;    
}

.erp-card-header-1{
    background:#0d6efd !important;
    color:#ffffff !important;
    font-size:15px !important;
    font-weight:600 !important;
    padding:8px 12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;   
    border-bottom:1px solid var(--erp-border-color);
    border-radius:var(--erp-border-radius) var(--erp-border-radius) 0 0;    
}

/*=========================================================
 CARD TITLE GROUP
=========================================================*/
.erp-card-title{
    font-size:15px;
    font-weight:var(--erp-font-bold);
    margin:0;
}

/*=========================================================
 CARD BODY GROUP
=========================================================*/
.erp-card-body{
    padding:12px;
}

/*=========================================================
 CARD FOOTER GROUP
=========================================================*/
.erp-card-footer{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:6px;
    padding:8px 12px;
    border-top:1px solid var(--erp-border-color);
}

/*=========================================================
 SECTION GROUP
=========================================================*/
.erp-section{
    margin-bottom:var(--erp-section-gap);
}

.erp-section-title{
    font-size:13px;
    font-weight:var(--erp-font-bold);
    margin-bottom:8px;
    color:var(--erp-text-color);
}

/*=========================================================
 TOOLBAR GROUP
=========================================================*/
.erp-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin-bottom:8px;
    flex-wrap:wrap;
}

.erp-toolbar-left{
    display:flex;
    align-items:center;
    gap:6px;
}

.erp-toolbar-right{
    display:flex;
    align-items:center;
    gap:6px;
}

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

/*=========================================================
FORM
=========================================================*/
.erp-textarea{
    width:100% !important;
    height:auto;
}

/*=========================================================
 FLEX GROUP
=========================================================*/
.erp-flex{
    display:flex;
    align-items:center;
}

.erp-flex-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.erp-flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}