/* GLOBAL */
/* ==================================================
   GLOBAL
================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#f1f4f8;
    font-family:'Segoe UI',sans-serif;
    font-size:14px;
    color:#1f2937;
    overflow-x:hidden;
}

/* ==================================================
   LAYOUT
================================================== */

.main-content{
    margin-left:260px;
    padding:22px;
}

/* ==================================================
   SIDEBAR
================================================== */

.sidebar{
    width:240px;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    z-index:999;

    background:linear-gradient(
        180deg,
        #14532d,
        #1f6f2f
    );

    padding:22px 18px;
    overflow-y:auto;
}

.sidebar h3{
    font-size:24px;
    font-weight:700;
    color:#fff;
    margin-bottom:35px;
}

.sidebar a{
    display:flex;
    align-items:center;
    gap:12px;

    padding:13px 15px;
    margin-bottom:10px;

    border-radius:14px;

    text-decoration:none;
    color:#fff;

    font-size:14px;
    font-weight:500;

    transition:.2s;
}

.sidebar a:hover{
    background:rgba(255,255,255,.12);
    transform:translateX(3px);
}

.sidebar a.active{
    background:#39a852;
}

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

.card{
    border:none;
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
}

.card-header{
    padding:16px 20px;
    font-weight:700;
}

.card-body{
    padding:20px;
}

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

.btn{
    border-radius:10px;
    font-size:13px;
    font-weight:600;
    padding:8px 14px;
}

/* ==================================================
   BADGE GLOBAL
================================================== */

.badge{
    padding:7px 10px;
    border-radius:10px;
    font-size:11px;
    font-weight:700;
}

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

.table-responsive{
    overflow-x:auto;
}

.table{
    width:100%;
    margin-bottom:0;
}

.table th{
    white-space:nowrap;
    vertical-align:middle;
}

.table td{
    vertical-align:middle;
}

/* ==================================================
   STATUS
================================================== */

.status-underload{
    background:#dcfce7;
    color:#166534;
}

.status-normal{
    background:#fef9c3;
    color:#854d0e;
}

.status-overload{
    background:#fee2e2;
    color:#991b1b;
}

/* ==================================================
   COLOR UTILITIES
================================================== */

.blue{
    background:#e7f1ff;
    color:#1976d2;
}

.green{
    background:#e9f7ec;
    color:#2e7d32;
}

.orange{
    background:#fff4e5;
    color:#ef6c00;
}

.purple{
    background:#f3e8ff;
    color:#7e22ce;
}

.red{
    background:#ffe8e8;
    color:#dc2626;
}

.dark{
    background:#edf2f7;
    color:#374151;
}

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

@media(max-width:992px){

    .sidebar{
        width:100%;
        height:auto;
        position:relative;
    }

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

}

@media(max-width:768px){

    .main-content{
        padding:15px;
    }

}






/* SIDEBAR */
/* ==================================================
   SIDEBAR
================================================== */

.sidebar{
    position:fixed;
    top:0;
    left:0;

    width:240px;
    height:100vh;

    padding:22px 18px;

    background:linear-gradient(
        180deg,
        #14532d 0%,
        #1f6f2f 100%
    );

    overflow-y:auto;
    z-index:1000;
}

.sidebar::-webkit-scrollbar{
    width:6px;
}

.sidebar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.25);
    border-radius:20px;
}

/* =========================================
   LOGO / TITLE
========================================= */

.sidebar h3{
    color:#fff;
    font-size:24px;
    font-weight:700;
    margin-bottom:30px;
}

/* =========================================
   MENU
========================================= */

.sidebar-menu{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.sidebar a{
    display:flex;
    align-items:center;
    gap:12px;

    padding:13px 15px;

    border-radius:14px;

    text-decoration:none;
    color:#fff;

    font-size:14px;
    font-weight:500;

    transition:.25s ease;
}

/* Hover */

.sidebar a:hover{
    background:rgba(255,255,255,.12);
    transform:translateX(4px);
}

/* Active */

.sidebar a.active{
    background:#39a852;
    color:#fff;
}

/* Icon */

.sidebar a i{
    width:20px;
    text-align:center;
    font-size:16px;
}

/* =========================================
   USER PANEL (OPSIONAL)
========================================= */

.sidebar-user{
    margin-top:auto;

    padding-top:20px;
    border-top:1px solid rgba(255,255,255,.15);

    color:#fff;
}

.sidebar-user-name{
    font-size:14px;
    font-weight:600;
}

.sidebar-user-role{
    font-size:12px;
    opacity:.8;
}

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

@media(max-width:992px){

    .sidebar{
        position:relative;
        width:100%;
        height:auto;
        border-radius:0 0 20px 20px;
    }

}



/* DASHBOARD MAINTENANCE */
/* ==================================================
   DASHBOARD
================================================== */

/* =========================================
   HEADER
========================================= */

.header-title{
    background:linear-gradient(
        135deg,
        #198754,
        #20c997
    );
    border-radius:22px;
    padding:24px 28px;
    color:#fff;
    margin-bottom:22px;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.header-title h1{
    margin:0;
    font-size:28px;
    font-weight:700;
}

.header-title p{
    margin:6px 0 0;
    font-size:14px;
    opacity:.95;
}

/* =========================================
   FILTER
========================================= */

.filter-card{
    background:#fff;
    border-radius:20px;
    padding:20px;
    margin-bottom:22px;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.filter-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    align-items:end;
}

.filter-row label{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:700;
    color:#374151;
}

.filter-row select,
.filter-row input{
    width:100%;
    height:44px;
    border:1px solid #dbe2ea;
    border-radius:12px;
    padding:0 14px;
    background:#fff;
}

.filter-row select:focus,
.filter-row input:focus{
    outline:none;
    border-color:#198754;
    box-shadow:0 0 0 3px rgba(25,135,84,.15);
}

.btn-filter{
    width:100%;
    height:44px;
    border:none;
    border-radius:12px;
    background:#198754;
    color:#fff;
    font-weight:700;
}

.btn-filter:hover{
    background:#157347;
}

/* =========================================
   KPI
========================================= */

.kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin-bottom:22px;
}

.kpi-card{
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:18px;
    padding:14px 16px;

    display:flex;
    align-items:center;
    gap:12px;

    min-height:88px;

    box-shadow:0 2px 8px rgba(0,0,0,.05);
    transition:.2s;
}

.kpi-card:hover{
    transform:translateY(-2px);
}

.kpi-icon{
    width:50px;
    height:50px;
    border-radius:14px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
    flex-shrink:0;
}

.kpi-content{
    flex:1;
}

.kpi-label{
    display:block;
    font-size:11px;
    font-weight:700;
    color:#6b7280;
    text-transform:uppercase;
}

.kpi-value{
    font-size:24px;
    font-weight:800;
    color:#111827;
    line-height:1.2;
}

.kpi-desc{
    font-size:11px;
    color:#6b7280;
}

/* =========================================
   KPI TOOLTIP
========================================= */
.info-icon{
    color:#6c757d;
    font-size:12px;
    margin-left:4px;
    cursor:pointer;
    transition:0.2s;
}

.info-icon:hover{
    color:#198754;
}

/* =========================================
   KPI COLORS
========================================= */

.blue{
    background:#e7f1ff;
    color:#1976d2;
}

.green{
    background:#e9f7ec;
    color:#2e7d32;
}

.orange{
    background:#fff4e5;
    color:#ef6c00;
}

.purple{
    background:#f3e8ff;
    color:#7e22ce;
}

.red{
    background:#ffe8e8;
    color:#dc2626;
}

.dark{
    background:#edf2f7;
    color:#374151;
}

/* =========================================
   CHART
========================================= */

.chart-card{
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:20px;
    padding:18px;

    box-shadow:0 3px 10px rgba(0,0,0,.06);

    height:340px;
}

.chart-card h5{
    font-size:15px;
    font-weight:700;
    margin-bottom:12px;
}

.chart-container{
    position:relative;
    width:100%;
    height:280px;
}

.chart-card canvas{
    width:100% !important;
    height:100% !important;
}

/* Ranking Chart */

#rankChart{
    max-height:280px !important;
}

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

.workload-card{
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:20px;
    padding:20px;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
}

.workload-card h5{
    font-size:16px;
    font-weight:700;
    margin-bottom:15px;
}

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

.table-card{
    background:#fff;
    border:1px solid #eef2f7;
    border-radius:20px;
    padding:20px;

    box-shadow:0 3px 10px rgba(0,0,0,.06);

    overflow:hidden;
}

.table-card h4{
    font-size:18px;
    font-weight:700;
    margin-bottom:20px;
}

.table-responsive{
    overflow-x:auto;
}

.table{
    width:100%;
    margin-bottom:0;
}

.table thead{
    background:#198754;
    color:#fff;
}

.table th{
    padding:13px;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}

.table td{
    padding:12px;
    font-size:13px;
    vertical-align:middle;
}

.table tbody tr:hover{
    background:#f7faf8;
}

/* =========================================
   BADGE
========================================= */

.badge{
    padding:7px 10px;
    border-radius:10px;
    font-size:11px;
    font-weight:700;
}

.status-underload{
    background:#dcfce7;
    color:#166534;
}

.status-normal{
    background:#fef9c3;
    color:#854d0e;
}

.status-overload{
    background:#fee2e2;
    color:#991b1b;
}

/* =========================================
   ALIGN CARD HEIGHT
========================================= */

.row.g-4{
    align-items:stretch;
}

.row.g-4 > div{
    display:flex;
}

.row.g-4 > div > .chart-card,
.row.g-4 > div > .table-card,
.row.g-4 > div > .workload-card{
    width:100%;
}

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

@media(max-width:992px){

    .chart-card{
        height:320px;
    }

    .chart-container{
        height:250px;
    }

}

@media(max-width:768px){

    .filter-row{
        grid-template-columns:1fr;
    }

    .kpi-grid{
        grid-template-columns:1fr;
    }

    .header-title h1{
        font-size:22px;
    }

    .chart-card{
        height:300px;
    }

    .chart-container{
        height:230px;
    }

}

/* WORKLOAD DASHBOARD */
/* ==================================================
   WORKLOAD DASHBOARD
================================================== */

.workload-header{
    background:linear-gradient(135deg,#0f5132,#198754,#20c997);
    border-radius:22px;
    padding:24px 30px;
    color:#fff;
    margin-bottom:20px;
}

.workload-header h1{
    font-size:28px;
    font-weight:700;
    margin-bottom:5px;
}

.workload-header p{
    margin:0;
    opacity:.9;
}

.workload-kpi-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:16px;
    margin-bottom:20px;
}

.workload-kpi{
    background:#fff;
    border-radius:18px;
    padding:14px;
    display:flex;
    align-items:center;
    gap:12px;
    border:1px solid #eef2f7;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}

.workload-icon{
    width:50px;
    height:50px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
}

.workload-content{
    flex:1;
}

.workload-label{
    font-size:11px;
    text-transform:uppercase;
    color:#6b7280;
    font-weight:700;
}

.workload-value{
    font-size:24px;
    font-weight:800;
    color:#111827;
}

.workload-desc{
    font-size:12px;
    color:#6b7280;
}

.workload-chart-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(450px,1fr));
    gap:20px;
}

.workload-chart-card{
    background:#fff;
    border-radius:20px;
    padding:18px;
    border:1px solid #eef2f7;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
}

.workload-chart-container{
    position:relative;
    height:280px;
}

.workload-table-card{
    background:#fff;
    border-radius:20px;
    padding:20px;
    border:1px solid #eef2f7;
    box-shadow:0 3px 10px rgba(0,0,0,.06);
}

.workload-table{
    width:100%;
    border-collapse:collapse;
}

.workload-table th{
    background:#198754;
    color:#fff;
    padding:12px;
    font-size:13px;
}

.workload-table td{
    padding:12px;
    border-bottom:1px solid #eef2f7;
}





/* Footer */
.footer-credit{
    margin-top:40px;
    padding:15px;

    text-align:center;

    font-size:13px;
    color:#6b7280;

    border-top:1px solid #e5e7eb;
}

.footer-credit i{
    color:#198754;
    margin-right:5px;
}



.login-editor-link{
    margin-top:10px;
    display:block;
    color:#ffc107;
    font-weight:600;
    padding:8px 10px;
    border:1px dashed #ffc107;
    border-radius:6px;
    transition:0.2s;
}

.login-editor-link:hover{
    background:#ffc107;
    color:#0a1426;
    text-decoration:none;
}

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

@media(max-width:992px){

    .sidebar{
        width:100%;
        height:auto;
        position:relative;
    }

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

}

@media(max-width:768px){

    .main-content{
        padding:15px;
    }

}