/* nav-groups.css — Sections in drop-down menus in the management bar.
 *
 * Organizes the nav (≈8 sections instead of ~22 links). Each section = one trigger
 * button + one drop-down panel. Opens on hover and keyboard focus (CSS) +
 * click/tap (.is-open class set by public/js/nav-groups.js). Everything is scoped under
 * .app-nav → no effect elsewhere. Uses the tokens from app.css; dark variants,
 * compact mode (icons), and mobile drawer are handled below.
 */

.app-nav-group { position: relative; display: inline-flex; }

/* Section trigger: same layout as the nav links. */
.app-nav-grouptrigger {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.7rem;
  border: none;
  background: transparent;
  color: var(--label-secondary);
  font: inherit;
  font-size: 0.875rem;
  border-radius: 9px;
  cursor: pointer;
  white-space: nowrap;
  /* A section with its own page uses a link: it must not be underlined or
     change color, otherwise two neighboring entries would not look the same. */
  text-decoration: none;
}
.app-nav-grouptrigger:hover { background: var(--fill-quaternary); color: var(--label-primary); }
.app-nav-grouptrigger.active { background: var(--fill-primary); color: var(--label-primary); font-weight: 600; }
.app-nav-admin .app-nav-grouptrigger { color: rgba(255,255,255,0.72); }
.app-nav-admin .app-nav-grouptrigger:hover { background: rgba(255,255,255,0.10); color: #fff; }
.app-nav-admin .app-nav-grouptrigger.active { background: rgba(255,255,255,0.16); color: #fff; }

.app-nav-chev { flex: 0 0 auto; opacity: 0.6; transition: transform 0.15s ease; }
.app-nav-group:hover .app-nav-chev,
.app-nav-group:focus-within .app-nav-chev,
.app-nav-group.is-open .app-nav-chev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .app-nav-chev { transition: none; } }

/* Drop-down panel (desktop): floats below the trigger. */
.app-nav-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 230px;
  max-width: 320px;
  display: none;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.4rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--separator, rgba(60,60,67,0.12));
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,37,68,0.16);
  z-index: 1200;
}
.app-nav-group:hover > .app-nav-dropdown,
.app-nav-group:focus-within > .app-nav-dropdown,
.app-nav-group.is-open > .app-nav-dropdown { display: flex; }

/* Invisible bridge: prevents the menu from closing in the trigger↔panel gap. */
.app-nav-group:hover > .app-nav-dropdown::before {
  content: ''; position: absolute; top: -6px; left: 0; right: 0; height: 6px;
}

.app-nav-dropitem {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: var(--label-primary);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
}
.app-nav-dropitem:hover { background: var(--fill-quaternary, rgba(0,0,0,0.05)); }
.app-nav-dropitem.active { background: var(--fill-primary, rgba(0,0,0,0.08)); font-weight: 600; }
.app-nav-dropitem .nav-icon { flex: 0 0 auto; }
.app-nav-droplabel { flex: 1 1 auto; min-width: 0; }

/* Dark theme. */
:root[data-theme="dark"] .app-nav-dropdown { background: #1f2024; border-color: rgba(255,255,255,0.12); }
:root[data-theme="dark"] .app-nav-dropitem { color: rgba(255,255,255,0.9); }
:root[data-theme="dark"] .app-nav-dropitem:hover { background: rgba(255,255,255,0.08); }

/* Compact mode (icons only): hide the trigger label and chevron,
   like the nav links. The menu remains accessible on hover/click. */
.app-nav-inner.nav-compact .app-nav-grouptrigger,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-grouptrigger { font-size: 0; padding: 0.5rem 0.55rem; gap: 0; }
.app-nav-inner.nav-compact .app-nav-grouptrigger .nav-icon,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-grouptrigger .nav-icon { margin-right: 0; }
.app-nav-inner.nav-compact .app-nav-chev,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-chev { display: none; }
/* The panel keeps its normal size (readable labels). Menu items
   are <a> INSIDE .app-nav-links → the compact “font-size:0” rule affects them
   too; it is neutralized here (same specificity, declared later → takes precedence). */
.app-nav-inner.nav-compact .app-nav-dropdown,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-dropdown { font-size: 0.875rem; }
.app-nav-inner.nav-compact .app-nav-dropdown a,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-dropdown a { font-size: 0.875rem; gap: 0.6rem; padding: 0.5rem 0.6rem; }
.app-nav-inner.nav-compact .app-nav-dropdown a .nav-icon,
.app-nav:not(.nav-ready) .app-nav-inner .app-nav-dropdown a .nav-icon { margin-right: 0; }

/* Mobile drawer: the menu no longer floats but becomes an accordion in the flow. */
@media (max-width: 768px) {
  .app-nav-group { display: block; width: 100%; }
  .app-nav-grouptrigger { width: 100%; justify-content: flex-start; font-size: 0.95rem; }
  .app-nav-chev { margin-left: auto; }
  .app-nav-dropdown {
    position: static; display: none; min-width: 0; max-width: none;
    box-shadow: none; border: none; background: transparent; padding: 0.1rem 0 0.3rem 1.4rem;
  }
  /* On mobile: only a click (.is-open) opens it — not hover. */
  .app-nav-group:hover > .app-nav-dropdown,
  .app-nav-group:focus-within > .app-nav-dropdown { display: none; }
  .app-nav-group.is-open > .app-nav-dropdown { display: flex; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SYMMETRY: section trigger ⇆ nav link
   ───────────────────────────────────────────────────────────────────────────
   Organizing the bar into sections introduced a <button class="app-nav-grouptrigger">
   next to the <a> elements in .app-nav-links. But ALL the icon styling (tile
   iOS colored tile, 36px size, line glyph, active state) and the label
   restorations in the drawer were scoped to « .app-nav-links a » → the trigger did
   NOT inherit them. Consequence measured in the browser: its <span class="nav-icon">
   has no dimensions, and since the SVGs have a viewBox WITHOUT width/height, the glyph
   paints at 0×0 — INVISIBLE (especially in compact mode, where font-size:0 crushes the
   em size). The 6 sections became empty ~18px buttons. Here we restore the
   full symmetry (nav-groups.css loads AFTER app.css → takes precedence). */

/* Section icon: VISIBLE but LIGHT (stroked glyph). We keep it more
   compact than the large 36px tile used by links (.app-nav-links a .nav-icon) to
   NOT increase the width of the expanded bar — otherwise the labels would no longer fit,
   even on a large screen. The KEY point: the size is FIXED in px (not em),
   so it is immune to compact mode's font-size:0, which reduced the icon to 0×0
   (invisible) because it had no dimensions of its own (the SVGs have a viewBox without width/height). */
.app-nav-grouptrigger .nav-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  margin-right: 0.45rem;
  border-radius: 7px;
  background: transparent;
  color: var(--label-secondary);
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s var(--ease-spring);
}
.app-nav-grouptrigger .nav-icon svg { width: 20px; height: 20px; display: block; stroke: currentColor; }
.app-nav-grouptrigger:hover .nav-icon { transform: scale(1.04); }

/* Inactive: outlined glyph, transparent background (like an inactive link on the
   client side). Only the ACTIVE section gets a SOLID square in its color. */
html:not(.nav-layout-side) .app-nav:not(.app-nav-admin) .app-nav-grouptrigger:not(.active) .nav-icon {
  background: transparent !important;
  color: color-mix(in srgb, var(--label-primary) 68%, transparent) !important;
  box-shadow: none !important;
}
html:not(.nav-layout-side) .app-nav:not(.app-nav-admin) .app-nav-grouptrigger:not(.active):hover .nav-icon { color: var(--label-primary) !important; }
/* ACTIVE section: solid square in its color (.nav-icon-<X>, !important in
   app.css → takes precedence when .active) → marker for the current section, clearly visible
   even in compact mode (icons only). The glyph turns white via .nav-icon-<X>. */
.app-nav-grouptrigger.active .nav-icon { width: 30px; height: 30px; box-shadow: 0 1px 2px rgba(0,0,0,0.18); }
.app-nav-grouptrigger.active .nav-icon svg { width: 18px; height: 18px; }
/* No background pill on the active/hovered trigger on the client side (consistent
   with .app-nav-links a, as Julien requested): the colored icon + bold label
   are enough. We override the gray background defined above for the grouptrigger. */
.app-nav:not(.app-nav-admin) .app-nav-grouptrigger.active { background: transparent !important; }
.app-nav:not(.app-nav-admin) .app-nav-grouptrigger:hover { background: transparent !important; }

/* ── Collapsed drawer (hamburger): trigger labels ALWAYS visible ──────
   Mirrors app.css:
     .app-nav.is-collapsed .app-nav-inner.nav-compact .app-nav-links a { font-size:0.95rem }
     .app-nav.is-collapsed .app-nav-links a { full-width vertical line }
   Without a grouptrigger equivalent, the sections remained icon-only (unreadable)
   in the vertical menu. We make them, like the links, full-width blocks. */
.app-nav.is-collapsed .app-nav-inner.nav-compact .app-nav-grouptrigger { font-size: 0.95rem; padding: 0.7rem 0.85rem; gap: 0.6rem; }
.app-nav.is-collapsed .app-nav-inner.nav-compact .app-nav-grouptrigger .nav-icon { margin-right: 0.55rem; }
.app-nav.is-collapsed .app-nav-grouptrigger {
  padding: 0.7rem 0.8rem;
  font-size: 0.95rem;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  justify-content: flex-start;
  gap: 0.7rem;
}
/* Each section = full-width block + accordion menu. The @media ≤768px block
   already does this on mobile; we extend it to EVERY collapsed drawer (including windows
   narrow screens >768px where fitNav switches to a hamburger menu outside the mobile media query). */
.app-nav.is-collapsed .app-nav-group { display: block; width: 100%; }
.app-nav.is-collapsed .app-nav-chev { display: inline-flex; margin-left: auto; }
.app-nav.is-collapsed .app-nav-dropdown {
  position: static; min-width: 0; max-width: none;
  box-shadow: none; border: none; background: transparent; padding: 0.1rem 0 0.3rem 1.4rem;
}
/* In the drawer: only a click (.is-open) opens it — not hover/focus (as with ≤768px). */
.app-nav.is-collapsed .app-nav-group:hover > .app-nav-dropdown,
.app-nav.is-collapsed .app-nav-group:focus-within > .app-nav-dropdown { display: none; }
.app-nav.is-collapsed .app-nav-group.is-open > .app-nav-dropdown { display: flex; }