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

        body {
            overflow: hidden;
        }


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

        .sidebar {
            width: 240px;
            height: 100vh;
            min-height: 0;

            overflow-y: auto;
            overflow-x: hidden;

            flex-shrink: 0;

            transition: width .3s ease;
        }


        .sidebar.collapsed {
            width: 70px !important;
            padding: 10px !important;

            overflow-x: visible !important;
            overflow-y: visible !important;
        }


        /* ============================================================
           NORMAL NAV LINKS
           ============================================================ */

        .sidebar .nav-link,
        #mobileMenu .nav-link {

            color: #fff;

            display: flex;
            align-items: center;

            gap: 10px;

            border: 1px solid rgba(255,255,255,.14);

            border-radius: 10px;

            white-space: nowrap;

            padding: 8px 10px;

            margin-bottom: 4px;
        }


        .sidebar .nav-link:hover,
        .sidebar .nav-link.active,
        #mobileMenu .nav-link:hover,
        #mobileMenu .nav-link.active {

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

            border-radius: 7px;
        }


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

        .flex-grow-1 {

            height: 100vh;

            min-width: 0;

            overflow-y: auto;
            overflow-x: hidden;
        }


        /* ============================================================
           TOP NAVBAR
           ============================================================ */

        .top-navbar {

            position: sticky;

            top: 0;

            z-index: 1020;
        }


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

        .sidebar.collapsed .sidebar-header {

            justify-content: center !important;
        }


        .sidebar.collapsed .logo-text {

            display: none !important;
        }


        .sidebar.collapsed .sidebar-header .ikon {

            display: none !important;
        }


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

        .sidebar.collapsed .toggle-btn {

            width: 42px !important;

            height: 42px !important;

            padding: 0 !important;

            display: flex !important;

            align-items: center;

            justify-content: center;
        }


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

        .sidebar-card {

            min-height: 140px;

            background: #111;

            position: relative;
        }


        .sidebar-card-image {

            width: 100%;

            height: 140px;

            object-fit: cover;

            display: block;
        }


        .sidebar-card::after {

            content: "";

            position: absolute;

            inset: 0;

            background: linear-gradient(
                to top,
                rgba(0,0,0,.7),
                rgba(0,0,0,.05)
            );
        }


        .sidebar-card-overlay {

            position: absolute;

            z-index: 2;

            left: 16px;

            right: 16px;

            bottom: 14px;
        }


        .sidebar.collapsed .sidebar-card {

            display: none !important;
        }


        /* ============================================================
           DIVIDER
           ============================================================ */

        .divider {

            display: flex;

            align-items: center;

            gap: 12px;

            width: 90%;

            color: #d4af37;
        }


        .divider::before,
        .divider::after {

            content: "";

            flex: 1;

            height: 1px;

            background: linear-gradient(
                90deg,
                transparent,
                #d4af37
            );
        }


        .divider::after {

            background: linear-gradient(
                90deg,
                #d4af37,
                transparent
            );
        }


        .sidebar.collapsed .divider {

            display: none !important;
        }


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

        #adminMenu {

            width: 100% !important;

            max-width: 100% !important;

            margin: 0 !important;

            padding: 0 !important;

            box-sizing: border-box;

            overflow: visible !important;
        }


        #adminMenu > .nav-item {

            display: block !important;

            width: 100% !important;

            max-width: 100% !important;

            margin: 0 0 6px 0 !important;

            padding: 0 !important;

            box-sizing: border-box;
        }


        /* ============================================================
           TOP LEVEL LINK
           ============================================================ */

        #adminMenu > .nav-item > .nav-link {

            width: 100% !important;

            max-width: 100% !important;

            min-width: 0;

            min-height: 42px;

            display: flex !important;

            align-items: center;

            box-sizing: border-box;

            margin: 0 !important;

            padding: 8px 10px !important;

            border: 1px solid rgba(255,255,255,.14);

            border-radius: 10px;

            color: #fff;

            background: transparent;

            white-space: nowrap;
        }


        /* ============================================================
           DIRECT ICON
           ============================================================ */

        #adminMenu > .nav-item > .nav-link > i {

            flex-shrink: 0;

            margin-right: 8px !important;

            font-size: 1rem;
        }


        /* ============================================================
           PARENT SPAN
           ============================================================ */

        #adminMenu > .nav-item > .nav-link > span {

            display: flex;

            align-items: center;

            min-width: 0;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;
        }


        #adminMenu > .nav-item > .nav-link > span > i {

            flex-shrink: 0;

            margin-right: 8px !important;
        }


        /* ============================================================
           CHEVRON
           ============================================================ */

        #adminMenu > .nav-item > .nav-link > .bi-chevron-down {

            flex-shrink: 0;

            margin-left: auto !important;

            margin-right: 0 !important;

            transition: transform .25s ease;
        }


        #adminMenu > .nav-item > .nav-link[aria-expanded="true"]
        > .bi-chevron-down {

            transform: rotate(180deg);
        }


        /* ============================================================
           NORMAL / EXPANDED SUBMENU
           
           This is important:
           position STATIC = submenu opens BELOW parent.
           ============================================================ */

        #adminMenu > .nav-item > .collapse {

            position: static !important;

            width: 100% !important;

            max-width: 100% !important;

            margin: 0 !important;

            padding: 0 !important;

            background: rgba(0,0,0,.08);

            border-radius: 0 0 10px 10px;

            overflow: hidden;
        }


        #adminMenu > .nav-item > .collapse > .nav {

            display: block !important;

            width: 100% !important;

            max-width: 100% !important;

            margin: 0 !important;

            padding: 4px 0 !important;
        }


        /* ============================================================
           SUBMENU ITEMS
           ============================================================ */

        #adminMenu .collapse .nav-item {

            display: block !important;

            width: 100% !important;

            max-width: 100% !important;

            margin: 0 !important;

            padding: 0 !important;

            box-sizing: border-box;
        }


        /* ============================================================
           SUBMENU LINKS
           ============================================================ */

        #adminMenu .collapse .nav-link {

            display: flex !important;

            align-items: center;

            width: 100% !important;

            max-width: 100% !important;

            min-width: 0;

            margin: 2px 0 !important;

            padding: 7px 10px !important;

            border: 0 !important;

            border-radius: 7px;

            color: rgba(255,255,255,.85);

            background: transparent;

            white-space: nowrap;
        }


        #adminMenu .collapse .nav-link > i {

            flex-shrink: 0;

            margin-right: 8px !important;
        }


        #adminMenu .collapse .nav-link > span {

            min-width: 0;

            max-width: 100%;

            overflow: hidden;

            text-overflow: ellipsis;

            white-space: nowrap;
        }


        #adminMenu .collapse .nav-link:hover {

            background: rgba(255,255,255,.12);
        }


        #adminMenu .collapse .nav-link.active {

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

            color: #fff;
        }


        /* ============================================================
           OPEN PARENT
           ============================================================ */

        #adminMenu > .nav-item > .nav-link[aria-expanded="true"] {

            background: rgba(255,255,255,.12);
        }


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

        .sidebar.collapsed #adminMenu > .nav-item > .nav-link {

            width: 100% !important;

            max-width: 100% !important;

            height: 42px;

            min-height: 42px;

            display: flex !important;

            align-items: center;

            justify-content: center !important;

            margin: 0 0 6px 0 !important;

            padding: 0 !important;

            border-radius: 10px;

            overflow: visible !important;
        }


        /* ============================================================
           COLLAPSED TEXT
           ============================================================ */

        .sidebar.collapsed #adminMenu
        > .nav-item
        > .nav-link
        > span {

            display: flex !important;

            align-items: center;

            justify-content: center;

            width: auto !important;

            min-width: 0 !important;

            max-width: none !important;

            margin: 0 !important;

            padding: 0 !important;

            font-size: 0 !important;

            overflow: visible !important;
        }


        /* ============================================================
           COLLAPSED ICON INSIDE SPAN
           ============================================================ */

        .sidebar.collapsed #adminMenu
        > .nav-item
        > .nav-link
        > span
        > i {

            display: block !important;

            flex-shrink: 0;

            margin: 0 !important;

            font-size: 1.15rem !important;

            line-height: 1;
        }


        /* ============================================================
           COLLAPSED DIRECT ICON
           ============================================================ */

        .sidebar.collapsed #adminMenu
        > .nav-item
        > .nav-link
        > i {

            display: block !important;

            flex-shrink: 0;

            width: auto !important;

            margin: 0 !important;

            font-size: 1.15rem !important;

            line-height: 1;
        }


        /* ============================================================
           COLLAPSED CHEVRON HIDDEN
           ============================================================ */

        .sidebar.collapsed #adminMenu
        > .nav-item
        > .nav-link
        > .bi-chevron-down {

            display: none !important;
        }


        /* ============================================================
           COLLAPSED SUBMENU
   
           IMPORTANT:
           This is the CSS you asked "where?" about.

           It MUST come AFTER the normal submenu CSS.
           ============================================================ */

        .sidebar.collapsed #adminMenu
        > .nav-item
        > .collapse {

            position: fixed !important;

            left: 70px !important;

            top: 0;

            width: 220px !important;

            max-width: 220px !important;

            height: auto !important;

            margin: 0 !important;

            padding: 6px !important;

            background: #141e30 !important;

            border-radius: 0 10px 10px 0;

            box-shadow: 5px 5px 20px rgba(0,0,0,.35);

            z-index: 99999;

            overflow: visible !important;
        }


        /*
        Only hide CLOSED submenu.
        Do NOT use display:none on the parent .collapse
        because Bootstrap needs to control it.
        */

        .sidebar.collapsed #adminMenu
        > .nav-item
        > .collapse:not(.show) {

            display: none !important;
        }


        /*
        OPEN submenu
        */

        .sidebar.collapsed #adminMenu
        > .nav-item
        > .collapse.show {

            display: block !important;
        }


        /*
        Submenu links in collapsed mode
        */

        .sidebar.collapsed #adminMenu
        .collapse .nav-link {

            display: flex !important;

            align-items: center;

            justify-content: flex-start !important;

            width: 100% !important;

            padding: 8px 10px !important;

            margin: 2px 0 !important;

            color: #fff;
        }


        .sidebar.collapsed #adminMenu
        .collapse .nav-link span {

            display: block !important;

            font-size: 14px !important;

            overflow: visible !important;
        }


        .sidebar.collapsed #adminMenu
        .collapse .nav-link i {

            display: block !important;

            margin-right: 8px !important;

            font-size: 1rem !important;
        }


        /* ============================================================
           COLLAPSED ACTIVE
           ============================================================ */

        .sidebar.collapsed #adminMenu
        > .nav-item
        > .nav-link.active {

            background: rgba(255,255,255,.20);
        }


        /* ============================================================
           TOOLTIP
           ============================================================ */

        .sidebar.collapsed #adminMenu .nav-link {

            position: relative;
        }


        .sidebar.collapsed #adminMenu
        > .nav-item
        > .nav-link:hover::after {

            content: attr(data-tooltip);

            position: fixed;

            left: 78px;

            background: #1a0beb;

            color: #fff;

            padding: 6px 10px;

            border-radius: 5px;

            font-size: 13px;

            line-height: 1;

            white-space: nowrap;

            z-index: 99998;

            pointer-events: none;
        }


        /*
        Do not show tooltip when submenu is open.
        */

        .sidebar.collapsed #adminMenu
        > .nav-item
        > .nav-link[aria-expanded="true"]::after {

            display: none;
        }


        /* ============================================================
           MOBILE
           ============================================================ */

        #mobileMenu #adminMenu {

            width: 100%;

            max-width: 100%;
        }


        #mobileMenu #adminMenu .nav-link {

            max-width: 100%;
        }


        /* ============================================================
           ANIMATIONS
           ============================================================ */

        .animate-item {

            transition: all .3s ease;
        }


        .animate-item:hover {

            transform: translateY(-8px);

            box-shadow:
                0 10px 25px rgba(0,0,0,.15);
        }


        .sidebar:not(.collapsed)
        .animate-card li {

            transition: all .3s ease;
        }


        .sidebar:not(.collapsed)
        .animate-card li:hover {

            transform: translateX(6px);

           
        }


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

        @media (max-width: 576px) {

            .sidebar-card {

                width: 50%;

                margin: 0 auto;

                overflow: hidden;
            }

            .sidebar-card-image {

                width: 100%;
            }
        }






        




















.custom-search-dropdown {
    position: relative;
    width: 100%;
}

.custom-search-menu {
    display: none;

    position: absolute;

    top: calc(100% + 2px);
    left: 0;
    right: 0;

    width: 100%;

    background: #ffffff;

    border: 1px solid #ced4da;

    border-radius: 6px;

    padding: 8px;

    z-index: 99999;

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

.custom-search-menu.show {
    display: block;
}

.custom-search-input {
    display: block;

    width: 100%;

    height: 36px;

    padding: 6px 10px;

    border: 1px solid #ced4da;

    border-radius: 4px;

    outline: none;
}

.custom-search-input:focus {
    border-color: #86b7fe;

    box-shadow:
        0 0 0 .2rem rgba(13,110,253,.15);
}

.custom-search-options {
    max-height: 200px;

    overflow-y: auto;

    margin-top: 5px;
}

.custom-search-option {
    padding: 7px 10px;

    cursor: pointer;

    border-radius: 4px;
}

.custom-search-option:hover {
    background: #f1f3f5;
}

.custom-search-option.selected {
    background: #0d6efd;

    color: #ffffff;
}


.stat-card {
    position: relative;
    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.stat-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--stat-color);
    opacity: .8;
}

.stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 1rem 2rem rgba(0, 0, 0, .08) !important;
}

.stat-title {
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.stat-value {
    font-size: 2rem;
    line-height: 1.1;
    letter-spacing: -.04em;
}

.stat-icon {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;

    border-radius: 14px;

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

    font-size: 1.25rem;
}

.stat-link {
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}

.stat-link:hover {
    text-decoration: underline;
}

.stat-toggle {
    width: 34px;
    height: 34px;

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

    border-radius: 10px;
}






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

.custom-card
{
    background: #ffffff;

    border: 1px solid #e5e7eb !important;

    border-radius: 14px !important;

    position: relative;

    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* =========================================================
   HOVER EFFECT
========================================================= */

.custom-card:hover
{
    transform: translateY(-5px);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.10);

    border-color: rgba(13, 110, 253, 0.35) !important;
}


/* =========================================================
   TOP HOVER LINE
========================================================= */

.custom-card::before
{
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 3px;

    background: #0d6efd;

    transition: width 0.25s ease;

    z-index: 1;
}


.custom-card:hover::before
{
    width: 100%;
}


/* =========================================================
   IMAGES INSIDE CARD
========================================================= */

.custom-card img
{
    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}


.custom-card:hover img
{
    transform: scale(1.03);
}


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

.custom-card .card-title
{
    transition: color 0.2s ease;
}


.custom-card:hover .card-title
{
    color: #0d6efd;
}


/* =========================================================
   BUTTONS INSIDE CARD
========================================================= */

.custom-card .btn
{
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.custom-card .btn:hover
{
    transform: translateY(-2px);

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   INPUTS INSIDE CARD
========================================================= */

.custom-card input,
.custom-card textarea,
.custom-card select
{
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.custom-card input:focus,
.custom-card textarea:focus,
.custom-card select:focus
{
    border-color: #0d6efd;

    box-shadow:
        0 0 0 0.15rem rgba(13, 110, 253, 0.12);
}


/* =========================================================
   AVATAR / ICON
========================================================= */

.custom-card .card-avatar
{
    transition:
        transform 0.25s ease,
        background 0.25s ease;
}


.custom-card:hover .card-avatar
{
    transform: scale(1.06);

    background: #0d6efd;
}


/* =========================================================
   BADGES
========================================================= */

.custom-card .badge
{
    transition:
        transform 0.2s ease;
}


.custom-card:hover .badge
{
    transform: translateY(-1px);
}


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

@media(max-width: 576px)
{
    .custom-card
    {
        border-radius: 12px !important;
    }
}


      /*
        |--------------------------------------------------------------------------
        | ADMIN DROPDOWN
        |--------------------------------------------------------------------------
        */

        .admin-dropdown {

            flex-shrink: 0;

        }


        .admin-button {

            display: flex;

            align-items: center;

            gap: 8px;

            border: 1px solid #dee2e6;

            background: #fff;

            border-radius: 8px;

            padding:
                7px 11px;

            color: #212529;

        }


        .admin-button:hover {

            background: #f8f9fa;

        }


        .admin-avatar {

            width: 30px;

            height: 30px;

            border-radius: 50%;

            background:
                #0d6efd;

            color: #fff;

            display: inline-flex;

            align-items: center;

            justify-content: center;

            font-size: 13px;

            font-weight: 600;

        }