/*
 * VidiCenter Sidebar — Bootstrap 5 native
 *
 * Replaces Inspinia's navbar-static-side CSS from quividi-style.min.css
 * and the metisMenu jQuery plugin.
 *
 * Load AFTER quividi-style.min.css so overrides win cleanly.
 * Will absorb inspinia-bs5-compat.css sidebar rules in a future cleanup.
 */

/* ============================================================
   Custom properties (edit here to retheme)
   ============================================================ */
:root {
  --vc-sb-width:      220px;
  --vc-sb-mini:        70px;
  /* 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%;
}

/* ============================================================
   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 {
  width: var(--vc-sb-width);
  height: 100vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
  transition: width var(--vc-sb-speed) ease;
  display: flex;
  flex-direction: column;
  /* Kill Inspinia's slimScroll overflow override */
  overflow: auto !important;
  /* Clear the fixed-position logo at the bottom */
  padding-bottom: 65px;
}

/* ============================================================
   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 {
  padding: 15px 20px 10px 25px;
  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;
  margin-right: 6px;
}

/* 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 5 Pro", "Font Awesome 5 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: fixed !important;
  bottom: 0;
  left: 0;
  width: var(--vc-sb-width);
  background: var(--vc-sb-bg);
  padding: 15px 20px;
  border-top: 1px solid var(--vc-sb-border);
  text-align: center;
  z-index: 3;   /* Above sidebar content */
  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 {
  padding: 10px;
  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 */
body.mini-navbar #side-menu > li > a {
  padding: 14px 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: 22px;
  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;
  }
}