/*
  Promptly-inspired product skin.
  Final visual layer only: no business logic, routes, data contracts or handlers.
*/

:root {
  --pp-bg: #050609;
  --pp-bg-2: #080a0f;
  --pp-sidebar: #07090e;
  --pp-panel: #0b0e14;
  --pp-panel-2: #0f131b;
  --pp-panel-3: #131823;
  --pp-line: rgba(226, 232, 240, .085);
  --pp-line-2: rgba(226, 232, 240, .14);
  --pp-line-3: rgba(226, 232, 240, .22);
  --pp-text: #f4f7fb;
  --pp-text-2: rgba(232, 238, 247, .76);
  --pp-text-3: rgba(164, 176, 194, .62);
  --pp-text-4: rgba(126, 139, 160, .48);
  --pp-accent: #7557ff;
  --pp-accent-2: #9b87ff;
  --pp-blue: #4f7dff;
  --pp-green: #22b676;
  --pp-amber: #d88b24;
  --pp-red: #e26d66;
  --pp-violet-bg: rgba(117, 87, 255, .12);
  --pp-blue-bg: rgba(79, 125, 255, .12);
  --pp-green-bg: rgba(34, 182, 118, .10);
  --pp-amber-bg: rgba(216, 139, 36, .10);
  --pp-radius-xs: 6px;
  --pp-radius-sm: 8px;
  --pp-radius: 12px;
  --pp-radius-lg: 16px;
  --pp-shadow: 0 18px 52px rgba(0, 0, 0, .34);
  --pp-shadow-soft: 0 1px 0 rgba(255,255,255,.025) inset;
  color-scheme: dark;
}

body.staff-mode,
body.admin-mode {
  --bg: var(--pp-bg);
  --card: var(--pp-panel);
  --border: var(--pp-line);
  --border-hover: var(--pp-line-2);
  --text: var(--pp-text);
  --text-2: var(--pp-text-2);
  --text-3: var(--pp-text-3);
  --ops-bg: var(--pp-bg);
  --ops-surface: var(--pp-panel);
  --ops-surface-2: var(--pp-panel-2);
  --ops-surface-3: var(--pp-panel-3);
  --ops-border: var(--pp-line);
  --ops-border-strong: var(--pp-line-2);
  --ops-text: var(--pp-text);
  --ops-muted: var(--pp-text-3);
  --ops-faint: var(--pp-text-4);
  --ops-accent: var(--pp-accent);
  --fgx-sidebar-width: 252px;
  background:
    radial-gradient(980px 620px at 20% -18%, rgba(73, 104, 255, .055), transparent 62%),
    radial-gradient(720px 520px at 100% 8%, rgba(117, 87, 255, .045), transparent 58%),
    var(--pp-bg) !important;
  color: var(--pp-text) !important;
  overflow-x: clip !important;
  font-family: Inter, Aptos, "Segoe UI", system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums;
}

body.staff-mode.staff-light,
body.admin-mode.staff-light {
  --pp-bg: #f6f7f9;
  --pp-bg-2: #eef1f5;
  --pp-sidebar: #ffffff;
  --pp-panel: #ffffff;
  --pp-panel-2: #f8fafc;
  --pp-panel-3: #eef2f7;
  --pp-line: rgba(15, 23, 42, .09);
  --pp-line-2: rgba(15, 23, 42, .16);
  --pp-line-3: rgba(15, 23, 42, .25);
  --pp-text: #111827;
  --pp-text-2: rgba(17, 24, 39, .74);
  --pp-text-3: rgba(71, 85, 105, .66);
  --pp-text-4: rgba(100, 116, 139, .5);
  color-scheme: light;
  background: #f6f7f9 !important;
}

body.staff-mode *,
body.admin-mode * {
  letter-spacing: 0 !important;
  text-shadow: none !important;
  box-sizing: border-box;
}

body.staff-mode ::selection,
body.admin-mode ::selection {
  background: rgba(117, 87, 255, .34) !important;
  color: #fff !important;
}

body.staff-mode button,
body.admin-mode button,
body.staff-mode a,
body.admin-mode a,
body.staff-mode input,
body.admin-mode input,
body.staff-mode select,
body.admin-mode select,
body.staff-mode textarea,
body.admin-mode textarea {
  transition-property: background-color, border-color, color, opacity, transform, box-shadow;
  transition-duration: 150ms;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

body.staff-mode button:active:not(:disabled),
body.admin-mode button:active:not(:disabled) {
  transform: translateY(1px) scale(.985) !important;
}

body.staff-mode button:focus-visible,
body.admin-mode button:focus-visible,
body.staff-mode a:focus-visible,
body.admin-mode a:focus-visible,
body.staff-mode input:focus-visible,
body.admin-mode input:focus-visible,
body.staff-mode select:focus-visible,
body.admin-mode select:focus-visible {
  outline: 2px solid rgba(155, 135, 255, .72) !important;
  outline-offset: 2px !important;
}

/* Staff chrome */
body.staff-mode header,
body.admin-mode header {
  width: var(--fgx-sidebar-width) !important;
  min-width: var(--fgx-sidebar-width) !important;
  background: transparent !important;
  border-right: 1px solid var(--pp-line) !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.staff-mode header > :not(.ops-sidebar),
body.admin-mode header > :not(.ops-sidebar) {
  display: none !important;
}

body.staff-mode .ops-sidebar,
body.admin-mode .ops-sidebar {
  width: var(--fgx-sidebar-width) !important;
  padding: 16px 12px 12px !important;
  background: rgba(7, 9, 14, .92) !important;
  border-right: 1px solid var(--pp-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px) saturate(120%);
}

body.staff-menu-collapsed,
body.staff-mode.staff-menu-collapsed,
body.admin-mode.staff-menu-collapsed {
  --fgx-sidebar-width: 68px;
}

body.staff-mode main,
body.admin-mode main {
  padding-left: var(--fgx-sidebar-width) !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin: 0 !important;
  overflow-x: clip !important;
  background: transparent !important;
}

body.staff-mode .staff-wrap,
body.admin-mode .admin-wrap,
body.staff-mode .staff-dashboard-page,
body.staff-mode .staff-clients-page,
body.staff-mode .staff-reservations-page,
body.staff-mode .staff-pricing-page,
body.staff-mode .staff-emails-page,
body.staff-mode .staff-campaigns-page,
body.staff-mode .staff-utility-page {
  width: 100% !important;
  max-width: 1640px !important;
  margin-inline: auto !important;
  padding: 24px clamp(18px, 2vw, 32px) 36px !important;
  color: var(--pp-text) !important;
}

body.staff-mode .hidden,
body.admin-mode .hidden {
  display: none !important;
}

/* Sidebar, Promptly/Vercel-like */
.fgx-menu-brand,
.fgx-menu-center,
.fgx-menu-item,
.fgx-menu-subitem,
.fgx-menu-account,
.fgx-menu-collapse {
  border-radius: 9px !important;
}

.fgx-menu-top {
  min-height: 38px !important;
}

.fgx-menu-brand {
  min-height: 38px !important;
  padding: 0 6px !important;
}

.fgx-menu-logo-frame {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
  background: #050609 !important;
  border: 1px solid var(--pp-line) !important;
  box-shadow: none !important;
}

.fgx-menu-logo {
  width: 31px !important;
  height: 31px !important;
  object-fit: contain !important;
  border-radius: 7px !important;
}

.fgx-menu-brand-copy strong,
.fgx-menu-account-copy strong {
  color: var(--pp-text) !important;
  -webkit-text-fill-color: var(--pp-text) !important;
  font-weight: 650 !important;
}

.fgx-menu-brand-copy small,
.fgx-menu-account-copy small {
  color: var(--pp-text-3) !important;
  -webkit-text-fill-color: var(--pp-text-3) !important;
}

.fgx-menu-center,
.fgx-menu-account {
  background: rgba(255, 255, 255, .025) !important;
  border: 1px solid var(--pp-line) !important;
  box-shadow: none !important;
}

.fgx-menu-center:hover,
.fgx-menu-account:hover {
  background: rgba(255, 255, 255, .05) !important;
  border-color: var(--pp-line-2) !important;
}

.fgx-menu-nav {
  padding-right: 2px !important;
  scrollbar-color: rgba(148, 163, 184, .28) transparent !important;
}

.fgx-menu-section {
  padding-block: 6px !important;
}

.fgx-menu-section-title {
  padding: 10px 8px 6px !important;
  color: var(--pp-text-4) !important;
  -webkit-text-fill-color: var(--pp-text-4) !important;
  font-size: 10px !important;
  font-weight: 640 !important;
  text-transform: uppercase !important;
}

.fgx-menu-item,
.fgx-menu-subitem {
  min-height: 34px !important;
  color: rgba(226, 232, 240, .72) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .72) !important;
  background: transparent !important;
  border: 0 !important;
}

.fgx-menu-item {
  padding: 0 9px !important;
  font-size: 13px !important;
  font-weight: 560 !important;
}

.fgx-menu-subitem {
  margin-block: 1px !important;
  padding-left: 13px !important;
  font-size: 12.5px !important;
}

.fgx-menu-item:hover,
.fgx-menu-subitem:hover {
  color: var(--pp-text) !important;
  -webkit-text-fill-color: var(--pp-text) !important;
  background: rgba(255, 255, 255, .045) !important;
}

.fgx-menu-item.active,
.fgx-menu-subitem.active,
.fgx-menu-group.active .fgx-menu-item-parent {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: rgba(255, 255, 255, .055) !important;
}

.fgx-menu-item.active::before,
.fgx-menu-subitem.active::before,
.fgx-menu-group.active .fgx-menu-item-parent::before {
  left: 0 !important;
  top: 7px !important;
  bottom: 7px !important;
  width: 2px !important;
  background: var(--pp-accent-2) !important;
  opacity: 1 !important;
}

.fgx-menu-item.active::after,
.fgx-menu-subitem.active::after,
.fgx-menu-group.active .fgx-menu-item-parent::after {
  display: none !important;
}

.fgx-menu-icon,
.fgx-center-dot,
.fgx-menu-chevron,
.fgx-menu-more {
  color: rgba(203, 213, 225, .62) !important;
}

.fgx-menu-item.active .fgx-menu-icon,
.fgx-menu-subitem.active .fgx-menu-icon,
.fgx-menu-group.active .fgx-menu-item-parent .fgx-menu-icon {
  color: var(--pp-accent-2) !important;
}

.fgx-menu-badge,
.fgx-menu-avatar {
  background: rgba(117, 87, 255, .12) !important;
  border: 1px solid rgba(155, 135, 255, .24) !important;
  color: #f7f4ff !important;
  -webkit-text-fill-color: #f7f4ff !important;
  box-shadow: none !important;
}

.fgx-menu-account {
  min-height: 52px !important;
  margin-top: 8px !important;
}

/* Page titles and actions */
body.staff-mode .dash-hero,
body.staff-mode .clients-hero,
body.staff-mode .reservations-hero,
body.staff-mode .pricing-hero,
body.staff-mode .email-hero,
body.staff-mode .campaign-hero,
body.staff-mode .utility-hero,
body.admin-mode .admin-hero {
  margin: 0 0 18px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.staff-mode h1,
body.admin-mode h1,
body.staff-mode .dash-hero h1,
body.staff-mode .clients-hero h1,
body.staff-mode .reservations-hero h1,
body.staff-mode .pricing-hero h1,
body.staff-mode .email-hero h1,
body.staff-mode .campaign-hero h1,
body.staff-mode .utility-hero h1 {
  color: var(--pp-text) !important;
  font-size: clamp(25px, 2vw, 32px) !important;
  line-height: 1.05 !important;
  font-weight: 720 !important;
  letter-spacing: -.015em !important;
}

body.staff-mode .dash-hero p,
body.staff-mode .clients-hero p,
body.staff-mode .reservations-hero p,
body.staff-mode .pricing-hero p,
body.staff-mode .email-hero p,
body.staff-mode .campaign-hero p,
body.staff-mode .utility-hero p,
body.admin-mode .admin-hero p {
  color: var(--pp-text-3) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

body.staff-mode .dash-actions,
body.staff-mode .clients-actions,
body.staff-mode .reservations-actions,
body.staff-mode .pricing-actions,
body.staff-mode .email-actions,
body.staff-mode .campaign-actions,
body.staff-mode .utility-actions,
body.admin-mode .admin-actions {
  gap: 10px !important;
}

body.staff-mode button,
body.admin-mode button,
body.staff-mode .dash-date-control,
body.staff-mode .dash-period-btn,
body.staff-mode .dash-new-btn,
body.staff-mode .clients-action,
body.staff-mode .reservations-action,
body.staff-mode .pricing-action,
body.staff-mode .email-action,
body.staff-mode .campaign-action,
body.staff-mode .utility-action,
body.staff-mode .utility-panel-head button,
body.admin-mode .admin-action {
  min-height: 38px !important;
  border-radius: 9px !important;
  border: 1px solid var(--pp-line-2) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: var(--pp-text) !important;
  -webkit-text-fill-color: var(--pp-text) !important;
  box-shadow: none !important;
  font-weight: 620 !important;
}

body.staff-mode button:hover,
body.admin-mode button:hover,
body.staff-mode .dash-date-control:hover,
body.staff-mode .dash-period-btn:hover,
body.staff-mode .clients-action:hover,
body.staff-mode .reservations-action:hover,
body.staff-mode .pricing-action:hover,
body.staff-mode .email-action:hover,
body.staff-mode .campaign-action:hover,
body.staff-mode .utility-action:hover {
  background: rgba(255, 255, 255, .065) !important;
  border-color: var(--pp-line-3) !important;
}

body.staff-mode .dash-new-btn,
body.staff-mode .clients-action.primary,
body.staff-mode .reservations-action.primary,
body.staff-mode .pricing-action.primary,
body.staff-mode .email-action.primary,
body.staff-mode .campaign-action.primary,
body.staff-mode .utility-action.success,
body.staff-mode .btn-primary,
body.admin-mode .admin-action.primary {
  background: #eef1f6 !important;
  border-color: #eef1f6 !important;
  color: #080a0f !important;
  -webkit-text-fill-color: #080a0f !important;
}

body.staff-mode .dash-new-btn:hover,
body.staff-mode .btn-primary:hover,
body.admin-mode .admin-action.primary:hover {
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* Shared surfaces */
body.staff-mode .dash-kpi,
body.staff-mode .dash-card,
body.staff-mode .dash-status-strip,
body.staff-mode .clients-kpi,
body.staff-mode .clients-table-panel,
body.staff-mode .client-profile-panel,
body.staff-mode .reservations-kpi,
body.staff-mode .reservations-calendar-panel,
body.staff-mode .reservations-day-detail,
body.staff-mode .pricing-kpi,
body.staff-mode .pricing-workspace,
body.staff-mode .pricing-detail,
body.staff-mode .pricing-row,
body.staff-mode .email-metric,
body.staff-mode .email-workspace,
body.staff-mode .email-row,
body.staff-mode .email-detail,
body.staff-mode .campaign-metric,
body.staff-mode .campaign-panel,
body.staff-mode .campaign-calendar,
body.staff-mode .utility-kpi,
body.staff-mode .utility-panel,
body.staff-mode .utility-res-card,
body.staff-mode .utility-center-card,
body.staff-mode .utility-role-card,
body.staff-mode .utility-settings-console,
body.staff-mode .staff-head,
body.staff-mode .kpi-card,
body.staff-mode .planning-box,
body.staff-mode .table-box,
body.admin-mode .admin-panel,
body.admin-mode .admin-kpi,
body.admin-mode .admin-card,
body.staff-mode .quick-booking-modal,
body.staff-mode .edit-modal,
body.staff-mode .modal {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .026), rgba(255, 255, 255, .01)),
    var(--pp-panel) !important;
  border: 1px solid var(--pp-line) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow-soft) !important;
  backdrop-filter: none !important;
}

body.staff-mode .dash-kpi::after,
body.staff-mode .dash-card::after,
body.staff-mode .clients-kpi::after,
body.staff-mode .reservations-kpi::after,
body.staff-mode .pricing-kpi::after,
body.staff-mode .email-metric::after,
body.staff-mode .campaign-metric::after,
body.admin-mode .admin-card::after {
  display: none !important;
}

body.staff-mode .dash-kpis,
body.staff-mode .clients-kpis,
body.staff-mode .reservations-kpis,
body.staff-mode .pricing-kpis,
body.staff-mode .email-metrics,
body.staff-mode .campaign-metrics,
body.staff-mode .utility-kpis {
  gap: 14px !important;
}

body.staff-mode .dash-kpi,
body.staff-mode .clients-kpi,
body.staff-mode .reservations-kpi,
body.staff-mode .pricing-kpi,
body.staff-mode .email-metric,
body.staff-mode .campaign-metric,
body.staff-mode .utility-kpi {
  min-height: 108px !important;
  padding: 18px !important;
  overflow: hidden !important;
}

body.staff-mode .dash-icon,
body.staff-mode .clients-kpi-icon,
body.staff-mode .reservations-kpi-icon,
body.staff-mode .pricing-kpi-media,
body.staff-mode .email-metric > span,
body.staff-mode .campaign-metric > span {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid var(--pp-line) !important;
  background: rgba(255, 255, 255, .038) !important;
  color: rgba(226, 232, 240, .82) !important;
  box-shadow: none !important;
}

body.staff-mode .purple .dash-icon,
body.staff-mode .violet .clients-kpi-icon,
body.staff-mode .reservations-kpi.violet .reservations-kpi-icon {
  color: #a996ff !important;
  background: var(--pp-violet-bg) !important;
}

body.staff-mode .blue .dash-icon,
body.staff-mode .clients-kpi.blue .clients-kpi-icon,
body.staff-mode .reservations-kpi.blue .reservations-kpi-icon {
  color: #82a3ff !important;
  background: var(--pp-blue-bg) !important;
}

body.staff-mode .green .dash-icon,
body.staff-mode .reservations-kpi.green .reservations-kpi-icon {
  color: #6fd6a1 !important;
  background: var(--pp-green-bg) !important;
}

body.staff-mode .orange .dash-icon,
body.staff-mode .reservations-kpi.amber .reservations-kpi-icon {
  color: #e0a24a !important;
  background: var(--pp-amber-bg) !important;
}

body.staff-mode .dash-kpi strong,
body.staff-mode .clients-kpi strong,
body.staff-mode .reservations-kpi strong,
body.staff-mode .pricing-kpi strong,
body.staff-mode .email-metric strong,
body.staff-mode .campaign-metric strong,
body.staff-mode .utility-kpi strong {
  color: var(--pp-text) !important;
  -webkit-text-fill-color: var(--pp-text) !important;
  font-size: clamp(24px, 2.2vw, 32px) !important;
  line-height: 1 !important;
  font-weight: 720 !important;
}

body.staff-mode .dash-kpi span,
body.staff-mode .clients-kpi span,
body.staff-mode .reservations-kpi span,
body.staff-mode .pricing-kpi span,
body.staff-mode .email-metric span,
body.staff-mode .campaign-metric span,
body.staff-mode .utility-kpi span,
body.staff-mode th,
body.admin-mode th {
  color: var(--pp-text-3) !important;
  -webkit-text-fill-color: var(--pp-text-3) !important;
  font-size: 10.5px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
  text-transform: uppercase !important;
}

body.staff-mode .dash-kpi small,
body.staff-mode .clients-kpi small,
body.staff-mode .reservations-kpi small,
body.staff-mode .pricing-kpi small,
body.staff-mode .email-metric small,
body.staff-mode .campaign-metric small,
body.staff-mode .utility-kpi small,
body.staff-mode p,
body.staff-mode td,
body.admin-mode p,
body.admin-mode td {
  color: var(--pp-text-2) !important;
  -webkit-text-fill-color: var(--pp-text-2) !important;
}

body.staff-mode .dash-spark,
body.staff-mode .dash-sparkline,
body.staff-mode .clients-sparkline,
body.staff-mode .reservations-kpi .dash-spark {
  opacity: .58 !important;
  filter: saturate(.78) brightness(.94) !important;
}

/* Dashboard charts */
body.staff-mode .dash-chart,
body.staff-mode .dash-donut,
body.staff-mode .dash-revenue,
body.staff-mode .dash-top-list,
body.staff-mode .dash-alert-list,
body.staff-mode .dash-arrivals {
  background: rgba(255, 255, 255, .012) !important;
  border-color: var(--pp-line) !important;
}

body.staff-mode .dash-card-head,
body.staff-mode .clients-table-head,
body.staff-mode .reservations-calendar-head,
body.staff-mode .pricing-workspace-head,
body.staff-mode .email-workspace-head,
body.staff-mode .campaign-panel-head,
body.staff-mode .utility-panel-head {
  border-color: var(--pp-line) !important;
}

/* Tabs and filters */
body.staff-mode .dash-period-btn,
body.staff-mode .staff-resource-tab,
body.staff-mode .clients-tab,
body.staff-mode .reservations-filter,
body.staff-mode .pricing-tab,
body.staff-mode .email-tab,
body.staff-mode .campaign-tab {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--pp-text-3) !important;
  -webkit-text-fill-color: var(--pp-text-3) !important;
  box-shadow: none !important;
}

body.staff-mode .dash-period-btn.active,
body.staff-mode .staff-resource-tab.active,
body.staff-mode .clients-tab.active,
body.staff-mode .reservations-filter.active,
body.staff-mode .pricing-tab.active,
body.staff-mode .email-tab.active,
body.staff-mode .campaign-tab.active {
  background: rgba(117, 87, 255, .11) !important;
  border-color: rgba(117, 87, 255, .24) !important;
  color: var(--pp-text) !important;
  -webkit-text-fill-color: var(--pp-text) !important;
  box-shadow: inset 0 -1px 0 rgba(155, 135, 255, .44) !important;
}

/* Forms and search */
body.staff-mode input,
body.staff-mode select,
body.staff-mode textarea,
body.admin-mode input,
body.admin-mode select,
body.admin-mode textarea {
  background: #070a10 !important;
  border: 1px solid var(--pp-line-2) !important;
  border-radius: 9px !important;
  color: var(--pp-text) !important;
  -webkit-text-fill-color: var(--pp-text) !important;
  box-shadow: none !important;
}

body.staff-mode input::placeholder,
body.staff-mode textarea::placeholder,
body.admin-mode input::placeholder,
body.admin-mode textarea::placeholder {
  color: rgba(164, 176, 194, .46) !important;
  -webkit-text-fill-color: rgba(164, 176, 194, .46) !important;
}

body.staff-mode input:focus,
body.staff-mode select:focus,
body.staff-mode textarea:focus,
body.admin-mode input:focus,
body.admin-mode select:focus,
body.admin-mode textarea:focus {
  border-color: rgba(155, 135, 255, .52) !important;
  box-shadow: 0 0 0 3px rgba(117, 87, 255, .13) !important;
}

/* Tables */
body.staff-mode table,
body.admin-mode table,
body.staff-mode .clients-table,
body.staff-mode .reservations-table,
body.staff-mode .email-list,
body.staff-mode .campaign-table,
body.admin-mode .admin-reservations-table {
  background: var(--pp-panel) !important;
  border-color: var(--pp-line) !important;
}

body.staff-mode th,
body.admin-mode th {
  background: rgba(255,255,255,.018) !important;
  border-color: var(--pp-line) !important;
}

body.staff-mode td,
body.admin-mode td,
body.staff-mode .clients-table-row,
body.staff-mode .email-row,
body.staff-mode .campaign-row,
body.staff-mode .reservations-detail-row {
  border-color: var(--pp-line) !important;
}

body.staff-mode .clients-table-row:hover,
body.staff-mode .email-row:hover,
body.staff-mode .campaign-row:hover,
body.staff-mode .reservations-detail-row:hover {
  background: rgba(255, 255, 255, .035) !important;
}

/* Planning */
body.staff-mode .staff-resource-tabs,
body.staff-mode .resource-tabs,
body.staff-mode .planning-box,
body.staff-mode .planning-head,
body.staff-mode .planning-header {
  background: var(--pp-panel) !important;
  border-color: var(--pp-line) !important;
  box-shadow: none !important;
}

body.staff-mode .planning-grid,
body.staff-mode .planning-table,
body.staff-mode .laser-planning-table,
body.staff-mode .lane-grid {
  background: #06080c !important;
  border-color: var(--pp-line) !important;
}

body.staff-mode .planning-grid *,
body.staff-mode .planning-table *,
body.staff-mode .laser-planning-table * {
  border-color: rgba(226, 232, 240, .075) !important;
}

body.staff-mode .hour-row,
body.staff-mode .hour-header,
body.staff-mode .lane-header,
body.staff-mode .laser-time-cell {
  background: rgba(255,255,255,.01) !important;
  color: rgba(226, 232, 240, .7) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .7) !important;
}

body.staff-mode .booking,
body.staff-mode .booking-block,
body.staff-mode .lane-booking,
body.staff-mode .laser-session-card,
body.staff-mode .laser-group-chip,
body.staff-mode .reservation-row,
body.staff-mode .reservations-detail-row {
  background: linear-gradient(180deg, rgba(27, 34, 47, .96), rgba(17, 22, 31, .96)) !important;
  border: 1px solid rgba(122, 144, 177, .36) !important;
  border-radius: 7px !important;
  color: var(--pp-text) !important;
  -webkit-text-fill-color: var(--pp-text) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.035) inset, 0 10px 24px rgba(0,0,0,.22) !important;
  overflow: hidden !important;
}

body.staff-mode .booking:hover,
body.staff-mode .booking-block:hover,
body.staff-mode .lane-booking:hover,
body.staff-mode .laser-session-card:hover,
body.staff-mode .laser-group-chip:hover,
body.staff-mode .reservation-row:hover {
  border-color: rgba(166, 185, 216, .5) !important;
  transform: translateY(-1px);
}

body.staff-mode .booking.formula,
body.staff-mode .booking.is-formula,
body.staff-mode .booking:has(.b-tag.formula),
body.staff-mode .booking:has(.b-tag.formule),
body.staff-mode .booking-block.formula,
body.staff-mode .reservation-row.formula,
body.staff-mode .reservations-detail-row.complete,
body.staff-mode .laser-session-card.formula,
body.staff-mode .utility-res-card.complete,
body.staff-mode .utility-res-card.formule {
  background: linear-gradient(180deg, rgba(37, 27, 11, .96), rgba(22, 16, 8, .96)) !important;
  border-color: rgba(216, 139, 36, .52) !important;
}

body.staff-mode .booking.laser,
body.staff-mode .booking:has(.b-tag.laser),
body.staff-mode .booking-block.laser,
body.staff-mode .reservation-row.laser,
body.staff-mode .reservations-detail-row.laser,
body.staff-mode .laser-session-card.direct,
body.staff-mode .utility-res-card.laser {
  background: linear-gradient(180deg, rgba(17, 28, 52, .96), rgba(11, 17, 31, .96)) !important;
  border-color: rgba(79, 125, 255, .44) !important;
}

body.staff-mode .booking.paid,
body.staff-mode .booking:has(.b-tag.paid),
body.staff-mode .booking-block.paid,
body.staff-mode .reservation-row.paid,
body.staff-mode .laser-session-card.paid {
  background: linear-gradient(180deg, rgba(12, 42, 29, .96), rgba(8, 25, 18, .96)) !important;
  border-color: rgba(34, 182, 118, .48) !important;
}

body.staff-mode .booking-name,
body.staff-mode .booking strong,
body.staff-mode .booking-block strong,
body.staff-mode .laser-session-card strong,
body.staff-mode .reservation-row strong {
  color: var(--pp-text) !important;
  -webkit-text-fill-color: var(--pp-text) !important;
  font-weight: 700 !important;
}

body.staff-mode .booking-meta,
body.staff-mode .reservation-tags,
body.staff-mode .b-tag,
body.staff-mode .laser-session-card small,
body.staff-mode .reservation-row small {
  color: rgba(226, 232, 240, .7) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .7) !important;
}

body.staff-mode .b-tag,
body.staff-mode .reservation-tags span,
body.staff-mode .status,
body.staff-mode .res-status,
body.staff-mode .admin-status,
body.staff-mode .client-status,
body.staff-mode .email-status,
body.staff-mode .campaign-status {
  min-height: 20px !important;
  border-radius: 6px !important;
  border: 1px solid var(--pp-line-2) !important;
  background: rgba(255, 255, 255, .045) !important;
  color: rgba(232, 238, 247, .82) !important;
  -webkit-text-fill-color: rgba(232, 238, 247, .82) !important;
  box-shadow: none !important;
}

body.staff-mode .b-tag.formula,
body.staff-mode .b-tag.formule,
body.staff-mode .status.formula,
body.staff-mode .res-status.formula {
  background: rgba(216, 139, 36, .12) !important;
  border-color: rgba(216, 139, 36, .30) !important;
  color: #e8b865 !important;
  -webkit-text-fill-color: #e8b865 !important;
}

body.staff-mode .status.paid,
body.staff-mode .res-status.paid,
body.staff-mode .admin-status.paid,
body.staff-mode .client-status.active {
  background: rgba(34, 182, 118, .11) !important;
  border-color: rgba(34, 182, 118, .28) !important;
  color: #73d9a4 !important;
  -webkit-text-fill-color: #73d9a4 !important;
}

body.staff-mode .status.arrived,
body.staff-mode .res-status.arrived {
  background: rgba(216, 139, 36, .12) !important;
  border-color: rgba(216, 139, 36, .28) !important;
  color: #e7a84b !important;
  -webkit-text-fill-color: #e7a84b !important;
}

body.staff-mode .status.confirmed,
body.staff-mode .res-status.confirmed,
body.staff-mode .admin-status.confirmed {
  background: rgba(79, 125, 255, .11) !important;
  border-color: rgba(79, 125, 255, .28) !important;
  color: #98b3ff !important;
  -webkit-text-fill-color: #98b3ff !important;
}

/* Sidebar final reset after global button rules */
body.staff-mode .fgx-menu-item,
body.admin-mode .fgx-menu-item,
body.staff-mode .fgx-menu-subitem,
body.admin-mode .fgx-menu-subitem {
  min-height: 34px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  color: rgba(226, 232, 240, .70) !important;
  -webkit-text-fill-color: rgba(226, 232, 240, .70) !important;
  justify-content: flex-start !important;
}

body.staff-mode .fgx-menu-item:hover,
body.admin-mode .fgx-menu-item:hover,
body.staff-mode .fgx-menu-subitem:hover,
body.admin-mode .fgx-menu-subitem:hover {
  border-color: transparent !important;
  background: rgba(255, 255, 255, .045) !important;
  color: var(--pp-text) !important;
  -webkit-text-fill-color: var(--pp-text) !important;
}

body.staff-mode .fgx-menu-item.active,
body.admin-mode .fgx-menu-item.active,
body.staff-mode .fgx-menu-subitem.active,
body.admin-mode .fgx-menu-subitem.active,
body.staff-mode .fgx-menu-group.active .fgx-menu-item-parent,
body.admin-mode .fgx-menu-group.active .fgx-menu-item-parent {
  border-color: rgba(117, 87, 255, .18) !important;
  background: rgba(117, 87, 255, .12) !important;
  box-shadow: inset 2px 0 0 rgba(155, 135, 255, .92) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body.staff-mode .fgx-menu-collapse,
body.admin-mode .fgx-menu-collapse {
  min-height: 32px !important;
  border: 1px solid var(--pp-line) !important;
  background: transparent !important;
}

body.staff-mode .fgx-menu-center,
body.admin-mode .fgx-menu-center,
body.staff-mode .fgx-menu-account,
body.admin-mode .fgx-menu-account {
  border: 1px solid var(--pp-line) !important;
  background: rgba(255, 255, 255, .026) !important;
}

/* Utility pages: make each page feel like an actual work surface */
body.staff-mode .staff-utility-page {
  display: grid !important;
  gap: 18px !important;
}

body.staff-mode .utility-hero {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

body.staff-mode .utility-panel {
  overflow: hidden !important;
}

body.staff-mode .utility-empty,
body.staff-mode .utility-mini-empty {
  background: rgba(255,255,255,.018) !important;
  border: 1px dashed rgba(226,232,240,.13) !important;
  border-radius: var(--pp-radius) !important;
  color: var(--pp-text-3) !important;
  -webkit-text-fill-color: var(--pp-text-3) !important;
}

body.staff-mode .utility-res-card {
  border-radius: 10px !important;
}

body.staff-mode .utility-action.danger,
body.admin-mode .danger {
  color: #ffb6b1 !important;
  -webkit-text-fill-color: #ffb6b1 !important;
  border-color: rgba(226, 109, 102, .28) !important;
  background: rgba(226, 109, 102, .08) !important;
}

/* Auth polish: compact centered entry */
body .auth-overlay {
  display: grid !important;
  place-items: center !important;
  padding: 24px !important;
  background:
    radial-gradient(620px 420px at 50% 8%, rgba(232, 229, 222, .045), transparent 62%),
    #040506 !important;
}

body .auth-overlay.hidden {
  display: none !important;
}

body .auth-card.auth-card-single {
  width: min(420px, calc(100vw - 36px)) !important;
  max-height: min(760px, calc(100dvh - 32px)) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 18px !important;
  background: rgba(9, 12, 17, .84) !important;
  border: 1px solid rgba(232, 229, 222, .12) !important;
  box-shadow: 0 24px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.035) !important;
  overflow: auto !important;
}

body .auth-card.auth-card-single .auth-form-panel {
  padding: 24px !important;
  gap: 14px !important;
}

body .auth-shell-head {
  align-items: center !important;
  gap: 12px !important;
}

body .auth-brand-logo {
  width: 118px !important;
  height: 118px !important;
  border-radius: 14px !important;
  background: #07090e !important;
  border: 1px solid rgba(232, 229, 222, .10) !important;
  object-fit: cover !important;
}

body .auth-client-pill {
  border-radius: 8px !important;
  color: rgba(232, 229, 222, .64) !important;
  background: transparent !important;
  border-color: transparent !important;
}

body .auth-card.auth-card-single h2 {
  font-size: 34px !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}

body .auth-card.auth-card-single p,
body .auth-card.auth-card-single .auth-note {
  color: rgba(232, 229, 222, .62) !important;
}

body .auth-card.auth-card-single .auth-input {
  min-height: 46px !important;
  border-radius: 10px !important;
}

body .auth-card.auth-card-single .btn-primary {
  min-height: 48px !important;
  margin-top: 8px !important;
  border-radius: 10px !important;
  background: #ece9e2 !important;
  border-color: #ece9e2 !important;
  color: #060709 !important;
}

/* Light mode guardrails */
body.staff-mode.staff-light .ops-sidebar,
body.admin-mode.staff-light .ops-sidebar {
  background: rgba(255,255,255,.94) !important;
  color: var(--pp-text) !important;
}

body.staff-mode.staff-light .fgx-menu-item,
body.staff-mode.staff-light .fgx-menu-subitem,
body.admin-mode.staff-light .fgx-menu-item,
body.admin-mode.staff-light .fgx-menu-subitem {
  color: rgba(15, 23, 42, .72) !important;
  -webkit-text-fill-color: rgba(15, 23, 42, .72) !important;
}

body.staff-mode.staff-light .fgx-menu-item.active,
body.staff-mode.staff-light .fgx-menu-subitem.active,
body.admin-mode.staff-light .fgx-menu-item.active,
body.admin-mode.staff-light .fgx-menu-subitem.active {
  color: #0f172a !important;
  -webkit-text-fill-color: #0f172a !important;
  background: rgba(15, 23, 42, .055) !important;
}

body.staff-mode.staff-light input,
body.staff-mode.staff-light select,
body.staff-mode.staff-light textarea,
body.admin-mode.staff-light input,
body.admin-mode.staff-light select,
body.admin-mode.staff-light textarea {
  background: #fff !important;
}

/* Responsive */
@media (max-width: 980px) {
  body.staff-mode,
  body.admin-mode {
    --fgx-sidebar-width: 0px;
  }

  body.staff-mode header,
  body.admin-mode header {
    display: none !important;
  }

  body.staff-mode main,
  body.admin-mode main {
    padding-left: 0 !important;
  }

  body.staff-mode .staff-wrap,
  body.admin-mode .admin-wrap,
  body.staff-mode .staff-dashboard-page,
  body.staff-mode .staff-clients-page,
  body.staff-mode .staff-reservations-page,
  body.staff-mode .staff-pricing-page,
  body.staff-mode .staff-emails-page,
  body.staff-mode .staff-campaigns-page,
  body.staff-mode .staff-utility-page {
    padding-inline: 14px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.staff-mode *,
  body.admin-mode *,
  body .auth-card.auth-card-single,
  body .auth-brand-logo {
    animation: none !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dashboard drill-down modals */
body.dashboard-detail-open {
  overflow: hidden !important;
}

.staff-dashboard-detail-overlay {
  position: fixed;
  inset: 0;
  z-index: 980;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(780px circle at 50% 18%, rgba(122, 104, 77, .08), transparent 44%),
    rgba(3, 5, 8, .78);
  backdrop-filter: blur(10px);
  animation: dashboardDetailFade .18s cubic-bezier(.2, 0, 0, 1);
}

.dashboard-detail-modal {
  width: min(1120px, calc(100vw - 42px));
  max-height: min(820px, calc(100vh - 42px));
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  color: rgba(246, 247, 250, .96);
  background: rgba(10, 13, 18, .96);
  border: 1px solid rgba(222, 229, 240, .13);
  border-radius: 22px;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .56),
    inset 0 1px 0 rgba(255, 255, 255, .035);
  animation: dashboardDetailEnter .2s cubic-bezier(.2, 0, 0, 1);
}

.dashboard-detail-head,
.dashboard-detail-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(222, 229, 240, .10);
}

.dashboard-detail-head h2 {
  margin: 5px 0 4px;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.dashboard-detail-head span,
.dashboard-detail-section-head p,
.dashboard-detail-summary span,
.dashboard-detail-summary small,
.dashboard-detail-row small,
.dashboard-detail-row span,
.dashboard-detail-amount span {
  color: rgba(177, 188, 205, .76);
}

.dashboard-detail-head > div > span,
.dashboard-detail-summary span,
.dashboard-detail-section-head p {
  font-size: 11px;
  font-weight: 760;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.dashboard-detail-head p {
  margin: 0;
  color: rgba(206, 214, 226, .74);
}

.dashboard-detail-close {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(222, 229, 240, .13);
  background: rgba(255, 255, 255, .035);
  color: rgba(246, 247, 250, .9);
  font-size: 26px;
  line-height: 1;
  transition-property: background-color, border-color, transform, color;
  transition-duration: .16s;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.dashboard-detail-close:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .07);
  border-color: rgba(222, 229, 240, .22);
}

.dashboard-detail-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(222, 229, 240, .08);
}

.dashboard-detail-summary article {
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .028);
  box-shadow: inset 0 0 0 1px rgba(222, 229, 240, .09);
}

.dashboard-detail-summary strong {
  font-size: 27px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.dashboard-detail-body {
  min-height: 0;
  overflow: auto;
  padding: 20px 24px 24px;
}

.dashboard-detail-body::-webkit-scrollbar {
  width: 8px;
}

.dashboard-detail-body::-webkit-scrollbar-thumb {
  background: rgba(222, 229, 240, .18);
  border-radius: 999px;
}

.dashboard-detail-section {
  padding: 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .024);
  box-shadow: inset 0 0 0 1px rgba(222, 229, 240, .09);
}

.dashboard-detail-section + .dashboard-detail-section {
  margin-top: 14px;
}

.dashboard-detail-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.dashboard-detail-section-head h3 {
  margin: 0;
  font-size: 17px;
  letter-spacing: -.01em;
}

.dashboard-detail-section-head p {
  max-width: 48ch;
  margin: 0;
  text-align: right;
  text-wrap: pretty;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 640;
}

.dashboard-detail-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 118px auto;
  gap: 14px;
  align-items: center;
  min-height: 82px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(11, 15, 22, .82);
  box-shadow: inset 0 0 0 1px rgba(222, 229, 240, .09);
}

.dashboard-detail-row + .dashboard-detail-row {
  margin-top: 10px;
}

.dashboard-detail-row.is-formula {
  background: rgba(36, 27, 12, .62);
  box-shadow: inset 0 0 0 1px rgba(213, 170, 88, .22);
}

.dashboard-detail-row.paid {
  background: rgba(8, 28, 19, .42);
}

.dashboard-detail-row.arrived {
  background: rgba(32, 22, 9, .48);
}

.dashboard-detail-time,
.dashboard-detail-amount {
  display: grid;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}

.dashboard-detail-time strong {
  font-size: 20px;
}

.dashboard-detail-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.dashboard-detail-main strong,
.dashboard-detail-main span,
.dashboard-detail-main small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-detail-row-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

.dashboard-detail-row-actions button,
.dashboard-detail-actions button,
.dashboard-detail-lane-chips span {
  min-height: 38px;
  border-radius: 11px;
  border: 1px solid rgba(222, 229, 240, .13);
  background: rgba(255, 255, 255, .035);
  color: rgba(246, 247, 250, .92);
  padding: 0 13px;
  font-weight: 740;
  transition-property: background-color, border-color, transform, color;
  transition-duration: .16s;
  transition-timing-function: cubic-bezier(.2, 0, 0, 1);
}

.dashboard-detail-row-actions button:hover,
.dashboard-detail-actions button:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, .075);
  border-color: rgba(222, 229, 240, .22);
}

.dashboard-detail-actions {
  border-top: 1px solid rgba(222, 229, 240, .10);
  border-bottom: 0;
  justify-content: flex-end;
}

.dashboard-detail-actions button:not(.secondary) {
  background: rgba(238, 235, 228, .96);
  border-color: rgba(238, 235, 228, .96);
  color: #080a0e;
}

.dashboard-detail-empty {
  min-height: 116px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px dashed rgba(222, 229, 240, .14);
  color: rgba(177, 188, 205, .78);
  text-align: center;
}

.dashboard-detail-lane-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.dashboard-detail-lane-chips span {
  display: inline-grid;
  place-items: center;
  min-height: 34px;
  color: rgba(238, 235, 228, .92);
}

.dashboard-detail-revenue-list {
  display: grid;
  gap: 10px;
}

.dashboard-detail-revenue-row {
  display: grid;
  grid-template-columns: 92px minmax(120px, 1fr) 92px 170px;
  gap: 14px;
  align-items: center;
  padding: 13px 0;
  border-bottom: 1px solid rgba(222, 229, 240, .08);
}

.dashboard-detail-revenue-row:last-child {
  border-bottom: 0;
}

.dashboard-detail-revenue-row time,
.dashboard-detail-revenue-row strong {
  font-variant-numeric: tabular-nums;
}

.dashboard-detail-revenue-row span {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(222, 229, 240, .08);
}

.dashboard-detail-revenue-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: rgba(184, 173, 155, .82);
}

.dashboard-detail-revenue-row small {
  color: rgba(177, 188, 205, .76);
  text-align: right;
}

.dashboard-detail-hour-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.dashboard-detail-hour-grid article {
  min-height: 112px;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 14px;
  border-radius: 14px;
  background: rgba(11, 15, 22, .82);
  box-shadow: inset 0 0 0 1px rgba(222, 229, 240, .09);
}

.dashboard-detail-hour-grid time,
.dashboard-detail-hour-grid strong {
  font-variant-numeric: tabular-nums;
}

.dashboard-detail-hour-grid strong {
  font-size: 20px;
}

.dashboard-detail-hour-grid small {
  color: rgba(177, 188, 205, .76);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Quiet controls pass: less pill UI, more transparent premium surfaces */
body.staff-mode button:not(.fgx-menu-item):not(.fgx-menu-subitem):not(.btn-primary):not(.btn-new):not(.primary):not(.dash-new-btn):not(.clients-action.primary):not(.reservations-action.primary):not(.pricing-action.primary):not(.email-action.primary):not(.campaign-action.primary):not(.utility-action.primary),
body.admin-mode button:not(.fgx-menu-item):not(.fgx-menu-subitem):not(.btn-primary):not(.btn-new):not(.primary):not(.admin-action.primary):not(.admin-btn.primary):not(.ops-admin-btn.primary):not(.admin-action-btn.primary) {
  border-radius: 7px !important;
  background: transparent !important;
  border-color: rgba(222, 229, 240, .12) !important;
  color: rgba(238, 242, 247, .88) !important;
  -webkit-text-fill-color: rgba(238, 242, 247, .88) !important;
  box-shadow: none !important;
}

body.staff-mode button:not(.fgx-menu-item):not(.fgx-menu-subitem):not(.btn-primary):not(.btn-new):not(.primary):not(.dash-new-btn):not(.clients-action.primary):not(.reservations-action.primary):not(.pricing-action.primary):not(.email-action.primary):not(.campaign-action.primary):not(.utility-action.primary):hover,
body.admin-mode button:not(.fgx-menu-item):not(.fgx-menu-subitem):not(.btn-primary):not(.btn-new):not(.primary):not(.admin-action.primary):not(.admin-btn.primary):not(.ops-admin-btn.primary):not(.admin-action-btn.primary):hover {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(222, 229, 240, .22) !important;
}

body.staff-mode .dash-card-head button,
body.staff-mode .client-panel-title button,
body.staff-mode .utility-panel-head button,
body.staff-mode .email-workspace-head button,
body.staff-mode .campaign-panel-head button,
body.staff-mode .pricing-workspace-head button {
  min-height: 32px !important;
  padding-inline: 10px !important;
  border-radius: 6px !important;
  background: transparent !important;
  border-color: rgba(222, 229, 240, .10) !important;
  color: rgba(196, 206, 221, .88) !important;
  -webkit-text-fill-color: rgba(196, 206, 221, .88) !important;
}

body.staff-mode .dash-card-head button:hover,
body.staff-mode .client-panel-title button:hover,
body.staff-mode .utility-panel-head button:hover,
body.staff-mode .email-workspace-head button:hover,
body.staff-mode .campaign-panel-head button:hover,
body.staff-mode .pricing-workspace-head button:hover {
  color: rgba(248, 250, 252, .96) !important;
  -webkit-text-fill-color: rgba(248, 250, 252, .96) !important;
  background: rgba(255, 255, 255, .03) !important;
}

body.staff-mode .dash-period-btn,
body.staff-mode .staff-resource-tab,
body.staff-mode .clients-tab,
body.staff-mode .reservations-filter,
body.staff-mode .pricing-tab,
body.staff-mode .email-tab,
body.staff-mode .campaign-tab {
  border-radius: 6px !important;
}

body.staff-mode .dash-period-btn.active,
body.staff-mode .staff-resource-tab.active,
body.staff-mode .clients-tab.active,
body.staff-mode .reservations-filter.active,
body.staff-mode .pricing-tab.active,
body.staff-mode .email-tab.active,
body.staff-mode .campaign-tab.active {
  background: rgba(255, 255, 255, .035) !important;
  border-color: rgba(222, 229, 240, .14) !important;
  box-shadow: inset 0 -1px 0 rgba(184, 173, 155, .72) !important;
}

.dashboard-detail-modal {
  border-radius: 14px;
}

.dashboard-detail-close {
  border-radius: 7px;
  background: transparent;
}

.dashboard-detail-summary article,
.dashboard-detail-section,
.dashboard-detail-row,
.dashboard-detail-empty,
.dashboard-detail-hour-grid article,
.dashboard-detail-row-actions button,
.dashboard-detail-actions button,
.dashboard-detail-lane-chips span {
  border-radius: 8px;
}

.dashboard-detail-summary article,
.dashboard-detail-section,
.dashboard-detail-row,
.dashboard-detail-hour-grid article {
  background: rgba(255, 255, 255, .015);
}

.dashboard-detail-row-actions button,
.dashboard-detail-actions button.secondary,
.dashboard-detail-lane-chips span {
  background: transparent;
  border-color: rgba(222, 229, 240, .12);
}

body.staff-mode .btn-new,
body.staff-mode .dash-new-btn,
body.staff-mode .btn-primary,
body.staff-mode button.primary,
body.admin-mode .admin-btn.primary,
body.admin-mode .ops-admin-btn.primary,
body.admin-mode .admin-action-btn.primary,
body.admin-mode button.primary {
  border-radius: 8px !important;
  background: rgba(238, 235, 228, .96) !important;
  border-color: rgba(238, 235, 228, .96) !important;
  color: #080a0e !important;
  -webkit-text-fill-color: #080a0e !important;
  box-shadow: none !important;
}

body.staff-mode .btn-new:hover,
body.staff-mode .dash-new-btn:hover,
body.staff-mode .btn-primary:hover,
body.staff-mode button.primary:hover,
body.admin-mode .admin-btn.primary:hover,
body.admin-mode .ops-admin-btn.primary:hover,
body.admin-mode .admin-action-btn.primary:hover,
body.admin-mode button.primary:hover {
  background: #f4f1ea !important;
  border-color: #f4f1ea !important;
  transform: translateY(-1px) !important;
}

body.staff-mode.staff-light button:not(.fgx-menu-item):not(.fgx-menu-subitem):not(.btn-primary):not(.btn-new):not(.primary):not(.dash-new-btn),
body.admin-mode.staff-light button:not(.fgx-menu-item):not(.fgx-menu-subitem):not(.btn-primary):not(.btn-new):not(.primary):not(.admin-btn.primary):not(.ops-admin-btn.primary):not(.admin-action-btn.primary) {
  color: rgba(15, 23, 42, .78) !important;
  -webkit-text-fill-color: rgba(15, 23, 42, .78) !important;
  border-color: rgba(15, 23, 42, .12) !important;
  background: transparent !important;
}

body.staff-mode .dash-alert-row .dash-alert-dot {
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  border-radius: 999px !important;
  background: rgba(154, 166, 187, .85) !important;
  box-shadow: 0 0 0 4px rgba(154, 166, 187, .08) !important;
}

body.staff-mode .dash-alert-row .dash-alert-dot.payment {
  background: rgba(184, 173, 155, .95) !important;
}

body.staff-mode .dash-alert-row .dash-alert-dot.warning,
body.staff-mode .dash-alert-row .dash-alert-dot.formula {
  background: rgba(214, 162, 76, .95) !important;
}

body.staff-mode .dash-alert-row .dash-alert-dot.maintenance {
  background: rgba(225, 104, 98, .95) !important;
}

@keyframes dashboardDetailFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes dashboardDetailEnter {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 760px) {
  .staff-dashboard-detail-overlay {
    padding: 12px;
  }

  .dashboard-detail-modal {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    border-radius: 18px;
  }

  .dashboard-detail-summary {
    grid-template-columns: 1fr;
  }

  .dashboard-detail-row,
  .dashboard-detail-revenue-row {
    grid-template-columns: 1fr;
  }

  .dashboard-detail-section-head {
    align-items: start;
    flex-direction: column;
  }

  .dashboard-detail-section-head p,
  .dashboard-detail-revenue-row small {
    text-align: left;
  }
}