/**
 * Facility UI bridge — aligns business area with player app (app-style.css)
 * Prefer loading facility-unified.css LAST to override inline page styles.
 * v3.2.6
 */

html.site-facility {
  --brand: #0bb3b5;
  --brand-dark: #089a9c;
  --accent: #ff7a29;
  --ink: #0b1220;
  --navy: #002366;
  --facility-body-top: 60px;
  --facility-body-bottom: 88px;
  --shell-max: 540px;
  --shell-pad-x: 16px;
  overflow-x: hidden;
}

/* ===== Shell ===== */
html.site-facility body {
  background: #ffffff !important;
  color: var(--ink) !important;
  padding-top: calc(var(--facility-body-top) + env(safe-area-inset-top, 0px)) !important;
  padding-bottom: calc(var(--facility-body-bottom) + env(safe-area-inset-bottom, 0px)) !important;
  position: relative;
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100vw !important;
}

html.site-facility body::before {
  content: '';
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(70vw, 480px);
  aspect-ratio: 5/3;
  background-image: url('logo-watermark.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.1;
}

html.site-facility .dashboard-container,
html.site-facility .settings-container,
html.site-facility .app-container {
  position: relative;
  z-index: 1;
  width: 100% !important;
  max-width: var(--shell-max, 540px) !important;
  margin: 0 auto !important;
  padding: 12px var(--shell-pad-x, 16px) 20px !important;
  box-sizing: border-box !important;
}

html.site-facility .sections-container,
html.site-facility .settings-grid {
  width: 100% !important;
  max-width: 100% !important;
}

/* ===== Header ===== */
html.site-facility:not(.auth-login-shell) .app-header {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(var(--shell-max, 540px), 100%) !important;
  height: auto !important;
  min-height: 52px !important;
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: saturate(140%) blur(8px) !important;
  -webkit-backdrop-filter: saturate(140%) blur(8px) !important;
  box-shadow: 0 4px 20px rgba(0, 35, 102, 0.1) !important;
  border-bottom: 1px solid rgba(0, 35, 102, 0.08) !important;
  padding: calc(6px + env(safe-area-inset-top, 0px)) 12px 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1000 !important;
}

html.site-facility.facility-auth .app-header:not(.app-header--auth-login) {
  position: sticky !important;
  background: linear-gradient(135deg, #0bb3b5 0%, #ff7a29 100%) !important;
  box-shadow: 0 4px 20px rgba(11, 179, 181, 0.2) !important;
  border-bottom: none !important;
}

html.site-facility.facility-auth .app-header:not(.app-header--auth-login) h1 {
  color: #ffffff !important;
}

html.site-facility .app-header-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  width: 100%;
  position: relative;
  z-index: 1;
  padding-left: 0;
  min-height: 40px;
}

html.site-facility .app-header:has(.back-btn) .app-header-left {
  padding-left: 44px;
}

html.site-facility:not(.facility-auth) .app-header h1,
html.site-facility:not(.facility-auth) .app-header #headerWelcome {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  text-align: center;
  color: var(--navy) !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  max-width: calc(100% - 150px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html.site-facility .app-header-right {
  position: absolute;
  right: 12px;
  display: flex;
  gap: 6px;
  align-items: center;
  z-index: 10;
}

html.site-facility .app-header .app-logo img {
  height: 28px;
  width: auto;
  display: block;
}

html.site-facility .notification-btn,
html.site-facility .notification-bell {
  position: relative;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(11, 179, 181, 0.25) !important;
  background: rgba(11, 179, 181, 0.08) !important;
  color: var(--navy) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  cursor: pointer;
  padding: 0 !important;
  animation: none !important;
}

html.site-facility .notification-badge {
  position: absolute;
  top: 0;
  right: 0;
  background: #ff4757 !important;
  color: #fff !important;
  min-width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 0.6rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff !important;
}

html.site-facility .back-btn {
  position: absolute;
  left: 12px;
  z-index: 11;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(11, 179, 181, 0.25);
  background: rgba(11, 179, 181, 0.08);
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 700;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

html.site-facility:not(.facility-auth) .app-header--facility-dashboard:has(.back-btn) .back-btn {
  position: static;
}

html.site-facility .app-header-logo {
  display: none !important;
}

html.site-facility:not(.facility-auth) .facility-hero,
html.site-facility:not(.facility-auth) #facilityHero {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 1rem !important;
}

html.site-facility .facility-hero-card {
  background: #ffffff !important;
  border: 1px solid rgba(0, 35, 102, 0.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.08) !important;
  padding: 16px !important;
}

html.site-facility .facility-name {
  color: #0b1220 !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

html.site-facility .facility-greeting {
  color: #64748b !important;
}

html.site-facility .facility-plan-chip {
  border: none !important;
  margin-top: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

html.site-facility .facility-plan-chip.plan-freemium {
  background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%) !important;
  color: #0e7490 !important;
}

html.site-facility .facility-plan-chip.plan-premium,
html.site-facility .facility-plan-chip.plan-multi {
  background: linear-gradient(135deg, #002366 0%, #004080 100%) !important;
  color: #ffffff !important;
}

html.site-facility .facility-plan-chip.plan-platinum {
  background: linear-gradient(135deg, #ff7a29 0%, #ff5722 100%) !important;
  color: #ffffff !important;
}

/* ===== Stats ===== */
html.site-facility .stats-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin-bottom: 1rem !important;
}

html.site-facility .stat-card {
  background: #ffffff !important;
  border: 2px solid rgba(11, 179, 181, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 12px rgba(11, 179, 181, 0.06) !important;
  padding: 0.9rem !important;
}

html.site-facility .stat-card[style*="border-left"] {
  border: 2px solid rgba(11, 179, 181, 0.2) !important;
}

html.site-facility .stat-icon {
  width: 36px !important;
  height: 36px !important;
  font-size: 1.1rem !important;
  line-height: 1 !important;
  margin: 0 auto 0.6rem !important;
  border-radius: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html.site-facility .stat-value {
  font-size: 1.45rem !important;
  color: var(--navy) !important;
}

html.site-facility .stat-label {
  font-size: 0.72rem !important;
}

html.site-facility .stat-change {
  font-size: 0.72rem !important;
}

/* ===== Quick actions ===== */
html.site-facility .quick-actions {
  border: 2px solid rgba(11, 179, 181, 0.2) !important;
  border-radius: 20px !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}

html.site-facility .quick-actions h2 {
  font-size: 0.95rem !important;
  margin-bottom: 0.75rem !important;
}

html.site-facility .actions-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html.site-facility .quick-actions .action-btn {
  min-height: 68px !important;
  padding: 0.65rem 0.4rem !important;
}

html.site-facility .action-btn {
  border-radius: 14px !important;
  min-height: auto !important;
}

html.site-facility .action-btn-icon {
  font-size: 1.35rem !important;
}

html.site-facility .action-btn-text {
  font-size: 0.78rem !important;
}

html.site-facility #addFieldBtn.action-btn {
  background: linear-gradient(90deg, var(--brand), var(--accent)) !important;
  border: none !important;
  color: #ffffff !important;
}

/* Compact buttons inside section headers */
html.site-facility .section-card > div:first-child .action-btn,
html.site-facility .section-card .action-btn[id*="Btn2"] {
  flex-direction: row !important;
  width: auto !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  font-size: 0.82rem !important;
  white-space: nowrap !important;
}

/* ===== Section cards ===== */
html.site-facility .section-card,
html.site-facility .card,
html.site-facility .booking-card,
html.site-facility .field-card,
html.site-facility .notification-card {
  border: 2px solid rgba(11, 179, 181, 0.2) !important;
  border-radius: 20px !important;
  padding: 1rem !important;
  margin-bottom: 0.85rem !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

html.site-facility .section-card > div:first-child {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid rgba(11, 179, 181, 0.12) !important;
}

html.site-facility .section-card h2 {
  margin: 0 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: var(--navy) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.3 !important;
}

html.site-facility .section-card h2 > span:first-child {
  font-size: 1.2rem !important;
}

html.site-facility .section-card > div:first-child p,
html.site-facility .section-card p[style*="color:#666"],
html.site-facility .section-card p[style*="color: #666"] {
  margin: 6px 0 0 !important;
  color: #64748b !important;
  font-size: 0.82rem !important;
  line-height: 1.4 !important;
}

html.site-facility .section-card > div[style*="padding-bottom"] h2 {
  font-size: 1rem !important;
}

html.site-facility .section-card > div[style*="padding-bottom"] h2 > span:first-child {
  font-size: 1.2rem !important;
}

/* Filters & chips */
html.site-facility .booking-filter,
html.site-facility .notification-filter {
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  border-radius: 100px !important;
  min-height: auto !important;
  width: auto !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  line-height: 1.2 !important;
}

html.site-facility .notification-filters-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  width: 100% !important;
}

/* Calendar navigation */
html.site-facility .calendar-nav-group {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 4px !important;
}

html.site-facility .calendar-nav-btn,
html.site-facility #calendarSection .primary,
html.site-facility #calendarSection .secondary {
  min-height: 34px !important;
  height: auto !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  width: auto !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  border-radius: 100px !important;
}

/* Notifications section */
html.site-facility #notificationsSection.section-card {
  padding: 1.15rem !important;
}

html.site-facility #notificationsSection .notifications-section-head {
  margin-bottom: 18px !important;
  padding-bottom: 14px !important;
  gap: 14px !important;
}

html.site-facility #notificationsSection .notification-card {
  padding: 16px 16px 14px !important;
  border-radius: 16px !important;
  border-left: 4px solid var(--brand) !important;
  margin-bottom: 0 !important;
}

html.site-facility #notificationsSection .notification-header {
  gap: 12px !important;
  margin-bottom: 10px !important;
  align-items: center !important;
}

html.site-facility #notificationsSection .notification-icon {
  font-size: 1.35rem !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  background: rgba(11, 179, 181, 0.08) !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

html.site-facility #notificationsSection .notification-title {
  font-size: 0.92rem !important;
  line-height: 1.35 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

html.site-facility #notificationsSection .notification-time {
  font-size: 0.72rem !important;
  white-space: nowrap !important;
  margin-left: auto !important;
}

html.site-facility #notificationsSection .notification-message {
  font-size: 0.84rem !important;
  line-height: 1.5 !important;
  margin: 0 0 0 52px !important;
}

html.site-facility #notificationsSection .mark-read-btn {
  min-height: 38px !important;
  padding: 9px 16px !important;
  font-size: 0.8rem !important;
  width: auto !important;
  flex-direction: row !important;
  border-radius: 100px !important;
}

html.site-facility #notificationsSection h2 .notification-badge {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.65rem !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 5px !important;
  margin-left: 6px !important;
  top: auto !important;
  vertical-align: middle !important;
}

html.site-facility #notificationsList {
  gap: 14px !important;
  display: flex !important;
  flex-direction: column !important;
}

html.site-facility .notification-filters-row {
  gap: 10px !important;
  margin-bottom: 16px !important;
}

html.site-facility .section-card > div[style*="gap:8px"],
html.site-facility .section-card > div[style*="gap: 8px"],
html.site-facility .section-card > div[style*="gap:12px"],
html.site-facility .section-card > div[style*="gap: 12px"] {
  gap: 8px !important;
  margin-bottom: 12px !important;
}

/* Calendar */
html.site-facility #calendarContainer {
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  padding: 10px !important;
  border-radius: 14px !important;
}

html.site-facility .scheduling-grid {
  min-width: 520px !important;
  font-size: 0.72rem !important;
}

html.site-facility .grid-header-cell,
html.site-facility .time-cell {
  padding: 6px 4px !important;
  font-size: 0.72rem !important;
}

html.site-facility .slot-cell {
  min-height: 44px !important;
  padding: 2px !important;
}

/* Field & booking cards */
html.site-facility .field-header {
  flex-wrap: wrap !important;
  gap: 8px !important;
}

html.site-facility .field-name {
  font-size: 1rem !important;
}

html.site-facility .field-info {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html.site-facility .field-actions {
  flex-wrap: wrap !important;
}

html.site-facility .field-actions button,
html.site-facility .booking-actions button {
  min-height: 40px !important;
  padding: 8px 12px !important;
  font-size: 0.82rem !important;
  flex: 1 1 auto !important;
}

html.site-facility .booking-details {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

html.site-facility .booking-user {
  font-size: 0.95rem !important;
}

html.site-facility .empty-state {
  padding: 1.5rem 1rem !important;
}

html.site-facility .empty-state-icon {
  font-size: 2rem !important;
}

/* ===== Modals ===== */
html.site-facility .modal {
  padding: 12px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

html.site-facility .modal-content,
html.site-facility .payment-modal-content {
  width: 100% !important;
  max-width: min(520px, calc(100vw - 24px)) !important;
  max-height: min(90vh, 720px) !important;
  padding: 1rem 1rem 0.85rem !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html.site-facility #subscriptionModal.modal {
  overflow: hidden !important;
  padding: 4px 10px !important;
  align-items: center !important;
}

html.site-facility #subscriptionModal .subscription-modal-content.facility-plan-modal {
  max-height: none !important;
  overflow: visible !important;
  padding: 0.6rem 0.72rem 0.5rem !important;
}

html.site-facility .subscription-modal-content.facility-plan-modal {
  max-height: none !important;
  overflow-y: visible !important;
}

html.site-facility .facility-plan-modal {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

html.site-facility .facility-plan-modal__title {
  margin: 0;
  text-align: center;
  font-size: 0.95rem !important;
  font-weight: 700;
  color: #0b1220;
}

html.site-facility .facility-plan-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.38rem;
  width: 100%;
  overflow: visible;
}

html.site-facility .facility-plan-card {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 0.52rem 0.62rem 0.48rem;
  border-radius: 12px;
  border: 2px solid #dbe2ea;
  background: #fff;
}

html.site-facility .facility-plan-card--free {
  background: #f8fafc;
}

html.site-facility .facility-plan-card--premium {
  border-color: #002366;
  background: linear-gradient(135deg, #eef6ff 0%, #ffffff 100%);
}

html.site-facility .facility-plan-card--platinum {
  border-color: #ff7a29;
  background: linear-gradient(135deg, #fff9f5 0%, #ffffff 100%);
}

html.site-facility .facility-plan-card--multi {
  border-color: #0bb3b5;
  background: linear-gradient(135deg, #ecfeff 0%, #ffffff 100%);
}

html.site-facility .facility-plan-card__badge {
  display: inline-block;
  margin-bottom: 0.28rem;
  padding: 0.12rem 0.48rem;
  border-radius: 999px;
  background: #002366;
  color: #fff;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

html.site-facility .facility-plan-card__badge--multi {
  background: linear-gradient(135deg, #0bb3b5, #08a0a2);
}

html.site-facility .facility-plan-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

html.site-facility .facility-plan-card__name {
  font-size: 0.84rem;
  font-weight: 700;
  color: #0b1220;
  line-height: 1.15;
}

html.site-facility .facility-plan-card__tag {
  font-size: 0.66rem;
  color: #64748b;
  margin-top: 0.05rem;
}

html.site-facility .facility-plan-card__price {
  font-size: 0.92rem;
  font-weight: 800;
  color: #0b1220;
  text-align: right;
  white-space: nowrap;
}

html.site-facility .facility-plan-card__price span {
  font-size: 0.62rem;
  font-weight: 600;
  color: #64748b;
}

html.site-facility .facility-plan-card--premium .facility-plan-card__price {
  color: #002366;
}

html.site-facility .facility-plan-card--platinum .facility-plan-card__price {
  color: #ff7a29;
}

html.site-facility .facility-plan-card--multi .facility-plan-card__price {
  color: #0bb3b5;
}

html.site-facility .facility-plan-card__features {
  list-style: none;
  margin: 0 0 0.38rem;
  padding: 0.32rem 0 0;
  border-top: 1px solid #e8eef3;
}

html.site-facility .facility-plan-card__features li {
  position: relative;
  padding: 0.08rem 0 0.08rem 0.92rem;
  font-size: 0.68rem;
  color: #475569;
  line-height: 1.25;
}

html.site-facility .facility-plan-card__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: 700;
}

html.site-facility .facility-plan-card__btn {
  width: 100%;
  min-height: 32px;
  border: none;
  border-radius: 9px;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  background: #002366;
  color: #fff;
}

html.site-facility .facility-plan-card__btn--outline {
  background: #fff;
  color: #0bb3b5;
  border: 2px solid #0bb3b5;
}

html.site-facility .facility-plan-card__btn--platinum {
  background: #ff7a29;
}

html.site-facility .facility-plan-card__btn--multi {
  background: linear-gradient(135deg, #0bb3b5, #08a0a2);
}

html.site-facility .facility-plan-modal__close {
  width: 100%;
  min-height: 34px;
  margin-top: 0.05rem;
}

html.site-facility .modal-content h2,
html.site-facility .modal-content h3 {
  font-size: 1.1rem !important;
}

/* ===== Settings ===== */
html.site-facility .settings-header {
  padding: 1.25rem !important;
  margin-bottom: 1rem !important;
  border-radius: 20px !important;
}

html.site-facility .settings-intro-card {
  margin-bottom: 1rem !important;
}

html.site-facility .settings-header h1 {
  font-size: 1.2rem !important;
}

html.site-facility .settings-header p {
  font-size: 0.85rem !important;
}

html.site-facility .settings-section {
  padding: 1rem !important;
  border-radius: 20px !important;
  margin-bottom: 0.85rem !important;
}

html.site-facility .settings-section-title {
  font-size: 1rem !important;
}

html.site-facility .settings-section-icon {
  font-size: 1.3rem !important;
}

html.site-facility .settings-section-subtitle {
  font-size: 0.8rem !important;
}

html.site-facility .form-row {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

html.site-facility .form-group {
  margin-bottom: 1rem !important;
}

html.site-facility .save-btn,
html.site-facility .danger-btn {
  width: 100% !important;
  justify-content: center !important;
  min-height: 46px !important;
  font-size: 0.9rem !important;
}

/* ===== Buttons global ===== */
html.site-facility button.primary:not(.calendar-nav-btn):not(.modal-btn),
html.site-facility .btn-primary:not(.calendar-nav-btn):not(.modal-btn),
html.site-facility .primary:not(.calendar-nav-btn):not(.modal-btn) {
  background: linear-gradient(90deg, var(--brand), var(--accent)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  min-height: 44px !important;
  font-size: 0.9rem !important;
  padding: 10px 16px !important;
}

html.site-facility button.secondary:not(.calendar-nav-btn):not(.mark-read-btn):not(.notification-filter):not(.modal-btn),
html.site-facility .secondary:not(.calendar-nav-btn):not(.mark-read-btn):not(.modal-btn) {
  background: rgba(11, 179, 181, 0.08) !important;
  border: 2px solid var(--brand) !important;
  color: var(--ink) !important;
  border-radius: 12px !important;
  min-height: 44px !important;
  font-size: 0.9rem !important;
  padding: 10px 16px !important;
}

/* Override facility-pages oversized action tiles outside quick-actions */
html.site-facility .action-btn:not(.quick-actions .action-btn) {
  min-height: 44px !important;
}

/* ===== Bottom navbar ===== */
html.site-facility .navbar {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(var(--shell-max, 540px), 100%) !important;
  max-width: min(var(--shell-max, 540px), 100%) !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: saturate(140%) blur(8px) !important;
  border-top: 1px solid rgba(0, 35, 102, 0.08) !important;
  box-shadow: 0 -2px 10px rgba(0, 35, 102, 0.08) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  display: flex !important;
  justify-content: space-around !important;
  align-items: stretch !important;
  border-radius: 16px 16px 0 0 !important;
}

html.site-facility .navbar a {
  flex: 1 1 0 !important;
  min-height: 52px !important;
  font-size: 0.62rem !important;
  padding: 6px 2px !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

html.site-facility .navbar a span:first-child {
  font-size: 1.15rem !important;
  line-height: 1 !important;
}

html.site-facility .navbar a span:last-child {
  font-size: 0.62rem !important;
  line-height: 1.1 !important;
}

html.site-facility .navbar a.active {
  color: var(--navy) !important;
  font-weight: 600 !important;
}

html.site-facility .navbar a.active::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: 56px !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--brand), var(--accent)) !important;
  border-radius: 0 0 3px 3px !important;
}

@media (max-width: 768px) {
  html.site-facility body {
    padding-top: calc(56px + env(safe-area-inset-top, 0px)) !important;
  }

  html.site-facility .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html.site-facility .field-info {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 360px) {
  html.site-facility .navbar a.active::after {
    width: 48px !important;
  }
}

html.site-facility .payout-blocked-banner {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 2px solid #fb923c;
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 16px rgba(251, 146, 60, 0.12);
}

html.site-facility .payout-blocked-banner-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

html.site-facility .payout-blocked-banner-content strong {
  display: block;
  color: #9a3412;
  margin-bottom: 4px;
}

html.site-facility .payout-blocked-banner-content p {
  margin: 0;
  color: #9a3412;
  font-size: 0.85rem;
  line-height: 1.45;
}

html.site-facility .payout-missing-list {
  margin-top: 6px !important;
  font-size: 0.8rem !important;
  opacity: 0.9;
}

html.site-facility .payout-blocked-banner-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 14px;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  color: #fff !important;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
}

html.site-facility .calendar-nav-btn.primary {
  min-height: 34px !important;
  padding: 6px 14px !important;
  font-size: 0.78rem !important;
  border-radius: 100px !important;
}

html.site-facility .calendar-nav-btn.secondary {
  min-height: 34px !important;
  padding: 6px 12px !important;
  font-size: 0.78rem !important;
  border-radius: 100px !important;
}

html.site-facility .mark-read-btn {
  min-height: 36px !important;
  padding: 8px 14px !important;
  font-size: 0.78rem !important;
  border-radius: 100px !important;
  flex-direction: row !important;
  width: auto !important;
}

/* Modal form actions (add/edit field, etc.) */
html.site-facility .modal-form-actions {
  display: flex !important;
  gap: 10px !important;
  margin-top: 4px !important;
}

html.site-facility .modal-btn {
  flex: 1 1 0 !important;
  width: auto !important;
  min-height: 44px !important;
  max-height: 48px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-direction: row !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
  box-sizing: border-box !important;
}

html.site-facility .modal-btn-cancel {
  background: #ffffff !important;
  color: var(--ink) !important;
  border: 2px solid #cbd5e1 !important;
  box-shadow: none !important;
}

html.site-facility .modal-btn-save {
  background: linear-gradient(90deg, var(--brand), var(--accent)) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 12px rgba(11, 179, 181, 0.25) !important;
}

html.site-facility #addFieldModal .modal-form-actions,
html.site-facility #editFieldModal .modal-form-actions,
html.site-facility #addBookingModal .modal-form-actions {
  width: 100% !important;
}

/* ===== Auth pages (business-login, facility-register) ===== */
html.site-facility.facility-auth,
html.site-facility.site-auth.facility-auth {
  --facility-header-height: 52px;
  --facility-body-top: calc(var(--facility-header-height) + env(safe-area-inset-top, 0px) + 8px);
}

html.site-facility.facility-auth:not(.auth-login-shell) body,
html.site-facility.site-auth.facility-auth:not(.auth-login-shell) body {
  padding-top: var(--facility-body-top) !important;
  padding-bottom: max(24px, env(safe-area-inset-bottom, 0px)) !important;
}

html.site-facility.facility-auth .app-header:not(.app-header--auth-login) {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
  height: auto !important;
  min-height: var(--facility-header-height) !important;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 14px 8px !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 44px !important;
  align-items: center !important;
  gap: 8px !important;
  justify-content: stretch !important;
  background: linear-gradient(135deg, #0bb3b5 0%, #ff7a29 100%) !important;
  box-shadow: 0 4px 20px rgba(11, 179, 181, 0.2) !important;
  border-bottom: none !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html.site-facility.facility-auth .app-header:not(.app-header--auth-login) .app-header-left {
  display: contents !important;
}

html.site-facility.facility-auth .app-header:not(.app-header--auth-login) .app-header-left a,
html.site-facility.facility-auth .app-header:not(.app-header--auth-login) .app-header-back {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
  align-self: center !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  color: #ffffff !important;
  font-size: 1.85rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 12px !important;
}

html.site-facility.facility-auth .app-header:not(.app-header--auth-login) h1 {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  transform: none !important;
  left: auto !important;
  text-align: center !important;
  justify-self: stretch !important;
  width: 100% !important;
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  max-width: 100% !important;
  pointer-events: none !important;
  margin: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Spacer esplicito: niente ::after (evita 4ª colonna e freccia fuori margine) */
html.site-facility.facility-auth .app-header.app-header--auth-back::after,
html.site-facility.facility-auth .app-header:has(> .app-header-auth-spacer)::after {
  content: none !important;
  display: none !important;
}

html.site-facility.facility-auth .app-header:not(.app-header--auth-login) > .app-header-auth-spacer {
  grid-column: 3 !important;
  grid-row: 1 !important;
  width: 40px !important;
  height: 40px !important;
  justify-self: end !important;
}

html.site-facility.facility-auth .app-header:not(.app-header--auth-login):not(.app-header--auth-back):not(:has(> .app-header-auth-spacer))::after {
  content: '';
  grid-column: 3;
  width: 44px;
  height: 36px;
}

html.site-facility.facility-auth .app-header:not(.app-header--auth-login) .app-logo {
  width: auto !important;
  height: auto !important;
  flex-shrink: 0 !important;
}

html.site-facility.facility-auth .app-header:not(.app-header--auth-login) .app-logo img {
  height: 32px !important;
  width: auto !important;
  max-height: 32px !important;
  display: block !important;
}

html.site-facility.facility-auth:not(.auth-login-shell) .app-container {
  padding-top: 8px !important;
}

@media (max-width: 480px) {
  html.site-facility.facility-auth .app-header:not(.app-header--auth-login) {
    padding-left: 12px !important;
    padding-right: 12px !important;
    grid-template-columns: 40px minmax(0, 1fr) 40px !important;
  }

  html.site-facility.facility-auth .app-header:not(.app-header--auth-login) h1 {
    font-size: 0.98rem !important;
  }

  html.site-facility.facility-auth .app-header:not(.app-header--auth-login) .app-header-back {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
    font-size: 1.7rem !important;
  }

  html.site-facility.facility-auth .app-header:not(.app-header--auth-login) .app-logo img {
    height: 28px !important;
    max-height: 28px !important;
  }
}

/* ===== Change plan modal (settings) — centering fix vs apple-modal-fixes ===== */
html.site-facility #changePlanModal.facility-plan-change-modal {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  background: rgba(11, 18, 32, 0.58) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html.site-facility #changePlanModal.facility-plan-change-modal.is-open,
html.site-facility #changePlanModal.facility-plan-change-modal[style*="display: flex"],
html.site-facility #changePlanModal.facility-plan-change-modal[style*="display:flex"] {
  display: flex !important;
}

html.site-facility #changePlanModal .facility-plan-change-modal__panel {
  position: relative !important;
  width: min(480px, 100%) !important;
  max-width: min(480px, calc(100vw - 32px)) !important;
  max-height: min(90vh, calc(100dvh - 32px)) !important;
  margin: auto !important;
  padding: 0 !important;
  transform: none !important;
  flex-shrink: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(0, 35, 102, 0.24) !important;
}