/**
 * Facility / Business area styles
 * Isolates structure pages from player-app adaptive CSS overrides.
 */

html.site-facility {
  --facility-header-height: 56px;
  --facility-body-top: 60px;
  --facility-body-bottom: 88px;
  --brand: #0bb3b5;
  --accent: #ff7a29;
  --navy: #002366;
}

html.site-facility.onboarding-slides body {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

html.site-facility body {
  display: block !important;
  flex-direction: initial !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100vh !important;
  height: auto !important;
  margin: 0 !important;
  font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: #0b1220;
  background: #ffffff;
  box-sizing: border-box;
}

/* Dashboard / settings — not auth pages (login, register, reset) */
html.site-facility:not(.facility-auth) body {
  padding-top: var(--facility-body-top) !important;
  padding-bottom: var(--facility-body-bottom) !important;
}

html.site-facility *,
html.site-facility *::before,
html.site-facility *::after {
  box-sizing: border-box;
}

/* Auth pages: login / register — skip shared login shell (auth-login.css) */
html.site-facility.facility-auth:not(.auth-login-shell) body,
html.site-facility .facility-auth-page body {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
}

html.site-facility.facility-auth:not(.auth-login-shell) .app-container,
html.site-facility .facility-auth-page .app-container {
  max-width: var(--shell-max, 540px) !important;
  margin: 0 auto;
  padding: 12px var(--shell-pad-x, 16px) 20px;
}

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

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

html.site-facility.facility-auth:not(.auth-login-shell) .card,
html.site-facility .facility-auth-page .card {
  border: 2.5px solid rgba(11, 179, 181, 0.2) !important;
  border-radius: 22px !important;
  box-shadow: 0 8px 32px rgba(0, 35, 102, 0.08) !important;
  background: #ffffff !important;
}

html.site-facility.facility-auth:not(.auth-login-shell) .card h2,
html.site-facility .facility-auth-page .card h2 {
  color: var(--brand) !important;
}

html.site-facility:not(.facility-auth) .app-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: var(--facility-header-height) !important;
  min-height: var(--facility-header-height) !important;
  padding: 0 1rem !important;
  padding-top: env(safe-area-inset-top, 0px) !important;
  margin: 0 !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

html.site-facility .dashboard-container,
html.site-facility .app-container,
html.site-facility .settings-container,
html.site-facility main {
  width: 100%;
  max-width: var(--shell-max, 540px);
  margin: 0 auto;
  padding: 12px var(--shell-pad-x, 16px) 20px;
}

html.site-facility .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0.75rem !important;
  margin-bottom: 1.25rem !important;
  max-width: 100% !important;
  overflow: visible !important;
}

html.site-facility .stat-card {
  background: #fff;
  border-radius: 18px;
  border: 2px solid rgba(11, 179, 181, 0.2);
  padding: 1.1rem;
  box-shadow: 0 2px 16px rgba(11, 179, 181, 0.08);
  min-width: 0;
}

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

html.site-facility .action-btn,
html.site-facility .facility-btn,
html.site-facility button.secondary,
html.site-facility button.ghost {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100%;
  min-height: 76px !important;
  padding: 0.85rem !important;
  border-radius: 14px !important;
  border: 2px solid var(--brand) !important;
  background: rgba(11, 179, 181, 0.08) !important;
  color: #0b1220 !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  white-space: normal !important;
  animation: none !important;
  box-shadow: none !important;
}

html.site-facility .action-btn.primary,
html.site-facility button.primary,
html.site-facility .btn-primary {
  background: linear-gradient(90deg, #0bb3b5, #ff7a29) !important;
  color: #fff !important;
  border: none !important;
  min-height: 48px !important;
  box-shadow: 0 4px 12px rgba(11, 179, 181, 0.25) !important;
  animation: none !important;
}

html.site-facility .card,
html.site-facility .section-card,
html.site-facility .booking-card,
html.site-facility .notification-card,
html.site-facility .field-card {
  background: #fff;
  border-radius: 22px;
  border: 2.5px solid rgba(11, 179, 181, 0.2);
  padding: 1.25rem;
  box-shadow: 0 2px 16px rgba(11, 179, 181, 0.08);
  margin-bottom: 1rem;
}

html.site-facility .card > div,
html.site-facility .section-card > div,
html.site-facility .booking-card > div {
  flex-direction: initial !important;
  align-items: initial !important;
  gap: initial !important;
  width: auto !important;
  min-width: 0 !important;
}

html.site-facility input,
html.site-facility select,
html.site-facility textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: #0b1220;
  min-height: 44px;
}

html.site-facility input:focus,
html.site-facility select:focus,
html.site-facility textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(11, 179, 181, 0.12);
}

html.site-facility label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #334155;
}

html.site-facility .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #e2e8f0;
}

html.site-facility .tab,
html.site-facility .tab-btn {
  min-height: auto !important;
  min-width: auto !important;
  padding: 0.75rem 1rem !important;
  white-space: nowrap;
}

html.site-facility .modal,
html.site-facility .payment-modal {
  align-items: center;
  justify-content: center;
  padding: 20px;
}

html.site-facility .modal-content,
html.site-facility .payment-modal-content {
  width: 100%;
  max-width: 540px;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: 22px;
  border: 2.5px solid rgba(11, 179, 181, 0.2);
}

html.site-facility .notification-bell {
  min-width: 40px !important;
  min-height: 40px !important;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.2);
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

html.site-facility .facility-header,
html.site-facility .dashboard-header {
  border-radius: 22px;
  margin-bottom: 1.25rem;
}

html.site-facility .booking-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
}

@media (max-width: 768px) {
  html.site-facility {
    --facility-body-top: 80px;
  }
}

@media (max-width: 480px) {
  html.site-facility .stats-grid,
  html.site-facility .actions-grid {
    grid-template-columns: 1fr !important;
  }

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