:root {
  /* Expanded (default) — labels always visible. Owners on large
     displays land here; managers can collapse to 68px via the
     chevron toggle, persisted in localStorage. The hover-expand
     rail pattern (Apr 2026) was retired 2026-05-26 — too discoverable
     for new cohort users who didn't know to hover. */
  --sidebar-w: 200px;
  --sidebar-w-collapsed: 68px;
  --topbar-h: 56px;
  --drawer-w: 540px;
  --drawer-w-wide: 620px;
}

#app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr 0px;
  grid-template-areas: "sidebar main drawer";
  /* The impersonation banner is inserted as body's first child and sits in
     normal flow, so a flat 100vh here made the page 100vh PLUS the banner
     and pushed the bottom of the sidebar under the fold — the profile row
     and the last nav items became unreachable while viewing as someone
     else. renderImpersonationBanner() sets --impersonation-h to the banner's
     measured height and clears it on exit, so an ordinary session is
     unchanged at exactly 100vh and an impersonated one shrinks to fit. */
  height: calc(100vh - var(--impersonation-h, 0px));
  overflow: hidden;
  transition: grid-template-columns 0.22s ease;
}

body.sidebar-collapsed #app { grid-template-columns: var(--sidebar-w-collapsed) 1fr 0px; }
body.drawer-open #app { grid-template-columns: var(--sidebar-w) 1fr var(--drawer-w); }
body.sidebar-collapsed.drawer-open #app { grid-template-columns: var(--sidebar-w-collapsed) 1fr var(--drawer-w); }
/* Member detail drawer uses a wider footprint than Ask MADden */
body.drawer-open.drawer-member #app { grid-template-columns: var(--sidebar-w) 1fr var(--drawer-w-wide); }
body.sidebar-collapsed.drawer-open.drawer-member #app { grid-template-columns: var(--sidebar-w-collapsed) 1fr var(--drawer-w-wide); }

/* ── Sidebar ── */
#sidebar {
  grid-area: sidebar;
  position: relative;
  z-index: 10;
  min-width: 0;
}
/* Sidebar panel — pinned width matches the grid column. Toggling
   `body.sidebar-collapsed` flips both the column and the panel to
   the 68px icon-only width so the main content reflows in step.
   When collapsed, hovering the rail temporarily expands the panel
   to its full width as a transient preview (the panel is
   position:absolute, so it overlays the main content rather than
   shifting the layout). Click the chevron or the brand logo to
   make the expansion sticky. */
#sidebar-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--sidebar-w);
  background: var(--card);
  border-right: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.22s ease, box-shadow 0.15s ease;
  z-index: 1;
}
body.sidebar-collapsed #sidebar-panel { width: var(--sidebar-w-collapsed); }
/* Hover-peek skipped while .peek-suppressed is on the sidebar — the
   collapse-chevron click adds that class so the cursor still hovering
   the rail doesn't keep the panel pinned at 200px right after the
   click. Next mouseleave clears it (see main.js). */
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) #sidebar-panel {
  width: var(--sidebar-w);
  box-shadow: 6px 0 18px rgba(0,0,0,0.22);
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 16px 12px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}

.sidebar-header .logo {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--accent);
}
/* Shared 44x40 icon slot — brand mark, nav icons, and footer icons all
   center on the same x-axis so the column reads as one rail. */
.sidebar-header .logo-icon,
#main-nav .tab-btn .tab-icon,
.sidebar-footer .footer-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 40px;
  flex-shrink: 0;
}
.sidebar-header .logo-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}
.sidebar-header .logo-text {
  flex: 1;
  min-width: 0;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--accent);
  white-space: nowrap;
}
.sidebar-header .logo-text b { font-weight: 800; }

/* Labels are visible by default in expanded mode and fade out when
   the user collapses the rail. The fade pairs with the panel-width
   transition above so the rail re-flows without a label-pop. */
.sidebar-header .logo-text,
#main-nav .tab-btn .tab-label,
#main-nav .nav-section-header,
.sidebar-footer .footer-label {
  opacity: 1;
  transition: opacity 0.12s ease;
}
body.sidebar-collapsed .sidebar-header .logo-text,
body.sidebar-collapsed #main-nav .tab-btn .tab-label,
body.sidebar-collapsed #main-nav .nav-section-header,
body.sidebar-collapsed .sidebar-footer .footer-label {
  /* `display: none` not just opacity:0 — flex:1 children otherwise
     keep their share of horizontal space and push the icon flush
     left even with justify-content:center on the parent button. */
  display: none;
}
/* Soon pill, status badge, and other right-side ornaments also vanish
   in collapsed mode so the icon can sit dead-center. */
body.sidebar-collapsed #main-nav .tab-btn .tab-soon-pill,
body.sidebar-collapsed #main-nav .tab-btn .tab-badge {
  display: none;
}

/* Hover-peek: when the user has collapsed the rail, hovering it
   temporarily restores the expanded layout. All the elements that
   `body.sidebar-collapsed` hid above (labels, headers, divider,
   pills, badges, chevron) come back; buttons regain their
   left-aligned padding so labels sit next to icons cleanly. Mouse
   leaves the rail → snaps back to 68px. Click the chevron or the
   brand logo to make the expansion sticky.
   `:not(.peek-suppressed)` blocks peek from firing while the cursor
   is still over the rail from the click that triggered the collapse
   in the first place (cleared on next mouseleave by main.js). */
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) .sidebar-header .logo-text,
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) .sidebar-footer .footer-label {
  display: block;
}
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) #main-nav .tab-btn .tab-label {
  display: block;
}
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) #main-nav .nav-section-header {
  display: block;
}
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) .nav-bottom-divider {
  display: block;
}
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) #main-nav .tab-btn .tab-soon-pill,
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) #main-nav .tab-btn .tab-badge {
  display: inline-flex;
}
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) .sidebar-toggle {
  display: inline-flex;
}
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) #main-nav .tab-btn {
  justify-content: flex-start;
  padding: 6px 12px;
}

/* Collapse / expand toggle — small chevron next to the brand. Rotates
   on collapsed state so it always points toward the action ("›" to
   expand when collapsed, "‹" to collapse when expanded). */
.sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: 4px;
  flex-shrink: 0;
  transition: color 0.12s, background 0.12s, opacity 0.12s;
}
.sidebar-toggle:hover { color: var(--text); background: rgba(255,255,255,0.06); }
/* Collapsed state: the 68px rail has no room for both the brand icon
   AND the toggle chevron. The toggle hides; the logo-icon becomes the
   re-expand affordance (cursor:pointer + click handler in main.js).
   Tooltip on the logo-icon names the action so the behavior is
   discoverable. */
body.sidebar-collapsed .sidebar-toggle { display: none; }
body.sidebar-collapsed .sidebar-header .logo {
  cursor: pointer;
  justify-content: center;
}
body.sidebar-collapsed .sidebar-header .logo-text {
  /* Drop from layout entirely when collapsed (not just opacity:0)
     so the icon can center on a 44px column without text reserving
     the remaining 100px of the expanded width. */
  display: none;
}

#main-nav {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 8px 0 12px;
  flex: 1;
  /* min-height:0 is required: a flex item defaults to min-height:auto and
     refuses to shrink below its content, so on a short viewport the nav
     overflowed #sidebar-panel (overflow:hidden) and the items past the fold
     were CLIPPED with no way to reach them — Landon on a 1908x904 screen had
     to zoom the browser out to click Feedback and Reports. Scrolling the nav
     rather than the panel keeps the brand header and the profile footer
     pinned. Card 1785254406416-5cuzh8. */
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  background: transparent;
  border: none;
}
/* The rail only scrolls when it has to, so a normal-height viewport shows no
   track at all. */
#main-nav::-webkit-scrollbar { width: 6px; }
#main-nav::-webkit-scrollbar-thumb {
  background: var(--card-border);
  border-radius: 3px;
}
#main-nav::-webkit-scrollbar-track { background: transparent; }

/* Section header — OPERATIONS / PLANNING / PEOPLE labels rendered as
   siblings of the buttons (not wrappers) so all buttons land at the
   same x. The 12px left padding matches `.tab-btn`'s left padding so
   the header text aligns over the icon column. Re-flowed
   2026-05-26 from a `.nav-section` wrapper pattern that shrank each
   group to its content's intrinsic width and centered the buttons
   off-axis. */
.nav-section-header {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: 14px 12px 4px;
  user-select: none;
  /* As a flex child of #main-nav (column), without `width: 100%` the
     header shrinks to its text width and centers, putting the label
     off-axis from the icon column below it. */
  width: 100%;
  box-sizing: border-box;
}
body.sidebar-collapsed .nav-section-header {
  /* Hide entirely when collapsed — labels are noise when there's no
     content to label (the buttons' text labels are also hidden). */
  display: none;
}

/* Bottom-cluster divider — a 1-pixel hairline above Feedback to set
   the admin/utility cluster apart from the main nav. Stays subtle so
   it doesn't add visual weight; disappears when collapsed since the
   spacer gap already separates the icon groups visually. */
.nav-bottom-divider {
  height: 1px;
  /* Same flex-stretch fix as the section header — empty divs in a
     flex column collapse to width:0 without `width: 100%`. */
  width: 100%;
  margin: 8px 0 4px;
  background: var(--card-border);
  box-sizing: border-box;
}
body.sidebar-collapsed .nav-bottom-divider { display: none; }

#main-nav .tab-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  padding: 6px 12px;
  border-radius: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-dim);
  background: transparent;
  white-space: nowrap;
  transition: color 0.15s;
  cursor: pointer;
  border: none;
}
/* Collapsed rail — center icons in the 68px column. Buttons drop
   their flex-start alignment + reduce horizontal padding so the
   44px icon slot sits dead-center. */
body.sidebar-collapsed #main-nav .tab-btn {
  justify-content: center;
  padding: 6px 0;
}
#main-nav .tab-btn .tab-icon {
  border-radius: 10px;
  transition: background 0.15s;
}
#main-nav .tab-btn:hover { color: var(--text); }
#main-nav .tab-btn:hover .tab-icon { background: rgba(255,255,255,0.06); }
#main-nav .tab-btn.active { color: var(--accent); }
#main-nav .tab-btn.active .tab-icon { background: rgba(0,212,170,0.12); }
#main-nav .tab-btn.active:hover .tab-icon { background: rgba(0,212,170,0.18); }
#main-nav .tab-btn-placeholder { opacity: 0.55; }
#main-nav .tab-btn-placeholder:hover { opacity: 0.8; }
/* Soon pill — small inline tag next to a placeholder's label to signal
   "coming soon" at a glance. Restored 2026-05-26 when Team surfaced
   into the People bucket as a roadmap teaser (previously every
   placeholder also had `hidden: true`, so the pill never showed and
   the rule was set to `display: none`). */
#main-nav .tab-btn .tab-soon-pill {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 6px;
  margin-left: 6px;
  border-radius: 4px;
  background: var(--card-border, rgba(255,255,255,0.08));
  color: var(--text-dim);
  white-space: nowrap;
}
#main-nav .tab-btn .tab-label {
  flex: 1;
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#main-nav .tab-btn.active .tab-label {
  color: var(--accent);
  font-weight: 600;
}

/* Numeric badge — used by Backlog tab to count unread status updates
   on the user's own reports (Apr 28). Same right-anchor as the Soon
   pill, accent-colored to draw attention. */
#main-nav .tab-btn .tab-badge {
  position: absolute;
  top: 4px;
  right: 8px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  background: var(--accent);
  color: var(--bg);
  letter-spacing: 0.2px;
}
#main-nav .tab-btn.active .tab-badge {
  background: var(--accent);
  color: var(--bg);
}

/* Sidebar footer is now the profile section — the bottom-tab cluster
   (Backlog / Voice Quality / Settings / Gyms) plus theme toggle and
   logout all live inside the popover that opens from the trigger. The
   footer container is just a thin wrapper for positioning. See
   components/profile-popover.js. */
.sidebar-footer {
  padding: 8px 8px 12px;
  border-top: 1px solid var(--card-border);
  flex-shrink: 0;
  position: relative;  /* anchor for the popover */
}

/* Profile trigger — the row the user clicks/hovers to open the popover.
   Avatar pip on the left, display name in the middle, chevron on the
   right. Hover state matches the tab-btn hover so it feels like a peer
   to the nav items above. */
.profile-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 10px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 0.15s;
}
.profile-trigger:hover,
.profile-trigger[aria-expanded="true"] { background: rgba(255,255,255,0.04); }
.profile-trigger-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-trigger-chevron {
  color: var(--text-dim);
  display: flex;
  transition: transform 0.15s;
}
.profile-trigger[aria-expanded="true"] .profile-trigger-chevron {
  transform: rotate(180deg);
}

/* When the sidebar collapses, the name + chevron hide and the trigger
   centers on just the avatar pip — mirrors the existing .tab-label
   collapse pattern. */
body.sidebar-collapsed .profile-trigger-name,
body.sidebar-collapsed .profile-trigger-chevron { display: none; }
body.sidebar-collapsed .profile-trigger { justify-content: center; }
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) .profile-trigger-name,
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) .profile-trigger-chevron { display: inline-flex; }
body.sidebar-collapsed #sidebar:hover:not(.peek-suppressed) .profile-trigger { justify-content: flex-start; }

/* Profile popover — Claude-style menu. Floats up from the trigger,
   pinned to the bottom-left so it never overlaps the topbar. Width is
   slightly wider than the sidebar so the labels breathe. */
.profile-popover {
  /* Fixed positioning so the popover escapes #sidebar-panel's
     overflow:hidden — that clipping is intentional for the
     rail-peek collapse behavior, so we float the popover out
     instead of relaxing it. Bottom + left coords are set
     dynamically when opening (see profile-popover.js
     openPopover) to anchor above the trigger. */
  position: fixed;
  min-width: 240px;
  max-width: 320px;
  background: var(--bg-elevated, var(--card));
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 36px rgba(0,0,0,0.45);
  z-index: 200;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.profile-popover[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Popover header — editable display name + email + clickable avatar.
   Avatar pip on the left (44px target), inputs on the right. Inputs
   look like read-only text until focused; focusing reveals a soft
   underline so editing feels intentional. */
.profile-popover-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
}
.profile-popover-avatar-btn {
  position: relative;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
}
/* Pencil badge — tiny edit hint pinned to bottom-right of the avatar.
   Visible at high opacity by default; full color on hover for the
   "this is clickable" signal. */
.profile-popover-avatar-edit {
  position: absolute;
  right: -2px; bottom: -2px;
  background: var(--bg-elevated, var(--card));
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  border-radius: 50%;
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  opacity: 0.85;
  transition: opacity 0.12s, color 0.12s;
}
.profile-popover-avatar-btn:hover .profile-popover-avatar-edit {
  opacity: 1;
  color: var(--text);
}

.profile-popover-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-popover-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  outline: none;
  transition: border-color 0.12s;
}
.profile-popover-input-sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
}
.profile-popover-input:hover { border-bottom-color: var(--card-border); }
.profile-popover-input:focus { border-bottom-color: var(--accent); }

/* Status line — appears under the header during save / upload. The
   three kinds (info, success, error) color the text accordingly. */
.profile-popover-status {
  font-size: 11px;
  color: var(--text-dim);
  padding: 0 10px 6px;
}
.profile-popover-status[data-kind="success"] { color: var(--success, #22c55e); }
.profile-popover-status[data-kind="error"] { color: var(--error, #ef4444); }

/* ── Initials avatar (global) ──────────────────────────────────────
   The colored circle pip used by the presence widget, the sidebar
   profile trigger, the popover header, and any future surface. Lives
   in layout.css (not scoped to a tab) so the styles apply on EVERY
   tab, not just Home — previous bug: rules only existed in home.js
   pageStyles(), so the sidebar pip rendered as an unstyled square
   the moment the user navigated off Home. */
.mad-avatar {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: #fff; font-weight: 600;
  letter-spacing: 0.5px;
  line-height: 1;
  flex-shrink: 0;
  /* 2px ring matches the page bg so overlapping pips in the presence
     stack read as distinct circles, not a smear. */
  box-shadow: 0 0 0 2px var(--bg);
  user-select: none;
}
.mad-avatar-initials {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
/* border-radius on the <img> directly (a replaced element) clips the
   photo to a circle WITHOUT needing overflow:hidden on .mad-avatar.
   The parent stays overflow:visible so the data-tooltip ::after can
   render above the pip — see [data-tooltip] in components.css. */
.mad-avatar-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.mad-avatar-more {
  background: var(--bg-elevated, var(--card));
  color: var(--text-dim);
  font-weight: 500;
}

/* ── Add staff modal ──────────────────────────────────────────────
   Triggered from the profile popover for manager+ users. Lightweight
   centered overlay with a compact form. */
.add-staff-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 300;
  padding: 20px;
}
.add-staff-modal {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
  padding: 18px 20px 20px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
}
.add-staff-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.add-staff-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.add-staff-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 6px;
}
.add-staff-close:hover { color: var(--text); background: rgba(255,255,255,0.05); }

.add-staff-form { display: flex; flex-direction: column; gap: 12px; }
.add-staff-field {
  display: flex; flex-direction: column; gap: 4px;
}
.add-staff-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.add-staff-field input[type="text"],
.add-staff-field input[type="email"],
.add-staff-field input[type="password"] {
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
}
.add-staff-field input:focus { outline: none; border-color: var(--accent); }
.add-staff-hint {
  font-size: 11px;
  color: var(--text-dim);
}

.add-staff-radio-row,
.add-staff-check-row {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.add-staff-radio,
.add-staff-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
}
.add-staff-radio input,
.add-staff-check input { margin: 0; cursor: pointer; }
.add-staff-radio:has(input:checked),
.add-staff-check:has(input:checked) {
  border-color: var(--accent);
  background: rgba(0, 212, 170, 0.08);
}
.add-staff-empty {
  font-size: 12px; color: var(--text-dim); font-style: italic;
}

.add-staff-status {
  font-size: 12px;
  color: var(--text-dim);
  min-height: 1.2em;
}
.add-staff-status[data-kind="success"] { color: var(--success, #22c55e); }
.add-staff-status[data-kind="error"] { color: var(--error, #ef4444); }

.add-staff-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  margin-top: 4px;
}
.add-staff-cancel {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.add-staff-cancel:hover { color: var(--text); }
.add-staff-submit {
  background: var(--accent);
  border: 1px solid var(--accent);
  color: var(--fg-on-accent, var(--bg));
  border-radius: 8px;
  padding: 8px 16px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.add-staff-submit:hover:not(:disabled) { background: var(--accent-hover, var(--accent)); }
.add-staff-submit:disabled { opacity: 0.6; cursor: default; }

.profile-popover-divider {
  height: 1px;
  background: var(--card-border);
  margin: 4px 6px;
}

.profile-popover-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Single row in the popover (a tab link, theme toggle, logout). Hover
   uses the same subtle white-tint as the trigger so the whole component
   feels of-a-piece. */
.popover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  width: 100%;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.popover-row:hover { background: rgba(255,255,255,0.05); }
.popover-row-icon {
  width: 16px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim);
  flex-shrink: 0;
}
.popover-row-icon svg { width: 16px; height: 16px; }
.popover-row-label { flex: 1; }
.popover-row-danger { color: var(--red); }
.popover-row-danger .popover-row-icon { color: var(--red); }
.popover-row-danger:hover { background: rgba(239,68,68,0.08); }
.sidebar-footer .report-problem-btn { display: none; }

/* Feedback modal — type pills */
.rp-type-btn {
  font-size: 12px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--text-dim);
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.1s, border-color 0.1s, background 0.1s;
}
.rp-type-btn:hover { color: var(--text); }
.rp-type-btn.active {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(0,212,170,0.08);
}

/* Feedback modal — screenshot drop zone */
.rp-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 12px;
  border: 1.5px dashed var(--card-border);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.rp-dropzone:hover, .rp-dropzone:focus-visible {
  border-color: var(--accent);
  background: rgba(0,212,170,0.04);
  outline: none;
}
.rp-dropzone-over {
  border-color: var(--accent);
  border-style: solid;
  background: rgba(0,212,170,0.10);
}

/* Collapsed sidebar — sidebar is always in icon-rail mode so most rules are no-ops,
   kept only for the mobile breakpoint where sidebar-collapsed fires. */
body.sidebar-collapsed .sidebar-footer .user-badge,
body.sidebar-collapsed .sidebar-footer .user-role { display: none; }

/* ── Main column ── */
#main-column {
  grid-area: main;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  height: var(--topbar-h);
  background: var(--bg);
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── What's New bell button ── */
/* Borderless round icon button — quiet topbar chrome that doesn't compete
   with the Ask Skipper CTA; the teal badge does the attention-getting. */
.whats-new-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0; /* override global button padding — border-box would crush the icon to 4px */
  background: transparent;
  border: none;
  border-radius: 50%;
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.whats-new-btn:hover {
  background: var(--card-border);
  color: var(--text);
}
.whats-new-badge {
  position: absolute;
  top: 1px;
  right: 1px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--accent);
  /* Pinned dark (not var(--bg)) so it stays readable on teal in light mode. */
  color: #1a1e2e;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.2px;
  pointer-events: none;
  box-shadow: 0 0 0 2px var(--bg);
}

/* ── What's New panel ── */
.whats-new-panel {
  position: fixed;
  top: 0;
  right: 0;
  width: 360px;
  height: 100vh;
  background: var(--card);
  border-left: 1px solid var(--card-border);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  box-shadow: -4px 0 24px rgba(0,0,0,0.25);
}
.whats-new-panel.open {
  transform: translateX(0);
}
.whats-new-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.whats-new-panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.whats-new-panel-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.whats-new-panel-close:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text);
}
.whats-new-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.whats-new-entry {
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  padding: 14px 16px;
}
.whats-new-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.whats-new-entry-date {
  font-size: 11px;
  color: var(--text-dim);
}
.whats-new-draft-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--yellow);
  background: rgba(234,179,8,0.12);
  border: 1px solid rgba(234,179,8,0.3);
  border-radius: 4px;
  padding: 1px 6px;
}
.whats-new-entry-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.whats-new-entry-body {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  white-space: pre-wrap;
}
.whats-new-publish-btn {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  background: rgba(234,179,8,0.1);
  border: 1px solid rgba(234,179,8,0.4);
  color: var(--yellow);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.whats-new-publish-btn:hover {
  background: rgba(234,179,8,0.2);
}
.whats-new-empty {
  text-align: center;
  color: var(--text-dim);
  font-size: 13px;
  margin-top: 32px;
}

/* Gemini-style pill button — light background with a gradient 4-pointed
   star on the left. Stands out against the dark dashboard chrome by
   inverting contrast rather than competing with other accent colors. */
.ask-madden-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #1f2024;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 22px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 2px 10px rgba(0, 0, 0, 0.06);
}
.ask-madden-btn:hover {
  background: #f5f7fa;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14), 0 4px 18px rgba(0, 0, 0, 0.10);
}
.ask-madden-btn:active { transform: translateY(0); }
.ask-madden-btn .madden-sparkle {
  font-size: 16px;
  line-height: 1;
  background: linear-gradient(135deg, #4285F4 0%, #9B72CB 38%, #D96570 68%, #F2A93B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: inline-block;
  transform: translateY(-0.5px);
}

/* ── Location Selector (inside topbar) ── */
.loc-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: transparent;
  border: none;
  padding: 0;
}

.loc-btn {
  padding: 5px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  background: var(--card);
  color: var(--text-dim);
  border: 1px solid var(--card-border);
  transition: all 0.15s;
  white-space: nowrap;
  cursor: pointer;
}
.loc-btn:hover { border-color: var(--text-dim); color: var(--text); }
/* One active style for every location — accent teal everywhere. Per-loc
   identity is carried by the emoji prefix, not by a different pill color.
   Part of the 2026-04-20 palette simplification pass. */
.loc-btn.active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(0,212,170,0.08);
}

.loc-bar .updated {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-dim);
  padding-left: 8px;
  white-space: nowrap;
}

/* ── Tab Content Area ── */
.tab-content {
  flex: 1;
  overflow: hidden;
  position: relative;
}

.tab-pane {
  display: none;
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px;
}
.tab-pane.active { display: block; }

/* ── Right-side Drawers (Ask MADden + Member detail share slot) ── */
.side-drawer {
  grid-area: drawer;
  background: var(--card);
  border-left: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  transform: translateX(100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
body.drawer-open.drawer-madden .madden-drawer,
body.drawer-open.drawer-member .member-drawer {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--card-border);
  flex-shrink: 0;
}
.drawer-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
}
.drawer-close {
  background: transparent;
  color: var(--text-dim);
  font-size: 16px;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  border: none;
}
.drawer-close:hover { background: rgba(255,255,255,0.06); color: var(--text); }

.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  min-height: 0;
}

/* ── Login Modal ── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.modal-overlay.hidden { display: none; }

.modal {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 32px;
  width: 340px;
  max-width: 90vw;
}

.modal h2 { font-size: 18px; margin-bottom: 4px; }
.modal .subtitle { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; }
.modal label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 4px;
  margin-top: 12px;
}
.modal input { width: 100%; padding: 10px 12px; }
.modal .error-msg { color: var(--red); font-size: 12px; margin-top: 8px; }
.modal .btn-primary {
  width: 100%;
  margin-top: 20px;
  padding: 10px;
  font-size: 14px;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  :root { --drawer-w: 100vw; }
  #app { grid-template-columns: var(--sidebar-w-collapsed) 1fr 0px; }
  body.drawer-open #app { grid-template-columns: 0px 0px 100vw; }
  body.sidebar-collapsed #app { grid-template-columns: var(--sidebar-w-collapsed) 1fr 0px; }
  /* Both classes at once is the common phone state, and the two rules above
     have equal specificity — so source order was handing the win to the
     collapsed-sidebar rule and the drawer opened at 0px wide. Verified on prod
     2026-08-01: body "sidebar-collapsed drawer-open drawer-madden" at 375px
     and at 414px both computed "68px 346px 0px", i.e. Skipper opened to
     nothing. This rule states the combination explicitly. */
  body.sidebar-collapsed.drawer-open #app { grid-template-columns: 0px 0px 100vw; }
  body #main-nav .tab-btn { justify-content: center; padding: 10px 6px; font-size: 11px; }
  body .sidebar-footer .user-badge,
  body .sidebar-footer .user-role { display: none; }
  .sidebar-header { justify-content: center; padding: 14px 6px; }
  .sidebar-header .logo-text { display: none; }
  .sidebar-header .logo-mark { width: 24px; height: 24px; }
  .sidebar-toggle { display: none; }
  .ask-madden-btn .madden-label { display: none; }
  .ask-madden-btn { padding: 7px 10px; }
}

@media (max-width: 480px) {
  #topbar { padding: 0 10px; }
  .tab-pane { padding: 10px; }
}