/* ---------- Design tokens ---------- */

:root {
    --optms-navbar-height: 56px;
    --optms-sidebar-width: 290px;
    --optms-sidebar-collapsed-width: 64px;
    --optms-transition: .25s ease;

    --optms-sidebar-bg: #243447;
    --optms-sidebar-border: rgba(255, 255, 255, .08);
    --optms-sidebar-text: #ffffff;
    --optms-sidebar-hover-bg: rgba(255, 255, 255, .10);
    --optms-sidebar-hover-text: #ffd43b;
    --optms-sidebar-active-bg: #3b71ca;
    --optms-sidebar-active-accent: #66b3ff;

    --optms-page-bg: #f5f7fb;
    --optms-page-text: #212529;
}

/* ---------- Page ---------- */

body {
    background: var(--optms-page-bg);
    color: var(--optms-page-text);
    min-height: 100vh;
    overflow-x: hidden;
}

/* ---------- Layout shell ---------- */

.app-container {
    min-height: 100vh;
}

/* Fixed header offset — body sits below it */
.app-body {
    margin-top: var(--optms-navbar-height);
}

/* ---------- Sidebar ---------- */
/* Desktop: sticky flex child (no longer position:fixed) so .content no longer
   needs a margin-left to compensate for it. */

.sidebar {
    position: sticky;
    top: var(--optms-navbar-height);
    left: 0;
    width: var(--optms-sidebar-width);
    flex-shrink: 0;
    height: calc(100vh - var(--optms-navbar-height));
    display: flex;
    flex-direction: column;
    background: var(--optms-sidebar-bg);
    border-right: 1px solid var(--optms-sidebar-border);
    overflow-y: auto;
    overflow-x: hidden;
    transition: width var(--optms-transition), transform var(--optms-transition);
    z-index: 1020;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .20) transparent;
}

    .sidebar.collapsed {
        width: var(--optms-sidebar-collapsed-width);
    }

    .sidebar ul {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-width: var(--optms-sidebar-width); /* keeps labels from wrapping mid-collapse */
        padding: .75rem .5rem;
    }

    .sidebar.collapsed ul {
        min-width: 0;
    }

    /* Scrollbar (WebKit) */
    .sidebar::-webkit-scrollbar {
        width: 6px;
    }

    .sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .20);
        /*border-radius: 10px;*/
    }

    /* ---------- Navigation ---------- */

    .sidebar .nav-item {
        margin-bottom: .25rem;
    }

    .sidebar .nav-link {
        display: flex;
        align-items: center;
        gap: .85rem;
        color: var(--optms-sidebar-text) !important;
        padding: .80rem 1rem;
        /*border-radius: .60rem;*/
        font-size: .95rem;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;
        transition: background-color .18s, color .18s;
    }

        .sidebar .nav-link i {
            width: 22px;
            flex-shrink: 0;
            align-self: center;
            text-align: center;
            font-size: 1rem;
            opacity: .9;
        }

    .sidebar.collapsed .nav-link {
        justify-content: center;
        padding: .80rem .5rem;
    }

    .sidebar.collapsed .menu-text {
        display: none;
    }

        .sidebar .nav-link:hover {
            color: var(--optms-sidebar-hover-text) !important;
            background: var(--optms-sidebar-hover-bg);
        }

        .sidebar .nav-link:focus-visible {
            outline: 2px solid #0dcaf0;
            outline-offset: 2px;
        }

        .sidebar .nav-link.active {
            background: var(--optms-sidebar-active-bg);
            color: #fff !important;
            font-weight: 600;
            box-shadow: inset 4px 0 0 var(--optms-sidebar-active-accent), 0 6px 14px rgba(13, 110, 253, .25);
        }

.menu-text {
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* ---------- Backdrop ---------- */
/* Hidden by default everywhere; only shown on small screens (see media query below) */

.sidebar-backdrop {
    display: none;
}

/* ---------- Content ---------- */
/* Flex-grow fills the remaining width next to the sidebar — no margin-left needed
   since the sidebar is a normal flex sibling, not a position:fixed element. */

.content {
    flex: 1 1 auto;
    min-width: 0; /* avoids flex overflow with wide tables/cards */
    padding: 1.5rem;
}

/* .expanded kept as a hook for collapsed-sidebar-specific content tweaks, if ever needed */
.content.expanded {
}

/* ---------- Dropdown ---------- */

.dropdown-menu {
    background-color: #2b2b40;
    border: none;
    /*border-radius: .6rem;*/
    box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

    .dropdown-menu.user-menu {
        min-width: 300px;
        max-width: 300px;
        margin-top: .75rem !important;
    }

.dropdown-item {
    color: #ccc;
    transition: background-color .15s, color .15s;
}

    .dropdown-item:hover {
        background-color: #3a3a50;
        color: #fff;
    }

.dropdown-divider {
    background-color: rgba(255, 255, 255, .15);
}

/* ---------- Avatar ---------- */

.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
}

/* ---------- Mobile ---------- */
/* Sidebar switches to a fixed off-canvas drawer only below the breakpoint. */

@media (max-width: 991.98px) {

    .app-body {
        position: relative;
    }

    .sidebar {
        position: fixed;
        top: var(--optms-navbar-height);
        height: calc(100vh - var(--optms-navbar-height));
        transform: translateX(-100%);
        width: var(--optms-sidebar-width);
    }

        .sidebar.show {
            transform: translateX(0);
            box-shadow: 0 0 30px rgba(0, 0, 0, .35);
        }

    .content {
        margin-left: 0;
    }

    .sidebar-backdrop.show {
        display: block;
        position: fixed;
        inset: var(--optms-navbar-height) 0 0 0;
        background: rgba(0, 0, 0, .45);
        z-index: 1010;
    }
}