body{
font-family:'Segoe UI',sans-serif;
background:#808080;
margin:0;
}
/* ===== ROOT ===== */
:root{
    --primary:#7c0c00;
    --primary-soft:#a80000;
    --bg:#f4f6f9;
    --card:#ffffff;
    --text:#1e293b;
    --muted:#64748b;
    --border:#e5e7eb;
}

/* ===== GLOBAL ===== */
body{
    font-family:'Segoe UI',sans-serif;
    background:var(--bg);
    margin:0;
    color:var(--text);
}

/* ===== LAYOUT ===== */
.layout{
    display:flex;
    min-height:100vh;
}

/* ===== SIDEBAR ===== */
.sidebar{
    width:240px;
    background:linear-gradient(180deg, #740000, #4b0000);
    color:white;
    padding:20px 15px;
    transition:0.3s;
}

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

.sidebar-logo img{
    width:230px;
}

/* MENU */
.sidebar-menu a{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 14px;
    margin-bottom:6px;

    color:white;
    text-decoration:none;
    font-size:14px;

    border-radius:10px;
    transition:0.25s;
}

.sidebar-menu a svg{
    width:20px;
    height:20px;
    flex-shrink:0;

    stroke:white;
    fill:none;
    stroke-width:2;

    display:block;
}

.sidebar-menu a span{
    flex:1;
}

/* HOVER */
.sidebar-menu a:hover{
    background:rgba(255,255,255,0.1);
    transform:translateX(5px);
}

/* ACTIVE */
.sidebar-menu a.active{
    background:#CC0000;
    font-weight:600;
}

/* ===== MAIN ===== */
.main{
    flex:1;
    display:flex;
    flex-direction:column;
}

/* ===== TOPBAR ===== */
.topbar{
    height:60px;
    background:var(--card);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 25px;
    box-shadow:0 2px 10px rgba(0,0,0,0.04);
}

.topbar-left{
    display:flex;
    align-items:center;
    gap:10px;
}

.menu-toggle{
    font-size:20px;
    cursor:pointer;
    display:none;
}

/* ===== CONTAINER ===== */
.container{
    padding:25px;
}

/* ===== CARD ===== */
.card{
    background:var(--card);
    padding:20px;
    border-radius:12px;
    box-shadow:0 5px 20px rgba(0,0,0,0.06);
}

/* ===== BUTTON ===== */
.logout-btn{
    background:var(--primary);
    color:white;
    padding:8px 14px;
    border-radius:8px;
    text-decoration:none;
    font-size:13px;
    transition:0.25s;
}

.logout-btn:hover{
    background:var(--primary-soft);
}

/* ===== RESPONSIVE ===== */
@media (max-width:768px){

    .sidebar{
        position:fixed;
        left:-260px;
        top:0;
        height:100%;
        z-index:1000;
    }

    .sidebar.active{
        left:0;
    }

    .menu-toggle{
        display:block;
    }

    .container{
        padding:20px 15px;
    }
}

/* ===== ADMIN TOPBAR ===== */

.topbar-title{
    font-weight:600;
    font-size:16px;
}

/* RIGHT AREA */
.topbar-right{
    display:flex;
    align-items:center;
    gap:18px;
}

/* NOTIF */
.notif-wrapper{
    position:relative;
    cursor:pointer;
    display:flex;
    align-items:center;
}

.notif-wrapper svg{
    width:20px;
    height:20px;
    stroke:#333;
    fill:none;
    stroke-width:2;
}

.notif-badge{
    position:absolute;
    top:-6px;
    right:-8px;
    background:#CC0000;
    color:white;
    font-size:11px;
    padding:2px 6px;
    border-radius:20px;
}

/* USER */
.user-profile{
    font-size:14px;
    font-weight:500;
    color:#444;
}

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

.notif-modal{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.4);
    z-index:999;
    align-items:center;
    justify-content:center;
}

.notif-box{
    background:white;
    width:420px;
    max-height:500px;
    overflow:auto;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.2);
}

.notif-header{
    padding:16px;
    font-weight:600;
    border-bottom:1px solid #eee;
    font-size:15px;
}

.notif-item{
    padding:14px;
    font-size:14px;
    border-bottom:1px solid #f2f2f2;
}

.notif-item:hover{
    background:#fafafa;
}

.notif-close{
    float:right;
    cursor:pointer;
    font-weight:bold;
}


/* ALERT CONTAINER */

.alert-container{

position:fixed;

top:20px;
right:20px;

display:flex;
flex-direction:column;
align-items:flex-end;

z-index:9999;

}

/* ALERT BOX */

.alert-box{

min-width:260px;
max-width:340px;

padding:14px 18px;

border-radius:10px;

background:white;

color:#333;

margin-bottom:10px;

box-shadow:0 5px 15px rgba(0,0,0,0.2);

font-size:14px;

animation:slideIn .6s;

border-left:4px solid;

}

/* COLORS */

.alert-success{border-left-color:#007932;}
.alert-error{border-left-color:#7c0c00;}
.alert-warning{border-left-color:#8d5700;}
.alert-info{border-left-color:#004574;}

/* ANIMATION */

@keyframes slideIn{

from{
opacity:0;
transform:translateX(40px);
}

to{
opacity:1;
transform:translateX(0);
}

}

/* ===== STATS DASHBOARD ===== */

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

.stat-card{
    background:white;
    padding:22px;
    border-radius:14px;
    box-shadow:0 5px 20px rgba(0,0,0,0.06);

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

    transition:0.25s;
}

.stat-card:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 25px rgba(0,0,0,0.1);
}

.stat-info h3{
    font-size:13px;
    color:#64748b;
    margin:0;
}

.stat-info h1{
    font-size:28px;
    margin-top:6px;
}

/* ICON BOX */
.stat-icon{
    width:48px;
    height:48px;

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

    border-radius:12px;
    background:#f1f5f9;
}

/* ICON SVG */
.stat-icon svg{
    width:22px;
    height:22px;

    stroke:#334155;
    fill:none;
    stroke-width:2;
}

/* WARNA PER CARD */
.stat-card:nth-child(1) .stat-icon{
    background:#fee2e2;
}
.stat-card:nth-child(1) svg{
    stroke:#b91c1c;
}

.stat-card:nth-child(2) .stat-icon{
    background:#fef3c7;
}
.stat-card:nth-child(2) svg{
    stroke:#d97706;
}

.stat-card:nth-child(3) .stat-icon{
    background:#dcfce7;
}
.stat-card:nth-child(3) svg{
    stroke:#15803d;
}