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

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#0F1115;
    color:#E8EAF0;
    height:100vh;
    overflow:hidden;
}

.login-container{
    display:flex;
    height:100vh;
}

/* LEFT SIDE */

.login-left{
    flex:1;
    background:
    radial-gradient(circle at top left,
    rgba(161,15,29,0.35),
    transparent 40%),
    #11151B;

    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:80px;
    position:relative;
}

.logo-shape{
    width:90px;
    height:90px;
    background:#A10F1D;

    clip-path: polygon(
        50% 0%,
        100% 50%,
        50% 100%,
        0% 50%
    );

    margin-bottom:30px;

    box-shadow:
    0 0 30px rgba(161,15,29,0.5);
}

.brand-title{
    font-size:52px;
    font-weight:700;
    margin-bottom:20px;
}

.brand-subtitle{
    color:#9CA3AF;
    font-size:20px;
    line-height:1.6;
    max-width:500px;
}

/* RIGHT SIDE */

.login-right{
    width:500px;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
}

.login-card{
    width:100%;
    background:#171A21;

    border:1px solid rgba(255,255,255,0.05);

    border-radius:24px;

    padding:50px;

    box-shadow:
    0 0 50px rgba(0,0,0,0.4);
}

.login-title{
    font-size:32px;
    margin-bottom:10px;
}

.login-text{
    color:#9CA3AF;
    margin-bottom:40px;
}

/* FORM */

.form-group{
    margin-bottom:25px;
}

.form-label{
    display:block;
    margin-bottom:10px;
    color:#C9CED6;
}

.form-input{
    width:100%;
    background:#0F1115;

    border:1px solid rgba(255,255,255,0.06);

    color:white;

    padding:16px 18px;

    border-radius:14px;

    outline:none;

    transition:0.3s;
}

.form-input:focus{
    border-color:#A10F1D;

    box-shadow:
    0 0 15px rgba(161,15,29,0.3);
}

.login-button{
    width:100%;
    border:none;

    background:#A10F1D;

    color:white;

    padding:18px;

    border-radius:14px;

    font-size:16px;

    cursor:pointer;

    transition:0.3s;

    margin-top:10px;
}

.login-button:hover{
    background:#C1121F;

    transform:translateY(-2px);
}

/* RESPONSIVE */

@media(max-width:950px){

    .login-left{
        display:none;
    }

    .login-right{
        width:100%;
    }

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

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

body{
    font-family:Arial, Helvetica, sans-serif;

    background:#F4F6FA;

    color:#111827;
}

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

.dashboard-layout{
    display:flex;

    min-height:100vh;

    padding:20px;

    gap:20px;
}

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

.sidebar{
    width:290px;

    background:#151821;

    border-radius:32px;

    padding:28px 22px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    box-shadow:
    0 20px 40px rgba(15,23,42,0.08);
}

/* LOGO */

.sidebar-logo{
    display:flex;
    align-items:center;

    gap:16px;

    margin-bottom:50px;
}

.logo-icon{
    width:22px;
    height:22px;

    background:#B11226;

    transform:rotate(45deg);

    border-radius:4px;
}

.logo-title{
    color:white;

    font-size:20px;
    font-weight:700;
}

.logo-subtitle{
    color:#7B8190;

    font-size:13px;
}

/* NAV */

.sidebar-nav{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.nav-item{
    text-decoration:none;

    color:#AAB2C3;

    padding:16px 18px;

    border-radius:16px;

    transition:0.25s;
}

.nav-item:hover{
    background:#1F2430;

    color:white;
}

.nav-item.active{
    background:#B11226;

    color:white;

    box-shadow:
    0 10px 20px rgba(177,18,38,0.25);
}

/* USER */

.sidebar-user{
    background:#1B202B;

    border-radius:22px;

    padding:18px;
}

.user-avatar{
    width:48px;
    height:48px;

    border-radius:50%;

    background:#B11226;

    color:white;

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

    font-weight:bold;

    margin-bottom:14px;
}

.user-name{
    color:white;

    font-weight:600;
}

.user-role{
    color:#8C93A3;

    font-size:14px;

    margin-top:4px;
    margin-bottom:18px;
}

.logout-link{
    display:block;

    text-decoration:none;

    background:#B11226;

    color:white;

    text-align:center;

    padding:14px;

    border-radius:14px;

    transition:0.25s;
}

.logout-link:hover{
    background:#951120;
}

/* =========================
   MAIN
========================= */

.dashboard-main{
    flex:1;

    display:flex;
    flex-direction:column;
}

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

.topbar{
    height:90px;

    background:white;

    border-radius:28px;

    padding:0 30px;

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

    box-shadow:
    0 12px 30px rgba(15,23,42,0.05);

    margin-bottom:24px;
}

.page-title{
    font-size:28px;

    color:#111827;
}

.page-subtitle{
    color:#7B8190;

    margin-top:6px;
}

/* SEARCH */

.topbar-right{
    display:flex;
    align-items:center;

    gap:18px;
}

.search-box input{
    width:260px;

    height:48px;

    border:none;

    background:#F3F5F9;

    border-radius:14px;

    padding:0 18px;

    outline:none;
}

/* NOTIF */

.notification-btn{
    width:48px;
    height:48px;

    border-radius:14px;

    background:#B11226;

    color:white;

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

    font-weight:bold;

    cursor:pointer;
}

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

.dashboard-content{
    display:flex;
    flex-direction:column;

    gap:24px;
}

/* WELCOME */

.welcome-card{
    background:white;

    border-radius:30px;

    padding:35px;

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

    box-shadow:
    0 12px 30px rgba(15,23,42,0.05);
}

.welcome-card h1{
    font-size:34px;

    margin-bottom:10px;
}

.welcome-card p{
    color:#6B7280;
}

.welcome-badge{
    background:#B11226;

    color:white;

    padding:18px 24px;

    border-radius:18px;

    font-weight:600;
}

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

.stats-grid{
    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:22px;
}

.stat-card{
    background:white;

    border-radius:26px;

    padding:28px;

    box-shadow:
    0 12px 30px rgba(15,23,42,0.05);

    transition:0.3s;
}

.stat-card:hover{
    transform:translateY(-4px);
}

.stat-top{
    color:#6B7280;

    margin-bottom:18px;
}

.stat-number{
    font-size:42px;

    font-weight:700;

    margin-bottom:14px;
}

.stat-bottom{
    color:#9CA3AF;
}

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

.content-grid{
    display:grid;

    grid-template-columns:2fr 1fr;

    gap:22px;
}

.content-card{
    background:white;

    border-radius:28px;

    padding:30px;

    box-shadow:
    0 12px 30px rgba(15,23,42,0.05);
}

.card-header{
    margin-bottom:28px;
}

.card-header h2{
    font-size:24px;
}

/* ACTIVITY */

.activity-list{
    display:flex;
    flex-direction:column;

    gap:18px;
}

.activity-item{
    display:flex;
    align-items:center;

    gap:14px;

    padding-bottom:18px;

    border-bottom:
    1px solid #EEF1F5;
}

.activity-dot{
    width:12px;
    height:12px;

    border-radius:50%;

    background:#B11226;
}

/* STATUS */

.system-status{
    display:flex;
    flex-direction:column;

    gap:18px;
}

.status-item{
    display:flex;
    justify-content:space-between;
}

.status-ok{
    color:#0F9D58;

    font-weight:600;
}

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

@media(max-width:1200px){

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

}

@media(max-width:950px){

    .sidebar{
        display:none;
    }

}

@media(max-width:700px){

    .topbar{
        flex-direction:column;

        height:auto;

        padding:20px;

        gap:20px;
    }

    .topbar-right{
        width:100%;
    }

    .search-box{
        flex:1;
    }

    .search-box input{
        width:100%;
    }

    .welcome-card{
        flex-direction:column;
        align-items:flex-start;

        gap:20px;
    }

}