/* =====================================
   NAVBAR — CONSOLIDATED & ALIGNED
   ===================================== */

/* ---------- Theme Vars ---------- */
:root{
  /* Layout */
  --sidebar-w: 18rem;
  --left-gutter: 0.35rem;  /* tiny space inside rows before icon */
  --icon-col:   30px;      /* ~35% larger than 22px */
  --text-gap:   0.5rem;    /* gap between icon and text */
  --sub-indent: 0.9rem;    /* extra indent for sub-items */
  --row-min-h:  3em;

  /* Colors */
  --nav-sub-bg:         #fdf9ed;
  --nav-sub-hover-bg:   #fff5e2;
  --nav-sub-text:       #111;
  --nav-sub-divider:    rgba(0,0,0,.12);
  --nav-group-open-bg:  #ffe3b5;
  --nav-group-open-text:#111;

  /* Admin palette (requested behavior) */
  --admin-base-bg:      #c5f3b4; /* rest: light bg */
  --admin-base-color:   #222;    /* rest: dark text */
  --admin-hover-bg:     #9aec7c;    /* hover: dark bg */
  --admin-hover-color:  #000;    /* hover: light text */

  --logout-btn-bg:      #eee;

  /* Marker */
  --marker-w: 0.6rem;

  /* Top nav glow (separate bar) */
  --topnav-glow: 0 0 .55rem rgba(0,0,0,.25);
}

/* ---------- Shell ---------- */
.vertical-nav {
  min-width: var(--sidebar-w);
  width: var(--sidebar-w);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  padding-right: 1em;
  box-shadow: 3px 3px 10px rgba(0,0,0,.1);
  transition: all .4s;
  overflow: auto;
  z-index: 1030; /* moved here, avoid duplicate block later */
}


.page-content {
  width: calc(100% - var(--sidebar-w));
  margin-left: var(--sidebar-w);
  transition: all .4s;
  position: relative;
  overflow: visible; /* keep sticky happy */
}
/* Sidebar toggle */
#sidebar.active { margin-left: calc(-1 * (var(--sidebar-w) - 1rem)); }
#content.active { width: 100%; margin: 0; }

/* Responsive */
@media (max-width: 992px) {
  #sidebar { margin-left: calc(-1 * var(--sidebar-w)); }
  #sidebar.active { margin-left: 0; }
  #content { width: 100%; margin: 0; }
  #content.active {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
  }
}

/* Utilities */
.separator { margin: 3rem 0; border-bottom: 1px dashed #fff; }
.text-uppercase { letter-spacing: 0.1em; }
.text-gray { color: #aaa; }

#navbar { height: 100vh; overflow: auto; }
#left-column, #right-column { overflow: auto; }

.navLogo {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  flex: 0;
  padding: .9em .1em .2em 1.6em;
}

/* ---------- Core Menu ---------- */
#navMenu {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  flex: 1;
  max-height: 67em;
  align-items: stretch;

  /* bring back room before the screen edge */
  padding-left: 1em;
}

#navMenu > li {
  flex: 0 0 auto;
  border-top: 1px solid;
  min-height: var(--row-min-h);
}

/* =====================================
   GRID ALIGNMENT for ALL ROW TYPES
   ===================================== */

/* Reset any legacy left padding; grid aligns everything */
.vertical-nav li,
#navMenu > li.nav-group .nav-group-head,
#navMenu > li.nav-group > .nav-sub > li { padding-left: 0 !important; }

/* Anchors: keep flex so the right-side marker stays at the edge */
#navMenu > li > a,
#navMenu > li.nav-group .nav-group-toggle,
#navMenu > li.nav-group > .nav-sub > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0 !important;
  text-decoration: none;
  color: inherit;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Top-level (non-group) rows: Dashboard, Church History, Admin items, etc. */
#navMenu > li:not(.nav-group) {
  display: grid;
  grid-template-columns: var(--left-gutter) var(--icon-col) 1fr;
  column-gap: var(--text-gap);
  align-items: center;
}

/* Group headers (Membership / Financial / Facility) */
#navMenu > li.nav-group > .nav-group-head {
  display: grid;
  grid-template-columns: var(--left-gutter) var(--icon-col) 1fr;
  column-gap: var(--text-gap);
  align-items: center;
  min-height: var(--row-min-h);
}

/* Group sub-rows (accordion items) */
#navMenu > li.nav-group > .nav-sub > li {
  display: grid;
  grid-template-columns: calc(var(--left-gutter) + var(--sub-indent)) var(--icon-col) 1fr;
  column-gap: var(--text-gap);
  align-items: center;
  min-height: calc(var(--row-min-h) - .25em);
  border-top: 1px solid currentColor;
  background-color: var(--nav-sub-bg);
  color: var(--nav-sub-text);
}

/* Admin-only rows: light base (dark text) → dark hover (light text) */
#navMenu > li.admin {
  display: grid !important;
  grid-template-columns: var(--left-gutter) var(--icon-col) 1fr;
  column-gap: var(--text-gap);
  align-items: center;
  background-color: var(--admin-base-bg) !important;
  color: var(--admin-base-color) !important;
  min-height: 2.2em;
}
#navMenu > li.admin:hover {
  background-color: var(--admin-hover-bg) !important;
  color: var(--admin-hover-color) !important;
}
#navMenu > li.admin > a.navLink { color: inherit; }
#navMenu > li.admin > a.navLink:hover { background: transparent !important; color: inherit; }

/* Put SVGs in the icon column; normalize sizing */
#navMenu > li:not(.nav-group) > svg,
#navMenu > li.nav-group > .nav-group-head > svg,
#navMenu > li.nav-group > .nav-sub > li > svg,
#navMenu > li.admin > svg {
  grid-column: 2;
  width: var(--icon-col) !important; /* beats inline width="24" */
  height: auto;
  max-width: 100%;
  flex: 0 0 var(--icon-col);
}

/* Titles live in the third column */
#navMenu > li > a,
#navMenu > li.nav-group > .nav-group-head > a,
#navMenu > li.nav-group > .nav-sub > li > a,
#navMenu > li.admin > a.navLink {
  grid-column: 3;
}

/* ---------- Active Marker (inside the anchor) ---------- */
/* default: shrink marker unless link is the active page */
#navMenu .marker { width: 0; height: 100%; }

/* show marker ONLY on the actual active page link
   - top-level links
   - sub-items
   exclude group headers to avoid “double marker”
   Support: .active, aria-current="page", or .current-link on <li> */
#navMenu > li:not(.nav-group) > a.active .marker,
#navMenu > li:not(.nav-group) > a[aria-current="page"] .marker,
#navMenu > li:not(.nav-group).current-link > a .marker,
#navMenu > li.nav-group > .nav-sub > li > a.active .marker,
#navMenu > li.nav-group > .nav-sub > li > a[aria-current="page"] .marker,
#navMenu > li.nav-group > .nav-sub > li.current-link > a .marker {
  width: var(--marker-w);
  background-color: #e9a521;
  align-self: stretch;
  margin-left: auto; /* push to right edge */
}
/* never show marker on group headers */
#navMenu > li.nav-group > .nav-group-head .marker { width: 0 !important; }

/* ---------- Hover behaviors ---------- */
/* Top-level rows: whole row highlight */
#navMenu > li:not(.nav-group):hover { background-color: rgba(0,0,0,.06); }
#navMenu > li:not(.nav-group) > a:hover { background: transparent !important; }

/* Sub-items: whole <li> highlights (not just the label) */
#navMenu > li.nav-group > .nav-sub > li:hover { background-color: var(--nav-sub-hover-bg); }
#navMenu > li.nav-group > .nav-sub > li > a:hover { background: transparent !important; }

/* Group headers: full bar hover on container; anchor stays transparent */
#navMenu > li.nav-group > .nav-group-head:hover { background-color: rgba(0,0,0,.06) !important; }
#navMenu > li.nav-group > .nav-group-head > a:hover { background: transparent !important; }

/* =====================================
   ACCORDION GROUPS
   ===================================== */

#navMenu > li.nav-group {
  display: block;
  overflow: visible;
  padding-left: 0;
  border-top: 1px solid;
}

/* Header link inside the group bar */
#navMenu > li.nav-group .nav-group-toggle { background: transparent !important; }

/* Group open state */
#navMenu > li.nav-group.expanded > .nav-group-head {
  background-color: var(--nav-group-open-bg);
  color: var(--nav-group-open-text);
}
#navMenu > li.nav-group.expanded > .nav-group-head a { color: inherit; }

/* Submenu container */
#navMenu > li.nav-group > .nav-sub {
  display: none;
  padding-left: 0;
  border-top: 1px solid var(--nav-sub-divider);
}
#navMenu > li.nav-group.expanded > .nav-sub { display: block; }

/* Prevent whole group block highlight; use row-level highlights only */
.vertical-nav #navMenu > li.nav-group:hover { background: transparent !important; }

/* =====================================
   FINANCES: “New Deposit” always visible
   ===================================== */

/* Keep sublist mounted so "New Deposit" can live there */
#group-finances > .nav-sub { display: block !important; }

/* Collapsed: show only the always-visible row; hide others */
#group-finances:not(.expanded) > .nav-sub > li:not(.always-visible) {
  display: none !important;
}

/* Ensure the always-visible row uses the grid layout */
#group-finances > .nav-sub > li.always-visible {
  display: grid !important;
}

/* Expanded: show everything with grid layout */
#group-finances.expanded > .nav-sub {
  display: flex !important;
  flex-direction: column;
}
#group-finances.expanded > .nav-sub > li {
  display: grid !important;
  order: 3; /* default */
}
#group-finances.expanded > .nav-sub > li.finance-dashboard { order: 1; }
#group-finances.expanded > .nav-sub > li.always-visible   { order: 2; }

/* Keep collapsed sublist background clean except the pinned row */
#group-finances:not(.expanded) > .nav-sub {
  background: transparent !important;
  border-top: none !important;
}
#group-finances:not(.expanded) > .nav-sub > li.always-visible {
  background: transparent !important;
  border-top: 1px solid currentColor;
}
#group-finances:not(.expanded) > .nav-sub > li.always-visible > a {
  color: inherit !important;
}
/* Hover for pinned "New Deposit" row when FINANCES is collapsed */
#group-finances:not(.expanded) > .nav-sub > li.always-visible:hover {
  background-color: rgba(0,0,0,.06) !important; /* match top-level hover */
}

/* (Explicit) hover when FINANCES is expanded */
#group-finances.expanded > .nav-sub > li.always-visible:hover {
  background-color: var(--nav-sub-hover-bg) !important; /* match sub-item hover */
}


/* =====================================
   TOP NAVBAR (separate bar at the top)
   ===================================== */
#topNav .nav-item,
#topNav .nav-link {
  background: transparent !important;
  box-shadow: none !important;
  transition: text-shadow .15s ease, color .15s ease;
}
#topNav .nav-link:hover,
#topNav .nav-link:focus,
#topNav .nav-link:focus-visible {
  background: transparent !important;
  text-shadow: var(--topnav-glow);
  outline: none;
}
#topNav .nav-link.active,
#topNav .nav-link:active {
  background: transparent !important;
  box-shadow: none !important;
}

/* Logout pill in top nav (separate top bar) */
.logoutbtn {
  font-size: 12px;
  font-weight: 700;
  background-color: var(--logout-btn-bg) !important;
}

/* ===== Auto-density for the sidebar (no scrollbar) ===== */

/* Base (already your normal sizes) */
#navMenu { font-size: var(--row-font-size, 1rem); }
:root {
  --row-font-size: 1rem;
  --row-pad-y: .35rem;        /* vertical padding inside anchors */
}

/* Apply vertical padding to the clickable area */
#navMenu > li > a,
#navMenu > li.nav-group > .nav-group-head > a,
#navMenu > li.nav-group > .nav-sub > li > a {
  padding-block: var(--row-pad-y);
}

/* Compact tier (first step) */
#sidebar.nav-compact {
  --row-font-size: .95rem;
  --row-min-h: 2.35em;
  --row-pad-y: .15rem;
  --icon-col: 26px;           /* was 30px; shave a bit in compact */
  --left-gutter: .25rem;
  --sub-indent: .6rem;
}

/* Ultra-compact (second step, only if still overflowing) */
#sidebar.nav-ultra {
  --row-font-size: .90rem;
  --row-min-h: 2.10em;
  --row-pad-y: .10rem;
  --icon-col: 24px;
  --left-gutter: .20rem;
  --sub-indent: .45rem;
}

/* Make sure min-heights actually follow the variable */
#navMenu > li { min-height: var(--row-min-h); }
#navMenu > li.nav-group > .nav-group-head { min-height: var(--row-min-h); }
#navMenu > li.nav-group > .nav-sub > li { min-height: calc(var(--row-min-h) - .35em); }


/* --- TOP BAR & SIDEBAR STACKING / STICKY FIXES --- */

/* Make sure the sticky bar sits at the top and has a solid background */
#topbar .navbar {
  position: sticky;    /* bootstrap .sticky-top does this, but we enforce it */
  top: 0;
  z-index: 1020;       /* below the sidebar so its shadow can overlap */
  background-color: var(--bs-body-bg, #fff) !important; /* solid bg so content doesn't show through */
  box-shadow: 0 1px 6px rgba(0,0,0,.08); /* soft shadow for top bar itself */
}

/* If you want to be extra-safe, keep the top nav offset helper class around: */
.topbar-offset {
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
}

/* --- Top bar look & feel --- */
:root {
  --topbar-bg: #e8f2ff; /* light blue */
  --topbar-shadow: 0 1px 6px rgba(0,0,0,.08);
}

/* Ensure sticky + solid bg + proper stacking */
#topbar .navbar {
  position: sticky;   /* sticky-top also sets this, we reinforce */
  top: 0;
  z-index: 1020;
  background-color: var(--topbar-bg) !important;  /* light blue */
  box-shadow: var(--topbar-shadow);
}

/* Keep the sidebar above so its shadow overlaps the top bar neatly */
.vertical-nav { z-index: 1030; }

/* Make sure no wrapper kills sticky */
#topbar,        /* your wrapper around the nav */
#content,       /* main content wrapper */
.page-content { /* generic wrapper */
  overflow: visible !important;
}
  /* --- Sticky top bar: kill overflow on ancestors & restore look --- */
/* ===== TOP BAR: harden sticky & restore look ===== */

/* The wrapper itself is sticky (avoids inner overflow/transform issues) */
#topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1020 !important;   /* under the sidebar (1030) so its shadow can overlap */
  background-color: #e8f2ff !important;   /* light blue */
  box-shadow: 0 1px 6px rgba(0,0,0,.08) !important;
}

/* Kill scroll/clip on likely ancestors so sticky can work */
#topbar,
#content,
.page-content {
  overflow: visible !important;
}

/* Make sure nothing makes #content a scroller */
#content {
  height: auto !important;
  max-height: none !important;
}

/* Sidebar remains above so its shadow shows over the top bar edge */
.vertical-nav { z-index: 1030 !important; }
/* ===== Topbar width/offset reacts to sidebar state ===== */

/* Desktop: sidebar visible by default */
#topbar {
  margin-left: var(--sidebar-w);
  width: calc(100% - var(--sidebar-w));
  transition: margin-left .25s ease, width .25s ease;
}

/* Desktop: when sidebar is collapsed (sidebar gets .active), expand topbar */
#sidebar.active ~ #topbar {
  margin-left: 1rem;                      /* keep the 1rem gutter you used */
  width: calc(100% - 1rem);
}

/* Mobile/tablet: sidebar hidden by default; topbar is full-width */
@media (max-width: 992px) {
  #topbar {
    margin-left: 0;
    width: 100%;
  }
  /* When sidebar is shown (sidebar gets .active), shift/narrow the topbar */
  #sidebar.active ~ #topbar {
    margin-left: var(--sidebar-w);
    width: calc(100% - var(--sidebar-w));
  }
}