/* ============================================================
   ACC base — reset, typography, and layout primitives.
   Loaded AFTER tokens.css.
   ============================================================ */

@import url("tokens-gaS0iNO.css");

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

/* The HTML `hidden` attribute is implemented in the UA stylesheet as
   `[hidden] { display: none }` (specificity 0,1,0). Any author rule
   like `.acc-sidebar__menu-panel { display: flex }` ties on
   specificity AND comes later in the cascade, which makes
   `element.hidden = true` a silent no-op visually — the panel stays
   on screen even though Stimulus thinks it closed it. This bit the
   `+ Add` and workspace-dropdown panels in production (they got
   stuck open). `!important` is the right hammer here: HTML's `hidden`
   is supposed to be universal and must beat any author `display:`. */
[hidden] { display: none !important; }
html {
  font-family: var(--acc-font-sans);
  font-size: var(--acc-text-base);
  line-height: var(--acc-leading-normal);
  color: var(--acc-text-primary);
  background: var(--acc-surface-app);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}
body { min-height: 100%; background: var(--acc-surface-app); color: var(--acc-text-primary); }

img, video { display: block; max-width: 100%; }
/* SVGs: leave inline-block by default so they sit comfortably next
   to text in buttons/labels. Width/height set by the markup or a
   parent class — the global max-width: 100% used to make unsized
   SVGs blow up to fill flex parents (notably empty-state pages). */
svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }
.acc-empty__icon > svg,
.acc-icon-chip > svg,
.acc-stat__icon > svg,
.acc-sidebar__link-icon { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acc-action); text-decoration: none; }
a:hover { color: var(--acc-action-hover); }

/* V1 mirrors shadcn: every heading uses the display family. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--acc-font-display);
  letter-spacing: -0.025em;
  color: var(--acc-text-primary);
}

::selection { background: var(--acc-color-amber-200); color: var(--acc-color-slate-900); }
[data-theme="dark"] ::selection { background: rgba(230, 200, 74, 0.40); color: #fff; }

/* ── Typography ────────────────────────────────────────── */
.acc-title       { font-family: var(--acc-font-display); font-size: var(--acc-text-xl);  font-weight: var(--acc-weight-semibold); letter-spacing: -0.02em; line-height: var(--acc-leading-tight); color: var(--acc-text-primary); margin: 0; }
.acc-title--lg   { font-size: var(--acc-text-2xl); letter-spacing: -0.025em; }
.acc-title--xl   { font-size: var(--acc-text-3xl); letter-spacing: -0.03em; font-weight: var(--acc-weight-bold); }
.acc-subtitle    { font-size: var(--acc-text-base); color: var(--acc-text-secondary); margin: 4px 0 0; }
.acc-eyebrow     { font-size: var(--acc-text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--acc-weight-semibold); color: var(--acc-text-tertiary); }
.acc-mono        { font-family: var(--acc-font-mono); font-size: 0.92em; }
.acc-num         { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ── Layout primitives ─────────────────────────────────── */
.acc-stack { display: flex; flex-direction: column; gap: var(--acc-space-4); }
.acc-stack--xs { gap: var(--acc-space-2); }
.acc-stack--sm { gap: var(--acc-space-3); }
.acc-stack--md { gap: var(--acc-space-4); }
.acc-stack--lg { gap: var(--acc-space-6); }
.acc-stack--xl { gap: var(--acc-space-8); }

.acc-row { display: flex; align-items: center; gap: var(--acc-space-3); }
.acc-row--between { justify-content: space-between; }
.acc-row--end { justify-content: flex-end; }
.acc-row--baseline { align-items: baseline; }
.acc-row--wrap { flex-wrap: wrap; }
.acc-row--gap-sm { gap: var(--acc-space-2); }
.acc-row--gap-lg { gap: var(--acc-space-6); }

.acc-grid { display: grid; gap: var(--acc-space-4); }
.acc-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.acc-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.acc-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.acc-grid--auto-md { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
@media (max-width: 900px) {
  .acc-grid--3, .acc-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .acc-grid--2, .acc-grid--3, .acc-grid--4 { grid-template-columns: 1fr; }
}

.acc-divider { height: 1px; background: var(--acc-border-subtle); border: 0; margin: var(--acc-space-4) 0; }

/* ── Shell ──────────────────────────────────────────────
   Sidebar + topbar + content frame. The base.html.twig
   uses these classes directly.
   ─────────────────────────────────────────────────────── */
.acc-shell { display: flex; min-height: 100vh; background: var(--acc-surface-app); }
.acc-shell__sidebar {
  width: var(--acc-shell-sidebar-w);
  background: var(--acc-surface-shell);
  color: var(--acc-text-on-shell);
  position: fixed; inset: 0 auto 0 0; z-index: 40;
  display: flex; flex-direction: column;
  border-right: 1px solid var(--acc-border-shell);
}

/* Resize handle — sits on the right edge of the sidebar; thin and
   barely visible until hover. V1 uses react-resizable-panels with
   a w-1.5 hover:bg-primary/30 strip. */
.acc-shell__sidebar-resize {
  position: absolute;
  top: 0; bottom: 0;
  right: -3px;
  width: 6px;
  cursor: col-resize;
  z-index: 41;
  background: transparent;
  transition: background var(--acc-duration-fast) var(--acc-ease);
}
.acc-shell__sidebar-resize::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: transparent;
  transition: background var(--acc-duration-fast) var(--acc-ease);
}
.acc-shell__sidebar-resize:hover::after,
.acc-shell--sidebar-resizing .acc-shell__sidebar-resize::after {
  background: var(--acc-color-amber-500);
  width: 2px;
}
/* Hide the handle when collapsed (rail is a fixed 12px) or on mobile */
.acc-shell--sidebar-collapsed .acc-shell__sidebar-resize { display: none; }
@media (max-width: 1024px) {
  .acc-shell__sidebar-resize { display: none; }
}
/* While resizing, suspend the smooth width transition so dragging
   feels instant rather than chasing the cursor. */
.acc-shell--sidebar-resizing .acc-shell__sidebar,
.acc-shell--sidebar-resizing .acc-shell__main {
  transition: none !important;
}
.acc-shell__main {
  margin-left: var(--acc-shell-sidebar-w);
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  min-height: 100vh;
}
.acc-shell__topbar {
  position: sticky; top: 0; z-index: 30;
  height: var(--acc-shell-topbar-h);
  display: flex; align-items: center; gap: var(--acc-space-4);
  /* Slightly larger right padding so the rightmost icon button
     (user avatar) doesn't kiss the viewport edge. Left padding
     stays at space-6 for parity with the sidebar's 20-px brand pad. */
  padding: 0 var(--acc-space-8) 0 var(--acc-space-6);
  background: color-mix(in srgb, var(--acc-surface-canvas) 96%, transparent);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--acc-border-subtle);
}
.acc-shell__content {
  flex: 1;
  padding: var(--acc-space-6) var(--acc-space-8);
  max-width: var(--acc-content-max-w);
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .acc-shell__sidebar { transform: translateX(-100%); transition: transform var(--acc-duration-base) var(--acc-ease); }
  .acc-shell--sidebar-open .acc-shell__sidebar { transform: translateX(0); box-shadow: var(--acc-shadow-xl); }
  .acc-shell__main { margin-left: 0; }
  .acc-shell__sidebar-overlay { display: none; position: fixed; inset: 0; background: var(--acc-surface-overlay); z-index: 39; }
  .acc-shell--sidebar-open .acc-shell__sidebar-overlay { display: block; }
}

/* ── Sidebar internals ─────────────────────────────────── */
.acc-sidebar__brand {
  display: flex; align-items: center; justify-content: center; gap: var(--acc-space-3);
  /* Slightly taller than the topbar (56 px) so a 44 px wordmark
     reads cleanly with breathing room. Logo is centered both axes. */
  height: 72px;
  padding: var(--acc-space-3) var(--acc-space-4);
  border-bottom: 1px solid var(--acc-border-shell);
  flex-shrink: 0;
}
.acc-sidebar__brand-mark {
  width: 32px; height: 32px; border-radius: var(--acc-radius-md);
  display: grid; place-items: center;
  background: var(--acc-surface-shell-brand);
  color: #fff; font-family: var(--acc-font-display);
  font-weight: var(--acc-weight-bold); font-size: var(--acc-text-sm);
  letter-spacing: -0.02em;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.20) inset, 0 4px 10px -2px rgba(189,152,42,0.35);
}
.acc-sidebar__brand-name {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-md); font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-on-shell-strong); letter-spacing: -0.015em;
}
.acc-sidebar__brand-tenant { font-size: var(--acc-text-xs); color: var(--acc-text-on-shell-muted); }

.acc-sidebar__nav { flex: 1; overflow-y: auto; padding: var(--acc-space-4) var(--acc-space-3); }
.acc-sidebar__nav::-webkit-scrollbar { width: 4px; }
.acc-sidebar__nav::-webkit-scrollbar-thumb { background: var(--acc-border-subtle); border-radius: 4px; }
[data-theme="dark"] .acc-sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); }

.acc-sidebar__section { margin-top: var(--acc-space-4); }
.acc-sidebar__section:first-child { margin-top: 0; }
.acc-sidebar__section-head {
  margin-bottom: var(--acc-space-1);
}
.acc-sidebar__section-toggle {
  width: 100%;
  display: flex; align-items: center; gap: 6px;
  padding: 4px var(--acc-space-3);
  background: transparent; border: 0;
  cursor: pointer; color: inherit;
  border-radius: var(--acc-radius-sm);
  transition: background var(--acc-duration-fast);
}
.acc-sidebar__section-toggle:hover { background: var(--acc-surface-shell-hover); }
.acc-sidebar__section-chevron {
  color: var(--acc-text-on-shell-muted);
  transition: transform var(--acc-duration-fast) var(--acc-ease);
  flex-shrink: 0;
}
.acc-sidebar__section--collapsed .acc-sidebar__section-chevron { transform: rotate(-90deg); }
.acc-sidebar__section--collapsed .acc-sidebar__section-body { display: none; }
.acc-sidebar__section-label {
  font-size: 10px; font-weight: var(--acc-weight-bold);
  text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--acc-text-on-shell-muted);
}
.acc-sidebar__section-body { display: flex; flex-direction: column; gap: 1px; }

/* Star button + row container */
.acc-sidebar__row {
  display: flex; align-items: stretch;
  position: relative;
  border-radius: var(--acc-radius-md);
}
.acc-sidebar__row:hover .acc-sidebar__star { opacity: 1; }
.acc-sidebar__star {
  display: grid; place-items: center;
  width: 28px;
  flex-shrink: 0;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  color: var(--acc-text-on-shell-muted);
  opacity: 0;
  transition: opacity var(--acc-duration-fast), color var(--acc-duration-fast);
  border-radius: var(--acc-radius-sm);
}
.acc-sidebar__star:hover { color: var(--acc-color-amber-500); }
.acc-sidebar__star--active {
  opacity: 1;
  color: var(--acc-color-amber-500);
}
.acc-sidebar__star--active svg { fill: currentColor; }
[data-theme="dark"] .acc-sidebar__star--active { color: var(--acc-color-amber-d-400); }

/* Lock icon for plan-gated rows */
.acc-sidebar__lock-icon {
  margin-left: auto;
  color: var(--acc-text-on-shell-muted);
  opacity: 0.7;
  flex-shrink: 0;
}
.acc-sidebar__link--locked { opacity: 0.55; }

/* Hint text inside favorites empty state */
.acc-sidebar__hint {
  padding: 6px var(--acc-space-3);
  font-size: var(--acc-text-xs);
  color: var(--acc-text-on-shell-muted);
  font-style: italic;
}

/* ── Sidebar search input ──────────────────────────────
   Sits between brand and nav. Mirrors the input styling
   used in the rest of the app but tuned for the sidebar
   palette. The clear-X button is hidden until the user
   has typed something (controller toggles `hidden`). */
.acc-sidebar__search {
  position: relative;
  display: flex; align-items: center;
  margin: 0 var(--acc-space-3) var(--acc-space-3);
  background: var(--acc-surface-shell-hover);
  border: 1px solid var(--acc-border-shell);
  border-radius: var(--acc-radius-md);
  transition: border-color var(--acc-duration-fast), background var(--acc-duration-fast);
}
.acc-sidebar__search:focus-within {
  border-color: var(--acc-color-amber-500);
  background: var(--acc-surface-shell);
  box-shadow: 0 0 0 3px rgba(189, 152, 42, 0.15);
}
.acc-sidebar__search-icon {
  margin-left: var(--acc-space-3);
  flex-shrink: 0;
  color: var(--acc-text-on-shell-muted);
}
.acc-sidebar__search-input {
  flex: 1; min-width: 0;
  padding: 6px var(--acc-space-2);
  background: transparent;
  border: 0;
  color: var(--acc-text-on-shell-strong);
  font-size: var(--acc-text-sm);
  font-family: inherit;
}
.acc-sidebar__search-input:focus { outline: none; }
.acc-sidebar__search-input::placeholder { color: var(--acc-text-on-shell-muted); }
/* Hide native search clear; we render our own */
.acc-sidebar__search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
.acc-sidebar__search-clear {
  margin-right: 6px;
  padding: 2px;
  display: grid; place-items: center;
  background: transparent; border: 0;
  color: var(--acc-text-on-shell-muted);
  cursor: pointer;
  border-radius: var(--acc-radius-sm);
}
.acc-sidebar__search-clear:hover {
  background: var(--acc-surface-shell);
  color: var(--acc-text-on-shell-strong);
}

/* ── Hide button (eye → eye-off) ───────────────────────
   Mirrors the star button's hover-revealed pattern but
   sits on the row's far right with subtler visual weight.
   When `--active` (the row is currently hidden), it stays
   visible inside the Hidden mirror section as the unhide
   affordance. */
.acc-sidebar__row:hover .acc-sidebar__hide { opacity: 1; }
.acc-sidebar__hide {
  display: grid; place-items: center;
  width: 26px;
  flex-shrink: 0;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  color: var(--acc-text-on-shell-muted);
  opacity: 0;
  transition: opacity var(--acc-duration-fast), color var(--acc-duration-fast), background var(--acc-duration-fast);
  border-radius: var(--acc-radius-sm);
}
.acc-sidebar__hide:hover {
  color: var(--acc-text-on-shell-strong);
  background: var(--acc-surface-shell-hover);
}
.acc-sidebar__hide--unhide,
.acc-sidebar__hide--active {
  opacity: 1;
  color: var(--acc-text-on-shell-muted);
}

/* Filter-driven hidden rows (sidebar search) */
.acc-sidebar__row--filter-hidden { display: none; }

/* User-hidden rows in their original section. The Hidden
   section's mirror copies use a different class so they
   stay visible when expanded. */
.acc-sidebar__row--hidden { display: none; }
.acc-sidebar__section--hidden-bin .acc-sidebar__row--unhide-mirror { display: flex; }

/* Hidden-section mirror rows in the Hidden bin. Same row layout
   as item mirrors but the label is a span (not a link), so
   nothing is clickable except the restore button. The "Section"
   badge tells the user this row will restore an entire group. */
.acc-sidebar__row--unhide-section .acc-sidebar__link { cursor: default; }
.acc-sidebar__row-meta-badge {
  margin-left: auto;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--acc-text-on-shell-muted);
  background: var(--acc-surface-shell-hover);
  padding: 1px 6px;
  border-radius: var(--acc-radius-full);
  flex-shrink: 0;
}

/* Section whose every row got filtered out — dim the head
   so user can still see "no matches in Workforce" without
   the section disappearing. */
.acc-sidebar__section--filter-empty .acc-sidebar__section-head { opacity: 0.4; }
.acc-sidebar__section--filter-empty .acc-sidebar__section-body { display: none; }

/* Recent section's rendered links — slightly muted vs the
   primary nav so the user reads them as "shortcut, not the
   real entry". */
.acc-sidebar__link--recent .acc-sidebar__link-icon { opacity: 0.7; }

/* Hidden-section count badge — tiny pill on the head */
.acc-sidebar__section-count {
  margin-left: auto;
  padding: 1px 6px;
  font-size: var(--acc-text-xs);
  font-weight: var(--acc-weight-medium);
  background: var(--acc-surface-shell-hover);
  color: var(--acc-text-on-shell-muted);
  border-radius: var(--acc-radius-pill);
}

/* Drag-handle dots (favorites only) */
.acc-sidebar__drag-handle {
  width: 10px; height: 14px;
  flex-shrink: 0;
  color: var(--acc-text-on-shell-muted);
  cursor: grab;
  opacity: 0.5;
}
.acc-sidebar__link--draggable { cursor: grab; }
.acc-sidebar__link--dragging { opacity: 0.4; }
.acc-sidebar__link--drop-target { box-shadow: inset 0 -2px 0 0 var(--acc-color-amber-500); }

/* Rail-toggle button (full collapse / expand) */
.acc-sidebar__rail-toggle {
  display: flex; align-items: center; gap: var(--acc-space-2);
  width: 100%;
  padding: 6px var(--acc-space-3);
  background: transparent; border: 1px solid transparent;
  border-radius: var(--acc-radius-md);
  color: var(--acc-text-on-shell-muted);
  font-size: var(--acc-text-xs); font-weight: var(--acc-weight-medium);
  cursor: pointer;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-sidebar__rail-toggle:hover {
  background: var(--acc-surface-shell-hover);
  color: var(--acc-text-on-shell-strong);
}
.acc-sidebar__rail-icon--collapsed { display: none; }
.acc-shell--sidebar-collapsed .acc-sidebar__rail-icon--expanded { display: none; }
.acc-shell--sidebar-collapsed .acc-sidebar__rail-icon--collapsed { display: inline; }

/* Collapsed-rail mode — V1 spec: 12-px hit-target strip, no icons.
   Hovering the strip expands a floating sidebar overlay (see
   .acc-shell--sidebar-hover-expanded below). */
.acc-shell--sidebar-collapsed .acc-shell__sidebar {
  width: 12px;
  transition: width var(--acc-duration-base) var(--acc-ease);
  background: var(--acc-border-shell);
  cursor: pointer;
  overflow: hidden;
}
.acc-shell--sidebar-collapsed .acc-shell__sidebar:hover {
  background: var(--acc-border-default);
}
.acc-shell--sidebar-collapsed .acc-shell__main {
  margin-left: 12px;
  transition: margin-left var(--acc-duration-base) var(--acc-ease);
}
/* Vertical pill indicator on the collapsed rail — visual cue that
   the strip is interactive. Shown only when collapsed AND not
   hovered (the floating sidebar takes over on hover). */
.acc-shell--sidebar-collapsed .acc-shell__sidebar::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 32px;
  border-radius: var(--acc-radius-full);
  background: var(--acc-text-on-shell-muted);
  opacity: 0.45;
  pointer-events: none;
}
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-shell__sidebar::before {
  opacity: 0;
}

/* Hover-expand — temporarily widens the collapsed rail without
   changing the persisted state. Body class set by sidebar Stimulus
   controller on mouseenter (≥1024px only). */
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-shell__sidebar {
  width: var(--acc-shell-sidebar-w);
  box-shadow: var(--acc-shadow-lg);
  z-index: 50;
}
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-shell__sidebar {
  background: var(--acc-surface-shell);
  cursor: default;
}
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-shell__main {
  /* Keep the main content where it was; the sidebar floats on top so
     a brief hover doesn't reflow the page. The visible rail stays
     at 12px width so the layout doesn't shift. */
  margin-left: 12px;
}
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__brand-text,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__section-label,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__section-chevron,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__link-label,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__lock-icon,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__hint,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__user-text,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__rail-label {
  display: revert;
}
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__brand,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__section-toggle,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__rail-toggle {
  justify-content: flex-start;
  padding-left: var(--acc-space-5);
}
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__link {
  justify-content: flex-start;
  padding: 7px var(--acc-space-3);
}
.acc-shell--sidebar-collapsed .acc-sidebar__brand-text,
.acc-shell--sidebar-collapsed .acc-sidebar__section-label,
.acc-shell--sidebar-collapsed .acc-sidebar__section-chevron,
.acc-shell--sidebar-collapsed .acc-sidebar__link-label,
.acc-shell--sidebar-collapsed .acc-sidebar__lock-icon,
.acc-shell--sidebar-collapsed .acc-sidebar__star,
.acc-shell--sidebar-collapsed .acc-sidebar__hint,
.acc-shell--sidebar-collapsed .acc-sidebar__drag-handle,
.acc-shell--sidebar-collapsed .acc-sidebar__user-text,
.acc-shell--sidebar-collapsed .acc-sidebar__rail-label {
  display: none;
}
/* The collapsed-rail is now 12px and shows ONLY the vertical-pill
   indicator (via ::before above). Every interactive child is hidden
   so the strip is purely a hover hit-target. */
.acc-shell--sidebar-collapsed .acc-sidebar__brand,
.acc-shell--sidebar-collapsed .acc-sidebar__nav,
.acc-shell--sidebar-collapsed .acc-sidebar__footer {
  display: none;
}
/* Restore them inside the hover-expanded floating overlay. */
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__brand,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__nav,
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__footer {
  display: flex;
}
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__nav {
  flex-direction: column;
}
@media (max-width: 1024px) {
  /* On mobile, the rail-collapse mode is irrelevant — the sidebar
     uses the slide-in drawer (acc-shell--sidebar-open) instead.
     Fully restore everything in the rail so a desktop user dragging
     the window narrow doesn't see the 12-px strip. */
  .acc-shell--sidebar-collapsed .acc-shell__sidebar {
    width: var(--acc-shell-sidebar-w);
    background: var(--acc-surface-shell);
    cursor: default;
    overflow: visible;
  }
  .acc-shell--sidebar-collapsed .acc-shell__sidebar::before { display: none; }
  .acc-shell--sidebar-collapsed .acc-shell__main { margin-left: 0; }
  .acc-shell--sidebar-collapsed .acc-sidebar__brand,
  .acc-shell--sidebar-collapsed .acc-sidebar__nav,
  .acc-shell--sidebar-collapsed .acc-sidebar__footer { display: flex; }
  .acc-shell--sidebar-collapsed .acc-sidebar__nav { flex-direction: column; }
  .acc-shell--sidebar-collapsed .acc-sidebar__brand-text,
  .acc-shell--sidebar-collapsed .acc-sidebar__section-label,
  .acc-shell--sidebar-collapsed .acc-sidebar__section-chevron,
  .acc-shell--sidebar-collapsed .acc-sidebar__link-label,
  .acc-shell--sidebar-collapsed .acc-sidebar__lock-icon,
  .acc-shell--sidebar-collapsed .acc-sidebar__hint,
  .acc-shell--sidebar-collapsed .acc-sidebar__drag-handle,
  .acc-shell--sidebar-collapsed .acc-sidebar__user-text,
  .acc-shell--sidebar-collapsed .acc-sidebar__rail-label { display: revert; }
  .acc-shell--sidebar-collapsed .acc-sidebar__star { display: grid; }
}
.acc-sidebar__link {
  position: relative;
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 7px var(--acc-space-3);
  border-radius: var(--acc-radius-md);
  color: var(--acc-text-on-shell);
  font-size: var(--acc-text-base); font-weight: var(--acc-weight-medium);
  transition: background var(--acc-duration-fast) var(--acc-ease), color var(--acc-duration-fast);
  flex: 1; min-width: 0;
}
.acc-sidebar__link-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-sidebar__link:hover {
  background: var(--acc-surface-shell-hover);
  color: var(--acc-text-on-shell-strong);
}
/* Active page row — the row whose route matches the current page.
   Three layered cues so the user can spot the current location at
   a glance: amber-tinted background, bold + amber text, and a
   solid 3-px amber bar on the left inside-edge of the row. The
   bar lives at left:0 (not -4px like the previous attempt) so it
   sits inside the row's padding band — visible on every section,
   not just the ones whose parent has overflow:visible. */
.acc-sidebar__link--active {
  background: var(--acc-accent-soft);
  color: var(--acc-color-amber-700);
  font-weight: var(--acc-weight-bold);
}
[data-theme="dark"] .acc-sidebar__link--active {
  background: rgba(189, 152, 42, 0.15);
  color: var(--acc-color-amber-d-300);
}
.acc-sidebar__link--active::before {
  content: '';
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 3px;
  border-radius: 0 2px 2px 0;
  background: var(--acc-color-amber-500);
}
[data-theme="dark"] .acc-sidebar__link--active::before { background: var(--acc-color-amber-d-400); }
.acc-sidebar__link--active .acc-sidebar__link-icon { color: var(--acc-color-amber-500); }
[data-theme="dark"] .acc-sidebar__link--active .acc-sidebar__link-icon { color: var(--acc-color-amber-d-400); }
.acc-sidebar__link-icon {
  width: 16px; height: 16px; flex-shrink: 0;
  color: var(--acc-text-on-shell-muted);
}

.acc-sidebar__footer {
  border-top: 1px solid var(--acc-border-shell);
  padding: var(--acc-space-4);
  flex-shrink: 0;
}

/* Sidebar user chip — needs to read on the light surface, so we
   tokenise it here instead of leaving inline color values inside
   _sidebar.html.twig (those were tuned for the old dark sidebar). */
.acc-sidebar__user-avatar {
  width: 32px; height: 32px;
  border-radius: var(--acc-radius-full);
  background: var(--acc-accent-soft);
  color: var(--acc-color-amber-700);
  display: grid; place-items: center;
  font-size: var(--acc-text-xs); font-weight: var(--acc-weight-semibold);
}
[data-theme="dark"] .acc-sidebar__user-avatar { color: var(--acc-color-amber-d-400); }
.acc-sidebar__user-name {
  color: var(--acc-text-on-shell-strong);
  font-size: var(--acc-text-base); font-weight: var(--acc-weight-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-sidebar__user-meta {
  font-size: var(--acc-text-xs); color: var(--acc-text-on-shell-muted);
  display: flex; gap: 8px; margin-top: 2px;
}
.acc-sidebar__user-meta a, .acc-sidebar__user-meta button {
  color: inherit;
}
.acc-sidebar__user-meta a:hover, .acc-sidebar__user-meta button:hover { color: var(--acc-text-on-shell-strong); }

/* ── Sidebar V1-parity additions ─────────────────────────
   Brand logo image, toolbar (+Add/Reorder/Expand·Collapse/
   Sections), Pin suggestion slot, Recent clear button, sticky
   reorder mode, headings-hidden compact mode, and the workspace
   dropdown footer. Token-driven so light/dark themes both work. */

/* Brand area now hosts a horizontal Advance Management logo
   instead of the AC mark + "Command Center" wordmark. The wide
   3:1 logo scales to fit the brand area; overflow:hidden keeps
   the collapsed-rail mode (12 px) from clipping awkwardly. */
.acc-sidebar__brand { overflow: hidden; }
.acc-sidebar__brand-logo {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-width: 0;
  text-decoration: none;
  border-radius: var(--acc-radius-md);
  transition: opacity var(--acc-duration-fast);
}
.acc-sidebar__brand-logo:hover { opacity: 0.85; }
.acc-sidebar__brand-logo-img {
  display: block;
  /* Bumped from 32 px → 44 px so the wordmark reads at desktop scale.
     Width: auto preserves the 3.09:1 aspect (≈136 px wide); max-width
     keeps it inside narrow sidebars without distortion. */
  height: 44px; width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Collapsed-rail mode hides the logo (the 12-px rail can't host
   even a tiny version of a horizontal wordmark legibly). The brand
   area itself collapses via the existing acc-sidebar__brand rules. */
.acc-shell--sidebar-collapsed .acc-sidebar__brand-logo { display: none; }
.acc-shell--sidebar-collapsed.acc-shell--sidebar-hover-expanded .acc-sidebar__brand-logo { display: flex; }

/* ── Sidebar toolbar ──────────────────────────────────── */
.acc-sidebar__toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--acc-space-2);
  padding: 0 var(--acc-space-3) var(--acc-space-2);
  flex-wrap: wrap;
}
.acc-sidebar__toolbar-group { display: flex; align-items: center; gap: 4px; }
.acc-sidebar__toolbar-btn {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 6px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--acc-radius-sm);
  font-size: 11px; font-weight: var(--acc-weight-medium);
  color: var(--acc-text-on-shell-muted);
  cursor: pointer;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast), border-color var(--acc-duration-fast);
}
.acc-sidebar__toolbar-btn:hover {
  background: var(--acc-surface-shell-hover);
  color: var(--acc-text-on-shell-strong);
}
.acc-sidebar__toolbar-btn--active {
  background: var(--acc-accent-soft);
  color: var(--acc-color-amber-700);
  border-color: var(--acc-color-amber-300);
}
[data-theme="dark"] .acc-sidebar__toolbar-btn--active { color: var(--acc-color-amber-d-400); }

/* Toolbar dropdown panel (used by + Add). */
.acc-sidebar__menu { position: relative; }
.acc-sidebar__menu-panel {
  position: absolute; top: calc(100% + 4px); left: 0;
  min-width: 180px; z-index: 30;
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-md);
  box-shadow: var(--acc-shadow-md);
  padding: var(--acc-space-1);
  display: flex; flex-direction: column; gap: 1px;
}
.acc-sidebar__menu-item {
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 6px var(--acc-space-2);
  background: transparent; border: 0;
  border-radius: var(--acc-radius-sm);
  cursor: pointer;
  font-size: var(--acc-text-sm); color: var(--acc-text-primary);
  text-align: left;
  text-decoration: none;
}
.acc-sidebar__menu-item:hover { background: var(--acc-surface-sunken); }

/* ── Sidebar search results dropdown ─────────────────────
   Floating panel anchored under the sidebar search input.
   Position absolute against `.acc-sidebar__search` so it
   overlays the menu without pushing layout. Two-mode UX:
     - empty input  → menu visible, dropdown hidden
     - any query    → menu rows fade (acc-sidebar--searching),
                      dropdown shows grouped results. */
.acc-sidebar__search { position: relative; }
.acc-sidebar__search-results {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  z-index: 30;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-md);
  box-shadow: var(--acc-shadow-lg);
  padding: var(--acc-space-1) 0;
}
.acc-sidebar__search-group { padding: var(--acc-space-1) 0; }
.acc-sidebar__search-group + .acc-sidebar__search-group {
  border-top: 1px solid var(--acc-border-subtle);
  margin-top: var(--acc-space-1);
}
.acc-sidebar__search-group-label {
  padding: 4px var(--acc-space-3);
  font-size: 10px; font-weight: var(--acc-weight-bold);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--acc-text-tertiary);
}
.acc-sidebar__search-group-list { list-style: none; padding: 0; margin: 0; }
.acc-sidebar__search-row {
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 6px var(--acc-space-3);
  text-decoration: none;
  color: var(--acc-text-primary);
  font-size: var(--acc-text-sm);
  transition: background var(--acc-duration-fast);
}
.acc-sidebar__search-row:hover { background: var(--acc-surface-sunken); }
.acc-sidebar__search-row-icon {
  display: grid; place-items: center;
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: var(--acc-radius-sm);
  background: var(--acc-surface-shell-hover);
  color: var(--acc-text-secondary);
}
.acc-sidebar__search-row-icon svg { width: 13px; height: 13px; }
.acc-sidebar__search-row-text {
  display: flex; flex-direction: column; min-width: 0; flex: 1;
}
.acc-sidebar__search-row-title {
  font-weight: var(--acc-weight-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-sidebar__search-row-meta {
  font-size: var(--acc-text-xs); color: var(--acc-text-tertiary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acc-sidebar__search-row-mark {
  background: rgba(189, 152, 42, 0.20);
  color: inherit;
  padding: 0 1px;
  border-radius: 2px;
}
[data-theme="dark"] .acc-sidebar__search-row-mark { background: rgba(230, 200, 74, 0.30); }
.acc-sidebar__search-row-badge {
  margin-left: auto;
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--acc-text-tertiary);
  background: var(--acc-surface-sunken);
  padding: 1px 6px; border-radius: var(--acc-radius-full);
  flex-shrink: 0;
}
.acc-sidebar__search-empty {
  padding: var(--acc-space-5) var(--acc-space-4);
  text-align: center;
  color: var(--acc-text-tertiary);
}
.acc-sidebar__search-empty svg {
  width: 22px; height: 22px;
  color: var(--acc-text-tertiary);
  margin-bottom: var(--acc-space-2);
}
.acc-sidebar__search-empty-title {
  font-size: var(--acc-text-sm); font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-secondary);
}
.acc-sidebar__search-empty-body {
  font-size: var(--acc-text-xs);
  margin-top: 2px;
}
/* Searching mode: fade the menu and let the dropdown overlay take focus. */
.acc-sidebar--searching .acc-sidebar__nav { opacity: 0.35; pointer-events: none; }

/* ── Sections manager popover (per-section hide/restore) ─ */
.acc-sidebar__sections-manager {
  min-width: 240px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
}
.acc-sidebar__sections-manager-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--acc-space-2);
  padding: 8px var(--acc-space-3);
  font-size: 10px; font-weight: var(--acc-weight-bold);
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--acc-text-tertiary);
  border-bottom: 1px solid var(--acc-border-subtle);
}
.acc-sidebar__sections-manager-restore {
  font-size: 11px; font-weight: var(--acc-weight-medium);
  letter-spacing: 0;  text-transform: none;
  color: var(--acc-action);
  background: transparent; border: 0;
  padding: 2px 6px; border-radius: var(--acc-radius-sm);
  cursor: pointer;
}
.acc-sidebar__sections-manager-restore:hover {
  color: var(--acc-action-hover);
  background: var(--acc-surface-sunken);
}
.acc-sidebar__sections-manager-help {
  padding: 6px var(--acc-space-3) var(--acc-space-2);
  font-size: var(--acc-text-xs);
  color: var(--acc-text-tertiary);
  line-height: var(--acc-leading-snug);
  border-bottom: 1px solid var(--acc-border-subtle);
}
.acc-sidebar__sections-manager-list {
  padding: var(--acc-space-1);
  display: flex; flex-direction: column; gap: 1px;
}
.acc-sidebar__sections-manager-row {
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 5px var(--acc-space-2);
  border-radius: var(--acc-radius-sm);
  font-size: var(--acc-text-sm);
  color: var(--acc-text-primary);
  cursor: pointer;
}
.acc-sidebar__sections-manager-row:hover { background: var(--acc-surface-sunken); }
.acc-sidebar__sections-manager-row-label { flex: 1; min-width: 0; }
.acc-sidebar__sections-manager-row-state {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--acc-status-warn-fg); flex-shrink: 0;
}
.acc-sidebar__sections-manager-footer {
  border-top: 1px solid var(--acc-border-subtle);
  padding: var(--acc-space-1) var(--acc-space-2);
}
.acc-sidebar__sections-manager-compact {
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 5px;
  font-size: var(--acc-text-sm);
  color: var(--acc-text-secondary);
  cursor: pointer;
}

/* Sections hidden via the manager popover disappear entirely. */
.acc-sidebar__section--manager-hidden { display: none !important; }

/* ── Custom Link modal (single form) ─────────────────────
   Position-fixed backdrop overlays the whole app so the dialog
   reads as modal. Higher z-index than dropdowns / +Add menu. */
.acc-sidebar__modal-backdrop {
  position: fixed; inset: 0;
  background: var(--acc-surface-overlay);
  z-index: 80;
  display: grid; place-items: center;
  padding: var(--acc-space-4);
}
.acc-sidebar__modal {
  width: 100%; max-width: 460px;
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-lg);
  box-shadow: var(--acc-shadow-xl);
  overflow: hidden;
}
.acc-sidebar__modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--acc-space-3) var(--acc-space-4);
  border-bottom: 1px solid var(--acc-border-subtle);
}
.acc-sidebar__modal-title {
  margin: 0;
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-md); font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-primary);
}
.acc-sidebar__modal-close {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: var(--acc-radius-sm);
  background: transparent; border: 0;
  color: var(--acc-text-tertiary); cursor: pointer;
}
.acc-sidebar__modal-close:hover { background: var(--acc-surface-sunken); color: var(--acc-text-primary); }
.acc-sidebar__modal-body {
  padding: var(--acc-space-4);
  display: flex; flex-direction: column; gap: var(--acc-space-3);
}
.acc-sidebar__modal-field {
  display: flex; flex-direction: column; gap: 4px;
}
.acc-sidebar__modal-label {
  font-size: var(--acc-text-xs); font-weight: var(--acc-weight-medium);
  color: var(--acc-text-secondary);
}
.acc-sidebar__modal-input {
  width: 100%;
  padding: 7px 10px;
  font: inherit; font-size: var(--acc-text-sm);
  color: var(--acc-text-primary);
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-default);
  border-radius: var(--acc-radius-sm);
  transition: border-color var(--acc-duration-fast), box-shadow var(--acc-duration-fast);
}
.acc-sidebar__modal-input:focus {
  outline: 0;
  border-color: var(--acc-color-amber-500);
  box-shadow: 0 0 0 3px rgba(189, 152, 42, 0.15);
}
.acc-sidebar__modal-error {
  padding: 8px 10px;
  font-size: var(--acc-text-xs);
  color: var(--acc-status-danger-fg);
  background: var(--acc-status-danger-bg);
  border: 1px solid var(--acc-status-danger-border, var(--acc-status-danger-fg));
  border-radius: var(--acc-radius-sm);
}
.acc-sidebar__modal-footer {
  display: flex; justify-content: flex-end; gap: var(--acc-space-2);
  padding-top: var(--acc-space-2);
  border-top: 1px solid var(--acc-border-subtle);
  margin-top: var(--acc-space-1);
}

/* Custom-link row remove button: same shape as the favorites
   star/hide buttons so the row reads as part of the family. */
.acc-sidebar__row--custom .acc-sidebar__star--remove { opacity: 0; }
.acc-sidebar__row--custom:hover .acc-sidebar__star--remove,
.acc-sidebar__row--custom:hover .acc-sidebar__hide,
.acc-sidebar__row--custom:hover .acc-sidebar__star { opacity: 1; }
/* Delete-button hover: subtle danger tint so it reads as destructive
   without overwhelming the row. */
.acc-sidebar__star--remove:hover { color: var(--acc-status-danger-fg); }

/* Per-section hide button injected by sidebar_controller into every
   manager-eligible section head. Uses the same shape as the existing
   .acc-sidebar__section-action button family (Recent's "Clear" trash);
   appears on hover so it doesn't compete visually with the section
   label itself. */
.acc-sidebar__section-hide { opacity: 0; }
.acc-sidebar__section-head--with-action:hover .acc-sidebar__section-hide,
.acc-sidebar__section-hide:focus-visible { opacity: 1; }

/* ── Pin suggestion ───────────────────────────────────── */
.acc-sidebar__pin-suggestion {
  margin: 0 var(--acc-space-3) var(--acc-space-3);
  padding: var(--acc-space-2);
  border: 1px solid var(--acc-color-amber-300);
  background: var(--acc-color-amber-50);
  border-radius: var(--acc-radius-md);
  display: flex; flex-direction: column; gap: 6px;
}
[data-theme="dark"] .acc-sidebar__pin-suggestion {
  background: rgba(189, 152, 42, 0.10);
  border-color: rgba(230, 200, 74, 0.40);
}
.acc-sidebar__pin-suggestion-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: var(--acc-weight-bold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--acc-color-amber-700);
}
[data-theme="dark"] .acc-sidebar__pin-suggestion-head { color: var(--acc-color-amber-d-400); }
.acc-sidebar__pin-suggestion-body {
  display: flex; align-items: center; gap: var(--acc-space-2);
  color: var(--acc-text-on-shell-strong);
  font-size: var(--acc-text-sm);
}
.acc-sidebar__pin-suggestion-icon { width: 14px; height: 14px; flex-shrink: 0; color: var(--acc-text-on-shell-muted); }
.acc-sidebar__pin-suggestion-label {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: var(--acc-weight-medium);
}
.acc-sidebar__pin-suggestion-hint {
  font-size: var(--acc-text-xs); color: var(--acc-text-on-shell-muted);
}
.acc-sidebar__pin-suggestion-actions {
  display: flex; gap: 6px; margin-top: 2px;
}
.acc-sidebar__pin-suggestion-actions .acc-btn { flex: 1; }

/* ── Section head: action button (Clear recents) ────────
   Some section heads carry a trailing action button (Clear,
   etc). The head reflows from a single full-width toggle to
   a flex row when this modifier is present. */
.acc-sidebar__section-head--with-action {
  display: flex; align-items: center; gap: 4px;
}
.acc-sidebar__section-head--with-action .acc-sidebar__section-toggle { flex: 1; }
.acc-sidebar__section-action {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  background: transparent; border: 0;
  border-radius: var(--acc-radius-sm);
  color: var(--acc-text-on-shell-muted);
  cursor: pointer;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
  flex-shrink: 0;
}
.acc-sidebar__section-action:hover {
  background: var(--acc-status-danger-bg);
  color: var(--acc-status-danger-fg);
}

/* ── Reorder mode: drag handle visible on every nav row ──
   Scoped to nav-section rows only — Favorites already render their
   own drag handle, and Hidden mirror rows / Recent dynamic rows
   shouldn't be reorderable in this mode (their order is derived,
   not user-editable). The :not() chain mirrors the controller's
   _wireItemReorder selector so the visual state and the wired state
   stay in sync. */
.acc-sidebar--reorder
  .acc-sidebar__section[data-section-id]:not([data-section-id="favorites"]):not([data-section-id="recent"]):not([data-section-id="hidden"])
  .acc-sidebar__row[data-row-route]:not(.acc-sidebar__row--unhide-mirror) {
  cursor: grab;
}
.acc-sidebar--reorder
  .acc-sidebar__section[data-section-id]:not([data-section-id="favorites"]):not([data-section-id="recent"]):not([data-section-id="hidden"])
  .acc-sidebar__row[data-row-route]:not(.acc-sidebar__row--unhide-mirror)::before {
  content: "";
  width: 8px; flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 20%, var(--acc-text-on-shell-muted) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 50%, var(--acc-text-on-shell-muted) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 80%, var(--acc-text-on-shell-muted) 1px, transparent 1.5px);
  background-size: 8px 8px;
  background-repeat: no-repeat;
  background-position: 0 30%, 0 50%, 0 70%;
  opacity: 0.6;
}
.acc-sidebar__row--dragging { opacity: 0.4; }
.acc-sidebar__row--drop-target { box-shadow: inset 0 2px 0 var(--acc-color-amber-500); }

/* ── Headings-hidden compact mode ──────────────────────
   Global toggle (Sections button) hides every section
   heading label so the nav reads as a flat list. Items
   stay; chevrons disappear; section spacing collapses. */
.acc-sidebar--no-headings .acc-sidebar__section-head { display: none; }
.acc-sidebar--no-headings .acc-sidebar__section { margin-top: var(--acc-space-2); }
.acc-sidebar--no-headings .acc-sidebar__section--collapsed .acc-sidebar__section-body { display: flex; }

/* The bottom-left sidebar workspace dropdown was removed (it
   duplicated the topbar user menu). Associated `.acc-sidebar__
   workspace-*` rules are intentionally deleted — the topbar avatar
   in `_topbar.html.twig` now hosts Profile / Settings / Switch /
   Sign out as the single canonical account surface. */

/* ── Topbar internals ──────────────────────────────────── */
.acc-topbar__title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-lg); font-weight: var(--acc-weight-semibold);
  letter-spacing: -0.02em;
}
.acc-topbar__search {
  flex: 1; max-width: 480px;
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 0 var(--acc-space-3); height: 36px;
  background: var(--acc-surface-sunken);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-md);
  color: var(--acc-text-tertiary);
  font-size: var(--acc-text-base);
  cursor: text;
  transition: border-color var(--acc-duration-fast);
}
.acc-topbar__search:hover { border-color: var(--acc-border-default); }
.acc-topbar__kbd {
  margin-left: auto;
  font-family: var(--acc-font-mono); font-size: 10px;
  padding: 2px 6px; border-radius: var(--acc-radius-xs);
  background: var(--acc-surface-canvas); color: var(--acc-text-tertiary);
  border: 1px solid var(--acc-border-subtle);
}
.acc-topbar__icon-btn {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--acc-radius-md);
  color: var(--acc-text-secondary);
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-topbar__icon-btn:hover { background: var(--acc-surface-sunken); color: var(--acc-text-primary); }
.acc-topbar__icon-btn svg { width: 16px; height: 16px; }
.acc-topbar__icon-btn--mobile-only { display: none; }
@media (max-width: 1024px) { .acc-topbar__icon-btn--mobile-only { display: grid; } }

/* Notification count badge */
.acc-topbar__badge {
  position: absolute; top: 4px; right: 4px;
  min-width: 14px; height: 14px;
  padding: 0 3px;
  border-radius: var(--acc-radius-full);
  background: var(--acc-color-rose-500);
  color: #fff;
  font-size: 9px; font-weight: 700;
  display: grid; place-items: center;
  border: 2px solid var(--acc-surface-canvas);
  box-sizing: content-box;
}

/* ── Print ────────────────────────────────────────────
   Strips the app shell when a user prints or saves a page as PDF
   (most common: invoice public_show, statements, reports). The
   pre-Phase-10A `app.css` had a similar block; it was dropped when
   the legacy stylesheet was deleted, so we re-add a minimal version
   here. Screen rendering is unaffected. */
@media print {
  /* Hide every chrome surface — sidebar, topbar, drawers, dialogs,
     toasts, command palette, dropdowns. */
  .acc-shell__sidebar,
  .acc-shell__sidebar-overlay,
  .acc-shell__topbar,
  .acc-drawer,
  .acc-dialog,
  .acc-modal,
  .acc-cmdk,
  .acc-toasts,
  .acc-quick-create__menu,
  .acc-user-menu__panel,
  .acc-notifications__menu,
  .acc-shell__sidebar-resize,
  [data-mobile-only] {
    display: none !important;
  }
  /* Reset main column so content owns the page width. */
  .acc-shell__main { margin-left: 0 !important; }
  .acc-shell__content {
    padding: 0 !important;
    max-width: none !important;
  }
  /* Black text on white — PDF/printer friendly; saves toner. */
  body, .acc-shell {
    background: #ffffff !important;
    color: #000000 !important;
  }
  /* Cards lose shadow + glassy chrome, keep their structure. */
  .acc-card,
  .acc-stat,
  .acc-action-card {
    box-shadow: none !important;
    border-color: #cbd5e1 !important;
    page-break-inside: avoid;
  }
  /* Buttons + actions usually shouldn't appear in print. Pages
     that DO want a button visible (e.g. an invoice's "Pay now"
     prompt) can opt out per-element with .acc-print-keep. */
  .acc-btn:not(.acc-print-keep),
  .acc-page-header__actions:not(.acc-print-keep) {
    display: none !important;
  }
  /* Tables breathe more on paper. */
  .acc-table { font-size: 11pt; }
  .acc-table thead { display: table-header-group; }
  .acc-table tr   { page-break-inside: avoid; }
}

/* ── Reusable breadcrumb (templates/components/_breadcrumb.html.twig)
   Lives inside the topbar's `block breadcrumbs`. Home icon first,
   chevron separators between, current page bold + non-clickable. */
.acc-breadcrumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--acc-text-sm);
  color: var(--acc-text-tertiary);
}
.acc-breadcrumb__link {
  color: var(--acc-text-secondary);
  text-decoration: none;
  padding: 2px 4px;
  border-radius: var(--acc-radius-sm);
  transition: color var(--acc-duration-fast), background var(--acc-duration-fast);
}
.acc-breadcrumb__link:hover { color: var(--acc-text-primary); background: var(--acc-surface-sunken); }
.acc-breadcrumb__link--home { display: inline-grid; place-items: center; padding: 4px; }
.acc-breadcrumb__link--home svg { display: block; }
.acc-breadcrumb__sep { color: var(--acc-text-tertiary); flex-shrink: 0; }
.acc-breadcrumb__current {
  color: var(--acc-text-primary);
  font-weight: var(--acc-weight-semibold);
  padding: 2px 4px;
}

/* ── Admin page chrome ─────────────────────────────────────
   Diagnostics banner, page header, tabs, table, role/status
   badges, avatar. Token-driven so light/dark both work. */
.acc-admin-diagnostics {
  display: flex; align-items: center; justify-content: space-between; gap: var(--acc-space-3);
  padding: var(--acc-space-3) var(--acc-space-4);
  background: var(--acc-surface-canvas);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-lg);
  box-shadow: var(--acc-shadow-sm);
}
.acc-admin-diagnostics__lead { display: flex; align-items: center; gap: var(--acc-space-3); min-width: 0; flex: 1; }
.acc-admin-diagnostics__icon {
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--acc-status-success-bg);
  color: var(--acc-status-success-fg);
  border-radius: var(--acc-radius-md);
  flex-shrink: 0;
}
.acc-admin-diagnostics__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.acc-admin-diagnostics__title {
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-md); font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-primary); letter-spacing: -0.01em;
}
.acc-admin-diagnostics__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.acc-admin-diagnostics__actions { display: flex; gap: 4px; flex-shrink: 0; }
.acc-admin-diagnostics__btn {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--acc-radius-sm);
  background: transparent; border: 0;
  color: var(--acc-text-tertiary); cursor: pointer;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-admin-diagnostics__btn:hover { background: var(--acc-surface-sunken); color: var(--acc-text-primary); }
.acc-admin-diagnostics__chevron { transition: transform var(--acc-duration-fast); }
.acc-admin-diagnostics--collapsed .acc-admin-diagnostics__chevron { transform: rotate(-90deg); }
.acc-admin-diagnostics--collapsed .acc-admin-diagnostics__pills { display: none; }

/* Status pill — green by default; --muted for inactive states. */
.acc-status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  border-radius: var(--acc-radius-full);
  font-size: var(--acc-text-xs); font-weight: var(--acc-weight-medium);
  letter-spacing: 0.01em;
}
.acc-status-pill--ok {
  background: var(--acc-status-success-bg);
  color: var(--acc-status-success-fg);
}
.acc-status-pill--ok::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.acc-status-pill--muted {
  background: var(--acc-surface-sunken);
  color: var(--acc-text-tertiary);
}

/* Page heading row */
.acc-admin-header { display: flex; align-items: center; justify-content: space-between; gap: var(--acc-space-3); }
.acc-admin-header__title {
  margin: 0;
  font-family: var(--acc-font-display);
  font-size: var(--acc-text-3xl); font-weight: var(--acc-weight-bold);
  letter-spacing: -0.025em;
  color: var(--acc-text-primary);
}
.acc-admin-header__subtitle {
  margin: 4px 0 0;
  font-size: var(--acc-text-sm);
  color: var(--acc-text-tertiary);
}

/* Tabs — horizontal underline-style, V1 parity */
.acc-admin-tabs {
  display: flex; gap: var(--acc-space-1);
  border-bottom: 1px solid var(--acc-border-subtle);
}
.acc-admin-tabs__tab {
  padding: 10px var(--acc-space-3);
  font-size: var(--acc-text-sm); font-weight: var(--acc-weight-medium);
  color: var(--acc-text-tertiary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--acc-duration-fast), border-color var(--acc-duration-fast);
}
.acc-admin-tabs__tab:hover { color: var(--acc-text-primary); }
.acc-admin-tabs__tab--active {
  color: var(--acc-color-amber-700);
  border-bottom-color: var(--acc-color-amber-500);
  font-weight: var(--acc-weight-semibold);
}
[data-theme="dark"] .acc-admin-tabs__tab--active {
  color: var(--acc-color-amber-d-300);
  border-bottom-color: var(--acc-color-amber-d-400);
}

/* Search + show-deleted toggle inside Users tab card header */
.acc-admin-search {
  display: flex; align-items: center; gap: var(--acc-space-2);
  padding: 0 var(--acc-space-3); height: 32px;
  background: var(--acc-surface-sunken);
  border: 1px solid var(--acc-border-subtle);
  border-radius: var(--acc-radius-md);
  color: var(--acc-text-tertiary);
}
.acc-admin-search__input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font: inherit; font-size: var(--acc-text-sm);
  color: var(--acc-text-primary);
  outline: 0;
}
.acc-admin-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--acc-text-sm);
  color: var(--acc-text-secondary);
  cursor: pointer;
  user-select: none;
}
.acc-admin-toggle input[type="checkbox"]:disabled + span { opacity: 0.6; }

/* Admin user table */
.acc-admin-table th, .acc-admin-table td { vertical-align: middle; }
.acc-admin-table__check { width: 32px; padding: 0 var(--acc-space-2); }
.acc-admin-table__actions { width: 36px; text-align: right; padding-right: var(--acc-space-3); }
.acc-admin-user { display: flex; align-items: center; gap: var(--acc-space-2); }
.acc-admin-user__text { display: flex; flex-direction: column; min-width: 0; }
.acc-admin-user__name {
  font-weight: var(--acc-weight-semibold);
  color: var(--acc-text-primary);
  font-size: var(--acc-text-sm);
}
.acc-admin-user__email {
  color: var(--acc-text-tertiary);
  font-size: var(--acc-text-xs);
}

/* Avatar — color set inline via hsl() from a stable hash. */
.acc-avatar {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--acc-radius-full);
  color: #fff;
  font-size: 11px; font-weight: var(--acc-weight-bold);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Role badge — colored chip per canonical role */
.acc-role-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px;
  border-radius: var(--acc-radius-sm);
  font-size: var(--acc-text-xs); font-weight: var(--acc-weight-semibold);
  letter-spacing: 0.02em;
  background: var(--acc-surface-sunken);
  color: var(--acc-text-secondary);
  border: 1px solid var(--acc-border-subtle);
}
.acc-role-badge--ceo,
.acc-role-badge--admin {
  background: rgba(168, 85, 247, 0.10);
  color: rgb(126, 34, 206);
  border-color: rgba(168, 85, 247, 0.30);
}
[data-theme="dark"] .acc-role-badge--ceo,
[data-theme="dark"] .acc-role-badge--admin {
  background: rgba(168, 85, 247, 0.16);
  color: rgb(192, 132, 252);
  border-color: rgba(168, 85, 247, 0.45);
}
.acc-role-badge--manager {
  background: rgba(59, 130, 246, 0.10);
  color: rgb(29, 78, 216);
  border-color: rgba(59, 130, 246, 0.30);
}
[data-theme="dark"] .acc-role-badge--manager {
  background: rgba(59, 130, 246, 0.18);
  color: rgb(96, 165, 250);
  border-color: rgba(59, 130, 246, 0.45);
}
.acc-role-badge--staff {
  background: rgba(16, 185, 129, 0.10);
  color: rgb(5, 122, 85);
  border-color: rgba(16, 185, 129, 0.30);
}
[data-theme="dark"] .acc-role-badge--staff {
  background: rgba(16, 185, 129, 0.16);
  color: rgb(52, 211, 153);
  border-color: rgba(16, 185, 129, 0.45);
}

/* Small icon-only button (table row "more" affordance) */
.acc-icon-btn {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px;
  border-radius: var(--acc-radius-sm);
  background: transparent; border: 0;
  color: var(--acc-text-tertiary);
  cursor: pointer;
  transition: background var(--acc-duration-fast), color var(--acc-duration-fast);
}
.acc-icon-btn:hover:not(:disabled) {
  background: var(--acc-surface-sunken);
  color: var(--acc-text-primary);
}
.acc-icon-btn:disabled { opacity: 0.5; cursor: not-allowed; }