/* ============================================================
   RJ WaitList — Global CSS
   Brand: R&J Formal Wear  |  Accent: #f78da7 (pink)
   ============================================================ */

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body, #root {
  height: 100%;
  width: 100%;
}

body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background-color: #0d0d1a;
  color: #ebebf5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Respect safe areas on iOS */
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}

/* ── Boot splash (shown before React hydrates) ──────────────── */
.boot-splash {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0d0d1a 0%, #1a0d28 50%, #0d1520 100%);
  gap: 16px;
}

.boot-logo {
  width: 80px;
  height: 80px;
  background-image: url('/static/icons/app_icon.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.boot-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #f78da7;
  letter-spacing: 1px;
}

.boot-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(247, 141, 167, 0.2);
  border-top-color: #f78da7;
  border-radius: 50%;
  animation: spin 0.85s linear infinite;
}

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

/* ── Scrollbars ──────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #161628;
}
::-webkit-scrollbar-thumb {
  background: #3a3a58;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5a5a78;
}

/* ── Wait-time timeout pulse (applied to timed-out table rows) ── */
@keyframes timeout-pulse {
  0%, 100% { background-color: rgba(239, 83, 80, 0.15); }
  50%       { background-color: rgba(239, 83, 80, 0.28); }
}

.row-timeout {
  animation: timeout-pulse 2s ease-in-out infinite;
}

/* ── PWA standalone adjustments ─────────────────────────────── */
@media (display-mode: standalone) {
  /* Extra top padding for the notch / dynamic island */
  body {
    padding-top: max(env(safe-area-inset-top), 20px);
  }
}

/* ── Utility: visually hidden (a11y) ────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ── MUI overrides that can't be done via sx prop ───────────── */

/* Ensure MUI tables don't overflow on small screens */
.MuiTableContainer-root {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Tighten mobile spacing inside dialogs */
@media (max-width: 600px) {
  .MuiDialog-paper {
    margin: 12px !important;
    width: calc(100% - 24px) !important;
    max-width: 100% !important;
  }
  .MuiDialogContent-root {
    padding: 16px !important;
  }
}

/* ── Recharts tooltip dark theme ─────────────────────────────── */
.recharts-tooltip-wrapper .recharts-default-tooltip {
  background-color: #161628 !important;
  border: 1px solid #252540 !important;
  border-radius: 8px !important;
  color: #ebebf5 !important;
}

/* ── Selection highlight ─────────────────────────────────────── */
::selection {
  background-color: rgba(247, 141, 167, 0.3);
  color: #fff;
}