/* ============================================================================
   nav-rail.css — SINGLE SOURCE OF TRUTH for the left navigation rail.

   Styles BOTH portals' rails from one place so they are guaranteed identical:
     • Patient portal:  .sidebar / .sidebar-nav-group / .nav-icon / …
     • Clinic admin:     .admin-sidebar / .sb-section / .sb-item / …

   Loaded by main.ejs AND admin.ejs, AFTER the portal stylesheet, so it is
   authoritative for every shared property.

   Values are HARDCODED here (not portal design tokens) on purpose: the two
   portals define some tokens differently — e.g. --radius-lg is 16px in the
   patient portal but 12px in admin — so relying on tokens is exactly what
   made the rails drift. The only token used is --page-bg (shared in
   base-tokens.css) so the rail tracks the page background in both portals.

   Display / responsive behaviour stays in each portal's own file (the patient
   rail is hidden below 1024px; the admin rail lives inside a CSS grid), so
   this file deliberately does NOT set `display` on the container.
   ============================================================================ */

/* ── Rail container ───────────────────────────────────────────────────────── */
.sidebar, body[data-design="dash"] .admin-sidebar {

  width: 72px;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  padding: 24px 8px;
  background: var(--page-bg);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-sticky, 60);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* Promote to GPU composite layer to avoid repaint overhead on scroll */
  will-change: transform;
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

}

/* `display` is set per-portal, NOT in the shared rule above: the patient
   .sidebar is display:none on mobile → flex ≥1024px (pages.css media query),
   while the admin rail is always a flex column. */
body[data-design="dash"] .admin-sidebar {
 display: flex; 
}


/* ── Logo / brand mark — pinned to the top ───────────────────────────────── */
.sidebar-logo, body[data-design="dash"] .sb-brand {

  position: absolute;
  top: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;

}


/* ── Pill containers (nav group + bottom group / account) ────────────────── */
.sidebar-nav-group, .sidebar-bottom-group, body[data-design="dash"] .sb-section, body[data-design="dash"] .sb-account {

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px;
  background: #FFFFFF;
  border: 1px solid #E8E4DF;
  border-radius: 24px;
  box-shadow: 0 1px 3px rgba(26, 43, 60, 0.04);
  list-style: none; /* admin .sb-account is a <details> */

}

/* Bottom pill is pinned to the bottom of the rail. */
.sidebar-bottom-group, body[data-design="dash"] .sb-account {

  position: absolute;
  bottom: 24px;

}


/* ── Icon buttons ────────────────────────────────────────────────────────── */
.nav-icon, body[data-design="dash"] .sb-item {

  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #9a9a95;
  position: relative;
  transition: all 200ms ease;

}

.nav-icon:hover, body[data-design="dash"] .sb-item:hover {

  color: #2b3039;
  background: var(--page-bg);

}

.nav-icon.active {

  background: #2b3039;
  color: #FFFFFF;
  box-shadow: none;

}


/* Custom focus indicator — resolves browser default outline stretching bug around tooltips */
.nav-icon:focus, body[data-design="dash"] .sb-item:focus, .sidebar-logo:focus, body[data-design="dash"] .sb-brand:focus {

  outline: none;

}

.nav-icon:focus-visible, body[data-design="dash"] .sb-item:focus-visible, .sidebar-logo:focus-visible, body[data-design="dash"] .sb-brand:focus-visible {

  box-shadow: 0 0 0 2px currentColor;

}



/* ── Glyphs — 20px, inherit the button colour via currentColor ───────────── */
.nav-icon svg, body[data-design="dash"] .sb-item__icon {

  width: 20px;
  height: 20px;

}

body[data-design="dash"] .sb-item__icon {

  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;

}

body[data-design="dash"] .sb-item__icon svg {
 width: 100%; height: 100%; 
}


/* ── Tooltips — label to the right, no caret (matches the patient rail) ───── */
.nav-icon[data-tooltip]::after, body[data-design="dash"] .sb-item[data-tooltip]::after {

  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: #2b3039;
  color: #FFFFFF;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 200ms ease;
  pointer-events: none;
  z-index: var(--z-raised, 100);

}

.nav-icon:hover[data-tooltip]::after, body[data-design="dash"] .sb-item[data-tooltip]:hover::after {

  opacity: 1;
  visibility: visible;

}

/* The admin rail previously drew a caret arrow on its tooltips; the patient
   rail has none, so suppress it for a 1:1 match. */
body[data-design="dash"] .sb-item[data-tooltip]::before {
 display: none; 
}


/* ════════════════════════════════════════════════════════════════════════
   DARK MODE — admin only (the patient portal has no dark theme, so these
   rules never match there). The rail canvas already follows --page-bg
   (#161616 in dark). Here we darken the white pills + light borders, mute
   the icons, and INVERT the active fill (light pill + dark glyph — the
   mirror of light mode's dark pill + white glyph).
   ════════════════════════════════════════════════════════════════════════ */
body[data-theme="dark"][data-design="dash"] .sb-section, body[data-theme="dark"][data-design="dash"] .sb-account {

  background: #1F1F1F;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: none;

}

body[data-theme="dark"][data-design="dash"] .sb-item {
 color: rgba(255, 255, 255, 0.55); 
}

body[data-theme="dark"][data-design="dash"] .sb-item:hover {

  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;

}

body[data-theme="dark"][data-design="dash"] .sb-item--active .sb-item__icon {
 color: #161616; 
}

body[data-theme="dark"][data-design="dash"] .sb-item[data-tooltip]::after {
 background: #FFFFFF; color: #161616; 
}


/* ── Help Popover Dropdown Menu ──────────────────────────────────────────── */
.help-popover {

  position: absolute;
  left: 62px;
  bottom: 0;
  width: 180px;
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--border-light, #E8E4DF);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  padding: 14px 16px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: popoverIn 0.2s ease;
  /* Promote to GPU composite layer for smooth animations and scrolling */
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

}

@keyframes popoverIn {

  from {
 opacity: 0; transform: scale(0.95) translateX(-8px); 
}

  to {
 opacity: 1; transform: scale(1) translateX(0); 
}


}

.help-popover.hidden {

  display: none;

}

.help-popover__section {

  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
  align-items: flex-start;
  width: 100%;

}

.help-popover__title {

  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold, 700);
  color: var(--text-faint, #A8A49E);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 2px;

}

.help-popover__link {

  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-secondary, #666);
  text-decoration: none;
  padding: 2px 0;
  transition: color 0.15s ease;
  display: inline-block;
  width: 100%;
  text-align: left;

}

.help-popover__link:hover {

  color: var(--primary, #00A67E);

}

.help-popover__link.active {

  color: var(--primary, #00A67E);
  font-weight: var(--weight-bold, 700);

}

.help-popover__section--clinics {

  background: #FAFBF8;
  border-top: 1px solid var(--border-light, #E8E4DF);
  border-radius: 0 0 16px 16px;
  padding: 14px 16px;
  margin: 6px -16px -14px -16px;
  width: calc(100% + 32px);

}

body[data-theme="dark"] .help-popover__section--clinics {

  background: rgba(255, 255, 255, 0.02);
  border-top-color: rgba(255, 255, 255, 0.08);

}


/* Suppress standard tooltip when help menu is open/active */
.nav-icon.active[data-tooltip]::after {

  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;

}

/* Clinic Admin Tablet Viewport Overrides (769px - 900px) */
@media (max-width: 900px) and (min-width: 769px) {
  body[data-design="dash"] .admin-shell, 
  body[data-design="dash"] .admin-shell.no-rightbar {
    grid-template-columns: 72px 1fr !important;
    grid-template-areas: "sidebar main" !important;
  }
  body[data-design="dash"] .admin-sidebar {
    display: flex !important;
  }
}