/* ================================
   1. FIXED SIDEBAR + INTERNAL SCROLL
   ================================ */

/* Sidebar menempel di kiri, tinggi penuh layar */
.nk-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 250px;              /* lebar normal */
    height: 100vh;
    z-index: 1000;
    transition: all 0.25s ease;
}

/* Bagian dalam sidebar yang bisa scroll */
.nk-sidebar .nk-nav-scroll {
    height: calc(100vh - 80px);   /* 80px kira2 tinggi header/nav */
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 1rem;
}

/* Scrollbar lebih manis (opsional) */
.nk-sidebar .nk-nav-scroll::-webkit-scrollbar {
    width: 6px;
}
.nk-sidebar .nk-nav-scroll::-webkit-scrollbar-thumb {
    border-radius: 3px;
}

/* Konten & header geser ke kanan mengikuti lebar sidebar */
.header {
    margin-left: 250px;
    transition: margin-left 0.25s ease;
}
.content-body {
    margin-left: 250px;
    transition: margin-left 0.25s ease;
}

/* ================================
   2. LIGHT / DARK THEME (pakai CSS variable)
   ================================ */

:root {
    --sidebar-bg: #ffffff;
    --sidebar-border: #e5e7eb;
    --sidebar-color: #4b5563;
    --sidebar-active-bg: #eef2ff;
    --sidebar-active-color: #111827;

    --body-bg: #f3f4f6;
    --body-color: #111827;
}

body.theme-dark {
    --sidebar-bg: #020617;
    --sidebar-border: #111827;
    --sidebar-color: #9ca3af;
    --sidebar-active-bg: #1f2937;
    --sidebar-active-color: #f9fafb;

    --body-bg: #020617;
    --body-color: #e5e7eb;
}

/* Terapkan variable ke elemen */
body {
    background-color: var(--body-bg);
    color: var(--body-color);
}

.nk-sidebar {
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
}

.nk-sidebar .nav-label {
    color: var(--sidebar-color);
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 12px 25px 6px;
}

.nk-sidebar .metismenu > li > a {
    color: var(--sidebar-color);
    padding: 10px 25px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nk-sidebar .metismenu > li.mm-active > a,
.nk-sidebar .metismenu > li > a:hover {
    background-color: var(--sidebar-active-bg);
    color: var(--sidebar-active-color);
}

/* Icon */
.nk-sidebar .menu-icon {
    font-size: 18px;
}

/* ================================
   3. MINI SIDEBAR (ICON SAJA)
   ================================ */

/* Saat main-wrapper diberi class .mini-sidebar */
#main-wrapper.mini-sidebar .nk-sidebar {
    width: 80px;
}

/* Konten & header ikut mengecil margin kiri */
#main-wrapper.mini-sidebar .header,
#main-wrapper.mini-sidebar .content-body {
    margin-left: 80px;
}

/* Hide teks menu, tampilkan hanya icon */
#main-wrapper.mini-sidebar .nk-sidebar .nav-text,
#main-wrapper.mini-sidebar .nk-sidebar .nav-label {
    opacity: 0;
    visibility: hidden;
    width: 0;
    padding: 0;
}

/* Center icon */
#main-wrapper.mini-sidebar .nk-sidebar .metismenu > li > a {
    justify-content: center;
}

/* Saat di-hover, expand sementara (desktop) */
@media (min-width: 992px) {
    #main-wrapper.mini-sidebar .nk-sidebar:hover {
        width: 240px;
    }
    #main-wrapper.mini-sidebar .nk-sidebar:hover + .header,
    #main-wrapper.mini-sidebar .nk-sidebar:hover ~ .content-body {
        margin-left: 240px;
    }
    #main-wrapper.mini-sidebar .nk-sidebar:hover .nav-text,
    #main-wrapper.mini-sidebar .nk-sidebar:hover .nav-label {
        opacity: 1;
        visibility: visible;
        width: auto;
        padding: 0 25px;
    }
    #main-wrapper.mini-sidebar .nk-sidebar:hover .metismenu > li > a {
        justify-content: flex-start;
    }
}

/* ================================
   4. MOBILE SIDEBAR (OFFCANVAS)
   ================================ */

@media (max-width: 991.98px) {

    .nk-sidebar {
        transform: translateX(-100%);
        margin-left: 0;
    }
    .header,
    .content-body {
        margin-left: 0;
    }

    /* Quixlab default: class menu-toggle di main-wrapper
       saat hamburger diklik → sidebar muncul */
    #main-wrapper.menu-toggle .nk-sidebar {
        transform: translateX(0);
    }

    /* Tambahkan overlay halaman saat sidebar muncul */
    #main-wrapper.menu-toggle::before {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 900;
    }
}

/* ================================
   5. ANIMASI HALUS
   ================================ */

.nk-sidebar,
.header,
.content-body,
.nk-sidebar .metismenu > li > a {
    transition: all 0.25s ease;
}

/* Card login super lebar */
.login-extra-wide {
    width: 100%;
    max-width: 950px;    /* bisa naikkan 1000px kalau mau */
    margin: 0 auto;
    padding: 60px 70px;
    border-radius: 20px;
}

/* Perbesar input */
.login-form .form-control-lg {
    height: 60px;
    font-size: 18px;
    border-radius: 12px;
}

/* Icon lihat password */
.toggle-password {
    position: absolute;
    right: 18px;
    top: 18px;
    font-size: 22px;
    cursor: pointer;
    color: #777;
}
.toggle-password:hover {
    color: #333;
}