/* Final product guardrails.
   This file is loaded last on purpose: it neutralizes legacy visual leaks without
   touching reservation logic, auth contracts, or API behaviour. */

body.staff-mode,
body.admin-mode {
  --fgx-sidebar-width: 258px;
  --fgx-sidebar-gap: 0px;
  --fg-sidebar-w: var(--fgx-sidebar-width) !important;
  overflow-x: hidden !important;
  background: #050607 !important;
}

body.staff-mode.staff-menu-collapsed,
body.admin-mode.staff-menu-collapsed,
body.staff-menu-collapsed {
  --fgx-sidebar-width: 66px;
  --fg-sidebar-w: var(--fgx-sidebar-width) !important;
}

body.staff-mode header,
body.admin-mode header,
body.staff-mode .ops-sidebar,
body.admin-mode .ops-sidebar {
  width: var(--fgx-sidebar-width) !important;
  min-width: var(--fgx-sidebar-width) !important;
  max-width: var(--fgx-sidebar-width) !important;
  background: rgba(5, 7, 10, .88) !important;
  border-right: 1px solid rgba(229, 231, 235, .08) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) saturate(112%) !important;
}

body.staff-mode .ops-sidebar,
body.admin-mode .ops-sidebar {
  overflow: visible !important;
  padding: 12px 10px !important;
}

body.staff-mode main,
body.admin-mode main {
  width: calc(100vw - var(--fgx-sidebar-width)) !important;
  max-width: calc(100vw - var(--fgx-sidebar-width)) !important;
  margin-left: var(--fgx-sidebar-width) !important;
  padding-left: 0 !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}

body.staff-mode:not(.admin-mode) .staff-wrap,
body.admin-mode .admin-shell,
body.admin-mode .admin-wrap,
body.staff-mode .staff-dashboard-page,
body.staff-mode .staff-clients-page,
body.staff-mode .staff-reservations-page,
body.staff-mode .staff-pricing-page,
body.staff-mode .staff-emails-page,
body.staff-mode .staff-campaigns-page,
body.staff-mode .staff-utility-page {
  width: 100% !important;
  max-width: 1640px !important;
  margin-inline: auto !important;
  padding: 24px clamp(16px, 1.8vw, 28px) 48px !important;
  box-sizing: border-box !important;
}

body.staff-mode #logoutBtn,
body.admin-mode #logoutBtn {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  transform: none !important;
}

.fgx-menu-brand,
.fgx-menu-center,
.fgx-menu-account,
.fgx-menu-item,
.fgx-menu-subitem,
.fgx-menu-collapse {
  border-radius: 7px !important;
  box-shadow: none !important;
}

.fgx-menu-logo-frame {
  background: transparent !important;
  border: 1px solid rgba(229, 231, 235, .10) !important;
}

.fgx-menu-center,
.fgx-menu-account {
  background: transparent !important;
  border-color: rgba(229, 231, 235, .11) !important;
}

.fgx-menu-center:hover,
.fgx-menu-center:focus-visible,
.fgx-menu-account:hover,
.fgx-menu-account:focus-visible,
.fgx-menu-item:hover,
.fgx-menu-subitem:hover {
  background: rgba(255, 255, 255, .038) !important;
  border-color: rgba(229, 231, 235, .15) !important;
}

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

.fgx-menu-item.active,
.fgx-menu-subitem.active,
.fgx-menu-group.active .fgx-menu-item-parent {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  color: #f7f7f4 !important;
  -webkit-text-fill-color: #f7f7f4 !important;
}

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

.fgx-menu-item.active::before,
.fgx-menu-subitem.active::before,
.fgx-menu-group.active .fgx-menu-item-parent::before {
  left: 0 !important;
  top: 9px !important;
  bottom: 9px !important;
  width: 1px !important;
  border-radius: 1px !important;
  background: rgba(244, 241, 234, .86) !important;
  opacity: 1 !important;
}

.fgx-menu-item.active .fgx-menu-icon,
.fgx-menu-subitem.active .fgx-menu-icon,
.fgx-menu-group.active .fgx-menu-item-parent .fgx-menu-icon {
  color: rgba(244, 241, 234, .9) !important;
}

.fgx-menu-popover {
  left: 10px !important;
  right: 10px !important;
  width: auto !important;
  max-width: 238px !important;
  max-height: min(420px, calc(100dvh - 96px)) !important;
  overflow: auto !important;
  border-radius: 10px !important;
  background: rgba(8, 10, 14, .98) !important;
  border: 1px solid rgba(229, 231, 235, .13) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .46) !important;
}

.fgx-menu-popover.account {
  top: auto !important;
  bottom: 70px !important;
}

.fgx-menu-option {
  min-height: 40px !important;
  border-radius: 7px !important;
}

body.staff-menu-collapsed .fgx-menu-popover {
  left: calc(100% + 10px) !important;
  right: auto !important;
  width: 252px !important;
  max-width: 252px !important;
}

body.staff-menu-collapsed .fgx-menu-account,
body.staff-menu-collapsed .fgx-menu-center,
body.staff-menu-collapsed .fgx-menu-item {
  width: 46px !important;
  margin-inline: auto !important;
}

body .auth-overlay {
  display: grid !important;
  place-items: center !important;
  padding: 22px !important;
  background:
    radial-gradient(460px 320px at 50% 38%, rgba(232, 229, 222, .035), transparent 68%),
    #030405 !important;
}

body .auth-card.auth-card-single {
  width: min(376px, calc(100vw - 34px)) !important;
  max-height: calc(100dvh - 32px) !important;
  min-height: 0 !important;
  padding: 22px !important;
  overflow: auto !important;
  border-radius: 14px !important;
  border: 1px solid rgba(232, 229, 222, .11) !important;
  background: rgba(7, 8, 10, .74) !important;
  box-shadow: 0 22px 72px rgba(0, 0, 0, .46) !important;
}

body .auth-card.auth-card-single .auth-form-panel {
  padding: 0 !important;
}

body .auth-shell-head {
  margin-bottom: 16px !important;
}

body .auth-brand-logo {
  width: 124px !important;
  max-width: 42vw !important;
  border-radius: 10px !important;
  background: transparent !important;
}

body .auth-card.auth-card-single h2 {
  font-size: 27px !important;
}

body .auth-card.auth-card-single .auth-input,
body .auth-card.auth-card-single .btn-primary {
  min-height: 42px !important;
  border-radius: 9px !important;
}

/* Users / access console: keep role code and permissions readable on desktop. */
body.staff-mode .staff-access-grid {
  grid-template-columns: minmax(210px, 260px) minmax(520px, 1fr) minmax(260px, 340px) !important;
  align-items: start !important;
}

body.staff-mode .staff-permission-head {
  grid-template-columns: minmax(0, 1fr) minmax(220px, 260px) !important;
  align-items: start !important;
}

body.staff-mode .staff-code-card {
  min-width: 0 !important;
  overflow: hidden !important;
}

body.staff-mode .staff-code-card strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  line-height: 1.15 !important;
}

body.staff-mode .staff-code-card div {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}

body.staff-mode .staff-code-card button {
  min-width: 0 !important;
  height: 36px !important;
  padding-inline: 12px !important;
  white-space: nowrap !important;
}

body.staff-mode .staff-role-identity > div {
  min-width: 0 !important;
}

body.staff-mode .staff-role-identity h3,
body.staff-mode .staff-role-identity p {
  overflow-wrap: anywhere !important;
}

body.staff-mode .staff-permission-groups {
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
}

body.staff-mode .staff-permission-toggle {
  min-height: 42px !important;
  grid-template-columns: 34px minmax(0, 1fr) auto !important;
  gap: 10px !important;
}

body.staff-mode .staff-permission-toggle b {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
  line-height: 1.15 !important;
}

body.staff-mode .staff-permission-toggle small {
  white-space: nowrap !important;
}

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

  body.staff-mode header,
  body.admin-mode header,
  body.staff-mode .ops-sidebar,
  body.admin-mode .ops-sidebar {
    position: sticky !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  body.staff-mode main,
  body.admin-mode main {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  body.staff-mode .staff-access-grid,
  body.staff-mode .staff-permission-head,
  body.staff-mode .staff-permission-groups {
    grid-template-columns: 1fr !important;
  }
}