/**
 * CIU Sidebar Redesign
 * Overrides Flexy theme's side-mini-panel layout.
 * FLEXY EXPECTS: 80px iconbar + 240px sidebar = 320px total (see [data-layout=vertical] rules).
 * WE USE: Single 240px sidebar. Must override theme at ALL breakpoints including 1300px.
 * Scoped under .base2-layout.
 */

/* Override Flexy purple to CIU maroon theme - applies to btn-primary, bg-primary, etc. */
body.base2-layout {
  --bs-primary: #a91f2e;
  --bs-primary-rgb: 169, 31, 46;
  --bs-primary-text-emphasis: #6d1822;
  --bs-primary-bg-subtle: rgba(169, 31, 46, 0.15);
  --bs-primary-border-subtle: rgba(169, 31, 46, 0.5);
}

/* Force maroon on all primary buttons and outlines - overrides theme specificity */
body.base2-layout .btn-primary {
  background-color: #a91f2e !important;
  border-color: #a91f2e !important;
  color: #fff !important;
}

body.base2-layout .btn-primary:hover {
  background-color: #8a1926 !important;
  border-color: #8a1926 !important;
  color: #fff !important;
}

body.base2-layout .btn-outline-primary {
  color: #a91f2e !important;
  border-color: #a91f2e !important;
}

body.base2-layout .btn-outline-primary:hover {
  background-color: #a91f2e !important;
  border-color: #a91f2e !important;
  color: #fff !important;
}

body.base2-layout .bg-primary {
  background-color: #a91f2e !important;
}

/* Prevent horizontal scroll - content must fit */
body.base2-layout {
  overflow-x: hidden !important;
}

body.base2-layout #main-wrapper {
  overflow-x: hidden !important;
}

/* Sidebar: fixed at left edge, 275px wide (override Flexy's 80px) */
body.base2-layout #main-wrapper .side-mini-panel {
  width: 275px !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  height: 100vh !important;
  z-index: 99 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Page content: margin-left pushes it right so it sits beside the sidebar (not under it) */
@media (min-width: 992px) {
  body.base2-layout #main-wrapper .page-wrapper {
    margin-left: 275px !important;
    width: calc(100% - 275px) !important;
  }

  /* Topbar: layout only - let theme handle navbar styling */
  body.base2-layout .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 275px !important;
    right: 0 !important;
    width: calc(100% - 275px) !important;
    margin-left: 0 !important;
  }
}

/* Beat Flexy theme's 1300px rules - theme uses width:calc(100% - 320px) for 80+240 layout */
@media (min-width: 1300px) {
  html body.base2-layout #main-wrapper .page-wrapper {
    margin-left: 275px !important;
    width: calc(100% - 275px) !important;
  }

  html body.base2-layout .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 275px !important;
    right: 0 !important;
    width: calc(100% - 275px) !important;
    margin-left: 0 !important;
  }
}

/* Topbar: reduced height */
body.base2-layout .topbar .navbar {
  min-height: 56px !important;
}

body.base2-layout .topbar .navbar .navbar-nav .nav-item .nav-link {
  line-height: 56px !important;
  height: 56px !important;
}

/* Body-wrapper: margin reset, minimal padding-top so content sits just below fixed topbar */
body.base2-layout .body-wrapper {
  margin-left: 0 !important;
  padding-top: 35px !important;
}

body.base2-layout .body-wrapper>.container-fluid {
  padding-top: 0 !important;
}

/* Sidebarmenu: fills panel, aligned left */
body.base2-layout #main-wrapper .side-mini-panel .sidebarmenu {
  width: 100% !important;
  min-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  overflow-x: hidden !important;
  align-items: stretch !important;
  text-align: left !important;
}

/* Sidebar nav: aligned left, no horizontal scroll, no extra padding (brand-logo provides gutter) */
body.base2-layout #main-wrapper .side-mini-panel .sidebarmenu .sidebar-nav {
  position: static !important;
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 0 24px 0 !important;
  height: auto !important;
  min-height: 0 !important;
  top: auto !important;
  flex: 1 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.base2-layout #main-wrapper .side-mini-panel .sidebarmenu .sidebar-menu {
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}

body.base2-layout #main-wrapper .side-mini-panel .sidebarmenu .sidebar-item,
body.base2-layout #main-wrapper .side-mini-panel .sidebarmenu .sidebar-link {
  text-align: left !important;
  justify-content: flex-start !important;
}

/* Sidebar links: maroon theme for hover and active */
body.base2-layout #main-wrapper .side-mini-panel .sidebar-nav .sidebar-link:hover,
body.base2-layout #main-wrapper .side-mini-panel .sidebar-nav .sidebar-item .sidebar-link:hover {
  color: #a91f2e !important;
  background-color: rgba(169, 31, 46, 0.08) !important;
}

body.base2-layout #main-wrapper .side-mini-panel .sidebar-nav .sidebar-link.active,
body.base2-layout #main-wrapper .side-mini-panel .sidebar-nav .sidebar-item .sidebar-link.active,
body.base2-layout #main-wrapper .side-mini-panel .sidebar-nav .sidebar-item.selected>.sidebar-link {
  color: #a91f2e !important;
  background-color: rgba(169, 31, 46, 0.12) !important;
}

/* Scroll-sidebar: no extra padding, brand-logo provides left gutter */
body.base2-layout #main-wrapper .side-mini-panel .scroll-sidebar {
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Main menu visible by default (theme uses display:none for slide-out) */
body.base2-layout #main-wrapper .side-mini-panel .sidebarmenu .sidebar-nav#menu-right-mini-1 {
  display: block !important;
}

/* Mini-sidebar mode: 80px panel */
@media (min-width: 992px) {
  body.base2-layout[data-sidebartype='mini-sidebar'] .side-mini-panel {
    width: 80px !important;
  }

  body.base2-layout[data-sidebartype='mini-sidebar'] #main-wrapper .page-wrapper {
    margin-left: 80px !important;
    width: calc(100% - 80px) !important;
  }

  body.base2-layout[data-sidebartype='mini-sidebar'] .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 80px !important;
    right: 0 !important;
    width: calc(100% - 80px) !important;
    margin-left: 0 !important;
  }
}

/* Mobile: sidebar off-canvas, page full width */
@media (max-width: 991.98px) {
  body.base2-layout #main-wrapper .page-wrapper {
    margin-left: 0 !important;
    width: 100% !important;
  }

  body.base2-layout .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin-left: 0 !important;
  }

  body.base2-layout .topbar .with-vertical {
    width: 100% !important;
    overflow: visible !important;
  }

  body.base2-layout .side-mini-panel.with-vertical {
    position: fixed !important;
    left: 0 !important;
    z-index: 1060 !important;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }

  body.base2-layout .side-mini-panel.with-vertical.show,
  body.base2-layout #main-wrapper.show-sidebar .side-mini-panel.with-vertical {
    transform: translateX(0);
  }

  body.base2-layout .body-wrapper {
    margin-left: 0 !important;
  }

  /* Mobile overlay: covers only content area (not sidebar), close on click */
  body.base2-layout .dark-transparent {
    display: none;
    position: fixed;
    top: 0;
    left: 275px;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
    cursor: pointer;
  }

  body.base2-layout #main-wrapper.show-sidebar~.dark-transparent,
  body.base2-layout.show-sidebar .dark-transparent {
    display: block;
  }

  /* Sidebar close button: black icon */
  body.base2-layout .sidebar-close-mobile {
    color: #000 !important;
  }

  /* Hamburger: ensure clickable on mobile */
  body.base2-layout .sidebar-mobile-toggler {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Fix big left space: theme sets nav-logo and sidebar-nav to left: 80px (for 80px icon bar).
   We use single 240px sidebar - override to left: 0 so menu starts at the edge. */
body.base2-layout #main-wrapper .side-mini-panel .sidebarmenu .nav-logo,
body.base2-layout #main-wrapper .side-mini-panel .sidebarmenu .brand-logo.nav-logo {
  left: 0 !important;
  position: relative !important;
  width: 100% !important;
}

body.base2-layout #main-wrapper .side-mini-panel .sidebarmenu .brand-logo {
  padding-left: 14px !important;
  padding-right: 14px !important;
  margin-left: 0 !important;
}

/* Sidebar logo */
body.base2-layout #main-wrapper .side-mini-panel .sidebar-logo {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.base2-layout #main-wrapper .side-mini-panel .sidebar-logo a:hover {
  color: inherit;
}

body.base2-layout #main-wrapper .side-mini-panel .sidebar-logo-img {
  width: 48px;
  height: 48px;
  min-width: 48px;
  object-fit: contain;
}

body.base2-layout #main-wrapper .side-mini-panel .sidebar-logo-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

body.base2-layout #main-wrapper .side-mini-panel .sidebar-logo-title {
  font-size: 0.8rem;
  color: #800020;
}

/* Sidebar account type badge - maroon theme */
body.base2-layout #main-wrapper .side-mini-panel .sidebar-account-type .badge.bg-maroon {
  background-color: #a91f2e !important;
  color: #fff;
}

body.base2-layout #main-wrapper .side-mini-panel .sidebar-account-type {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

body.base2-layout #main-wrapper .side-mini-panel .sidebar-account-type .badge {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Sidebar header (collapse button area) */
body.base2-layout #main-wrapper .side-mini-panel .sidebar-header {
  flex-shrink: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Collapse button icon rotates when in mini mode */
body.base2-layout[data-sidebartype='mini-sidebar'] .sidebar-collapse-btn iconify-icon {
  transform: rotate(180deg);
}

/* Topbar layout */
body.base2-layout .topbar .with-vertical {
  display: flex;
  align-items: center;
  position: relative;
}

body.base2-layout .topbar .navbar {
  flex: 1;
  justify-content: flex-end;
}

/* Keep hamburger on far left on mobile */
body.base2-layout .topbar .navbar>.navbar-nav:first-child {
  margin-right: auto !important;
}

body.base2-layout .topbar .navbar-collapse {
  justify-content: flex-end;
}

body.base2-layout .topbar .navbar-collapse .d-flex {
  justify-content: flex-end;
  width: 100%;
}

body.base2-layout .topbar .navbar-collapse .navbar-nav {
  margin-left: auto !important;
  margin-right: 0 !important;
}

body.base2-layout .topbar .navbar-collapse .d-flex .navbar-nav.mx-auto {
  margin-left: auto !important;
  margin-right: 0 !important;
}

body.base2-layout .base2-profile-dropdown {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}

body.base2-layout .base2-profile-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.75rem;
  background: rgba(169, 31, 46, 0.1);
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
  border-radius: 50px;
  color: var(--bs-body-color);
  font-weight: 500;
  text-decoration: none;
}

body.base2-layout .base2-profile-trigger:hover {
  background: rgba(169, 31, 46, 0.15);
  color: #a91f2e;
}

body.base2-layout .base2-profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #a91f2e;
  color: #fff;
  font-weight: 600;
  font-size: 0.85rem;
}

body.base2-layout .base2-profile-trigger::after {
  margin-left: 0;
}

body.base2-layout .base2-profile-menu .dropdown-item {
  display: flex;
  align-items: center;
}