/*
  PureVision-Tec CRM (static)
  Deep Navy & Champagne Gold inspired palette
*/

:root {
  --navy: #0f1b2d;
  --navy-2: #162640;
  --cream: #fbf7ef;
  --cream-2: #f3edde;
  --gold: #c9a84c;
  --gold-2: #e0c779;
  --muted: rgba(15, 27, 45, 0.65);
  --border: rgba(15, 27, 45, 0.12);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 18px 40px -24px rgba(0, 0, 0, 0.25);
  /* Warm-tinted shadow for member portal cards (premium dining feel) */
  --shadow-card-warm: 0 2px 4px rgba(43, 32, 20, 0.06), 0 22px 50px -30px rgba(43, 32, 20, 0.2);
  --radius: 12px;
  --font-serif: ui-serif, Georgia, "Times New Roman", Times, serif;
  --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", sans-serif;
  /* Premium Hospitality (member /#/member) */
  --premium-slate: #3e444d;
  --premium-white: #ffffff;
  --premium-gold-gradient: linear-gradient(45deg, #b8860b 0%, #f9e498 50%, #ffd700 100%);
  --premium-radius: 16px;
}

/* ── Member portal (/#/member, /#/member-auth): same palette, refined surfaces ── */
.memberPortal .card {
  box-shadow: var(--shadow-card-warm);
  border-color: rgba(43, 32, 20, 0.1);
}
.memberPortal .pageHeader h2 {
  font-size: clamp(26px, 7vw, 34px);
  line-height: 1.08;
}
.memberPortal .pageHeader p.lead,
.memberPortal p.lead {
  font-size: 15px;
  line-height: 1.65;
}

.memberPortalStatus {
  padding: 14px 16px;
  box-sizing: border-box;
  border-radius: var(--radius);
}

.memberMembershipCapsule.memberPortalStatus,
.memberMembershipCapsule {
  border-radius: 14px;
}

.memberMembershipCapsule {
  border: 1px solid rgba(201, 168, 76, 0.35);
  background: linear-gradient(135deg, rgba(251, 247, 239, 0.95), rgba(243, 237, 222, 0.88));
}
body.dark .memberMembershipCapsule {
  border-color: rgba(224, 199, 121, 0.28);
  background: rgba(255, 255, 255, 0.04);
}

.memberVoucherCard .memberVoucherTitle {
  font-family: var(--font-serif);
  font-size: clamp(18px, 4.5vw, 20px);
  line-height: 1.25;
  margin-top: 6px;
}
.memberVoucherRow {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 520px) {
  .memberVoucherRow {
    flex-direction: column;
    align-items: stretch;
  }
  .memberVoucherRow .memberVoucherBtn {
    width: 100%;
    min-height: 48px;
  }
}

.memberPortal .field label {
  letter-spacing: 0.22em;
}
.memberPortalAuthForm {
  max-width: 520px;
}
@media (max-width: 700px) {
  .memberPortal .twoCol {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

.memberPortal .grid {
  gap: 18px;
}

/* ── Premium Hospitality shell (/#/member dashboard) ── */
.memberPremium {
  --font-member: "Inter", var(--font-sans);
  font-family: var(--font-member);
}
.memberPremium h1,
.memberPremium h2,
.memberPremium h3 {
  font-weight: 700;
}
.memberPremiumShell {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  background: #fffff0;
  color: #111827;
  overflow-x: hidden;
  overflow-y: visible;
}

/* Responsive content width (mobile -> tablet -> desktop) */
.memberPremiumShell .memberShell {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 14px 14px 26px;
  box-sizing: border-box;
}
@media (min-width: 680px) {
  .memberPremiumShell .memberShell {
    padding: 18px 18px 34px;
  }
}
@media (min-width: 980px) {
  .memberPremiumShell .memberShell {
    padding: 22px 22px 40px;
  }
}

.memberInstallBanner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 14px 12px;
  padding: 14px 14px 14px 16px;
  border-radius: 14px;
  background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(249, 228, 152, 0.35);
}
.memberInstallBanner__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.memberInstallBanner__title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f9e498;
}
.memberInstallBanner__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.memberInstallBanner__btn {
  align-self: flex-start;
  margin-top: 2px;
}
.memberInstallBanner__dismiss {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.memberInstallBanner__dismiss:hover {
  background: rgba(255, 255, 255, 0.18);
}
html.memberPwaStandalone .memberInstallBanner {
  display: none;
}

.memberStickyTop {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: var(--premium-slate);
  color: #fff;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.memberStickyTop__left,
.memberStickyTop__right {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.memberIconBtn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--premium-radius);
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.memberIconBtn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.memberIconBtn:focus-visible {
  outline: 2px solid rgba(249, 228, 152, 0.95);
  outline-offset: 2px;
}
.memberIconBtn__svg {
  display: flex;
  line-height: 0;
}
.memberIconBtn__svg svg {
  display: block;
}

.memberNotifWrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.memberNotifBadge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e03131;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  box-sizing: border-box;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
.memberNotifModalList .memberNotifItem {
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(28, 29, 32, 0.03);
}
.memberNotifModalList .memberNotifItem--unread {
  border-color: rgba(76, 110, 245, 0.45);
  background: rgba(76, 110, 245, 0.08);
}
.memberNotifModalList .memberNotifItem__meta {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.memberNotifModalList .memberNotifItem__title {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}
.memberNotifModalList .memberNotifItem__body {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--navy);
  opacity: 0.88;
  white-space: pre-wrap;
}

.memberHamburgerBtn {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--premium-radius);
  background: transparent;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.memberHamburgerBtn:hover {
  background: rgba(255, 255, 255, 0.08);
}
.memberHamburgerBtn:focus-visible {
  outline: 2px solid rgba(249, 228, 152, 0.95);
  outline-offset: 2px;
}
.memberHamburgerBtn__svg {
  display: flex;
  line-height: 0;
}
.memberHamburgerBtn__svg svg {
  display: block;
}

.memberHeroCarousel {
  position: relative;
  overflow: hidden;
  --n: 5;
  --i: 0;
  min-height: min(52vw, 320px);
  max-height: 420px;
  background: var(--premium-slate);
}
.memberHeroCarousel__track {
  display: flex;
  align-items: stretch;
  width: calc(var(--n) * 100%);
  height: 100%;
  min-height: inherit;
  transform: translateX(calc(-100% * var(--i) / var(--n)));
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
}
.memberHeroCarousel__slide {
  position: relative;
  flex: 0 0 calc(100% / var(--n));
  width: calc(100% / var(--n));
  min-height: min(52vw, 320px);
  max-height: 420px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.memberHeroCarousel__slideImg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.memberHeroCarousel__slideOverlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(120deg, rgba(62, 68, 77, 0.55), rgba(62, 68, 77, 0.25));
  z-index: 1;
}
.memberHeroCarousel__captions {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.memberHeroCarousel__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding: 24px 20px 72px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
}
.memberHeroCarousel__caption--active {
  opacity: 1;
  transform: translateY(0);
}
.memberHeroCarousel__title {
  margin: 0;
  max-width: 18ch;
  font-size: clamp(22px, 5.5vw, 30px);
  line-height: 1.12;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}
.memberHeroCarousel__sub {
  margin: 10px 0 0;
  max-width: 28ch;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.35);
}
.memberHeroCarousel__dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 8px;
  align-items: center;
}
.memberHeroCarousel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.22);
  cursor: pointer;
}
.memberHeroCarousel__dot--active {
  width: 9px;
  height: 9px;
  background: #fff;
  border-color: #fff;
}

.memberBrandDivider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 24px 44px;
  box-sizing: border-box;
}
.memberBrandDivider__line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: rgba(62, 68, 77, 0.22);
}
.memberBrandDivider__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--premium-slate);
  white-space: nowrap;
}

.memberPremiumBody {
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 22px 56px;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .memberPremiumBody {
    padding: 8px 16px 48px;
  }
  .memberBrandDivider {
    padding: 32px 18px 36px;
  }
}

.memberPremiumCard {
  border-radius: var(--premium-radius);
  border: 1px solid rgba(17, 24, 39, 0.08);
  background: #f3f4f6;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  padding: 16px 18px;
  box-sizing: border-box;
}
.memberPremiumMuted {
  color: rgba(55, 65, 81, 0.7);
  font-size: 14px;
  line-height: 1.55;
}
.memberPremiumEyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.memberPremiumCardTitle {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}

.memberMembershipCapsule--premium {
  border: 1px solid rgba(184, 134, 11, 0.35);
  background: linear-gradient(135deg, rgba(251, 247, 239, 0.95), rgba(255, 255, 255, 0.98));
}

/* 2-column responsive grid (voucher/category cards) */
.memberGoldGrid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Member portal: voucher list — two per row on tablet/desktop */
/* Two vouchers per row on all screen sizes (tighter gutter on phones) */
.memberVoucherGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  align-items: stretch;
  box-sizing: border-box;
}
@media (min-width: 640px) {
  .memberVoucherGrid {
    gap: 16px;
  }
}
@media (max-width: 480px) {
  .memberVoucherCard__body {
    padding: 10px 8px 12px;
  }
  .memberVoucherCard__btn {
    padding: 10px 8px;
    font-size: 10px;
    letter-spacing: 0.06em;
  }
}

/* Staff voucher editor: image upload preview */
.voucherEditorImgPreview {
  margin-top: 10px;
  min-height: 44px;
}

/* Staff dashboard: vouchers catalog */
.vouchersPage {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.vouchersPage__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.vouchersPage__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 4px 0 14px;
}
.vouchersPage__stat {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(15, 27, 45, 0.1));
  background: rgba(255, 255, 255, 0.72);
}
.vouchersPage__statValue {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 26px;
  line-height: 1.1;
  color: var(--text, #0f172a);
}
.vouchersPage__statLabel {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}
.vouchersPage__help {
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid rgba(212, 175, 55, 0.28);
  background: linear-gradient(135deg, rgba(251, 247, 239, 0.95), rgba(255, 255, 255, 0.98));
  overflow: hidden;
}
.vouchersPage__helpToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.vouchersPage__helpBody {
  padding: 0 16px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(55, 65, 81, 0.88);
}
.vouchersPage__helpBody ul {
  margin: 8px 0 0;
  padding-left: 18px;
}
.vouchersPage__tabs {
  position: sticky;
  top: 108px;
  z-index: 4;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 8px 2px 12px;
  margin-bottom: 4px;
}
.vouchersPage__tab {
  border-radius: 999px;
  padding: 8px 14px;
  border: 1px solid rgba(15, 27, 45, 0.12);
  background: rgba(255, 255, 255, 0.78);
  color: #0f1b2d;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.vouchersPage__tab.isActive {
  border-color: rgba(212, 175, 55, 0.45);
  background: rgba(212, 175, 55, 0.14);
}
.vouchersPage__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  border: 1px solid var(--border, rgba(15, 27, 45, 0.1));
  background: rgba(255, 255, 255, 0.55);
}
.vouchersPage__toolbar .field {
  margin: 0;
  min-width: 160px;
  flex: 1;
}
.vouchersPage__toolbarSearch {
  flex: 2;
  min-width: 200px;
}
.vouchersPage__tierChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.vouchersPage__tierChip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(15, 27, 45, 0.12);
  background: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  cursor: pointer;
}
.vouchersPage__tierChip.isActive {
  border-color: rgba(15, 27, 45, 0.28);
  box-shadow: inset 0 0 0 1px rgba(15, 27, 45, 0.06);
  background: #fff;
}
.vouchersPage__tierDot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.vouchersPage__empty {
  padding: 28px 20px;
  text-align: center;
  border-radius: 12px;
  border: 1px dashed rgba(15, 27, 45, 0.16);
  background: rgba(255, 255, 255, 0.45);
}
.vouchersPage__emptyTitle {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 20px;
  margin: 0;
}
.voucherAdminGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.voucherAdminCard {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(15, 27, 45, 0.1));
  background: rgba(255, 255, 255, 0.88);
}
.voucherAdminCard--gift {
  border-color: rgba(212, 175, 55, 0.35);
  background: linear-gradient(160deg, rgba(255, 252, 245, 0.98), rgba(255, 255, 255, 0.95));
}
.voucherAdminCard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.voucherAdminCard__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(15, 27, 45, 0.07);
  color: rgba(15, 27, 45, 0.72);
}
.voucherAdminCard--gift .voucherAdminCard__badge {
  background: rgba(212, 175, 55, 0.18);
  color: #7a5c00;
}
.voucherAdminCard__value {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted, #64748b);
}
.voucherAdminCard__title {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 20px;
  line-height: 1.25;
  margin: 0;
}
.voucherAdminCard__desc {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted, #64748b);
}
.voucherAdminCard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.voucherAdminCard__chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: rgba(15, 27, 45, 0.05);
  color: rgba(15, 27, 45, 0.72);
}
.voucherAdminCard__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border, rgba(15, 27, 45, 0.08));
}
.voucherAdminCard__qty {
  font-size: 12px;
  color: var(--muted, #64748b);
}
.voucherAdminCard__actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.vouchersPage__catPanel {
  padding: 16px;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(15, 27, 45, 0.1));
  background: rgba(255, 255, 255, 0.72);
}
.vouchersPage__catAdd {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
  margin-top: 12px;
}
.vouchersPage__catAdd .field {
  margin: 0;
  flex: 1;
  min-width: 180px;
}

/* Clean page headings (replaces heavy status cards) */
.memberPageHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
}
.memberPageTitle {
  font-size: 18px;
  font-weight: 800;
  color: #111827;
}
.memberPageSub {
  margin-top: 6px;
  font-size: 12px;
  color: rgba(55, 65, 81, 0.72);
}
.memberPageNote {
  margin-top: 12px;
  font-size: 13px;
  color: rgba(55, 65, 81, 0.72);
}
.memberPageNote--error {
  color: #b42318;
}
.memberPageNote--muted {
  color: rgba(55, 65, 81, 0.72);
}

/* Member portal: image-on-top voucher cards */
.memberVoucherCard {
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f6;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  border: 1px solid rgba(17, 24, 39, 0.08);
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}
.memberVoucherCard__img {
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 30% 25%, rgba(212, 175, 55, 0.22), transparent 55%),
    linear-gradient(135deg, rgba(184, 134, 11, 0.2), rgba(212, 175, 55, 0.14));
  position: relative;
  flex-shrink: 0;
}
.memberVoucherCard__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.memberVoucherCard__catIcon {
  position: absolute;
  left: 12px;
  bottom: 12px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #b8860b;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.memberVoucherCard--category .memberVoucherCard__btn {
  background: linear-gradient(to right, #b8860b, #d4af37);
  color: #111827;
}
.memberVoucherCard__body {
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: #ffffff;
  border-top: 1px solid rgba(17, 24, 39, 0.06);
}
.memberVoucherCard__title {
  margin: 0;
  font-family: var(--font-member), var(--font-sans);
  font-weight: 800;
  font-size: clamp(13px, 3.1vw, 15px);
  color: #111827;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.memberVoucherCard__expires,
.memberVoucherCard__remaining {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.35;
  color: #4b5563;
}
.memberVoucherCard__remaining {
  margin-top: 4px;
}
.memberVoucherCard__desc {
  margin-top: 6px;
  color: rgba(55, 65, 81, 0.72);
  font-size: 13px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.memberVoucherCard__meta {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(55, 65, 81, 0.72);
}
.memberVoucherCard__btn {
  margin-top: auto;
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 12px 14px;
  font-family: var(--font-member), var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #374151;
  color: #ffffff;
  cursor: pointer;
}
.memberVoucherCard__btn:hover:not(:disabled) {
  filter: brightness(1.05);
}
.memberVoucherCard__btn--disabled {
  background: rgba(55, 65, 81, 0.38);
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
}

/* Member voucher list: Back — same look as Redeem (slate + white text) */
.memberVoucherScreenBackBtn {
  position: relative;
  top: -4px;
  width: auto;
  min-width: 110px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-family: var(--font-member), var(--font-sans);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: #374151;
  color: #ffffff;
  cursor: pointer;
}
.memberVoucherScreenBackBtn:hover {
  filter: brightness(1.05);
}
.memberVoucherScreenBackBtn:focus-visible {
  outline: 2px solid rgba(249, 228, 152, 0.95);
  outline-offset: 2px;
}

.memberGoldCard {
  border-radius: var(--premium-radius);
  background: var(--premium-gold-gradient);
  color: #fff;
  padding: 22px 22px 18px;
  box-sizing: border-box;
  box-shadow: 0 10px 36px rgba(43, 32, 20, 0.18);
}
.memberGoldCard--muted {
  background: linear-gradient(135deg, #4a515c 0%, #3e444d 55%, #2f343c 100%);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}
.memberGoldCard__top {
  display: flex;
  align-items: stretch;
  gap: 18px;
}
.memberGoldCard__valueBox {
  flex-shrink: 0;
  width: 92px;
  min-height: 92px;
  border-radius: 14px;
  background: var(--premium-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b8860b;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65), 0 4px 14px rgba(0, 0, 0, 0.12);
}
.memberGoldCard__valueText {
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 700;
  line-height: 1;
  color: #b8860b;
}
.memberGoldCard__valueSvg {
  display: flex;
  line-height: 0;
}
.memberGoldCard__valueSvg svg {
  display: block;
}
/* memberGoldCard__labels removed (use __title only) */
/* memberGoldCard__labelMain / __labelSub removed (use __title only) */
.memberGoldCard__title {
  margin: 16px 0 0;
  font-size: clamp(17px, 3.8vw, 19px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
/* memberGoldCard__desc / __footer / __meta removed */

/* Mobile tweaks for gold cards */
@media (max-width: 520px) {
  .memberGoldCard {
    padding: 18px 16px 16px;
  }
  .memberGoldCard__top {
    gap: 12px;
  }
  .memberGoldCard__valueBox {
    width: 72px;
    min-height: 72px;
    border-radius: 12px;
  }
  .memberGoldCard__title {
    font-size: 18px;
  }
}

.memberPremiumBtn {
  border-radius: var(--premium-radius);
  min-height: 46px;
  padding: 0 20px;
  font-family: var(--font-member);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  border: 0;
}
.memberPremiumBtn--onGold {
  background: var(--premium-white);
  color: var(--premium-slate);
}
.memberPremiumBtn--onGold:hover {
  filter: brightness(1.03);
}
.memberPremiumBtn--disabledGold {
  background: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.75);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .memberHeroCarousel__track {
    transition: none !important;
  }
  .memberHeroCarousel__caption {
    transition: none !important;
  }
}

/* Minimal member sign-in (/#/member-auth) — excludes staff luxury shell */
.memberAuthPage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
}
@media (min-height: 520px) {
  .memberAuthPage {
    align-items: center;
  }
}
.memberAuthInner {
  width: 100%;
  max-width: 400px;
}
.memberAuthCard {
  padding: 22px 20px;
  border-radius: 14px;
}
.memberAuthField {
  margin-bottom: 14px;
}
.memberAuthSubmit {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
}
.memberAuthBio {
  width: 100%;
  min-height: 48px;
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.memberAuthBio__icon {
  display: flex;
  flex-shrink: 0;
  line-height: 0;
  color: inherit;
}
.memberAuthBio__icon svg {
  display: block;
}
.memberAuthBio--loading .memberAuthBio__icon {
  opacity: 0.55;
}
.memberAuthDivider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 12px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.memberAuthDivider::before,
.memberAuthDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* Member app + member sign-in: no stray topbar outside #app */
html.routeMemberPortal header.topbar,
html.routeMemberPortal body > header,
html.routeMemberPortal .topbar,
html.routeMemberAuth header.topbar,
html.routeMemberAuth body > header,
html.routeMemberAuth .topbar,
body.routeMemberPortal header.topbar,
body.routeMemberPortal body > header,
body.routeMemberPortal .topbar,
body.routeMemberAuth header.topbar,
body.routeMemberAuth body > header,
body.routeMemberAuth .topbar {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  border: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
}

html {
  height: auto;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-sans);
}

body.dark {
  background: var(--navy);
  color: var(--gold-2);
  --muted: rgba(224, 199, 121, 0.7);
  --border: rgba(224, 199, 121, 0.18);
}

a {
  color: inherit;
  text-decoration: none;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: rgba(251, 247, 239, 0.78);
  backdrop-filter: blur(10px);
}

body.dark .topbar {
  background: rgba(15, 27, 45, 0.78);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
}
.brand__name {
  font-family: var(--font-serif);
  font-size: 22px;
  letter-spacing: -0.02em;
}
.brand__tag {
  font-size: 10px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
}

.topnav {
  display: none;
  gap: 18px;
  color: var(--muted);
  font-size: 14px;
}
@media (min-width: 880px) {
  .topnav {
    display: flex;
  }
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  width: 100%;
  max-width: 100%;
}

.container {
  margin: 0 auto;
  max-width: 1120px;
  padding: 28px 18px 60px;
}
/* Registration iframe route: use full main-column width (sidebar + full remainder). */
.container.container--registrationWide {
  max-width: none;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .container {
    padding: 18px 14px 44px;
  }
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  background: transparent;
}

.btn--primary {
  background: var(--navy);
  color: var(--gold-2);
  border-color: rgba(15, 27, 45, 0.25);
}
body.dark .btn--primary {
  background: var(--gold);
  color: var(--navy);
  border-color: rgba(224, 199, 121, 0.22);
}

.btn--ghost {
  background: transparent;
}

.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
body.dark .card {
  background: var(--navy-2);
}

.grid {
  display: grid;
  gap: 16px;
}

.hero {
  position: relative;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.hero__inner {
  padding: 74px 18px;
}

.eyebrow {
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
}

.h1 {
  margin: 16px 0 10px;
  font-family: var(--font-serif);
  font-size: 48px;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
@media (min-width: 880px) {
  .h1 {
    font-size: 68px;
  }
}

.lead {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 60ch;
}

.actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pageHeader {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}
@media (max-width: 700px) {
  .pageHeader {
    align-items: flex-start;
    flex-direction: column;
  }
  .pageHeader > div:last-child {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
  }
}

.pageHeader h2 {
  margin: 6px 0 0;
  font-family: var(--font-serif);
  font-size: 34px;
}

.pageHeader p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

/* ================
   Member sidebar
   ================ */
.memberShell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 980px) {
  .memberShell {
    grid-template-columns: 300px 1fr;
    align-items: start;
  }
}

.memberSidebarCard {
  padding: 18px;
  position: sticky;
  top: 18px;
}
.memberSidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.memberSidebar__logo {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: radial-gradient(circle at 30% 25%, var(--gold-2), var(--gold));
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  flex: none;
}
.memberSidebar__brandText {
  display: grid;
  line-height: 1.1;
}
.memberSidebar__brandText strong {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: -0.02em;
}
.memberSidebar__brandText span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.memberSidebar__identity {
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(15, 27, 45, 0.03);
}
body.dark .memberSidebar__identity {
  background: rgba(224, 199, 121, 0.06);
}
.memberSidebar__name {
  font-family: var(--font-serif);
  font-size: 20px;
  margin: 0;
}
.memberSidebar__meta {
  margin-top: 8px;
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.memberPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.memberPill__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--gold);
}

.memberNav {
  margin-top: 14px;
  display: grid;
  gap: 6px;
}
.memberNav__section {
  margin-top: 12px;
}
.memberNav__label {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin: 12px 0 8px;
}
.memberNavItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: inherit;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.memberNavItem:hover {
  background: rgba(15, 27, 45, 0.06);
  border-color: rgba(15, 27, 45, 0.08);
}
body.dark .memberNavItem:hover {
  background: rgba(224, 199, 121, 0.06);
  border-color: rgba(224, 199, 121, 0.12);
}
.memberNavItem--active {
  background: rgba(201, 168, 76, 0.12);
  border-color: rgba(201, 168, 76, 0.35);
}
.memberNavItem__left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.memberNavItem__icon {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.6);
}
body.dark .memberNavItem__icon {
  background: rgba(0, 0, 0, 0.14);
}
.memberNavItem__chev {
  color: var(--muted);
}

.memberSidebar__footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.poweredBy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
}
.poweredBy__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.55);
  color: inherit;
  font-size: 12px;
}
body.dark .poweredBy__badge {
  background: rgba(0, 0, 0, 0.18);
}

/* =========================
   Premium Gourmet drawer
   ========================= */
.pgDrawerBackdrop {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.27);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 220ms ease-out;
}
.pgDrawerBackdrop--open {
  opacity: 1;
}

.pgDrawer {
  width: min(320px, 84vw);
  height: 100%;
  background: #3e444d;
  color: #ffffff;
  box-shadow: 20px 0 44px rgba(0, 0, 0, 0.35);
  transform: translateX(-16px);
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.pgDrawerBackdrop--open .pgDrawer {
  transform: translateX(0);
}

.pgDrawerHeader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
}
.pgDrawerHeader--goldBanner {
  padding: 18px 16px;
  background: var(--premium-gold-gradient);
  color: #fff;
}
.pgDrawerHeader__iconCircle {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #fff;
  border: 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #b8860b;
}
.pgDrawerHeader__iconCircle svg {
  display: block;
}
.pgDrawerHeader__title {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(18px, 4.8vw, 21px);
  letter-spacing: -0.01em;
  font-weight: 700;
  color: #fff;
}

.pgDrawerMenu {
  padding: 8px 0 12px;
  display: flex;
  flex-direction: column;
}
.pgDrawerItem {
  width: 100%;
  background: transparent;
  color: #ffffff;
  border: 0;
  padding: 22px 18px;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  letter-spacing: 0.01em;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  box-sizing: border-box;
}
@media (max-width: 420px) {
  .pgDrawer {
    width: min(326px, 86vw);
  }
  .pgDrawerItem {
    padding: 18px 18px;
    font-size: 16px;
    min-height: 56px;
  }
}
.pgDrawerItem + .pgDrawerItem {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.pgDrawerItem__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.92);
}
.pgDrawerItem__icon svg {
  display: block;
}
.pgDrawerItem:hover {
  background: rgba(255, 255, 255, 0.07);
}
.pgDrawerItem:focus-visible {
  outline: 2px solid rgba(243, 210, 122, 0.85);
  outline-offset: -2px;
  z-index: 1;
}
.pgDrawerItem--active {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 4px 0 0 0 rgba(243, 210, 122, 0.95);
}
.pgDrawerItem__label {
  flex: 1;
  text-align: left;
  color: rgba(255, 255, 255, 0.98);
}

.pgDrawerFooter {
  margin-top: auto;
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}
.pgPoweredBy {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(230, 234, 240, 0.78);
}
.pgPoweredBy__pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--premium-gold-gradient);
  color: #1e2229;
  font-weight: 700;
}

.pgDrawerOpenBtn {
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: var(--premium-radius);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 0.12em;
}
.pgDrawerOpenBtn.memberHamburgerBtn {
  background: transparent;
  border: 0;
  color: #fff;
}

/* Mobile: prefer drawer logout over duplicate sign-out button */
@media (max-width: 520px) {
  .pageHeader .btn.btn--ghost {
    padding: 10px 12px;
  }
  .pageHeader > div:last-child .btn.btn--ghost {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pgDrawerBackdrop,
  .pgDrawer {
    transition: none !important;
  }
  .pgDrawerBackdrop {
    backdrop-filter: none;
  }
}

.muted {
  color: var(--muted);
}

.input,
select,
textarea {
  width: 100%;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  background: #fff;
  color: inherit;
  outline: none;
}
body.dark .input,
body.dark select,
body.dark textarea {
  background: rgba(255, 255, 255, 0.04);
}

.field label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.table {
  width: 100%;
  border-collapse: collapse;
}
.table th,
.table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 14px;
}
.table th {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(15, 27, 45, 0.03);
}
body.dark .table th {
  background: rgba(224, 199, 121, 0.05);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 12px;
}

.pill--pending {
  border-color: rgba(180, 120, 20, 0.45);
  background: rgba(180, 120, 20, 0.1);
  color: #8a5a00;
}

body.dark .pill--pending {
  color: #e8c878;
}

/* RAG status pills — ISO 3864 / ITIL-style operational colours (text + dot, not colour alone) */
.pill--rag {
  font-weight: 600;
  gap: 6px;
}

.pill__ragDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pill--rag-green {
  border-color: rgba(29, 107, 79, 0.45);
  background: rgba(29, 107, 79, 0.1);
  color: #1d6b4f;
}
.pill--rag-green .pill__ragDot {
  background: #1d6b4f;
}

.pill--rag-amber {
  border-color: rgba(154, 123, 47, 0.5);
  background: rgba(154, 123, 47, 0.12);
  color: #7a5f18;
}
.pill--rag-amber .pill__ragDot {
  background: #9a7b2f;
}

.pill--rag-orange {
  border-color: rgba(192, 86, 0, 0.5);
  background: rgba(192, 86, 0, 0.12);
  color: #9a4200;
}
.pill--rag-orange .pill__ragDot {
  background: #c05600;
}

.pill--rag-red {
  border-color: rgba(180, 35, 24, 0.5);
  background: rgba(180, 35, 24, 0.1);
  color: #b42318;
}
.pill--rag-red .pill__ragDot {
  background: #b42318;
}

.pill--rag-blue {
  border-color: rgba(30, 58, 95, 0.45);
  background: rgba(30, 58, 95, 0.08);
  color: #1e3a5f;
}
.pill--rag-blue .pill__ragDot {
  background: #1e3a5f;
}

body.dark .pill--rag-green { color: #6ecfaa; }
body.dark .pill--rag-amber { color: #e8c878; }
body.dark .pill--rag-orange { color: #f0a060; }
body.dark .pill--rag-red { color: #f08078; }
body.dark .pill--rag-blue { color: #8ab4e8; }

.renewalsRagLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--muted, #64748b);
}

.renewalsRagLegend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.renewalsRagLegend__item .pill__ragDot {
  width: 10px;
  height: 10px;
}

.renewalsRagLegend__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.renewalsRagLegend__dot--green { background: #1d6b4f; }
.renewalsRagLegend__dot--amber { background: #9a7b2f; }
.renewalsRagLegend__dot--orange { background: #c05600; }
.renewalsRagLegend__dot--red { background: #b42318; }
.renewalsRagLegend__dot--blue { background: #1e3a5f; }

.subRow--pending td {
  background: rgba(180, 120, 20, 0.06);
}

.subRow--tierChange td {
  background: rgba(180, 120, 20, 0.1);
}

.subscriptionsPage__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}

.subscriptionsPage__toolbar .field {
  margin: 0;
}

.subscriptionsPage__search {
  flex: 1 1 280px;
  max-width: 520px;
}

.subscriptionsPage__count {
  margin-left: auto;
  font-size: 13px;
  align-self: center;
}

.subTierChangeAlert {
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(180, 120, 20, 0.45);
  background: rgba(180, 120, 20, 0.12);
}

.subTierChangeAlert__title {
  margin: 0 0 4px;
  font-weight: 600;
  color: #6b4800;
}

.subTierChangeAlert__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: #5c3d00;
}

body.dark .subTierChangeAlert__title,
body.dark .subTierChangeAlert__text {
  color: #e8c878;
}

.subTierChangePill {
  background: rgba(180, 120, 20, 0.18);
  border-color: rgba(180, 120, 20, 0.45);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.subTierChangeReason {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.subTierChangeModalMsg {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(180, 120, 20, 0.35);
  background: rgba(180, 120, 20, 0.08);
}

.memberPageNote--pending {
  border-color: rgba(180, 120, 20, 0.45);
  background: rgba(180, 120, 20, 0.1);
  color: #6b4800;
}

body.dark .memberPageNote--pending {
  color: #e8c878;
}

.memberPageNote--expired {
  border-color: rgba(120, 120, 120, 0.45);
  background: rgba(80, 80, 80, 0.08);
  color: #5c5c5c;
}

body.dark .memberPageNote--expired {
  color: #c8c8c8;
}

.memberRedeemStatus {
  color: var(--muted, #6b7280);
}

.memberRedeemStatus--ok {
  color: #1a7f4b;
  font-weight: 600;
}

body.dark .memberRedeemStatus--ok {
  color: #6ee7a0;
}

/* Member voucher redeem — luxury QR presentation */
.memberRedeemLux {
  background:
    radial-gradient(ellipse 85% 65% at 12% 18%, rgba(212, 184, 118, 0.38) 0%, transparent 58%),
    radial-gradient(ellipse 75% 55% at 88% 72%, rgba(198, 169, 98, 0.32) 0%, transparent 52%),
    radial-gradient(ellipse 95% 70% at 48% 105%, rgba(15, 32, 58, 0.45) 0%, transparent 62%),
    radial-gradient(ellipse 100% 85% at 72% 12%, rgba(10, 22, 40, 0.6) 0%, transparent 55%),
    linear-gradient(155deg, #081220 0%, #0f203a 42%, #162a4a 100%);
  flex-direction: column;
  gap: 18px;
  padding: 28px 20px;
}

.memberRedeemLux__close {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(8, 18, 32, 0.55);
  color: rgba(255, 255, 255, 0.92);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.memberRedeemLux__close:hover {
  background: rgba(8, 18, 32, 0.78);
  border-color: rgba(212, 184, 118, 0.45);
}

.memberRedeemLux__card {
  position: relative;
  width: min(360px, 94vw);
  padding: 30px 28px 26px;
  border-radius: 22px;
  text-align: center;
  background: linear-gradient(180deg, #fffefb 0%, #f9f6f0 100%);
  box-shadow:
    0 28px 70px rgba(0, 0, 0, 0.48),
    0 0 0 1px rgba(198, 169, 98, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.memberRedeemLux__qrPad {
  display: inline-flex;
  padding: 14px;
  margin: 0 auto 20px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(15, 32, 58, 0.06);
}

.memberRedeemLux__qrHost {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 272px;
  min-height: 272px;
}

.memberRedeemLux__qrHost canvas,
.memberRedeemLux__qrHost img {
  display: block;
  border-radius: 2px;
}

.memberRedeemLux__voucherTitle {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: clamp(18px, 4.5vw, 24px);
  font-weight: 700;
  line-height: 1.2;
  color: #0f203a;
}

.memberRedeemLux__remaining {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: 13px;
  line-height: 1.35;
  color: #6a6258;
}

.memberRedeemLux__outletRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 0 10px;
  min-height: 36px;
}

.memberRedeemLux__outlet {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(22px, 5.5vw, 30px);
  font-weight: 700;
  line-height: 1.15;
  color: #0f203a;
}

.memberRedeemLux__navBtn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: #8a7a5a;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.memberRedeemLux__navBtn:hover:not(:disabled) {
  color: #0f203a;
  background: rgba(15, 32, 58, 0.06);
}

.memberRedeemLux__navBtn:disabled {
  opacity: 0.25;
  cursor: default;
}

.memberRedeemLux__scan {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #9a9080;
}

.memberRedeemLux__status {
  margin: 0;
  min-height: 1.25em;
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
  color: rgba(255, 255, 255, 0.62);
}

.memberRedeemLux__status.memberRedeemStatus--ok {
  color: #c8e6d4;
  font-weight: 600;
}

.memberRedeemLux__error {
  margin: 0;
  max-width: min(340px, 92vw);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.88);
}

.memberRedeemLux__cardMessage {
  margin: 0;
  padding: 24px 12px;
  font-family: var(--font-serif);
  font-size: 15px;
  line-height: 1.5;
  color: #5a5248;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .layout {
    grid-template-columns: 260px 1fr;
  }

  html.routeStaffLux .layout:not(.layout--saas):not(.layout--reportsFocus) .sidebar {
    position: sticky;
    top: 0;
    align-self: start;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
  }

  html.routeStaffLux .layout:not(.layout--saas):not(.layout--reportsFocus) .sidebar__inner {
    max-height: 100vh;
    max-height: 100dvh;
  }
}

/* Reports focus mode: hide sidebar by default, allow overlay menu */
.layout.layout--reportsFocus {
  grid-template-columns: 1fr !important;
}
.layout.layout--reportsFocus > .sidebar {
  display: none;
}
.layout.layout--reportsFocus.layout--reportsMenuOpen > .sidebar {
  display: block;
  position: fixed;
  z-index: 80;
  inset: 0 auto 0 0;
  width: min(320px, 92vw);
  border-right: 1px solid rgba(200, 169, 107, 0.25);
}
.layout.layout--reportsFocus.layout--reportsMenuOpen > .sidebar .sidebar__inner {
  top: 0;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: 22px;
}
.reportsMenuOverlay {
  display: none;
}
.layout.layout--reportsFocus.layout--reportsMenuOpen .reportsMenuOverlay {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 59;
  background: rgba(17, 24, 39, 0.42);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.reportsMenuBtn {
  position: fixed;
  z-index: 58;
  left: 16px;
  top: 14px;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(0, 0, 0, 0.55);
  background: #c8a96b;
  color: #121212;
  font-family: Montserrat, Inter, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.reportsMenuBtn:hover {
  background: #d3b57a;
}

.reportsMenuBtn--section {
  position: static;
  z-index: auto;
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  line-height: 1;
}

.reportsMenuBtn--section:hover {
  background: #d3b57a;
}

.sidebar {
  border-right: 1px solid var(--border);
  background: rgba(243, 237, 222, 0.5);
}
body.dark .sidebar {
  background: rgba(0, 0, 0, 0.18);
}

/* Same scroll model as reports: whole sidebar column scrolls (not nav-only). */
.sidebar__inner {
  padding: 18px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sidebar__inner::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

.sidebar__inner::-webkit-scrollbar-thumb,
.sidebar__inner::-webkit-scrollbar-track,
.sidebar__inner::-webkit-scrollbar-button,
.sidebar__inner::-webkit-scrollbar-corner {
  display: none;
  width: 0;
  height: 0;
}

.sidebarNav {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.sidebarBrand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.sidebarBrand__logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(15, 27, 45, 0.08);
}
body.dark .sidebarBrand__logo {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.1);
}
.sidebarBrand__main {
  min-width: 0;
  flex: 1;
}
.sidebarBrand__user {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--muted);
}
.navItem.active {
  background: var(--navy);
  color: var(--gold-2);
  box-shadow: var(--shadow);
}
body.dark .navItem.active {
  background: rgba(224, 199, 121, 0.12);
  color: var(--gold-2);
}

.navItem:hover {
  background: rgba(15, 27, 45, 0.06);
  color: inherit;
}
body.dark .navItem:hover {
  background: rgba(224, 199, 121, 0.06);
}

.sidebarFooter {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

/* Sidebar Appearance theme list: readable on dark sidebars (all staff themes) */
html.routeStaffLux .sidebarTheme select.input,
html.routeStaffLux .sidebarTheme .input {
  background: #ffffff !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
}

html.routeStaffLux .sidebarTheme select.input option {
  background: #ffffff;
  color: #111827;
}

.dashboardRegistrationEmbed {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: calc(100vh - 120px);
}
.dashboardRegistrationEmbed__frame {
  flex: 1;
  width: 100%;
  min-height: calc(100vh - 220px);
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
}

.toastHost {
  position: fixed;
  right: 14px;
  top: 72px;
  display: grid;
  gap: 10px;
  z-index: 100;
  pointer-events: none;
}
.toast {
  pointer-events: none;
  max-width: 360px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  box-shadow: var(--shadow);
  padding: 10px 12px;
  font-size: 14px;
}
body.dark .toast {
  background: rgba(22, 38, 64, 0.95);
  color: var(--gold-2);
}
.toast--error {
  border-color: rgba(180, 40, 40, 0.35);
}
.toast--success {
  border-color: rgba(35, 140, 80, 0.35);
}

.modalBackdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  z-index: 90;
}
.modal {
  width: min(760px, 100%);
  border-radius: 16px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow);
  overflow: hidden;
}
body.dark .modal {
  background: var(--navy-2);
  color: var(--gold-2);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.modal__title {
  font-family: var(--font-serif);
  font-size: 22px;
  margin: 0;
}
.modal__body {
  padding: 16px;
}

.modal--reportDetail {
  width: min(720px, 94vw);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}

.modal--reportDetail .modal__body {
  overflow: auto;
  max-height: calc(88vh - 58px);
}

.modal__headActions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.reportsKpiDetail__desc {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
}

.reportsKpiDetail__sectionTitle {
  margin: 18px 0 10px;
  font-size: 15px;
  font-weight: 600;
}

.reportsKpiDetail__meta {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.45;
}

.dashStat--click:focus-visible {
  outline: 2px solid var(--gold, #c9a227);
  outline-offset: 2px;
}

.modalBackdrop--fullscreen {
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  background: rgba(15, 27, 45, 0.88);
  z-index: 8000;
}
.modalFullscreen {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  background: var(--cream);
  color: var(--navy);
}
body.dark .modalFullscreen {
  background: var(--navy);
  color: var(--gold-2);
}
.modalFullscreen__top {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: rgba(251, 247, 239, 0.97);
  backdrop-filter: blur(8px);
}
body.dark .modalFullscreen__top {
  background: rgba(15, 27, 45, 0.92);
}
.modalFullscreen__scroll {
  flex: 1;
  overflow: auto;
  padding: 28px 22px 56px;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* Members table: keep row action buttons on one line */
.membersTableCard {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table--members {
  min-width: 880px;
}

.table--members .membersTableCol--email {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table--members .membersTableCol--phone {
  max-width: 120px;
  white-space: nowrap;
}

.table--members .membersTableCol--id {
  white-space: nowrap;
}

.table--members .membersTableCol--start {
  white-space: nowrap;
}

.table--members .membersTableCol--actions,
.table--members .membersRowActionsCell {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}

.membersRowActions {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}

/* Members table — Actions dropdown */
.membersActionsMenu {
  position: relative;
  display: inline-block;
  text-align: left;
}

.membersActionsMenu__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 5.5rem;
  justify-content: center;
}

.membersActionsMenu__chevron {
  display: inline-flex;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.membersActionsMenu.is-open .membersActionsMenu__chevron {
  transform: rotate(180deg);
}

.membersActionsMenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 200;
  min-width: min(280px, 92vw);
  padding: 0;
  border-radius: 14px;
  border: 1px solid var(--border, #e5e7eb);
  background: var(--cream-2, #ffffff);
  box-shadow:
    0 4px 6px rgba(15, 23, 42, 0.04),
    0 16px 40px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.96);
  transform-origin: top right;
  transition:
    opacity 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.22s;
  overflow: hidden;
}

.membersActionsMenu.is-open .membersActionsMenu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.membersActionsMenu__head {
  padding: 14px 18px 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
  border-bottom: 1px solid var(--border, #e5e7eb);
  background: rgba(15, 23, 42, 0.02);
}

.membersActionsMenu__list {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.membersActionsMenu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 18px;
  border: none;
  background: transparent;
  color: var(--text, #0f172a);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.membersActionsMenu__item:hover,
.membersActionsMenu__item:focus-visible {
  background: rgba(15, 23, 42, 0.05);
  outline: none;
}

.membersActionsMenu__icon {
  display: inline-flex;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--muted, #64748b);
}

.membersActionsMenu__item:hover .membersActionsMenu__icon,
.membersActionsMenu__item:focus-visible .membersActionsMenu__icon {
  color: var(--text, #0f172a);
}

.membersActionsMenu__item--danger {
  color: #dc2626;
}

.membersActionsMenu__item--danger .membersActionsMenu__icon {
  color: #dc2626;
}

.membersActionsMenu__item--danger:hover,
.membersActionsMenu__item--danger:focus-visible {
  background: rgba(220, 38, 38, 0.08);
  color: #b91c1c;
}

html.routeStaffLux.routeStaffSaas .membersActionsMenu__panel {
  background: var(--saas-surface, #fff);
  border-color: var(--saas-border, #e5e7eb);
  box-shadow: var(--saas-shadow-hover, 0 16px 40px rgba(0, 0, 0, 0.18));
}

html.routeStaffLux.routeStaffSaas .membersActionsMenu__head {
  color: var(--saas-text-muted);
  border-bottom-color: var(--saas-border);
  background: rgba(0, 0, 0, 0.15);
}

html.routeStaffLux.routeStaffSaas .membersActionsMenu__item {
  color: var(--saas-text);
}

html.routeStaffLux.routeStaffSaas .membersActionsMenu__item:hover,
html.routeStaffLux.routeStaffSaas .membersActionsMenu__item:focus-visible {
  background: rgba(245, 158, 11, 0.1);
}

.btn--compact {
  padding: 5px 8px;
  font-size: 10px;
  letter-spacing: 0.05em;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn--compact.btn--danger {
  border-color: rgba(180, 60, 50, 0.35);
  color: #a33;
}

body.dark .btn--compact.btn--danger {
  color: #f0a8a0;
}

/* Dashboard overview — analytics layout (metrics → charts → tables) */
.dash {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  max-width: 1280px;
}

.dashToolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border, #e8e4dc);
}

.dashToolbar__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text, #0f172a);
  line-height: 1.2;
}

.dashToolbar__meta {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted, #64748b);
}

.dashToolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 10px;
}

.dashToolbar__dateLbl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.dashToolbar__date {
  min-width: 10.5rem;
}

.dash__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (min-width: 900px) {
  .dash__metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dash__metrics--single {
  grid-template-columns: 1fr;
  max-width: 16rem;
}

@media (min-width: 900px) {
  .dash__metrics--single {
    grid-template-columns: 1fr;
    max-width: 16rem;
  }
}

.dashStat {
  background: var(--cream-2, #ffffff);
  border: 1px solid var(--border, #e5e7eb);
  border-left-width: 3px;
  border-radius: 12px;
  padding: 16px 18px;
  min-width: 0;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.dashStat:hover {
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.06);
}

.dashStat--click {
  cursor: pointer;
}

.dashStat--gold {
  border-left-color: #f59e0b;
}
.dashStat--indigo {
  border-left-color: #6366f1;
}
.dashStat--amber {
  border-left-color: #f59e0b;
}
.dashStat--emerald {
  border-left-color: #10b981;
}
.dashStat--rose {
  border-left-color: #f43f5e;
}

.dashStat__label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.dashStat__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.dashStat__value {
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--text, #0f172a);
  font-family: Inter, system-ui, sans-serif;
  letter-spacing: -0.02em;
}

.dashStat__hint {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted, #64748b);
  line-height: 1.35;
}

.dashDelta {
  font-size: 11px;
  font-weight: 700;
  font-family: Inter, system-ui, sans-serif;
  white-space: nowrap;
}

.dashDelta.isUp {
  color: #16a34a;
}
.dashDelta.isDown {
  color: #dc2626;
}
.dashDelta.isFlat {
  color: #94a3b8;
}

.dashStat__spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 32px;
  margin-top: 10px;
}

.dashStat__sparkBar {
  flex: 1;
  min-height: 4px;
  height: var(--spark-h, 20%);
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, rgba(99, 102, 241, 0.85), rgba(99, 102, 241, 0.18));
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0.5;
}

.dashStat__sparkBar--amber {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.88), rgba(245, 158, 11, 0.18));
}

.dashStat--rose .dashStat__sparkBar:not(.dashStat__sparkBar--amber) {
  background: linear-gradient(180deg, rgba(244, 63, 94, 0.8), rgba(244, 63, 94, 0.16));
}

.dashStat--emerald .dashStat__sparkBar:not(.dashStat__sparkBar--amber) {
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.85), rgba(16, 185, 129, 0.18));
}

.dashHint {
  margin: 0;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted, #64748b);
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.dashHint--warn {
  color: #92400e;
  background: #fffbeb;
  border-color: #fde68a;
}

.dash__analytics {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .dash__analytics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.dashChart {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: 100%;
  background: var(--cream-2, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}

.dashChart__head {
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--border, #f1f5f9);
}

.dashChart__title {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text, #0f172a);
  font-family: Inter, system-ui, sans-serif;
}

.dashChart__sub {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted, #64748b);
}

.dashChart__body {
  position: relative;
  height: 150px;
  padding: 6px 8px 8px;
}

.dash__analytics .dashChart__body {
  height: 220px;
}

.dashChart__body canvas {
  display: block;
  width: 100%;
  max-height: 136px;
}

.dash__analytics .dashChart__body canvas {
  max-height: 206px;
}

.dashChart__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  pointer-events: none;
}

.dash__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dash__sectionTitle {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #64748b);
}

.dash__split {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

@media (min-width: 980px) {
  .dash__split {
    grid-template-columns: 1fr 1fr;
  }
}

/* Overview dashboard — Option A staggered entrance */
.dash--enter > .dashToolbar {
  animation: dashToolbarIn 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dash--enter > .dashHint {
  animation: dashHintIn 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 95ms;
}

.dash--enter > .dash__metrics .dashStat {
  animation: dashStatIn 940ms cubic-bezier(0.34, 1.15, 0.64, 1) both;
  animation-delay: 160ms;
}

.dash--enter .dash__analytics .dashChart {
  animation: dashChartIn 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.dash--enter .dash__analytics .dashChart:nth-child(1) {
  animation-delay: 240ms;
}

.dash--enter .dash__analytics .dashChart:nth-child(2) {
  animation-delay: 310ms;
}

.dash--enter .dash__analytics .dashChart:nth-child(3) {
  animation-delay: 380ms;
}

.dash--enter .dash__analytics .dashChart:nth-child(4) {
  animation-delay: 450ms;
}

.dash--enter .dash__analytics .dashChart:nth-child(5) {
  animation-delay: 520ms;
}

.dash--enter .dash__analytics .dashChart:nth-child(6) {
  animation-delay: 590ms;
}

.dash--enter > .dash__section {
  animation: dashSectionIn 840ms cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 680ms;
}

.dash--enter > .dash__section ~ .dash__section {
  animation-delay: 790ms;
}

.dash--charts-pending .dashChart__body {
  position: relative;
  overflow: hidden;
}

.dash--charts-pending .dashChart__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 42%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.06) 58%,
    transparent 100%
  );
  transform: translateX(-120%);
  animation: dashChartShimmer 1.7s ease-in-out infinite;
}

.dash--charts-ready .dashChart__body canvas {
  animation: dashCanvasReveal 680ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

html.routeStaffLux.routeStaffSaas .dash--enter .dash__analytics .dashChart {
  animation:
    dashChartIn 1000ms cubic-bezier(0.22, 1, 0.36, 1) both,
    dashChartAccent 1.45s ease both;
}

@keyframes dashToolbarIn {
  from {
    opacity: 0;
    transform: translateY(-14px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes dashHintIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashStatIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashChartIn {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes dashChartAccent {
  0% {
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
  }
  35% {
    box-shadow: 0 8px 28px rgba(245, 158, 11, 0.12);
  }
  100% {
    box-shadow: var(--saas-shadow, 0 1px 2px rgba(15, 23, 42, 0.04));
  }
}

@keyframes dashSectionIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dashChartShimmer {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(120%);
  }
}

@keyframes dashCanvasReveal {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.dashPanel {
  background: var(--cream-2, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.dashPanel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 0;
}

.dashPanel__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text, #0f172a);
  font-family: Inter, system-ui, sans-serif;
}

.dashPanel__count {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.dashPanel__count--warn {
  background: #fef3c7;
  color: #b45309;
}

.dashPanel__count--risk {
  background: #ffe4e6;
  color: #be123c;
}

.dashPanel--activity .dashTabs {
  padding: 12px 16px 0;
}

.dashTabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border, #e5e7eb);
  padding-bottom: 0;
}

.dashTab {
  appearance: none;
  border: none;
  background: transparent;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted, #64748b);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: Inter, system-ui, sans-serif;
}

.dashTab--active {
  color: var(--text, #0f172a);
  border-bottom-color: #f59e0b;
}

.dashTab:hover:not(.dashTab--active) {
  color: var(--text, #334155);
}

.dashActivity__body {
  min-height: 120px;
}

.dashEmpty {
  margin: 0;
  padding: 16px 18px;
  font-size: 13px;
  color: var(--muted, #64748b);
}

.dashQueueActions {
  display: inline-flex;
  gap: 4px;
  justify-content: flex-end;
  white-space: nowrap;
}

.table--compact th,
.table--compact td {
  padding: 8px 10px;
  font-size: 13px;
}

.table--compact th {
  font-size: 10px;
}

.memberSummaryHit {
  display: inline;
  padding: 6px 4px;
  margin: -6px -4px;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: inherit;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: inherit;
  font-variant-numeric: inherit;
  letter-spacing: inherit;
}
.memberSummaryHit:hover {
  color: var(--gold);
  background: rgba(201, 168, 76, 0.1);
}
.memberSummaryHit:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.twoCol {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 880px) {
  .twoCol {
    grid-template-columns: 1fr 1fr;
  }
}

.kpiGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 680px) {
  .kpiGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .kpiGrid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.kpi {
  padding: 16px;
}
.kpi__label {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.kpi__value {
  margin-top: 10px;
  font-family: var(--font-serif);
  font-size: 38px;
}

.right {
  text-align: right;
}

/* Public outlet (restaurant) page — mobile-first */
.outlet-public {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: clamp(16px, 4vw, 28px);
  min-height: calc(100vh - 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(16px, 4vw, 28px);
}

.outlet-public--center {
  text-align: center;
  align-items: center;
}

.outlet-public__header {
  text-align: center;
}

.outlet-public__property {
  margin: 0;
  font-size: clamp(11px, 2.8vw, 12px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.outlet-public__title {
  margin: 10px 0 0;
  font-family: var(--font-serif);
  font-size: clamp(26px, 7vw, 40px);
  line-height: 1.15;
  font-weight: 600;
}

.outlet-public__sub {
  margin: 12px 0 0;
  font-size: clamp(14px, 3.8vw, 17px);
  color: var(--muted);
  line-height: 1.45;
}

.outlet-public__actions {
  display: flex;
  justify-content: center;
}

.outlet-public__actions--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.outlet-public__snap-btn {
  width: 100%;
  max-width: 420px;
  min-height: 48px;
  font-size: clamp(14px, 3.8vw, 17px);
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
}

.outlet-public__secure-hint {
  margin: 12px auto 0;
  max-width: 28rem;
  font-size: clamp(12px, 3.2vw, 14px);
  line-height: 1.45;
  text-align: center;
}

.outlet-public__overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}

.outlet-public__scan-btn {
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  font-size: clamp(15px, 4vw, 18px);
  padding: 14px 20px;
}

.outlet-public__hint {
  text-align: center;
  max-width: 36rem;
  margin-left: auto;
  margin-right: auto;
}

.outlet-public__overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 27, 45, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 4vw, 24px);
}

.outlet-public__overlay-inner {
  width: min(100%, 420px);
  max-height: min(92vh, 720px);
  overflow: auto;
  background: var(--cream);
  color: var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 4vw, 22px);
  border: 1px solid var(--border);
}

body.dark .outlet-public__overlay-inner {
  background: var(--navy-2);
  color: var(--gold-2);
}

.outlet-public__reader-host {
  width: 100%;
  min-height: 220px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

body.dark .outlet-public__reader-host {
  background: rgba(0, 0, 0, 0.25);
}

/* =============================================================================
   Staff CRM shell — quiet luxury hospitality (warm ivory, soft gold, Inter).
   Sign-in uses .luxStaffAuth. No bright / dark staff themes.
   ============================================================================= */

html.routeStaffLux {
  --ql-bg: #f6f3ee;
  --ql-sidebar: #fbf9f6;
  --ql-card: #ffffff;
  --ql-border: #eae4da;
  --ql-text: #1c1c1c;
  --ql-text-secondary: #7b766e;
  --ql-muted-label: #a49b8f;
  --ql-gold: #c6a46a;
  --ql-gold-hover: #d7b980;
  --ql-success: #5e9b72;
  --ql-chart-beige: #dcc7a1;
  --ql-chart-bronze: #b08a5a;
  --ql-nav-active-bg: #f3e8d2;
  --ql-nav-active-text: #9b7337;
  --ql-nav-inactive: #5f5a53;
  --ql-shadow-card: 0 6px 30px rgba(0, 0, 0, 0.04);
  --ql-radius-lg: 24px;
  --ql-radius-btn: 16px;
  --ql-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Legacy aliases used in components */
  --lux-bg: var(--ql-bg);
  --lux-bg-mid: #f3efe8;
  --lux-elev: #ffffff;
  --lux-gold: var(--ql-gold);
  --lux-gold-mid: #b08a5a;
  --lux-gold-light: var(--ql-gold-hover);
  --lux-text: var(--ql-text);
  --lux-muted: var(--ql-text-secondary);
  --lux-muted2: var(--ql-muted-label);
  --lux-border: var(--ql-border);
  --lux-input: #fbf9f6;
  --tw-accent: var(--ql-gold);
  --tw-accent-strong: #9b7337;
  --tw-surface: var(--ql-card);
  --tw-font: var(--ql-font);
  --navy: var(--ql-text);
  --navy-2: var(--ql-text-secondary);
  --cream: var(--ql-bg);
  --cream-2: var(--ql-sidebar);
  --gold: var(--ql-gold);
  --gold-2: var(--ql-gold-hover);
  --muted: var(--ql-text-secondary);
  --border: var(--ql-border);
  --shadow: var(--ql-shadow-card);
  --radius: var(--ql-radius-lg);
  --font-sans: var(--ql-font);
  --font-serif: var(--ql-font);
}

html.routeStaffLux body {
  font-family: var(--font-sans);
  color: var(--ql-text);
  background: var(--ql-bg);
  -webkit-font-smoothing: antialiased;
}

html.routeStaffLux .app {
  position: relative;
  z-index: 1;
}

html.routeStaffLux .layout {
  min-height: 100vh;
  align-items: stretch;
}

html.routeStaffLux .container.staffShellCol,
html.routeStaffLux .container--registrationWide.staffShellCol {
  max-width: 1400px;
  padding: 0 28px 72px;
  box-sizing: border-box;
}

@media (max-width: 700px) {
  html.routeStaffLux .container.staffShellCol,
  html.routeStaffLux .container--registrationWide.staffShellCol {
    padding: 0 16px 48px;
  }
}

html.routeStaffLux .staffShell {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 24px);
}

html.routeStaffLux .staffShell__content {
  flex: 1;
  padding-top: 8px;
}

/* Top bar */
html.routeStaffLux .staffTopbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 24px;
  padding: 20px 0 26px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ql-border);
}

html.routeStaffLux .staffTopbar__greet {
  flex: 1 1 220px;
  min-width: 0;
}

.staffTopbar__clock {
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

html.routeStaffLux .staffTopbar__kicker {
  font-size: 13px;
  font-weight: 500;
  color: var(--ql-text-secondary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

html.routeStaffLux .staffTopbar__tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

html.routeStaffLux .staffTopbar__searchWrap {
  position: relative;
  flex: 1 1 200px;
  max-width: 320px;
  min-width: 160px;
}

html.routeStaffLux .staffTopbar__searchIcon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity: 0.45;
  pointer-events: none;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237B766E'%3E%3Ccircle cx='11' cy='11' r='7' stroke-width='2'/%3E%3Cpath stroke-linecap='round' stroke-width='2' d='M20 20l-4-4'/%3E%3C/svg%3E");
}

html.routeStaffLux .staffTopbar__search {
  width: 100%;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid var(--ql-border);
  background: #fff;
  color: var(--ql-text);
  font-size: 14px;
  padding: 12px 16px 12px 40px;
  box-shadow: none;
}

html.routeStaffLux .staffTopbar__search::placeholder {
  color: var(--ql-muted-label);
}

html.routeStaffLux .staffTopbar__search:focus {
  outline: none;
  border-color: var(--ql-gold);
  box-shadow: 0 0 0 4px rgba(198, 164, 106, 0.08);
}

html.routeStaffLux .staffTopbar__iconBtn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--ql-border);
  background: #fff;
  color: var(--ql-text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

html.routeStaffLux .staffTopbar__iconBtn:hover {
  background: var(--ql-sidebar);
  border-color: rgba(198, 164, 106, 0.45);
  color: var(--ql-gold);
}

html.routeStaffLux .staffTopbar__avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ql-nav-active-bg);
  color: var(--ql-nav-active-text);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(198, 164, 106, 0.35);
  flex-shrink: 0;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.staffAvatarMenu {
  position: relative;
  flex-shrink: 0;
}

.staffAvatarMenu__panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  border-radius: 14px;
  border: 1px solid var(--ql-border, rgba(0, 0, 0, 0.08));
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
  z-index: 120;
  overflow: hidden;
}

.staffAvatarMenu.is-open .staffAvatarMenu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.staffAvatarMenu__head {
  padding: 12px 14px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ql-text-secondary, #667085);
  border-bottom: 1px solid var(--ql-border, rgba(0, 0, 0, 0.08));
}

.staffAvatarMenu__list {
  display: flex;
  flex-direction: column;
  padding: 6px;
}

.staffAvatarMenu__item {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--ql-text, #1f2937);
  cursor: pointer;
}

.staffAvatarMenu__item:hover,
.staffAvatarMenu__item:focus-visible {
  background: var(--ql-sidebar, #f8f6f2);
  color: var(--ql-gold, #c6a46a);
  outline: none;
}

.richEmailEditor {
  border: 1px solid var(--ql-border, rgba(0, 0, 0, 0.1));
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.richEmailEditor__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px;
  border-bottom: 1px solid var(--ql-border, rgba(0, 0, 0, 0.08));
  background: rgba(248, 246, 242, 0.85);
}

.richEmailEditor__btn {
  border: 1px solid var(--ql-border, rgba(0, 0, 0, 0.1));
  background: #fff;
  color: var(--ql-text, #1f2937);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  line-height: 1;
}

.richEmailEditor__btn:hover,
.richEmailEditor__btn:focus-visible {
  border-color: rgba(198, 164, 106, 0.55);
  color: var(--ql-gold, #c6a46a);
  outline: none;
}

.richEmailEditor__area {
  padding: 12px 14px;
  min-height: 120px;
  outline: none;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ql-text, #1f2937);
  word-break: break-word;
}

.richEmailEditor__area:empty::before {
  content: attr(data-placeholder);
  color: var(--ql-muted-label, #98a2b3);
  pointer-events: none;
}

.richEmailEditor__area img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px 0;
  border-radius: 8px;
}

.richEmailEditor__previewBody {
  font-size: 14px;
  line-height: 1.55;
  word-break: break-word;
}

.richEmailEditor__previewBody img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 8px 0;
  border-radius: 8px;
}

.passwordPolicyGuide__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.passwordPolicyGuide__item {
  position: relative;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ql-text-secondary, #667085);
}

.passwordPolicyGuide__item::before {
  content: "○";
  position: absolute;
  left: 0;
  top: 0;
  color: #98a2b3;
  font-size: 12px;
}

.passwordPolicyGuide__item--met {
  color: var(--ql-text, #1f2937);
}

.passwordPolicyGuide__item--met::before {
  content: "✓";
  color: #027a48;
  font-weight: 700;
}

html.routeStaffLux .staffTopbar__date {
  border-radius: 12px;
  border: 1px solid var(--ql-border);
  background: #fff;
  color: var(--ql-text);
  font-size: 13px;
  padding: 10px 12px;
  font-family: var(--ql-font);
}

html.routeStaffLux .staffTopbar__date:focus {
  outline: none;
  border-color: var(--ql-gold);
  box-shadow: 0 0 0 4px rgba(198, 164, 106, 0.08);
}

html.routeStaffLux .topbar {
  background: rgba(251, 249, 246, 0.92);
  border-bottom-color: var(--ql-border);
  color: var(--ql-text);
}

html.routeStaffLux .brand__name {
  font-family: var(--ql-font);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--ql-text);
}

html.routeStaffLux .brand__tag {
  letter-spacing: 0.24em;
  color: var(--ql-gold);
  font-weight: 600;
  font-size: 10px;
}

html.routeStaffLux .topnav {
  color: var(--ql-text-secondary);
}

html.routeStaffLux .hero {
  border-bottom-color: var(--ql-border);
}

html.routeStaffLux .divider {
  background: linear-gradient(90deg, transparent, rgba(198, 164, 106, 0.35) 50%, transparent);
}

html.routeStaffLux .h1 {
  font-family: var(--ql-font);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ql-text);
}

html.routeStaffLux .eyebrow {
  color: var(--ql-muted-label);
  letter-spacing: 0.18em;
  font-weight: 600;
}

html.routeStaffLux .pageHeader h2 {
  font-family: var(--ql-font);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.02em;
  color: var(--ql-text);
}

html.routeStaffLux .lead,
html.routeStaffLux .pageHeader p.lead {
  color: var(--ql-text-secondary);
  line-height: 1.65;
}

html.routeStaffLux .btn {
  border-radius: var(--ql-radius-btn);
  border: 1px solid var(--ql-border);
  color: var(--ql-text);
  background: #fff;
  text-transform: none;
  letter-spacing: 0.02em;
  font-size: 13px;
  font-weight: 600;
}

html.routeStaffLux .btn:hover {
  background: var(--ql-sidebar);
  border-color: rgba(198, 164, 106, 0.45);
}

html.routeStaffLux .btn--primary {
  background: linear-gradient(180deg, #d7b980 0%, #c6a46a 100%);
  color: #fff;
  border: 1px solid rgba(155, 115, 55, 0.35);
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(198, 164, 106, 0.22);
}

html.routeStaffLux .btn.btn--primary:hover {
  background: linear-gradient(180deg, #e0c48e 0%, #b8945c 100%);
  filter: none;
}

html.routeStaffLux .btn--primary:hover {
  filter: none;
}

html.routeStaffLux .btn:active {
  transform: translateY(1px);
}

html.routeStaffLux .btn.btn--primary:active {
  filter: brightness(0.97);
}

html.routeStaffLux .btn:focus-visible {
  outline: 2px solid rgba(198, 164, 106, 0.55);
  outline-offset: 2px;
}

html.routeStaffLux .card {
  background: var(--ql-card);
  border: 1px solid var(--ql-border);
  color: var(--ql-text);
  border-radius: var(--ql-radius-lg);
  box-shadow: var(--ql-shadow-card);
}

html.routeStaffLux .sidebar {
  background: var(--ql-sidebar);
  border-right: 1px solid var(--ql-border);
  color: var(--ql-text-secondary);
}

html.routeStaffLux .sidebar__inner {
  padding: 24px 18px 28px;
}

html.routeStaffLux .sidebarBrand__logo {
  background: #fff;
  border: 1px solid var(--ql-border);
}

html.routeStaffLux .navItem {
  border-radius: 999px;
  padding: 12px 16px;
  color: var(--ql-nav-inactive);
  font-weight: 500;
  font-size: 14px;
}

html.routeStaffLux .navItem.active {
  background: var(--ql-nav-active-bg);
  color: var(--ql-nav-active-text);
  box-shadow: none;
}

html.routeStaffLux .navItem:hover {
  background: rgba(243, 232, 210, 0.55);
  color: var(--ql-text);
}

html.routeStaffLux .sidebarFooter {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--ql-border);
}

html.routeStaffLux .sidebarFooter .muted {
  color: var(--ql-muted-label);
  font-size: 11px;
  line-height: 1.45;
}

html.routeStaffLux .input,
html.routeStaffLux select,
html.routeStaffLux textarea {
  border-radius: 14px;
  border: 1px solid var(--ql-border);
  background: #fff;
  color: var(--ql-text);
}

html.routeStaffLux .input::placeholder,
html.routeStaffLux textarea::placeholder {
  color: var(--ql-muted-label);
}

html.routeStaffLux .input:focus,
html.routeStaffLux select:focus,
html.routeStaffLux textarea:focus {
  border-color: var(--ql-gold);
  outline: none;
  box-shadow: 0 0 0 4px rgba(198, 164, 106, 0.08);
}

html.routeStaffLux .table {
  border-color: var(--ql-border);
}

html.routeStaffLux .table th,
html.routeStaffLux .table td {
  border-color: rgba(234, 228, 218, 0.85);
  color: var(--ql-text);
  padding: 14px 16px;
}

html.routeStaffLux .table th {
  background: rgba(251, 249, 246, 0.95);
  letter-spacing: 0.1em;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--ql-muted-label);
  font-weight: 600;
}

html.routeStaffLux .table tbody tr:nth-child(even) td {
  background: rgba(246, 243, 238, 0.55);
}

html.routeStaffLux .kpiGrid {
  gap: 20px;
}

html.routeStaffLux .kpi {
  padding: 24px 26px;
  border-radius: var(--ql-radius-lg);
}

html.routeStaffLux .kpi--lux .kpi__row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

html.routeStaffLux .kpi__iconWrap {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(198, 164, 106, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ql-gold);
  font-size: 18px;
  line-height: 1;
}

html.routeStaffLux .kpi__value {
  font-family: var(--ql-font);
  font-weight: 600;
  color: var(--ql-text);
  font-size: clamp(26px, 3vw, 34px);
}

html.routeStaffLux .kpi__label {
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ql-muted-label);
  font-size: 11px;
}

html.routeStaffLux .modal__title {
  font-family: var(--ql-font);
  font-weight: 600;
  color: var(--ql-text);
}

html.routeStaffLux .modal {
  background: #fff;
  border: 1px solid var(--ql-border);
  color: var(--ql-text);
  border-radius: var(--ql-radius-lg);
  box-shadow: var(--ql-shadow-card);
}

html.routeStaffLux .modalBackdrop {
  background: rgba(28, 28, 28, 0.35);
  backdrop-filter: blur(4px);
}

html.routeStaffLux .toast {
  background: #fff;
  color: var(--ql-text);
  border: 1px solid var(--ql-border);
  border-radius: 14px;
  box-shadow: var(--ql-shadow-card);
}

html.routeStaffLux .toast--success {
  border-color: rgba(94, 155, 114, 0.45);
}

html.routeStaffLux .toast--error {
  border-color: rgba(180, 90, 90, 0.35);
}

html.routeStaffLux .modalFullscreen {
  background: var(--ql-bg);
}

html.routeStaffLux .modalFullscreen__top {
  background: rgba(251, 249, 246, 0.96);
  border-bottom: 1px solid var(--ql-border);
}

html.routeStaffLux .field label {
  letter-spacing: 0.12em;
  font-weight: 600;
  color: var(--ql-muted-label);
  font-size: 11px;
  text-transform: uppercase;
}

html.routeStaffLux .outlet-public__title {
  font-family: var(--ql-font);
  font-weight: 600;
  color: var(--ql-text);
}

html.routeStaffLux .memberSummaryHit:hover {
  color: var(--ql-nav-active-text);
  background: rgba(243, 232, 210, 0.65);
}

html.routeStaffLux .memberSummaryHit:focus-visible {
  outline-color: var(--ql-gold);
}

html.routeStaffLux .clientAppNotifCard .eyebrow,
html.routeStaffLux .clientAppNotifCard .field label {
  color: var(--ql-text);
}

html.routeStaffLux .reportsMenuBtn {
  border: 1px solid var(--ql-border);
  background: linear-gradient(180deg, #d7b980 0%, #c6a46a 100%);
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.06em;
}

html.routeStaffLux .reportsMenuBtn:hover {
  background: linear-gradient(180deg, #e0c48e 0%, #b8945c 100%);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Staff login (#/auth) — enterprise luxury hospitality (quiet, minimal, Inter)
   ═══════════════════════════════════════════════════════════════════════════ */

.luxStaffAuth {
  --auth-bg-left: #f7f4f1;
  --auth-bg-right: #fcfcfb;
  --auth-text-dark: #111111;
  --auth-text-muted: #7a7a7a;
  --auth-border: #e6e2dd;
  --auth-gold: #c9a96a;
  --auth-gold-light: #d8b57a;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  max-width: 100%;
  display: grid;
  grid-template-columns: 40fr 60fr;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "SF Pro Display", sans-serif;
  color: var(--auth-text-dark);
  background: var(--auth-bg-right);
  overflow-x: hidden;
  overflow-y: visible;
}

html.routeStaffLux body:has(#app .luxStaffAuth) {
  background: #fcfcfb;
  color: #111111;
}

html.routeStaffLux body:has(#app .luxStaffAuth) #app {
  min-height: 100vh;
}

/* Left — branding only */
.luxStaffAuth__left {
  position: relative;
  background-color: var(--auth-bg-left);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

.luxStaffAuth__leftShade {
  position: absolute;
  top: -8%;
  left: -12%;
  width: 58%;
  height: 52%;
  pointer-events: none;
  background: radial-gradient(ellipse 80% 70% at 25% 18%, rgba(0, 0, 0, 0.055) 0%, transparent 72%);
  filter: blur(1px);
}

.luxStaffAuth__leftContent {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 48px 48px;
  gap: 28px;
  min-height: 0;
}

.luxStaffAuth__logoPlaceholder {
  width: min(300px, 72vw);
  height: min(300px, 72vw);
  max-width: 300px;
  max-height: 300px;
  border: 1.5px dashed #d8cec2;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
  background: rgba(255, 255, 255, 0.35);
}

.luxStaffAuth__logoPlaceholderMark {
  font-size: 42px;
  line-height: 1;
  color: rgba(17, 17, 17, 0.12);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.luxStaffAuth__logoPlaceholderLabel {
  margin: 0;
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.38);
  line-height: 1.8;
}

.luxStaffAuth__logoPlaceholderLine {
  display: block;
}

.luxStaffAuth__logoPlaceholder--hasLogo {
  border: 1px solid var(--auth-border);
  border-style: solid;
  padding: clamp(16px, 3vw, 28px);
  background: #ffffff;
  gap: 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

.luxStaffAuth__propertyLogo {
  max-width: 100%;
  max-height: min(220px, 46vh);
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.luxStaffAuth__propertyName {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: rgba(17, 17, 17, 0.48);
  text-align: center;
  max-width: 100%;
}

.luxStaffAuth__leftFoot {
  flex-shrink: 0;
  padding: 24px 48px 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(17, 17, 17, 0.42);
  letter-spacing: 0.02em;
}

.luxStaffAuth__leftFootIcons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.luxStaffAuth__leftFootIcon {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.42;
}

.luxStaffAuth__leftFootIcon--shield {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 2.18l6 2.67V11c0 4.52-3.13 8.78-6 9.81-2.87-1.03-6-5.29-6-9.81V5.85l6-2.67z'/%3E%3C/svg%3E");
}

.luxStaffAuth__leftFootIcon--lock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z'/%3E%3C/svg%3E");
}

.luxStaffAuth__leftFootText {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-weight: 400;
}

.luxStaffAuth__leftFootSep {
  opacity: 0.45;
  font-weight: 300;
}

/* Right — authentication */
.luxStaffAuth__right {
  background: var(--auth-bg-right);
  border-left: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 80px 48px;
  padding-bottom: max(48px, env(safe-area-inset-bottom));
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: visible;
}

.luxStaffAuth__mobileLogo {
  display: none;
  margin-bottom: 28px;
}

.luxStaffAuth__mobileLogoBox {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  border: 1.5px dashed #d8cec2;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: rgba(17, 17, 17, 0.15);
  background: rgba(255, 255, 255, 0.6);
}

.luxStaffAuth__mobileLogoBox--hasLogo {
  width: min(200px, 56vw);
  height: auto;
  min-height: 56px;
  padding: 10px 14px;
  border-style: solid;
  border-color: var(--auth-border);
  background: #fff;
}

.luxStaffAuth__mobilePropertyLogo {
  max-width: 100%;
  max-height: 52px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.luxStaffAuth__formWrap {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.luxStaffAuth__title {
  margin: 0;
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  color: var(--auth-text-dark);
  letter-spacing: -0.02em;
}

.luxStaffAuth__subtitle {
  margin: -12px 0 0;
  font-size: 18px;
  line-height: 1.45;
  color: var(--auth-text-muted);
  font-weight: 400;
}

.luxStaffAuth__form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 8px;
}

.luxStaffAuth__field {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  border: 1px solid var(--auth-border);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.03);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.luxStaffAuth__field:focus-within {
  border-color: var(--auth-gold);
  box-shadow: 0 0 0 4px rgba(201, 169, 106, 0.08);
}

.luxStaffAuth__inputIcon {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  pointer-events: none;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.38;
}

.luxStaffAuth__inputIcon--user {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.luxStaffAuth__inputIcon--lock {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23111111' d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
}

.luxStaffAuth__fieldInput {
  flex: 1;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  padding: 0 52px 0 52px;
  font-size: 16px;
  color: var(--auth-text-dark);
  outline: none;
  border-radius: 18px;
}

.luxStaffAuth__field:has(.luxStaffAuth__passToggle) .luxStaffAuth__fieldInput {
  padding-right: 52px;
}

.luxStaffAuth__fieldInput::placeholder {
  color: rgba(122, 122, 122, 0.75);
}

.luxStaffAuth__passToggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: rgba(17, 17, 17, 0.35);
  transition: background 0.15s ease, color 0.15s ease;
}

.luxStaffAuth__passToggle:hover {
  background: rgba(0, 0, 0, 0.04);
  color: rgba(17, 17, 17, 0.55);
}

.luxStaffAuth__passToggle::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237a7a7a' d='M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3C/svg%3E");
}

.luxStaffAuth__passToggle--on::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237a7a7a' d='M12 6.5a9.77 9.77 0 0 1 8.82 5.5 9.76 9.76 0 0 1-8.82 5.5A9.77 9.77 0 0 1 3.18 12 9.77 9.77 0 0 1 12 6.5M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4zm0 12.5A5 5 0 1 1 12 7a5 5 0 0 1 0 9.5zM12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z'/%3E%3Cpath fill='%237a7a7a' d='M2 2l20 20-1.5 1.5L.5 3.5z'/%3E%3C/svg%3E");
}

.luxStaffAuth__rowOptions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.luxStaffAuth__remember {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--auth-text-muted);
  cursor: pointer;
  user-select: none;
}

.luxStaffAuth__rememberInput {
  width: 18px;
  height: 18px;
  accent-color: var(--auth-gold);
  cursor: pointer;
}

.luxStaffAuth__forgot {
  font-size: 14px;
  font-weight: 500;
  color: var(--auth-gold);
  text-decoration: none;
  white-space: nowrap;
}

.luxStaffAuth__forgot:hover {
  text-decoration: underline;
}

.luxStaffAuth__submit {
  width: 100%;
  height: 60px;
  margin-top: 8px;
  border: none;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--auth-gold-light) 0%, var(--auth-gold) 100%);
  color: #ffffff;
  font-weight: 600;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(201, 169, 106, 0.22);
  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

.luxStaffAuth__submit:hover:not(:disabled) {
  background: linear-gradient(180deg, #c9a35f 0%, #b89755 100%);
  box-shadow: 0 10px 28px rgba(201, 169, 106, 0.28);
  transform: translateY(-1px);
}

.luxStaffAuth__submit:disabled {
  opacity: 0.72;
  cursor: wait;
  transform: none;
}

.luxStaffAuth__rule {
  display: flex;
  justify-content: center;
  margin: 8px 0 0;
}

.luxStaffAuth__ruleLine {
  display: block;
  width: 100%;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.08) 80%, transparent);
}

.luxStaffAuth__copyright {
  margin: 0;
  text-align: center;
  font-size: 13px;
  color: rgba(122, 122, 122, 0.9);
  font-weight: 400;
}

.luxStaffAuth__themeRow {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.luxStaffAuth__themeBtn {
  border: none;
  background: transparent;
  font-size: 12px;
  color: rgba(122, 122, 122, 0.75);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  font-family: inherit;
}

.luxStaffAuth__themeBtn:hover {
  background: rgba(0, 0, 0, 0.04);
  color: var(--auth-text-muted);
}

@media (max-width: 900px) {
  .luxStaffAuth {
    grid-template-columns: 1fr;
  }

  .luxStaffAuth__left {
    display: none;
  }

  .luxStaffAuth__right {
    border-left: none;
    min-height: 100dvh;
    padding: max(48px, env(safe-area-inset-top)) 24px max(40px, env(safe-area-inset-bottom));
    justify-content: flex-start;
  }

  .luxStaffAuth__mobileLogo {
    display: block;
  }

  .luxStaffAuth__title {
    font-size: clamp(36px, 9vw, 48px);
  }

  .luxStaffAuth__subtitle {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .luxStaffAuth__right {
    padding: 24px 20px 32px;
    padding-top: 36px;
  }

  .luxStaffAuth__field {
    height: 58px;
  }

  .luxStaffAuth__fieldInput {
    font-size: 15px;
  }
}

/* —— Reports & analytics — quiet luxury (warm neutrals, staff default) —— */
.reportsShell {
  --reports-gold: #c6a46a;
  --reports-bg: #f6f3ee;
  --reports-panel: #ffffff;
  --reports-border: #eae4da;
  --reports-text: #1c1c1c;
  --reports-muted: #7b766e;
  font-family: Inter, system-ui, sans-serif;
  color: var(--reports-text);
  padding-bottom: 48px;
}

.reportsHero {
  padding: 8px 0 22px;
  border-bottom: 1px solid var(--reports-border);
  margin-bottom: 18px;
}

.reportsHero--compact {
  padding: 0 0 12px;
  margin-bottom: 14px;
}

.reportsHero--compact .reportsHero__title {
  font-size: clamp(22px, 2.5vw, 28px);
  margin: 0;
  line-height: 1.2;
}

.reportsHero--compact .reportsHero__eyebrow {
  margin: 4px 0 0;
}

.reportsHero__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.reportsHero__titles {
  min-width: 0;
  flex: 1;
}

.reportsHero__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.reportsMenuBtn--hero {
  position: static;
  z-index: auto;
}

/* —— Reports filters drawer — theme tokens (data-staff-theme synced from Appearance) —— */
.reportsShell[data-staff-theme="lux"],
.reportsFiltersDrawer[data-staff-theme="lux"],
.reportsFiltersFab[data-staff-theme="lux"],
.reportsActiveFilters[data-staff-theme="lux"] {
  --rep-drawer-font: var(--font-sans, Inter, system-ui, sans-serif);
  --rep-fab-bg: linear-gradient(180deg, #f3edde 0%, #fbf7ef 100%);
  --rep-fab-color: #5c5346;
  --rep-fab-border: rgba(200, 169, 107, 0.45);
  --rep-fab-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
  --rep-fab-hover-shadow: -4px 0 24px rgba(155, 115, 55, 0.22);
  --rep-fab-badge-bg: linear-gradient(135deg, #d7b980 0%, #c6a46a 100%);
  --rep-drawer-backdrop: rgba(15, 23, 42, 0.38);
  --rep-drawer-panel-bg: #fbf7ef;
  --rep-drawer-panel-border: rgba(15, 27, 45, 0.12);
  --rep-drawer-panel-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
  --rep-drawer-title: #1c1c1c;
  --rep-drawer-muted: #7b766e;
  --rep-drawer-divider: #eae4da;
  --rep-drawer-foot-bg: rgba(251, 249, 246, 0.96);
  --rep-drawer-input-bg: #ffffff;
  --rep-drawer-input-border: #eae4da;
  --rep-drawer-input-text: #1c1c1c;
  --rep-drawer-focus-border: #c6a46a;
  --rep-drawer-focus-ring: rgba(198, 164, 106, 0.22);
  --rep-drawer-icon-bg: #f3edde;
  --rep-drawer-icon-border: #eae4da;
  --rep-drawer-reset-bg: #ffffff;
  --rep-drawer-reset-color: #5c5346;
  --rep-drawer-apply-bg: linear-gradient(180deg, #d7b980 0%, #c6a46a 100%);
  --rep-drawer-apply-shadow: 0 4px 14px rgba(155, 115, 55, 0.35);
  --rep-drawer-chip-bg: rgba(198, 164, 106, 0.16);
  --rep-drawer-chip-border: rgba(198, 164, 106, 0.45);
  --rep-drawer-chip-color: #5c5346;
  --rep-drawer-chip-remove: #9a7b2f;
  --rep-fab-badge-color: #ffffff;
  --rep-drawer-apply-color: #ffffff;
  --rep-drawer-icon-color: var(--rep-drawer-muted);
  --rep-drawer-reset-border: var(--rep-drawer-input-border);
}

.reportsShell[data-staff-theme="hospitality"],
.reportsFiltersDrawer[data-staff-theme="hospitality"],
.reportsFiltersFab[data-staff-theme="hospitality"],
.reportsActiveFilters[data-staff-theme="hospitality"] {
  --rep-drawer-font: var(--font-sans, Inter, system-ui, sans-serif);
  --rep-fab-bg: linear-gradient(180deg, rgba(255, 252, 248, 0.92) 0%, #ebe0d2 100%);
  --rep-fab-color: #5c554c;
  --rep-fab-border: rgba(184, 155, 94, 0.4);
  --rep-fab-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  --rep-fab-hover-shadow: -4px 0 28px rgba(139, 115, 93, 0.25);
  --rep-fab-badge-bg: linear-gradient(135deg, #c9ad72 0%, #b89b5e 100%);
  --rep-fab-badge-color: #ffffff;
  --rep-drawer-backdrop: rgba(15, 23, 42, 0.38);
  --rep-drawer-panel-bg: rgba(255, 255, 255, 0.94);
  --rep-drawer-panel-border: rgba(205, 183, 161, 0.5);
  --rep-drawer-panel-shadow: -8px 0 32px rgba(15, 23, 42, 0.1);
  --rep-drawer-title: #1a1814;
  --rep-drawer-muted: #9a8f82;
  --rep-drawer-divider: rgba(205, 183, 161, 0.5);
  --rep-drawer-foot-bg: rgba(255, 252, 248, 0.94);
  --rep-drawer-input-bg: #ffffff;
  --rep-drawer-input-border: rgba(184, 155, 94, 0.35);
  --rep-drawer-input-text: #1a1814;
  --rep-drawer-focus-border: #b89b5e;
  --rep-drawer-focus-ring: rgba(184, 155, 94, 0.22);
  --rep-drawer-icon-bg: rgba(255, 255, 255, 0.75);
  --rep-drawer-icon-border: rgba(205, 183, 161, 0.5);
  --rep-drawer-icon-color: #9a8f82;
  --rep-drawer-reset-bg: #ffffff;
  --rep-drawer-reset-border: rgba(184, 155, 94, 0.35);
  --rep-drawer-reset-color: #6e6458;
  --rep-drawer-apply-bg: linear-gradient(135deg, #b89b5e 0%, #8b735d 100%);
  --rep-drawer-apply-color: #ffffff;
  --rep-drawer-apply-shadow: 0 4px 14px rgba(139, 115, 93, 0.3);
  --rep-drawer-chip-bg: rgba(184, 155, 94, 0.16);
  --rep-drawer-chip-border: rgba(184, 155, 94, 0.4);
  --rep-drawer-chip-color: #8b735d;
  --rep-drawer-chip-remove: #b89b5e;
}

.reportsShell[data-staff-theme="luxury-bright"],
.reportsFiltersDrawer[data-staff-theme="luxury-bright"],
.reportsFiltersFab[data-staff-theme="luxury-bright"],
.reportsActiveFilters[data-staff-theme="luxury-bright"] {
  --rep-drawer-font: Arial, sans-serif;
  --rep-fab-bg: linear-gradient(180deg, #ffffff 0%, #fdfcf7 100%);
  --rep-fab-color: #333333;
  --rep-fab-border: #cccccc;
  --rep-fab-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
  --rep-fab-hover-shadow: -4px 0 24px rgba(212, 175, 55, 0.28);
  --rep-fab-badge-bg: linear-gradient(135deg, #d4af37 0%, #aa8b2c 100%);
  --rep-fab-badge-color: #ffffff;
  --rep-drawer-backdrop: rgba(15, 23, 42, 0.38);
  --rep-drawer-panel-bg: #ffffff;
  --rep-drawer-panel-border: #cccccc;
  --rep-drawer-panel-shadow: -8px 0 32px rgba(15, 23, 42, 0.1);
  --rep-drawer-title: #333333;
  --rep-drawer-muted: #999999;
  --rep-drawer-divider: #cccccc;
  --rep-drawer-foot-bg: #fdfcf7;
  --rep-drawer-input-bg: #ffffff;
  --rep-drawer-input-border: #cccccc;
  --rep-drawer-input-text: #333333;
  --rep-drawer-focus-border: #d4af37;
  --rep-drawer-focus-ring: rgba(212, 175, 55, 0.22);
  --rep-drawer-icon-bg: #fdfcf7;
  --rep-drawer-icon-border: #cccccc;
  --rep-drawer-icon-color: #999999;
  --rep-drawer-reset-bg: #ffffff;
  --rep-drawer-reset-border: #cccccc;
  --rep-drawer-reset-color: #333333;
  --rep-drawer-apply-bg: linear-gradient(135deg, #d4af37 0%, #aa8b2c 100%);
  --rep-drawer-apply-color: #ffffff;
  --rep-drawer-apply-shadow: 0 4px 14px rgba(212, 175, 55, 0.35);
  --rep-drawer-chip-bg: rgba(212, 175, 55, 0.14);
  --rep-drawer-chip-border: rgba(212, 175, 55, 0.45);
  --rep-drawer-chip-color: #333333;
  --rep-drawer-chip-remove: #aa8b2c;
}

.reportsShell[data-staff-theme="saas"],
.reportsFiltersDrawer[data-staff-theme="saas"],
.reportsFiltersFab[data-staff-theme="saas"],
.reportsActiveFilters[data-staff-theme="saas"] {
  --rep-drawer-font: var(--saas-font, Inter, sans-serif);
  --rep-fab-bg: linear-gradient(180deg, var(--saas-sidebar, #1f2937) 0%, var(--saas-sidebar-deep, #111827) 100%);
  --rep-fab-color: var(--saas-sidebar-text, #e5e7eb);
  --rep-fab-border: transparent;
  --rep-fab-hover-shadow: -4px 0 28px rgba(245, 158, 11, 0.28);
  --rep-fab-badge-bg: linear-gradient(135deg, var(--saas-accent, #f59e0b) 0%, var(--saas-accent-strong, #ff8a00) 100%);
  --rep-drawer-panel-bg: var(--saas-canvas, #f5f7fa);
  --rep-drawer-head-bg: var(--saas-surface, #ffffff);
  --rep-drawer-body-bg: var(--saas-canvas, #f5f7fa);
  --rep-drawer-panel-border: var(--saas-border, #e5e7eb);
  --rep-drawer-title: var(--saas-text, #111827);
  --rep-drawer-muted: var(--saas-text-soft, #94a3b8);
  --rep-drawer-divider: var(--saas-border, #e5e7eb);
  --rep-drawer-foot-bg: var(--saas-surface, #ffffff);
  --rep-drawer-input-bg: var(--saas-surface, #ffffff);
  --rep-drawer-input-border: var(--saas-border, #e5e7eb);
  --rep-drawer-input-text: var(--saas-text, #111827);
  --rep-drawer-focus-border: var(--saas-accent-blue, #2563eb);
  --rep-drawer-focus-ring: rgba(37, 99, 235, 0.18);
  --rep-drawer-icon-bg: var(--saas-surface, #ffffff);
  --rep-drawer-reset-bg: var(--saas-surface, #ffffff);
  --rep-drawer-reset-border: var(--saas-border, #e5e7eb);
  --rep-drawer-reset-color: var(--saas-text, #111827);
  --rep-drawer-apply-bg: linear-gradient(135deg, var(--saas-accent, #f59e0b) 0%, var(--saas-accent-strong, #ff8a00) 100%);
  --rep-drawer-apply-color: #ffffff;
  --rep-drawer-apply-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  --rep-drawer-chip-bg: rgba(245, 158, 11, 0.12);
  --rep-drawer-chip-border: rgba(245, 158, 11, 0.35);
  --rep-drawer-chip-color: var(--saas-text, #111827);
  --rep-drawer-chip-remove: var(--saas-accent-strong, #ff8a00);
  --rep-fab-badge-color: #ffffff;
  --rep-fab-shadow: -4px 0 24px rgba(0, 0, 0, 0.2);
  --rep-drawer-backdrop: rgba(15, 23, 42, 0.38);
  --rep-drawer-panel-shadow: var(--saas-shadow-hover, -8px 0 32px rgba(15, 23, 42, 0.1));
  --rep-drawer-icon-color: var(--saas-text-muted, #6b7280);
}

.reportsShell[data-staff-theme="saas-dark"],
.reportsFiltersDrawer[data-staff-theme="saas-dark"],
.reportsFiltersFab[data-staff-theme="saas-dark"],
.reportsActiveFilters[data-staff-theme="saas-dark"] {
  --rep-drawer-font: var(--saas-font, Inter, sans-serif);
  --rep-fab-bg: linear-gradient(180deg, #111827 0%, #030712 100%);
  --rep-fab-color: #f3f4f6;
  --rep-fab-border: transparent;
  --rep-fab-shadow: -4px 0 24px rgba(0, 0, 0, 0.35);
  --rep-fab-hover-shadow: -4px 0 28px rgba(245, 158, 11, 0.28);
  --rep-fab-badge-bg: linear-gradient(135deg, #f59e0b 0%, #ff8a00 100%);
  --rep-fab-badge-color: #ffffff;
  --rep-drawer-backdrop: rgba(2, 6, 23, 0.62);
  --rep-drawer-panel-bg: #1e293b;
  --rep-drawer-panel-border: #334155;
  --rep-drawer-panel-shadow: -8px 0 40px rgba(0, 0, 0, 0.45);
  --rep-drawer-title: #f9fafb;
  --rep-drawer-muted: #cbd5e1;
  --rep-drawer-divider: #334155;
  --rep-drawer-foot-bg: #0f172a;
  --rep-drawer-input-bg: #1e293b;
  --rep-drawer-input-border: #334155;
  --rep-drawer-input-text: #f9fafb;
  --rep-drawer-focus-border: #3b82f6;
  --rep-drawer-focus-ring: rgba(59, 130, 246, 0.25);
  --rep-drawer-icon-bg: #0f172a;
  --rep-drawer-icon-border: #334155;
  --rep-drawer-icon-color: #94a3b8;
  --rep-drawer-reset-bg: #1e293b;
  --rep-drawer-reset-border: #334155;
  --rep-drawer-reset-color: #f9fafb;
  --rep-drawer-head-bg: var(--saas-surface, #1e293b);
  --rep-drawer-body-bg: var(--saas-canvas, #0f172a);
  --rep-drawer-apply-bg: linear-gradient(135deg, var(--saas-accent, #f59e0b) 0%, var(--saas-accent-strong, #ff8a00) 100%);
  --rep-drawer-apply-color: #ffffff;
  --rep-drawer-apply-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
  --rep-drawer-chip-bg: rgba(245, 158, 11, 0.18);
  --rep-drawer-chip-border: rgba(245, 158, 11, 0.4);
  --rep-drawer-chip-color: var(--saas-text, #f9fafb);
  --rep-drawer-chip-remove: var(--saas-accent-strong, #ff8a00);
}

/* FAB + panel pick up tokens from data-staff-theme on the element itself */
.reportsFiltersFab[data-staff-theme],
.reportsSectionFab[data-staff-theme] {
  border: 1px solid var(--rep-fab-border, transparent);
  background: var(--rep-fab-bg);
  color: var(--rep-fab-color);
  box-shadow: var(--rep-fab-shadow, -4px 0 20px rgba(0, 0, 0, 0.12));
}

.reportsFiltersDrawer__panel[data-staff-theme],
.reportsFiltersDrawer[data-staff-theme] .reportsFiltersDrawer__panel {
  background: var(--rep-drawer-panel-bg);
  border-left-color: var(--rep-drawer-panel-border);
  color: var(--rep-drawer-input-text);
}

/* Drawer/FAB only on reports page (children of .reportsShell--hasFiltersDrawer) */
body > .reportsFiltersFab,
body > .reportsFiltersDrawer {
  display: none !important;
  pointer-events: none !important;
}

.reportsShell--hasFiltersDrawer > .reportsFiltersFab {
  display: inline-flex;
}

.reportsShell--hasFiltersDrawer > .reportsFiltersDrawer {
  display: block;
}

/* SaaS analytics — drawer matches CRM sidebar, cards, btn--primary (amber) */
html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer > .reportsFiltersFab.reportsFiltersUi--theme-saas,
html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer > .reportsFiltersFab[data-staff-theme="saas"] {
  background: linear-gradient(180deg, var(--saas-sidebar) 0%, var(--saas-sidebar-deep) 100%) !important;
  color: var(--saas-sidebar-text) !important;
  border: none !important;
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.2) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer > .reportsFiltersFab.reportsFiltersUi--theme-saas:hover {
  filter: brightness(1.08);
  box-shadow: -4px 0 28px rgba(245, 158, 11, 0.28) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersDrawer.reportsFiltersUi--theme-saas .reportsFiltersDrawer__panel {
  background: var(--saas-canvas) !important;
  border-left: 1px solid var(--saas-border) !important;
  color: var(--saas-text) !important;
  font-family: var(--saas-font) !important;
  box-shadow: var(--saas-shadow-hover) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__head {
  background: var(--saas-surface) !important;
  border-bottom: 1px solid var(--saas-border) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__title {
  color: var(--saas-text) !important;
  font-family: var(--saas-font) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__clearAll {
  color: #dc2626 !important;
  font-family: var(--saas-font) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__body {
  background: var(--saas-canvas) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__foot {
  background: var(--saas-surface) !important;
  border-top: 1px solid var(--saas-border) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawerField__label,
html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__body .reportsField label {
  color: var(--saas-text-soft) !important;
  font-family: var(--saas-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__body .reportsInput,
html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__body .reportsSelect {
  font-family: var(--saas-font) !important;
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  color: var(--saas-text) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__body .reportsInput:focus,
html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__body .reportsSelect:focus {
  border-color: var(--saas-accent-blue) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18) !important;
  outline: none !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__iconBtn {
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  color: var(--saas-text-muted) !important;
  border-radius: 10px !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__reset {
  background: var(--saas-surface) !important;
  border: 1px solid var(--saas-border) !important;
  color: var(--saas-text) !important;
  font-family: var(--saas-font) !important;
  font-weight: 600 !important;
  border-radius: var(--ql-radius-btn, 10px) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__apply {
  background: linear-gradient(135deg, var(--saas-accent) 0%, var(--saas-accent-strong) 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: var(--saas-font) !important;
  font-weight: 600 !important;
  border-radius: var(--ql-radius-btn, 10px) !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawer__apply:hover:not(:disabled) {
  filter: brightness(1.05) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas .reportsDrawerAuditBlock {
  border-top: 1px dashed var(--saas-border) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsActiveFilters.reportsFiltersUi--theme-saas .reportsFilterChip,
html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsActiveFilters[data-staff-theme="saas"] .reportsFilterChip {
  background: rgba(245, 158, 11, 0.12) !important;
  border: 1px solid rgba(245, 158, 11, 0.35) !important;
  color: var(--saas-text) !important;
  font-family: var(--saas-font) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsActiveFilters.reportsFiltersUi--theme-saas .reportsFilterChip__remove,
html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer .reportsActiveFilters[data-staff-theme="saas"] .reportsFilterChip__remove {
  color: var(--saas-accent-strong) !important;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasFiltersDrawer > .reportsFiltersFab.reportsFiltersUi--theme-saas .reportsFiltersFab__badge {
  background: linear-gradient(135deg, var(--saas-accent) 0%, var(--saas-accent-strong) 100%) !important;
}

/* SaaS dark */
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--hasFiltersDrawer .reportsFiltersDrawer.reportsFiltersUi--theme-saas-dark .reportsFiltersDrawer__panel {
  background: var(--saas-canvas) !important;
  border-left-color: var(--saas-border) !important;
  color: var(--saas-text) !important;
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas-dark .reportsDrawer__head {
  background: var(--saas-surface) !important;
  border-bottom-color: var(--saas-border) !important;
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas-dark .reportsDrawer__body {
  background: var(--saas-canvas) !important;
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas-dark .reportsDrawer__foot {
  background: var(--saas-surface) !important;
  border-top-color: var(--saas-border) !important;
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas-dark .reportsDrawer__body .reportsInput,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas-dark .reportsDrawer__body .reportsSelect {
  background: var(--saas-surface) !important;
  border-color: var(--saas-border) !important;
  color: var(--saas-text) !important;
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--hasFiltersDrawer .reportsFiltersUi--theme-saas-dark .reportsDrawer__apply {
  background: linear-gradient(135deg, var(--saas-accent) 0%, var(--saas-accent-strong) 100%) !important;
}

/* —— Reports filters drawer (components) —— */
.reportsFiltersFab {
  position: fixed;
  right: 16px;
  left: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 92;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--rep-fab-border);
  background: var(--rep-fab-bg);
  color: var(--rep-fab-color);
  box-shadow: var(--rep-fab-shadow);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition:
    transform 0.28s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease,
    border-color 0.2s ease;
}

.reportsFiltersFab:hover {
  filter: brightness(1.06);
  box-shadow: var(--rep-fab-hover-shadow);
}

.reportsFiltersFab--open .reportsFiltersFab__icon {
  transform: rotate(180deg);
}

.reportsFiltersFab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.28s ease-in-out;
}

.reportsFiltersFab__badge {
  position: absolute;
  top: -4px;
  left: -4px;
  right: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--rep-fab-badge-bg);
  color: var(--rep-fab-badge-color);
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.reportsFiltersDrawer {
  position: fixed;
  inset: 0;
  z-index: 91;
  pointer-events: none;
}

.reportsFiltersDrawer--open {
  pointer-events: auto;
}

.reportsFiltersDrawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--rep-drawer-backdrop);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s ease-in-out;
}

.reportsFiltersDrawer--open .reportsFiltersDrawer__backdrop {
  opacity: 1;
}

.reportsFiltersDrawer__panel {
  position: absolute;
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(320px, 92vw);
  max-width: 100%;
  background: var(--rep-drawer-panel-bg);
  border-left: 1px solid var(--rep-drawer-panel-border);
  border-right: none;
  box-shadow: var(--rep-drawer-panel-shadow);
  color: var(--rep-drawer-input-text);
  font-family: var(--rep-drawer-font);
  display: flex;
  flex-direction: column;
  transform: translateX(105%);
  transition: transform 0.28s ease-in-out;
  outline: none;
}

.reportsFiltersDrawer--open .reportsFiltersDrawer__panel {
  transform: translateX(0);
}

.reportsDrawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--rep-drawer-divider);
  background: var(--rep-drawer-head-bg, var(--rep-drawer-panel-bg));
  flex-shrink: 0;
}

.reportsDrawer__title {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--rep-drawer-title);
  font-family: var(--rep-drawer-font);
}

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

.reportsDrawer__clearAll {
  border: none;
  background: transparent;
  color: #dc2626;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background 0.15s ease;
}

.reportsDrawer__clearAll:hover {
  background: rgba(220, 38, 38, 0.08);
}

.reportsDrawer__iconBtn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--rep-drawer-icon-border);
  border-radius: 8px;
  background: var(--rep-drawer-icon-bg);
  color: var(--rep-drawer-icon-color);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.reportsDrawer__iconBtn:hover {
  filter: brightness(0.97);
  color: var(--rep-drawer-title);
  border-color: var(--rep-drawer-focus-border);
}

.reportsDrawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--rep-drawer-body-bg, var(--rep-drawer-panel-bg));
  -webkit-overflow-scrolling: touch;
}

.reportsDrawer__body .reportsField {
  flex: none;
  width: 100%;
  min-width: 0;
  max-width: none;
}

.reportsDrawerField__label,
.reportsDrawer__body .reportsField label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rep-drawer-muted);
  margin-bottom: 6px;
}

.reportsDrawer__body .reportsInput,
.reportsDrawer__body .reportsSelect {
  border-radius: 10px;
  border: 1px solid var(--rep-drawer-input-border);
  background: var(--rep-drawer-input-bg);
  color: var(--rep-drawer-input-text);
}

.reportsDrawer__body .reportsInput:focus,
.reportsDrawer__body .reportsSelect:focus {
  border-color: var(--rep-drawer-focus-border);
  box-shadow: 0 0 0 3px var(--rep-drawer-focus-ring);
  outline: none;
}

.reportsDrawerAuditBlock {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 4px;
  border-top: 1px dashed var(--rep-drawer-divider);
}

.reportsColumnPicker {
  position: relative;
}

.reportsColumnPicker__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--rep-drawer-input-border);
  background: var(--rep-drawer-input-bg);
  color: var(--rep-drawer-input-text);
  font-size: 13px;
  font-weight: 500;
}

.reportsColumnPicker__toggle::-webkit-details-marker {
  display: none;
}

.reportsColumnPicker__toggle::after {
  content: "▾";
  font-size: 11px;
  opacity: 0.65;
  transition: transform 0.15s ease;
}

.reportsColumnPicker[open] .reportsColumnPicker__toggle::after {
  transform: rotate(180deg);
}

.reportsColumnPicker__title {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.reportsColumnPicker__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--rep-drawer-muted);
  white-space: nowrap;
}

.reportsColumnPicker__menu {
  margin-top: 8px;
  max-height: min(52vh, 320px);
  overflow: auto;
  border-radius: 10px;
  border: 1px solid var(--rep-drawer-input-border);
  background: var(--rep-drawer-input-bg);
  padding: 8px;
}

.reportsColumnPicker__actions {
  display: flex;
  gap: 12px;
  padding: 4px 6px 8px;
  border-bottom: 1px solid var(--rep-drawer-divider);
  margin-bottom: 6px;
}

.reportsColumnPicker__link {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--rep-drawer-accent, #c8a96b);
  cursor: pointer;
}

.reportsColumnPicker__link:hover {
  text-decoration: underline;
}

.reportsColumnPicker__row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--rep-drawer-input-text);
  cursor: pointer;
}

.reportsColumnPicker__row:hover {
  background: color-mix(in srgb, var(--rep-drawer-accent, #c8a96b) 10%, transparent);
}

.reportsColumnPicker__row input {
  margin-top: 2px;
  flex-shrink: 0;
}

.reportsDrawerField--columns {
  margin-top: 2px;
}

.reportsDrawer__foot {
  flex-shrink: 0;
  display: flex;
  gap: 10px;
  padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rep-drawer-divider);
  background: var(--rep-drawer-foot-bg);
  position: sticky;
  bottom: 0;
}

.reportsDrawer__reset {
  flex: 1;
  border: 1px solid var(--rep-drawer-reset-border);
  background: var(--rep-drawer-reset-bg);
  color: var(--rep-drawer-reset-color);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--rep-drawer-font);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, filter 0.15s ease;
}

.reportsDrawer__reset:hover {
  filter: brightness(0.98);
  border-color: var(--rep-drawer-focus-border);
}

.reportsDrawer__apply {
  flex: 1.4;
  border: none;
  background: var(--rep-drawer-apply-bg);
  color: var(--rep-drawer-apply-color);
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 650;
  font-family: var(--rep-drawer-font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--rep-drawer-apply-shadow);
  transition: filter 0.15s ease, transform 0.15s ease;
}

.reportsDrawer__apply:hover:not(:disabled) {
  filter: brightness(1.05);
}

.reportsDrawer__apply:disabled {
  opacity: 0.75;
  cursor: wait;
}

.reportsDrawer__spinner {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: reportsDrawerSpin 0.7s linear infinite;
}

@keyframes reportsDrawerSpin {
  to {
    transform: rotate(360deg);
  }
}

.reportsToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.reportsActiveFilters {
  margin-bottom: 14px;
}

.reportsActiveFilters__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.reportsFilterChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: var(--rep-drawer-chip-bg);
  border: 1px solid var(--rep-drawer-chip-border);
  color: var(--rep-drawer-chip-color);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--rep-drawer-font);
}

.reportsFilterChip__remove {
  border: none;
  background: transparent;
  color: var(--rep-drawer-chip-remove);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  border-radius: 4px;
}

.reportsFilterChip__remove:hover {
  background: var(--rep-drawer-focus-ring);
}

@media (max-width: 980px) {
  .reportsFiltersDrawer__panel {
    width: 100%;
    max-width: 100vw;
  }

  .reportsFiltersFab {
    right: 10px;
    left: auto;
    width: 40px;
    height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reportsFiltersDrawer__panel,
  .reportsFiltersDrawer__backdrop,
  .reportsFiltersFab__icon {
    transition: none;
  }
}

.reportsHero__eyebrow {
  font-family: Inter, sans-serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  color: #a49b8f;
  font-weight: 600;
  margin: 6px 0 0;
}

.reportsHero__title {
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(26px, 3vw, 36px);
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  color: var(--reports-text);
}

.reportsHero__lead {
  font-family: Inter, sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--reports-muted);
  max-width: 720px;
  margin: 0;
}

.reportsFiltersSticky {
  position: sticky;
  top: 0;
  z-index: 6;
  margin: 0 0 18px;
  padding: 12px 0;
  background: linear-gradient(180deg, rgba(251, 249, 246, 0.98), rgba(246, 243, 238, 0.92));
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--reports-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reportsFiltersRow {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 10px 12px;
  overflow-x: auto;
  padding-bottom: 2px;
  width: 100%;
}

.reportsActionsRow {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  width: 100%;
}

.reportsActionsRow .btn--primary {
  flex-shrink: 0;
}

.reportsField {
  flex: 0 0 148px;
  min-width: 120px;
  max-width: 168px;
}

.reportsField--date {
  flex: 0 0 132px;
  min-width: 128px;
  max-width: 140px;
}

.reportsField--search {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 240px;
}

.reportsField--compact {
  flex: 0 0 132px;
  min-width: 120px;
  max-width: 150px;
}


.reportsField label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a49b8f;
  margin-bottom: 6px;
  font-family: Inter, sans-serif;
  font-weight: 600;
}

.reportsInput,
.reportsSelect {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--reports-border);
  background: #fff;
  color: var(--reports-text);
  padding: 10px 12px;
  font-size: 13px;
  box-sizing: border-box;
}

.reportsInput:focus,
.reportsSelect:focus {
  outline: none;
  border-color: var(--reports-gold);
  box-shadow: 0 0 0 4px rgba(198, 164, 106, 0.08);
}

.reportsExport {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

.reportsExport__label {
  font-size: 12px;
  color: var(--reports-muted);
  margin-right: 8px;
  align-self: center;
}

.reportsExport__menu {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
}

.reportsExport__item {
  border: 1px solid rgba(155, 115, 55, 0.25);
  background: linear-gradient(180deg, #d7b980 0%, #c6a46a 100%);
  color: #fff;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  font-family: Inter, sans-serif;
  white-space: nowrap;
}

.reportsExport__item:hover {
  background: linear-gradient(180deg, #e0c48e 0%, #b8945c 100%);
}

.reportsExport__item--primary {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  border-color: rgba(51, 65, 85, 0.45);
  color: #f8fafc;
}

.reportsExport__item--primary:hover {
  background: linear-gradient(180deg, #475569 0%, #334155 100%);
}

.reportsBody {
  display: block;
  min-width: 0;
}

/* —— Reports section drawer (left) —— */
body > .reportsSectionFab,
body > .reportsSectionDrawer {
  display: none !important;
  pointer-events: none !important;
}

.reportsShell--hasSectionDrawer > .reportsSectionFab {
  display: inline-flex;
}

.reportsShell--hasSectionDrawer > .reportsSectionDrawer {
  display: block;
}

.reportsSectionFab {
  position: fixed;
  left: 16px;
  right: auto;
  top: 50%;
  transform: translateY(-50%);
  z-index: 92;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--rep-fab-border, rgba(200, 169, 107, 0.45));
  background: var(--rep-fab-bg, linear-gradient(180deg, #f3edde 0%, #fbf7ef 100%));
  color: var(--rep-fab-color, #5c5346);
  box-shadow: var(--rep-fab-shadow, 4px 0 20px rgba(0, 0, 0, 0.12));
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition:
    transform 0.28s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}

.reportsSectionFab:hover {
  filter: brightness(1.06);
  box-shadow: var(--rep-fab-hover-shadow, 4px 0 24px rgba(155, 115, 55, 0.22));
}

.reportsSectionFab--open .reportsSectionFab__icon {
  transform: rotate(180deg);
}

.reportsSectionFab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.28s ease-in-out;
}

.reportsSectionDrawer {
  position: fixed;
  inset: 0;
  z-index: 91;
  pointer-events: none;
}

.reportsSectionDrawer--open {
  pointer-events: auto;
}

.reportsSectionDrawer__backdrop {
  position: absolute;
  inset: 0;
  background: var(--rep-drawer-backdrop, rgba(15, 23, 42, 0.38));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity 0.28s ease-in-out;
}

.reportsSectionDrawer--open .reportsSectionDrawer__backdrop {
  opacity: 1;
}

.reportsSectionDrawer__panel {
  position: absolute;
  left: 0;
  right: auto;
  top: 0;
  bottom: 0;
  width: min(300px, 92vw);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rep-drawer-panel-border, var(--border));
  border-left: none;
  border-radius: 0 14px 14px 0;
  background: var(--rep-drawer-panel-bg, rgba(243, 237, 222, 0.98));
  box-shadow: var(--rep-drawer-panel-shadow, 8px 0 32px rgba(15, 23, 42, 0.12));
  color: var(--rep-drawer-input-text, inherit);
  font-family: var(--rep-drawer-font, inherit);
  transform: translateX(-105%);
  transition: transform 0.28s ease-in-out;
  outline: none;
  overflow: hidden;
}

.reportsSectionDrawer--open .reportsSectionDrawer__panel {
  transform: translateX(0);
}

.reportsSectionDrawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 14px 20px;
  -webkit-overflow-scrolling: touch;
}

.reportsSectionDrawer__nav {
  margin-top: 4px;
}

/* Section nav inside drawer — icons always visible */
.reportsSectionSidebar.reportsSectionDrawer__panel {
  position: relative;
  border-radius: 0 14px 14px 0;
}

body.dark .reportsSectionSidebar.reportsSectionDrawer__panel {
  background: rgba(0, 0, 0, 0.92);
}

.reportsSectionSidebar .navItem {
  text-decoration: none;
  justify-content: flex-start;
  gap: 10px;
}

.reportsSectionSidebar .navItem__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.reportsSectionSidebar .navItem__label {
  flex: 1;
  min-width: 0;
}

.reportsSectionDrawer__head {
  flex-shrink: 0;
}

html.routeStaffLux.routeStaffSaas .reportsShell--hasSectionDrawer > .reportsSectionFab.reportsSectionUi--theme-saas,
html.routeStaffLux.routeStaffSaas .reportsShell--hasSectionDrawer > .reportsSectionFab[data-staff-theme="saas"] {
  background: linear-gradient(180deg, var(--saas-sidebar) 0%, var(--saas-sidebar-deep) 100%) !important;
  color: var(--saas-sidebar-text) !important;
  border: none !important;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.2) !important;
}

html.routeStaffLux.routeStaffSaas .reportsSectionDrawer.reportsSectionUi--theme-saas .reportsSectionDrawer__panel {
  background: linear-gradient(180deg, var(--saas-sidebar) 0%, var(--saas-sidebar-deep) 100%) !important;
  border-right: none !important;
  color: var(--saas-sidebar-text) !important;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.25) !important;
}

html.routeStaffLux.routeStaffSaas .reportsSectionDrawer.reportsSectionUi--theme-saas .reportsDrawer__title {
  color: #ffffff !important;
  font-family: var(--saas-font) !important;
}

html.routeStaffLux.routeStaffSaas .reportsSectionDrawer.reportsSectionUi--theme-saas .reportsSectionSidebar .navItem {
  color: var(--saas-sidebar-text);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsSectionDrawer.reportsSectionUi--theme-saas .reportsSectionSidebar .navItem__icon {
  display: inline-flex;
  opacity: 0.85;
}

html.routeStaffLux.routeStaffSaas .reportsSectionDrawer.reportsSectionUi--theme-saas .reportsSectionSidebar .navItem.active {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.35), rgba(255, 138, 0, 0.2));
  border-color: rgba(245, 158, 11, 0.5);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--saas-accent);
}

@media (max-width: 980px) {
  .reportsSectionDrawer__panel {
    width: min(320px, 100vw);
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reportsSectionDrawer__panel,
  .reportsSectionDrawer__backdrop,
  .reportsSectionFab__icon {
    transition: none;
  }
}

.reportsMain {
  min-width: 0;
}

.reportsTabHost {
  min-height: 200px;
}

.reportsTabGrid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
}

.reportsTabGrid--membership {
  max-width: none;
  width: 100%;
}

.reportsGlass {
  background: #ffffff;
  border: 1px solid var(--reports-border);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
  backdrop-filter: none;
}

/* Reports — semantic palette (blue / green / red / gold) */
.reportsShell--semantic {
  --rep-blue: #1e3a5f;
  --rep-green: #1d6b4f;
  --rep-red: #b42318;
  --rep-gold: #9a7b2f;
}

.reportsSemanticLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #64748b;
}

.reportsSemanticLegend__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.reportsSemanticLegend__item::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.reportsSemanticLegend__item--blue::before {
  background: var(--rep-blue);
}
.reportsSemanticLegend__item--green::before {
  background: var(--rep-green);
}
.reportsSemanticLegend__item--gold::before {
  background: var(--rep-gold);
}
.reportsSemanticLegend__item--red::before {
  background: var(--rep-red);
}

.reportsShell--semantic .reportsGlass,
.reportsShell--semantic .reportsKpi,
.reportsShell--semantic .reportsStat,
.reportsShell--semantic .reportsGap {
  background: #ffffff;
}

.reportsShell--semantic .reportsChartsRow .dashChart {
  background: var(--cream-2, #fff);
}

.reportsShell--semantic .reportsGlass.reportsKpi--blue,
.reportsShell--semantic .reportsChartCard--blue,
.reportsShell--semantic .reportsStat--blue {
  border-color: rgba(30, 58, 95, 0.22);
  border-left: 3px solid var(--rep-blue);
}

.reportsShell--semantic .reportsGlass.reportsKpi--green,
.reportsShell--semantic .reportsChartCard--green,
.reportsShell--semantic .reportsStat--green {
  border-color: rgba(29, 107, 79, 0.24);
  border-left: 3px solid var(--rep-green);
}

.reportsShell--semantic .reportsGlass.reportsKpi--gold,
.reportsShell--semantic .reportsChartCard--gold,
.reportsShell--semantic .reportsStat--gold {
  border-color: rgba(154, 123, 47, 0.26);
  border-left: 3px solid var(--rep-gold);
}

.reportsShell--semantic .reportsGlass.reportsKpi--red,
.reportsShell--semantic .reportsChartCard--red,
.reportsShell--semantic .reportsStat--red {
  border-color: rgba(180, 35, 24, 0.22);
  border-left: 3px solid var(--rep-red);
}

.reportsShell--semantic .reportsGlass.reportsKpi--blue .reportsKpi__value {
  color: var(--rep-blue);
}
.reportsShell--semantic .reportsGlass.reportsKpi--green .reportsKpi__value {
  color: var(--rep-green);
}
.reportsShell--semantic .reportsGlass.reportsKpi--gold .reportsKpi__value {
  color: var(--rep-gold);
}
.reportsShell--semantic .reportsGlass.reportsKpi--red .reportsKpi__value {
  color: var(--rep-red);
}

.reportsShell--semantic .reportsChartCard h3 {
  color: var(--rep-blue);
  font-weight: 600;
}

.reportsShell--semantic .reportsStat--green .reportsStat__v {
  color: var(--rep-green);
}
.reportsShell--semantic .reportsStat--red .reportsStat__v {
  color: var(--rep-red);
}
.reportsShell--semantic .reportsStat--gold .reportsStat__v {
  color: var(--rep-gold);
}
.reportsShell--semantic .reportsStat--blue .reportsStat__v {
  color: var(--rep-blue);
}

.reportsShell--semantic .reportsKpi:hover,
.reportsShell--semantic .reportsStat:hover,
.reportsShell--semantic .reportsChartsRow .dashChart:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(30, 58, 95, 0.08);
}

.reportsBanner {
  border: 1px solid rgba(198, 164, 106, 0.35);
  background: rgba(243, 232, 210, 0.45);
  color: #5f5a53;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  margin-bottom: 12px;
}

.reportsKpiStrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 220px));
  gap: 10px;
  justify-content: start;
}

@media (max-width: 720px) {
  .reportsKpiStrip {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
  }
  .reportsKpi {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
}

.reportsKpi {
  padding: 12px 12px 10px;
  max-width: 220px;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.reportsKpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.06);
}

.reportsKpi__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.reportsKpi__icon {
  font-size: 16px;
  opacity: 0.85;
}

.reportsDelta {
  font-size: 11px;
  font-weight: 600;
  font-family: Montserrat, Inter, sans-serif;
}

.reportsDelta.isUp {
  color: #1d6b4f;
}
.reportsDelta.isDown {
  color: #b42318;
}
.reportsDelta.isFlat {
  color: #9a7b2f;
}

.reportsKpi__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #a49b8f;
  font-family: Inter, sans-serif;
  font-weight: 600;
}

.reportsKpi__value {
  font-size: 1.25rem;
  font-weight: 600;
  font-family: Inter, system-ui, sans-serif;
  margin-top: 4px;
  color: #1c1c1c;
  line-height: 1.2;
}

.reportsKpi__sub {
  font-size: 12px;
  color: #7b766e;
  margin-top: 4px;
}

.reportsMiniTrend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 28px;
  margin-top: 8px;
  opacity: 0.9;
}

.reportsMiniTrend--empty {
  align-items: center;
  justify-content: center;
  color: #a49b8f;
  font-size: 12px;
}

.reportsMiniTrend__bar {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--reports-gold), rgba(200, 169, 107, 0.25));
  min-height: 4px;
}

.reportsChartsRow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  max-width: min(100%, 920px);
}

/* Reports tabs — same motion language as dashboard overview */
.reportsExecMetrics {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

@media (min-width: 900px) {
  .reportsExecMetrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.dash__metrics--compact {
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  max-width: 840px;
}

.reportsTabGrid--enter > .reportsBanner {
  animation: dashHintIn 780ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reportsTabGrid--enter > .dash__metrics .dashStat {
  animation: dashStatIn 940ms cubic-bezier(0.34, 1.15, 0.64, 1) both;
}

.reportsTabGrid--enter > .dash__metrics .dashStat:nth-child(1) {
  animation-delay: 60ms;
}
.reportsTabGrid--enter > .dash__metrics .dashStat:nth-child(2) {
  animation-delay: 115ms;
}
.reportsTabGrid--enter > .dash__metrics .dashStat:nth-child(3) {
  animation-delay: 170ms;
}
.reportsTabGrid--enter > .dash__metrics .dashStat:nth-child(4) {
  animation-delay: 225ms;
}
.reportsTabGrid--enter > .dash__metrics .dashStat:nth-child(5) {
  animation-delay: 280ms;
}
.reportsTabGrid--enter > .dash__metrics .dashStat:nth-child(6) {
  animation-delay: 335ms;
}
.reportsTabGrid--enter > .dash__metrics .dashStat:nth-child(7) {
  animation-delay: 390ms;
}
.reportsTabGrid--enter > .dash__metrics .dashStat:nth-child(8) {
  animation-delay: 445ms;
}
.reportsTabGrid--enter > .dash__metrics .dashStat:nth-child(9) {
  animation-delay: 500ms;
}

.reportsTabGrid--enter .dashStat__sparkBar {
  animation: dashSparkGrow 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) both;
  animation-delay: calc(320ms + (var(--spark-i, 0) * 42ms));
}

.reportsTabGrid--enter .reportsChartsRow .dashChart {
  animation: dashChartIn 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reportsTabGrid--enter .reportsChartsRow .dashChart:nth-child(1) {
  animation-delay: 360ms;
}

.reportsTabGrid--enter .reportsChartsRow .dashChart:nth-child(2) {
  animation-delay: 440ms;
}

.reportsTabGrid--enter .reportsChartsRow .dashChart:nth-child(3) {
  animation-delay: 520ms;
}

.reportsChartsRow.dash--charts-pending .dashChart__body {
  position: relative;
  overflow: hidden;
}

.reportsChartsRow.dash--charts-pending .dashChart__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 42%,
    rgba(255, 255, 255, 0.14) 50%,
    rgba(255, 255, 255, 0.06) 58%,
    transparent 100%
  );
  transform: translateX(-120%);
  animation: dashChartShimmer 1.7s ease-in-out infinite;
}

html.routeStaffLux.routeStaffSaas .reportsTabGrid--enter .reportsChartsRow .dashChart {
  animation:
    dashChartIn 1000ms cubic-bezier(0.22, 1, 0.36, 1) both,
    dashChartAccent 1.45s ease both;
}

@keyframes dashSparkGrow {
  from {
    transform: scaleY(0);
    opacity: 0.35;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

.reportsChartsRow .dashChart {
  min-width: 0;
}

.reportsChartsRow .dashChart__body {
  height: 200px;
}

.reportsChartsRow .dashChart__body canvas {
  max-height: 192px;
}

.reportsChartsRow .reportsDashChart--wide .dashChart__body {
  height: 240px;
}

.reportsChartsRow .reportsDashChart--wide .dashChart__body canvas {
  max-height: 232px;
}

@media (min-width: 720px) {
  .reportsChartsRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .reportsChartsRow:has(.reportsChartCard--wide:only-child) {
    grid-template-columns: 1fr;
    max-width: min(100%, 960px);
  }
}

.reportsChartCard {
  padding: 12px 14px 10px;
  max-width: 100%;
  box-sizing: border-box;
}

.reportsChartCard h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-family: Inter, sans-serif;
  font-weight: 600;
  color: #1c1c1c;
}

.reportsChartCard canvas {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: 200px !important;
  max-height: 200px;
}

.reportsChartCard--wide {
  grid-column: 1 / -1;
  max-width: min(100%, 960px);
}

.reportsChartCard--wide canvas {
  height: 240px !important;
  max-height: 240px;
}

.reportsStatRow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 180px));
  gap: 10px;
  justify-content: start;
  max-width: 920px;
}

.reportsStat {
  padding: 12px 10px;
  text-align: center;
  max-width: 180px;
}

.reportsStat__v {
  font-size: 1.35rem;
  font-family: Inter, system-ui, sans-serif;
  font-weight: 600;
  color: #1c1c1c;
  line-height: 1.2;
}

.reportsStat__l {
  font-size: 12px;
  color: #a49b8f;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.reportsSectionTitle {
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 600;
  margin: 8px 0 0;
  color: #1c1c1c;
}

.reportsSectionTitle--celebrate {
  color: var(--reports-gold);
}

.reportsBirthdays .reportsSectionTitle--celebrate::before {
  content: "🎂 ";
}

.reportsTableWrap {
  border-radius: 14px;
  overflow: auto;
  max-height: min(60vh, 520px);
  border: 1px solid var(--reports-border);
}

.reportsTableWrap--audit {
  max-height: min(78vh, 760px);
}

.reportsTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.reportsTable--audit {
  width: max-content;
  min-width: 100%;
}

.reportsTable--audit thead th,
.reportsTable--audit tbody td {
  white-space: nowrap;
}

.reportsTable--audit .reportsCellPreview {
  white-space: normal;
  max-width: 200px;
  font-size: 12px;
  line-height: 1.35;
  word-break: break-word;
}

.reportsTable__row--risk td {
  background: rgba(180, 35, 24, 0.06);
}

.reportsTable__row--risk:hover td {
  background: rgba(180, 35, 24, 0.1);
}

.auditSummary {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.auditSummary__retention {
  margin: 0;
  font-size: 13px;
}

.auditSummary__kpis {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
}

.auditSummary__kpi {
  flex: 0 0 auto;
  min-width: 112px;
  max-width: 160px;
  padding: 10px 12px;
  text-align: center;
}

.auditSummary__kpi--risk {
  border-color: rgba(180, 35, 24, 0.35);
}

.auditSummary__kpiVal {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--reports-text);
  line-height: 1.2;
}

.auditSummary__kpiLbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--reports-muted);
  margin-top: 4px;
}

.auditSummary__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 900px) {
  .auditSummary__cols {
    grid-template-columns: 1fr;
  }
}

.auditSummary__list {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
}

.auditDetail__pre {
  margin: 6px 0 0;
  padding: 10px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow: auto;
}

.reportsFiltersRow--auditExtra {
  padding-top: 2px;
}

.rolesAdmin__matrixWrap {
  overflow: auto;
  max-height: min(55vh, 520px);
  border: 1px solid var(--reports-border, var(--border));
  border-radius: 14px;
}

.rolesMatrix {
  width: 100%;
  min-width: 720px;
}

.rolesMatrix__mod {
  font-weight: 600;
  white-space: nowrap;
}

.rolesMatrix__crud {
  text-align: center;
  width: 72px;
}

.rolesMatrix__extras {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.rolesMatrix__extraLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin: 0;
  cursor: pointer;
}

.rolesMatrix__quick {
  text-align: center;
  width: 88px;
  white-space: nowrap;
}

.rolesMatrix__quickBtns {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
}

.rolesActionsMenu {
  display: inline-flex;
  justify-content: flex-end;
}

.reportsTable thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: rgba(251, 249, 246, 0.98);
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--reports-border);
  color: #a49b8f;
  font-family: Inter, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}

.reportsTable tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(234, 228, 218, 0.85);
  color: #1c1c1c;
}

.reportsTable tbody tr:hover td {
  background: rgba(246, 243, 238, 0.75);
}

.reportsEmpty,
.reportsGap {
  padding: 14px 16px;
  max-width: 720px;
}

.reportsGap__title {
  font-weight: 600;
  color: #9b7337;
  margin-bottom: 8px;
  font-family: Inter, sans-serif;
}

.reportsGap__body {
  color: #7b766e;
  font-size: 13px;
  line-height: 1.5;
  margin: 0;
}

.reportsBulkActions {
  margin-top: 8px;
}

.reportsToolbarIn {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .reportsSideNav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    overflow-x: auto;
    padding-bottom: 6px;
  }
  .reportsSideNav__item {
    flex: 0 0 auto;
    white-space: nowrap;
  }
}

@media print {
  @page {
    margin: 10mm 12mm 22mm 12mm;
  }

  .sidebar,
  .reportsFiltersSticky,
  .reportsSideNav,
  .reportsSectionFab,
  .reportsSectionDrawer,
  .reportsExport,
  .btn,
  #toastHost {
    display: none !important;
  }

  .memberVoucherLedgerNoPrint {
    display: none !important;
  }

  .memberVoucherLedgerPrintFooter {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 12px 10px;
    font-size: 9pt;
    line-height: 1.35;
    color: #222;
    background: #fff;
    border-top: 1px solid #999;
    text-align: center;
    z-index: 9999;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .layout,
  .memberVoucherLedgerPrint {
    color: #000;
    background: #fff;
  }

  .memberVoucherLedgerPrint .card {
    box-shadow: none;
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .reportsShell {
    color: #000;
    background: #fff;
  }
  .reportsGlass,
  .reportsChartCard,
  .reportsKpi {
    box-shadow: none;
    border: 1px solid #ccc;
    background: #fff;
    color: #111;
  }
}

.memberVoucherLedgerPrintFooter {
  display: none;
}

/* —— System Administration (modern content layout; no second sidebar) —— */
.sysAdminHeader {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 27, 45, 0.08);
  backdrop-filter: blur(12px);
}
body.dark .sysAdminHeader {
  background: rgba(12, 12, 12, 0.5);
  border-color: rgba(255, 255, 255, 0.08);
}
.sysAdminHeader__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sysAdminTabs {
  position: sticky;
  top: 108px;
  z-index: 4;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 10px 4px 12px;
  margin-top: 12px;
}
.sysAdminTab {
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(15, 27, 45, 0.12);
  background: rgba(255, 255, 255, 0.7);
  color: #0f1b2d;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
body.dark .sysAdminTab {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
.sysAdminTab.isActive {
  border-color: rgba(30, 90, 190, 0.35);
  background: rgba(30, 90, 190, 0.12);
}
.sysAdminKpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 10px 0 16px;
}
.sysAdminKpi {
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
.sysAdminKpi__icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(30, 90, 190, 0.08);
  font-size: 16px;
}
.sysAdminKpi__value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
}
.sysAdminKpi__label {
  font-size: 12px;
  color: rgba(15, 27, 45, 0.62);
}
body.dark .sysAdminKpi__label {
  color: rgba(255, 255, 255, 0.6);
}
.sysAdminGrid {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px) {
  .sysAdminGrid {
    grid-template-columns: 1fr;
  }
  .sysAdminTabs {
    top: 128px;
  }
}

/* System Admin — quiet luxury (matches staff shell) */
html.routeStaffLux .sysAdminPage .sysAdminHeader,
body.routeStaffLux .sysAdminPage .sysAdminHeader {
  background: #fff !important;
  border: 1px solid #eae4da !important;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.04);
}
html.routeStaffLux .sysAdminPage .sysAdminHeader h2,
html.routeStaffLux .sysAdminPage .sysAdminHeader .eyebrow,
body.routeStaffLux .sysAdminPage .sysAdminHeader h2,
body.routeStaffLux .sysAdminPage .sysAdminHeader .eyebrow {
  color: #1c1c1c !important;
}
html.routeStaffLux .sysAdminPage .sysAdminHeader .muted,
body.routeStaffLux .sysAdminPage .sysAdminHeader .muted {
  color: #7b766e !important;
}
html.routeStaffLux .sysAdminPage .sysAdminTab,
body.routeStaffLux .sysAdminPage .sysAdminTab {
  background: #fbf9f6 !important;
  border: 1px solid #eae4da !important;
  color: #5f5a53 !important;
  font-weight: 500;
}
html.routeStaffLux .sysAdminPage .sysAdminTab:hover,
body.routeStaffLux .sysAdminPage .sysAdminTab:hover {
  background: rgba(243, 232, 210, 0.55) !important;
  border-color: rgba(198, 164, 106, 0.35) !important;
  color: #1c1c1c !important;
}
html.routeStaffLux .sysAdminPage .sysAdminTab.isActive,
body.routeStaffLux .sysAdminPage .sysAdminTab.isActive {
  background: #f3e8d2 !important;
  color: #9b7337 !important;
  border-color: rgba(198, 164, 106, 0.4) !important;
  box-shadow: none;
}
html.routeStaffLux .sysAdminPage .sysAdminTab.isActive:hover,
body.routeStaffLux .sysAdminPage .sysAdminTab.isActive:hover {
  background: #f6ead6 !important;
  color: #9b7337 !important;
}

html.routeStaffLux .sysAdminPage .sysAdminKpi__icon,
body.routeStaffLux .sysAdminPage .sysAdminKpi__icon {
  background: rgba(198, 164, 106, 0.16);
}
html.routeStaffLux .sysAdminPage .sysAdminKpi__label,
body.routeStaffLux .sysAdminPage .sysAdminKpi__label {
  color: #a49b8f;
}
html.routeStaffLux .sysAdminPage .sysAdminKpi,
body.routeStaffLux .sysAdminPage .sysAdminKpi {
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.04);
}

html.routeStaffLux .pageHeader {
  margin-bottom: 28px;
}

/* ========== Mobile scroll & safe areas (all routes) ========== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

html.routeStaffLux .layout,
html.routeMemberPortal .memberPremiumShell,
html.routeMemberAuth .memberAuthPage {
  width: 100%;
  max-width: 100%;
}

html.routeStaffLux .staffShell__content,
html.routeStaffLux .container.staffShellCol {
  min-width: 0;
  max-width: 100%;
}

.modalBackdrop {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}

.modalBackdrop--fullscreen {
  align-items: stretch;
  padding: 0;
}

.modalFullscreen {
  min-height: 100dvh;
}

.modalFullscreen__scroll {
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

.modal__body {
  max-height: min(72dvh, 640px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.card[style*="overflow:hidden"] > div[style*="overflow:auto"],
.card[style*="overflow:hidden"] .tableWrap,
.tableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
  .hero__inner {
    padding: 48px 18px 56px;
  }

  .container {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }

  html.routeStaffLux .staffTopbar {
    padding-top: 4px;
  }

  .memberPremiumBody {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: max(48px, env(safe-area-inset-bottom));
  }

  .memberPremiumShell .memberShell {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(26px, env(safe-area-inset-bottom));
  }
}

/* =============================================================================
   Staff hospitality premium theme (modifier on routeStaffLux).
   Revert: sidebar Appearance → "Quiet luxury (classic)" or ui_theme = lux in DB.
   ============================================================================= */

.staffThemeBackdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.staffThemeBackdrop--active {
  display: block;
}

.staffThemeBackdrop__glow {
  position: absolute;
  inset: -10% auto auto -10%;
  width: 55vw;
  height: 55vh;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85) 0%, transparent 62%);
  filter: blur(2px);
  animation: ihAmbientGlow 36s ease-in-out infinite alternate;
}

.staffThemeBackdrop__marble {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 52% at 100% 88%, rgba(27, 34, 51, 0.72) 0%, transparent 58%),
    radial-gradient(ellipse 48% 42% at 92% 72%, rgba(42, 31, 26, 0.52) 0%, transparent 52%),
    radial-gradient(ellipse 40% 36% at 88% 95%, rgba(74, 58, 44, 0.42) 0%, transparent 50%),
    linear-gradient(148deg, #f7f2ea 0%, #e9ddd0 32%, #f7f2ea 55%, #e9ddd0 78%, #cdb7a1 100%);
}

.staffThemeBackdrop__veins {
  position: absolute;
  inset: 0;
  opacity: 0.65;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 800' fill='none'%3E%3Cpath d='M920 760 C980 620 940 480 860 360 S720 180 780 80' stroke='rgba(184%2C155%2C94%2C0.42)' stroke-width='1.2'/%3E%3Cpath d='M1100 720 C1040 560 1080 420 1000 300 S860 160 920 40' stroke='rgba(184%2C155%2C94%2C0.34)' stroke-width='0.9'/%3E%3Cpath d='M760 800 C820 640 800 500 720 380' stroke='rgba(184%2C155%2C94%2C0.26)' stroke-width='0.8'/%3E%3Cpath d='M1150 520 C1080 400 1120 280 1020 200' stroke='rgba(184%2C155%2C94%2C0.22)' stroke-width='0.7'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: right bottom;
  background-repeat: no-repeat;
  mix-blend-mode: multiply;
  animation: ihGoldVeinShimmer 28s ease-in-out infinite alternate;
}

.staffThemeBackdrop__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(100px, 16vh, 160px);
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.4) 30%, #0f172a 58%, #111827 80%, #1e293b 100%);
  clip-path: ellipse(128% 100% at 50% 100%);
  border-top: 1px solid #b89b5e;
  box-shadow: 0 -16px 56px rgba(15, 23, 42, 0.18);
}

html.routeStaffLux[data-staff-theme="hospitality"],
html.routeStaffLux.routeStaffHospitality {
  --ql-bg: #f7f2ea;
  --ql-sidebar: rgba(255, 252, 248, 0.78);
  --ql-card: rgba(255, 255, 255, 0.9);
  --ql-border: rgba(205, 183, 161, 0.5);
  --ql-text: #1a1814;
  --ql-text-secondary: #6e6458;
  --ql-muted-label: #9a8f82;
  --ql-gold: #b89b5e;
  --ql-gold-hover: #c9ad72;
  --ql-nav-active-bg: rgba(184, 155, 94, 0.18);
  --ql-nav-active-text: #8b735d;
  --ql-nav-inactive: #5c554c;
  --ql-shadow-card: 0 20px 60px rgba(0, 0, 0, 0.08);
  --lux-bg: var(--ql-bg);
  --lux-bg-mid: #ebe0d2;
  --lux-elev: var(--ql-card);
  --lux-gold: var(--ql-gold);
  --lux-gold-mid: #8b735d;
  --lux-gold-light: var(--ql-gold-hover);
  --lux-border: var(--ql-border);
  --gold: var(--ql-gold);
  --gold-2: var(--ql-gold-hover);
  --border: var(--ql-border);
  --shadow: var(--ql-shadow-card);
  --cream: var(--ql-bg);
  --cream-2: var(--ql-sidebar);
}

html.routeStaffLux[data-staff-theme="hospitality"] body,
html.routeStaffLux.routeStaffHospitality body {
  background: transparent !important;
  min-height: 100vh;
}

html.routeStaffLux[data-staff-theme="hospitality"] .app,
html.routeStaffLux.routeStaffHospitality .app {
  background: transparent;
}

@keyframes ihAmbientGlow {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.96;
    transform: scale(1.01);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ihGoldVeinShimmer {
  0% {
    opacity: 0.42;
  }
  50% {
    opacity: 0.58;
  }
  100% {
    opacity: 0.48;
  }
}

html.routeStaffLux[data-staff-theme="hospitality"] .app,
html.routeStaffLux[data-staff-theme="hospitality"] .layout,
html.routeStaffLux[data-staff-theme="hospitality"] .staffShell,
html.routeStaffLux.routeStaffHospitality .app,
html.routeStaffLux.routeStaffHospitality .layout,
html.routeStaffLux.routeStaffHospitality .staffShell {
  position: relative;
  z-index: 1;
}

html.routeStaffLux[data-staff-theme="hospitality"] .container.staffShellCol,
html.routeStaffLux.routeStaffHospitality .container.staffShellCol {
  background: transparent;
}

html.routeStaffLux.routeStaffHospitality .staffHospitalityWave {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(88px, 14vh, 140px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.35) 28%, #0f172a 55%, #111827 78%, #1e293b 100%);
  clip-path: ellipse(128% 100% at 50% 100%);
  border-top: 1px solid #b89b5e;
  box-shadow: 0 -12px 48px rgba(15, 23, 42, 0.12);
}

html.routeStaffLux.routeStaffHospitality .sidebar {
  background: var(--ql-sidebar);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-right: 1px solid rgba(184, 155, 94, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

html.routeStaffLux.routeStaffHospitality .sidebarProgram {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(184, 155, 94, 0.25) !important;
  backdrop-filter: blur(8px);
}

html.routeStaffLux.routeStaffHospitality .sidebarTheme .input {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}

html.routeStaffLux.routeStaffHospitality .staffTopbar {
  border-bottom-color: rgba(184, 155, 94, 0.28);
  backdrop-filter: blur(6px);
}

html.routeStaffLux.routeStaffHospitality .staffTopbar__search,
html.routeStaffLux.routeStaffHospitality .staffTopbar__iconBtn {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
}

html.routeStaffLux.routeStaffHospitality .card,
html.routeStaffLux.routeStaffHospitality .kpiCard,
html.routeStaffLux.routeStaffHospitality .sysAdminPage .sysAdminKpi {
  background: var(--ql-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-color: rgba(184, 155, 94, 0.22);
  box-shadow: var(--ql-shadow-card);
}

html.routeStaffLux.routeStaffHospitality .navItem.active {
  background: var(--ql-nav-active-bg);
  color: var(--ql-nav-active-text);
  border-color: rgba(184, 155, 94, 0.35);
}

html.routeStaffLux.routeStaffHospitality .btn--primary {
  background: linear-gradient(135deg, #b89b5e 0%, #8b735d 100%);
  border-color: rgba(139, 115, 93, 0.5);
  color: #fff;
}

html.routeStaffLux.routeStaffHospitality .btn--primary:hover {
  background: linear-gradient(135deg, #c9ad72 0%, #9a8068 100%);
}

html.routeStaffLux.routeStaffHospitality .modal__panel {
  backdrop-filter: blur(12px);
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.14);
}

@media (prefers-reduced-motion: reduce) {
  .staffThemeBackdrop__glow,
  .staffThemeBackdrop__veins {
    animation: none;
  }
}

/* =============================================================================
   Staff Luxury Bright — premium corporate UI (Arial, ivory canvas, gold accents).
   Revert: sidebar Appearance → another theme, or ui_theme = lux in DB.
   ============================================================================= */

html.routeStaffLux.routeStaffLuxuryBright,
html.routeStaffLux[data-staff-theme="luxury-bright"] {
  --bg-primary: #ffffff;
  --bg-secondary: #fdfcf7;
  --text-primary: #333333;
  --text-muted: #999999;
  --accent-gold: #d4af37;
  --accent-gold-hover: #aa8b2c;
  --border-light: #cccccc;

  --ql-bg: var(--bg-secondary);
  --ql-sidebar: var(--bg-primary);
  --ql-card: var(--bg-primary);
  --ql-border: var(--border-light);
  --ql-text: var(--text-primary);
  --ql-text-secondary: var(--text-muted);
  --ql-muted-label: var(--text-muted);
  --ql-gold: var(--accent-gold);
  --ql-gold-hover: var(--accent-gold-hover);
  --ql-nav-active-bg: rgba(212, 175, 55, 0.14);
  --ql-nav-active-text: #7a6420;
  --ql-nav-inactive: #666666;
  --ql-shadow-card: 0 2px 14px rgba(51, 51, 51, 0.07);
  --ql-radius-lg: 12px;
  --ql-radius-btn: 8px;
  --ql-font: Arial, sans-serif;
  --ql-chart-beige: #e8dfc8;
  --ql-chart-bronze: #d4af37;

  --lux-bg: var(--bg-secondary);
  --lux-bg-mid: #f8f6f0;
  --lux-elev: var(--bg-primary);
  --lux-gold: var(--accent-gold);
  --lux-gold-mid: var(--accent-gold-hover);
  --lux-gold-light: #e4c65a;
  --lux-text: var(--text-primary);
  --lux-muted: var(--text-muted);
  --lux-muted2: var(--text-muted);
  --lux-border: var(--border-light);
  --lux-input: var(--bg-primary);
  --tw-accent: var(--accent-gold);
  --tw-accent-strong: var(--accent-gold-hover);
  --tw-surface: var(--bg-primary);
  --tw-font: Arial, sans-serif;
  --navy: var(--text-primary);
  --navy-2: var(--text-muted);
  --cream: var(--bg-secondary);
  --cream-2: var(--bg-primary);
  --gold: var(--accent-gold);
  --gold-2: var(--accent-gold-hover);
  --muted: var(--text-muted);
  --border: var(--border-light);
  --shadow: var(--ql-shadow-card);
  --radius: var(--ql-radius-lg);
  --font-sans: Arial, sans-serif;
  --font-serif: Arial, sans-serif;
}

html.routeStaffLux.routeStaffLuxuryBright,
html.routeStaffLux.routeStaffLuxuryBright body,
html.routeStaffLux[data-staff-theme="luxury-bright"] body {
  font-family: Arial, sans-serif;
  color: var(--text-primary);
  background: var(--bg-secondary);
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-font-smoothing: antialiased;
}

html.routeStaffLux.routeStaffLuxuryBright .app,
html.routeStaffLux.routeStaffLuxuryBright .layout,
html.routeStaffLux.routeStaffLuxuryBright .staffShell,
html.routeStaffLux.routeStaffLuxuryBright .staffShell__content,
html.routeStaffLux.routeStaffLuxuryBright .container {
  font-family: Arial, sans-serif;
}

html.routeStaffLux.routeStaffLuxuryBright .layout {
  min-height: auto;
  align-items: stretch;
}

html.routeStaffLux.routeStaffLuxuryBright .staffShell {
  min-height: auto;
}

html.routeStaffLux.routeStaffLuxuryBright .h1,
html.routeStaffLux.routeStaffLuxuryBright .pageHeader h2,
html.routeStaffLux.routeStaffLuxuryBright .brand__name {
  font-family: Arial, sans-serif;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: 0;
}

html.routeStaffLux.routeStaffLuxuryBright .eyebrow,
html.routeStaffLux.routeStaffLuxuryBright .staffTopbar__kicker {
  font-family: Arial, sans-serif;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.08em;
}

html.routeStaffLux.routeStaffLuxuryBright .lead,
html.routeStaffLux.routeStaffLuxuryBright .muted,
html.routeStaffLux.routeStaffLuxuryBright .pageHeader p.lead {
  font-family: Arial, sans-serif;
  font-weight: 400;
  color: var(--text-muted);
}

html.routeStaffLux.routeStaffLuxuryBright .sidebar {
  background: var(--bg-primary);
  border-right: 1px solid var(--border-light);
  box-shadow: 2px 0 12px rgba(51, 51, 51, 0.04);
}

html.routeStaffLux.routeStaffLuxuryBright .sidebarProgram {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-light) !important;
}

html.routeStaffLux.routeStaffLuxuryBright .sidebarFooter {
  border-top-color: var(--border-light);
}

html.routeStaffLux.routeStaffLuxuryBright .brand__tag {
  font-family: Arial, sans-serif;
  color: var(--accent-gold);
  font-weight: 700;
  letter-spacing: 0.12em;
}

html.routeStaffLux.routeStaffLuxuryBright .navItem {
  font-family: Arial, sans-serif;
  font-weight: 400;
  color: var(--text-primary);
  border: 1px solid transparent;
  border-radius: 8px;
}

html.routeStaffLux.routeStaffLuxuryBright .navItem:hover {
  background: rgba(212, 175, 55, 0.1);
  color: var(--text-primary);
  border-color: var(--border-light);
}

html.routeStaffLux.routeStaffLuxuryBright .navItem.active {
  background: var(--accent-gold);
  color: #ffffff;
  font-weight: 600;
  border-color: var(--accent-gold);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
}

html.routeStaffLux.routeStaffLuxuryBright .staffTopbar {
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-primary);
}

html.routeStaffLux.routeStaffLuxuryBright .staffTopbar__search,
html.routeStaffLux.routeStaffLuxuryBright .staffTopbar__iconBtn,
html.routeStaffLux.routeStaffLuxuryBright .staffTopbar__date {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  font-family: Arial, sans-serif;
}

html.routeStaffLux.routeStaffLuxuryBright .staffTopbar__search:focus,
html.routeStaffLux.routeStaffLuxuryBright .staffTopbar__date:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.25);
}

html.routeStaffLux.routeStaffLuxuryBright .card,
html.routeStaffLux.routeStaffLuxuryBright .kpiCard,
html.routeStaffLux.routeStaffLuxuryBright .sysAdminPage .sysAdminKpi,
html.routeStaffLux.routeStaffLuxuryBright .sysAdminPage .sysAdminTabPanel {
  background: var(--bg-primary);
  border: 1px solid var(--accent-gold);
  border-radius: var(--ql-radius-lg);
  box-shadow: var(--ql-shadow-card);
  color: var(--text-primary);
}

html.routeStaffLux.routeStaffLuxuryBright .btn {
  font-family: Arial, sans-serif;
  font-weight: 600;
  border-radius: var(--ql-radius-btn);
  border: 1px solid var(--border-light);
  background: var(--bg-primary);
  color: var(--text-primary);
}

html.routeStaffLux.routeStaffLuxuryBright .btn:hover {
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

html.routeStaffLux.routeStaffLuxuryBright .btn--primary {
  background: var(--accent-gold);
  border-color: var(--accent-gold);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.35);
}

html.routeStaffLux.routeStaffLuxuryBright .btn--primary:hover {
  background: var(--accent-gold-hover);
  border-color: var(--accent-gold-hover);
  filter: none;
}

html.routeStaffLux.routeStaffLuxuryBright .btn--ghost:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: var(--accent-gold);
  color: var(--text-primary);
}

html.routeStaffLux.routeStaffLuxuryBright .input,
html.routeStaffLux.routeStaffLuxuryBright select,
html.routeStaffLux.routeStaffLuxuryBright textarea {
  font-family: Arial, sans-serif;
  font-weight: 400;
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  border-radius: 8px;
}

html.routeStaffLux.routeStaffLuxuryBright .input:focus,
html.routeStaffLux.routeStaffLuxuryBright select:focus,
html.routeStaffLux.routeStaffLuxuryBright textarea:focus {
  border-color: var(--accent-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22);
  outline: none;
}

html.routeStaffLux.routeStaffLuxuryBright .table th {
  font-family: Arial, sans-serif;
  font-weight: 600;
  color: var(--text-primary);
  border-bottom: 1px solid var(--accent-gold);
}

html.routeStaffLux.routeStaffLuxuryBright .table td {
  font-family: Arial, sans-serif;
  font-weight: 400;
  color: var(--text-primary);
  border-bottom: 1px solid var(--border-light);
}

html.routeStaffLux.routeStaffLuxuryBright .tableWrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html.routeStaffLux.routeStaffLuxuryBright .modal__panel {
  background: var(--bg-primary);
  border: 1px solid var(--accent-gold);
  font-family: Arial, sans-serif;
}

html.routeStaffLux.routeStaffLuxuryBright .sysAdminPage .sysAdminTab {
  font-family: Arial, sans-serif;
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
}

html.routeStaffLux.routeStaffLuxuryBright .sysAdminPage .sysAdminTab.isActive,
html.routeStaffLux.routeStaffLuxuryBright .sysAdminPage .sysAdminTab.isActive:hover {
  background: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
  color: #ffffff !important;
}

html.routeStaffLux.routeStaffLuxuryBright .sysAdminPage .sysAdminTab:hover {
  border-color: var(--accent-gold) !important;
  background: rgba(212, 175, 55, 0.1) !important;
}

html.routeStaffLux.routeStaffLuxuryBright .sysAdminPage .sysAdminHeader h2,
html.routeStaffLux.routeStaffLuxuryBright .sysAdminPage .sysAdminHeader .eyebrow {
  font-family: Arial, sans-serif;
  color: var(--text-primary) !important;
}

html.routeStaffLux.routeStaffLuxuryBright .divider {
  background: linear-gradient(90deg, transparent, var(--accent-gold) 50%, transparent);
}

html.routeStaffLux.routeStaffLuxuryBright a:not(.btn):not(.navItem) {
  color: var(--accent-gold-hover);
  font-weight: 600;
}

html.routeStaffLux.routeStaffLuxuryBright a:not(.btn):not(.navItem):hover {
  color: var(--accent-gold);
}

/* =============================================================================
   Staff SaaS analytics — enterprise CRM/ERP dashboard (light + dark variants).
   ============================================================================= */

html.routeStaffLux.routeStaffSaas,
html.routeStaffLux[data-staff-theme="saas"],
html.routeStaffLux[data-staff-theme="saas-dark"] {
  --saas-canvas: #f5f7fa;
  --saas-surface: #ffffff;
  --saas-sidebar: #1f2937;
  --saas-sidebar-deep: #111827;
  --saas-sidebar-text: #e5e7eb;
  --saas-sidebar-muted: #9ca3af;
  --saas-text: #111827;
  --saas-text-muted: #6b7280;
  --saas-text-soft: #9ca3af;
  --saas-accent: #f59e0b;
  --saas-accent-strong: #ff8a00;
  --saas-accent-blue: #2563eb;
  --saas-border: #e5e7eb;
  --saas-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
  --saas-shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.1);
  --saas-radius: 16px;
  --saas-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ql-bg: var(--saas-canvas);
  --ql-sidebar: var(--saas-sidebar);
  --ql-card: var(--saas-surface);
  --ql-border: var(--saas-border);
  --ql-text: var(--saas-text);
  --ql-text-secondary: var(--saas-text-muted);
  --ql-muted-label: var(--saas-text-soft);
  --ql-gold: var(--saas-accent);
  --ql-gold-hover: var(--saas-accent-strong);
  --ql-nav-active-bg: rgba(245, 158, 11, 0.18);
  --ql-nav-active-text: #ffffff;
  --ql-nav-inactive: var(--saas-sidebar-muted);
  --ql-shadow-card: var(--saas-shadow);
  --ql-radius-lg: var(--saas-radius);
  --ql-radius-btn: 10px;
  --ql-font: var(--saas-font);
  --gold: var(--saas-accent);
  --gold-2: var(--saas-accent-strong);
  --border: var(--saas-border);
  --cream: var(--saas-canvas);
  --cream-2: var(--saas-surface);
  --font-sans: var(--saas-font);
  --font-serif: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark,
html.routeStaffLux[data-staff-theme="saas-dark"] {
  --saas-canvas: #0f172a;
  --saas-surface: #1e293b;
  --saas-sidebar: #111827;
  --saas-sidebar-deep: #030712;
  --saas-sidebar-text: #f3f4f6;
  --saas-sidebar-muted: #9ca3af;
  --saas-text: #f9fafb;
  --saas-text-muted: #cbd5e1;
  --saas-text-soft: #94a3b8;
  --saas-border: #334155;
  --saas-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  --saas-shadow-hover: 0 12px 36px rgba(0, 0, 0, 0.45);
}

html.routeStaffLux.routeStaffSaas body,
html.routeStaffLux.routeStaffSaasDark body {
  font-family: var(--saas-font);
  font-weight: 400;
  color: var(--saas-text);
  background: var(--saas-canvas);
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas {
  display: block;
  min-height: 100vh;
  position: relative;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas .sidebar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 260px;
  z-index: 50;
  overflow: hidden;
  background: linear-gradient(180deg, var(--saas-sidebar) 0%, var(--saas-sidebar-deep) 100%);
  border-right: none;
  color: var(--saas-sidebar-text);
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  transition: width 0.28s ease, transform 0.28s ease;
}

html[dir="rtl"].routeStaffSaas .layout.layout--saas .sidebar {
  left: auto;
  right: 0;
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .layout.layout--saas .sidebar {
  width: 76px;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas .sidebar__inner {
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  padding: 16px 14px 24px;
  gap: 8px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

html.routeStaffLux.routeStaffSaas .saasSidebarToggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0 0 8px 4px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--saas-sidebar-text);
  cursor: pointer;
  transition: background 0.22s ease, border-color 0.22s ease;
}

html.routeStaffLux.routeStaffSaas .saasSidebarToggle:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: rgba(245, 158, 11, 0.45);
}

html.routeStaffLux.routeStaffSaas .saasSidebarToggle__bars {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

html.routeStaffLux.routeStaffSaas .sidebarBrand__logo {
  background: #fff;
  border-radius: 10px;
}

html.routeStaffLux.routeStaffSaas .brand__name {
  font-family: var(--saas-font);
  font-weight: 700;
  font-size: 17px;
  color: #ffffff;
  letter-spacing: -0.02em;
}

html.routeStaffLux.routeStaffSaas .brand__tag {
  color: var(--saas-accent);
  font-weight: 600;
  letter-spacing: 0.14em;
}

html.routeStaffLux.routeStaffSaas .sidebarBrand__user,
html.routeStaffLux.routeStaffSaas .sidebar .muted {
  color: var(--saas-sidebar-muted) !important;
}

html.routeStaffLux.routeStaffSaas .sidebarProgram {
  margin: 0 0 12px !important;
  padding: 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(0, 0, 0, 0.2) !important;
}

html.routeStaffLux.routeStaffSaas .sidebarProgram .eyebrow {
  color: var(--saas-sidebar-muted) !important;
}

html.routeStaffLux.routeStaffSaas .sidebarProgram .input {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: #fff;
}

html.routeStaffLux.routeStaffSaas .navItem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 4px;
  border-radius: 10px;
  color: var(--saas-sidebar-text);
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas:not(.layout--reportsFocus) > .sidebar .navItem__icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.85;
}

html.routeStaffLux.routeStaffSaas .reportsSectionSidebar .navItem__icon {
  display: inline-flex;
  flex-shrink: 0;
  opacity: 0.85;
}

html.routeStaffLux.routeStaffSaas .navItem:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateX(2px);
}

html.routeStaffLux.routeStaffSaas .navItem.active {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.35), rgba(255, 138, 0, 0.2));
  border-color: rgba(245, 158, 11, 0.5);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--saas-accent);
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .navItem__label,
html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .brand__name,
html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .brand__tag,
html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarBrand__user,
html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarProgram .eyebrow,
html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarProgram select,
html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarFooter .eyebrow,
html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarFooter p.muted {
  display: none;
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .navItem {
  justify-content: center;
  padding: 12px;
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarBrand {
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarBrand__main {
  display: none;
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarProgram {
  display: none;
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .navItem__dot {
  display: none;
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarFooter .sidebarTheme {
  display: none;
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .saasSidebarToggle {
  margin-left: auto;
  margin-right: auto;
}

html.routeStaffLux.routeStaffSaas .sidebarSignOut--saas {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: flex-start;
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarSignOut--saas {
  justify-content: center;
  padding: 12px;
  min-height: 44px;
}

@media (min-width: 981px) {
  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .layout.layout--saas .sidebar {
    overflow: visible;
    z-index: 100;
  }

  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebar__inner {
    overflow-x: visible;
    overflow-y: auto;
  }

  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .navItem[data-nav-label],
  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarSignOut--saas[data-nav-label] {
    position: relative;
    overflow: visible;
  }

  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .navItem[data-nav-label]::after,
  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarSignOut--saas[data-nav-label]::after {
    content: attr(data-nav-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 8px 12px;
    border-radius: 8px;
    background: #1e293b;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 300;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
    transition: opacity 0.15s ease, visibility 0.15s ease;
  }

  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .navItem[data-nav-label]:hover::after,
  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .navItem[data-nav-label]:focus-visible::after,
  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarSignOut--saas[data-nav-label]:hover::after,
  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarSignOut--saas[data-nav-label]:focus-visible::after {
    opacity: 1;
    visibility: visible;
  }

  html[dir="rtl"].routeStaffLux.routeStaffSaas.saasSidebarCollapsed .navItem[data-nav-label]::after,
  html[dir="rtl"].routeStaffLux.routeStaffSaas.saasSidebarCollapsed .sidebarSignOut--saas[data-nav-label]::after {
    left: auto;
    right: calc(100% + 10px);
  }
}

html.routeStaffLux.routeStaffSaas .sidebarFooter {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 16px;
}

html.routeStaffLux.routeStaffSaas .sidebarTheme .input {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #e5e7eb !important;
}

html.routeStaffLux.routeStaffSaas .sidebarFooter .btn--ghost {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  color: #111827;
  font-weight: 600;
}

html.routeStaffLux.routeStaffSaas .sidebarFooter .btn--ghost:hover {
  background: #f9fafb;
  border-color: var(--saas-accent);
  color: #111827;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas .staffShellCol {
  margin-left: 260px;
  max-width: none;
  width: auto;
  padding: 0 28px 48px;
  transition: margin-left 0.28s ease;
  box-sizing: border-box;
}

html[dir="rtl"].routeStaffSaas .layout.layout--saas .staffShellCol {
  margin-left: 0;
  margin-right: 260px;
}

html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .layout.layout--saas .staffShellCol {
  margin-left: 76px;
}

html.routeStaffLux.routeStaffSaas .staffShell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

html.routeStaffLux.routeStaffSaas .staffTopbar {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: 0 -28px 20px;
  padding: 16px 28px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--saas-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: background 0.25s ease, box-shadow 0.25s ease;
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .staffTopbar {
  background: rgba(30, 41, 59, 0.92);
  border-bottom-color: var(--saas-border);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

html.routeStaffLux.routeStaffSaas .staffTopbar__kicker {
  color: var(--saas-text-muted);
  font-weight: 600;
  letter-spacing: 0.06em;
}

html.routeStaffLux.routeStaffSaas .staffTopbar__search {
  border-radius: 10px;
  border: 1px solid var(--saas-border);
  background: var(--saas-surface);
  max-width: 420px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

html.routeStaffLux.routeStaffSaas .staffTopbar__search:focus {
  border-color: var(--saas-accent-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

html.routeStaffLux.routeStaffSaas .staffTopbar__iconBtn {
  border-radius: 10px;
  border: 1px solid var(--saas-border);
  background: var(--saas-surface);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}

html.routeStaffLux.routeStaffSaas .staffTopbar__iconBtn:hover {
  border-color: var(--saas-accent);
  color: var(--saas-accent-strong);
  background: rgba(245, 158, 11, 0.08);
}

html.routeStaffLux.routeStaffSaas .staffTopbar__avatar {
  background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-strong));
  color: #fff;
  border: none;
  font-weight: 700;
}

html.routeStaffLux.routeStaffSaas .staffShell__content {
  padding-top: 4px;
}

html.routeStaffLux.routeStaffSaas .pageHeader h2,
html.routeStaffLux.routeStaffSaas .h1 {
  font-family: var(--saas-font);
  font-weight: 700;
  color: var(--saas-text);
  letter-spacing: -0.02em;
}

html.routeStaffLux.routeStaffSaas .eyebrow {
  color: var(--saas-text-soft);
  font-weight: 600;
}

html.routeStaffLux.routeStaffSaas .lead,
html.routeStaffLux.routeStaffSaas .muted {
  color: var(--saas-text-muted);
}

html.routeStaffLux.routeStaffSaas .card,
html.routeStaffLux.routeStaffSaas .kpiCard,
html.routeStaffLux.routeStaffSaas .sysAdminPage .sysAdminKpi {
  background: var(--saas-surface);
  border: 1px solid var(--saas-border);
  border-radius: var(--saas-radius);
  box-shadow: var(--saas-shadow);
  color: var(--saas-text);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

html.routeStaffLux.routeStaffSaas .card:hover,
html.routeStaffLux.routeStaffSaas .kpiCard:hover,
html.routeStaffLux.routeStaffSaas .sysAdminPage .sysAdminKpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--saas-shadow-hover);
  border-color: rgba(245, 158, 11, 0.35);
}

html.routeStaffLux.routeStaffSaas .sysAdminKpi__value,
html.routeStaffLux.routeStaffSaas .kpiCard strong {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--saas-text);
  line-height: 1.15;
}

html.routeStaffLux.routeStaffSaas .sysAdminKpi__label,
html.routeStaffLux.routeStaffSaas .sysAdminKpi__icon {
  color: var(--saas-text-muted);
}

html.routeStaffLux.routeStaffSaas .sysAdminKpi__icon {
  background: rgba(245, 158, 11, 0.12);
  border-radius: 12px;
}

html.routeStaffLux.routeStaffSaas .btn {
  font-family: var(--saas-font);
  font-weight: 600;
  border-radius: var(--ql-radius-btn);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.15s ease;
}

html.routeStaffLux.routeStaffSaas .btn--primary {
  background: linear-gradient(135deg, var(--saas-accent) 0%, var(--saas-accent-strong) 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

html.routeStaffLux.routeStaffSaas .btn--primary:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}

html.routeStaffLux.routeStaffSaas .btn--ghost {
  background: var(--saas-surface);
  border: 1px solid var(--saas-border);
  color: var(--saas-text);
}

html.routeStaffLux.routeStaffSaas .btn--ghost:hover {
  border-color: var(--saas-accent-blue);
  color: var(--saas-accent-blue);
  background: rgba(37, 99, 235, 0.06);
}

html.routeStaffLux.routeStaffSaas .input,
html.routeStaffLux.routeStaffSaas select,
html.routeStaffLux.routeStaffSaas textarea {
  font-family: var(--saas-font);
  background: var(--saas-surface);
  border: 1px solid var(--saas-border);
  color: var(--saas-text);
  border-radius: 10px;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

html.routeStaffLux.routeStaffSaas .input:focus,
html.routeStaffLux.routeStaffSaas select:focus,
html.routeStaffLux.routeStaffSaas textarea:focus {
  border-color: var(--saas-accent-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
  outline: none;
}

html.routeStaffLux.routeStaffSaas .table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--saas-surface);
  color: var(--saas-text);
  font-weight: 600;
  border-bottom: 2px solid var(--saas-border);
  box-shadow: 0 1px 0 var(--saas-border);
}

html.routeStaffLux.routeStaffSaas .table tbody tr {
  transition: background 0.18s ease;
}

html.routeStaffLux.routeStaffSaas .table tbody tr:hover {
  background: rgba(245, 158, 11, 0.06);
}

html.routeStaffLux.routeStaffSaas .table td {
  color: var(--saas-text);
  border-bottom: 1px solid var(--saas-border);
}

html.routeStaffLux.routeStaffSaas .tableWrap {
  border-radius: var(--saas-radius);
  border: 1px solid var(--saas-border);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

html.routeStaffLux.routeStaffSaas .sysAdminPage .sysAdminTab {
  font-family: var(--saas-font) !important;
  border-radius: 10px !important;
  transition: background 0.22s ease, color 0.22s ease !important;
}

html.routeStaffLux.routeStaffSaas .sysAdminPage .sysAdminTab.isActive {
  background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-strong)) !important;
  color: #fff !important;
  border: none !important;
}

html.routeStaffLux.routeStaffSaas .sysAdminPage .sysAdminTab:hover:not(.isActive) {
  background: rgba(37, 99, 235, 0.08) !important;
  color: var(--saas-accent-blue) !important;
}

html.routeStaffLux.routeStaffSaas .modal__panel {
  border-radius: var(--saas-radius);
  border: 1px solid var(--saas-border);
  box-shadow: var(--saas-shadow-hover);
}

html.routeStaffLux.routeStaffSaas .reportsMenuBtn {
  background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-strong));
  color: #fff;
  border: none;
  border-radius: 10px;
}

/* SaaS — Reports page tokens & glass panels (match dashboard theme) */
html.routeStaffLux.routeStaffSaas .reportsShell {
  --reports-gold: var(--saas-accent);
  --reports-bg: var(--saas-canvas);
  --reports-panel: var(--saas-surface);
  --reports-border: var(--saas-border);
  --reports-text: var(--saas-text);
  --reports-muted: var(--saas-text-muted);
  font-family: var(--saas-font);
  color: var(--saas-text);
}

html.routeStaffLux.routeStaffSaas .reportsHero {
  border-bottom-color: var(--saas-border);
}

html.routeStaffLux.routeStaffSaas .reportsHero__title {
  color: var(--saas-text);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsHero__eyebrow {
  color: var(--saas-accent);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsHero__lead {
  color: var(--saas-text-muted);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsFiltersSticky {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: var(--saas-border);
  backdrop-filter: blur(10px);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsFiltersSticky {
  background: rgba(30, 41, 59, 0.96);
}

html.routeStaffLux.routeStaffSaas .reportsShell:not(.reportsShell--semantic) .reportsGlass,
html.routeStaffLux.routeStaffSaas .reportsShell:not(.reportsShell--semantic) .reportsChartCard,
html.routeStaffLux.routeStaffSaas .reportsShell:not(.reportsShell--semantic) .reportsKpi,
html.routeStaffLux.routeStaffSaas .reportsShell:not(.reportsShell--semantic) .reportsStat,
html.routeStaffLux.routeStaffSaas .reportsShell:not(.reportsShell--semantic) .reportsGap {
  background: var(--saas-surface);
  border: 1px solid var(--saas-border);
  border-radius: 14px;
  box-shadow: var(--saas-shadow);
  color: var(--saas-text);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

html.routeStaffLux.routeStaffSaas .reportsShell--semantic .reportsGlass,
html.routeStaffLux.routeStaffSaas .reportsShell--semantic .reportsChartCard,
html.routeStaffLux.routeStaffSaas .reportsShell--semantic .reportsKpi,
html.routeStaffLux.routeStaffSaas .reportsShell--semantic .reportsStat,
html.routeStaffLux.routeStaffSaas .reportsShell--semantic .reportsGap {
  background: #ffffff;
  color: var(--saas-text);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* SaaS analytics dark — all report panels on dark canvas with light ink */
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell.reportsShell--semantic {
  color: var(--saas-text);
  --reports-text: var(--saas-text);
  --reports-muted: var(--saas-text-muted);
  --reports-border: var(--saas-border);
  --reports-panel: var(--saas-surface);
  --reports-on-panel: var(--saas-text);
  --reports-on-panel-muted: var(--saas-text-muted);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsHero {
  border-bottom-color: var(--saas-border);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsHero__title {
  color: var(--saas-text);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsHero__eyebrow {
  color: var(--saas-accent);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashStat,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashChart,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsDashChart,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsGlass,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsChartCard,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsKpi,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsStat,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsGap,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .auditSummary__kpi {
  background: var(--saas-surface);
  border-color: var(--saas-border);
  color: var(--saas-text);
  box-shadow: var(--saas-shadow);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsChartsRow .dashChart {
  background: var(--saas-surface);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashChart__head {
  border-bottom-color: var(--saas-border);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashStat__label,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashStat__hint,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashChart__sub,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsKpi__label,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsKpi__sub,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsStat__l,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsSemanticLegend,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsGap__body,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsField label,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .auditSummary__kpiLbl,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .auditSummary__list,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsEmpty,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashChart__body,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashChart__body .dashChart__fallback,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashChart__body .dashEmpty,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashEmpty,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .muted {
  color: var(--saas-text-muted);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashStat__value,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashChart__title,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsKpi__value,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsStat__v,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsSectionTitle,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsChartCard h3,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsGap__title,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .auditSummary__kpiVal,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsTable td,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsBanner,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .auditSummary__retention {
  color: var(--saas-text);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsSectionTitle--celebrate,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsGap__title {
  color: var(--saas-accent-strong);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashDelta.isFlat {
  color: var(--saas-text-soft);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsTableWrap {
  border-color: var(--saas-border);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsTable th {
  background: var(--saas-surface);
  color: var(--saas-text);
  border-bottom: 2px solid var(--saas-border);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsTable tbody td {
  color: var(--saas-text);
  border-bottom-color: var(--saas-border);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsTable tbody tr:hover td {
  background: rgba(245, 158, 11, 0.06);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsTable__row--risk td {
  background: rgba(244, 63, 94, 0.08);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsInput,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsSelect {
  background: var(--saas-surface);
  border-color: var(--saas-border);
  color: var(--saas-text);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsGlass:hover,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .reportsKpi:hover,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashStat:hover,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .reportsShell--semantic .dashChart:hover {
  border-color: rgba(245, 158, 11, 0.35);
  box-shadow: var(--saas-shadow-hover);
}

html.routeStaffLux.routeStaffSaas .reportsKpi {
  max-width: 220px;
}

html.routeStaffLux.routeStaffSaas .reportsStat {
  max-width: 180px;
}

html.routeStaffLux.routeStaffSaas .reportsGlass:hover,
html.routeStaffLux.routeStaffSaas .reportsKpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--saas-shadow-hover);
  border-color: rgba(245, 158, 11, 0.35);
}

html.routeStaffLux.routeStaffSaas .reportsChartCard h3,
html.routeStaffLux.routeStaffSaas .reportsSectionTitle {
  color: var(--saas-text);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsSectionTitle--celebrate {
  color: var(--saas-accent-strong);
}

html.routeStaffLux.routeStaffSaas .reportsKpi__label,
html.routeStaffLux.routeStaffSaas .reportsStat__l {
  color: var(--saas-text-muted);
}

html.routeStaffLux.routeStaffSaas .reportsKpi__value,
html.routeStaffLux.routeStaffSaas .reportsStat__v {
  color: var(--saas-text);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsKpi__sub {
  color: var(--saas-text-muted);
}

html.routeStaffLux.routeStaffSaas .reportsMiniTrend__bar {
  background: linear-gradient(180deg, var(--saas-accent), rgba(245, 158, 11, 0.25));
}

/* SaaS — dashboard overview */
html.routeStaffLux.routeStaffSaas .dashToolbar {
  border-bottom-color: var(--saas-border);
}

html.routeStaffLux.routeStaffSaas .dashToolbar__title,
html.routeStaffLux.routeStaffSaas .dashStat__value,
html.routeStaffLux.routeStaffSaas .dashChart__title,
html.routeStaffLux.routeStaffSaas .dashPanel__title {
  color: var(--saas-text);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .dashToolbar__meta,
html.routeStaffLux.routeStaffSaas .dashStat__label,
html.routeStaffLux.routeStaffSaas .dashStat__hint,
html.routeStaffLux.routeStaffSaas .dashChart__sub,
html.routeStaffLux.routeStaffSaas .dash__sectionTitle,
html.routeStaffLux.routeStaffSaas .dashEmpty {
  color: var(--saas-text-muted);
}

html.routeStaffLux.routeStaffSaas .dashStat,
html.routeStaffLux.routeStaffSaas .dashChart,
html.routeStaffLux.routeStaffSaas .dashPanel {
  background: var(--saas-surface);
  border-color: var(--saas-border);
  box-shadow: var(--saas-shadow);
}

html.routeStaffLux.routeStaffSaas .dashTab--active {
  border-bottom-color: var(--saas-accent);
  color: var(--saas-text);
}

html.routeStaffLux.routeStaffSaas .dashTabs {
  border-bottom-color: var(--saas-border);
}

html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .dashChart__body,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .dashChart__body .dashChart__fallback,
html.routeStaffLux.routeStaffSaas.routeStaffSaasDark .dashChart__body .dashEmpty {
  color: #ffffff;
}

html.routeStaffLux.routeStaffSaas .reportsInput,
html.routeStaffLux.routeStaffSaas .reportsSelect {
  background: var(--saas-surface);
  border: 1px solid var(--saas-border);
  color: var(--saas-text);
  border-radius: 10px;
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsInput:focus,
html.routeStaffLux.routeStaffSaas .reportsSelect:focus {
  border-color: var(--saas-accent-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
}

html.routeStaffLux.routeStaffSaas .reportsField label {
  color: var(--saas-text-muted);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsExport__item {
  background: linear-gradient(135deg, var(--saas-accent), var(--saas-accent-strong));
  border: none;
  color: #ffffff;
  border-radius: 10px;
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsExport__item:hover {
  filter: brightness(1.05);
}

html.routeStaffLux.routeStaffSaas .reportsBanner {
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.35);
  color: var(--saas-text);
}

/* SaaS — reports section sidebar matches main dashboard sidebar */
html.routeStaffLux.routeStaffSaas .reportsSectionSidebar {
  background: linear-gradient(180deg, var(--saas-sidebar) 0%, var(--saas-sidebar-deep) 100%);
  border: none;
  border-radius: 14px;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
  color: var(--saas-sidebar-text);
}

html.routeStaffLux.routeStaffSaas .reportsSectionSidebar .reportsSectionSidebar__head .eyebrow,
html.routeStaffLux.routeStaffSaas .reportsSectionSidebar .reportsSectionSidebar__sub {
  color: var(--saas-sidebar-muted) !important;
}

html.routeStaffLux.routeStaffSaas .reportsSectionSidebar .navItem {
  color: var(--saas-sidebar-text);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsSectionSidebar .navItem:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: translateX(2px);
}

html.routeStaffLux.routeStaffSaas .reportsSectionSidebar .navItem.active {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.35), rgba(255, 138, 0, 0.2));
  border-color: rgba(245, 158, 11, 0.5);
  color: #ffffff;
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--saas-accent);
}

html.routeStaffLux.routeStaffSaas .reportsTableWrap {
  border-color: var(--saas-border);
  border-radius: var(--saas-radius);
}

html.routeStaffLux.routeStaffSaas .reportsTable th {
  background: var(--saas-surface);
  color: var(--saas-text);
  border-bottom: 2px solid var(--saas-border);
  font-family: var(--saas-font);
}

html.routeStaffLux.routeStaffSaas .reportsTable td {
  color: var(--saas-text);
  border-bottom: 1px solid var(--saas-border);
}

html.routeStaffLux.routeStaffSaas .reportsTable tbody tr:hover {
  background: rgba(245, 158, 11, 0.06);
}

html.routeStaffLux.routeStaffSaas .reportsEmpty,
html.routeStaffLux.routeStaffSaas .reportsGap__body {
  color: var(--saas-text-muted);
}

html.routeStaffLux.routeStaffSaas .reportsGap__title {
  color: var(--saas-text);
}

/* SaaS default — staff sign-in (/#/auth) */
html.routeStaffLux.routeStaffSaas .luxStaffAuth {
  --auth-bg-left: #1f2937;
  --auth-bg-right: #f5f7fa;
  --auth-text-dark: #111827;
  --auth-text-muted: #6b7280;
  --auth-border: #e5e7eb;
  --auth-gold: #f59e0b;
  --auth-gold-light: #ff8a00;
}

html.routeStaffLux.routeStaffSaas body:has(#app .luxStaffAuth) {
  background: #f5f7fa;
  color: #111827;
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__left {
  background-color: #1f2937;
  background-image: linear-gradient(165deg, #1f2937 0%, #111827 100%);
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.06);
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__leftShade {
  background: radial-gradient(ellipse 80% 70% at 25% 18%, rgba(245, 158, 11, 0.12) 0%, transparent 72%);
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__propertyName,
html.routeStaffLux.routeStaffSaas .luxStaffAuth__leftFootText {
  color: #e5e7eb;
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__logoPlaceholder {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.06);
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__logoPlaceholderLabel,
html.routeStaffLux.routeStaffSaas .luxStaffAuth__logoPlaceholderMark {
  color: rgba(229, 231, 235, 0.55);
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__right {
  background: #f5f7fa;
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__title {
  color: #111827;
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__subtitle,
html.routeStaffLux.routeStaffSaas .luxStaffAuth__remember {
  color: #6b7280;
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__field {
  background: #ffffff;
  border-color: #e5e7eb;
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__field:focus-within {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__submit {
  background: linear-gradient(135deg, #f59e0b 0%, #ff8a00 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.35);
}

html.routeStaffLux.routeStaffSaas .luxStaffAuth__submit:hover:not(:disabled) {
  filter: brightness(1.05);
}

/* SaaS + Reports focus: full-width canvas; CRM nav is overlay drawer only */
html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus > .sidebar {
  display: none !important;
  width: min(300px, 92vw) !important;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus .staffShellCol {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 0 20px 40px !important;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus .staffTopbar {
  margin-left: 0;
  margin-right: 0;
  padding-left: 20px;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus .reportsMenuBtn--section {
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, #f59e0b 0%, #ff8a00 100%);
  color: #ffffff;
  font-family: var(--saas-font);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus .reportsMenuBtn--section:hover {
  filter: brightness(1.05);
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus .reportsMenuOverlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(17, 24, 39, 0.45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus.layout--reportsMenuOpen .reportsMenuOverlay {
  display: block;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus.layout--reportsMenuOpen > .sidebar {
  display: flex !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: min(300px, 92vw) !important;
  z-index: 80 !important;
  transform: none !important;
  box-shadow: 8px 0 40px rgba(0, 0, 0, 0.35);
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus.layout--reportsMenuOpen > .sidebar .sidebar__inner {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-top: 20px;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus .reportsShell {
  width: 100%;
  max-width: none;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus .reportsBody {
  display: block;
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus .reportsMenuBtn--hero {
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.45);
  background: linear-gradient(135deg, #f59e0b 0%, #ff8a00 100%);
  color: #ffffff;
  font-family: var(--saas-font);
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus .reportsMenuBtn--hero:hover {
  filter: brightness(1.05);
}

html.routeStaffLux.routeStaffSaas .layout.layout--saas.layout--reportsFocus .reportsFiltersSticky {
  top: 0;
  z-index: 6;
}


/* Less hazy overlay for all themes on reports (sidebar was behind blur) */
html.routeStaffLux .layout.layout--reportsFocus.layout--reportsMenuOpen .reportsMenuOverlay {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: rgba(17, 24, 39, 0.42);
}

html.routeStaffLux .layout.layout--reportsFocus.layout--reportsMenuOpen > .sidebar {
  z-index: 80;
}

@media (max-width: 980px) {
  html.routeStaffLux.routeStaffSaas .layout.layout--saas:not(.layout--reportsFocus) {
    display: flex;
    flex-direction: column;
  }

  html.routeStaffLux.routeStaffSaas .layout.layout--saas:not(.layout--reportsFocus) .sidebar {
    position: relative;
    width: 100%;
    transform: none;
    box-shadow: none;
  }

  html.routeStaffLux.routeStaffSaas .layout.layout--saas:not(.layout--reportsFocus) .staffShellCol {
    margin-left: 0;
    margin-right: 0;
    padding: 0 16px 40px;
    width: 100%;
  }

  html.routeStaffLux.routeStaffSaas .staffTopbar {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  html.routeStaffLux.routeStaffSaas.saasSidebarCollapsed .navItem__label {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.routeStaffLux.routeStaffSaas .card,
  html.routeStaffLux.routeStaffSaas .navItem,
  html.routeStaffLux.routeStaffSaas .btn {
    transition: none;
  }

  .dash--enter > .dashToolbar,
  .dash--enter > .dashHint,
  .dash--enter > .dash__metrics .dashStat,
  .dash--enter > .dash__section,
  .dash--enter .dash__analytics .dashChart,
  .reportsTabGrid--enter > .dash__metrics .dashStat,
  .reportsTabGrid--enter .reportsChartsRow .dashChart,
  .reportsTabGrid--enter .dashStat__sparkBar,
  .dash--charts-ready .dashChart__body canvas,
  .dash--charts-pending .dashChart__body::after,
  .reportsChartsRow.dash--charts-pending .dashChart__body::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }

  .dashStat__sparkBar {
    transform: scaleY(1) !important;
  }

  .dash--charts-pending .dashChart__body::after,
  .reportsChartsRow.dash--charts-pending .dashChart__body::after {
    display: none !important;
  }
}

/* Gourmet Club Jordan public homepage */
html.routeStaffLux:has(.gcHome) { scroll-behavior: smooth; }
html.routeStaffLux:has(.gcHome) body { background: #f7f4ee; color: #1f1f1f; overflow-x: hidden; }

.crmLanding.gcHome {
  --gold: #b79b5b;
  --gold-light: #d6b56a;
  --dark: #111111;
  --dark-secondary: #1f1f1f;
  --light: #f7f4ee;
  --beige: #efe7da;
  --white: #ffffff;
  --gray: #666666;
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
  --radius: 30px;
  --transition: all 0.3s ease;
  font-family: "Inter", var(--font-sans);
  line-height: 1.6;
  background: var(--light);
  color: var(--dark-secondary);
  min-height: 100vh;
  min-height: 100dvh;
}

.crmLanding.gcHome .container { width: min(92%, 1280px); margin-inline: auto; }
.crmLanding.gcHome h1, .crmLanding.gcHome h2, .crmLanding.gcHome h3, .crmLanding.gcHome h4 {
  font-family: "Playfair Display", var(--font-serif); font-weight: 600; line-height: 1.1;
}
.crmLanding.gcHome .gold { color: var(--gold-light); }
.crmLanding.gcHome .section { padding: 110px 0; }
.crmLanding.gcHome .section-header { text-align: center; margin-bottom: 70px; }
.crmLanding.gcHome .section-label {
  display: inline-block; text-transform: uppercase; letter-spacing: 3px; font-size: 12px;
  color: var(--gold); margin-bottom: 18px; font-weight: 600;
}
.crmLanding.gcHome .section-header h2 { font-size: clamp(38px, 5vw, 58px); margin-bottom: 18px; }
.crmLanding.gcHome .section-header p { max-width: 760px; margin-inline: auto; color: var(--gray); font-size: 18px; }

.crmLanding.gcHome .gcNav {
  position: sticky; top: 0; z-index: 50; background: rgba(17, 17, 17, 0.92);
  backdrop-filter: blur(12px); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.crmLanding.gcHome .gcNav__inner { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.crmLanding.gcHome .gcNav__brand {
  display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none;
  font-weight: 600; font-size: 14px; margin-right: auto;
}
.crmLanding.gcHome .gcNav__mark, .crmLanding.gcHome .gcNav__logo { width: 34px; height: 34px; border-radius: 10px; object-fit: contain; }
.crmLanding.gcHome .gcNav__mark { display: grid; place-items: center; background: rgba(183, 155, 91, 0.2); color: var(--gold-light); }
.crmLanding.gcHome .gcNav__links { display: none; gap: 22px; }
.crmLanding.gcHome .gcNav__links a { color: rgba(255, 255, 255, 0.72); text-decoration: none; font-size: 14px; font-weight: 500; }
.crmLanding.gcHome .gcNav__links a:hover { color: #fff; }
.crmLanding.gcHome .gcNav__actions { display: flex; gap: 8px; }
.crmLanding.gcHome .gcNav__ghost, .crmLanding.gcHome .gcNav__cta {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 14px;
  font-size: 13px; font-weight: 600; text-decoration: none;
}
.crmLanding.gcHome .gcNav__ghost { color: rgba(255, 255, 255, 0.75); }
.crmLanding.gcHome .gcNav__cta { background: var(--gold); color: var(--dark); }
@media (min-width: 768px) { .crmLanding.gcHome .gcNav__links { display: flex; } }

.crmLanding.gcHome .hero {
  position: relative; background: linear-gradient(135deg, var(--dark-secondary), var(--dark));
  color: var(--white); padding: 80px 0 190px; overflow: hidden; isolation: isolate;
}
.crmLanding.gcHome .hero::before {
  content: ""; position: absolute; inset: auto -180px -180px auto; width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(183, 155, 91, 0.35), transparent 70%); z-index: 0;
}
.crmLanding.gcHome .hero .container { position: relative; z-index: 1; }
.crmLanding.gcHome .hero-badge {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px); text-transform: uppercase; letter-spacing: 3px; font-size: 12px; margin-bottom: 32px;
}
.crmLanding.gcHome .hero h1 { font-size: clamp(48px, 8vw, 88px); margin-bottom: 24px; }
.crmLanding.gcHome .divider { width: 120px; height: 2px; background: var(--gold); margin-bottom: 32px; }
.crmLanding.gcHome .hero p { max-width: 720px; font-size: 20px; color: rgba(255, 255, 255, 0.78); margin-bottom: 40px; }
.crmLanding.gcHome .button-group { display: flex; flex-wrap: wrap; gap: 16px; }
.crmLanding.gcHome .btn {
  display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 18px;
  padding: 18px 34px; font-size: 16px; cursor: pointer; transition: var(--transition);
  text-decoration: none; font-family: inherit;
}
.crmLanding.gcHome .btn-primary { background: var(--gold); color: var(--dark); font-weight: 700; }
.crmLanding.gcHome .btn-primary:hover, .crmLanding.gcHome .btn-primary:focus-visible {
  background: var(--gold-light); transform: translateY(-2px);
}
.crmLanding.gcHome .btn-secondary {
  background: rgba(255, 255, 255, 0.08); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(12px);
}
.crmLanding.gcHome .btn-secondary:hover { background: rgba(255, 255, 255, 0.14); }

.crmLanding.gcHome .membership-card { margin-top: -85px; position: relative; z-index: 5; }
.crmLanding.gcHome .membership-wrapper {
  position: relative; overflow: hidden; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px;
  align-items: center; background: linear-gradient(135deg, #2d2d2d, #151515); border-radius: 36px;
  padding: 50px; color: var(--white); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}
.crmLanding.gcHome .membership-wrapper::before {
  content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: -140px;
  background: radial-gradient(circle, rgba(183, 155, 91, 0.22), transparent 70%);
}
.crmLanding.gcHome .brochure-column h2 { font-size: clamp(42px, 5vw, 64px); margin: 20px 0; max-width: 620px; }
.crmLanding.gcHome .brochure-column p {
  color: rgba(255, 255, 255, 0.78); max-width: 620px; font-size: 18px; line-height: 1.9; margin-bottom: 40px;
}
.crmLanding.gcHome .brochure-benefits { display: flex; gap: 20px; flex-wrap: wrap; }
.crmLanding.gcHome .mini-benefit {
  min-width: 150px; padding: 22px; border-radius: 24px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px);
}
.crmLanding.gcHome .mini-benefit span { display: block; color: var(--gold-light); font-size: 42px; font-weight: 300; margin-bottom: 8px; }
.crmLanding.gcHome .mini-benefit small { color: rgba(255, 255, 255, 0.7); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }

.crmLanding.gcHome .brochure-card {
  position: relative; min-height: 480px; border-radius: 38px; overflow: hidden;
  background: linear-gradient(145deg, #2d2d2d, #101010); border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}
.crmLanding.gcHome .card-glow {
  position: absolute; inset: auto -100px -120px auto; width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(183, 155, 91, 0.4), transparent 70%);
}
.crmLanding.gcHome .brochure-card-inner {
  position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column;
  justify-content: space-between; padding: 45px;
}
.crmLanding.gcHome .brochure-top { display: flex; justify-content: space-between; align-items: flex-start; }
.crmLanding.gcHome .brochure-title { font-family: "Playfair Display", var(--font-serif); font-size: 34px; color: white; margin-top: 10px; }
.crmLanding.gcHome .luxury-icon {
  width: 70px; height: 70px; border-radius: 22px; background: var(--gold); color: black;
  display: flex; align-items: center; justify-content: center; font-size: 30px; flex-shrink: 0;
}
.crmLanding.gcHome .luxury-icon--logo { object-fit: contain; padding: 8px; background: #fff; }
.crmLanding.gcHome .brochure-middle { margin: 60px 0; }
.crmLanding.gcHome .brochure-number { font-size: 110px; line-height: 1; color: var(--gold-light); font-weight: 300; }
.crmLanding.gcHome .brochure-text { color: rgba(255, 255, 255, 0.7); font-size: 18px; letter-spacing: 2px; text-transform: uppercase; }
.crmLanding.gcHome .brochure-footer {
  display: flex; justify-content: space-between; gap: 20px; padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.crmLanding.gcHome .brochure-footer small {
  display: block; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px;
}
.crmLanding.gcHome .brochure-footer strong { color: white; font-size: 18px; font-weight: 500; }

.crmLanding.gcHome .interactive-categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.crmLanding.gcHome .interactive-card {
  position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(12px);
  border-radius: 34px; padding: 38px; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: var(--shadow); transition: var(--transition);
}
.crmLanding.gcHome .interactive-card::before {
  content: ""; position: absolute; inset: auto -80px -120px auto; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(183, 155, 91, 0.14), transparent 70%);
}
.crmLanding.gcHome .interactive-card:hover { transform: translateY(-10px) scale(1.01); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12); }
.crmLanding.gcHome .featured-card { grid-column: span 2; background: linear-gradient(135deg, #ffffff, #f8f4eb); }
.crmLanding.gcHome .interactive-top { display: flex; gap: 22px; align-items: center; margin-bottom: 30px; position: relative; z-index: 2; }
.crmLanding.gcHome .icon-box {
  width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; font-size: 28px;
  background: rgba(183, 155, 91, 0.12); flex-shrink: 0;
}
.crmLanding.gcHome .interactive-top h3 { font-size: 34px; margin-top: 8px; }
.crmLanding.gcHome .benefit-list { position: relative; z-index: 2; list-style: none; display: grid; gap: 16px; margin: 0; padding: 0; }
.crmLanding.gcHome .benefit-list li { position: relative; padding-left: 34px; color: var(--gray); font-size: 16px; line-height: 1.8; }
.crmLanding.gcHome .benefit-list li::before { content: "✦"; position: absolute; left: 0; top: 0; color: var(--gold); font-size: 16px; }
.crmLanding.gcHome .compact-list li { font-size: 15px; }
.crmLanding.gcHome .interactive-footer { position: relative; z-index: 2; margin-top: 35px; padding-top: 24px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.crmLanding.gcHome .interactive-footer span { display: block; color: #888; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; margin-bottom: 8px; }
.crmLanding.gcHome .interactive-footer strong { color: var(--dark-secondary); font-size: 18px; font-weight: 600; }

.crmLanding.gcHome .dining { background: var(--beige); }
.crmLanding.gcHome .voucher-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; }
.crmLanding.gcHome .voucher { overflow: hidden; border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); transition: var(--transition); }
.crmLanding.gcHome .voucher:hover { transform: translateY(-8px); }
.crmLanding.gcHome .voucher-top {
  position: relative; min-height: 250px; padding: 40px; display: flex; flex-direction: column;
  justify-content: flex-end; color: var(--white); background: linear-gradient(135deg, #2d2d2d, #111111);
}
.crmLanding.gcHome .voucher-tag {
  position: absolute; top: 30px; left: 30px; background: var(--gold); color: var(--dark);
  padding: 10px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;
}
.crmLanding.gcHome .voucher-percent { font-size: 74px; color: var(--gold-light); font-weight: 300; line-height: 1; margin-bottom: 8px; }
.crmLanding.gcHome .voucher-topLabel { font-size: 24px; }
.crmLanding.gcHome .voucher-content { padding: 34px; }
.crmLanding.gcHome .voucher-content h3 { font-size: 34px; margin-bottom: 10px; }
.crmLanding.gcHome .voucher-content p { color: var(--gray); }
.crmLanding.gcHome .voucher-highlight { margin-bottom: 12px; font-weight: 700; }

.crmLanding.gcHome .table-section { background: #161616; color: var(--white); }
.crmLanding.gcHome .table-section .section-label { color: var(--gold-light); }
.crmLanding.gcHome .table-section .section-header p { color: rgba(255, 255, 255, 0.65); }
.crmLanding.gcHome .table-wrapper { overflow-x: auto; border-radius: var(--radius); box-shadow: var(--shadow); }
.crmLanding.gcHome table { width: 100%; min-width: 720px; border-collapse: collapse; background: rgba(255, 255, 255, 0.03); }
.crmLanding.gcHome th, .crmLanding.gcHome td { padding: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); text-align: center; }
.crmLanding.gcHome th { color: var(--gold-light); font-weight: 700; }
.crmLanding.gcHome td:first-child, .crmLanding.gcHome th:first-child { text-align: left; }

.crmLanding.gcHome .vip-box {
  position: relative; overflow: hidden; background: linear-gradient(135deg, #2b2b2b, #151515);
  color: var(--white); border-radius: 40px; padding: 80px 40px; text-align: center; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
}
.crmLanding.gcHome .vip-box::before {
  content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: -220px; transform: translateX(-50%);
  background: radial-gradient(circle, rgba(183, 155, 91, 0.22), transparent 70%);
}
.crmLanding.gcHome .vip-content { position: relative; z-index: 1; }
.crmLanding.gcHome .vip-icon {
  width: 100px; height: 100px; display: grid; place-items: center; margin: 0 auto 30px; border-radius: 50%;
  background: var(--gold); color: var(--dark); font-size: 40px;
}
.crmLanding.gcHome .vip-box h2 { font-size: clamp(38px, 5vw, 56px); margin: 24px 0; }
.crmLanding.gcHome .vip-box p { max-width: 760px; margin: 0 auto 40px; color: rgba(255, 255, 255, 0.8); font-size: 20px; }

.crmLanding.gcHome footer {
  background: var(--dark); color: rgba(255, 255, 255, 0.65); padding: 50px 0; border-top: 1px solid rgba(183, 155, 91, 0.2);
}
.crmLanding.gcHome .luxury-contact-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding-bottom: 50px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.crmLanding.gcHome .contact-column, .crmLanding.gcHome .social-column {
  background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 34px; padding: 40px; backdrop-filter: blur(10px);
}
.crmLanding.gcHome .footer-brand { font-family: "Playfair Display", var(--font-serif); color: white; font-size: 42px; margin-bottom: 35px; }
.crmLanding.gcHome .contact-item { margin-bottom: 26px; }
.crmLanding.gcHome .contact-item strong {
  display: block; color: var(--gold-light); margin-bottom: 8px; letter-spacing: 1px; text-transform: uppercase; font-size: 12px;
}
.crmLanding.gcHome .contact-item span, .crmLanding.gcHome .contact-link { color: rgba(255, 255, 255, 0.76); font-size: 17px; line-height: 1.8; text-decoration: none; }
.crmLanding.gcHome .contact-link:hover { color: var(--gold-light); }
.crmLanding.gcHome .social-grid { display: grid; gap: 20px; margin-top: 20px; }
.crmLanding.gcHome .social-card {
  display: flex; align-items: center; gap: 18px; padding: 22px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.05); text-decoration: none; transition: var(--transition);
}
.crmLanding.gcHome .social-card:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.07); }
.crmLanding.gcHome .social-icon {
  width: 58px; height: 58px; border-radius: 18px; background: var(--gold); color: black;
  display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; flex-shrink: 0;
}
.crmLanding.gcHome .social-card strong { display: block; color: white; font-size: 18px; margin-bottom: 4px; }
.crmLanding.gcHome .social-card span { color: rgba(255, 255, 255, 0.6); font-size: 14px; }
.crmLanding.gcHome .footer-bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 30px; color: rgba(255, 255, 255, 0.45); font-size: 14px;
}
.crmLanding.gcHome .footer-staff { color: var(--gold-light); text-decoration: none; font-weight: 600; }
.crmLanding.gcHome .footer-staff:hover { text-decoration: underline; }

@media (max-width: 992px) {
  .crmLanding.gcHome .membership-wrapper { grid-template-columns: 1fr; }
  .crmLanding.gcHome .section { padding: 90px 0; }
}
@media (max-width: 768px) {
  .crmLanding.gcHome .luxury-contact-wrapper { grid-template-columns: 1fr; }
  .crmLanding.gcHome .interactive-categories { grid-template-columns: 1fr; }
  .crmLanding.gcHome .featured-card { grid-column: span 1; }
  .crmLanding.gcHome .hero { padding: 48px 0 150px; }
  .crmLanding.gcHome .membership-wrapper, .crmLanding.gcHome .voucher-content { padding: 30px; }
  .crmLanding.gcHome .voucher-top { padding: 32px; }
  .crmLanding.gcHome .vip-box { padding: 60px 24px; }
  .crmLanding.gcHome .hero p, .crmLanding.gcHome .vip-box p { font-size: 18px; }
  .crmLanding.gcHome .gcNav__ghost { display: none; }
}
@media (max-width: 480px) {
  .crmLanding.gcHome .interactive-card { padding: 28px; }
  .crmLanding.gcHome .interactive-top { flex-direction: column; align-items: flex-start; }
  .crmLanding.gcHome .button-group { flex-direction: column; }
  .crmLanding.gcHome .btn { width: 100%; }
  .crmLanding.gcHome .voucher-grid { grid-template-columns: 1fr; }
}