/* Sierra Leone Flag Theming & Responsive Sidebar */
:root {
  --sl-green: #1eb53a;
  --sl-blue: #0072c6;
  --sl-white: #ffffff;
  --sl-gradient: linear-gradient(90deg, #1eb53a, #0072c6);
  --sl-gradient-vert: linear-gradient(
    180deg,
    #1eb53a 0%,
    #1eb53a 35%,
    #0072c6 35%,
    #0072c6 100%
  );
}

.navbar.flag-theme {
  background: var(--sl-gradient) !important;
}
.navbar.flag-theme .navbar-brand,
.navbar.flag-theme .nav-link,
.navbar.flag-theme .btn {
  color: #fff !important;
}

/* Generic fixed-top offset helper so first row content never hides under nav */
body.has-fixed-navbar .main-content,
body.has-fixed-navbar main,
body.has-fixed-navbar .content-root {
  padding-top: calc(var(--navbar-offset, 72px));
}
/* Safety: ensure immediate child sections aren't clipped */
body.has-fixed-navbar .main-content > .content-section:first-child,
body.has-fixed-navbar main > .content-section:first-child {
  margin-top: 0.5rem;
}

/* Ensure a default variable if not supplied */
body.has-fixed-navbar {
  --navbar-offset: 72px;
}

.sidebar.flag-theme {
  background: var(--sl-gradient-vert);
  color: #fff;
}
.sidebar.flag-theme .nav-link {
  color: #fff !important;
}
.sidebar.flag-theme .nav-link.active,
.sidebar.flag-theme .nav-link:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

/* Mobile slide-in (apply to any sidebar) */
@media (max-width: 991.98px) {
  .sidebar {
    position: fixed;
    top: var(--navbar-offset, 66px);
    left: 0;
    width: 240px;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    padding-top: 0.75rem;
    z-index: 1045;
    height: calc(100vh - var(--navbar-offset, 66px));
    overflow-y: auto;
    background: #ffffff;
  }
  body.theme-dark .sidebar {
    background: #12151b;
  }
  .sidebar.show {
    transform: translateX(0);
  }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1040;
    display: none;
  }
  body.sidebar-open .sidebar-backdrop {
    display: block;
  }
  .main-content {
    padding-top: calc(var(--navbar-offset, 66px) + 8px);
  }
}

/* Utility buttons */
#sidebarToggleBtn {
  border: none;
  background: rgba(255, 255, 255, 0.15);
}
#sidebarToggleBtn:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* Adjust main content spacing */
@media (min-width: 992px) {
  .sidebar {
    top: var(--navbar-offset, 66px);
    padding-top: 0.75rem;
    height: calc(100vh - var(--navbar-offset, 66px));
  }
  .main-content {
    padding-top: calc(var(--navbar-offset, 66px) + 12px);
  }
}
