/* ==========================================================================
   My Swim School - Theme Variables
   Based on ThemeConfiguration.cs
   ========================================================================== */
/* ==========================================================================
   Interactive Support - SuperAdmin viewer surfaces

   Border colour comes from theme tokens defined in ThemeConfiguration.cs
   (InteractiveSupportBorderLight / InteractiveSupportBorderDark) and is
   pushed onto the wrapper element via an inline CSS custom property:
   --msw-interactive-support-border. This file intentionally contains no
   hardcoded red hex values so light and dark modes stay under the theme.
   ========================================================================== */
/* Full-viewport wrapper applied in MainLayout while the current user is the
   SuperAdmin viewer of an Active support session. Dashed is visually distinct
   from the solid red ACCOUNT SUSPENDED alert so the two cannot be confused. */
.is-viewport-wrapper {
  position: relative;
  border: 3px dashed var(--msw-interactive-support-border);
  border-radius: 6px;
  margin: 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.is-viewport-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 6px 16px;
  background-color: var(--msw-interactive-support-border);
  color: #ffffff;
  font-weight: 600;
}

.is-viewport-banner-title {
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.is-viewport-banner-spacer {
  flex: 1 1 auto;
}

.is-viewport-body {
  padding: 4px;
  flex: 1 1 auto;
  min-height: 0;
}

/* Pill-shaped indicator reused by the Admin-side chip widget and in-page
   session summaries. Uses the same theme token so both sides remain
   visually consistent. */
.is-active-session-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 12px;
  border-radius: 999px;
  background-color: var(--msw-interactive-support-border, var(--mud-palette-error));
  color: #ffffff;
  font-weight: 600;
  font-size: 0.8rem;
}

/* Device-size chip used in the viewer header and banner to surface the
   Admin side's reported viewport. */
.is-device-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.2);
  color: inherit;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Mobile frame wrapper: applied in the viewer when the Admin reports a
   mobile viewport so the SuperAdmin sees the inner stream inside a
   phone-shaped bezel. */
.is-mobile-frame {
  border: 8px solid var(--mud-palette-text-primary);
  border-radius: 28px;
  padding: 4px;
  background-color: var(--mud-palette-text-primary);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

/* Active status chip on the Support Queue. Pulses the icon so an Active
   session is visually distinct from an Accepted (plain Color.Info) chip. */
.is-status-active .mud-chip-icon {
  animation: is-status-active-pulse 1.4s ease-in-out infinite;
}

@keyframes is-status-active-pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
/* Transient row highlight applied to the row whose session was just
   accepted. The Razor binding clears the class after a 5-second timer,
   ending the animation. */
.is-row-recently-accepted {
  animation: is-row-recently-accepted-flash 1.5s ease-in-out 3;
}

@keyframes is-row-recently-accepted-flash {
  0% {
    background-color: transparent;
  }
  50% {
    background-color: rgba(76, 175, 80, 0.18);
  }
  100% {
    background-color: transparent;
  }
}
/* ==========================================================================
   Account pages - shared layout helpers used by ConfirmEmail and other
   single-shot account screens that render full-bleed without a side nav.
   ========================================================================== */
.msw-confirm-email-screen {
  min-height: 100vh;
  width: 100%;
  padding: 16px 0;
}

.msw-confirm-email-panel {
  /* MudBlazor's rounded-lg utility maps to a 12px border radius; the
     legacy inline border-radius value is retained here as a fallback for
     screens that override the MudBlazor utility class. */
  border-radius: 12px;
}

.msw-confirm-email-button {
  text-transform: none;
  font-weight: 700;
}

.msw-confirm-email-primary-link,
.msw-confirm-email-primary-link:hover {
  text-decoration: none;
}

:root {
  /* ------------------------------------------------------------------------
     Typography
     ------------------------------------------------------------------------ */
  --mud-typography-default-family: 'Inter', 'Roboto', 'Helvetica', 'Arial', sans-serif;
  --mud-typography-h1-family: 'Inter', sans-serif;
  --mud-typography-h2-family: 'Inter', sans-serif;
  --mud-typography-h3-family: 'Inter', sans-serif;
  --mud-typography-h4-family: 'Inter', sans-serif;
  --mud-typography-h5-family: 'Inter', sans-serif;
  --mud-typography-h6-family: 'Inter', sans-serif;
  --mud-typography-button-weight: 600;
  --mud-default-borderradius: 8px;
  --mud-drawer-width-left: 260px;
  /* ------------------------------------------------------------------------
     Light Theme (Default)
     ------------------------------------------------------------------------ */
  --mud-palette-primary: #087CFA; /* Tech Blue */
  --mud-palette-primary-text: #FFFFFF;
  --mud-palette-secondary: #FF5C00; /* Tech Orange */
  --mud-palette-secondary-text: #FFFFFF;
  --mud-palette-tertiary: #0F172A; /* Brand Navy */
  --mud-palette-tertiary-text: #FFFFFF;
  --mud-palette-info: #48CAE4; /* Brand Cyan */
  --mud-palette-success: #2A9D8F; /* Brand Green */
  --mud-palette-warning: #FFB703; /* SA Gold */
  --mud-palette-error: #BA1A1A; /* Standard Red */
  --mud-palette-appbar-background: #FFFFFF;
  --mud-palette-appbar-text: #0F172A;
  --mud-palette-background: #FFFFFF;
  --mud-palette-surface: #F4F4F5;
  --mud-palette-text-primary: #19191C;
  --mud-palette-text-secondary: #64748B; /* Slate-500 */
  --mud-palette-drawer-background: #FFFFFF;
  --mud-palette-drawer-text: #0F172A;
  --mud-palette-drawer-icon: #087CFA;
}

/* ==========================================================================
   Global App Shell - Matching MarketingPage.html design language
   ========================================================================== */
/* Subtle dot pattern across the page background (cyan dots ~2% opacity) */
body {
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2348cae4' fill-opacity='0.02' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-color: #FFFFFF;
}

/* AppBar: transparent shell - visual styling is on the inner .nav-pill */
.app-appbar {
  border-bottom: none !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.app-appbar .mud-appbar-text {
  color: #0F172A !important;
}
.app-appbar {
  /* Override MudToolbar padding to give the pill breathing room from viewport edges */
}
.app-appbar .mud-toolbar {
  padding: 24px 24px !important;
  height: 9em;
}
.app-appbar {
  /* On mobile the full 9em pill is oversized; reduce to match --mud-appbar-height (80px) */
}
@media (max-width: 599px) {
  .app-appbar .mud-toolbar {
    padding: 8px 16px !important;
    height: 80px !important;
  }
}

/* Brand logo in the AppBar - circle icon matching HTML nav */
.brand-nav-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  background: #087CFA;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(8, 124, 250, 0.35);
}

.brand-nav-text {
  font-family: "Inter", sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #0F172A;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-nav-accent {
  color: #087CFA;
}

/* Drawer - clean white with subtle right border */
.mud-drawer {
  border-right: 1px solid #e2e8f0;
  background: #FFFFFF !important;
  /* Section header text */
}
.mud-drawer .mud-nav-group-text {
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
}

/* Buttons - flat by default, subtle shadow on hover */
.mud-button-root {
  box-shadow: none !important;
  transition: box-shadow 0.2s ease !important;
}
.mud-button-root:hover {
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px !important;
}

/* Cards / Paper - subtle border + flat shadow, no hover effect */
.mud-card, .mud-paper-outlined {
  border: 1px solid #e2e8f0 !important;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px !important;
}

/* ==========================================================================
   Shared Stat Tile (Dashboard cards and billing cycle overview)
   ========================================================================== */
.mss-stat-tile {
  border-radius: 12px;
}

/* ==========================================================================
   Demo Mode - Glass Overlay for SuperAdmin
   ========================================================================== */
.demo-mode-blur {
  position: relative;
  pointer-events: none;
  user-select: none;
}
.demo-mode-blur::after {
  content: "DEMO MODE";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(15, 23, 42, 0.4);
}

/* ==========================================================================
   Component Styles (Login Cards)
   ========================================================================== */
.login-card-active-parent {
  /* Uses CSS variable for dynamic theming */
  border-left: 6px solid var(--mud-palette-primary) !important;
  opacity: 1 !important;
}
.login-card-active-staff {
  /* Uses CSS variable for dynamic theming */
  border-left: 6px solid var(--mud-palette-secondary) !important;
  opacity: 1 !important;
}
.login-card-inactive {
  opacity: 0.6 !important;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out, transform 0.2s ease;
}
.login-card-inactive:hover {
  opacity: 0.8 !important;
  transform: translateX(4px); /* Subtle nudge effect */
}

/* ------------------------------------------------------------------------
   Utility / Form Overrides
   ------------------------------------------------------------------------ */
/* Ensure form labels use the correct secondary text color */
.form-group {
  margin-bottom: 1rem;
}
.form-group .mud-input-label {
  color: var(--mud-palette-text-secondary);
  font-weight: 700;
}

/* Custom link style matching the theme */
a.theme-link {
  color: var(--mud-palette-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}
a.theme-link:hover {
  text-decoration: underline;
}
a.theme-link.secondary {
  color: var(--mud-palette-secondary);
}

/* Blazor Reconnection Modal Styles */
#components-reconnect-modal {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(4px);
}

/* Toggle visibility based on Blazor's state classes */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
  display: flex;
}

/* Hide specific message blocks depending on the state */
.reconnect-state-show, .reconnect-state-failed, .reconnect-state-rejected {
  display: none;
}

#components-reconnect-modal.components-reconnect-show .reconnect-state-show {
  display: block;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-state-failed {
  display: block;
}

#components-reconnect-modal.components-reconnect-rejected .reconnect-state-rejected {
  display: block;
}

/* Styling to match MudBlazor Paper/Card */
.reconnect-dialog {
  background: var(--mud-palette-surface, #ffffff);
  color: var(--mud-palette-text-primary, #424242);
  padding: 24px;
  border-radius: var(--mud-default-borderradius, 4px);
  box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
  text-align: center;
  max-width: 400px;
  font-family: "Inter", sans-serif;
}

.reconnect-btn {
  background-color: var(--mud-palette-primary, #594AE2);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 16px;
  font-weight: 500;
}

.reconnect-btn:hover {
  background-color: var(--mud-palette-primary-darken, #4A3EBD);
}

/* ==========================================================================
   Error / Utility Pages
   ========================================================================== */
/* Shared layout for full-page error states */
.not-found-container, .access-denied-container, .locked-out-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 5em 0 0 0;
}

.not-found-container .not-found-icon, .access-denied-container .access-denied-icon, .locked-out-container .locked-out-icon {
  width: 15em;
  height: auto;
  color: #d62828;
}

.not-found-container p, .access-denied-container p, .locked-out-container p {
  font-size: 2em;
  font-weight: bold;
  color: #d62828;
}

/* 2FA / Authenticator */
#authenticator-qr-code img {
  width: 20em;
  height: 20em;
}

/* ==========================================================================
   Roster Page
   ========================================================================== */
.clickable-cell {
  transition: background-color 0.2s;
}
.clickable-cell:hover {
  background-color: #f8f9fa;
  cursor: pointer;
}

.roster-row-condensed td {
  height: 30px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  font-size: 0.75rem !important;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.roster-row-condensed:hover td {
  opacity: 0.8;
}

.roster-cell-prominent {
  background-color: var(--mud-palette-info-lighten) !important;
  border: 2px solid var(--mud-palette-primary) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
  z-index: 10;
  opacity: 1 !important;
}

.roster-card-condensed {
  opacity: 0.4 !important;
  filter: grayscale(0.5);
  transition: all 0.3s ease;
}

.roster-card-prominent {
  border: 2px solid var(--mud-palette-primary) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  transform: scale(1.02);
  opacity: 1 !important;
}

/* ==========================================================================
   Dark Mode - html.dark-mode scoped overrides for custom (non-MudBlazor) styles
   MudBlazor handles palette variables automatically via IsDarkMode + PaletteDark.
   These rules patch the hardcoded colours in our custom component styles.
   ========================================================================== */
html.dark-mode {
  /* Page background: near-black with slightly brighter cyan dots */
}
html.dark-mode body {
  background-color: #0A0A0C;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2348cae4' fill-opacity='0.02' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
html.dark-mode {
  /* AppBar: transparent in dark mode too - pill handles visuals */
}
html.dark-mode .app-appbar {
  border-bottom: none !important;
  background: transparent !important;
}
html.dark-mode .app-appbar .mud-appbar-text {
  color: #F4F4F5 !important;
}
html.dark-mode {
  /* Brand logo text */
}
html.dark-mode .brand-nav-text {
  color: #F4F4F5;
}
html.dark-mode {
  /* Drawer: Brand Navy with faint border */
}
html.dark-mode .mud-drawer {
  border-right-color: rgba(255, 255, 255, 0.08);
  background: #0F172A !important;
}
html.dark-mode .mud-drawer .mud-nav-group-text {
  color: #64748B;
}
html.dark-mode {
  /* Cards / Paper: keep them visually distinct on dark background */
}
html.dark-mode .mud-card,
html.dark-mode .mud-paper-outlined {
  border-color: rgba(255, 255, 255, 0.08) !important;
}
html.dark-mode {
  /* Reconnect modal overlay */
}
html.dark-mode #components-reconnect-modal {
  background-color: rgba(0, 0, 0, 0.85);
}
html.dark-mode {
  /* Roster hover */
}
html.dark-mode .clickable-cell:hover {
  background-color: rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
html.dark-mode {
  /* Demo mode blur overlay */
}
html.dark-mode .demo-mode-blur::after {
  background: rgba(10, 10, 12, 0.35);
  color: rgba(244, 244, 245, 0.4);
}

/* ==========================================================================
   Catalog Timetable
   ========================================================================== */
.msw-timetable-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid var(--mud-palette-divider, #e0e0e0);
}

.msw-timetable {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
}
.msw-timetable th, .msw-timetable td {
  padding: 8px 10px;
  border: 1px solid var(--mud-palette-divider, #e0e0e0);
  vertical-align: top;
}
.msw-timetable thead th {
  position: sticky;
  top: 0;
  z-index: 2;
}
.msw-timetable th {
  background: var(--mud-palette-surface, #F4F4F5);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}
.msw-timetable .msw-tt-time-col {
  width: 64px;
}
.msw-timetable .msw-tt-day-col {
  min-width: 130px;
}
.msw-timetable .msw-tt-time-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mud-palette-text-secondary, #64748B);
  white-space: nowrap;
  text-align: right;
  vertical-align: middle;
}
.msw-timetable .msw-tt-cell {
  padding: 6px;
}

.msw-tt-entry {
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 4px;
  border-left: 3px solid transparent;
  background: var(--mud-palette-surface, #F4F4F5);
  transition: box-shadow 0.15s;
}
.msw-tt-entry:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.msw-tt-entry:last-child {
  margin-bottom: 0;
}
.msw-tt-entry--open {
  border-left-color: #2A9D8F;
}
.msw-tt-entry--limited {
  border-left-color: #FFB703;
}
.msw-tt-entry--full {
  border-left-color: #BA1A1A;
  opacity: 0.8;
}
.msw-tt-entry .msw-tt-entry-name {
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.msw-tt-entry .msw-tt-entry-meta {
  font-size: 0.7rem;
  color: var(--mud-palette-text-secondary, #64748B);
  margin-top: 2px;
}

@media (min-width: 600px) {
  .mud-main-content {
    padding-top: 120px !important;
  }
  .account-layout .mud-main-content {
    padding-top: 0 !important;
  }
}