/*
 * VidiCenter Sidebar — Bootstrap 5 native
 *
 * Load AFTER quividi-style.min.css so overrides win cleanly.
 */

/* ============================================================
   Custom properties (edit here to retheme)
   ============================================================ */
:root {
    --vc-sb-width: 220px;
    --vc-sb-mini: 70px;
    /* Reserved height for .logo-element-bottom — used to size the scroll
       region and position the logo. Bumped up to comfortably fit the
       superuser variant (extra terminal-icon row). */
    --vc-sb-logo-h: 90px;
    /* VidiCenter brand colours (defined in quividi.css) */
    --vc-sb-bg: #1F195E; /* .navbar-default background */
    --vc-sb-active: #2E2591; /* .nav-header, active/hover items */
    --vc-sb-hover: #2E2591; /* hover state — same as active */
    --vc-sb-text: #a7b1c2; /* inherited from Inspinia */
    --vc-sb-white: #ffffff;
    --vc-sb-border: rgba(255, 255, 255, 0.07);
    --vc-sb-speed: 0.25s;
}

/* ============================================================
   Outer wrapper — flex row replaces Inspinia's float/margin trick
   ============================================================ */
#wrapper {
    display: flex !important;
    min-height: 100vh;
    width: 100%;
    /* quividi-style.css sets overflow-x:hidden here which creates a scroll container
       and breaks position:sticky on the sidebar. clip clips visually without
       creating a scroll container, so sticky works correctly. */
    overflow-x: clip;
}

/* ============================================================
   Sidebar nav
   ============================================================ */
nav.navbar-default.navbar-static-side {
    width: var(--vc-sb-width);
    flex-shrink: 0;
    /* Stick to viewport as page content scrolls */
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: flex-start;
    overflow: hidden;
    transition: width var(--vc-sb-speed) ease;
    /* Kill Inspinia float-based positioning */
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
}

.sidebar-collapse {
    /* Fill the nav above the bottom logo. Using absolute positioning so the
       scrollable area ends exactly where the logo starts — Chrome doesn't
       include padding-bottom in the scrollable region, so a positioned
       bottom edge is more reliable than padding for clearing the logo. */
    position: absolute;
    top: 0;
    bottom: var(--vc-sb-logo-h);
    left: 0;
    width: var(--vc-sb-width);
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    transition: width var(--vc-sb-speed) ease;
    /* Kill Inspinia's slimScroll overflow override */
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* ============================================================
   Page wrapper — flex child, no hardcoded margin-left
   ============================================================ */
#page-wrapper {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important; /* Override Inspinia's margin-left: 220px */
}

/* ============================================================
   Nav list reset
   ============================================================ */
#side-menu,
#side-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ============================================================
   Nav header  (profile + search area)
   ============================================================ */
li.nav-header {
    /* quividi.css ships margin-bottom: 20px on .nav-header, which shows as
       a dark sidebar-bg stripe between the search bar and the first menu
       item. Override to keep the items flush with the purple cushion. */
    margin-bottom: 0;
    background: var(--vc-sb-active);
    list-style: none;
    overflow: hidden;
}

/* Profile element */
.profile-element {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.profile-element .profile-picture {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    flex-shrink: 0;
}

.profile-element .fa-stack {
    flex-shrink: 0;
    color: var(--vc-sb-text);
}

/* Name / dropdown toggle */
.profile-element .dropdown-toggle {
    color: var(--vc-sb-white) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

/* Search */
.search-container {
    margin-top: 8px;
}

.search-container .form-control {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: transparent !important;
    color: var(--vc-sb-white) !important;
    font-size: 13px;
}

.search-container .form-control::placeholder {
    color: rgba(255, 255, 255, 0.55);
}

.search-container .form-control:focus {
    background: rgba(255, 255, 255, 0.26) !important;
    box-shadow: none;
}

.search-container .input-group-addon {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: transparent !important;
    color: var(--vc-sb-white);
}

/* ============================================================
   Top-level nav items
   ============================================================ */
#side-menu > li > a {
    display: flex !important;
    align-items: center;
    padding: 14px 20px 14px 25px;
    color: var(--vc-sb-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    transition: color 0.15s, background 0.15s;
}

#side-menu > li > a:hover {
    color: var(--vc-sb-white);
    background: var(--vc-sb-hover);
}

/* Active top-level item */
#side-menu > li.active > a,
#side-menu > li > a.active {
    color: var(--vc-sb-white);
    background: var(--vc-sb-active);
}

/* Icons */
#side-menu > li > a > i,
#side-menu > li > a > img {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    font-size: 14px;
    /* Matches the `mr-10` Bootstrap-3-era utility used in markup, so the
       icon→label gap is consistent regardless of class order. */
    margin-right: 10px;
}

/* Home logo is a 16px PNG, narrower than the font icons. */
#side-menu li.menu-home > a > img {
    width: 16px;
}

/* nav-label that wraps to two lines for multi-word items (e.g. "Upgrade Manager"). */
#side-menu .nav-label-narrow {
    width: min-content;
}


/* Text label */
#side-menu > li > a .nav-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Arrow caret — the template uses <span class="fa arrow"> */
#side-menu .fa.arrow {
    flex-shrink: 0;
    margin-left: 4px;
    font-size: 11px;
    transition: transform 0.2s ease;
}

#side-menu .fa.arrow::before {
    content: "\f105"; /* fa-chevron-right */
    font-family: "Font Awesome 7 Pro", "Font Awesome 7 Free", FontAwesome;
    font-weight: 900;
    display: inline-block;
}

/* Rotate caret when submenu is open */
#side-menu > li.menu-open > a .fa.arrow {
    transform: rotate(90deg);
}

/* ============================================================
   Second- and third-level submenus
   ============================================================ */

/* All submenus start hidden — vidicenter-sidebar.js opens the active one. */
#side-menu ul {
    display: none;
    background: var(--vc-sb-active);
}

/* ---------------------------------------------------------------
   Menu items (top-level + submenu) use the same absolute-positioning
   approach as BS3:
   - <li> is position:relative (the positioning context)
   - <a> main link is display:block, full-width
   - <a.btn-add> collapses (padding:0, child is absolute)
   - <span.btn-add> is position:absolute; right:0 (from quividi.css)
     positioned at the right edge of the <li>
   --------------------------------------------------------------- */
#side-menu > li,
#side-menu ul > li {
    position: relative;
}

/* Nav link */
#side-menu ul > li > a:not(.btn-add) {
    min-width: 0;
    display: flex !important;
    align-items: center;
    padding: 8px 10px 8px 35px;
    color: var(--vc-sb-text);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: color 0.15s, background 0.15s;
}

#side-menu ul > li > a:not(.btn-add):hover {
    color: var(--vc-sb-white);
    background: rgba(255, 255, 255, 0.04);
}

#side-menu ul > li.active > a:not(.btn-add),
#side-menu ul > li > a.active {
    color: var(--vc-sb-white);
}

#side-menu ul > li > a:not(.btn-add) > i {
    flex-shrink: 0;
    width: 20px;
    margin-right: 5px;
    font-size: 13px;
    text-align: center;
}

/* + add button — use BS3's original absolute-positioning approach.
   The <a.btn-add> must NOT be position:relative (would steal the
   positioning context from the <li>).  inspinia-bs5-compat.css sets
   #side-menu a { position: relative } — override that here.
   The child <span.btn-add> keeps quividi.css's
   position:absolute; right:0; top:25% so it sits at the <li>'s right edge.
   Applies to both the advanced menu (nested in nav-second-level)
   and the compact menu (buttons at the top level of #side-menu). */
#side-menu li > a.btn-add {
    position: static !important; /* not a positioning context */
    padding: 0 !important; /* collapse — content is absolute */
    height: 0 !important; /* don't take vertical space */
    overflow: visible !important; /* let absolute child show */
    opacity: 0.65;
}

#side-menu li > a.btn-add:hover {
    opacity: 1;
}

/* Icons in .btn-add should be white */
#side-menu li > a.btn-add i {
    color: var(--vc-sb-white) !important;
}

/* Third-level — extra indent */
#side-menu ul ul > li > a:not(.btn-add) {
    padding-left: 48px;
}

/* Subtle separator for .menu-margin items */
li.menu-margin {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Badges inside nav (e.g. "New VR version") */
#side-menu .badge {
    flex-shrink: 0;
    margin-left: 4px;
}

/* ============================================================
   Profile dropdown menu — compact BS3-like styling
   ============================================================ */
.profile-element .dropdown-menu {
    min-width: 160px;
    padding: 4px 0 !important;
    font-size: 13px;
    background-color: #fff !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
    color: #333 !important;
}

.profile-element .dropdown-menu > li > a {
    padding: 2px 15px !important;
    color: #333 !important;
    font-weight: normal !important;
}

.profile-element .dropdown-menu > li > a:hover {
    background-color: #f5f5f5;
    color: #262626 !important;
}

/* ============================================================
   logo-element — Inspinia swaps .profile-element for .logo-element
   in mini-navbar mode (different layout for the profile picture).
   Hidden in full mode, shown in mini mode.
   ============================================================ */
.logo-element {
    display: none;
}

/* ============================================================
   Bottom logo
   ============================================================ */
.logo-element-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--vc-sb-width);
    height: var(--vc-sb-logo-h);
    background: var(--vc-sb-bg);
    padding: 15px 20px;
    border-top: 1px solid var(--vc-sb-border);
    text-align: center;
    box-sizing: border-box;
    transition: width var(--vc-sb-speed) ease;
}

.logo-element-bottom .logo-sm {
    display: none;
}

.logo-element-bottom img {
    max-height: 28px;
    opacity: 0.55;
}

/* ============================================================
   Mini-navbar  (body.mini-navbar = icon-only collapsed mode)
   ============================================================ */
body.mini-navbar nav.navbar-default.navbar-static-side {
    width: var(--vc-sb-mini);
}

body.mini-navbar .sidebar-collapse {
    width: var(--vc-sb-mini);
    overflow: visible !important; /* Let hover submenus escape */
}

body.mini-navbar li.nav-header {
    /* Bottom padding is 0 so the gap to the first menu icon is governed by
       the link's own top padding (matching the rhythm between menu icons). */
    padding: 10px 10px 0;
    text-align: center;
}

/* Swap profile-element for logo-element in mini mode (Inspinia pattern) */
body.mini-navbar .profile-element,
body.mini-navbar .search-container {
    display: none !important;
}

body.mini-navbar .logo-element {
    display: block !important;
}

/* Center icon, hide label and arrow.
   FA7 icons have a tighter line-box than FA5 — bump vertical padding so
   icons don't crowd each other in mini-navbar mode. */
body.mini-navbar #side-menu > li > a {
    padding: 22px 0;
    justify-content: center;
}

body.mini-navbar #side-menu > li > a .nav-label,
body.mini-navbar #side-menu > li > a .fa.arrow,
body.mini-navbar #side-menu > li > a .badge {
    display: none !important;
}

body.mini-navbar #side-menu > li > a > i {
    margin-right: 0;
    font-size: 20px;
    width: auto;
}

body.mini-navbar #side-menu > li > a > img {
    margin-right: 0;
}

/* Submenus float out from the icon on hover */
body.mini-navbar #side-menu > li {
    position: relative;
}

body.mini-navbar #side-menu > li > ul {
    display: none !important;
    position: absolute;
    top: 0;
    left: var(--vc-sb-mini);
    min-width: 190px;
    background: var(--vc-sb-active);
    border-left: 2px solid var(--vc-sb-hover);
    border-radius: 0 4px 4px 0;
    box-shadow: 6px 4px 12px rgba(0, 0, 0, 0.25);
    z-index: 200;
}

body.mini-navbar #side-menu > li:hover > ul {
    display: block !important;
}

/* Logo in mini mode */
body.mini-navbar .logo-element-bottom {
    width: var(--vc-sb-mini);
    padding: 10px 5px;
}

body.mini-navbar .logo-element-bottom .logo-lg {
    display: none;
}

body.mini-navbar .logo-element-bottom .logo-sm {
    display: inline;
}

/* ============================================================
   Mobile sidebar  (body.body-small = viewport < 769px)
   ============================================================ */
@media (max-width: 768px) {
    nav.navbar-default.navbar-static-side {
        position: fixed !important;
        left: 0;
        top: 0;
        height: 100vh !important;
        width: var(--vc-sb-width) !important;
        transform: translateX(-100%);
        transition: transform var(--vc-sb-speed) ease !important;
        z-index: 1000;
    }

    body.sidebar-open nav.navbar-default.navbar-static-side {
        transform: translateX(0);
    }

    /* Hide fixed logo when sidebar is off-screen; show when open */
    .logo-element-bottom {
        display: none !important;
    }

    body.sidebar-open .logo-element-bottom {
        display: block !important;
    }

    /* Dim overlay behind open sidebar */
    body.sidebar-open::before {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        cursor: pointer;
    }

    /* Full-width page on mobile */
    #page-wrapper {
        width: 100% !important;
    }
}