/* =====================================================
   PutSyiNaPOS Enterprise Dashboard
   Version : 1.0
   Author  : CV PUTSYINA
===================================================== */

:root{

    --primary:#0D47A1;
    --primary-light:#1565C0;

    --success:#00C853;
    --warning:#FFB300;
    --danger:#D50000;
    --info:#00B8D4;

    --sidebar:#081A3A;
    --sidebar-hover:#0D47A1;

    --bg:#F4F7FC;
    --card:#FFFFFF;

    --text:#1E293B;
    --muted:#64748B;

    --border:#E2E8F0;

    --shadow:
    0 10px 25px rgba(15,23,42,.08);

    --radius:18px;

}

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

body{
    background:var(--bg);
    font-family:
    "Inter",
    "Segoe UI",
    sans-serif;
    color:var(--text);
}

.container-fluid{
    padding-top:20px;
    padding-bottom:20px;
}

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

.card{

    border:none;
    border-radius:var(--radius);
    box-shadow:var(--shadow);

    transition:.3s ease;

    overflow:hidden;
}

.card:hover{

    transform:translateY(-4px);

    box-shadow:
    0 15px 40px rgba(15,23,42,.12);

}

.card-header{

    background:#fff;
    border-bottom:1px solid #eef2f7;

    font-weight:600;
    color:var(--text);

    padding:18px 20px;

}

.card-body{

    padding:20px;

}

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

.dashboard-card{

    position:relative;

    min-height:120px;

    border-radius:20px;

    overflow:hidden;
}

.dashboard-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:5px;

    background:var(--primary);

}

.sales-card::before{
    background:var(--success);
}

.profit-card::before{
    background:#7C3AED;
}

.card-title-small{

    color:var(--muted);

    font-size:13px;

    margin-bottom:10px;

    text-transform:uppercase;

    letter-spacing:.5px;
}

.dashboard-card h2,
.dashboard-card h3{

    font-weight:700;
    margin:0;
}

.dashboard-card small{

    font-size:12px;
}

/* =====================================================
   ICON BOX
===================================================== */

.icon-box{

    width:55px;
    height:55px;

    border-radius:15px;

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

    color:#fff;

    font-size:22px;

    flex-shrink:0;
}

.bg-primary{
    background:linear-gradient(
    135deg,
    #1565C0,
    #0D47A1
    ) !important;
}

.bg-success{
    background:linear-gradient(
    135deg,
    #00E676,
    #00C853
    ) !important;
}

.bg-danger{
    background:linear-gradient(
    135deg,
    #FF5252,
    #D50000
    ) !important;
}

.bg-warning{
    background:linear-gradient(
    135deg,
    #FFC107,
    #FF9800
    ) !important;
}

.bg-info{
    background:linear-gradient(
    135deg,
    #00E5FF,
    #00B8D4
    ) !important;
}

.bg-secondary{
    background:linear-gradient(
    135deg,
    #6C757D,
    #495057
    ) !important;
}

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

.table{

    margin-bottom:0;

}

.table thead th{

    border:none;

    background:#F8FAFC;

    color:#334155;

    font-size:13px;

    font-weight:700;

    padding:14px;
}

.table tbody td{

    padding:14px;

    border-top:1px solid #f1f5f9;

    vertical-align:middle;

}

.table-hover tbody tr:hover{

    background:#F8FAFC;

}

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

.btn{

    border-radius:12px;

    font-weight:600;

    padding:10px 16px;

}

.btn-primary{

    background:var(--primary);

    border-color:var(--primary);

}

.btn-primary:hover{

    background:#0B3A86;

}

.btn-success{

    background:var(--success);

    border-color:var(--success);

}



.wrapper{
display:flex;
min-height:100vh;
}

.sidebar{

width:260px;

background:#081A3A;

color:#fff;

padding:20px;

}

.logo-area{

text-align:center;

margin-bottom:30px;

}

.logo-area h3{

font-weight:700;

color:#fff;

}

.logo-area span{

color:#9CA3AF;

}

.sidebar .nav-link{

color:#D1D5DB;

padding:12px 15px;

border-radius:10px;

margin-bottom:5px;

}

.sidebar .nav-link:hover{

background:#0D47A1;

color:#fff;

}

.main-content{

flex:1;

padding:20px;

background:#F4F7FC;

}

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

canvas{

    max-width:100%;

}

.chart-container{

    position:relative;

    height:350px;

}

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

.badge-success{

    background:#DCFCE7;
    color:#166534;

    padding:6px 12px;

    border-radius:50px;

    font-size:12px;
}

.badge-danger{

    background:#FEE2E2;
    color:#991B1B;

    padding:6px 12px;

    border-radius:50px;

    font-size:12px;
}

.badge-warning{

    background:#FEF3C7;
    color:#92400E;

    padding:6px 12px;

    border-radius:50px;

    font-size:12px;
}

/* =====================================================
   STOK KRITIS
===================================================== */

.stok-kritis{

    background:#FFF1F2;

    border-left:4px solid #D50000;

}

.stok-warning{

    background:#FFF8E1;

    border-left:4px solid #FF9800;

}

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

.table-scroll{

    max-height:400px;

    overflow-y:auto;

}

/* =====================================================
   LOADING
===================================================== */

.loading{

    display:none;

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    rgba(255,255,255,.7);

    z-index:9999;

    align-items:center;
    justify-content:center;
}

.spinner{

    width:60px;
    height:60px;

    border:5px solid #eee;

    border-top:
    5px solid var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;
}

@keyframes spin{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }

}

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

.sidebar{

    background:var(--sidebar);

    min-height:100vh;

}

.sidebar .nav-link{

    color:#CBD5E1;

    padding:12px 20px;

    border-radius:12px;

    margin-bottom:4px;

}

.sidebar .nav-link:hover{

    background:var(--sidebar-hover);

    color:#fff;

}

.sidebar .nav-link.active{

    background:var(--primary);

    color:#fff;

}

/* =====================================================
   DARK MODE
===================================================== */

body.dark-mode{

    background:#0F172A;

    color:#E2E8F0;

}

body.dark-mode .card{

    background:#1E293B;

    color:#E2E8F0;

}

body.dark-mode .card-header{

    background:#1E293B;

    color:#E2E8F0;

    border-color:#334155;

}

body.dark-mode .table thead th{

    background:#334155;

    color:#E2E8F0;

}

body.dark-mode .table tbody td{

    border-color:#334155;

    color:#E2E8F0;

}

body.dark-mode .table-hover tbody tr:hover{

    background:#334155;

}

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

.kpi-animation{

    animation:fadeInUp .5s ease;
}

@keyframes fadeInUp{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:translateY(0);

    }

}

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

@media(max-width:992px){

    .dashboard-card{

        min-height:auto;

    }

}

@media(max-width:768px){

    .container-fluid{

        padding-left:10px;
        padding-right:10px;

    }

    .card-body{

        padding:15px;

    }

    .dashboard-card h2,
    .dashboard-card h3{

        font-size:20px;

    }

    .icon-box{

        width:45px;
        height:45px;

        font-size:18px;

    }

}


.wrapper{
    display:flex;
    min-height:100vh;
}

.sidebar{
    width:260px;
    min-width:260px;

    background:#081A3A;
    color:#fff;

    padding:20px;
}

.main-content{
    flex:1;
    padding:20px;
    background:#F4F7FC;
}

.logo-area{
    margin-bottom:30px;
    text-align:center;
}

.sidebar .nav-link{
    color:#fff;
    padding:12px;
    display:block;
    border-radius:10px;
    margin-bottom:5px;
}

.sidebar .nav-link:hover{
    background:#0D47A1;
    color:#fff;
}