/* app/static/css/nav.css
   Top-nav hover popouts + admin sidebar accordion styles.
   Loaded globally by base.html. Sidebar rules are inert on non-admin pages. */

/* ── Top nav: hover-reveal dropdowns on desktop ────────────────────────── */
/*
 * _nav_bar.html now sets data-bs-display="static" on every dropdown toggle
 * which tells Bootstrap to skip Popper entirely.  The CSS rules below are
 * therefore the ONLY positioning authority on desktop.
 *
 * We keep the !important overrides as a safety net for any programmatic
 * open that bypasses data-bs-display="static".
 *
 * Key fix (vs. prior version): a dedicated .dropdown-menu-end rule forces
 * left:auto + right:0 — without it Popper's inline left:Xpx survives if
 * the dropdown was ever click-opened first and beats Bootstrap's right:0.
 *
 * Hover technique: :hover + :focus-within; a ::after pseudo-element bridges
 * the vertical gap so the mouse can travel from link → menu without dropout.
 */
@media (min-width: 992px) {

  /* li must be position:relative so children are contained */
  .navbar-nav .nav-item.dropdown {
    position: relative;
  }

  /* ── Base positioning (all dropdowns) ───────────────────────────────── */
  .navbar-nav .nav-item.dropdown > .dropdown-menu {
    position:   absolute !important;
    top:        100%     !important;   /* flush under navbar link          */
    transform:  none     !important;   /* cancel any Popper translate()    */
    margin-top: 0        !important;
    z-index:    1041     !important;
    pointer-events: auto;
  }

  /* ── Reveal on hover and keyboard focus-within ──────────────────────── */
  .navbar-nav .nav-item.dropdown:hover        > .dropdown-menu,
  .navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu {
    display:    block   !important;
    visibility: visible !important;
    opacity:    1       !important;
    animation: navFadeIn 0.12s ease-out;
  }

  /* ── Right-align end-dropdowns (e.g. Admin) ─────────────────────────── */
  /* Popper sets left:Xpx inline which beats Bootstrap's right:0 on       */
  /* .dropdown-menu-end.  Force both sides explicitly.                     */
  .navbar-nav .nav-item.dropdown:hover        > .dropdown-menu.dropdown-menu-end,
  .navbar-nav .nav-item.dropdown:focus-within > .dropdown-menu.dropdown-menu-end {
    left:  auto !important;
    right: 0    !important;
  }

  /* ── Hover bridge ───────────────────────────────────────────────────── */
  /* Invisible pseudo-element bridges the gap between trigger bottom and   */
  /* menu top; prevents mouseout when moving the cursor downward.          */
  .navbar-nav .nav-item.dropdown::after {
    content:    '';
    display:    block;
    position:   absolute;
    left:       0;
    right:      0;
    top:        100%;
    height:     12px;  /* slightly taller — more forgiving mouse travel    */
    background: transparent;
    pointer-events: auto;
  }
}

@keyframes navFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Navbar dropdown z-index fix ────────────────────────────────────────────
   The admin sidebar sits at z-index: 100 (sticky column).  Bootstrap's
   .dropdown-menu default z-index is 1000, but when the sidebar's stacking
   context is in play the menu can render behind it.  This rule forces ALL
   .dropdown-menu elements inside .navbar above the sidebar at every viewport
   width — including mobile where the @media (min-width: 992px) block above
   does not apply.  1055 matches Bootstrap's modal z-index tier and is safely
   above the sidebar (100), page content, and the navbar itself (1030).       */
.navbar .dropdown-menu {
  z-index: 1055 !important;
}

/* ── Admin sidebar: accordion buttons ──────────────────────────────────── */
/* OPEN IS NOT SELECTED.  The expanded parent used to take a blue tint
   (rgba(13,110,253,0.06)) one step lighter than the current leaf's 0.14 and
   the hover 0.08 — three near-identical blues stacked in one column, which is
   why a parent, or a merely hovered sibling, read as "you are here".  The
   parent now says OPEN in weight and a neutral rule; only ONE thing in the
   sidebar is ever painted primary-blue, and that is the current page. */
.sidebar-section-btn {
  /* BODY SIZE, NOT A "SIDEBAR SIZE".  This column used to run 13px nested,
     14px for a leaf and 16px for the page beside it -- a reader moving from
     the tree to the table changed size twice.  The sidebar is navigation,
     not a footnote, so it is the app's ordinary text: Bootstrap's 1rem,
     which nothing in this app overrides on `body`. */
  font-size: 1rem;
  font-weight: 600;
  color: #495057;
  box-shadow: none !important;
}

/* `sidebar-section-open` is written by the template alongside Bootstrap's
   :not(.collapsed); both are matched so the paint is right even mid-animation,
   before Bootstrap has finished swapping .collapsed. */
.sidebar-section-btn:not(.collapsed),
.sidebar-section-btn.sidebar-section-open {
  color: #212529;
  background-color: transparent !important;
  box-shadow: inset 2px 0 0 #ced4da !important;
}

.sidebar-section-btn:focus:not(:focus-visible) {
  color: #495057;
}

.sidebar-section-btn:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
}

.sidebar-section-btn::after {
  /* Keep Bootstrap's chevron but make it smaller */
  width: 0.9rem;
  height: 0.9rem;
  background-size: 0.9rem;
}

/* ── Admin sidebar: child links ─────────────────────────────────────────── */
.sidebar-child-link,
.sidebar-direct-link {
  font-size: 1rem;       /* body size -- see .sidebar-section-btn above */
  color: #495057;
  display: block;
  border-radius: 4px;
  border-left: 3px solid transparent;   /* reserved so nothing shifts on select */
  transition: background-color 0.1s, color 0.1s;
}

/* HOVER IS NEUTRAL, ON PURPOSE.  A blue hover a shade off the selected blue is
   indistinguishable at 14px, so pointing at a link used to look like being on
   it.  Grey says "clickable"; blue is reserved for "current". */
.sidebar-child-link:hover,
.sidebar-direct-link:hover {
  background-color: rgba(0, 0, 0, 0.045);
  color: #212529;
  text-decoration: none;
}

/* FOCUS MUST NOT LOOK SELECTED.  A clicked link keeps :focus when the browser
   restores the page from bfcache (back button), and Bootstrap's .nav-link:focus
   paints it blue — so the last link you clicked went on looking current on a
   page it does not own.  Mouse focus is painted back to rest; keyboard focus
   gets a real ring and no fill, so it can never be mistaken for selection. */
.sidebar-child-link:focus:not(:focus-visible),
.sidebar-direct-link:focus:not(:focus-visible) {
  background-color: transparent;
  color: #495057;
}

.sidebar-child-link:focus-visible,
.sidebar-direct-link:focus-visible {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
  background-color: transparent;
  color: #212529;
}

/* THE ONE CURRENT-PAGE CLASS.  Written only on the leaf whose href owns the
   request path (nav_service._link_is_active); a parent accordion never gets
   it.  Deliberately NOT Bootstrap's generic `.active`, which other components
   set for their own reasons — this class means exactly one thing. */
.sidebar-child-link.sidebar-link-current,
.sidebar-direct-link.sidebar-link-current {
  background-color: rgba(13, 110, 253, 0.14);
  border-left-color: var(--bs-primary);
  color: var(--bs-primary);
  font-weight: 600;
}

/* Current wins over hover and focus — pointing at the page you are on must not
   repaint it as though it were merely hoverable. */
.sidebar-child-link.sidebar-link-current:hover,
.sidebar-child-link.sidebar-link-current:focus,
.sidebar-direct-link.sidebar-link-current:hover,
.sidebar-direct-link.sidebar-link-current:focus {
  background-color: rgba(13, 110, 253, 0.14);
  color: var(--bs-primary);
}

/* ── Admin sidebar: overview link (small, bottom of each section) ───────── */
/* SECONDARY BY COLOUR, NOT BY SIZE.  This link used to be 13px so it read
   as lesser than the leaves above it.  It now matches them, and says
   "secondary" the way the rest of this column does: muted grey, behind a
   rule.  A size scale inside one nav tree only makes the deepest thing --
   usually the thing you are looking for -- the hardest to read. */
.sidebar-overview-link {
  font-size: 1rem;
  color: #6c757d;
  border-top: 1px solid #dee2e6;
  margin-top: 0.25rem;
  padding-top: 0.25rem !important;
}

.sidebar-overview-link:hover,
.sidebar-overview-link.sidebar-link-current {
  color: var(--bs-primary);
  background-color: transparent;
}

/* ── Overview card grid hover shadow ────────────────────────────────────── */
.overview-card {
  transition: box-shadow 0.15s, transform 0.1s;
}

.overview-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.overview-card-icon {
  width: 2.5rem;
  text-align: center;
}

/* ── Navigation Manager: inline flag toggle badges ──────────────────────── */
.btn-flag-toggle {
  cursor: pointer;
  border: none;
  font-size: 0.7rem;
  padding: 0.2em 0.5em;
  line-height: 1.4;
  transition: opacity 0.15s, filter 0.15s;
}

.btn-flag-toggle:hover {
  filter: brightness(0.88);
  opacity: 0.9;
}

.btn-flag-toggle:focus {
  outline: 2px solid rgba(13, 110, 253, 0.4);
  outline-offset: 1px;
}


/* ── Nested dropdown sub-menus (dropdown_depth >= 2) ────────────────────── */
/* .dropdown-submenu is used for second-level (and deeper) items in the top  */
/* nav.  Sub-menus fly out to the right of the parent item.                  */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  display:    none;
  position:   absolute;
  top:        0;
  left:       100%;
  min-width:  10rem;
  margin-top: -2px;
  border-radius: 0 4px 4px 4px;
  z-index:    1042;
}

.dropdown-submenu:hover > .dropdown-menu,
.dropdown-submenu:focus-within > .dropdown-menu {
  display: block;
}

/* Right-pointing chevron for sub-menu triggers */
.dropdown-submenu > .dropdown-toggle::after {
  display:      inline-block;
  margin-left:  0.4em;
  vertical-align: middle;
  border-top:   0.3em solid transparent;
  border-bottom: 0.3em solid transparent;
  border-left:  0.3em solid currentColor;
  border-right: 0;
  content:      "";
}


/* ── Navigation Manager: flat table layout ──────────────────────────────── */
/*
 * Every NavItem (root or child) renders as one .nav-table-row.
 * The anonymous wrapper divs and .children-sortable containers are invisible —
 * no background, no border, no margin — so the list appears completely flat.
 *
 * Grid columns: drag(32px) | title(220px) | url(1fr) | flags(148px) | actions(auto)
 */

/* Invisible wrappers — structural only, no visual output.
   Must remain block elements (not display:contents) so SortableJS can move them. */
#root-sortable > div,
.children-sortable {
  background: none;
  margin:  0;
  padding: 0;
  border:  none;
}

/* nav-table-row must be block for display:contents parent — use grid here  */
/* Columns: drag(32px) | title(185px) | parent(155px) | url(1fr) | flags(130px) | actions(auto) */
.nav-table-row {
  display: grid;
  grid-template-columns: 32px 185px 155px 1fr 130px auto;
  align-items: center;
  column-gap: 8px;
  padding: 4px 8px;
}

/* Parent select inside the list table — compact, no margin */
.nav-parent-select {
  font-size: 0.75rem;
  padding: 2px 4px;
  height: auto;
  min-width: 0;
}

/* Column header bar */
.nav-table-header {
  background: #f8f9fa;
  user-select: none;
}

/* Row backgrounds and dividers */
.nav-row--root  { background: #fff;    border-bottom: 1px solid #dee2e6; }
.nav-row--child { background: #f8f9fa; border-bottom: 1px solid #dee2e6; }

/* Drag cell — root vs child indent */
.nav-drag-cell        { display: flex; align-items: center; }
.nav-drag-cell--child { padding-left: 20px; }

/* Title and URL cells — horizontally scrollable when content overflows */
.nav-scroll-cell {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  min-width: 0;
  border: 1px solid #dee2e6;
  border-radius: 3px;
  background-color: #fff;
  padding: 2px 6px;
  line-height: 1.5;
  scrollbar-width: thin;
  scrollbar-color: #ced4da transparent;
  cursor: default;
}

.nav-scroll-cell::-webkit-scrollbar        { height: 3px; }
.nav-scroll-cell::-webkit-scrollbar-track  { background: transparent; }
.nav-scroll-cell::-webkit-scrollbar-thumb  { background: #ced4da; border-radius: 2px; }

/* ── Navigation Manager: nested drop-zone visuals (Phase 2.9) ───────────── */

/* Drop zone highlight while dragging */
.children-sortable.drag-over {
  outline: 2px dashed var(--bs-primary);
  outline-offset: -2px;
  background: rgba(13, 110, 253, 0.06) !important;
  min-height: 32px;
}

/* Ghost placeholder while item is being dragged */
.sortable-ghost {
  opacity: 0.4;
  background: rgba(13, 110, 253, 0.08) !important;
}

/* Chosen (picked up) item */
.sortable-chosen {
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ── Drag-active state: reveal empty child zones as discoverable targets ─── */

/* Hint text inside every children zone — hidden by default */
.nav-nest-hint {
  display: none;
  pointer-events: none;
  user-select: none;
}

/* While any item is being dragged, empty child zones become visible */
body.nav-drag-active .children-sortable.empty {
  display: block !important;
  min-height: 34px;
  border: 2px dashed #ced4da;
  border-radius: 4px;
  margin: 2px 0 2px 20px;
  transition: border-color 0.12s, background 0.12s;
}

/* Show the hint text inside revealed empty zones */
body.nav-drag-active .children-sortable.empty .nav-nest-hint {
  display: block !important;
}

/* Stronger highlight when actually hovering over a target zone */
body.nav-drag-active .children-sortable.drag-over {
  border-color: var(--bs-primary) !important;
  background: rgba(13, 110, 253, 0.08) !important;
}

/* ── Drag-active state: reveal empty child zones as discoverable targets ─── */

/* Hint text inside every children zone -- hidden by default */
.nav-nest-hint {
  display: none;
  pointer-events: none;
  user-select: none;
}

/* While any item is being dragged, empty child zones become visible targets */
body.nav-drag-active .children-sortable.empty {
  display: block !important;
  min-height: 34px;
  border: 2px dashed #ced4da;
  border-radius: 4px;
  margin: 2px 0 2px 20px;
  transition: border-color 0.12s, background 0.12s;
}

/* Show the hint text inside revealed empty zones during drag */
body.nav-drag-active .children-sortable.empty .nav-nest-hint {
  display: block !important;
}

/* Stronger highlight when the cursor is actively over a target zone */
body.nav-drag-active .children-sortable.drag-over {
  border-color: var(--bs-primary) !important;
  background: rgba(13, 110, 253, 0.08) !important;
  outline: none;
}

/* ── Resizable column support (table-resizer.js) ────────────────────────────
   When .resizable-table wraps the nav table, JS sets --grid-cols on it.
   All .nav-table-row children inherit the value automatically.
   The fallback matches the static rule above so the layout is unchanged
   until the user drags a column handle.                                       */
.resizable-table .nav-table-row {
  grid-template-columns: var(--grid-cols, 32px 185px 155px 1fr 130px auto);
}

/* ── Force top navbar dropdowns above everything, including sticky sidebar ─── */
.navbar .dropdown-menu,
.navbar-nav .dropdown-menu,
.dropdown-menu.show,
.navbar .dropdown-menu.show,
.dropdown-menu {
    z-index: 1200 !important;
}

/* ── Ensure navbar bar itself stays above sidebar ───────────────────────────── */
.navbar {
    z-index: 1150 !important;
}


/* --------------------------------------------------------------------
 * Modal stacking - must beat the explicit navbar z-indexes above.
 * The navbar (.navbar) sits at 1150, navbar dropdowns at 1200;
 * Bootstrap's default modal z-index of 1055 would be covered by either.
 * Bumping the modal-backdrop and the modal itself ensures any Bootstrap
 * modal anywhere in the app renders above the fixed top navbar without
 * page-by-page fixes.
 * ------------------------------------------------------------------*/
.modal-backdrop {
    z-index: 1250 !important;
}
.modal {
    z-index: 1300 !important;
}


/* ── Sidebar separator (Sep 2026) ─────────────────────────────────────────────
 * A nav item with no url, no children and a hidden title renders as this
 * rule (see the sidebar macros).  Wastewater uses one between the stage
 * folders and the project-level headers (Systems Layout Options,
 * Constituents).  Not a link; carries no hover / current styling.
 * ------------------------------------------------------------------*/
.nav-ww-separator {
    margin: 0.5rem 0.25rem 0.35rem;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    opacity: 1;
}