/* ══════════════════════════════════════════════════════════════
   Pro Admin Components

   Reusable sidebar navigation, header dropdowns, and active-menu
   highlighting extracted from the UI Kit demo page.

   ARCHITECTURE OVERVIEW:

   This file provides "component-level" styles that sit on top of
   pro-admin-ui-kit.css (the foundational layout system). The UI Kit
   establishes the shell (sidebar structure, header, footer, content
   area), while this file adds interactive behavior and theming for:

   - Sidebar navigation with collapsible submenus (JavaScript-driven
     flyout panels positioned via `position: fixed`)
   - Active menu highlighting (current page indicators)
   - Header dropdowns (account menu, notifications, search)
   - Footer drawer (animated with CSS Grid 0fr→1fr technique)
   - Collapsed sidebar "rail" mode (~70px icon-only width)

   CRITICAL OVERRIDES:

   Many selectors use `!important` to override pro-admin-ui-kit.css,
   which is loaded BEFORE this file and uses moderately high-specificity
   selectors. Since this is the "theming layer" that sits on top of the
   "layout layer", !important is the intended cascade strategy here.

   A future refactor using CSS @layer could eliminate most !important
   declarations by explicitly layering:
     @layer base, layout, components, utilities;
   Then pro-admin-ui-kit.css would be @layer layout and this file would
   be @layer components, giving us cascade control without specificity wars.

   COLLAPSED SIDEBAR BEHAVIOR:

   When `html.sidebar-collapsed` is active, the sidebar shrinks to ~70px
   width (icon-only "rail" mode). All nav items need width: 100% to fill
   the rail and prevent shrinkage when text labels are hidden. The flyout
   submenu panels are detached from the sidebar (position: fixed) so they
   always show full text + icons regardless of rail state.

   Z-INDEX STACK:

   - Sidebar: ~3000 (set in pro-admin-ui-kit.css)
   - Submenu flyouts: 3200 (above sidebar)
   - Header dropdowns: 4000 (above everything else)

   ACCESSIBILITY:

   - Focus-visible outlines for keyboard navigation (not shown on mouse click)
   - Touch target sizing: 44px minimum on coarse-pointer devices (WCAG 2.5.8)
   - Reduced motion: all transitions/animations disabled for prefers-reduced-motion
   - ARIA attributes: aria-expanded toggles, hidden states, semantic roles

   ══════════════════════════════════════════════════════════════ */

/* ── Sidebar Navigation ──────────────────────────────────────── */

.uik-sidebar-nav-list {
  --uik-nested-indent: 0.72rem;          /* left indent for nested items (currently unused, reserved for future hierarchy) */
  gap: 0.06rem;
}

.uik-top-link,
.uik-submenu-toggle {
  text-align: left;
  border: none;
  background: transparent;                /* ensure both links and buttons share the same background */
  width: 100%;                            /* CRITICAL: must be 100% so collapsed rail mode works correctly */
  font-family: inherit;
  cursor: pointer;
}

.uik-submenu-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.uik-submenu-caret {
  margin-left: auto;                      /* pushes caret to far right of toggle button */
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pa-muted);
  font-size: 0.75rem;
  transition: transform 160ms ease;
}

/* Rotate caret 90° when submenu is open (right-pointing → down-pointing) */
.uik-submenu-toggle[aria-expanded="true"] .uik-submenu-caret {
  transform: rotate(90deg);
}

/* ── Submenu Flyout Panels ───────────────────────────────────── *
 * Flyout panels that appear when a sidebar submenu toggle is clicked.
 * These are positioned absolutely in the DOM but use `position: fixed`
 * because JavaScript (in pro-admin-sidebar.js) calculates and sets the
 * exact top/left coordinates based on the trigger element's viewport
 * position. Fixed positioning avoids scroll-offset miscalculations
 * inside the overflow-scrolling sidebar.
 *
 * WHY position: fixed !important:
 * The sidebar itself has overflow-y: auto, which creates a new scrolling
 * context. If we used position: absolute here, the panel would be positioned
 * relative to that scrolling container, and its coordinates would shift
 * when the user scrolls the sidebar. Fixed positioning bypasses this by
 * anchoring to the viewport instead, so our JavaScript-calculated coords
 * remain accurate regardless of sidebar scroll position.
 *
 * WHY z-index: 3200:
 * Places flyouts above the sidebar (z ~3000) but below header dropdowns
 * (z: 4000) so they don't occlude account menus. This prevents the visual
 * hierarchy inversion where a sidebar submenu would cover the logout button.
 * ─────────────────────────────────────────────────────────────── */

.uik-submenu {
  /* fixed + top/left: 0 are defaults; JS overrides with computed coords */
  position: fixed !important;             /* see comment above -- prevents scroll-offset bugs */
  left: 0;
  top: 0;
  margin: 0;
  min-width: 220px;
  max-width: min(260px, calc(100vw - 1rem)); /* prevents overflow on narrow viewports */
  background: var(--pa-card);
  border: 1px solid var(--pa-border);
  border-left: 4px solid var(--pa-primary); /* accent bar that distinguishes flyouts from regular dropdowns */
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  z-index: 3200;                          /* see z-index stack in file header */
  opacity: 1;
  pointer-events: auto;
  padding: 0.35rem 0;
  transition: opacity 120ms ease;
  max-height: 60vh;                       /* prevents extremely long menus from exceeding viewport */
  overflow-y: auto;                       /* scrollable if content exceeds max-height */
}

.uik-submenu[hidden] {
  display: none;                          /* fully remove from layout when dismissed */
}

.uik-submenu .pa-menu-item {
  width: 100%;
  border-radius: 0;                       /* square corners inside the flyout panel */
  min-height: 30px;
  gap: 0.45rem;
}

.uik-submenu .pa-menu-item i {
  width: 20px;
  font-size: 0.78rem;
  opacity: 0.95;
}

/* ── Sidebar Header Stripe ──────────────────────────────────── *
 * Replaces the default sidebar header (which contains a logo/title
 * area) with a thin 6px colored stripe that acts as a brand accent
 * at the top of the sidebar. This is a deliberate design choice:
 * the brand name already appears in the main header, so the sidebar
 * header is repurposed as a visual separator.
 *
 * WHY !important on EVERY property:
 * pro-admin-ui-kit.css sets .pa-sidebar-header with high-specificity
 * defaults (height, padding, flex, display, etc.) that would otherwise
 * win the cascade. Since this file loads AFTER the UI kit, !important
 * is the cleanest override without rewriting the kit's selectors or
 * increasing specificity to absurd levels like:
 *   .pro-admin.something .pa-sidebar.something-else .pa-sidebar-header
 *
 * These properties are fundamental to the stripe design and MUST override
 * the kit's defaults -- we're not "fighting the cascade", we're explicitly
 * replacing a layout decision at the component level.
 * ─────────────────────────────────────────────────────────────── */

.pro-admin .pa-sidebar .pa-sidebar-header,
.pro-merchant .pa-sidebar .pa-sidebar-header {
  height: 6px !important;
  min-height: 6px !important;
  max-height: 6px !important;
  width: 100% !important;
  align-self: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--pa-primary) !important;
  border-bottom: 0 !important;
  display: block !important;
  flex: 0 0 6px !important;               /* prevent flex from growing/shrinking the stripe */
  overflow: hidden !important;
}

/* Collapsed-mode selector chain: ensure the stripe stays visible and
   correctly sized when the sidebar is in narrow "rail" mode (~70px), and
   also when the user hovers to temporarily expand it. The UI kit tries
   to hide/resize the header in collapsed mode, so we forcibly restore it. */
html.sidebar-collapsed .pro-admin .pa-sidebar .pa-sidebar-header,
html.sidebar-collapsed .pro-merchant .pa-sidebar .pa-sidebar-header,
html.sidebar-collapsed .pro-admin .pa-sidebar:hover .pa-sidebar-header,
html.sidebar-collapsed .pro-merchant .pa-sidebar:hover .pa-sidebar-header {
  height: 6px !important;
  min-height: 6px !important;
  max-height: 6px !important;
  width: 100% !important;
  align-self: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--pa-primary) !important;
  border-bottom: 0 !important;
  opacity: 1 !important;                  /* UI kit tries to fade it out in collapsed mode */
  visibility: visible !important;         /* UI kit tries to hide it */
  display: block !important;
  justify-content: initial !important;    /* reset any flex centering applied by the kit */
}

/* ── Collapsed Sidebar Overrides ────────────────────────────── *
 * When the sidebar is collapsed (html.sidebar-collapsed), it shrinks
 * to an icon-only "rail" (~60-70px wide). pro-admin-ui-kit.css applies
 * aggressive icon-only styles that hide text labels, shrink icons,
 * and center everything. These overrides restore normal appearance
 * inside submenu flyout panels so their content remains readable
 * even when the rail is active -- flyouts are detached from the
 * sidebar and need full text + icon display.
 *
 * WHY !important here:
 * pro-admin-ui-kit.css uses html.sidebar-collapsed selectors with
 * equal or higher specificity (e.g., html.sidebar-collapsed .pa-menu-item).
 * Since both stylesheets target the same collapsed state, the one that
 * loads LAST would normally win -- but we need these overrides to ALWAYS
 * win for flyout panels regardless of load order or future kit changes.
 * !important guarantees our component-specific behavior takes precedence.
 *
 * A future migration to CSS @layer would eliminate this need:
 *   @layer base, layout, components;
 * Then pro-admin-ui-kit.css would be @layer layout and this file would
 * be @layer components, giving us natural cascade control without
 * specificity wars.
 * ─────────────────────────────────────────────────────────────── */

/* Restore full layout for menu items inside flyout panels */
html.sidebar-collapsed .uik-submenu .pa-menu-item {
  justify-content: flex-start !important;
  gap: 0.5rem !important;
  font-size: 0.82rem !important;
  color: var(--pa-text) !important;
  min-height: 30px !important;
  max-height: none !important;
  overflow: visible !important;
  text-indent: 0 !important;              /* UI kit uses text-indent: -9999px to hide text in rail mode */
  margin: 0 !important;
  background: transparent !important;
  width: 100%;
}

html.sidebar-collapsed .uik-submenu .pa-menu-item i {
  width: 24px !important;
  max-width: 24px !important;
  height: 24px !important;
  max-height: 24px !important;
  margin-right: 0.25rem !important;
  color: var(--pa-muted) !important;
  font-size: 0.78rem !important;
  transform: none !important;             /* UI kit applies transform: scale() in rail mode */
}

/* Force text labels back to visible inside flyout panels --
   the UI kit hides all non-icon children in collapsed mode */
html.sidebar-collapsed .uik-submenu .pa-menu-item > *:not(i) {
  opacity: 1 !important;
  visibility: visible !important;
  width: auto !important;                 /* UI kit sets width: 0 to hide text */
  color: var(--pa-text) !important;
  font-size: 0.82rem !important;
  height: auto !important;                /* UI kit sets height: 0 to hide text */
}

/* Hide text labels and carets on the SIDEBAR items themselves (not flyouts).
   These are direct children of the nav list, so they live inside the rail
   and should show icons only. The selector chain targets only items in the
   main nav list, not nested submenu panels. */
html.sidebar-collapsed .uik-sidebar-nav-list > .uik-top-link span,
html.sidebar-collapsed .uik-sidebar-nav-list > .uik-submenu-toggle span,
html.sidebar-collapsed .uik-sidebar-nav-list > .uik-submenu-toggle .uik-submenu-caret {
  display: none !important;
}

/* Center icons in the rail since text is hidden. Without this, the icons
   would align left in the 70px rail and look visually unbalanced. */
html.sidebar-collapsed .uik-sidebar-nav-list > .uik-submenu-toggle,
html.sidebar-collapsed .uik-sidebar-nav-list > .uik-top-link {
  justify-content: center !important;
  gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

html.sidebar-collapsed .pro-admin .pa-sidebar-nav,
html.sidebar-collapsed .pro-merchant .pa-sidebar-nav {
  width: 100% !important;                 /* CRITICAL: prevents rail from shrinking below 70px */
  align-self: stretch !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow-y: hidden !important;          /* prevents double scrollbars in rail mode */
}

html.sidebar-collapsed .uik-sidebar-nav-list {
  width: 100% !important;                 /* CRITICAL: prevents nav list from shrinking when labels are hidden */
}

/* Fully hide the sidebar section title in collapsed mode.
   font-size: 0 + width: 0 + visibility: hidden is a belt-and-suspenders
   approach so the title doesn't cause layout shifts during hover-expand.
   Multiple properties ensure it's truly gone and can't accidentally
   create visual artifacts or clickable dead zones. */
html.sidebar-collapsed .pro-admin .pa-sidebar .pa-sidebar-title,
html.sidebar-collapsed .pro-merchant .pa-sidebar .pa-sidebar-title,
html.sidebar-collapsed .pro-admin .pa-sidebar:hover .pa-sidebar-title,
html.sidebar-collapsed .pro-merchant .pa-sidebar:hover .pa-sidebar-title {
  font-size: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  width: 0 !important;
  overflow: hidden !important;
  transition: none !important;            /* prevents fade-in animation on hover, which looks glitchy */
}

/* ── Header Dropdown Panels ──────────────────────────────────── */

.hdr-dropdown-wrap {
  position: relative;                     /* establishes positioning context for absolute-positioned dropdown */
}

.hdr-dropdown {
  position: absolute;
  top: calc(100% + 8px);                  /* 8px gap between trigger button and panel for visual breathing room */
  right: 0;                               /* align right edge with trigger button */
  min-width: min(300px, calc(100vw - 2rem)); /* clamp to viewport width on mobile */
  background: var(--pa-card, #fff);
  border: 1px solid var(--pa-border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.06); /* layered shadows for depth */
  z-index: 4000;                          /* above sidebar flyouts (3200) and sidebar itself -- see z-index stack in file header */
  overflow: hidden;
  animation: hdrDropIn 140ms ease-out;
}

.hdr-dropdown[hidden] {
  display: none;                          /* fully remove from layout when dismissed */
}

.hdr-dropdown--narrow {
  min-width: 220px;
}

/* Drop-in entrance animation: the panel fades in while sliding down
   6px, creating a subtle "unfolding from the header" effect.
   Duration (140ms) is intentionally fast to feel snappy, not sluggish.
   Slower animations (300ms+) feel laggy and frustrate users on fast hardware. */
@keyframes hdrDropIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hdr-dropdown-header {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--pa-text, #1a202c);
  border-bottom: 1px solid var(--pa-border, #e2e8f0);
}

.hdr-dropdown-body {
  padding: 0.5rem;
}

.hdr-dropdown-footer {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--pa-border, #e2e8f0);
  text-align: center;
}

.hdr-dropdown-footer a {
  font-size: 0.78rem;
  color: var(--pa-primary);
  text-decoration: none;
  font-weight: 500;
}

.hdr-dropdown-footer a:hover {
  text-decoration: underline;
}

/* ── Header Search Box ───────────────────────────────────────── */

.hdr-search-box {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pa-bg, #f7f8fa);
  border: 1px solid var(--pa-border, #e2e8f0);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
}

.hdr-search-box i {
  color: var(--pa-muted, #94a3b8);
  font-size: 0.85rem;
}

.hdr-search-input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;                                /* fills remaining space in the search box */
  font-size: 0.84rem;
  color: var(--pa-text, #1a202c);
  font-family: inherit;
}

.hdr-search-input::placeholder {
  color: var(--pa-muted, #94a3b8);
}

.hdr-search-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
  padding: 0 0.2rem;
}

.hdr-hint-tag {
  font-size: 0.72rem;
  padding: 0.2rem 0.55rem;
  background: rgba(0, 117, 178, 0.08);
  color: var(--pa-primary);
  border-radius: 12px;
  cursor: pointer;
  transition: background 120ms ease;
}

.hdr-hint-tag:hover {
  background: rgba(0, 117, 178, 0.16);
}

/* ── Header Notifications ────────────────────────────────────── */

.hdr-notif-list {
  padding: 0.25rem 0;
  max-height: 320px;
  overflow-y: auto;                       /* scrollable if notifications exceed max-height */
}

.hdr-notif-item {
  display: flex;
  align-items: flex-start;                /* top-align icon with multiline text */
  gap: 0.65rem;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: var(--pa-text, #1a202c);
  transition: background 120ms ease;
}

.hdr-notif-item:hover {
  background: rgba(0, 117, 178, 0.06);
}

.hdr-notif-item.unread {
  background: rgba(0, 117, 178, 0.04);    /* subtle tint for unread items */
}

.hdr-notif-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 117, 178, 0.1);
  color: var(--pa-primary);
  font-size: 0.72rem;
  flex-shrink: 0;                         /* prevents icon from shrinking when text wraps */
  margin-top: 2px;                        /* slight optical alignment with first line of text */
}

.hdr-notif-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;                           /* allows text truncation if needed */
}

.hdr-notif-text {
  font-size: 0.8rem;
  line-height: 1.35;
}

.hdr-notif-time {
  font-size: 0.7rem;
  color: var(--pa-muted, #94a3b8);
}

/* ── Header User Button ──────────────────────────────────────── */

.hdr-user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(0, 117, 178, 0.06);
  border: 1px solid rgba(0, 117, 178, 0.12);
  border-radius: 24px;                    /* fully rounded pill shape */
  padding: 0.3rem 0.7rem 0.3rem 0.3rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  color: var(--pa-text, #1a202c);
}

.hdr-user-btn:hover {
  background: rgba(0, 117, 178, 0.12);
  border-color: rgba(0, 117, 178, 0.22);
}

.hdr-user-btn.is-active {
  background: rgba(0, 117, 178, 0.14);
  border-color: var(--pa-primary);
  box-shadow: 0 0 0 2px rgba(0, 117, 178, 0.15); /* focus ring effect when dropdown is open */
}

.hdr-user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pa-primary, #0075b2);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;                         /* prevents avatar from shrinking */
}

.hdr-user-name {
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;                    /* prevents name from wrapping and breaking the pill shape */
}

.hdr-user-caret {
  font-size: 0.6rem;
  color: var(--pa-muted, #94a3b8);
  transition: transform 160ms ease;
  margin-left: 0.1rem;
}

/* Rotate caret 180° when dropdown is open (down-pointing → up-pointing) */
.hdr-user-btn.is-active .hdr-user-caret {
  transform: rotate(180deg);
}

/* ── Header Account Menu ─────────────────────────────────────── */

.hdr-account-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.hdr-account-info strong {
  font-size: 0.85rem;
}

.hdr-account-email {
  font-size: 0.74rem;
  color: var(--pa-muted, #94a3b8);
  font-weight: 400;
}

.hdr-account-menu {
  padding: 0.35rem 0;
}

.hdr-account-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--pa-text, #1a202c);
  font-size: 0.82rem;
  transition: background 120ms ease;
}

.hdr-account-link:hover {
  background: rgba(0, 117, 178, 0.06);
}

.hdr-account-link i {
  width: 18px;
  text-align: center;
  color: var(--pa-muted, #94a3b8);
  font-size: 0.85rem;
}

.hdr-account-link--danger {
  color: #dc3545;                         /* red text for destructive actions (logout, delete account) */
}

.hdr-account-link--danger i {
  color: #dc3545;
}

.hdr-account-link--danger:hover {
  background: rgba(220, 53, 69, 0.06);    /* red tint on hover */
}

.hdr-account-divider {
  border: none;
  border-top: 1px solid var(--pa-border, #e2e8f0);
  margin: 0.3rem 0.5rem;
}

/* ── Active Menu Highlight ──────────────────────────────────── *
 * Visual treatment for the currently-active page link.
 * Shared across main sidebar nav and footer drawer nav.
 *
 * WHY !important:
 * The UI kit applies hover/focus styles with equal specificity, and
 * we need active state to always win over hover state. Without
 * !important, hovering over the active item would blend the two
 * treatments and create visual confusion. This is one of the rare
 * cases where !important is semantically correct -- it expresses
 * "this state is more important than hover/focus states."
 * ─────────────────────────────────────────────────────────────── */

.uik-sidebar-nav-list .pa-menu-item.active {
  position: relative;
  background: rgba(0, 117, 178, 0.10) !important;
  color: var(--pa-primary) !important;
  font-weight: 600;
  border-left: 3px solid var(--pa-primary); /* accent bar on left edge */
  padding-left: calc(1.25rem - 3px);      /* subtract border width to maintain alignment */
}

.uik-sidebar-nav-list .pa-menu-item.active i {
  color: var(--pa-primary) !important;
}

/* Active items inside flyout submenus use a flat tint instead of the
   gradient+bar pattern, since flyouts have their own left accent border.
   Adding another border would create visual clutter. */
.uik-submenu .pa-menu-item.active {
  border-left: none;
  padding-left: 0.6rem;
  background: rgba(0, 117, 178, 0.12) !important;
  font-weight: 600;
  color: var(--pa-primary) !important;
}

.uik-submenu .pa-menu-item.active i {
  color: var(--pa-primary) !important;
  opacity: 1;
}

/* Parent toggle highlighting: when a submenu contains the active page,
   highlight the parent toggle so users can see which section they're in */
.uik-submenu-toggle.has-active-child {
  color: var(--pa-primary) !important;
  font-weight: 600;
}

.uik-submenu-toggle.has-active-child i:not(.uik-submenu-caret) {
  color: var(--pa-primary) !important;
}

/* Collapsed sidebar active: in icon-only rail mode, the accent bar
   still shows on the left edge. padding-left: 0 prevents the border
   from pushing the centered icon off-center (the 3px border would
   shift everything 3px to the right otherwise). */
html.sidebar-collapsed .uik-sidebar-nav-list > .pa-menu-item.active,
html.sidebar-collapsed .uik-sidebar-nav-list > .uik-submenu-toggle.has-active-child {
  border-left: 3px solid var(--pa-primary);
  padding-left: 0 !important;
  background: rgba(0,117,178,0.10) !important;
}

/* ── Focus-Visible Indicators ──────────────────────────────── *
 * Explicit focus styles for keyboard navigation. These use
 * :focus-visible (not :focus) so mouse clicks don't show
 * focus rings while keyboard Tab still does.
 *
 * WHY :focus-visible instead of :focus:
 * Most users navigate with a mouse and find focus rings visually
 * distracting when they appear on every click. :focus-visible is
 * a modern CSS pseudo-class that only activates when the browser
 * detects keyboard navigation, giving keyboard users the visual
 * feedback they need without annoying mouse users.
 *
 * Browser support: All modern browsers (2020+). Fallback for old
 * browsers: no focus ring, which is acceptable for mouse users.
 * ─────────────────────────────────────────────────────────── */

.uik-submenu-toggle:focus-visible,
.uik-top-link:focus-visible,
.uik-submenu-item:focus-visible,
.pa-footer-drawer-toggle:focus-visible {
  outline: 2px solid var(--pa-primary);
  outline-offset: -2px;                   /* inset outline so it doesn't expand click target */
  box-shadow: 0 0 0 3px rgba(0, 117, 178, 0.25); /* soft glow for extra visibility */
  border-radius: 4px;
}

.hdr-dropdown .hdr-account-link:focus-visible,
.hdr-dropdown .hdr-notif-item:focus-visible {
  outline: 2px solid var(--pa-primary);
  outline-offset: -2px;
}

.header-icon-btn:focus-visible,
.hdr-user-btn:focus-visible {
  outline: 2px solid var(--pa-primary);
  outline-offset: 2px;                    /* outset outline for rounded buttons */
  box-shadow: 0 0 0 3px rgba(0, 117, 178, 0.25);
}

.toggle-menu:focus-visible {
  outline: 2px solid var(--pa-primary);
  outline-offset: -2px;
}

/* ── Sidebar Footer Menu ─────────────────────────────────────── */

.pa-sidebar-footer-nav {
  padding: 0;
  position: relative;
  width: 100%;
}

/* ── Footer Drawer Toggle ───────────────────────────────────── *
 * The "More / Less" button at the bottom of the sidebar that reveals
 * or hides the footer drawer (secondary navigation links).
 *
 * LABEL SWAP MECHANISM:
 * Two <span> children exist in the HTML:
 *   .pa-footer-drawer-label-closed ("More") and
 *   .pa-footer-drawer-label-open ("Less").
 * CSS toggles their display based on [aria-expanded] so the label
 * changes without any JavaScript DOM manipulation. This is more
 * performant and accessible than innerHTML updates.
 *
 * INDICATOR DOT:
 * A small primary-colored dot (.pa-footer-drawer-indicator) appears
 * on the toggle ONLY when:
 *   1. The drawer is CLOSED (aria-expanded != "true"), AND
 *   2. A footer menu item is currently active (.has-hidden-active on parent)
 * This tells the user "the active page link is hidden inside this drawer"
 * so they know to open it. Without this indicator, users would have no
 * way to know the drawer contains relevant content.
 * ─────────────────────────────────────────────────────────────── */

.pa-footer-drawer-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: none;
  border-top: 1px solid transparent;
  background: transparent;
  color: var(--pa-muted, #94a3b8);
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 200ms ease;
  position: relative;
}

.pa-footer-drawer-toggle:hover {
  color: var(--pa-primary);
  background: rgba(0, 117, 178, 0.04);
}

.pa-footer-drawer-toggle[aria-expanded="true"] {
  color: var(--pa-primary);
  border-top-color: var(--pa-border, #e2e8f0); /* subtle divider when drawer is open */
}

/* Active-item indicator dot on "More" when drawer is closed
   but a footer menu item is active inside (see comment block above) */
.pa-footer-drawer-toggle .pa-footer-drawer-indicator {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pa-primary);
  display: none;                          /* hidden by default */
  flex-shrink: 0;
}

.pa-sidebar-footer-nav.has-hidden-active .pa-footer-drawer-toggle:not([aria-expanded="true"]) .pa-footer-drawer-indicator {
  display: inline-block;                  /* show only when drawer is closed AND contains active item */
}

/* Label swap: "More" when closed, "Less" when open */
.pa-footer-drawer-label-open {
  display: none;
}

.pa-footer-drawer-toggle[aria-expanded="true"] .pa-footer-drawer-label-closed {
  display: none;
}

.pa-footer-drawer-toggle[aria-expanded="true"] .pa-footer-drawer-label-open {
  display: inline;
}

.pa-footer-drawer-caret {
  font-size: 0.65rem;
  transition: transform 200ms ease;
}

/* Rotate caret 180° when drawer is open (down-pointing → up-pointing) */
.pa-footer-drawer-toggle[aria-expanded="true"] .pa-footer-drawer-caret {
  transform: rotate(180deg);
}

/* ── Footer Drawer Body (animated slide) ────────────────────── *
 * CRITICAL: CSS Grid "rows to zero" animation technique.
 *
 * HOW THE 0fr → 1fr ANIMATION WORKS:
 * The drawer contains TWO grid rows:
 *   Row 1: the ::before pseudo-element (a 3px blue accent stripe)
 *   Row 2: the .uik-sidebar-nav-list (the actual menu links)
 *
 * Collapsed state: grid-template-rows: 0fr 0fr
 *   Both rows collapse to 0 height. This works because each row's
 *   content has `min-height: 0` and `overflow: hidden`, allowing the
 *   fractional unit (0fr) to resolve to zero actual pixels. Without
 *   min-height: 0, the grid would respect the content's intrinsic
 *   height and 0fr would fail to collapse it.
 *
 * Expanded state (.is-open): grid-template-rows: auto 1fr
 *   Row 1 (::before) grows to its intrinsic 3px height (auto).
 *   Row 2 (nav list) takes remaining space (1fr).
 *   The transition on grid-template-rows animates both rows smoothly
 *   from 0 to their final heights -- this is the modern CSS technique
 *   for animating "height: auto" which is otherwise not interpolatable.
 *
 * WHY NOT max-height transition:
 * The old max-height technique requires guessing a max-height value
 * (e.g., max-height: 500px). If content exceeds that, it gets cut off.
 * If content is much smaller, the animation duration is wrong (it
 * animates from 0 to 500px even if content is only 100px tall, making
 * it feel slow). Grid 0fr→1fr solves both problems by animating the
 * exact content height.
 *
 * The ::before accent stripe also fades in/out via opacity transition,
 * synchronized with the row expansion for a polished effect.
 * ─────────────────────────────────────────────────────────────── */

.pa-footer-drawer-body {
  display: grid;
  grid-template-rows: 0fr 0fr;            /* collapsed: both rows at zero height */
  transition: grid-template-rows 250ms ease;
  overflow: hidden;                       /* hides content outside the grid bounds during animation */
  position: relative;
}

/* Blue accent stripe at top of expanded drawer (grid row 1) */
.pa-footer-drawer-body::before {
  content: '';
  display: block;
  width: 100%;
  height: 3px;
  background: var(--pa-primary);
  border-radius: 2px 2px 0 0;
  min-height: 0;                          /* REQUIRED: allows 0fr to collapse this row to zero pixels */
  overflow: hidden;                       /* REQUIRED: prevents content from escaping 0fr collapsed state */
  opacity: 0;
  transition: opacity 250ms ease;
}

.pa-footer-drawer-body.is-open::before {
  opacity: 1;                             /* fade in the accent stripe when drawer opens */
}

/* Grid row 2: the nav list itself */
.pa-footer-drawer-body > .uik-sidebar-nav-list {
  min-height: 0;                          /* REQUIRED: allows 0fr to collapse this row to zero pixels */
  overflow: hidden;                       /* REQUIRED: prevents content from escaping 0fr collapsed state */
  padding: 0 0.75rem;
}

.pa-footer-drawer-body.is-open {
  grid-template-rows: auto 1fr;           /* expanded: stripe at intrinsic height, list fills rest */
}

.pa-footer-drawer-body.is-open > .uik-sidebar-nav-list {
  padding: 0.45rem 0.75rem 0.5rem;
}

.pa-sidebar-footer-nav .uik-sidebar-nav-list {
  gap: 0.06rem;
}

/* ── Collapsed Sidebar Footer Overrides ─────────────────────── *
 * Mirror the main nav's collapsed behavior for footer items:
 * hide all text labels, center icons, and reduce horizontal padding
 * so everything fits within the narrow ~60-70px rail.
 *
 * WHY width: 100% on so many elements:
 * The sidebar is a flex column container. When labels are hidden, flex
 * children naturally shrink to their content size (icon width only).
 * Without explicit width: 100%, the footer nav would collapse to ~40px
 * instead of filling the 70px rail, creating visual inconsistency with
 * the main nav above it. Every nested element needs width: 100% because
 * each creates a new flex/grid context that would otherwise shrink.
 * ─────────────────────────────────────────────────────────────── */

/* Hide "More"/"Less" labels on the drawer toggle in rail mode;
   only the caret icon remains visible */
html.sidebar-collapsed .pa-footer-drawer-toggle .pa-footer-drawer-label-closed,
html.sidebar-collapsed .pa-footer-drawer-toggle .pa-footer-drawer-label-open {
  display: none !important;
}

html.sidebar-collapsed .pa-footer-drawer-toggle {
  padding: 0.5rem 0;
  width: 100%;
}

/* Hide text labels and carets on footer nav items */
html.sidebar-collapsed .pa-sidebar-footer-nav .uik-sidebar-nav-list > .uik-top-link span,
html.sidebar-collapsed .pa-sidebar-footer-nav .uik-sidebar-nav-list > .uik-submenu-toggle span,
html.sidebar-collapsed .pa-sidebar-footer-nav .uik-sidebar-nav-list > .uik-submenu-toggle .uik-submenu-caret {
  display: none !important;
}

/* Center icons in footer nav items */
html.sidebar-collapsed .pa-sidebar-footer-nav .uik-sidebar-nav-list > .uik-submenu-toggle,
html.sidebar-collapsed .pa-sidebar-footer-nav .uik-sidebar-nav-list > .uik-top-link {
  justify-content: center !important;
  gap: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Ensure all footer elements span the full collapsed rail width (~70px).
   The sidebar is flex-column, so children stretch by default, but inner
   elements (nav, grid body, nav list) need explicit width to avoid
   shrinking to content size when labels are hidden. See comment above
   for why this is necessary. */
html.sidebar-collapsed .pa-sidebar-footer {
  width: 100%;
}
html.sidebar-collapsed .pa-sidebar-footer-nav {
  width: 100%;
}
html.sidebar-collapsed .pa-footer-drawer-body {
  width: 100%;
}
html.sidebar-collapsed .pa-footer-drawer-body > .uik-sidebar-nav-list {
  width: 100%;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override the expanded drawer's padding in collapsed rail mode */
html.sidebar-collapsed .pa-footer-drawer-body.is-open > .uik-sidebar-nav-list {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ── Touch Device Adjustments ──────────────────────────────── *
 * Enlarge click targets on touch/coarse-pointer devices to meet
 * WCAG 2.5.8 Target Size guidelines (44px minimum).
 *
 * WHY 44px:
 * Apple's iOS Human Interface Guidelines and WCAG 2.5.8 (Level AAA)
 * both recommend 44x44px as the minimum touch target size. Smaller
 * targets cause frustration and errors on touchscreens, especially
 * for users with motor impairments or large fingers.
 *
 * WHY @media (pointer: coarse):
 * This media query detects devices where the primary input mechanism
 * is a coarse pointer (touchscreen, not mouse). Desktop users with
 * precise mice don't need the extra padding, so we only apply it
 * where it actually helps. This is better than user-agent sniffing
 * or screen-width breakpoints, which are unreliable.
 * ─────────────────────────────────────────────────────────── */

@media (pointer: coarse) {
  .uik-submenu .pa-menu-item {
    min-height: 44px;
    padding: 0.6rem 0.75rem;
  }

  .uik-top-link,
  .uik-submenu-toggle {
    min-height: 44px;
  }

  .pa-footer-drawer-toggle {
    min-height: 44px;
  }

  .hdr-notif-item {
    padding: 0.75rem;
  }

  .hdr-account-link {
    padding: 0.6rem 0.75rem;
  }
}

/* ── Reduced Motion ────────────────────────────────────────── *
 * Disable transitions and animations for users who prefer
 * reduced motion (vestibular disorders, motion sensitivity).
 *
 * WHY prefers-reduced-motion:
 * Some users experience nausea, dizziness, or headaches from
 * animations and transitions. This media query respects their
 * OS-level accessibility preference (set in System Preferences
 * on macOS, Settings on Windows/iOS/Android). It's a legally
 * required accessibility feature in many jurisdictions.
 *
 * WHY !important:
 * The transitions are defined inline on each selector with normal
 * specificity. To override ALL of them at once without rewriting
 * every selector with higher specificity, !important is the cleanest
 * approach. This is one of the rare cases where !important is
 * semantically correct -- accessibility overrides always win.
 * ─────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .uik-submenu-caret,
  .uik-submenu,
  .pa-footer-drawer-body,
  .pa-footer-drawer-body::before,
  .pa-footer-drawer-caret,
  .pa-footer-drawer-toggle,
  .hdr-user-btn,
  .hdr-user-caret,
  .hdr-dropdown,
  .hdr-hint-tag,
  .hdr-notif-item,
  .hdr-account-link {
    transition: none !important;
    animation: none !important;
  }
}