/* ==========================================================================
   RGUKT Hub — sidebar theme (AdminLTE 4 / Bootstrap 5)
   Theme: Dark navy sidebar · Vivid blue active · White content area
   ========================================================================== */

:root {
  /* sidebar palette */
  --hub-sb-bg:          #1c1c2e;   /* dark background */
  --hub-sb-bg2:         #151525;   /* deeper shade for sub-items */
  --hub-sb-border:      #2e2e45;   /* subtle divider */
  --hub-sb-text:        #d8d8e8;   /* default nav text */
  --hub-sb-text-muted:  #9898b8;   /* section headers / icons */

  /* active/hover palette — RGUKT maroon + gold accent */
  --hub-accent:         #9b280a;    /* maroon — hover background */
  --hub-accent-hover:   rgba(155,40,10,.20);
  --hub-accent-active:  rgba(155,40,10,.28);
  --hub-gold:           #b45309;    /* amber-gold — active border + leaf highlight */

  /* brand bar — maroon */
  --hub-brand:          #7b1a0a;
  --hub-brand-dark:     #5a1008;

  /* content area */
  --hub-text:           #111827;
  --hub-text-muted:     #6b7280;
  --hub-divider:        #e5e7eb;
}

/* ── Sidebar shell ─────────────────────────────────────────────────────── */
.hub-sidebar.app-sidebar {
  background: var(--hub-sb-bg) !important;
  border-right: 1px solid var(--hub-sb-border);
  /* Flex column so the scroll area fills exactly (sidebar height − brand bar).
     100dvh (with 100vh fallback) avoids the mobile URL-bar 100vh overflow. */
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
}
.hub-sidebar .sidebar-brand { flex: 0 0 auto; }

/* ── Brand bar ─────────────────────────────────────────────────────────── */
.hub-sidebar .sidebar-brand {
  background-color: var(--hub-brand) !important;
  border-bottom: 1px solid var(--hub-brand-dark);
}
.hub-sidebar .sidebar-brand .brand-link,
.hub-sidebar .sidebar-brand .brand-text {
  color: #fff !important;
  letter-spacing: .02em;
}

/* ── Logged-in user strip ─────────────────────────────────────────────── */
.hub-sidebar .sidebar-user {
  border-bottom: 1px solid var(--hub-sb-border);
  background: var(--hub-sb-bg) !important;
}
.hub-sidebar .sidebar-user .fw-semibold {
  color: #e2e8f0 !important;
}
.hub-sidebar .sidebar-user small {
  color: var(--hub-sb-text-muted) !important;
}
.hub-sidebar .sidebar-user .bi-person-circle {
  color: #c0c0d8 !important;
}

/* ── Section headers (nav-header) ─────────────────────────────────────── */
.hub-sidebar .nav-header {
  color: var(--hub-sb-text-muted) !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
  padding: .8rem 1rem .2rem;
  border-top: 1px solid var(--hub-sb-border);
  margin-top: .2rem;
  text-transform: uppercase;
}

/* ── Menu items base ──────────────────────────────────────────────────── */
.hub-sidebar .sidebar-menu .nav-link {
  color: var(--hub-sb-text);
  border-radius: 6px;
  margin: 1px 8px;
  padding: .44rem .75rem;
  transition: background .15s ease, color .15s ease, border-left-color .1s ease;
}
.hub-sidebar .sidebar-menu .nav-link .nav-icon {
  color: #c0c0d8;
  transition: color .15s ease;
  width: 1.25rem;
  text-align: center;
}
.hub-sidebar .sidebar-menu .nav-link p {
  display: inline-block;
  margin-left: .35rem;
  font-size: .875rem;
  color: #e0e0f0;
}
.hub-sidebar .sidebar-menu .nav-link .nav-arrow {
  color: #7b90b8;
}

/* ── Hover / focus ────────────────────────────────────────────────────── */
.hub-sidebar .sidebar-menu .nav-link:hover,
.hub-sidebar .sidebar-menu .nav-link:focus {
  background-color: var(--hub-accent-hover);
  color: #fff;
}
.hub-sidebar .sidebar-menu .nav-link:hover .nav-icon,
.hub-sidebar .sidebar-menu .nav-link:focus .nav-icon {
  color: var(--hub-accent);
}

/* ── Open parent (section containing current page) ────────────────────── */
.hub-sidebar .sidebar-menu > .nav-item.menu-open > .nav-link,
.hub-sidebar .sidebar-menu > .nav-item > .nav-link.active {
  background-color: var(--hub-accent-active);
  color: #fff;
  border-left: 3px solid var(--hub-gold);
  padding-left: calc(.75rem - 3px);
  font-weight: 600;
}
.hub-sidebar .sidebar-menu > .nav-item.menu-open > .nav-link .nav-icon,
.hub-sidebar .sidebar-menu > .nav-item > .nav-link.active .nav-icon {
  color: var(--hub-gold);
}

/* ── Active leaf (exact current page inside treeview) ─────────────────── */
.hub-sidebar .nav-treeview .nav-link.active {
  background-color: var(--hub-gold) !important;
  color: #fff !important;
  font-weight: 600;
  border-radius: 6px;
}
.hub-sidebar .nav-treeview .nav-link.active .nav-icon {
  color: #fff !important;
}

/* ── Treeview sub-items ───────────────────────────────────────────────── */
.hub-sidebar .nav-treeview {
  background: var(--hub-sb-bg2);
  border-left: 2px solid #5a2a20;
  margin-left: 1.1rem;
  border-radius: 0 0 6px 6px;
}
.hub-sidebar .nav-treeview .nav-link {
  color: #d0d0e4;
  padding-left: 1rem;
  font-size: .855rem;
  margin: 0 4px;
}
.hub-sidebar .nav-treeview .nav-link:hover {
  color: #fff;
  background-color: var(--hub-accent-hover);
}

/* ── Sidebar scroll indicator ─────────────────────────────────────────── */
.hub-sidebar .sidebar-wrapper {
  scrollbar-color: #7b2010 transparent;
  scrollbar-width: thin;
  /* Override AdminLTE's fixed `height: calc(100vh - navbar)` (which ignores the
     brand bar and clips the last nav items on mobile). Let flex size it and
     scroll natively with touch momentum. */
  height: auto !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.hub-sidebar .sidebar-wrapper::-webkit-scrollbar { width: 4px; }
.hub-sidebar .sidebar-wrapper::-webkit-scrollbar-thumb {
  background: #7b2010;
  border-radius: 4px;
}

/* ── Top navbar ───────────────────────────────────────────────────────── */
.app-header.navbar {
  border-bottom: 1px solid var(--hub-divider);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* ==========================================================================
   In-page nav-pills — on-theme blue
   ========================================================================== */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--hub-accent);
  font-weight: 600;
}
.nav-pills .nav-link:not(.active):hover {
  color: var(--hub-accent);
  background-color: rgba(59,130,246,.08);
}

/* ==========================================================================
   Utility — py4web grid thead (black, matches Bootstrap table-dark used on
   non-grid tables app-wide)
   ========================================================================== */
.card .grid-wrapper thead th {
  background-color: #212529 !important;
  color: #fff !important;
}
.card .grid-wrapper thead th a,
.card .grid-wrapper thead th a:link,
.card .grid-wrapper thead th a:visited,
.card .grid-wrapper thead th a:hover {
  color: #fff !important;
  text-decoration: none;
}

/* ==========================================================================
   "You are here" pulse ring on the active sidebar item
   (reinforces position when scrolled into view)
   ========================================================================== */
.hub-sidebar .nav-treeview .nav-link.active::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--hub-gold);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  animation: activePulse 2s ease-in-out infinite;
}
@keyframes activePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .35; }
}