/* Pinlane KISS refactor: loaded last to reduce noise without touching business logic. */
body.staff-mode,
body.admin-mode {
  --pl-bg: #050609;
  --pl-panel: #0a0d12;
  --pl-panel-2: #0f141b;
  --pl-panel-3: #141922;
  --pl-line: rgba(222, 226, 233, .10);
  --pl-line-strong: rgba(222, 226, 233, .18);
  --pl-text: #f4f4f1;
  --pl-text-soft: #c7ccd4;
  --pl-muted: #8c95a3;
  --pl-faint: #5f6876;
  --pl-accent: #eee8dd;
  --pl-accent-ink: #101010;
  --pl-danger: #ef8d84;
  --pl-success: #6fd49e;
  color: var(--pl-text);
  background:
    radial-gradient(circle at 28% 0, rgba(255,255,255,.035), transparent 28rem),
    var(--pl-bg) !important;
  overflow-x: hidden !important;
}

html,
body,
main,
#staffView,
#adminView,
.staff-wrap {
  max-width: 100vw !important;
  box-sizing: border-box !important;
}

body.staff-mode:not(.admin-mode) .staff-wrap,
body.admin-mode .admin-console,
body.admin-mode .admin-wrap {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding-inline: clamp(20px, 2.2vw, 34px) !important;
}

body.staff-mode :where(button, input, select, textarea),
body.admin-mode :where(button, input, select, textarea) {
  font: inherit;
}

body.staff-mode :where(button, .btn, .utility-action, .clients-action-btn, .reservations-action),
body.admin-mode :where(button, .btn, .utility-action) {
  transition-property: background-color, border-color, color, opacity, transform;
  transition-duration: 160ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

body.staff-mode :where(button, .btn, .utility-action, .clients-action-btn, .reservations-action):active,
body.admin-mode :where(button, .btn, .utility-action):active {
  transform: translateY(1px) scale(.985);
}

/* Navigation: fewer blocks, more Vercel-like restraint. */
body.staff-mode .ops-sidebar,
body.admin-mode .ops-sidebar {
  background: rgba(5, 6, 9, .88) !important;
  border-right: 1px solid var(--pl-line) !important;
  box-shadow: none !important;
  gap: 12px !important;
}

.fgx-menu-brand,
.fgx-menu-center,
.fgx-menu-account {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.fgx-menu-brand:hover,
.fgx-menu-center:hover,
.fgx-menu-account:hover {
  background: rgba(255, 255, 255, .035) !important;
  border-color: var(--pl-line) !important;
}

.fgx-menu-logo-frame {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.fgx-menu-logo {
  width: 30px !important;
  height: 30px !important;
  border-radius: 6px !important;
}

.fgx-menu-section {
  margin-top: 14px !important;
}

.fgx-menu-section-title {
  padding-inline: 8px !important;
  margin-bottom: 6px !important;
  color: var(--pl-faint) !important;
  font-size: 10px !important;
  letter-spacing: .13em !important;
}

.fgx-menu-item,
.fgx-menu-subitem {
  min-height: 36px !important;
  border-radius: 8px !important;
  color: var(--pl-muted) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

.fgx-menu-item:hover,
.fgx-menu-subitem:hover {
  color: var(--pl-text-soft) !important;
  background: rgba(255, 255, 255, .035) !important;
}

.fgx-menu-item.active,
.fgx-menu-item-parent.active,
.fgx-menu-subitem.active {
  color: var(--pl-text) !important;
  background: rgba(255, 255, 255, .055) !important;
  border-color: transparent !important;
  box-shadow: inset 1px 0 0 var(--pl-accent) !important;
}

.fgx-menu-subnav {
  margin: 3px 0 8px 16px !important;
  padding-left: 9px !important;
  overflow: hidden !important;
  border-left: 1px solid rgba(226, 232, 240, .08) !important;
  transition-property: max-height, opacity, transform, margin, padding;
  transition-duration: 210ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.fgx-menu-subnav[data-state="closed"] {
  max-height: 0 !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transform: translateY(-4px) !important;
  pointer-events: none !important;
}

.fgx-menu-subnav[data-state="open"] {
  max-height: 220px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.fgx-menu-chevron {
  width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  color: var(--pl-faint) !important;
}

.fgx-menu-chevron svg {
  width: 13px !important;
  height: 13px !important;
  transition: transform 180ms cubic-bezier(.2, 0, 0, 1) !important;
}

.fgx-menu-group.is-open > .fgx-menu-item .fgx-menu-chevron svg {
  transform: rotate(90deg) !important;
}

.fgx-menu-popover {
  border-radius: 10px !important;
  background: #090b10 !important;
  border: 1px solid var(--pl-line-strong) !important;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .44) !important;
}

.fgx-account-summary {
  padding: 10px 12px 12px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid var(--pl-line) !important;
}

.fgx-menu-option {
  min-height: 40px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  background: transparent !important;
  border: 1px solid transparent !important;
}

.fgx-menu-option:hover {
  background: rgba(255, 255, 255, .045) !important;
  border-color: var(--pl-line) !important;
}

/* Common product surface clean-up. */
body.staff-mode :where(.clients-hero, .reservations-hero, .utility-hero, .utility-panel, .clients-table-panel, .client-profile-panel, .reservations-calendar-panel, .reservations-day-detail) {
  background: linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.008)) !important;
  border: 1px solid var(--pl-line) !important;
  box-shadow: none !important;
}

body.staff-mode :where(.clients-hero, .reservations-hero, .utility-hero) {
  min-height: auto !important;
  padding: 22px 24px !important;
  border-radius: 14px !important;
}

body.staff-mode :where(.clients-hero h1, .reservations-hero h1, .utility-hero h1) {
  margin: 0 !important;
  color: var(--pl-text) !important;
  font-size: clamp(28px, 2.4vw, 38px) !important;
  line-height: .98 !important;
  letter-spacing: -.025em !important;
}

body.staff-mode :where(.clients-hero p, .reservations-hero p, .utility-hero p, .clients-panel-head p, .utility-panel-head p) {
  color: var(--pl-muted) !important;
}

body.staff-mode .staff-utility-page .utility-overview,
body.staff-mode .staff-clients-page .clients-kpis,
body.staff-mode .staff-reservations-page .reservations-kpi-grid {
  display: none !important;
}

body.staff-mode:not(.admin-mode) .staff-clients-page .clients-kpis,
body.staff-mode:not(.admin-mode) .staff-reservations-page .reservations-kpi-grid {
  display: none !important;
}

body.staff-mode :where(.utility-actions, .clients-actions, .reservations-actions) {
  gap: 10px !important;
  align-items: center !important;
}

body.staff-mode :where(.utility-actions button, .clients-action-btn, .reservations-action, .reservations-select, .reservations-month-nav, .clients-top-search, .clients-panel-search, .clients-select, .clients-columns) {
  min-height: 40px !important;
  border-radius: 9px !important;
  border: 1px solid var(--pl-line-strong) !important;
  background: rgba(255, 255, 255, .018) !important;
  color: var(--pl-text-soft) !important;
  box-shadow: none !important;
}

body.staff-mode :where(.utility-actions .primary, .clients-action-btn.primary, .reservations-action.primary) {
  background: var(--pl-accent) !important;
  border-color: var(--pl-accent) !important;
  color: var(--pl-accent-ink) !important;
}

body.staff-mode :where(.utility-actions button:hover, .clients-action-btn:hover, .reservations-action:hover, .clients-columns:hover) {
  border-color: rgba(238, 232, 221, .32) !important;
  background: rgba(255, 255, 255, .045) !important;
}

/* Reservations: make the month view a readable tool, not a wall of boxed metrics. */
body.staff-mode .staff-reservations-page:not(.hidden) {
  display: grid !important;
  gap: 18px !important;
}

body.staff-mode .staff-reservations-page .reservations-hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}

body.staff-mode .reservations-month-nav {
  display: grid !important;
  grid-template-columns: 38px minmax(140px, 1fr) 38px !important;
  overflow: hidden !important;
  padding: 0 !important;
}

body.staff-mode .reservations-month-nav button {
  min-height: 38px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--pl-text-soft) !important;
}

body.staff-mode .reservations-month-nav .month-button {
  border-inline: 1px solid var(--pl-line) !important;
  font-variant-numeric: tabular-nums !important;
}

body.staff-mode .reservations-main-grid {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  gap: 16px !important;
  min-width: 0 !important;
}

body.staff-mode .reservations-calendar-panel {
  overflow: hidden !important;
  border-radius: 14px !important;
}

body.staff-mode .reservations-filter-row {
  min-height: 58px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--pl-line) !important;
}

body.staff-mode .reservations-pill-group {
  gap: 6px !important;
}

body.staff-mode .reservations-pill-group button {
  min-height: 34px !important;
  padding-inline: 13px !important;
  border-radius: 8px !important;
  color: var(--pl-muted) !important;
  background: transparent !important;
}

body.staff-mode .reservations-pill-group button.active {
  color: var(--pl-text) !important;
  background: rgba(255,255,255,.055) !important;
  box-shadow: inset 0 -1px 0 var(--pl-accent) !important;
}

body.staff-mode .reservations-calendar {
  background: transparent !important;
  border: 0 !important;
}

body.staff-mode .reservations-weekday {
  min-height: 42px !important;
  color: var(--pl-muted) !important;
  letter-spacing: .06em !important;
}

body.staff-mode .reservations-day {
  min-height: 92px !important;
  padding: 12px !important;
  border-color: var(--pl-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
}

body.staff-mode .reservations-day:hover {
  background: rgba(255,255,255,.03) !important;
}

body.staff-mode .reservations-day.selected {
  outline: 1px solid rgba(238, 232, 221, .45) !important;
  outline-offset: -1px !important;
  box-shadow: none !important;
}

body.staff-mode .reservations-day-empty,
body.staff-mode .reservations-day-line {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Clients: remove horizontal scroll, align rows, keep the profile readable. */
body.staff-mode .staff-clients-page:not(.hidden) {
  display: grid !important;
  gap: 18px !important;
  overflow-x: hidden !important;
}

body.staff-mode .staff-clients-page .clients-hero {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
}

body.staff-mode .clients-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

body.staff-mode .clients-top-search {
  width: min(360px, 32vw) !important;
}

body.staff-mode .clients-workspace {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 350px) !important;
  gap: 16px !important;
  align-items: start !important;
  min-width: 0 !important;
}

body.staff-mode .clients-table-panel,
body.staff-mode .client-profile-panel {
  border-radius: 14px !important;
  overflow: hidden !important;
  min-width: 0 !important;
}

body.staff-mode .clients-panel-head {
  padding: 18px 18px 12px !important;
}

body.staff-mode .clients-tabs {
  min-height: 50px !important;
  gap: 8px !important;
  padding: 0 14px !important;
  overflow-x: auto !important;
  border-bottom-color: var(--pl-line) !important;
}

body.staff-mode .clients-tabs button {
  min-height: 38px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
}

body.staff-mode .clients-tabs button.active {
  background: rgba(255,255,255,.055) !important;
}

body.staff-mode .clients-tabs button.active::after {
  display: none !important;
}

body.staff-mode .clients-tabs em {
  background: rgba(255,255,255,.07) !important;
  color: var(--pl-text-soft) !important;
}

body.staff-mode .clients-toolbar {
  grid-template-columns: minmax(180px, 1.1fr) minmax(110px, .55fr) minmax(130px, .65fr) minmax(0, 1fr) auto !important;
  min-height: 58px !important;
  gap: 10px !important;
  padding: 10px 14px !important;
}

body.staff-mode .clients-table-head,
body.staff-mode .clients-table-row {
  grid-template-columns: minmax(260px, 1.75fr) 92px 126px 106px 112px 76px !important;
  min-width: 0 !important;
}

body.staff-mode .clients-table-head {
  min-height: 38px !important;
  padding-inline: 12px !important;
}

body.staff-mode .clients-table-body {
  max-height: min(640px, calc(100dvh - 360px)) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 12px 8px !important;
  scrollbar-width: thin;
}

body.staff-mode .clients-table-row {
  min-height: 66px !important;
  border-top-color: rgba(226, 232, 240, .075) !important;
}

body.staff-mode .clients-table-row.selected {
  background: rgba(255,255,255,.035) !important;
  box-shadow: inset 2px 0 0 var(--pl-accent) !important;
}

body.staff-mode .client-cell {
  padding-inline: 8px !important;
}

body.staff-mode .client-main {
  grid-template-columns: 36px minmax(0, 1fr) !important;
  gap: 12px !important;
}

body.staff-mode .client-avatar,
body.staff-mode .client-profile-avatar,
body.staff-mode .utility-avatar,
body.staff-mode .group-avatar {
  background: #1a202b !important;
  color: #eef2f7 !important;
  border: 1px solid var(--pl-line) !important;
  box-shadow: none !important;
}

body.staff-mode .client-profile-panel {
  padding: 22px !important;
}

body.staff-mode .client-profile-stats {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid var(--pl-line) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.staff-mode .client-profile-stats > div {
  min-height: 70px !important;
  display: grid !important;
  align-content: center !important;
  justify-items: center !important;
  gap: 5px !important;
  padding: 10px !important;
}

body.staff-mode .client-preference-grid,
body.staff-mode .client-profile-tags {
  gap: 8px !important;
}

body.staff-mode .client-profile-tags span,
body.staff-mode .client-preference-grid span {
  min-height: 34px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.026) !important;
}

/* Utility pages: each page keeps its purpose, without the repeated KPI carpet. */
body.staff-mode .staff-utility-page:not(.hidden) {
  display: grid !important;
  gap: 18px !important;
}

body.staff-mode .utility-panel {
  border-radius: 14px !important;
  overflow: hidden !important;
}

body.staff-mode .utility-panel-head {
  padding: 18px 20px !important;
  border-bottom: 1px solid var(--pl-line) !important;
}

body.staff-mode .utility-rush-board,
body.staff-mode .utility-arrival-desk,
body.staff-mode .utility-group-workspace {
  gap: 14px !important;
}

body.staff-mode .utility-group-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 370px) !important;
  align-items: start !important;
}

body.staff-mode .group-command,
body.staff-mode .group-ledger,
body.staff-mode .group-followups,
body.staff-mode .group-focus,
body.staff-mode .group-agenda {
  border-radius: 12px !important;
  background: rgba(255,255,255,.018) !important;
  border: 1px solid var(--pl-line) !important;
  box-shadow: none !important;
}

body.staff-mode .group-focus-main {
  align-items: center !important;
}

body.staff-mode .group-focus-grid {
  gap: 8px !important;
}

body.staff-mode .group-focus-grid div {
  border-radius: 9px !important;
  background: rgba(255,255,255,.02) !important;
}

body.staff-mode .utility-res-card,
body.staff-mode .group-card,
body.staff-mode .group-ledger-row {
  border-radius: 10px !important;
  background: rgba(255,255,255,.018) !important;
  border-color: var(--pl-line) !important;
  box-shadow: none !important;
}

/* Events: field-first command board, not a generic card wall. */
body.staff-mode .utility-page-events .utility-panel {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, .014) !important;
}

body.staff-mode .utility-page-events .utility-panel-head {
  padding: 18px 20px !important;
}

body.staff-mode .events-workspace {
  display: grid !important;
  gap: 18px !important;
  padding: 18px 20px 22px !important;
}

body.staff-mode .events-summary-strip {
  display: grid !important;
  grid-template-columns: 1.35fr .72fr .82fr !important;
  gap: 10px !important;
}

body.staff-mode .events-summary-strip article {
  min-height: 88px !important;
  display: grid !important;
  align-content: center !important;
  gap: 6px !important;
  padding: 15px 16px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .018) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) !important;
}

body.staff-mode .events-summary-strip span,
body.staff-mode .events-summary-strip p,
body.staff-mode .event-meta,
body.staff-mode .event-resource,
body.staff-mode .events-side p {
  color: var(--pl-muted) !important;
}

body.staff-mode .events-summary-strip span {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

body.staff-mode .events-summary-strip strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--pl-text) !important;
  font-size: 22px !important;
  font-variant-numeric: tabular-nums !important;
}

body.staff-mode .events-summary-strip p {
  margin: 0 !important;
  font-size: 13px !important;
}

body.staff-mode .events-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 318px !important;
  gap: 18px !important;
  align-items: start !important;
}

body.staff-mode .events-agenda,
body.staff-mode .events-side section {
  min-width: 0 !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .012) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) !important;
}

body.staff-mode .events-section-head {
  min-height: 68px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--pl-line) !important;
}

body.staff-mode .events-section-head h3,
body.staff-mode .events-side h3 {
  margin: 0 !important;
  color: var(--pl-text) !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

body.staff-mode .events-section-head p {
  margin: 4px 0 0 !important;
  color: var(--pl-muted) !important;
  font-size: 13px !important;
}

body.staff-mode .events-section-head button,
body.staff-mode .events-side button,
body.staff-mode .events-empty-state button {
  min-height: 38px !important;
  border-radius: 8px !important;
}

body.staff-mode .events-timeline {
  display: grid !important;
}

body.staff-mode .event-row {
  display: grid !important;
  grid-template-columns: 88px minmax(190px, 1fr) minmax(210px, .72fr) auto !important;
  gap: 16px !important;
  align-items: center !important;
  min-height: 84px !important;
  padding: 14px 18px !important;
  border-bottom: 1px solid rgba(255, 255, 255, .055) !important;
  background: transparent !important;
}

body.staff-mode .event-row:last-child {
  border-bottom: 0 !important;
}

body.staff-mode .event-time {
  display: grid !important;
  gap: 4px !important;
}

body.staff-mode .event-time strong {
  color: var(--pl-text) !important;
  font-size: 18px !important;
  font-variant-numeric: tabular-nums !important;
}

body.staff-mode .event-time span,
body.staff-mode .event-title-line span {
  width: fit-content !important;
  max-width: 100% !important;
  padding: 3px 8px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, .045) !important;
  color: var(--pl-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

body.staff-mode .event-main,
body.staff-mode .event-resource {
  min-width: 0 !important;
}

body.staff-mode .event-title-line {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
}

body.staff-mode .event-title-line strong {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--pl-text) !important;
  font-size: 15px !important;
}

body.staff-mode .event-title-line span {
  flex: 0 0 auto !important;
}

body.staff-mode .event-main p {
  margin: 4px 0 8px !important;
  color: var(--pl-text-soft) !important;
  font-size: 13px !important;
}

body.staff-mode .event-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px 12px !important;
  font-size: 12px !important;
}

body.staff-mode .event-resource {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 13px !important;
}

body.staff-mode .event-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body.staff-mode .event-actions .utility-action {
  min-height: 36px !important;
  padding-inline: 11px !important;
  border-radius: 8px !important;
}

body.staff-mode .event-row.tone-warning .event-title-line span,
body.staff-mode .event-watch-line.tone-warning {
  color: #f1c982 !important;
  background: rgba(217, 154, 43, .09) !important;
}

body.staff-mode .event-row.tone-info .event-title-line span,
body.staff-mode .event-watch-line.tone-info {
  color: #aebdff !important;
  background: rgba(93, 141, 255, .08) !important;
}

body.staff-mode .event-row.tone-success .event-title-line span,
body.staff-mode .event-watch-line.tone-success {
  color: #8edeb7 !important;
  background: rgba(55, 201, 132, .08) !important;
}

body.staff-mode .events-side {
  display: grid !important;
  gap: 12px !important;
}

body.staff-mode .events-side section {
  display: grid !important;
  gap: 10px !important;
  padding: 16px !important;
}

body.staff-mode .event-watch-line {
  width: 100% !important;
  min-height: 58px !important;
  justify-items: start !important;
  text-align: left !important;
  border-radius: 9px !important;
  background: rgba(255, 255, 255, .018) !important;
}

body.staff-mode .event-watch-line strong,
body.staff-mode .event-watch-line span {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.staff-mode .events-side section > button:not(.event-watch-line) {
  width: 100% !important;
  justify-content: flex-start !important;
  background: rgba(255, 255, 255, .018) !important;
}

body.staff-mode .events-empty-state {
  min-height: 260px !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 10px !important;
  padding: 28px !important;
  text-align: center !important;
  color: var(--pl-muted) !important;
}

body.staff-mode .events-empty-state strong {
  color: var(--pl-text) !important;
  font-size: 18px !important;
}

body.staff-mode .events-empty-state span {
  max-width: 520px !important;
}

/* Planning: tab spacing and gear buttons should feel like tools, not boxes. */
body.staff-mode #staffView .staff-resource-tabs {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  gap: 0 !important;
  border: 1px solid var(--pl-line) !important;
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
  background: rgba(255,255,255,.015) !important;
}

body.staff-mode #staffView .staff-resource-tab {
  min-height: 74px !important;
  padding: 14px 26px !important;
  border-radius: 0 !important;
  border: 0 !important;
  border-right: 1px solid var(--pl-line) !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.staff-mode #staffView .staff-resource-tab:last-child {
  border-right: 0 !important;
}

body.staff-mode #staffView .staff-resource-tab.active {
  background: rgba(255,255,255,.032) !important;
  box-shadow: inset 0 -2px 0 var(--pl-accent) !important;
}

body.staff-mode #staffView .staff-resource-tab::before,
body.staff-mode #staffView .staff-resource-tab::after {
  filter: none !important;
  box-shadow: none !important;
}

body.staff-mode :where(.planning-table th button, .planning-table .lane-action, .lane-settings, .lane-gear, .lane-config-btn, .lane-head button) {
  width: 28px !important;
  height: 28px !important;
  min-height: 28px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  box-shadow: none !important;
  display: inline-grid !important;
  place-items: center !important;
  color: var(--pl-faint) !important;
}

body.staff-mode :where(.planning-table th button, .planning-table .lane-action, .lane-settings, .lane-gear, .lane-config-btn, .lane-head button):hover {
  color: var(--pl-text-soft) !important;
  background: rgba(255,255,255,.04) !important;
}

@media (max-width: 1180px) {
  body.staff-mode .clients-workspace,
  body.staff-mode .reservations-main-grid,
  body.staff-mode .utility-group-workspace,
  body.staff-mode .events-layout {
    grid-template-columns: 1fr !important;
  }

  body.staff-mode .clients-top-search {
    width: 100% !important;
  }

  body.staff-mode .event-row {
    grid-template-columns: 80px minmax(0, 1fr) !important;
  }

  body.staff-mode .event-resource,
  body.staff-mode .event-actions {
    grid-column: 2 !important;
  }

  body.staff-mode .event-actions {
    justify-content: flex-start !important;
  }
}

@media (max-width: 900px) {
  body.staff-mode:not(.admin-mode) .staff-wrap,
  body.admin-mode .admin-console,
  body.admin-mode .admin-wrap {
    padding-inline: 14px !important;
  }

  body.staff-mode .staff-clients-page .clients-hero,
  body.staff-mode .staff-reservations-page .reservations-hero {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  body.staff-mode .clients-toolbar,
  body.staff-mode .clients-table-head,
  body.staff-mode .clients-table-row {
    grid-template-columns: 1fr !important;
  }

  body.staff-mode .clients-table-head {
    display: none !important;
  }

  body.staff-mode .events-summary-strip {
    grid-template-columns: 1fr !important;
  }

  body.staff-mode .event-row {
    grid-template-columns: 1fr !important;
  }

  body.staff-mode .event-time,
  body.staff-mode .event-resource,
  body.staff-mode .event-actions {
    grid-column: auto !important;
  }
}

/* Route safety: page-level hidden must always beat late presentation rules. */
body.staff-mode :where(
  .staff-dashboard-page,
  .staff-clients-page,
  .staff-reservations-page,
  .staff-pricing-page,
  .staff-emails-page,
  .staff-campaigns-page,
  .staff-utility-page
).hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Reservations polish: calmer SaaS view, clearer month controls, less visual noise. */
body.staff-mode .staff-reservations-page:not(.hidden) {
  gap: 20px !important;
  animation: pinlane-page-in 180ms cubic-bezier(.2, 0, 0, 1) both;
}

@keyframes pinlane-page-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

body.staff-mode .staff-reservations-page .reservations-hero {
  padding: 20px 22px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .012) !important;
}

body.staff-mode .staff-reservations-page .reservations-hero h1 {
  font-size: clamp(30px, 2.15vw, 40px) !important;
  letter-spacing: -.035em !important;
}

body.staff-mode .staff-reservations-page .reservations-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

body.staff-mode .staff-reservations-page .reservations-select,
body.staff-mode .staff-reservations-page .reservations-action,
body.staff-mode .staff-reservations-page .reservations-month-nav {
  min-height: 42px !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, .015) !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .075) !important;
}

body.staff-mode .staff-reservations-page .reservations-select {
  min-width: 154px !important;
  padding: 0 34px 0 12px !important;
}

body.staff-mode .staff-reservations-page .reservations-month-nav {
  grid-template-columns: 40px minmax(150px, 1fr) 40px !important;
}

body.staff-mode .staff-reservations-page .reservations-month-nav button {
  font-size: 16px !important;
}

body.staff-mode .staff-reservations-page .reservations-action.primary {
  padding-inline: 16px !important;
}

body.staff-mode .reservations-main-grid {
  grid-template-columns: minmax(0, 1fr) minmax(320px, 390px) !important;
  gap: 18px !important;
}

body.staff-mode .staff-reservations-page .reservations-filter-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 12px 14px !important;
}

body.staff-mode .staff-reservations-page .reservations-pill-group {
  display: flex !important;
  flex-wrap: wrap !important;
}

body.staff-mode .staff-reservations-page .reservations-pill-group button {
  font-size: 13px !important;
  font-weight: 650 !important;
}

body.staff-mode .staff-reservations-page .reservations-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  color: var(--pl-muted) !important;
}

body.staff-mode .staff-reservations-page .reservations-legend span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
}

body.staff-mode .staff-reservations-page .reservations-calendar {
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
}

body.staff-mode .staff-reservations-page .reservations-day {
  min-height: 104px !important;
  padding: 12px 12px 10px !important;
}

body.staff-mode .staff-reservations-page .reservations-day-head {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

body.staff-mode .staff-reservations-page .reservations-day-head strong {
  font-variant-numeric: tabular-nums !important;
}

body.staff-mode .staff-reservations-page .reservations-day-head em {
  color: var(--pl-muted) !important;
}

body.staff-mode .staff-reservations-page .reservations-day-body {
  display: grid !important;
  gap: 5px !important;
  margin-top: 12px !important;
}

body.staff-mode .staff-reservations-page .reservations-day-line {
  min-height: 24px !important;
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 7px !important;
  border-radius: 6px !important;
  padding: 0 7px !important;
  background: rgba(255, 255, 255, .022) !important;
}

body.staff-mode .staff-reservations-page .reservations-day-empty {
  margin-top: 20px !important;
  color: var(--pl-faint) !important;
}

body.staff-mode .staff-reservations-page .reservations-calendar-foot {
  min-height: 42px !important;
  padding: 0 14px !important;
  color: var(--pl-muted) !important;
}

body.staff-mode .staff-reservations-page .reservations-day-detail {
  position: sticky !important;
  top: 20px !important;
  align-self: start !important;
  padding: 18px !important;
  border-radius: 12px !important;
}

body.staff-mode .staff-reservations-page .reservations-day-detail-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 14px !important;
}

body.staff-mode .staff-reservations-page .reservations-day-detail-head button {
  min-height: 38px !important;
  padding-inline: 12px !important;
  border-radius: 8px !important;
}

body.staff-mode .staff-reservations-page .reservations-day-summary {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  margin: 16px 0 !important;
}

body.staff-mode .staff-reservations-page .reservations-day-summary div {
  min-height: 68px !important;
  display: grid !important;
  align-content: center !important;
  gap: 4px !important;
  padding: 12px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, .018) !important;
  border: 1px solid var(--pl-line) !important;
}

body.staff-mode .staff-reservations-page .reservations-day-summary strong,
body.staff-mode .staff-reservations-page .reservations-detail-row .time,
body.staff-mode .staff-reservations-page .reservations-detail-row .amount {
  font-variant-numeric: tabular-nums !important;
}

body.staff-mode .staff-reservations-page .reservations-day-list {
  display: grid !important;
  gap: 8px !important;
}

body.staff-mode .staff-reservations-page .reservations-detail-row {
  min-height: 62px !important;
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1.3fr) minmax(0, 1fr) 58px 78px 72px !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
}

body.staff-mode .staff-reservations-page .reservations-detail-row .main,
body.staff-mode .staff-reservations-page .reservations-detail-row .resource {
  min-width: 0 !important;
}

body.staff-mode .staff-reservations-page .reservations-detail-row .main strong,
body.staff-mode .staff-reservations-page .reservations-detail-row .main em,
body.staff-mode .staff-reservations-page .reservations-detail-row .resource {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  body.staff-mode .staff-reservations-page .reservations-day-detail {
    position: static !important;
  }

  body.staff-mode .staff-reservations-page .reservations-detail-row {
    grid-template-columns: 52px minmax(0, 1fr) 74px !important;
  }

  body.staff-mode .staff-reservations-page .reservations-detail-row .resource,
  body.staff-mode .staff-reservations-page .reservations-detail-row .players,
  body.staff-mode .staff-reservations-page .reservations-detail-row .status {
    display: none !important;
  }
}

/* Sidebar density: keep section labels useful without wasting vertical space. */
body.staff-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-nav,
body.admin-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-nav {
  gap: 0 !important;
  padding-block: 2px 8px !important;
}

body.staff-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-section,
body.admin-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-section {
  margin-top: 0 !important;
  padding-block: 1px !important;
  gap: 1px !important;
}

body.staff-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-section + .fgx-menu-section,
body.admin-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-section + .fgx-menu-section {
  margin-top: 10px !important;
}

body.staff-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-section-title,
body.admin-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-section-title {
  margin: 0 0 3px !important;
  padding: 4px 8px 3px !important;
  line-height: 1.1 !important;
}

body.staff-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-item,
body.admin-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-item,
body.staff-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-subitem,
body.admin-mode:not(.staff-menu-collapsed) .ops-sidebar .fgx-menu-subitem {
  min-height: 34px !important;
}