/* =============================================================
   PR-UI-1B — Sidebar Pane Only
   Provides .light token block + sidebar styles for the static preview.
   The existing .nav and mobile bottom tab bar are NOT modified.
   ============================================================= */

/* ── Light mode CSS variable block ───────────────────────────── */
.light {
  --background: 30 15% 97%;
  --foreground: 220 13% 16%;
  --card: 0 0% 100%;
  --card-border: 220 8% 88%;
  --border: 220 8% 86%;
  --sidebar: 30 15% 95%;
  --sidebar-foreground: 220 13% 22%;
  --sidebar-border: 220 8% 86%;
  --popover: 0 0% 100%;
  --popover-foreground: 220 13% 16%;
  --secondary: 220 10% 92%;
  --secondary-foreground: 220 13% 22%;
  --muted: 30 10% 93%;
  --muted-foreground: 220 8% 42%;
  --input: 220 8% 90%;
  /* TradeRail brand orange */
  --primary: 25 100% 50%;
  --ring: 25 100% 50%;
  --sidebar-primary: 25 100% 50%;
}

/* 200ms color transition on theme change */
html, body {
  transition: background-color 200ms ease, color 200ms ease;
}

/* ── Sidebar layout shell ─────────────────────────────────────── */
/* Only applies when our sidebar is mounted (.pui1b-mounted on body) */
body.pui1b-mounted {
  /* Push content right on desktop to make room for sidebar */
  position: relative;
}

/* ── Desktop sidebar ─────────────────────────────────────────── */
.pui1b-sidebar {
  position: fixed;
  top: var(--nav-h, 48px); /* below fixed .nav (58px tall) */
  left: 0;
  bottom: 0;
  width: 16.5rem; /* 264px when expanded */
  background: #141310;
  border-right: 1px solid rgba(255,255,255,0.1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 600; /* LOCKED: sidebar must always be visible above ALL overlays (max overlay z-index is ~520). Nav is 300. Sidebar at 600 ensures it is never covered. */
  transition: width 300ms ease;
}

.pui1b-sidebar.collapsed {
  width: 3.5rem; /* 56px icon-rail */
}

/* C6 / Mobile Rail: On mobile, field_tech has no sidebar.
   All other roles get a 56px icon-rail that starts collapsed.
   Swipe right expands to full width; swipe left collapses back. */
@media (max-width: 767px) {
  /* field_tech: no sidebar at all */
  body[data-tr-role="field_tech"] .pui1b-sidebar {
    display: none !important;
  }
  /* Cold-load fallback before TRSetRoles fires: hide to avoid flash */
  body:not([data-tr-role]) .pui1b-sidebar {
    display: none !important;
  }

  /* All other roles: show as 56px collapsed icon-rail */
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar {
    display: flex !important; /* override any desktop-only rules */
    width: 3.5rem;            /* 56px icon-rail */
    z-index: 650;             /* above everything on mobile */
    transition: width 280ms cubic-bezier(0.4,0,0.2,1), box-shadow 280ms ease;
    box-shadow: none;
    overflow: hidden;
  }

  /* Expanded state — triggered by JS adding .mobile-expanded */
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar.mobile-expanded {
    width: 16.5rem;
    box-shadow: 4px 0 32px rgba(0,0,0,0.55);
  }

  /* Push #app content right by the icon-rail width on mobile */
  body[data-tr-role]:not([data-tr-role="field_tech"]).pui1b-mounted #app {
    margin-left: 3.5rem;
    transition: margin-left 280ms cubic-bezier(0.4,0,0.2,1);
  }

  /* Hide text labels in collapsed mobile rail — show icons only */
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-nav-label,
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-group-label,
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-logo-expanded,
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-footer-info,
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-footer-caret,
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-signout-btn,
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-nav-chevron,
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-group-header {
    display: none !important;
  }

  /* Show collapsed logo icon in rail */
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-logo-collapsed {
    display: block !important;
  }

  /* Center icons in the rail */
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-nav-link,
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-nav-btn {
    justify-content: center;
    padding: 10px 0;
  }

  /* In collapsed rail, show all nav items regardless of section collapse state */
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar:not(.mobile-expanded) .pui1b-nav-list {
    display: flex !important;
    flex-direction: column;
  }

  /* Swipe handle hint on the right edge of the rail */
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 48px;
    background: rgba(255,107,0,0.45);
    border-radius: 0 3px 3px 0;
    transition: background 200ms;
  }
  body[data-tr-role]:not([data-tr-role="field_tech"]) .pui1b-sidebar.mobile-expanded::after {
    background: transparent;
  }
}

/* When sidebar is mounted: push the app content to the right.
   Also add padding-top to account for position:fixed .nav (58px tall). */
body.pui1b-mounted #app {
  padding-top: var(--nav-h, 48px);
}
@media (min-width: 768px) {
  body.pui1b-mounted #app {
    margin-left: 16.5rem;
    transition: margin-left 300ms ease;
  }
  body.pui1b-mounted.pui1b-collapsed #app {
    margin-left: 3.5rem;
  }
}

/* ── Sidebar inner content ─────────────────────────────────────── */
.pui1b-sidebar-inner {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
  /* Hide visible scrollbar — wheel/trackpad scroll preserved */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* IE 11 */
}
.pui1b-sidebar-inner::-webkit-scrollbar {
  display: none;                   /* Chrome / Safari / Edge */
}

/* Header */
.pui1b-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 8px 12px;
  flex-shrink: 0;
}
.pui1b-sidebar.collapsed .pui1b-header {
  justify-content: center;
  padding: 16px 0 12px;
}
.pui1b-logo-expanded {
  display: block;
  height: 28px;
  width: auto;
  object-fit: contain;
  flex-shrink: 0;
}
.pui1b-logo-collapsed {
  display: none;
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.pui1b-sidebar.collapsed .pui1b-logo-expanded {
  display: none;
}
.pui1b-sidebar.collapsed .pui1b-logo-collapsed {
  display: block;
}

/* Hairline divider */
.pui1b-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 0 4px 8px;
  flex-shrink: 0;
}

/* Nav groups */
.pui1b-group {
  margin-bottom: 2px;
}
.pui1b-group-label {
  font-family: 'Barlow', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  padding: 2px 10px 2px;
  user-select: none;
}
.pui1b-sidebar.collapsed .pui1b-group-label {
  display: none;
}
.pui1b-group-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 3px 4px;
}

/* Nav items */
.pui1b-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pui1b-nav-item {
  position: relative;
}
.pui1b-nav-link,
.pui1b-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 7px;
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  transition: background 150ms, color 150ms;
  white-space: nowrap;
  overflow: hidden;
}
.pui1b-nav-link:hover,
.pui1b-nav-btn:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.pui1b-nav-link.active,
.pui1b-nav-btn.active {
  background: rgba(255,107,0,0.18);
  color: #fff;
  box-shadow: inset 3px 0 0 #FF6B00;
}
.pui1b-nav-link.active .pui1b-nav-icon,
.pui1b-nav-btn.active .pui1b-nav-icon {
  opacity: 1;
  color: #FF6B00;
}
.pui1b-sidebar.collapsed .pui1b-nav-link,
.pui1b-sidebar.collapsed .pui1b-nav-btn {
  justify-content: center;
  padding: 7px 0;
}
.pui1b-nav-icon {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
}
.pui1b-nav-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pui1b-sidebar.collapsed .pui1b-nav-label {
  display: none;
}
.pui1b-nav-chevron {
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0.5;
  font-size: 11px;
}
.pui1b-sidebar.collapsed .pui1b-nav-chevron {
  display: none;
}

/* Tooltip in icon-rail mode */
.pui1b-tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #141310;
  color: #fff;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms;
  z-index: 9999;
}
.pui1b-sidebar.collapsed .pui1b-nav-item:hover .pui1b-tooltip {
  opacity: 1;
}

/* Sub-items */
.pui1b-sub-list {
  list-style: none;
  margin: 2px 0 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pui1b-sub-list.hidden { display: none; }
.pui1b-sub-link {
  display: block;
  padding: 5px 12px;
  border-radius: 6px;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: background 150ms, color 150ms;
}
.pui1b-sub-link:hover { background: rgba(255,255,255,0.07); color: #fff; }

/* Footer */
.pui1b-footer {
  flex-shrink: 0;
  padding: 4px 8px 8px;
}
.pui1b-footer-divider {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 8px;
}
.pui1b-footer-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 150ms;
}
.pui1b-footer-user:hover { background: rgba(255,255,255,0.08); }
.pui1b-sidebar.collapsed .pui1b-footer-user {
  justify-content: center;
  padding: 8px 0;
}
.pui1b-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FF6B00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.pui1b-footer-info {
  flex: 1;
  min-width: 0;
}
.pui1b-footer-name {
  font-family: 'Barlow', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  display: block;
}
.pui1b-footer-role {
  font-family: 'Barlow', sans-serif;
  font-size: 10px;
  color: rgba(255,255,255,0.4);
  text-transform: lowercase;
}
.pui1b-sidebar.collapsed .pui1b-footer-info,
.pui1b-sidebar.collapsed .pui1b-footer-caret {
  display: none;
}
.pui1b-footer-caret { color: rgba(255,255,255,0.35); font-size: 12px; }
.pui1b-signout-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,0.45);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  transition: color 0.2s, background 0.2s;
}
.pui1b-signout-btn:hover { color: #FF6B00; background: rgba(255,107,0,0.12); }
.pui1b-sidebar.collapsed .pui1b-signout-btn { display: none; }

/* ── Top bar additions ──────────────────────────────────────────── */
/* Sidebar trigger button injected into .nav */
.pui1b-nav-trigger {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms, color 150ms;
  order: -1; /* push to front in nav flex */
}
.pui1b-nav-trigger:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Theme toggle */
.pui1b-theme-toggle {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms, color 150ms;
  position: relative;
}
.pui1b-theme-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }
.pui1b-theme-toggle .pui1b-icon-moon,
.pui1b-theme-toggle .pui1b-icon-sun {
  position: absolute;
  transition: opacity 300ms, transform 300ms;
}
.pui1b-theme-toggle .pui1b-icon-sun { opacity: 0; transform: rotate(-90deg); }
.pui1b-theme-toggle.light-mode .pui1b-icon-moon { opacity: 0; transform: rotate(90deg); }
.pui1b-theme-toggle.light-mode .pui1b-icon-sun { opacity: 1; transform: rotate(0deg); }

/* ── Mobile drawer ─────────────────────────────────────────────── */
/* Backdrop */
.pui1b-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms;
}
.pui1b-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

/* Mobile drawer panel */
.pui1b-mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 16.5rem;
  background: #141310;
  z-index: 201;
  transform: translateX(-100%); /* HIDDEN on initial render — Tripwire M1 */
  transition: transform 300ms ease;
  display: flex;
  flex-direction: column;
  /* Does NOT use overflow on body directly — JS handles that */
}
/* When open via .open class */
.pui1b-mobile-drawer.open {
  transform: translateX(0);
}

/* X close button */
.pui1b-mobile-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, color 150ms;
}
.pui1b-mobile-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Hamburger in top nav — visible on mobile only */
.pui1b-hamburger {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: none; /* shown by JS when below 768px */
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 150ms, color 150ms;
  order: -1;
}
.pui1b-hamburger:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Only show hamburger on mobile, trigger on desktop */
@media (max-width: 767px) {
  .pui1b-nav-trigger { display: none !important; }
  .pui1b-hamburger { display: inline-flex; }
}
@media (min-width: 768px) {
  .pui1b-hamburger { display: none !important; }
  .pui1b-nav-trigger { display: inline-flex; }
}

/* PR-UI-1B Fix: belt-and-suspenders suppression for sidebar-adjacent controls.
   C6 fix: sidebar itself is now role-gated (field_tech only hides on mobile).
   Hamburger and mobile-drawer remain suppressed for all roles (they are not used). */
@media (max-width: 767px) {
  /* Ensure hamburger never shows (not injected on mobile, but guard anyway) */
  .pui1b-hamburger { display: none !important; }
  /* Theme toggle never shows on mobile */
  .pui1b-theme-toggle { display: none !important; }
  /* Ensure mobile drawer is completely gone (not mounted on mobile) */
  .pui1b-mobile-drawer { display: none !important; }
  /* C6: sidebar root is hidden ONLY for field_tech (handled above).
     Remove the blanket data-villa-sidebar-root hide so other roles keep it. */
  body[data-tr-role="field_tech"] [data-villa-sidebar-root] { display: none !important; }
  body:not([data-tr-role]) [data-villa-sidebar-root] { display: none !important; }
}

/* ── Hide top nav pills/tabs when sidebar is active ── */
/* The sidebar handles all navigation. #navTabs and .ntabs are redundant. */
body.pui1b-mounted #navTabs,
body.pui1b-mounted .ntabs {
  display: none !important;
}

/* ── Overlay offset: keep sidebar visible when panels open ── */
/* Full overlays (VillaShell, modals) are inset from the left
   so the sidebar stays visible behind them. Mimics Linear/Notion pattern.
   --pui1b-w-exp = expanded width (16.5rem), --pui1b-w-col = collapsed (3.5rem) */
@media (min-width: 768px) {
  body.pui1b-mounted .vs-overlay,
  body.pui1b-mounted .moverlay,
  body.pui1b-mounted #pr157PermitsPanel {
    left: 16.5rem;
    top: var(--nav-h, 48px);
    transition: left 300ms ease;
  }
  body.pui1b-mounted.pui1b-collapsed .vs-overlay,
  body.pui1b-mounted.pui1b-collapsed .moverlay,
  body.pui1b-mounted.pui1b-collapsed #pr157PermitsPanel {
    left: 3.5rem;
    top: var(--nav-h, 48px);
  }
}

/* ── pui1b-nav-link as button reset ── */
/* Nav items are now <button> elements — strip button chrome */
.pui1b-nav-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}
.pui1b-sub-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  text-align: left;
  width: 100%;
}

/* =============================================================
   PR-UI-1B PATCH — 4 cohesion fixes
   Fix 1: Sticky toggle — .nav is already sticky; raise its
          z-index above sidebar so the toggle is never occluded.
   Fix 2: Sidebar-aware panel offsets — 14 full-screen panels
          that use position:fixed;inset:0 now start right of
          the sidebar so they never render behind it.
   Fix 3: Active-state highlight syncs with home grid navigation
          (handled in pr_ui_1b_sidebar.js activeRoute calls;
          CSS rule ensures .pui1b-nav-item.active persists
          even when VillaShell fires showView from outside).
   Fix 4: Collapsed-mode tooltip visible in dark mode.
   ============================================================= */

/* ── Fix 1: Nav bar always above overlay ──────────────────────── */
/* .nav is position:sticky z-index:100; vsFullOverlay is z-index:260.
   Raise .nav to 300 so it always sits above any module overlay.
   This is the key fix that keeps the top ribbon visible at all times. */
body.pui1b-mounted .nav {
  z-index: 300;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
}

/* ── Fix 2: Full-screen panels offset by sidebar width ────────── */
/* Each selector is a panel that uses position:fixed;inset:0 and
   opens outside the main .vs-overlay shell. When the sidebar is
   mounted we shift their left edge right so they never cover or
   render behind the sidebar. Panels with z-index > 110 (sidebar)
   already paint on top of it visually — but without this fix
   their content starts at x=0 and is partially hidden behind
   the sidebar rail. */
@media (min-width: 768px) {
  body.pui1b-mounted .btw-enlarge-overlay,
  body.pui1b-mounted #drcOverlay,
  body.pui1b-mounted .hal-backdrop,
  body.pui1b-mounted .mgr-overlay,
  body.pui1b-mounted .mgr-info-overlay,
  body.pui1b-mounted .msi-info-modal,
  body.pui1b-mounted .vrfi-overlay,
  body.pui1b-mounted .phcc-overlay,
  body.pui1b-mounted .phv9-expanded,
  body.pui1b-mounted .phv9-modal,
  body.pui1b-mounted .phv9-overlay-shell,
  body.pui1b-mounted .psr-perm-modal,
  body.pui1b-mounted .psr-appr-overlay,
  body.pui1b-mounted .pcrh-overlay,
  body.pui1b-mounted .vmf-conflict-overlay,
  body.pui1b-mounted .sv4-modal-overlay,
  body.pui1b-mounted .sjs-modal,
  body.pui1b-mounted .tc-pw-bd,
  /* PR218 — Team Hub overlay + profile overlay */
  body.pui1b-mounted #pr218-team-hub-overlay,
  body.pui1b-mounted .pr218-profile-overlay,
  /* PR219 — Module 3 Wizard overlay */
  body.pui1b-mounted #pr219-m3-wizard-overlay {
    left: 16.5rem;
    top: var(--nav-h, 48px);
    transition: left 300ms ease;
  }
  body.pui1b-mounted.pui1b-collapsed .btw-enlarge-overlay,
  body.pui1b-mounted.pui1b-collapsed #drcOverlay,
  body.pui1b-mounted.pui1b-collapsed .hal-backdrop,
  body.pui1b-mounted.pui1b-collapsed .mgr-overlay,
  body.pui1b-mounted.pui1b-collapsed .mgr-info-overlay,
  body.pui1b-mounted.pui1b-collapsed .msi-info-modal,
  body.pui1b-mounted.pui1b-collapsed .vrfi-overlay,
  body.pui1b-mounted.pui1b-collapsed .phcc-overlay,
  body.pui1b-mounted.pui1b-collapsed .phv9-expanded,
  body.pui1b-mounted.pui1b-collapsed .phv9-modal,
  body.pui1b-mounted.pui1b-collapsed .phv9-overlay-shell,
  body.pui1b-mounted.pui1b-collapsed .psr-perm-modal,
  body.pui1b-mounted.pui1b-collapsed .psr-appr-overlay,
  body.pui1b-mounted.pui1b-collapsed .pcrh-overlay,
  body.pui1b-mounted.pui1b-collapsed .vmf-conflict-overlay,
  body.pui1b-mounted.pui1b-collapsed .sv4-modal-overlay,
  body.pui1b-mounted.pui1b-collapsed .sjs-modal,
  body.pui1b-mounted.pui1b-collapsed .tc-pw-bd,
  /* PR218 collapsed */
  body.pui1b-mounted.pui1b-collapsed #pr218-team-hub-overlay,
  body.pui1b-mounted.pui1b-collapsed .pr218-profile-overlay,
  /* PR219 collapsed */
  body.pui1b-mounted.pui1b-collapsed #pr219-m3-wizard-overlay {
    left: 3.5rem;
    top: var(--nav-h, 48px);
  }
}

/* ── Fix 3: Active-state persists for externally triggered nav ── */
/* When showView() is called from a home grid tile or any JS
   outside the sidebar, the .pui1b-nav-item.active class is set
   by sidebarNavigate(). This rule ensures the visual treatment
   is always applied regardless of how navigation was triggered. */
.pui1b-nav-item.active > .pui1b-nav-link {
  background: rgba(42, 157, 143, 0.15);
  color: #FF6B00;
  border-left: 3px solid #FF6B00;
}
.pui1b-nav-item.active > .pui1b-nav-link .pui1b-nav-icon {
  color: #FF6B00;
}

/* ── Fix 4: Collapsed tooltip visible in dark mode ────────────── */
/* Dark mode: sidebar bg is #141310; original tooltip bg matched
   it exactly, making tooltips invisible. Now uses a lighter navy
   with a visible border so tooltips stand out against the rail. */
.pui1b-tooltip {
  background: #1a3a5c;
  border: 1px solid rgba(255,255,255,0.18);
  color: #f0f4f8;
}
/* Light mode override — keep tooltip dark for contrast */
html.light .pui1b-tooltip {
  background: #141310;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff;
}

/* =============================================================
   FLOATING TOGGLE — always visible regardless of scroll position
   Sits at the right edge of the sidebar, vertically centered.
   Slides left when sidebar collapses so it always hugs the edge.
   Desktop only — hidden below 768px (mobile has bottom tab bar).
   ============================================================= */
@media (min-width: 768px) {
  .pui1b-float-toggle {
    position: fixed;
    top: 50%;
    left: 16.5rem; /* flush with sidebar right edge when expanded */
    transform: translateY(-50%) translateX(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--navy, #141310);
    border: 2px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 120; /* above sidebar (110) */
    transition: left 300ms ease, background 150ms, color 150ms, opacity 150ms;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
    opacity: 0.85;
  }
  .pui1b-float-toggle:hover {
    background: #1a3a5c;
    color: #fff;
    opacity: 1;
  }
  /* Collapsed state — slide to collapsed sidebar edge */
  body.pui1b-collapsed .pui1b-float-toggle {
    left: 3.5rem;
  }
  /* When sidebar is not mounted at all — hide the button */
  body:not(.pui1b-mounted) .pui1b-float-toggle {
    display: none;
  }
}
/* Always hidden on mobile */
@media (max-width: 767px) {
  .pui1b-float-toggle {
    display: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────────────
   PR238 — Collapsible section groups
   ───────────────────────────────────────────────────────────────────────────── */

.pui1b-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px 10px 2px;
  gap: 4px;
  font-family: 'Barlow', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  user-select: none;
  line-height: 1.4;
}

.pui1b-group-header:hover {
  color: rgba(255,255,255,0.60);
}

.pui1b-group-header:hover .pui1b-group-chevron {
  opacity: 0.8;
}

.pui1b-group-chevron {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.45;
}

.pui1b-group-chevron svg {
  display: block;
}

/* Icon-rail collapsed: hide section headers (same as existing label hide) */
.pui1b-sidebar.collapsed .pui1b-group-header {
  display: none;
}

/* Collapsed section list — hidden */
.pui1b-nav-list.pui1b-sec-collapsed {
  display: none;
}

/* Non-collapsed — ensure flex (existing value) */
.pui1b-nav-list:not(.pui1b-sec-collapsed) {
  display: flex;
}

/* Icon-rail: always show all items even if section was collapsed */
.pui1b-sidebar.collapsed .pui1b-nav-list.pui1b-sec-collapsed {
  display: flex;
}