/* =========================================================
ROOT
========================================================= */

:root{

    --sidebar-width:260px;
    --sidebar-collapse:90px;

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --bg:#f8fafc;

    --text:#0f172a;
    --muted:#64748b;

    --border:#e2e8f0;
	
}


/* =========================================================
BODY
========================================================= */

body{

    background:var(--bg);
    color:var(--text);

    font-family:
        Inter,
        system-ui,
        sans-serif;

    overflow-x:hidden;

}




/* =========================================================
CONTENT
========================================================= */

.main{

    background-color:var(--bg) !important;

}


.content{

    padding:30px;

}


/* =========================================================
CARD
========================================================= */

.card{

    border:none;

    border-radius:24px !important;

    box-shadow:
        0 2px 10px rgba(15,23,42,.04);

}

/* =========================================================
BUTTON
========================================================= */

.btn{

    border-radius:12px;

    font-weight:500;

}

/* PRIMARY */

.btn-primary{

    background:var(--primary);
    border-color:var(--primary);

}

.btn-primary:hover{

    background:var(--primary-dark);
    border-color:var(--primary-dark);

}

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

.form-control,
.form-select{

    border-radius:16px;

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

    min-height:48px;

    box-shadow:none !important;

}

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

    border-color:var(--primary);

}

/* =========================================================
MODAL
========================================================= */

.modal-content{

    border-radius:28px;

}

/* =========================================================
DATATABLE
========================================================= */

.dataTables_wrapper .dataTables_paginate .paginate_button{

    border-radius:12px !important;

}

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

@media(max-width:992px){

    #sidebar{
        left:-100%;
    }

    .main{
        margin-left:0;
    }

    .main.expanded{
        margin-left:0;
    }

    .content{
        padding:20px;
    }

}


/* =========================================
TABLE CARD
========================================= */

.table-card-body{

    padding:28px !important;

}

/* =========================================
TABLE
========================================= */

.table{

    margin-bottom:0;

}

.table thead th{

    border:none;

    color:#64748b;

    font-weight:600;

    font-size:15px;

    padding-bottom:20px;

}

.table tbody td{

    padding:22px 14px;

    vertical-align:middle;

    border-color:#f1f5f9;

}

/* =========================================
ACTION BUTTON
========================================= */

.btn-edit,
.btn-delete{

    width:42px;
    height:42px;

    border:none;

    border-radius:14px;

    background:#f8fafc;

    transition:.2s ease;

}

.btn-edit{

    color:#2563eb;

}

.btn-delete{

    color:#ef4444;

}

.btn-edit:hover{

    background:#dbeafe;

}

.btn-delete:hover{

    background:#fee2e2;

}


/* =========================================
PAGE TITLE
========================================= */

.page-title{

    font-size:56px;

    font-weight:800;

    margin-bottom:6px;

}

.page-subtitle{

    color:#64748b;

    font-size:18px;

}


/* =========================================
BUTTON FIX
========================================= */

.btn-primary{

    min-height:48px;

    padding-left:24px !important;
    padding-right:24px !important;

    font-weight:600;

}


.btn-erp{

    height:48px;

    padding:0 24px;

    border-radius:16px;

    font-weight:600;

    display:inline-flex;

    align-items:center;

    gap:8px;

}