/* ============================================================================
   MTI AUDITION WEBSITE - STYLESHEET
   ============================================================================

   TABLE OF CONTENTS:
   1.  Design Tokens (CSS Variables)
   2.  Base Styles & Reset
   3.  Navigation
   4.  Containers & Layout
   5.  Typography
   6.  Forms & Inputs
   7.  Buttons
   8.  Password Helpers
   9.  Tables
   10. Form Utilities
   11. Toast Notifications
   12. Confirmation Modals
   13. Member Cards (Component System)
   14. Skeleton Loaders
   15. Floating Labels
   16. Micro-interactions (Ripple & Checkboxes)
   17. Enhanced Accessibility
   18. Responsive Overrides
   19. Site Footer
   20. Admin Members Page Styles
   21. Utility Classes
   22. Back to Top Button
   23. Style Guide Page Styles
   24. Booking System Modals (Slot Selection & Role Selection)
   25. Countdown Timer
   26. Audition Interest Form
   27. Email Campaign Dashboard Styles
   28. Audition Day Lobby Styles
   29. Real-Time Audition Management System

   ============================================================================ */

/* ============================================================================
   1. DESIGN TOKENS (CSS Variables)
   ============================================================================
   These variables form the design system foundation. All components reference
   these tokens rather than hardcoded values for consistency and maintainability.
   ============================================================================ */
:root {
  /* Colors */
  --color-background: #f9f9f9;
  --color-white: #ffffff;
  --color-dark-blue: #2c3e50;
  --color-light-blue: #1f7ab8; /* Updated for WCAG AA compliance: 4.64:1 contrast with white (was #3498db at 3.41:1) */
  --color-red: #c0392b; /* Updated for WCAG AA compliance: 5.03:1 contrast with white (was #e74c3c at 3.95:1) */
  --color-red-dark: #a93226;
  --color-success: #1e8449; /* Updated for WCAG AA compliance: 5.02:1 contrast with white (was #2ecc71 at 3.15:1) */
  --color-success-dark: #166134; /* Darker success green for hover states */
  --color-success-light: #27ae60; /* For borders/UI elements: 3.67:1 contrast (meets UI component requirement) */
  --color-success-tint: rgba(30, 132, 73, 0.1); /* Light green row highlight */
  --color-danger-tint: rgba(192, 57, 43, 0.1);  /* Light red row highlight */
  --color-blue-button: #0074D9;
  --color-blue-button-hover: #005fa3;
  --color-admin-bg: #34495e;
  --color-admin-hover: #5dade2;
  --color-border: #bbb;
  --color-disabled-bg: #e0e0e0;
  --color-disabled-text: #6d6d6d; /* Updated for WCAG AA compliance: 4.5:1 contrast with #e0e0e0 (was #888 at 2.92:1) */
  --color-disabled-border: #ccc;
  --color-text: #000;
  --color-light-text: #ecf0f1;
  --btn-bg: #4b6b8a;       /* default */
  --btn-hover: #415e79;    /* hover */
  --btn-active: #364e63;   /* pressed */
  --btn-text: #ffffff;     /* text */
  --btn-border: #3d566e;   /* optional border */
  --btn-focus: rgba(59,130,246,0.35); /* subtle focus ring */

  /* Additional Colors */
  --color-surface-subtle: #f3f6f9;  /* For accordion, code backgrounds */
  --color-table-zebra: #fafafa;     /* Table row striping */
  --color-table-hover: #f2f8ff;     /* Table row hover state */
  --color-divider: #e8e8e8;         /* Subtle dividers */
  --color-avatar-fallback: #f0f0f0; /* Avatar placeholder background */
  --color-danger-button: #b34b4b;   /* Danger button background */
  --color-danger-button-hover: #9e3f3f; /* Danger button hover */
  --color-danger-button-active: #863636; /* Danger button active */
  --color-header-blue: #1a237e; /* Deep blue for admin table headers */
  --color-warning: #f59e0b; /* Warning/alert color */
  --color-purple: #8e44ad; /* Purple for table staff role badge */
  --color-text-muted: #666; /* Muted text for hints and secondary content */
  --color-text-secondary: #888; /* Secondary text color */
  --color-text-primary: #000000; /* Primary text color (alias for --color-text) */
  --color-bg-primary: #ffffff; /* Primary background color (alias for --color-white) */
  --color-bg-secondary: #f9f9f9; /* Secondary background color (alias for --color-background) */
  /* Semantic color aliases */
  --color-primary: var(--color-light-blue); /* Primary interactive color */
  --color-primary-alpha: rgba(31, 122, 184, 0.1); /* Focus ring for primary inputs */
  --color-surface: var(--color-white); /* Default surface / input background */

  /* Font Sizes */
  --font-tiny: 0.875rem;  /* 14px - used for labels and indicators */
  --font-small: 0.95rem;  /* 15.2px - used for secondary text */
  --font-base: 1rem;      /* 16px - used for body text */
  --font-medium: 1.4rem;  /* 22.4px - used for headings */
  --font-large: 1.6rem;   /* 25.6px - used for large headings */
  --font-minimum: 0.875rem; /* 14px - minimum readable size */
  /* Semantic font-size aliases */
  --font-size-sm: var(--font-tiny);   /* 14px - label and secondary text */
  --font-size-base: var(--font-base); /* 16px - body and input text */
  --font-weight-medium: 500;          /* Mid-weight for labels */

  /* Line Heights */
  --line-height-tight: 1;
  --line-height-base: 1.4;
  --line-height-relaxed: 1.5;
  --line-height-loose: 1.8;

  /* Spacing */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* Border Radius */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --border-radius-sm: 6px; /* Alias for --radius-sm */
  --border-radius-md: 8px; /* Alias for --radius-md */

  /* Box Shadow */
  --shadow-light: 0 2px 6px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-large: 0 4px 20px rgba(0, 0, 0, 0.3);
  --shadow-heavy: 0 8px 32px rgba(0, 0, 0, 0.25); /* Heavy shadow for prominent overlays */

  /* Skeleton Loaders */
  --skeleton-base: #e0e0e0;
  --skeleton-shimmer: #f5f5f5;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-success: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
  --gradient-card-hover: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
  --gradient-card-subtle: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  --gradient-card-highlighted: linear-gradient(to bottom, #ffffff, #f8fbff);

  /* Opacities */
  --opacity-disabled: 0.7;
  --opacity-muted: 0.6;
  --opacity-hint: 0.8;
  --opacity-subtle: 0.5;
  --opacity-loading: 0.7;
  --opacity-prominent: 0.9;

  /* Transitions */
  --transition-fast: 60ms ease;
  --transition-base: 120ms ease;
  --transition-slow: 200ms ease;
  --transition-animation: 0.3s ease-out;

  /* Animation Durations */
  --duration-shimmer: 1.5s;
  --duration-ripple: 0.6s;
  --duration-checkmark: 200ms;
  --duration-toast: 0.3s;
  --duration-modal: 200ms;
  --duration-pwd-meter: 160ms;
  --duration-accordion: 0.3s;

  /* Easing Functions */
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  /* Touch Targets (Accessibility) */
  --min-touch-target: 44px;
  --min-button-height: 44px;

  /* Button Specific */
  --button-padding-y: 12px;
  --button-padding-x: 16px;

  /* Container Widths */
  --container-narrow: 400px;
  --container-wide: 1000px;
  --container-max: 1200px;

  /* Avatar Sizes */
  --avatar-default: 80px;
  --avatar-compact: 60px;
  --avatar-mobile: 100px;
  --avatar-table: 36px;
  --avatar-form: 96px;

  /* Border Widths */
  --border-thin: 1px;
  --border-medium: 2px;
  --border-thick: 4px;

  /* Border Utilities */
  --border-default: 1px solid var(--color-border);
  --border-thick-default: 2px solid var(--color-border);

  /* Checkbox Dimensions */
  --checkbox-size: 14px;
  --checkbox-border-width: 1.5px;
  --checkbox-radius: 2px;
  --checkbox-checkmark-width: 3.5px;
  --checkbox-checkmark-height: 8px;
  --checkbox-spacing: 6px;

  /* Textarea Heights */
  --textarea-min-height-base: 100px;
  --textarea-min-height-desktop: 150px;
  --textarea-min-height-tablet: 180px;
  --textarea-min-height-mobile: 220px;

  /* Additional Spacing (Contextual) */
  --space-pwd-meter: 6px;
  --space-detail-gap: 4px;
  --gap-family-info: 8px;
  --gap-button-icon: 0.4rem;

  /* Table Column Widths (Admin) */
  --table-col-avatar: 53px;
  --table-col-name-full: 175px;
  --table-col-age: 138px;
  --table-col-actions: 138px;
  --table-col-date-width: 160px;

  /* Avatar Sizes (Additional) */
  --avatar-table-default: 45px;
  --avatar-table-tablet: 80px;
  --avatar-table-mobile: 60px;

  /* Button Dimensions (Compact) */
  --button-height-compact: 40px;
  --button-padding-compact: 10px 14px;

  /* Padding Values (Compact) */
  --padding-table-cell-compact: 3px 8px;
  --padding-table-cell: 4px 8px;
  --padding-family-header-mobile: 10px;

  /* Font Sizes (Additional) */
  --font-admin-action: 0.85em;
  --font-admin-summary: 0.9em;
  --font-admin-table: 0.7em;
  --font-admin-heading: 0.95em;
  --font-2sm: 0.75em;
  --font-2xs: 0.6875rem;
  --font-xs: 0.7rem;
  --font-footer-text: 0.8125rem;
  --font-footer-heading: 0.875rem;
  --font-footer-icon: 0.85em;
  --font-icon-toast: 1.2rem;
  --font-nav-tablet: 1.1rem;
  --font-label-small: 0.75rem;

  /* Opacity Values (Additional) */
  --opacity-zebra-stripe: 0.02;
  --opacity-admin-hover-bg: 0.1;
  --opacity-family-header: 0.8;
  --opacity-footer-border: 0.2;
  --opacity-footer-text: 0.7;
  --opacity-footer-label: 0.9;
  --opacity-modal-overlay: 0.5;
  --opacity-border-alpha: 0.1;

  /* Focus Indicators */
  --focus-outline-width: 3px;
  --focus-outline-offset: 2px;
  --focus-footer-outline: 2px;
  --focus-footer-offset: 3px;

  /* Dimensions (Additional) */
  --button-min-width: 80px;
  --button-table-min-width: 70px;
  --logo-height: 32px;
  --toast-min-width: 280px;
  --toast-max-width: 400px;
  --toast-close-size: 20px;
  --toast-mobile-padding: 12px;
  --toast-mobile-gap: 12px;
  --toast-mobile-icon-size: 16px;
  --toast-mobile-close-size: 16px;
  --toast-mobile-margin: 16px;
  --modal-width-mobile: 95%;
  --modal-width-desktop: 90%;
  --footer-label-min-width: 60px;
  --admin-table-min-width: 580px;
  --admin-table-col-avatar: 42px;
  --admin-table-col-name: 140px;
  --admin-table-col-age: 110px;
  --admin-table-col-actions: 220px;
  --detail-label-min-width: 80px;
  --members-max-height: 50000000px;
  --toggle-icon-min-width: 12px;
  --skip-link-hidden: -40px;

  /* Audition System Component Dimensions */
  --chat-sidebar-width: 400px; /* Max width for fixed chat sidebar */
  --chat-fab-size: 60px; /* Floating action button size (mobile) */
  --chat-toggle-size: 56px; /* Chat toggle button size (tablet/mobile) */
  --chat-close-size: 40px; /* Chat close button size */
  --chat-icon-size: 24px; /* Standard chat icon size */
  --chat-icon-large: 28px; /* Large chat icon size */
  --headshot-size: 120px; /* Member headshot dimensions */
  --empty-state-icon-size: 64px; /* Empty state icon size */
  --icon-xlarge: 48px; /* Extra large icon size for placeholders and errors */
  --loading-spinner-size: 40px; /* Loading spinner dimensions */
  --skeleton-card-height: 200px; /* Skeleton card height for loading states */
  --space-4xl: 80px; /* Extra large spacing for audition layouts */
  --space-chat-padding: 96px; /* Extra padding for floating summary button clearance */
  --container-audition-max: 1600px; /* Max width for audition page layout */

  /* Overlay Colors */
  --overlay-backdrop: rgba(0, 0, 0, 0.7); /* Dark backdrop for chat overlays */

  /* Transition Timings (Additional) */
  --transition-family-header: 0.2s ease;
  --transition-members-expand: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-opacity-expand: 0.2s ease;
  --transition-member-hover: 0.15s ease;
  --transition-toast-opacity: 0.2s;
  --transition-toggle-icon: 0.3s ease;

  /* Additional Durations */
  --duration-fade: 150ms;

  /* Hover/Active Transforms */
  --hover-scale-link: 1.05;
  --hover-translate-x: 2px;
  --hover-translate-y: -2px;
  --space-card-lift: -2px;
  --space-btn-active: 1px;

  /* Container Widths (Additional) */
  --container-admin-wide: 1600px;
  --container-admin-narrow: 1200px;
  --container-footer-max: 1200px;

  /* Color Values (Footer Specific) */
  --color-footer-gradient-start: #2c3e50;
  --color-footer-gradient-end: #34495e;
  --color-footer-link-hover: #5dade2;

  /* Button & Navigation Gradients (Teal) */
  --color-btn-teal-darkest: #0a6559;
  --color-btn-teal-dark: #0d7d6f;
  --color-btn-teal-primary: #11998e;
  --color-btn-teal-light: #16a085;
  --gradient-btn-teal: linear-gradient(135deg, var(--color-btn-teal-primary) 0%, var(--color-btn-teal-light) 100%);
  --gradient-btn-teal-hover: linear-gradient(135deg, var(--color-btn-teal-dark) 0%, var(--color-btn-teal-primary) 100%);
  --gradient-btn-teal-active: linear-gradient(135deg, var(--color-btn-teal-darkest) 0%, var(--color-btn-teal-dark) 100%);

  /* Additional Gradient Colors */
  --color-success-bright: #2dcc70;
  --color-blue-bg-light: #e3f2fd;
  --color-blue-bg-lighter: #bbdefb;
  --gradient-btn-success-hover: linear-gradient(135deg, var(--color-btn-teal-dark) 0%, var(--color-success-bright) 100%);
  --gradient-blue-bg: linear-gradient(135deg, var(--color-blue-bg-light) 0%, var(--color-blue-bg-lighter) 100%);

  /* Z-index Scale */
  --z-skip-link: 100;
  --z-toast: 9999;
  --z-modal: 10000;

  /* Navigation */
  --nav-height: 60px;
}

/* ============================================================================
   @PROPERTY DEFINITIONS
   ============================================================================
   Type-safe CSS custom properties with registered syntax for improved
   animation interpolation and validation. Enables smooth transitions for
   colors, durations, and other animatable values.

   Browser Support:
   - Chrome 85+ (August 2020)
   - Edge 85+ (August 2020)
   - Safari 16.4+ (March 2023)
   - Firefox: NOT SUPPORTED (graceful degradation to :root variables)

   Fallback: All properties defined in :root (line 42-327) for browsers
   without @property support. No functionality is lost.
   ============================================================================ */

@property --duration-ripple {
  syntax: '<time>';
  initial-value: 0.6s;
  inherits: false;
}

@property --transition-members-expand {
  syntax: '<time>';
  initial-value: 0.2s;
  inherits: false;
}

@property --color-light-blue {
  syntax: '<color>';
  initial-value: #1f7ab8;
  inherits: false;
}

@property --color-admin-hover {
  syntax: '<color>';
  initial-value: #5dade2;
  inherits: false;
}

@property --btn-hover {
  syntax: '<color>';
  initial-value: #415e79;
  inherits: false;
}

@property --color-success {
  syntax: '<color>';
  initial-value: #1e8449;
  inherits: false;
}

/* ============================================================================
   2. BASE STYLES & RESET
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  overflow-x: hidden;
}

input,
select,
textarea {
  padding: var(--space-xs);
  max-width: 100%;
  box-sizing: border-box;
}

/* Select dropdown styling */
select {
  width: 100%;
  padding: var(--space-sm);
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--color-border, #cbd5e0);
  border-radius: var(--radius-md, 8px);
  background-color: var(--color-white, #ffffff);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

select:hover {
  border-color: var(--color-light-blue);
}

select:focus {
  outline: none;
  border-color: var(--color-light-blue);
  box-shadow: 0 0 0 3px rgba(31, 122, 184, 0.1);
}

select:disabled {
  background-color: var(--color-disabled-bg, #f7fafc);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Textarea-specific styling for acting experience field */
textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: var(--space-sm);
  border: 1px solid var(--color-border, #cbd5e0);
  border-radius: var(--radius-md, 8px);
  resize: vertical;
  min-height: 100px;
  width: 100%;
}

textarea:focus {
  outline: 2px solid var(--color-light-blue);
  outline-offset: 2px;
}

/* Responsive textarea rows for acting_experience */
#acting_experience {
  width: 100%;
}

/* Desktop: 6 rows */
@media (min-width: 769px) {
  #acting_experience {
    min-height: 150px;
  }
}

/* Tablet: 8 rows - narrower width needs more rows */
@media (max-width: 768px) and (min-width: 481px) {
  #acting_experience {
    min-height: 180px;
  }
}

/* Mobile: 10 rows - narrow width needs even more rows */
@media (max-width: 480px) {
  #acting_experience {
    min-height: 220px;
  }
}

/* Character counter warning */
.hint .warning {
  color: var(--color-warning);
  font-weight: 500;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  margin: 0;
  padding: 0;
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  width: 100%;
}

main {
  flex: 1;
}

/* General link styles - exclude nav and button links */
main a:not(.btn):not(button):not([role="button"]),
.container a:not(.btn):not(button):not([role="button"]),
.switch a {
  transition: all var(--transition-base);
  display: inline-block;
}

main a:not(.btn):not(button):not([role="button"]):hover,
.container a:not(.btn):not(button):not([role="button"]):hover,
.switch a:hover {
  transform: scale(1.05);
}

/* ============================================================================
   3. NAVIGATION
   ============================================================================ */
nav {
  background: linear-gradient(135deg, var(--color-dark-blue) 0%, var(--color-footer-gradient-end) 100%);
  padding: var(--space-sm) var(--space-lg);
  color: var(--color-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  min-height: var(--nav-height);
}

/* Logo/Home link in nav - ensure minimum touch target */
nav a[id="home-icon"] {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch-target);
  padding: var(--space-pwd-meter) 0;
  flex-shrink: 0;
}

nav h1 {
  margin: 0;
  font-size: var(--font-medium);
  flex-grow: 1;
  text-align: center;
}

/* Admin Link Button in Nav */
.admin-link {
  color: var(--color-light-text);
  text-decoration: none;
  font-size: var(--font-small);
  background: var(--color-admin-bg);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--min-touch-target);
  white-space: nowrap;
}

.admin-link:hover {
  background: var(--color-admin-hover);
  color: var(--color-dark-blue);
}

/* ============================================================================
   4. CONTAINERS & LAYOUT
   ============================================================================ */
.container {
  max-width: var(--container-narrow);
  margin: var(--space-xl) auto;
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-light);
}

/* Wider page container for dashboards/details */
.container--wide {
  max-width: var(--container-wide); /* match admin page width */
  margin: var(--space-xl) auto;
  padding: var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-light);
}

/* Optional: tidy page sections */
.section {
  margin-top: var(--space-lg);
}
.section h3 {
  margin: 0 0 var(--space-sm);
}

/* Section header with action button */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  gap: var(--space-md);
}

.section-header h3 {
  margin: 0;
  flex: 1;
}

/* Section divider - subtle border with generous spacing */
.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2xl) 0;
  opacity: 0.5;
}

/* Responsive adjustment for mobile */
@media (max-width: 480px) {
  .section-divider {
    margin: var(--space-xl) 0;
  }
}

/* ============================================================================
   5. TYPOGRAPHY
   ============================================================================ */
h2 {
  text-align: center;
  color: var(--color-dark-blue);
}

/* ============================================================================
   6. FORMS & INPUTS
   ============================================================================ */
label {
  display: block;
  margin: var(--space-md) 0 var(--space-xs);
  color: var(--color-text);
}

input {
  width: 100%;
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* ============================================================================
   7. BUTTONS
   ============================================================================ */
button,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;

  width: auto;                    /* ← stop stretching */
  min-height: var(--min-button-height); /* ← ensure minimum touch target */
  padding: var(--button-padding-y) var(--button-padding-x); /* ← increased padding for touch targets */
  font-size: var(--font-base);

  color: var(--btn-text);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  box-shadow: var(--shadow-light);
  transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
  text-decoration: none; /* Remove underline from links */
}

button:hover,
.btn:hover {
  background: var(--btn-hover);
}

button:active,
.btn:active {
  background: var(--btn-active);
  transform: translateY(1px);
}

/* === Disabled State for Inputs and Buttons === */
input:disabled,
button:disabled {
  background-color: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  border: 1px solid var(--color-disabled-border);
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

.btn-danger {
  background: var(--color-danger-button);
  color: var(--color-white);
  border-color: var(--color-danger-button-hover);
}
.btn-danger:hover {
  background: var(--color-danger-button-hover);
  color: var(--color-white);
}
.btn-danger:active {
  background: var(--color-danger-button-active);
  color: var(--color-white);
}

/* === Primary button (medium blue, matches default button) === */
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text);
  border: 1px solid var(--btn-border);
  box-shadow: var(--shadow-light);
  transition: background var(--transition-base), transform var(--transition-fast), box-shadow var(--transition-base);
}

.btn-primary:hover {
  background: var(--btn-hover);
  color: var(--btn-text);
}

.btn-primary:active {
  background: var(--btn-active);
  transform: translateY(1px);
  color: var(--btn-text);
}

/* === Secondary button (neutral gray) === */
.btn-secondary {
  background: var(--color-bg-secondary);
  color: var(--color-text);
  border: var(--border-medium) solid var(--color-border);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.btn-secondary:hover {
  background: var(--color-divider);
  border-color: var(--color-text-muted);
}

.btn-secondary:active {
  background: var(--color-border);
}

/* === Success button (green, for Publish action) === */
.btn-success {
  background: linear-gradient(135deg, var(--color-success-light), var(--color-success));
  color: var(--color-white);
  border: var(--border-medium) solid var(--color-success);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  font-size: inherit; /* Ensure it matches other buttons */
}

.btn-success:hover {
  background: linear-gradient(135deg, var(--color-success), var(--color-success-light));
  box-shadow: 0 4px 12px rgba(30, 132, 73, 0.3);
  transform: translateY(-1px);
}

.btn-success:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(30, 132, 73, 0.2);
}

.btn-success:disabled {
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
  transform: none;
  box-shadow: none;
}

/* === Sign in button === */
.signin-button {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
}

/* === Switch Link (e.g., Login/Register toggle) === */
.switch {
  text-align: center;
  margin-top: var(--space-sm);
}

.switch a {
  color: var(--color-light-blue);
  text-decoration: none;
  display: inline-block;
  min-height: var(--min-touch-target); /* ← ensure minimum touch target */
  padding: var(--button-padding-y) 4px; /* ← vertical padding for touch target */
  line-height: 20px;
}

/* === Return Home Button === */
#returnHome button {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-base);
  background-color: var(--color-blue-button);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
}

#returnHome button:hover {
  background-color: var(--color-blue-button-hover);
}

/* === Navigation Bar Shared Header === */
#main-nav {
  background: linear-gradient(135deg, var(--color-dark-blue) 0%, var(--color-footer-gradient-end) 100%);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}

#main-nav h1 {
  margin: 0;
  font-size: var(--font-medium);
}

#nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* 3-column layout (pages with logo): center title between equal-width bookends */
#main-nav #home-icon {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#main-nav #home-icon + h1 {
  flex: 1 1 0%;
  min-width: 0;
  text-align: center;
}

#main-nav #home-icon ~ #nav-actions {
  flex: 1 1 0%;
  min-width: 0;
  justify-content: flex-end;
}

/* Also apply 3-column centering to generic nav elements (like index.html) */
nav #home-icon {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

nav #home-icon + h1 {
  flex: 1 1 0%;
  min-width: 0;
  text-align: center;
}

/* For index.html with admin-link button, center title absolutely */
header > nav #home-icon + h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
}

/* For pages with admin-link button, make it fixed width and float right */
nav #home-icon + h1 + a.admin-link {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: var(--button-padding-y) var(--button-padding-x);
  font-size: var(--font-small);
  margin-left: auto;
}

/* Target div containers after h1 in nav (for #nav-actions) */
nav #home-icon + h1 + div {
  flex: 1 1 0%;
  min-width: 0;
  justify-content: flex-end;
  display: flex;
  align-items: center;
}

#nav-actions a,
#nav-actions button {
  color: var(--color-light-text);
  text-decoration: none;
  margin-left: var(--space-md);
  background: var(--btn-bg);
  border: 1px solid var(--btn-border);
  cursor: pointer;
  font-size: var(--font-small);
  padding: var(--button-padding-y) var(--button-padding-x); /* ← increased for touch target */
  border-radius: var(--radius-sm);
  background-color: var(--color-admin-bg);
  min-height: var(--min-touch-target);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

#nav-actions a:hover,
#nav-actions button:hover {
  background: var(--btn-hover);
}

#nav-actions button:active { background: var(--btn-active); }

/* === Page Navigation (Secondary Navigation) === */
.page-nav {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-lg);
  flex-wrap: wrap;
  background: none;
  padding: 0;
  justify-content: flex-start;
}

.page-nav a {
  color: var(--color-white);
  text-decoration: none;
  background: var(--gradient-btn-teal);
  border: 1px solid var(--btn-border);
  cursor: pointer;
  font-size: var(--font-small);
  padding: var(--button-padding-y) var(--button-padding-x);
  border-radius: var(--radius-sm);
  min-height: var(--min-touch-target);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 2px 4px rgba(17, 153, 142, 0.2);
}

.page-nav a:hover {
  background: var(--gradient-btn-teal-hover);
  box-shadow: 0 4px 8px rgba(17, 153, 142, 0.3);
}

.page-nav a:active {
  background: var(--gradient-btn-teal-active);
  box-shadow: 0 1px 2px rgba(17, 153, 142, 0.2);
}

.page-nav a:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

#membersTable,
.membersTable,
.adminsTable {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-md);
}

#membersTable th,
#membersTable td,
.membersTable th,
.membersTable td,
.adminsTable th,
.adminsTable td  {
  border: 1px solid var(--color-border);
  padding: var(--space-sm);
  text-align: left;
}

#membersTable th,
.membersTable th,
.adminsTable th {
  background-color: var(--color-light-blue);
  color: var(--color-white);
}

/* === Presence Indicators === */
.presence-indicators {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-right: var(--space-md);
  padding: var(--space-xs) var(--space-sm);
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
}

.presence-indicators-label {
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

.presence-list {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

.presence-user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-xs);
  background: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-size: var(--font-small);
  white-space: nowrap;
}

.presence-user-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-success);
  flex-shrink: 0;
}

.presence-user-name {
  font-weight: 500;
}

.presence-user.pilot .presence-user-name::after {
  content: ' (Pilot)';
  font-weight: 400;
  opacity: 0.8;
}

.presence-user.copilot .presence-user-name::after {
  content: ' (Copilot)';
  font-weight: 400;
  opacity: 0.8;
}

.presence-user.viewer .presence-user-name::after {
  content: ' (Viewer)';
  font-weight: 400;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .presence-indicators {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-xs);
    margin-right: var(--space-sm);
  }

  .presence-list {
    flex-wrap: wrap;
  }

  .presence-user {
    font-size: var(--font-tiny);
    padding: var(--space-3xs) var(--space-2xs);
  }
}

/* === Editing Indicators === */
.editing-indicator {
  position: absolute;
  top: -24px;
  left: 0;
  font-size: var(--font-tiny);
  color: var(--color-light-blue);
  font-weight: 500;
  padding: var(--space-3xs) var(--space-xs);
  background: rgba(100, 149, 237, 0.1);
  border-radius: var(--radius-sm);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
  z-index: 10;
}

.editing-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

.editing-indicator::before {
  content: '✏️ ';
  margin-right: var(--space-3xs);
}

/* Input wrapper for positioning editing indicator */
.input-with-indicator {
  position: relative;
}

/* === Auth Utilities (Forgot / Reset) === */
.message {
  margin-top: var(--space-sm);
  font-size: var(--font-small);
  color: var(--color-text);
}

.message.success {
  color: var(--color-success);
}

.message.error {
  color: var(--color-red);
}

.inline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  justify-content: space-between;
}

.hint {
  margin-top: calc(var(--space-xs) + 2px);
  font-size: var(--font-minimum); /* Ensure minimum readable size */
  color: var(--color-text);
  opacity: var(--opacity-hint);
  font-weight: 500;
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-pwd-meter);
  font-size: var(--font-small);
  color: var(--color-text);
  user-select: none;
}

.link {
  color: var(--color-light-blue);
  text-decoration: none;
  display: inline-block;
  min-height: var(--min-touch-target); /* ← ensure minimum touch target */
  padding: var(--button-padding-y) 4px; /* ← vertical padding for touch target */
  line-height: 20px;
}

.link:hover {
  text-decoration: underline;
}

/* Details/summary accordion styling */
#panel-members details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  margin: var(--space-sm) 0;
  overflow: hidden; /* keeps table corners rounded */
}

#panel-members summary {
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-subtle);
  font-weight: 600;
  list-style: none;
  border-bottom: 1px solid var(--color-border);
}
#panel-members summary::-webkit-details-marker { display: none; }

/* Members table refinements */
.membersTable thead th {
  position: sticky;
  top: 0;
}

.membersTable tbody tr:nth-child(even) {
  background: var(--color-table-zebra); /* zebra striping */
}

.membersTable tbody tr:hover {
  background: var(--color-table-hover); /* subtle hover */
}

/* Generic responsive form grid */
.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}
@media (min-width: 720px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
  }
  .form-grid .full {
    grid-column: 1 / -1; /* make selected rows span both columns */
  }
}

/* Fieldset polish */
fieldset {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
}
legend {
  padding: 0 var(--space-sm);
  color: var(--color-text);
  font-weight: 600;
}

/* Inline button row */
.form-actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-start;
  margin-top: var(--space-md);
}

/* ============================================================================
   8. PASSWORD HELPERS
   ============================================================================ */
.pwd-meter {
  margin-top: var(--space-pwd-meter);
}
.pwd-meter__bar {
  height: var(--space-pwd-meter);
  width: 0%;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  transition: width var(--duration-pwd-meter) ease, background var(--duration-pwd-meter) ease;
}
.pwd-meter__label {
  font-size: var(--font-minimum); /* Ensure minimum readable size */
  margin-top: var(--space-pwd-meter);
  color: var(--color-text);
  opacity: 0.9;
}
.pwd-reqs {
  list-style: none;
  padding-left: 0;
  margin: var(--space-pwd-meter) 0 0 0;
  font-size: var(--font-minimum); /* Ensure minimum readable size */
}
.pwd-reqs li {
  margin: var(--space-3xs) 0;
}
.pwd-reqs li.ok {
  color: var(--color-success);
}
.pwd-reqs li.ok::before {
  content: "✔ ";
}
.pwd-reqs li.bad {
  color: var(--color-red);
}
.pwd-reqs li.bad::before {
  content: "✖ ";
}
.hint.ok { color: var(--color-success); }
.hint.bad { color: var(--color-red); }

/* ============================================================================
   11. TOAST NOTIFICATIONS
   ============================================================================ */
.toast-container {
  position: fixed;
  top: var(--space-lg);
  right: var(--space-lg);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}

.toast {
  min-width: var(--toast-min-width);
  max-width: var(--toast-max-width);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-medium);
  border-left: var(--border-thick) solid var(--color-light-blue);
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  animation: toast-in var(--duration-toast) ease-out;
}

.toast.toast-success {
  border-left-color: var(--color-success-light);
}

.toast.toast-error {
  border-left-color: var(--color-red);
}

.toast.toast-info {
  border-left-color: var(--color-light-blue);
}

.toast.toast-out {
  animation: toast-out var(--duration-toast) ease-in forwards;
}

.toast-icon {
  flex-shrink: 0;
  font-size: var(--font-icon-toast);
  line-height: 1;
}

.toast-content {
  flex: 1;
  font-size: var(--font-small);
  line-height: var(--line-height-base);
  color: var(--color-text);
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  width: var(--toast-close-size);
  height: var(--toast-close-size);
  cursor: pointer;
  color: var(--color-text);
  opacity: 0.5;
  font-size: var(--font-icon-toast);
  line-height: 1;
  transition: opacity var(--transition-toast-opacity);
}

.toast-close:hover {
  opacity: 1;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

/* Mobile and tablet responsiveness */
@media (max-width: 768px) {
  /* Ensure navigation is responsive */
  nav, #main-nav {
    padding: var(--space-sm);
    gap: var(--space-xs);
  }

  nav h1, #main-nav h1 {
    font-size: var(--font-nav-tablet);
    text-align: left;
    flex-shrink: 1;
    min-width: 0;
  }

  #nav-actions {
    gap: var(--space-xs);
    flex-wrap: wrap;
  }

  #nav-actions button,
  #nav-actions a {
    white-space: nowrap;
    padding: var(--space-xs) var(--space-sm);
  }

  .page-nav {
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
  }

  .page-nav a {
    font-size: var(--font-minimum);
    padding: var(--space-xs) var(--space-sm);
  }
}

/* Tablet/small desktop: stack nav on narrower screens */
@media (max-width: 600px) {
  nav, #main-nav {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  nav h1, #main-nav h1 {
    flex: 1 1 100%;
    text-align: center;
    font-size: var(--font-nav-tablet);
  }

  /* Reset absolute positioning for mobile */
  header > nav #home-icon + h1 {
    position: static;
    transform: none;
    width: 100%;
  }

  #nav-actions {
    flex: 1 1 100%;
    justify-content: center;
  }

  /* Hide divider on small screens to save space */
  .nav-divider {
    display: none;
  }

  .page-nav {
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    flex-wrap: wrap;
  }

  .page-nav a {
    padding: var(--space-xs) var(--space-sm);
  }
}

/* On very small screens, center everything */
@media (max-width: 480px) {
  nav, #main-nav {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  nav h1, #main-nav h1 {
    font-size: 1rem;
    text-align: center;
    width: 100%;
  }

  nav a[id="home-icon"] {
    order: -1;
  }

  #nav-actions {
    flex-direction: column;
    width: 100%;
    gap: var(--space-xs);
    align-items: stretch;
  }

  #nav-actions button,
  #nav-actions a {
    width: 100%;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .page-nav {
    flex-direction: column;
    gap: var(--space-xs);
    margin-bottom: var(--space-md);
    width: 100%;
  }

  .page-nav a {
    width: 100%;
    text-align: center;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .admin-link {
    width: 100%;
  }

  /* Section header: stack on mobile */
  .section-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
  }

  .section-header h3 {
    text-align: center;
  }

  .section-header button {
    width: 100%;
  }

  /* Container adjustments */
  .container, .container--wide {
    padding: var(--space-sm);
    margin: var(--space-sm) auto;
  }

  /* Table responsiveness - wrap in scrollable container */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure buttons in tables don't shrink too much */
  table button {
    white-space: nowrap;
  }

  /* Grid layouts should collapse on mobile */
  .color-grid {
    grid-template-columns: 1fr;
  }

  .inline {
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* Ensure forms don't overflow */
  input, select, textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Form actions: stack buttons vertically on mobile */
  .form-actions {
    flex-direction: column;
    width: 100%;
  }

  .form-actions button {
    width: 100%;
  }
}

/* ============================================================================
   12. CONFIRMATION MODALS
   ============================================================================ */
.confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, var(--opacity-modal-overlay));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  animation: fadeIn var(--duration-fade) ease;
}

.confirm-modal {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  max-width: var(--container-narrow);
  width: var(--modal-width-desktop);
  box-shadow: var(--shadow-large);
  animation: slideIn var(--duration-modal) ease;
}

.confirm-message {
  font-size: var(--font-base);
  color: var(--color-text);
  margin: 0 0 var(--space-lg) 0;
  line-height: var(--line-height-relaxed);
}

.confirm-buttons {
  display: flex;
  gap: var(--space-sm);
  justify-content: flex-end;
}

.confirm-buttons button {
  min-width: var(--button-min-width);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from {
    transform: translateY(var(--skip-link-hidden));
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* =================================================================
   21.5 Add Show Modal (Seasons Page)
   ================================================================= */

.add-show-modal {
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}

.modal-title {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
}

.modal-subtitle {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-admin-summary);
  color: var(--color-text-muted);
}

.modal-subtitle span {
  font-weight: 600;
  color: var(--color-text);
}

/* Modal search input */
.add-show-modal .search-container {
  margin-bottom: var(--space-md);
}

.add-show-modal .search-input {
  width: 100%;
  padding: var(--space-xs);
  border: var(--border-medium) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-admin-summary);
  transition: border-color var(--transition-fast);
}

.add-show-modal .search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Shows list (scrollable) */
.modal-shows-list {
  flex: 1;
  overflow-y: auto;
  margin-bottom: var(--space-md);
  border: var(--border-medium) solid var(--color-border);
  border-radius: var(--radius-sm);
  max-height: 300px;
}

.modal-show-item {
  display: block;
  width: 100%;
  padding: var(--space-xs) var(--space-md);
  text-align: left;
  background: var(--color-white);
  border: none;
  border-bottom: var(--border-thin) solid var(--color-border);
  font-size: var(--font-admin-summary);
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.modal-show-item:last-child {
  border-bottom: none;
}

.modal-show-item:hover {
  background-color: var(--color-hover);
}

.modal-show-item:active {
  background-color: var(--color-admin-hover);
}

.modal-show-item:focus-visible {
  outline: var(--border-medium) solid var(--color-primary);
  outline-offset: -2px;
  z-index: 1;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin-top: var(--space-md);
}

/* Mobile-specific overrides */
@media (max-width: 480px) {
  .toast-container {
    top: var(--toast-mobile-margin);
    right: var(--toast-mobile-margin);
    left: var(--toast-mobile-margin);
  }

  .toast {
    min-width: 0;
    width: calc(100vw - var(--toast-mobile-margin) * 2);
    max-width: none;
    padding: var(--toast-mobile-padding);
    gap: var(--toast-mobile-gap);
    box-sizing: border-box;
  }

  .toast-icon {
    font-size: var(--toast-mobile-icon-size);
    width: var(--toast-mobile-icon-size);
    height: var(--toast-mobile-icon-size);
  }

  .toast-content {
    font-size: 14px;
    line-height: 1.5;
    min-width: 0;
    flex: 1;
  }

  .toast-close {
    width: var(--toast-mobile-close-size);
    height: var(--toast-mobile-close-size);
    min-width: var(--toast-mobile-close-size);
    font-size: var(--toast-mobile-close-size);
  }

  .confirm-modal {
    width: var(--modal-width-mobile);
    padding: var(--space-md);
  }

  .confirm-buttons {
    flex-direction: column-reverse;
  }

  .confirm-buttons button {
    width: 100%;
  }

  .add-show-modal {
    max-width: 90vw;
    max-height: 90vh;
  }

  .modal-title {
    font-size: 1.125rem;
  }

  .modal-shows-list {
    max-height: 200px;
  }

  .modal-show-item {
    padding: var(--space-sm);
  }

  /* Smaller typography on mobile */
  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  /* Tighter spacing on mobile */
  .demo-section {
    padding: var(--space-md);
  }

  /* Button groups should stack on mobile */
  .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  .button-group button {
    width: 100%;
  }
}

/* ============================================================================
   13. MEMBER CARDS (Component System)
   ============================================================================
   Modern card-based component system with BEM naming convention.
   Features responsive grid layout, hover effects, and multiple variants.
   ============================================================================ */
.member-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-md);
  align-items: start;
}

.member-card {
  background: var(--gradient-card-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-light);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background var(--transition-slow);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  position: relative;
  overflow: hidden;
}

.member-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-card-hover);
  opacity: 0;
  transition: opacity var(--transition-slow);
  pointer-events: none;
}

.member-card:hover {
  transform: translateY(var(--space-card-lift));
  box-shadow: var(--shadow-medium);
}

.member-card:hover::before {
  opacity: 1;
}

.member-card__header {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.member-card__avatar {
  width: var(--avatar-default);
  height: var(--avatar-default);
  border-radius: 50%;
  object-fit: cover;
  border: var(--border-medium) solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-avatar-fallback);
}

.member-card__info {
  flex: 1;
  min-width: 0;
}

.member-card__name {
  font-size: var(--font-medium);
  font-weight: 600;
  color: var(--color-dark-blue);
  margin: 0 0 var(--space-xs) 0;
  word-wrap: break-word;
}

.member-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
  position: relative;
  z-index: 1;
}

.member-card__detail-row {
  display: flex;
  gap: var(--space-xs);
  font-size: var(--font-small);
  color: var(--color-text);
}

.member-card__detail-label {
  font-weight: 600;
  min-width: var(--detail-label-min-width);
  color: var(--color-dark-blue);
}

.member-card__detail-value {
  color: var(--color-text);
}

.member-card__actions {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-divider);
  position: relative;
  z-index: 1;
}

.member-card__actions button {
  flex: 1;
  padding: var(--button-padding-compact);
  min-height: 40px;
}

/* Card variant: Compact */
.member-card--compact {
  padding: var(--space-md);
}

.member-card--compact .member-card__avatar {
  width: var(--avatar-compact);
  height: var(--avatar-compact);
}

.member-card--compact .member-card__name {
  font-size: var(--font-base);
}

.member-card--compact .member-card__details {
  gap: var(--space-detail-gap);
}

/* Card variant: Highlighted */
.member-card--highlighted {
  border: var(--border-medium) solid var(--color-light-blue);
  background: var(--gradient-card-highlighted);
}

/* Card responsive adjustments */
@media (max-width: 768px) {
  .member-cards {
    grid-template-columns: 1fr;
  }

  .member-card__actions {
    flex-direction: column;
  }

  .member-card__actions button {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .member-card {
    padding: var(--space-md);
  }

  .member-card__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .member-card__avatar {
    width: var(--avatar-mobile);
    height: var(--avatar-mobile);
  }

  .member-card__detail-row {
    flex-direction: column;
    gap: var(--space-3xs);
  }

  .member-card__detail-label {
    min-width: auto;
  }
}

/* ============================================================================
   14. SKELETON LOADERS
   ============================================================================
   Animated loading placeholders with shimmer effect for improved perceived
   performance. Automatically disabled for users who prefer reduced motion.
   ============================================================================ */
.skeleton {
  background: var(--skeleton-base);
  background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shimmer) 50%, var(--skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer var(--duration-shimmer) ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Skeleton variants */
.skeleton-text {
  height: 1em;
  margin-bottom: var(--space-xs);
}

.skeleton-text--large {
  height: 1.5em;
}

.skeleton-avatar {
  width: var(--avatar-default);
  height: var(--avatar-default);
  border-radius: 50%;
}

.skeleton-avatar--compact {
  width: var(--avatar-compact);
  height: var(--avatar-compact);
}

.skeleton-button {
  height: var(--min-button-height);
  border-radius: var(--radius-sm);
}

/* Skeleton card structure */
.skeleton-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  box-shadow: var(--shadow-light);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.skeleton-card__header {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.skeleton-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.skeleton-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.skeleton-card__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-divider);
}

/* Loading state for sections */
.loading-section {
  padding: var(--space-lg);
  text-align: center;
  color: var(--color-text);
  opacity: var(--opacity-loading);
}

/* ============================================================================
   15. FLOATING LABELS
   ============================================================================
   Modern outlined form inputs with labels that animate to the border line when
   focused or filled. Includes hint text support above inputs.
   Maintains accessibility with proper label-input association.

   Structure:
   <div class="floating-label-group">
     <span class="hint-text">Hint text here</span>
     <div class="input-container">
       <input placeholder=" " />
       <label>Label Text</label>
     </div>
   </div>
   ============================================================================ */
.floating-label-group {
  margin-bottom: var(--space-lg);
}

/* Hint text styling - appears above the input field */
.floating-label-group .hint-text {
  display: block;
  font-size: var(--font-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
  line-height: var(--line-height-base);
  font-weight: 500;
}

/* Container for the input and label - this is the relative positioning context */
.floating-label-group .input-container {
  position: relative;
}

.floating-label-group input,
.floating-label-group select,
.floating-label-group textarea {
  display: block;
  width: 100%;
  padding: var(--space-md) var(--space-sm);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  transition: all var(--transition-slow);
  background: var(--color-white);
  box-sizing: border-box;
  margin: 0;
}

.floating-label-group input:focus,
.floating-label-group select:focus,
.floating-label-group textarea:focus {
  outline: none;
  border-color: var(--color-light-blue);
  border-width: 2px;
}

.floating-label-group label {
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  transition: all var(--transition-slow);
  font-size: var(--font-base);
  margin: 0;
  background: var(--color-white);
  padding: 0 var(--space-2xs);
  font-weight: 500;
}

/* Required indicator */
.floating-label-group label .required {
  color: var(--color-red);
}

/* Focused or filled state - label moves to border line */
.floating-label-group input:focus ~ label,
.floating-label-group input:not(:placeholder-shown) ~ label,
.floating-label-group select:focus ~ label,
.floating-label-group select:not([value=""]) ~ label,
.floating-label-group textarea:focus ~ label,
.floating-label-group textarea:not(:placeholder-shown) ~ label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--color-light-blue);
  font-weight: 500;
}

/* For inputs that have values on load */
.floating-label-group input.has-value ~ label,
.floating-label-group select.has-value ~ label,
.floating-label-group textarea.has-value ~ label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--color-light-blue);
  font-weight: 500;
}

/* Textarea adjustments - default label position */
.floating-label-group textarea ~ label {
  top: var(--space-lg);
  transform: translateY(0);
}

/* Textarea focused/filled label position */
.floating-label-group textarea:focus ~ label,
.floating-label-group textarea:not(:placeholder-shown) ~ label,
.floating-label-group textarea.has-value ~ label {
  top: 0;
  transform: translateY(-50%);
}

/* DOB three-field group */
.dob-group {
  margin-bottom: var(--space-md);
}

.dob-inputs {
  display: flex;
  gap: var(--space-sm);
}

.dob-field {
  flex: 1;
}

.dob-field--year {
  flex: 1.4;
}

.dob-field select,
.dob-field input[type="number"] {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  box-sizing: border-box;
  -moz-appearance: textfield; /* Firefox: remove number spinner */
}

.dob-field select:focus,
.dob-field input[type="number"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-alpha);
}

/* Remove number spinner arrows */
.dob-field input[type="number"]::-webkit-inner-spin-button,
.dob-field input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

/* ============================================================================
   16. MICRO-INTERACTIONS (Ripple & Checkboxes)
   ============================================================================
   Delightful animations that provide visual feedback for user interactions.
   Includes Material Design-inspired ripple effects and animated checkboxes.
   ============================================================================ */

/* Button ripple effect */
.ripple {
  position: relative;
  overflow: hidden;
}

.ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translate(-50%, -50%);
  transition: width var(--duration-ripple), height var(--duration-ripple);
}

.ripple:active::after {
  width: 300px;
  height: 300px;
  transition: width 0s, height 0s;
}

/* Checkbox animations */
input[type="checkbox"] {
  appearance: none;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-border);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-slow);
  background: var(--color-white);
  vertical-align: middle;
  margin-right: 6px;
  margin-bottom: 2px;
  flex-shrink: 0;
}

input[type="checkbox"]:checked {
  background: var(--color-light-blue);
  border-color: var(--color-light-blue);
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3.5px;
  height: 8px;
  border: solid var(--color-white);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -60%) rotate(45deg);
  animation: checkmark-draw var(--duration-checkmark) ease forwards;
}

@keyframes checkmark-draw {
  0% {
    height: 0;
  }
  100% {
    height: 8px;
  }
}

input[type="checkbox"]:hover {
  border-color: var(--color-light-blue);
}

input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 122, 184, 0.2);
}

input[type="checkbox"]:disabled {
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
}

input[type="checkbox"]:disabled:checked {
  background: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
}

input[type="checkbox"]:disabled:checked::after {
  border-color: var(--color-disabled-text);
}

/* ============================================================================
   17. ENHANCED ACCESSIBILITY
   ============================================================================
   Comprehensive accessibility features including focus indicators, skip links,
   reduced motion support, high contrast mode, and keyboard shortcuts.
   ============================================================================ */

/* Enhanced focus indicators for keyboard navigation */
:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-light-blue);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-sm);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: var(--focus-outline-width) solid var(--color-light-blue);
  outline-offset: var(--focus-outline-offset);
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: var(--skip-link-hidden);
  left: 0;
  background: var(--color-light-blue);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: var(--z-skip-link);
}

.skip-link:focus {
  top: 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Disable skeleton shimmer for reduced motion */
  .skeleton {
    animation: none;
    background: var(--skeleton-base);
  }

  /* Disable ripple effects for reduced motion */
  .ripple::after {
    display: none;
  }

  /* Disable card gradient hover for reduced motion */
  .member-card::before {
    display: none;
  }

  /* Disable checkmark animation */
  input[type="checkbox"]:checked::after {
    animation: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  :root {
    --color-border: #000;
    --color-text: #000;
  }

  button {
    border-width: 2px;
  }

  .member-card {
    border-width: 2px;
  }
}

/* Keyboard shortcut hints */
.keyboard-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--font-minimum);
  color: var(--color-text);
  opacity: var(--opacity-disabled);
  margin-left: var(--space-xs);
}

.keyboard-hint kbd {
  background: var(--color-disabled-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-family: monospace;
  font-size: 0.85em;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

/* ============================================================================
   18. RESPONSIVE OVERRIDES
   ============================================================================
   Media queries for mobile and tablet layouts.
   ============================================================================ */

@media (max-width: 768px) {
  #main-nav h1 {
    font-size: var(--font-large);
  }

  .container {
    padding: var(--space-md);
  }

  .member-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  #main-nav {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  button, .btn {
    min-width: 100%;
  }
}

/* ============================================================================
   19. SITE FOOTER
   ============================================================================
   Reusable footer component with contact information and external links.
   Uses BEM naming convention for maintainability.
   ============================================================================ */

.site-footer {
  background: linear-gradient(135deg, var(--color-footer-gradient-start) 0%, var(--color-footer-gradient-end) 100%);
  color: var(--color-white);
  padding: var(--space-md) var(--space-md);
  margin-top: var(--space-xl);
  border-top: var(--border-medium) solid var(--color-light-blue);
}

.site-footer__container {
  max-width: var(--container-footer-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-thin) solid rgba(255, 255, 255, var(--opacity-footer-border));
}

.site-footer__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.site-footer__heading {
  font-size: var(--font-footer-heading);
  font-weight: 600;
  margin: 0;
  padding: 0 0 var(--space-2xs) 0;
  color: var(--color-footer-link-hover);
  border-bottom: var(--border-thin) solid rgba(255, 255, 255, var(--opacity-footer-border));
  line-height: 1.2;
}

.site-footer__address {
  font-style: normal;
  line-height: 1.5;
  font-size: var(--font-footer-text);
}

.site-footer__address-line {
  margin: 0 0 var(--space-3xs) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.site-footer__label {
  font-weight: 600;
  color: rgba(255, 255, 255, var(--opacity-footer-label));
  min-width: var(--footer-label-min-width);
}

.site-footer__link {
  color: var(--color-white);
  text-decoration: none;
  transition: all var(--transition-base);
  display: inline-block;
}

.site-footer__link:hover {
  color: var(--color-footer-link-hover);
  transform: scale(var(--hover-scale-link));
}

.site-footer__link:focus-visible {
  outline: var(--focus-footer-outline) solid var(--color-white);
  outline-offset: var(--focus-footer-offset);
  border-radius: var(--radius-sm);
}

.site-footer__link--external {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 500;
}

.site-footer__external-icon {
  font-size: var(--font-footer-icon);
  transition: transform var(--transition-base);
}

.site-footer__link--external:hover .site-footer__external-icon {
  transform: translate(var(--hover-translate-x), var(--hover-translate-y));
}

.site-footer__description {
  line-height: 1.5;
  margin: 0;
  font-size: var(--font-footer-text);
}

.site-footer__copyright {
  max-width: var(--container-footer-max);
  margin: 0 auto;
  padding: var(--space-sm) var(--space-md) 0 var(--space-md);
  text-align: center;
}

.site-footer__copyright p {
  margin: 0;
  font-size: var(--font-2xs);
  color: rgba(255, 255, 255, var(--opacity-footer-text));
}

/* Footer responsive adjustments */
@media (max-width: 768px) {
  .site-footer {
    padding: var(--space-sm) var(--space-md);
  }

  .site-footer__container {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding-bottom: var(--space-sm);
  }

  .site-footer__copyright {
    padding: var(--space-xs) var(--space-md) 0 var(--space-md);
  }
}

@media (max-width: 480px) {
  .site-footer {
    padding: var(--space-xs) var(--space-sm);
  }

  .site-footer__container {
    gap: var(--space-sm);
    padding-bottom: var(--space-xs);
  }

  .site-footer__address-line {
    flex-direction: column;
    gap: 0;
  }

  .site-footer__label {
    min-width: auto;
  }

  .site-footer__copyright {
    padding: var(--space-xs) var(--space-sm) 0 var(--space-sm);
  }
}

/* High contrast mode support for footer */
@media (prefers-contrast: high) {
  .site-footer {
    border-top-width: 6px;
  }

  .site-footer__link {
    border-bottom-width: 2px;
  }
}

/* ============================================================================
   20. Admin Members Page Styles
   ============================================================================
   Compact, efficient layout for viewing and managing families and members.
   Uses consistent color palette with navbar dark blue for table headers.
   ============================================================================ */

.family-section {
  margin-bottom: var(--space-sm);
}

.family-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  padding: var(--space-pwd-meter) var(--space-xs);
  background-color: rgba(44, 62, 80, var(--opacity-prominent));
  border-radius: var(--radius-sm);
  color: var(--color-white);
  font-size: var(--font-2sm);
  transition: background-color var(--transition-family-header);
  user-select: none;
}

.family-header:hover {
  background-color: rgba(44, 62, 80, var(--opacity-family-header));
}

.family-header:focus {
  outline: var(--border-medium) solid var(--color-admin-hover);
  outline-offset: var(--focus-outline-offset);
}

.family-info-wrapper {
  display: flex;
  align-items: center;
  gap: var(--gap-family-info);
}

.family-toggle-icon {
  font-size: var(--font-admin-table);
  transition: transform var(--transition-toggle-icon);
  display: inline-block;
  min-width: var(--toggle-icon-min-width);
}

.family-info-content {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.family-header h3 {
  margin: 0 0 var(--space-3xs) 0;
  font-size: 1.25em;
  font-weight: 600;
  color: var(--color-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.family-header .family-contact {
  font-size: var(--font-admin-summary);
  opacity: var(--opacity-muted);
}

/* Members wrapper with animation - CSS Grid approach for smooth accordion */
.members-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  transition: grid-template-rows var(--duration-accordion) var(--easing-smooth),
              opacity var(--duration-accordion) var(--easing-smooth),
              margin-top var(--duration-accordion) var(--easing-smooth),
              padding-bottom var(--duration-accordion) var(--easing-smooth);
}

/* Critical: allows Grid to collapse below content height */

.members-wrapper > * {
  min-height: 0;
}

.members-wrapper.expanded {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--space-pwd-meter);
  padding-bottom: var(--space-xl);
}

.family-actions {
  display: flex;
  gap: var(--space-detail-gap);
}

.family-actions .btn,
.family-actions .btn-danger,
.family-actions .btn-success,
.family-actions .member-action-btn {
  font-size: var(--font-admin-summary);
  padding: var(--space-detail-gap) var(--space-xs);
}

.members-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875em;
  table-layout: fixed;
  /* min-width: 725px; */ /* Removed for responsive card transformation */
}

.members-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.members-table thead th {
  background: var(--color-dark-blue);
  color: var(--color-white);
  padding: 4px 8px;
  text-align: left;
  font-size: 1.1875em;
  border: var(--border-thin) solid rgba(255, 255, 255, var(--opacity-border-alpha));
}

.members-table tbody td {
  border: var(--border-thin) solid var(--color-border);
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Shared table patterns: Zebra striping and hover effects */
.members-table tbody tr:nth-child(even),
.admin-table tbody tr:nth-child(even) {
  background-color: rgba(0, 0, 0, var(--opacity-zebra-stripe));
}

.members-table tbody tr:hover,
.admin-table tbody tr:hover {
  background-color: rgba(93, 173, 226, var(--opacity-admin-hover-bg));
  transition: background-color var(--transition-member-hover);
}

/* Column width optimization for data density */
.members-table .col-avatar {
  width: 53px;
}

.members-table .col-first-name {
  width: 175px;
}

.members-table .col-last-name {
  width: 175px;
}

.members-table .col-age {
  width: 138px;
}

.members-table th.col-actions {
  width: 138px;
  text-align: left;
}

.members-table td.col-actions {
  width: 138px;
  text-align: right;
}

/* Also set on cells for fallback */
.members-table th:nth-child(1),
.members-table td:nth-child(1) {
  width: 53px;
  padding: 3px;
  text-align: center;
}

.members-table th:nth-child(2),
.members-table td:nth-child(2) {
  width: 175px;
}

.members-table th:nth-child(3),
.members-table td:nth-child(3) {
  width: 175px;
}

.members-table th:nth-child(4),
.members-table td:nth-child(4) {
  width: 138px;
}

.members-table th.actions-col,
.members-table th:nth-child(5) {
  width: 138px;
  text-align: left;
}

.members-table td.actions-col,
.members-table td:nth-child(5) {
  width: 138px;
  text-align: right;
}

.members-table .member-action-btn {
  font-size: 1.0625em;
  padding: 3px 8px;
  min-height: auto;
  line-height: 1.4;
  float: right;
  margin-left: var(--space-detail-gap);
}

.members-table .member-action-btn:last-child {
  margin-right: var(--space-xs);
}

/* Admin Users table column widths (5 columns) */
#adminsTable th:nth-child(1),
#adminsTable td:nth-child(1) {
  width: 200px; /* Display Name */
  text-align: left;
}

#adminsTable th:nth-child(2),
#adminsTable td:nth-child(2) {
  width: 180px; /* Username */
}

#adminsTable th:nth-child(3),
#adminsTable td:nth-child(3) {
  width: 220px; /* Email */
}

#adminsTable th:nth-child(4),
#adminsTable td:nth-child(4) {
  width: 120px; /* Role */
}

#adminsTable th:nth-child(5),
#adminsTable td:nth-child(5) {
  width: 138px; /* Actions */
  text-align: right;
}

/* Audition Slots table column widths - Draft View (6 columns) */
.audition-slots-section .slots-table--draft th:nth-child(1),
.audition-slots-section .slots-table--draft td:nth-child(1) {
  width: 115px; /* Date */
}

.audition-slots-section .slots-table--draft th:nth-child(2),
.audition-slots-section .slots-table--draft td:nth-child(2) {
  width: 55px; /* Day */
}

.audition-slots-section .slots-table--draft th:nth-child(3),
.audition-slots-section .slots-table--draft td:nth-child(3) {
  width: 95px; /* Time */
}

.audition-slots-section .slots-table--draft th:nth-child(4),
.audition-slots-section .slots-table--draft td:nth-child(4) {
  width: 85px; /* Capacity */
}

.audition-slots-section .slots-table--draft th:nth-child(5),
.audition-slots-section .slots-table--draft td:nth-child(5) {
  width: 80px; /* Booked */
}

.audition-slots-section .slots-table--draft th:nth-child(6),
.audition-slots-section .slots-table--draft td:nth-child(6) {
  width: auto; /* Actions */
}

.audition-slots-section .slots-table--draft th.actions-col,
.audition-slots-section .slots-table--draft td.actions-col {
  width: auto;
  min-width: 150px;
}

/* Audition Slots table column widths - Published View (5 columns) */
.audition-slots-section .slots-table--published th:nth-child(1),
.audition-slots-section .slots-table--published td:nth-child(1) {
  width: 115px; /* Date */
}

.audition-slots-section .slots-table--published th:nth-child(2),
.audition-slots-section .slots-table--published td:nth-child(2) {
  width: 55px; /* Day */
}

.audition-slots-section .slots-table--published th:nth-child(3),
.audition-slots-section .slots-table--published td:nth-child(3) {
  width: 95px; /* Time */
}

.audition-slots-section .slots-table--published th:nth-child(4),
.audition-slots-section .slots-table--published td:nth-child(4) {
  width: 160px; /* Available - needs more space for "X of Y available" */
}

.audition-slots-section .slots-table--published th:nth-child(5),
.audition-slots-section .slots-table--published td:nth-child(5) {
  width: auto; /* View - View Members button */
}

.audition-slots-section .slots-table--published th.actions-col,
.audition-slots-section .slots-table--published td.actions-col {
  width: auto;
  min-width: 130px;
}

/* Member table avatar styling */
.member-table-avatar {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--border-thin) solid var(--color-border);
  background: var(--color-avatar-fallback);
  display: block;
  margin: 0 auto;
}

.member-table-avatar--fallback {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--color-avatar-fallback);
  border: var(--border-thin) solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375em;
  font-weight: 600;
  color: var(--color-dark-blue);
  text-transform: uppercase;
  margin: 0 auto;
}

/* Roles table column width optimization (admin-shows.html) */
.roles-table th:nth-child(1),
.roles-table td:nth-child(1) {
  width: 15%;
  min-width: 100px;
  text-align: left;
}

.roles-table td:nth-child(1) {
  font-weight: 700;
}

.roles-table th:nth-child(2),
.roles-table td:nth-child(2) {
  width: 8%;
  min-width: 70px;
}

.roles-table th:nth-child(3),
.roles-table td:nth-child(3) {
  width: 10%;
  min-width: 85px;
}

.roles-table th:nth-child(4),
.roles-table td:nth-child(4) {
  width: 27%;
  min-width: 150px;
  text-align: left;
}

.roles-table th:nth-child(5),
.roles-table td:nth-child(5) {
  width: 27%;
  min-width: 150px;
  text-align: left;
}

.roles-table th:nth-child(6),
.roles-table td:nth-child(6) {
  width: 13%;
  min-width: 120px;
  text-align: right;
}

.roles-table th:nth-child(6) {
  text-align: left;
}

/* Also apply compact styling to family action buttons */
.family-actions .btn,
.family-actions .btn-danger,
.family-actions .btn-success,
.family-actions .member-action-btn {
  min-height: auto;
  line-height: 1.4;
}

/* ====================================================================
   MEMBER CARDS - Mobile/Tablet View
   ==================================================================== */

/* Hide cards on desktop, show table */
.members-cards--mobile,
.roles-cards--mobile {
  display: none;
}

.members-table--desktop,
.roles-table--desktop {
  display: table;
}

/* Shared card component base styles */
.member-card,
.role-card {
  background: var(--color-white);
  border: var(--border-default);
  border-radius: var(--radius-default);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-light);
  transition: box-shadow 0.2s ease;
}

.member-card:hover,
.role-card:hover {
  box-shadow: var(--shadow-medium);
}

.member-card:last-child,
.role-card:last-child {
  margin-bottom: 0;
}

/* Avatar section */
.member-card__avatar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: var(--border-default);
}

.member-card__avatar-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: var(--border-medium) solid var(--color-white);
  box-shadow: var(--shadow-light);
}

.member-card__avatar-fallback {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-large);
  font-weight: 600;
  text-transform: uppercase;
  border: var(--border-medium) solid var(--color-white);
  box-shadow: var(--shadow-light);
}

/* Info section - shared between member and role cards */
.member-card__info,
.role-card__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.member-card__info-item,
.role-card__info-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--space-xs) 0;
}

.member-card__label,
.role-card__label {
  font-weight: 600;
  color: var(--color-dark-blue);
  font-size: var(--font-small);
}

.member-card__value,
.role-card__value {
  color: var(--color-text);
  font-size: var(--font-base);
  text-align: right;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Role card label needs more space for longer labels */
.role-card__label {
  min-width: 140px;
  flex-shrink: 0;
}

/* Actions section - shared between member and role cards */
.member-card__actions,
.role-card__actions {
  display: flex;
  gap: var(--space-sm);
  padding-top: var(--space-md);
  border-top: var(--border-default);
}

.member-card__actions .btn,
.member-card__actions .btn-danger,
.role-card__actions .btn,
.role-card__actions .btn-danger {
  flex: 1;
  text-align: center;
  min-height: 44px;
}

/* =================================================================
   17.5 Show Cards (Mobile/Tablet - Seasons Page)
   ================================================================= */

.shows-cards {
  display: none; /* Hidden on desktop */
}

.show-card {
  background: var(--color-white);
  border: var(--border-medium) solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: box-shadow var(--transition-fast);
}

.show-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.show-card__info {
  margin-bottom: var(--space-md);
}

.show-card__info-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-bottom: var(--space-xs);
}

.show-card__label {
  font-size: var(--font-admin-summary);
  font-weight: 600;
  color: var(--color-text-muted);
}

.show-card__value {
  font-size: var(--font-admin-table);
  color: var(--color-text);
}

.show-card__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.show-card__actions .member-action-btn {
  width: 100%;
  min-height: 44px;
}

/* Show title column - left aligned and bold */
.shows-table--desktop th:nth-child(1),
.shows-table--desktop td:nth-child(1) {
  text-align: left;
  font-weight: 700;
  width: 35%;
}

/* Date columns in shows table */
.shows-table--desktop th:nth-child(2),
.shows-table--desktop th:nth-child(3),
.shows-table--desktop td:nth-child(2),
.shows-table--desktop td:nth-child(3) {
  width: 180px;
  white-space: nowrap;
}

/* Actions column in shows table */
.shows-table--desktop th:nth-child(4),
.shows-table--desktop td:nth-child(4) {
  width: 200px;
}

/* Show table/card responsive behavior */
@media (max-width: 768px) {
  .shows-table--desktop {
    display: none;
  }

  .shows-cards--mobile {
    display: block;
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
  }
}

/* ====================================================================
   RESPONSIVE: Card Transformation for Tablets and Mobile
   ==================================================================== */

/* Roles table breaks earlier due to more columns (6 columns) */
@media (max-width: 1110px) {
  /* Hide roles table, show cards on mid-size screens and below */
  .roles-table--desktop {
    display: none;
  }

  .roles-cards--mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }
}

/* Members table breaks at standard tablet size (5 columns with avatar) */
@media (max-width: 768px) {
  /* Hide members table, show cards on mobile/tablet */
  .members-table--desktop {
    display: none;
  }

  .members-cards--mobile {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  /* Larger avatars on tablet - 33% increase from 60px = 80px */
  .member-card__avatar-img,
  .member-card__avatar-fallback {
    width: 80px;
    height: 80px;
  }

  .member-card__avatar-fallback {
    font-size: var(--font-large);
  }
}

/* Roles cards switch to single column at 700px */
@media (max-width: 700px) {
  .roles-cards--mobile {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  /* Single column on mobile for members (roles already single column at 700px) */
  .members-cards--mobile {
    grid-template-columns: 1fr;
  }

  /* Further reduce card padding on very small screens */
  .member-card,
  .role-card {
    padding: var(--space-md);
  }

  /* Larger avatars on mobile - 33% increase from 50px = 67px */
  .member-card__avatar-img,
  .member-card__avatar-fallback {
    width: 67px;
    height: 67px;
  }

  .member-card__avatar-fallback {
    font-size: var(--font-base);
  }

  .member-card__label,
  .role-card__label {
    font-size: var(--font-minimum);
  }

  .member-card__value,
  .role-card__value {
    font-size: var(--font-small);
  }

  /* Stack action buttons vertically on mobile */
  .member-card__actions,
  .role-card__actions {
    flex-direction: column;
  }

  /* Family header mobile adjustments */
  .family-header .family-contact {
    display: none; /* Hide email and phone on mobile */
  }

  .family-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--gap-family-info);
    padding: var(--padding-family-header-mobile);
  }

  .family-header h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 6px;
  }

  .family-info-wrapper {
    width: 100%;
  }

  .family-actions {
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
  }

  .family-actions .btn,
  .family-actions .btn-danger,
  .family-actions .btn-success,
  .family-actions .member-action-btn {
    width: 100%;
    min-height: 44px; /* WCAG 2.1 touch target size */
    font-size: 13px;
    padding: 10px 12px;
  }

  .family-actions .btn {
    background-color: rgba(75, 107, 138, 0.95);
  }

  .family-actions .btn-danger {
    background-color: rgba(158, 63, 63, 0.95);
  }
}

/* Admin page containers */
.admin-container {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
}

.admin-container-narrow {
  max-width: var(--container-admin-narrow);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg);
}

.admin-members-container {
  margin-top: var(--space-md);
}

/* Modifier for admin pages to match button spacing on pages without visible buttons */
.admin-members-container--with-button-spacing {
  /* 84px - 45px (internal spacing) = 39px */
  margin-top: 39px;
}

/* Admin action buttons */
#newSeasonBtn,
#newAdminBtn {
  float: right;
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Admin forms */
.admin-form {
  display: none;
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* Admin tables */
.admin-table {
  width: 100%;
  margin-top: var(--space-md);
  border-collapse: collapse;
  font-size: var(--font-admin-table);
  table-layout: auto;
}

.admin-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

.admin-table thead th {
  background: var(--color-dark-blue);
  color: var(--color-white);
  padding: 3px var(--space-pwd-meter);
  text-align: left;
  font-size: var(--font-admin-heading);
  border: var(--border-thin) solid rgba(255, 255, 255, var(--opacity-border-alpha));
}

.admin-table thead th.actions-col {
  width: var(--admin-table-col-actions);
  text-align: left;
}

.admin-table tbody td.actions-col {
  text-align: right;
}

.admin-table tbody td {
  border: var(--border-thin) solid var(--color-border);
  padding: 3px var(--space-pwd-meter);
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-table tbody td.center {
  padding: var(--space-md);
  text-align: center;
}

/* Consolidated table patterns moved to line 2337 */

.admin-table button.table-btn {
  font-size: var(--font-admin-action);
  padding: 4px 8px;
  margin: 0 2px;
  line-height: 1.2;
  display: inline-block;
  min-height: auto;
}

/* Section headings in admin pages */
.admin-section-heading {
  margin: 0;
}

.admin-section-heading--spaced {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-lg);
}

/* Select field with floating-style label */
.select-with-floated-label {
  position: relative;
}

.select-with-floated-label label {
  position: absolute;
  left: var(--space-sm);
  top: 0;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--color-light-blue);
  font-weight: 500;
  background: var(--color-white);
  padding: 0 var(--space-2xs);
  margin: 0;
  pointer-events: none;
  z-index: 1;
}

.select-with-floated-label label .required {
  color: var(--color-red);
}

.select-with-floated-label select {
  margin-top: 0;
  display: block;
  width: 100%;
  padding: var(--space-md) var(--space-sm);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
  font-family: inherit;
  font-weight: normal;
  color: var(--color-text);
  transition: all var(--transition-slow);
  background: var(--color-white);
  box-sizing: border-box;
}

.select-with-floated-label select:focus {
  outline: none;
  border-color: var(--color-light-blue);
  border-width: 2px;
}

/* Search Container */
.search-container {
  margin-bottom: var(--space-lg);
  margin-top: var(--space-md);
}

.search-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  width: 100%;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--space-sm) var(--space-md);
  background-color: var(--color-bg-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.search-input {
  flex: 1;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  font-family: inherit;
  background-color: transparent;
  color: var(--color-text);
  outline: none;
  box-shadow: none;
  min-height: 24px;
}

.search-input:focus {
  outline: none;
  border: none;
  box-shadow: none;
}

.search-input::placeholder {
  color: var(--color-text-muted);
}

.search-clear-btn {
  width: 28px;
  height: 28px;
  min-height: 28px;
  min-width: 28px;
  border: none;
  background: var(--color-danger-button);
  color: white;
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.search-clear-btn:hover {
  background: var(--color-danger-button-hover);
}

.search-clear-btn:active {
  background: var(--color-danger-button-active);
}

.search-clear-btn:focus {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* New Show button spacing */
#newShowBtn {
  margin-bottom: var(--space-lg);
}

/* Password meter and toggle spacing */
.pwd-meter-spacing {
  margin-top: var(--space-pwd-meter);
}

.toggle-spacing {
  margin-top: var(--space-pwd-meter);
}

/* ============================================================================
   21. UTILITY CLASSES
   ============================================================================
   Reusable utility classes for common inline style patterns.
   ============================================================================ */

/* Image utilities */
.logo-image {
  height: var(--logo-height);
  vertical-align: middle;
}

/* Headshot/Avatar utilities */
.headshot-preview,
.headshot-current {
  width: var(--avatar-form);
  height: var(--avatar-form);
  border-radius: 50%;
  object-fit: cover;
  border: var(--border-thin) solid var(--color-border);
}

.headshot-preview {
  display: none;
}

/* Skeleton width utilities */
.skeleton-w-40 { width: 40%; }
.skeleton-w-45 { width: 45%; }
.skeleton-w-60 { width: 60%; }
.skeleton-w-65 { width: 65%; }
.skeleton-w-70 { width: 70%; }
.skeleton-w-75 { width: 75%; }
.skeleton-w-80 { width: 80%; }
.skeleton-w-90 { width: 90%; }

/* Skeleton spacing utilities */
.skeleton-mb-sm { margin-bottom: var(--space-sm); }

/* Flex utilities */
.flex-1 { flex: 1; }

/* Empty state message */
.empty-state-message {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--color-text);
  opacity: 0.7;
}

/* Form action spacing */
.form-actions-spacing {
  margin-top: var(--space-sm);
}

/* Padding utilities */
.p-lg {
  padding: var(--space-lg);
}

/* Text alignment utilities */
.text-center { text-align: center; }

/* Display utilities */
.display-none { display: none; }

/* Toggle label spacing */
.toggle-label-spacing {
  margin-top: var(--space-pwd-meter);
}

/* Style guide utilities */
.style-guide-wide {
  max-width: var(--container-admin-narrow);
}

.style-guide-form {
  max-width: 500px;
}

.style-guide-form-grid {
  max-width: 600px;
}

.style-guide-password {
  max-width: 400px;
}

.style-guide-container-narrow {
  max-width: 400px;
}

.style-guide-container-medium {
  max-width: 800px;
}

/* Color swatch utilities */
.color-swatch {
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  text-align: center;
  font-weight: 600;
}

.color-swatch--dark-blue {
  background: var(--color-dark-blue);
  color: var(--color-white);
}

.color-swatch--light-blue {
  background: var(--color-light-blue);
  color: var(--color-white);
}

.color-swatch--red {
  background: var(--color-red);
  color: var(--color-white);
}

.color-swatch--success {
  background: var(--color-success);
  color: var(--color-white);
}

.color-swatch--warning {
  background: var(--color-warning);
  color: var(--color-white);
}

.color-swatch--admin-bg {
  background: var(--color-admin-bg);
  color: var(--color-white);
}

.color-swatch--blue-button {
  background: var(--color-blue-button);
  color: var(--color-white);
}

/* Typography size utilities */
.text-small { font-size: var(--font-small); }
.text-medium { font-size: var(--font-medium); }
.text-large { font-size: var(--font-large); }

/* Background utilities */
.bg-dark-blue {
  background-color: var(--color-dark-blue);
}

.bg-blue-button {
  background-color: var(--color-blue-button);
  border: none;
}

.bg-success {
  background: var(--color-success);
  border-color: var(--color-success);
}

/* Accordion/Details styling */
.accordion-details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin: var(--space-sm) 0;
}

.accordion-summary {
  cursor: pointer;
  padding: var(--space-sm);
  background: var(--color-surface-subtle);
  font-weight: 600;
}

.accordion-content {
  padding: var(--space-md);
}

/* Grid gap utilities */
.gap-md { gap: var(--space-md); }

/* Margin utilities */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }

/* Member card utilities */
.member-cards-narrow {
  max-width: 350px;
}

.member-cards-compact {
  max-width: 320px;
}

/* Gradient display utilities */
.gradient-display-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.gradient-card {
  padding: var(--space-xl);
  border-radius: var(--radius-md);
  text-align: center;
}

.gradient-card--primary {
  background: var(--gradient-primary);
  color: var(--color-white);
}

.gradient-card--success {
  background: var(--gradient-success);
  color: var(--color-white);
}

.gradient-card--subtle {
  background: var(--gradient-card-subtle);
  border: 1px solid var(--color-border);
}

/* Checkbox demo utilities */
.checkbox-demo-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.checkbox-demo-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Style guide floating labels demo */
.floating-labels-demo {
  max-width: 500px;
}

/* List styling utilities */
.feature-list {
  font-size: var(--font-small);
  color: var(--color-text);
  line-height: var(--line-height-loose);
}

/* ============================================================================
   22. BACK TO TOP BUTTON
   ============================================================================
   Fixed button that appears when scrolling, with smooth animations.
   ============================================================================ */

/* Keyframe animations */
@keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-80px);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes fadeOutSlideDown {
  0% {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(-80px);
  }
}

/* Button base styles */
.back-to-top {
  position: fixed;
  top: var(--space-xl);
  left: 50%;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  border-radius: 50%;
  background: var(--gradient-success);
  border: none;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 8px 16px rgba(17, 153, 142, 0.25),
    0 4px 8px rgba(0, 0, 0, 0.15),
    0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-80px);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
  aspect-ratio: 1;
}

/* Visible state with animation */
.back-to-top--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  animation: fadeInSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Hidden state with animation */
.back-to-top--hidden {
  animation: fadeOutSlideDown 0.3s cubic-bezier(0.4, 0, 1, 1) forwards;
}

/* SVG icon styling */
.back-to-top svg {
  color: var(--color-white);
  transition: transform 0.2s ease;
}

/* Hover state */
.back-to-top:hover {
  background: var(--gradient-btn-success-hover);
  box-shadow:
    0 12px 24px rgba(17, 153, 142, 0.35),
    0 6px 12px rgba(0, 0, 0, 0.2),
    0 3px 6px rgba(0, 0, 0, 0.15);
  transform: translateX(-50%) translateY(-2px);
}

.back-to-top:hover svg {
  transform: translateY(-2px);
}

/* Focus state for accessibility */
.back-to-top:focus-visible {
  outline: 3px solid var(--btn-focus);
  outline-offset: 3px;
}

/* Active state */
.back-to-top:active {
  transform: translateX(-50%) translateY(0);
  box-shadow:
    0 4px 8px rgba(17, 153, 142, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .back-to-top {
    transition: opacity 0.3s ease, visibility 0.3s ease;
    animation: none;
  }

  .back-to-top--visible,
  .back-to-top--hidden {
    animation: none;
  }

  .back-to-top:hover {
    transform: translateX(-50%) translateY(0);
  }

  .back-to-top:hover svg {
    transform: none;
  }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .back-to-top {
    top: var(--space-md);
    width: 53px;
    height: 53px;
    min-width: 53px;
    min-height: 53px;
  }

  .back-to-top svg {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .back-to-top {
    top: var(--space-sm);
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
  }

  .back-to-top svg {
    width: 36px;
    height: 36px;
  }
}

/* ============================================================================
   23. STYLE GUIDE PAGE STYLES
   ============================================================================
   Specific styles for style-guide.html documentation page. These classes
   handle demonstration components and visual examples.
   ============================================================================ */

/* Color grid for palette display */
.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-md);
}

/* Admin link demo wrapper */
.admin-link-demo {
  padding: var(--space-sm);
  display: inline-block;
  border-radius: var(--radius-sm);
}

/* Heading with no margin for inline layouts */
.heading-no-margin {
  margin: 0;
}

/* Italic text utility */
.text-italic {
  font-style: italic;
}

/* Margin left auto utility - pushes element to the right in flex container */
.ml-auto {
  margin-left: auto;
}

/* Fixed width input for demonstrations */
.demo-input {
  width: 200px;
}

/* Code example block */
.code-example {
  background: var(--color-background);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: var(--font-small);
}

/* Spacing demonstration boxes */
.spacing-demo-box {
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

.spacing-demo-box--2xs {
  padding: var(--space-2xs);
}

.spacing-demo-box--xs {
  padding: var(--space-xs);
}

.spacing-demo-box--sm {
  padding: var(--space-sm);
}

.spacing-demo-box--md {
  padding: var(--space-md);
}

.spacing-demo-box--lg {
  padding: var(--space-lg);
}

.spacing-demo-box--xl {
  padding: var(--space-xl);
}

.spacing-demo-box--2xl {
  padding: var(--space-2xl);
}

.spacing-demo-box--3xl {
  padding: var(--space-3xl);
}

/* Radius demonstration boxes */
.radius-demo-box {
  background: var(--color-light-blue);
  color: var(--color-white);
  padding: var(--space-md);
}

.radius-demo-box--sm {
  border-radius: var(--radius-sm);
}

.radius-demo-box--md {
  border-radius: var(--radius-md);
}

.radius-demo-box--lg {
  border-radius: var(--radius-lg);
}

/* ============================================================================
   SECTION 23: Sort Controls (Role Display Order Feature)
   ============================================================================ */

/* Sort Controls Container */
.sort-controls {
  display: flex;
  align-items: center;
  justify-content: flex-start;  /* Float to the left */
  gap: var(--space-sm);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* Sort Controls Label */
.sort-controls__label {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

/* Sort Button Base Styles (Inactive State - Raised) */
.sort-btn {
  min-height: 36px;
  color: var(--color-white);
  /* Darker version of page nav buttons (using page nav hover gradient) */
  background: var(--gradient-btn-teal-hover);
  border: 1px solid var(--btn-border);
  /* Raised appearance with outer shadow */
  box-shadow: 0 4px 6px rgba(13, 125, 111, 0.3), 0 1px 3px rgba(0, 0, 0, 0.08);
  transform: translateY(0);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Sort Button Active State (Depressed/Pressed In) */
.sort-btn--active {
  /* Matches page nav normal state */
  background: var(--gradient-btn-teal);
  color: var(--color-white);
  /* Pressed in appearance with inner shadow */
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(2px) scale(0.98);
}

/* Sort Button Hover (non-active only - Lift Up More) */
.sort-btn:not(.sort-btn--active):hover {
  /* Even darker on hover (using page nav active gradient) */
  background: var(--gradient-btn-teal-active);
  box-shadow: 0 6px 10px rgba(10, 101, 89, 0.35), 0 2px 4px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Sort Button Active Hover (Stays Pressed) */
.sort-btn--active:hover {
  /* Slightly darker version of active state */
  background: var(--gradient-btn-teal-hover);
  /* Deeper inset shadows to show it's still pressed */
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2), inset 0 1px 3px rgba(0, 0, 0, 0.15);
  transform: translateY(2px) scale(0.98);
}

/* Sort Button Active Click (Press Animation for Inactive Buttons) */
.sort-btn:active:not(.sort-btn--active) {
  /* Quick press animation when clicking */
  transform: translateY(2px) scale(0.97);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.1s ease;
}

/* Sort Button Focus */
.sort-btn:focus-visible {
  outline: 2px solid var(--btn-focus);
  outline-offset: 2px;
}

/* Responsive: Tablet (≤768px) */
@media (max-width: 768px) {
  .sort-controls {
    gap: var(--space-xs);
  }

  .sort-controls__label {
    font-size: 0.8125rem;
  }
}

/* Responsive: Mobile (≤480px) */
@media (max-width: 480px) {
  .sort-controls {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .sort-controls__label {
    margin-bottom: var(--space-xs);
  }

  .sort-btn {
    width: 100%;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .sort-btn {
    transition: none;
  }
}

/* ====================================
   24. Seasons Page Specific Styles
   ==================================== */

/* Season status inline with name */
.season-status {
  font-size: 0.875rem;
  font-weight: normal;
  color: var(--color-light-text);
  margin-left: var(--space-sm);
}

/* New Season button positioning */
#newSeasonBtn {
  float: left;
  margin-bottom: var(--space-md);
  clear: both;
}

/* Clear float for section heading */
.admin-section-heading {
  clear: both;
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
}

/* ====================================
   25. Modal Components
   ==================================== */

/* Modal overlay - covers entire viewport */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  justify-content: center;
  align-items: center;
  padding: var(--space-md);
}

/* Show modal when aria-hidden is false */
.modal-overlay[aria-hidden="false"] {
  display: flex;
}

/* Modal container */
.modal-container {
  background: var(--color-white);
  border-radius: var(--radius-md);
  max-width: 600px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  animation: modalFadeIn var(--duration-normal) ease-out;
}

/* Modal sections */
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.modal-body {
  padding: var(--space-lg);
  overflow-y: auto;
  flex-grow: 1;
  flex-shrink: 1;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
  background: var(--color-white);
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* Modal title */
.modal-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text);
}

/* Close button */
.modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  color: var(--color-light-text);
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

.modal-close:hover {
  background-color: var(--color-light);
  color: var(--color-text);
}

.modal-close:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Modal list styling */
.modal-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-list li {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.modal-list li:last-child {
  border-bottom: none;
}

.modal-list li:nth-child(even) {
  background-color: var(--color-light);
}

/* Modal fade-in animation */
@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .modal-container {
    max-width: 100%;
    max-height: 90vh;
    margin: var(--space-sm);
  }

  .modal-header,
  .modal-body,
  .modal-footer {
    padding: var(--space-md);
  }

  .modal-header h2 {
    font-size: 1.25rem;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .modal-container {
    animation: none;
  }
}

/* Audition slots section styling */
.audition-slots-section {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 2px solid var(--color-border);
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

.audition-slots-section h4 {
  margin: 0 0 var(--space-md) 0;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text);
}

.slot-count {
  font-weight: normal;
  color: var(--color-light-text);
  font-size: 1rem;
}

.slot-actions {
  display: flex;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  flex-wrap: wrap;
}

.slots-container {
  margin-top: var(--space-md);
}

.slots-summary {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  font-size: 1rem;
  color: var(--color-text);
  text-align: right;
}

.slots-summary strong {
  color: var(--color-primary);
}

/* Responsive: Mobile */
@media (max-width: 768px) {
  .slot-actions {
    flex-direction: column;
  }

  .slot-actions .btn {
    width: 100%;
  }
}
/* ============================================================================
   24. BOOKING SYSTEM MODALS (Slot Selection & Role Selection)
   ============================================================================
   Multi-step modals for audition slot booking and role preference selection.
   Includes progress indicators, card-based selections, and qualification badges.
   ============================================================================ */

/* Slot Selection Modal - Overlay & Container */
.slot-modal-overlay,
.role-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--space-md);
}

.slot-modal,
.role-modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* Modal Header */
.slot-modal-header,
.role-modal-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}

.slot-modal-header h2,
.role-modal-header h2 {
  margin: 0;
  font-size: var(--font-large);
  color: var(--color-text);
}

.slot-modal-close,
.role-modal-close {
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background-color 0.2s, color 0.2s;
}

.slot-modal-close:hover,
.role-modal-close:hover {
  background-color: var(--color-surface-subtle);
  color: var(--color-text);
}

/* Step Indicators */
.slot-modal-steps {
  display: flex;
  padding: var(--space-lg);
  gap: var(--space-md);
  border-bottom: 1px solid var(--color-divider);
}

.step-indicator {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  position: relative;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-medium);
  transition: background-color 0.3s, color 0.3s;
}

.step-indicator.active .step-number {
  background-color: var(--color-blue-button);
  color: var(--color-white);
}

.step-indicator.completed .step-number {
  background-color: var(--color-success);
  color: var(--color-white);
}

.step-label {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  text-align: center;
}

.step-indicator.active .step-label {
  color: var(--color-text);
  font-weight: 600;
}

/* Modal Body */
.slot-modal-body,
.role-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-lg);
}

.slot-modal-content {
  max-width: 700px;
  margin: 0 auto;
}

.slot-modal-hint {
  color: var(--color-text-muted);
  font-size: var(--font-small);
  margin-bottom: var(--space-lg);
}

/* Loading & Error States */
.slot-modal-loading,
.slot-modal-error,
.slot-modal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--color-disabled-bg);
  border-top-color: var(--color-blue-button);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

/* Season List */
.season-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.season-option {
  display: block;
  cursor: pointer;
}

.season-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.season-card {
  padding: var(--space-lg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.season-option input[type="radio"]:checked + .season-card {
  border-color: var(--color-blue-button);
  box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.1);
}

.season-card h3 {
  margin: 0 0 var(--space-xs) 0;
  font-size: var(--font-medium);
  color: var(--color-text);
}

.season-shows {
  color: var(--color-text-muted);
  font-size: var(--font-small);
  margin: var(--space-xs) 0;
}

.season-slots {
  color: var(--color-success);
  font-weight: 600;
  font-size: var(--font-small);
  margin-top: var(--space-sm);
}

/* Member List */
.member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-md);
}

.member-option {
  display: block;
  cursor: pointer;
}

.member-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.member-card {
  padding: var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.member-option input[type="checkbox"]:checked + .member-card {
  border-color: var(--color-blue-button);
  box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.1);
}

.member-card h4 {
  margin: 0 0 var(--space-2xs) 0;
  font-size: var(--font-base);
  color: var(--color-text);
}

.member-card p {
  margin: 0;
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

/* Slot Selection */
.slot-selection-summary {
  background: var(--color-surface-subtle);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-lg);
}

.slot-selection-summary p {
  margin: var(--space-xs) 0;
  font-size: var(--font-small);
}

.slots-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.slot-date-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.slot-date-header {
  font-size: var(--font-medium);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-divider);
}

.slot-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

.slot-option {
  display: block;
  cursor: pointer;
}

.slot-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.slot-card {
  padding: var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  text-align: center;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-xs);
}

.slot-option input[type="radio"]:checked + .slot-card {
  border-color: var(--color-blue-button);
  box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.1);
}

.slot-option-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.slot-time {
  font-size: var(--font-medium);
  font-weight: 600;
  color: var(--color-text);
}

.slot-capacity {
  font-size: var(--font-small);
  color: var(--color-success);
}

.slot-unavailable {
  font-size: var(--font-small);
  color: var(--color-red);
  font-weight: 600;
  margin-top: var(--space-xs);
}

/* Modal Footer */
.slot-modal-footer,
.role-modal-footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-divider);
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}

.slot-modal-footer-right {
  display: flex;
  gap: var(--space-sm);
}

/* Role Selection Modal */
.role-selection-counter {
  padding: var(--space-md) var(--space-lg);
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-divider);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}

.counter-text {
  font-size: var(--font-base);
  color: var(--color-text);
}

.counter-number {
  color: var(--color-blue-button);
  font-weight: 600;
}

.counter-max .counter-number {
  color: var(--color-red);
}

.counter-hint {
  margin: var(--space-xs) 0 0 0;
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

.role-section {
  margin-bottom: var(--space-xl);
}

.role-section-title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.qualification-badge {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: 600;
}

.qualification-badge.qualified {
  background-color: rgba(30, 132, 73, 0.1);
  color: var(--color-success);
}

.qualification-badge.not-qualified {
  background-color: rgba(192, 57, 43, 0.1);
  color: var(--color-red);
}

.role-section-hint {
  color: var(--color-text-muted);
  font-size: var(--font-small);
  margin-bottom: var(--space-md);
}

.role-section-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left: 4px solid var(--color-warning);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-weight: 500;
}

.role-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.role-option {
  display: block;
  cursor: pointer;
}

.role-option input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.role-card {
  padding: var(--space-md);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.role-option-qualified input[type="checkbox"]:checked + .role-card {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px rgba(30, 132, 73, 0.1);
}

.role-option-non-qualified input[type="checkbox"]:checked + .role-card {
  border-color: var(--color-blue-button);
  box-shadow: 0 0 0 3px rgba(0, 116, 217, 0.1);
}

.role-option-disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.role-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-sm);
}

.role-name {
  margin: 0;
  font-size: var(--font-base);
  font-weight: 600;
  color: var(--color-text);
}

.role-show {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  font-weight: normal;
}

.role-description {
  margin: var(--space-sm) 0;
  font-size: var(--font-small);
  color: var(--color-text);
}

.role-requirements {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-sm) 0;
}

.requirement {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

.role-disqualification-reason {
  margin-top: var(--space-sm);
  font-size: var(--font-small);
  color: var(--color-red);
  font-style: italic;
}

.role-special-instructions {
  margin-top: var(--space-sm);
  padding: var(--space-md);
  background: rgba(255, 193, 7, 0.1);
  border-left: 4px solid #FFC107;
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

/* ============================================================================
   25. COUNTDOWN TIMER
   ============================================================================
   Sticky countdown header for audition interest form with warning states.
   ============================================================================ */

.countdown-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-blue-button);
  color: var(--color-white);
  padding: var(--space-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s;
}

.countdown-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-size: var(--font-medium);
  font-weight: 600;
}

.countdown-timer {
  font-size: var(--font-large);
  font-weight: 700;
  font-family: 'Courier New', monospace;
}

.countdown-hint {
  text-align: center;
  margin: var(--space-xs) 0 0 0;
  font-size: var(--font-small);
  opacity: 0.9;
}

.countdown-warning {
  background: var(--color-warning);
  animation: pulse 2s infinite;
}

.countdown-expired {
  background: var(--color-red);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

/* ============================================================================
   26. AUDITION INTEREST FORM
   ============================================================================
   Form sections for show interests, availability, and role preferences.
   ============================================================================ */

.audition-form-container {
  padding-top: var(--space-lg);
  padding-bottom: 0;
}

.page-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.page-header h1 {
  margin: 0 0 var(--space-sm) 0;
}

.subtitle {
  color: var(--color-text-muted);
  margin: 0;
}

.loading-state,
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xl);
  text-align: center;
  min-height: 400px;
}

.member-form-section {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.member-form-section h2 {
  margin: calc(var(--space-xl) * -1) calc(var(--space-xl) * -1) var(--space-lg) calc(var(--space-xl) * -1);
  padding: var(--space-md) var(--space-xl);
  background: var(--color-dark-blue);
  color: var(--color-white);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.member-form-section > .form-hint {
  margin-bottom: var(--space-xl);
  color: var(--color-text);
  font-size: var(--font-base);
  font-weight: 400;
}

.show-section {
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.show-section:last-child {
  margin-bottom: 0;
}

.show-section h3 {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-medium);
  color: var(--color-text);
}

.show-section .show-description {
  margin: 0 0 var(--space-md) 0;
  font-size: var(--font-base);
  color: var(--color-text);
  font-weight: 400;
  line-height: var(--line-height-relaxed);
}

.show-section .show-special-note {
  margin: 0 0 var(--space-md) 0;
  padding: var(--space-md);
  background: rgba(255, 193, 7, 0.1);
  border-left: 4px solid #FFC107;
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

.show-section .show-special-note strong {
  color: #F57C00;
}

.show-section .field-hint {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-md);
  font-size: var(--font-base);
  color: var(--color-text);
  font-weight: 400;
  font-style: italic;
}

.show-section .form-field {
  margin-bottom: var(--space-lg);
}

.show-section .form-field:last-child {
  margin-bottom: 0;
}

.show-section .form-field > strong {
  display: block;
  margin-bottom: var(--space-sm);
  font-size: var(--font-base);
  color: var(--color-text);
  font-weight: 700;
}

.show-section .form-field label {
  display: block;
  margin-bottom: var(--space-sm);
  font-weight: 400;
}

.form-subsection {
  margin-bottom: var(--space-xl);
}

.form-subsection:last-child {
  margin-bottom: 0;
}

.form-subsection h3 {
  margin: 0 0 var(--space-sm) 0;
  font-size: var(--font-medium);
  color: var(--color-text);
}

.form-hint {
  color: var(--color-text-muted);
  font-size: var(--font-small);
  margin-bottom: var(--space-md);
}

/* Show Interests Grid */
.show-interests-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.show-interest-item {
  padding: var(--space-md);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-md);
}

.show-interest-item label {
  display: block;
  margin-bottom: var(--space-sm);
}

.show-interest-item strong {
  font-size: var(--font-base);
  color: var(--color-text);
}

.show-description {
  margin: var(--space-xs) 0 0 0;
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

.interest-select {
  width: 100%;
  padding: var(--space-sm);
  font-size: var(--font-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}

.field-hint {
  margin-top: var(--space-xs);
  font-size: var(--font-small);
  color: var(--color-text-muted);
  font-style: italic;
}

/* Availability Section */
.availability-item {
  padding: var(--space-md);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}

.availability-item p {
  margin: var(--space-xs) 0;
}

.availability-item strong {
  font-weight: 600;
  color: var(--color-text);
}

.date-range {
  font-size: var(--font-base);
  color: var(--color-text);
  font-weight: 400;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-md);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s;
}

.checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.checkbox-label:has(input:checked) {
  border-color: var(--color-success);
  background: rgba(30, 132, 73, 0.05);
}

.checkbox-label-unavailable {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-md);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s, background 0.2s;
}

.checkbox-label-unavailable input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.checkbox-label-unavailable:has(input:checked) {
  border-color: var(--color-red);
  background: rgba(192, 57, 43, 0.05);
}

/* Neutral checkbox label (no color change when checked) */
.checkbox-label-neutral {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  padding: var(--space-md);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.2s, background 0.2s;
}

.checkbox-label-neutral input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

/* Show Availability Questions - Form Field Spacing */
.form-section .form-field {
  margin-bottom: var(--space-xl);
}

.form-section .form-field:last-child {
  margin-bottom: 0;
}

/* Show Availability Questions - Dropdown Styling */
.show-count-select {
  width: 100%;
  padding: var(--space-md);
  background: var(--color-white);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-base);
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  background-size: 20px;
  padding-right: var(--space-xl);
}

.show-count-select:hover {
  border-color: var(--color-primary);
}

.show-count-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Role Preferences Section */
.role-selection-btn {
  margin-bottom: var(--space-md);
}

.selected-roles-display {
  padding: var(--space-md);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-md);
  min-height: 60px;
}

.no-roles-selected {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-small);
  font-style: italic;
}

.selected-roles-list {
  margin: 0;
  font-size: var(--font-small);
  color: var(--color-text);
  line-height: var(--line-height-relaxed);
}

/* Form Actions */
.form-actions {
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  padding-bottom: var(--space-xl);
  border-top: 2px solid var(--color-divider);
}

.form-actions-spacing {
  margin-top: var(--space-md);
}

/* Booking Summary */
.booking-summary {
  margin-bottom: var(--space-xl);
}

.summary-grid {
  display: grid;
  gap: var(--space-md);
}

.summary-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.summary-item strong {
  color: var(--color-dark-blue);
  font-weight: 600;
}

/* ============================================================================
   27. BOOKING CARDS
   ============================================================================
   Display booking information with status badges and action buttons.
   ============================================================================ */

.booking-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
}

.booking-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-divider);
}

.booking-card__header h4 {
  margin: 0;
  font-size: var(--font-medium);
  color: var(--color-text);
}

.booking-card__status {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: 600;
  text-transform: capitalize;
}

.booking-card__status--confirmed {
  background-color: rgba(30, 132, 73, 0.1);
  color: var(--color-success);
}

.booking-card__status--pending {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.booking-card__status--cancelled {
  background-color: rgba(192, 57, 43, 0.1);
  color: var(--color-red);
}

.booking-card__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}

.booking-card__detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.booking-card__detail-label {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--font-small);
}

.booking-card__detail-value {
  color: var(--color-text);
  font-size: var(--font-small);
}

.booking-card__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* Document Cards (for audition music PDFs) */
.document-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.document-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-white);
}

.document-card__icon {
  font-size: 2rem;
  flex-shrink: 0;
}

.document-card__info {
  flex: 1;
  min-width: 0; /* Allow text truncation */
}

.document-card__info h5 {
  margin: 0 0 var(--space-xs) 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
}

.document-card__meta {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.document-card .btn-primary {
  flex-shrink: 0;
  text-decoration: none;
  white-space: nowrap;
}

/* Mobile responsiveness for document cards */
@media (max-width: 600px) {
  .document-card {
    flex-direction: column;
    align-items: flex-start;
  }

  .document-card .btn-primary {
    width: 100%;
    text-align: center;
  }
}

/* ============================================================================
   28. CONFIRMATION PAGE
   ============================================================================
   Success page styling after booking completion.
   ============================================================================ */

.confirmation-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 200px);
  padding: var(--space-xl);
}

.confirmation-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  max-width: 600px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.confirmation-icon {
  margin: 0 auto var(--space-lg) auto;
  display: flex;
  justify-content: center;
}

.confirmation-card h1 {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-success);
  font-size: var(--font-large);
}

.confirmation-message {
  color: var(--color-text);
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-xl);
  text-align: left;
}

.confirmation-email-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--gradient-blue-bg);
  border: 1px solid var(--color-blue-button);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
  text-align: left;
}

.confirmation-email-notice svg {
  flex-shrink: 0;
  color: var(--color-blue-button);
  margin-top: 2px;
}

.confirmation-email-notice p {
  margin: 0;
  font-size: var(--font-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-dark-blue);
}

.confirmation-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.btn-large {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-base);
}

.confirmation-help {
  padding: var(--space-lg);
  background: var(--color-surface-subtle);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xl);
  text-align: left;
}

.confirmation-help p {
  margin: 0;
  font-size: var(--font-small);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
}

.success-icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: var(--space-sm);
}

/* Responsive Adjustments for Booking System */
@media (max-width: 768px) {
  .slot-modal,
  .role-modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0;
  }

  .slot-modal-header,
  .role-modal-header {
    padding: var(--space-md);
  }

  .slot-modal-header h2,
  .role-modal-header h2 {
    font-size: var(--font-medium);
    line-height: 1.4;
  }

  .slot-modal-close {
    flex-shrink: 0;
  }

  .role-selection-counter {
    padding: var(--space-sm) var(--space-md);
  }

  .counter-text {
    font-size: var(--font-small);
  }

  .counter-hint {
    font-size: var(--font-small);
  }

  .slot-modal-body,
  .role-modal-body {
    padding: var(--space-md);
  }

  .slot-modal-steps {
    padding: var(--space-md);
    gap: var(--space-sm);
  }

  .step-label {
    display: none;
  }

  .member-list {
    grid-template-columns: 1fr;
  }

  .slot-options {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  .form-actions,
  .slot-modal-footer,
  .role-modal-footer {
    flex-direction: column;
    gap: var(--space-md);
  }

  .slot-modal-footer-right {
    width: 100%;
    flex-direction: column;
    gap: var(--space-md);
  }

  .form-actions button,
  .form-actions a,
  .slot-modal-footer button,
  .role-modal-footer button {
    width: 100%;
  }

  .booking-card__actions {
    flex-direction: column;
  }

  .booking-card__actions button {
    width: 100%;
  }

  .confirmation-container {
    padding: var(--space-md);
  }

  .confirmation-card {
    padding: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .countdown-content {
    flex-direction: column;
    gap: var(--space-xs);
    font-size: var(--font-base);
  }

  .countdown-timer {
    font-size: var(--font-large);
  }

  .confirmation-email-notice {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================================================
   26. Radio Button Groups (Email Compose Page)
   ============================================================================ */

.radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border);
}

.radio-option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-primary);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  min-height: 44px;
}

.radio-option:hover {
  border-color: var(--color-primary);
  background: #f8f9fa;
}

.radio-option:has(input:checked) {
  border-color: var(--color-primary);
  background: #e7f3ff;
  box-shadow: 0 2px 4px rgba(0, 123, 255, 0.1);
}

.radio-option:has(input:focus-visible) {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.radio-option input[type="radio"] {
  width: 20px;
  height: 20px;
  margin: 0;
  cursor: pointer;
  flex-shrink: 0;
}

.radio-option label {
  margin: 0;
  cursor: pointer;
  flex: 1;
  font-weight: 500;
  color: var(--color-text-primary);
  user-select: none;
}

.radio-option:has(input:checked) label {
  color: var(--color-primary);
  font-weight: 600;
}

.section-heading {
  font-size: var(--font-large);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: var(--space-lg) 0 var(--space-md) 0;
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-border);
}

.recipient-count-display {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  background: var(--color-success);
  color: white;
  border-radius: var(--border-radius-md);
  font-weight: 600;
  margin-top: var(--space-md);
}

.recipient-count-display::before {
  content: "\2713";
  font-size: var(--font-large);
}

@media (max-width: 768px) {
  .radio-option {
    padding: var(--space-md);
  }

  .radio-group {
    gap: var(--space-xs);
  }
}

/* ============================================================================
   27. Email Campaign Dashboard Styles
   ============================================================================ */

/* Email Details Grid (inside members-wrapper) */
.email-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--color-white);
  border-radius: var(--border-radius-sm);
}

.email-detail-item {
  font-size: var(--font-small);
  color: var(--color-text-primary);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.email-detail-item strong {
  font-weight: 600;
  margin-right: var(--space-xs);
  opacity: 0.7;
}

/* Email Actions */
.email-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  padding: 0 var(--space-md) var(--space-md);
}

.email-actions .btn {
  flex: 0 1 auto;
}

/* Responsive adjustments for email dashboard */
@media (max-width: 768px) {
  .email-details-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-sm);
  }

  .email-actions {
    flex-direction: column;
    padding: 0 var(--space-sm) var(--space-sm);
  }

  .email-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .email-detail-item {
    font-size: 0.75rem;
  }
}

/* Status Badge Styles */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--border-radius-sm);
  font-size: var(--font-small);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.badge-secondary {
  background: #6c757d;
  color: var(--color-white);
}

.badge-info {
  background: #17a2b8;
  color: var(--color-white);
}

.badge-success {
  background: var(--color-success);
  color: var(--color-white);
}

.badge-danger {
  background: var(--color-danger);
  color: var(--color-white);
}

/* ============================================================================
   28. AUDITION DAY LOBBY STYLES
   ============================================================================
   Real-time audition session lobby with participant management, invitations,
   and session controls. Uses existing design tokens for consistency.
   ============================================================================ */

/* Lobby Header */
.lobby-header {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.lobby-header h2 {
  margin-bottom: var(--space-xs);
  color: var(--color-dark-blue);
}

.lobby-header .date {
  font-size: var(--font-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2xs);
}

.lobby-header .status-badge {
  display: inline-block;
  padding: var(--space-2xs) var(--space-sm);
  background: var(--color-success);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: 600;
}

/* Section Cards */
.section-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-light);
}

.section-card h3 {
  margin: 0 0 var(--space-md) 0;
  color: var(--color-dark-blue);
  font-size: var(--font-medium);
}

/* Pilot Info */
.pilot-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--gradient-card-highlighted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
}

.pilot-badge {
  background: var(--color-admin-bg);
  color: var(--color-white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: 600;
}

/* Participant List */
.participant-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.participant-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-divider);
}

.participant-item:last-child {
  border-bottom: none;
}

.participant-info {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

/* Status Indicators */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot.connected {
  background: var(--color-success);
  box-shadow: 0 0 4px var(--color-success);
}

.status-dot.disconnected {
  background: var(--color-text-secondary);
}


/* Participant Actions */
.participant-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.delete-participant-btn,
.delete-table-staff-btn {
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--space-2xs);
  border-radius: var(--radius-sm);
  transition: all var(--transition-base);
  font-size: var(--font-base);
  line-height: var(--line-height-tight);
  font-weight: 700;
}

.delete-participant-btn:hover,
.delete-table-staff-btn:hover {
  background: var(--color-red);
  color: var(--color-white);
  transform: scale(1.1);
}

/* Invitation Buttons */
.invite-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.invite-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-md);
  background: var(--gradient-card-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  color: var(--color-text);
}

.invite-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-light-blue);
  background: var(--color-admin-bg);
  color: var(--color-white);
}

.invite-icon {
  font-size: var(--font-large);
}

/* Action Buttons Container */
.action-buttons {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  margin-top: var(--space-xl);
}

/* Empty State Message */
.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-lg);
  color: var(--color-text-muted);
}

/* Section Header */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.section-header__title {
  margin: 0;
}

.section-header__legend {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  margin: 0;
}

/* Status Indicators (for legend) */
.status-indicator {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  margin-right: var(--space-2xs);
}

.status-indicator--invited {
  background: var(--color-text-secondary);
}

.status-indicator--joined {
  background: var(--color-success);
}

.legend-spacer {
  margin: 0 var(--space-sm);
}

/* Participant/Pilot Info */
.pilot-info,
.participant-name-wrapper {
  flex: 1;
}

.participant-name,
.pilot-name {
  font-weight: 500;
}

.pilot-name {
  font-weight: 600;
}

.participant-username,
.pilot-username {
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

/* Modal Descriptions */
.modal-description {
  margin-bottom: var(--space-md);
  color: var(--color-text-muted);
}

.modal-success-description {
  margin: var(--space-xs) 0;
  color: var(--color-text-muted);
}

/* Label States */
.label-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Error List Item */
.error-item {
  color: var(--color-red);
}

/* Invitation Modal */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.active {
  display: flex;
}

.modal-content {
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-heavy);
  max-width: 500px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
}

.modal-header {
  padding: var(--space-lg);
  border-bottom: 1px solid var(--color-divider);
}

.modal-header h3 {
  margin: 0;
  color: var(--color-dark-blue);
}

.modal-body {
  padding: var(--space-lg);
}

.modal-footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-divider);
  display: flex;
  gap: var(--space-md);
  justify-content: flex-end;
}

/* Admin Selection List */
.admin-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.admin-item {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.admin-item:last-child {
  border-bottom: none;
}

.admin-item label {
  cursor: pointer;
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.admin-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.admin-name {
  font-weight: 600;
  color: var(--color-dark-blue);
}

.admin-role {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

/* Success Message */
.success-message {
  background: var(--color-success-light);
  border-left: 4px solid var(--color-success);
  padding: var(--space-lg);
  border-radius: var(--radius-sm);
  margin: var(--space-md) 0;
}

.success-message h4 {
  margin: 0 0 var(--space-sm) 0;
  color: var(--color-dark-blue);
}

/* Invited List */
.invited-list {
  list-style: none;
  padding: 0;
  margin: var(--space-sm) 0 0 0;
}

.invited-list li {
  padding: var(--space-xs) 0;
  color: var(--color-text);
}

.invited-list li::before {
  content: "✓ ";
  color: var(--color-success);
  font-weight: 700;
}

/* Email Input Group */
.email-input-group {
  margin-bottom: var(--space-md);
}

.email-input-group label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 600;
  color: var(--color-text);
}

.email-input-group input {
  width: 100%;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
}


/* ============================================================================
   29. REAL-TIME AUDITION MANAGEMENT SYSTEM
   ============================================================================
   Shared styles for Socket.io-based collaborative audition pages including
   connection status, chat system, slot management, and responsive layouts.

   Used by:
   - admin-audition-slots.html - Slot list with real-time updates
   - admin-audition-members.html - Member list with real-time status
   - admin-audition-page.html - Audition form with collaborative editing
   - admin-audition-day-lobby.html - Audition session lobby
   - admin-audition-summary.html - Casting overview (not synced)
   ============================================================================ */

/* === Fixed Header === */
.audition-page #main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* === Connection Status Banner === */
.audition-page .connection-status {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  padding: var(--space-xs);
  text-align: center;
  font-size: var(--font-small);
  z-index: 999;
  transition: all var(--transition-base);
}

.audition-page .connection-status.connected {
  background: var(--color-success);
  color: var(--color-white);
}

.audition-page .connection-status.disconnected {
  background: var(--color-warning);
  color: var(--color-white);
}

.audition-page .connection-status.reconnecting {
  background: var(--color-light-blue);
  color: var(--color-white);
}

/* === Desktop Layout (>1300px): Main content left + Fixed chat right === */
@media (min-width: 1301px) {
  .audition-page-with-chat main {
    margin-top: calc(var(--nav-height) + var(--space-xl));
    margin-left: 0;
    margin-right: 25%;
    max-width: calc(100% - 25%);
    padding: var(--space-lg);
  }

  .audition-page-with-chat .chat-sidebar {
    position: fixed;
    top: calc(var(--nav-height) + var(--space-xl));
    right: 0;
    width: 25%;
    max-width: var(--chat-sidebar-width);
    height: calc(100vh - var(--nav-height) - var(--space-xl));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    padding-bottom: var(--space-chat-padding);
    background: var(--color-background);
    border-left: var(--border-medium) solid var(--color-border);
  }

  .audition-page-with-chat .chat-toggle-btn,
  .audition-page-with-chat .chat-backdrop,
  .audition-page-with-chat .chat-close-btn {
    display: none !important;
  }
}

/* === Tablet/Laptop Layout (≤1300px): Sliding chat overlay === */
@media (max-width: 1300px) {
  .audition-page-with-chat main {
    margin-top: calc(var(--nav-height) + var(--space-lg));
    padding: var(--space-md);
  }

  .audition-page-with-chat .chat-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 60%;
    max-width: var(--chat-sidebar-width);
    background: var(--color-white);
    box-shadow: var(--shadow-large);
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    overflow-y: auto;
  }

  .audition-page-with-chat .chat-sidebar.open {
    transform: translateX(0);
  }
}

@media (max-width: 480px) {
  .audition-page-with-chat .chat-sidebar {
    width: 90%;
  }
}

/* === Audition Slots Grid === */
.slots-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

/* Slot cards within slots grid - different from booking modal slot cards */
.slots-grid .slot-card {
  background: var(--gradient-card-subtle);
  border: var(--border-medium) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
}

.slots-grid .slot-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-light-blue);
}

.slots-grid .slot-card:active {
  transform: translateY(-2px);
}

/* Viewer-readonly mode - disable interactivity */
.slots-grid .slot-card.viewer-readonly {
  cursor: default;
  opacity: var(--opacity-prominent);
}

.slots-grid .slot-card.viewer-readonly:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-border);
}

.slots-grid .slot-card.viewer-readonly:active {
  transform: none;
}

/* Slot card time display */
.slots-grid .slot-time {
  font-size: var(--font-large);
  font-weight: 600;
  color: var(--color-dark-blue);
  margin-bottom: var(--space-sm);
}

/* === Slot Stats Grid === */
.slot-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.stat-item {
  text-align: center;
  padding: var(--space-sm);
  background: var(--color-white);
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--color-divider);
}

.stat-value {
  font-size: var(--font-medium);
  font-weight: 700;
  color: var(--color-dark-blue);
  display: block;
}

.stat-label {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--space-2xs);
}

.stat-item.completed .stat-value {
  color: var(--color-success);
}

.stat-item.in-progress .stat-value {
  color: var(--color-light-blue);
}

.stat-item.pending .stat-value {
  color: var(--color-text-muted);
}

.stat-item.no-show .stat-value {
  color: var(--color-red);
}

/* === Empty State Icon === */
.empty-state-icon {
  font-size: var(--empty-state-icon-size);
  margin-bottom: var(--space-md);
}

/* === Loading State === */
.loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.skeleton-card {
  height: var(--skeleton-card-height);
  background: var(--skeleton-base);
  border-radius: var(--radius-md);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* === Floating Summary Button === */
.floating-summary-btn {
  position: fixed;
  bottom: var(--space-lg);
  right: var(--space-lg);
  width: var(--chat-toggle-size);
  height: var(--chat-toggle-size);
  background: var(--color-success);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  font-size: var(--chat-icon-size);
  box-shadow: var(--shadow-large);
  cursor: pointer;
  z-index: 100;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.floating-summary-btn:hover {
  background: var(--color-success-dark);
  transform: scale(1.1);
}

/* === Chat Toggle Button (Mobile/Tablet only) === */
.chat-toggle-btn {
  position: fixed;
  bottom: var(--space-4xl);
  right: var(--space-lg);
  width: var(--chat-toggle-size);
  height: var(--chat-toggle-size);
  background: var(--color-light-blue);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  font-size: var(--chat-icon-size);
  box-shadow: var(--shadow-large);
  cursor: pointer;
  z-index: 1000;
  transition: all var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-toggle-btn:hover {
  background: var(--color-dark-blue);
  transform: scale(1.1);
}

/* === Notification Badge on Chat Button === */
.chat-toggle-btn .notification-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 24px;
  height: 24px;
  background: var(--color-red);
  color: var(--color-white);
  border-radius: 12px;
  font-size: var(--font-small);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-xs);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  animation: notification-pulse 2s ease-in-out infinite;
}

@keyframes notification-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.chat-toggle-btn .notification-badge.hidden {
  display: none;
}

/* === Chat Backdrop (Mobile/Tablet only) === */
.chat-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--overlay-backdrop);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

.chat-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

/* === Chat Close Button (Mobile/Tablet only) === */
.chat-close-btn {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: var(--chat-close-size);
  height: var(--chat-close-size);
  background: var(--color-divider);
  border: none;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
  z-index: 10;
}

.chat-close-btn:hover {
  background: var(--color-border);
}

/* === Chat Sidebar - Shared styles === */
.chat-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.chat-panel {
  background: var(--color-white);
  border: var(--border-medium) solid var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}

.chat-header {
  padding: var(--space-md);
  background: var(--color-light-blue);
  color: var(--color-white);
  font-weight: 600;
  font-size: var(--font-base);
}

/* Table Staff Chat - Different color scheme */
#tableStaffChatPanel .chat-header {
  background: var(--color-warning);
}

#tableStaffChatPanel .own-message .chat-text {
  background: var(--color-warning);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-height: 0;
}

.chat-message {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.chat-message.own-message {
  align-items: flex-end;
}

.chat-message.other-message {
  align-items: flex-start;
}

.chat-sender {
  font-size: var(--font-small);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.chat-text {
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  word-wrap: break-word;
  max-width: 80%;
}

.own-message .chat-text {
  background: var(--color-light-blue);
  color: var(--color-white);
  border-bottom-right-radius: var(--space-xs);
}

.other-message .chat-text {
  background: var(--color-divider);
  color: var(--color-text);
  border-bottom-left-radius: var(--space-xs);
}

.chat-input-container {
  padding: var(--space-md);
  border-top: var(--border-thin) solid var(--color-divider);
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
}

.chat-input-container input {
  flex: 1;
  padding: var(--space-sm);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  margin: 0;
}

.chat-input-container button {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-light-blue);
  color: var(--color-white);
  border: var(--border-thin) solid var(--color-light-blue);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-size: var(--font-small);
}

.chat-input-container button:hover {
  background: var(--color-dark-blue);
  border-color: var(--color-dark-blue);
}

/* === Mobile Responsive === */
@media (max-width: 768px) {
  .slots-grid {
    grid-template-columns: 1fr;
  }

  .slots-grid .slot-card {
    padding: var(--space-md);
  }

  .floating-summary-btn {
    bottom: var(--space-md);
    right: var(--space-md);
  }

  .chat-toggle-btn {
    bottom: 72px;
    right: var(--space-md);
  }
}


/* === Members List === */
.members-list {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0;
}

.member-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md) var(--space-lg);
  background: var(--color-white);
  border: var(--border-medium) solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  cursor: pointer;
  transition: all var(--transition-base);
}

.member-item:hover {
  transform: translateX(4px);
  border-color: var(--color-light-blue);
  box-shadow: var(--shadow-medium);
}

.member-item--disabled {
  cursor: default;
  opacity: 0.7;
}

.member-item--disabled:hover {
  transform: none;
  border-color: var(--color-border);
  box-shadow: none;
}

.member-info {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex: 1;
}

.member-name {
  font-weight: 600;
  color: var(--color-dark-blue);
  font-size: var(--font-base);
}

.member-email {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  margin-top: var(--space-2xs);
}

.status-badge {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: 600;
  white-space: nowrap;
}

.status-badge.pending {
  background: var(--color-disabled-bg);
  color: var(--color-text-muted);
}

.status-badge.in_progress {
  background: var(--color-light-blue);
  color: var(--color-white);
}

.status-badge.completed {
  background: var(--color-success);
  color: var(--color-white);
}

.status-badge.no_show {
  background: var(--color-red);
  color: var(--color-white);
}

.member-interests {
  font-size: var(--font-small);
  color: var(--color-text-secondary);
  margin-top: var(--space-2xs);
}

/* Members List Loading State */
.skeleton-list {
  list-style: none;
  padding: 0;
  margin: var(--space-xl) 0;
}

.skeleton-item {
  height: 80px;
  background: var(--skeleton-base);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  animation: pulse 1.5s ease-in-out infinite;
}

/* Members List Mobile Responsive */
@media (max-width: 768px) {
  .member-item {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  .member-info {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .status-badge {
    align-self: flex-end;
  }
}


/* === Audition Page Layout === */
.audition-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  margin-top: calc(var(--nav-height) + 40px);
  padding: var(--space-lg);
  max-width: var(--container-audition-max);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 1200px) {
  .audition-layout {
    grid-template-columns: 1fr 380px;
  }

  .chat-container {
    position: sticky;
    top: calc(var(--nav-height) + 50px);
    height: calc(100vh - var(--nav-height) - 70px);
    overflow: hidden;
  }
}

.audition-content {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
  box-shadow: var(--shadow-light);
}

/* === Member Header === */
.member-header {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: var(--border-medium) solid var(--color-divider);
}

.member-headshot {
  width: var(--headshot-size);
  height: var(--headshot-size);
  border-radius: var(--radius-md);
  object-fit: cover;
  border: var(--border-medium) solid var(--color-border);
}

.member-headshot-placeholder {
  width: var(--headshot-size);
  height: var(--headshot-size);
  border-radius: var(--radius-md);
  background: var(--color-avatar-fallback);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--icon-xlarge);
  border: var(--border-medium) solid var(--color-border);
}

.member-details {
  font-size: var(--font-small);
  color: var(--color-text-muted);
  margin-top: var(--space-xs);
}

/* === Form Sections === */
.form-section {
  margin-bottom: var(--space-xl);
}

.form-section h3 {
  font-size: var(--font-medium);
  color: var(--color-dark-blue);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: var(--border-thin) solid var(--color-divider);
}

/* Accordion headers inside form-sections: no underline, white text */
.form-section .family-header h3 {
  color: var(--color-white);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  color: var(--color-text);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: var(--space-sm);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-base);
}

/* Audition notes: tall default so users don't need to drag */
#auditionForm #notes {
  min-height: 300px;
  resize: vertical;
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

/* === Show Interests Display === */
.interests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--space-sm);
}

.interest-item {
  padding: var(--space-sm);
  background: var(--color-background);
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--color-divider);
}

.interest-show {
  font-weight: 600;
  margin-bottom: var(--space-2xs);
}

.interest-level {
  font-size: var(--font-small);
  color: var(--color-text-muted);
}

/* === Role Selection === */
.roles-by-show {
  display: grid;
  gap: var(--space-md);
}

.show-roles {
  border: var(--border-thin) solid var(--color-divider);
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  background: var(--color-background);
}

.show-title {
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-dark-blue);
}

.roles-list {
  display: grid;
  gap: var(--space-xs);
}

.role-checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-base);
}

.role-checkbox:hover {
  background: var(--color-white);
}

.role-checkbox input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* === Compact role grid (audition page accordion) === */
/* 4-wide responsive grid; font & checkbox reduced by ~1/3 */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3xs) var(--space-xs);
  padding: var(--space-xs) 0;
}

.roles-grid .role-checkbox {
  font-size: 0.68rem;
  gap: var(--space-3xs);
  padding: var(--space-3xs) var(--space-2xs);
}

.roles-grid .role-checkbox input[type="checkbox"] {
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
  cursor: pointer;
}

@media (max-width: 900px) {
  .roles-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 600px) {
  .roles-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 380px) {
  .roles-grid {
    grid-template-columns: 1fr;
  }
}
/* === Chat Container (Audition Page Desktop Sidebar) === */
.chat-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* === Mobile: Floating Chat Button + Bottom Drawer === */
.chat-fab {
  display: none;
}

.chat-drawer {
  display: none;
}

@media (max-width: 1199px) {
  .chat-container {
    display: none;
  }

  .chat-fab {
    display: flex;
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    width: 60px;
    height: 60px;
    background: var(--color-light-blue);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: var(--shadow-large);
    cursor: pointer;
    z-index: 1000;
  }

  .chat-drawer {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60vh;
    background: var(--color-white);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1001;
    flex-direction: column;
  }

  .chat-drawer.open {
    transform: translateY(0);
  }

  .chat-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    background: var(--color-dark-blue);
    color: var(--color-white);
    font-weight: 600;
  }

  .chat-drawer-close {
    background: none;
    border: none;
    color: var(--color-white);
    font-size: 28px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .chat-drawer-content {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .chat-drawer .chat-panel {
    height: auto;
    flex: 1;
    min-height: 200px;
  }
}


/* === Join Invitation Page === */
.join-container {
  max-width: 600px;
  margin: var(--space-2xl) auto;
  text-align: center;
}

.join-card {
  background: var(--color-white);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-medium);
}

.join-icon {
  font-size: 64px;
  margin-bottom: var(--space-md);
}

.join-title {
  font-size: var(--font-large);
  color: var(--color-dark-blue);
  margin-bottom: var(--space-xs);
}

.join-subtitle {
  font-size: var(--font-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
}

.info-grid {
  display: grid;
  gap: var(--space-md);
  text-align: left;
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--color-background);
  border-radius: var(--radius-sm);
}

.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: var(--border-thin) solid var(--color-divider);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  font-weight: 600;
  color: var(--color-text);
}

.info-value {
  color: var(--color-text-muted);
}

.role-badge {
  display: inline-block;
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: 700;
  color: var(--color-white);
}

.role-badge.copilot {
  background: var(--color-success);
}

.role-badge.viewer {
  background: var(--color-light-blue);
}

.role-badge.table_staff {
  background: var(--color-purple);
}

/* Role Badge Status Modifiers (for lobby page) — must come after role colors to win cascade */
.role-badge.invited {
  background: var(--color-text-secondary);
  color: var(--color-white);
}

.role-badge.joined {
  background: var(--color-success);
  color: var(--color-white);
}

.loading-spinner {
  display: inline-block;
  width: 40px;
  height: 40px;
  border: var(--border-thick) solid var(--color-divider);
  border-top-color: var(--color-light-blue);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

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

.error-state {
  color: var(--color-red);
  padding: var(--space-lg);
}

.error-icon {
  font-size: var(--icon-xlarge);
  margin-bottom: var(--space-md);
}


/* === Table Staff Check-In Panel === */

.checkin-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.checkin-slot-section {
  border: var(--border-thin) solid var(--color-divider);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.checkin-slot-section__header {
  background: var(--color-light-blue);
  color: var(--color-white);
  padding: var(--space-sm) var(--space-md);
  font-weight: 700;
  font-size: var(--font-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.checkin-slot-section__count {
  font-size: var(--font-small);
  opacity: 0.9;
  font-weight: 400;
}

.checkin-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-thin) solid var(--color-divider);
  background: var(--color-white);
  gap: var(--space-sm);
  min-height: 52px;
}

.checkin-member-row:last-child {
  border-bottom: none;
}

.checkin-member-row--checked-in {
  background: var(--color-success-tint);
}

.checkin-member-row--no-show {
  background: var(--color-danger-tint);
}

.checkin-member-row__name {
  font-weight: 600;
  font-size: var(--font-base);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.checkin-member-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

.checkin-btn {
  padding: var(--space-xs) var(--space-md);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--font-small);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-base);
  white-space: nowrap;
  min-height: 36px;
}

.checkin-btn--arrive {
  background: var(--color-success);
  color: var(--color-white);
}

.checkin-btn--arrive:hover {
  filter: brightness(0.9);
}

.checkin-btn--undo {
  background: var(--color-disabled-bg);
  color: var(--color-text-secondary);
}

.checkin-btn--undo:hover {
  background: var(--color-divider);
}

.checkin-btn--checkin {
  background: var(--color-success);
  color: var(--color-white);
  opacity: 0.8;
}

.checkin-btn--checkin:hover {
  background: var(--color-success-dark);
  opacity: 1;
}

.checkin-btn--checkin--active {
  background: var(--color-success-bright);
  color: var(--color-white);
}

.checkin-btn--checkin--active:hover {
  filter: brightness(0.9);
}

.checkin-btn--move {
  background: var(--color-blue-button);
  color: var(--color-white);
}

.checkin-btn--move:hover {
  background: var(--color-blue-button-hover);
}

.checkin-btn--dimmed {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.checkin-btn--no-show {
  background: var(--color-danger-button);
  color: var(--color-white);
  opacity: 0.8;
}

.checkin-btn--no-show:hover {
  background: var(--color-danger-button-hover);
}

.checkin-btn--no-show--active {
  background: var(--color-red);
  color: var(--color-white);
}

.checkin-btn--no-show--active:hover {
  background: var(--color-red-dark);
}

/* Move modal card */
.modal-card {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-heavy);
  padding: var(--space-lg);
  overflow: hidden;
}

/* Move modal slot list */
.move-slot-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  max-height: 55vh;
  overflow-y: auto;
  margin-bottom: var(--space-md);
  padding-right: var(--space-2xs);
}

.move-slot-group__label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-dark-blue);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  margin-top: var(--space-xs);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.move-slot-group__label:first-child {
  margin-top: 0;
}

.move-slot-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.move-slot-option {
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-base);
  font-family: inherit;
  color: var(--color-text-primary);
  cursor: pointer;
  text-align: left;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.move-slot-option__time {
  font-weight: 600;
}

.move-slot-option__date {
  font-size: var(--font-sm);
  color: var(--color-text-muted);
}

.move-slot-option:hover {
  background: var(--color-blue-bg-light);
  border-color: var(--color-primary);
}

.move-slot-option:hover .move-slot-option__time,
.move-slot-option:hover .move-slot-option__date {
  color: var(--color-primary);
}

/* checked_in badge variant */
.status-badge.checked_in {
  background: var(--color-success);
  color: var(--color-white);
}

/* Checked-in stat on slot cards */
.stat-item.checked-in .stat-value {
  color: var(--color-success);
}

/* Slot stats grid — 3+2 wrap layout when checked-in stat is present */
.slot-stats--five {
  grid-template-columns: repeat(3, 1fr);
}

.slot-stats--five .stat-item {
  padding: var(--space-xs) var(--space-2xs);
}

.slot-stats--five .stat-label {
  font-size: var(--font-2xs);
}

/* === Reduced Motion Support === */
@media (prefers-reduced-motion: reduce) {
  /* Disable slide transitions */
  .chat-sidebar,
  .chat-drawer {
    transition: none !important;
  }

  /* Disable pulse animations */
  .presence-indicator::after,
  .unread-badge::after {
    animation: none !important;
  }

  /* Disable loading spinner animation */
  .loading-spinner {
    animation: none !important;
  }

  /* Disable skeleton loading animations */
  .skeleton-card::after,
  .skeleton-item::after {
    animation: none !important;
  }

  /* Reduce transform animations to instant changes */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}