/* ============================================
   McBees Finest - Booking System Stylesheet
   Red, White, and Blue patriotic theme
   ============================================ */

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Open+Sans:wght@300;400;500;600&display=swap");

/* CSS Variables */
:root {
   /* Colors - Patriotic red, white, blue */
   --color-primary: #c41e3a;
   --color-primary-dark: #9b1b30;
   --color-primary-light: #e63950;

   --color-secondary: #1e3a5f;
   --color-secondary-dark: #152a45;
   --color-secondary-light: #2a4f7a;

   --color-accent: #ffd700;
   --color-accent-light: #fff3b0;

   --color-bg: #f8f9fa;
   --color-bg-alt: #ffffff;
   --color-bg-card: #ffffff;
   --color-bg-dark: #1e3a5f;

   --color-text: #2d3748;
   --color-text-light: #718096;
   --color-text-muted: #a0aec0;
   --color-text-white: #ffffff;

   --color-success: #38a169;
   --color-error: #e53e3e;
   --color-warning: #d69e2e;
   --color-info: #3182ce;

   --color-border: #e2e8f0;
   --color-border-dark: #cbd5e0;

   /* Typography */
   --font-display: "Oswald", -apple-system, BlinkMacSystemFont, sans-serif;
   --font-body: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;

   /* Spacing */
   --space-xs: 0.25rem;
   --space-sm: 0.5rem;
   --space-md: 1rem;
   --space-lg: 1.5rem;
   --space-xl: 2rem;
   --space-2xl: 3rem;
   --space-3xl: 4rem;

   /* Border Radius */
   --radius-sm: 4px;
   --radius-md: 8px;
   --radius-lg: 12px;
   --radius-xl: 16px;

   /* Shadows */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);

   /* Transitions */
   --transition-fast: 150ms ease;
   --transition-base: 250ms ease;
}

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

html {
   font-size: 16px;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

body {
   font-family: var(--font-body);
   font-weight: 400;
   line-height: 1.6;
   color: var(--color-text);
   background: var(--color-bg);
   min-height: 100vh;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: var(--font-display);
   font-weight: 600;
   line-height: 1.2;
   color: var(--color-text);
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

h1 {
   font-size: 2.5rem;
}
h2 {
   font-size: 2rem;
}
h3 {
   font-size: 1.5rem;
}
h4 {
   font-size: 1.25rem;
}
h5 {
   font-size: 1rem;
}

p {
   margin-bottom: var(--space-md);
}

a {
   color: var(--color-primary);
   text-decoration: none;
   transition: color var(--transition-fast);
}

a:hover {
   color: var(--color-primary-dark);
}

/* Layout */
.container {
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 var(--space-lg);
}

.container-narrow {
   max-width: 600px;
}

.container-medium {
   max-width: 900px;
}

.container-wide {
   max-width: 1400px;
}

/* Header */
.header {
   background: var(--color-secondary);
   padding: var(--space-md) 0;
   position: sticky;
   top: 0;
   z-index: 100;
   box-shadow: var(--shadow-md);
}

.header-inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo {
   display: flex;
   align-items: center;
   gap: var(--space-md);
}

.logo img {
   height: 50px;
   width: auto;
}

.logo-text {
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 700;
   color: var(--color-text-white);
   text-transform: uppercase;
   letter-spacing: 2px;
}

.logo-text span {
   color: var(--color-primary);
}

.nav {
   display: flex;
   align-items: center;
   gap: var(--space-lg);
}

.nav a {
   font-family: var(--font-display);
   font-weight: 500;
   color: var(--color-text-white);
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 0.9rem;
   transition: color var(--transition-fast);
}

.nav a:hover {
   color: var(--color-accent);
}

/* Buttons */
.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: var(--space-sm);
   padding: var(--space-sm) var(--space-lg);
   font-family: var(--font-display);
   font-size: 0.9rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   border: none;
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: all var(--transition-base);
   text-decoration: none;
}

.btn-primary {
   background: var(--color-primary);
   color: var(--color-text-white) !important;
}

.btn-primary:hover {
   background: var(--color-primary-dark);
   color: var(--color-text-white) !important;
   transform: translateY(-2px);
   box-shadow: var(--shadow-md);
}

.btn-secondary {
   background: var(--color-secondary);
   color: var(--color-text-white) !important;
}

.btn-secondary:hover {
   background: var(--color-secondary-dark);
   color: var(--color-text-white) !important;
}

.btn-outline {
   background: transparent;
   color: var(--color-primary);
   border: 2px solid var(--color-primary);
}

.btn-outline:hover {
   background: var(--color-primary);
   color: var(--color-text-white) !important;
}

.btn-outline-white {
   background: transparent;
   color: var(--color-text-white);
   border: 2px solid var(--color-text-white);
}

.btn-outline-white:hover {
   background: var(--color-text-white);
   color: var(--color-secondary) !important;
}

.btn-success {
   background: var(--color-success);
   color: var(--color-text-white) !important;
}

.btn-success:hover {
   background: #2f8a5a;
}

.btn-danger {
   background: var(--color-error);
   color: var(--color-text-white) !important;
}

.btn-danger:hover {
   background: #c53030;
}

.btn-sm {
   padding: var(--space-xs) var(--space-md);
   font-size: 0.8rem;
}

.btn-lg {
   padding: var(--space-md) var(--space-xl);
   font-size: 1rem;
}

.btn:disabled {
   opacity: 0.5;
   cursor: not-allowed;
   transform: none !important;
}

/* Forms */
.form-group {
   margin-bottom: var(--space-lg);
}

.form-label {
   display: block;
   margin-bottom: var(--space-sm);
   font-weight: 600;
   color: var(--color-text);
   font-size: 0.9rem;
}

.form-input,
.form-select,
.form-textarea {
   width: 100%;
   padding: var(--space-sm) var(--space-md);
   font-family: var(--font-body);
   font-size: 1rem;
   color: var(--color-text);
   background: var(--color-bg-card);
   border: 2px solid var(--color-border);
   border-radius: var(--radius-md);
   transition:
      border-color var(--transition-fast),
      box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
   outline: none;
   border-color: var(--color-primary);
   box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
}

.form-textarea {
   min-height: 100px;
   resize: vertical;
}

.form-hint {
   margin-top: var(--space-xs);
   font-size: 0.85rem;
   color: var(--color-text-muted);
}

.form-error {
   color: var(--color-error);
}

.form-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--space-lg);
}

/* Cards */
.card {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   box-shadow: var(--shadow-sm);
}

.card-header {
   margin-bottom: var(--space-lg);
   padding-bottom: var(--space-lg);
   border-bottom: 2px solid var(--color-border);
}

.card-title {
   font-size: 1.25rem;
   margin-bottom: var(--space-xs);
   color: var(--color-secondary);
}

.card-subtitle {
   color: var(--color-text-light);
   font-size: 0.9rem;
}

/* Hero Section */
.hero {
   background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
   padding: var(--space-3xl) 0;
   text-align: center;
   position: relative;
   overflow: hidden;
}

.hero::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></svg>')
      repeat;
   background-size: 100px 100px;
   pointer-events: none;
}

.hero-content {
   position: relative;
   z-index: 1;
}

.hero h1 {
   color: var(--color-text-white);
   margin-bottom: var(--space-md);
   font-size: 3rem;
}

.hero p {
   color: rgba(255, 255, 255, 0.9);
   font-size: 1.25rem;
   max-width: 600px;
   margin: 0 auto var(--space-xl);
}

/* Section */
.section {
   padding: var(--space-3xl) 0;
}

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

.section-header h2 {
   margin-bottom: var(--space-sm);
   color: var(--color-secondary);
}

.section-header p {
   color: var(--color-text-light);
   max-width: 600px;
   margin: 0 auto;
}

/* Calendar Styles */
.calendar-container {
   background: var(--color-bg-card);
   border-radius: var(--radius-lg);
   box-shadow: var(--shadow-md);
   overflow: hidden;
}

.calendar-header {
   background: var(--color-secondary);
   color: var(--color-text-white);
   padding: var(--space-lg);
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.calendar-nav {
   display: flex;
   justify-content: center;
   gap: var(--space-sm);
   margin-bottom: var(--space-md);
}

.calendar-nav button {
   background: var(--color-secondary);
   border: none;
   color: var(--color-text-white);
   padding: var(--space-sm) var(--space-md);
   border-radius: var(--radius-md);
   cursor: pointer;
   font-family: var(--font-display);
   font-weight: 600;
   transition: background var(--transition-fast);
}

.calendar-nav button:hover {
   background: var(--color-secondary-dark);
}

.calendar-title {
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 2px;
}

.calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
}

.calendar-day-header {
   padding: var(--space-md);
   text-align: center;
   font-weight: 600;
   font-size: 0.85rem;
   color: var(--color-text-light);
   background: var(--color-bg);
   text-transform: uppercase;
   letter-spacing: 1px;
}

.calendar-day {
   min-height: 100px;
   padding: var(--space-sm);
   border: 1px solid var(--color-border);
   background: var(--color-bg-card);
   cursor: pointer;
   transition: all var(--transition-fast);
   position: relative;
}

.calendar-day:hover {
   background: var(--color-bg);
}

.calendar-day.other-month {
   background: var(--color-bg);
   color: var(--color-text-muted);
}

.calendar-day.today {
   border-color: var(--color-primary);
   border-width: 2px;
}

.calendar-day.selected {
   background: rgba(196, 30, 58, 0.2) !important;
   border-color: var(--color-primary);
   border-width: 2px;
}

/* Colorblind-friendly calendar status colors */
.calendar-day.available {
   background: var(--color-bg-card);
   cursor: pointer;
}

.calendar-day.available:hover {
   background: rgba(196, 30, 58, 0.05);
   border-color: var(--color-primary);
}

.calendar-day.partial {
   background: #fff3cd;
   border-left: 4px solid #856404;
   cursor: pointer;
}

.calendar-day.partial:hover {
   background: #ffe69c;
   border-color: var(--color-primary);
}

.calendar-day.unavailable {
   background: repeating-linear-gradient(-45deg, #e8f4fc, #e8f4fc 4px, #cce5f6 4px, #cce5f6 8px);
   color: #1565c0;
   cursor: not-allowed;
   pointer-events: none;
}

.calendar-day.past {
   background: #f5f5f5;
   color: #9e9e9e;
}

.calendar-day.blocked {
   background: repeating-linear-gradient(-45deg, #e8f4fc, #e8f4fc 4px, #cce5f6 4px, #cce5f6 8px);
   cursor: not-allowed;
}

.calendar-day.disabled {
   opacity: 0.5;
   cursor: not-allowed;
   pointer-events: none;
}

/* Legend colors - colorblind friendly */
.legend-color.available-legend {
   background: var(--color-bg-card);
   border: 2px solid var(--color-border-dark);
}

.legend-color.partial-legend {
   background: #fff3cd;
   border-left: 3px solid #856404;
}

.legend-color.unavailable-legend {
   background: repeating-linear-gradient(-45deg, #e8f4fc, #e8f4fc 3px, #cce5f6 3px, #cce5f6 6px);
   border: 1px solid #90caf9;
}

.calendar-day.clickable {
   cursor: pointer;
}

.calendar-day.clickable:hover {
   background: rgba(196, 30, 58, 0.05);
   border-color: var(--color-primary);
}

.calendar-day-number {
   font-weight: 600;
   font-size: 0.9rem;
   margin-bottom: var(--space-xs);
}

.calendar-event {
   font-size: 0.75rem;
   padding: 2px 6px;
   border-radius: var(--radius-sm);
   margin-bottom: 2px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: var(--color-text-white);
}

.calendar-event.full-day {
   background: var(--color-primary);
}

.calendar-event.half-day-am {
   background: var(--color-secondary);
}

.calendar-event.half-day-pm {
   background: var(--color-info);
}

.calendar-event.blocked {
   background: var(--color-success);
}

.calendar-event.pending {
   background: var(--color-warning);
}

/* Legend */
.calendar-legend {
   display: flex;
   gap: var(--space-lg);
   padding: var(--space-lg);
   background: var(--color-bg);
   flex-wrap: wrap;
   justify-content: center;
}

.legend-item {
   display: flex;
   align-items: center;
   gap: var(--space-sm);
   font-size: 0.85rem;
}

.legend-color {
   width: 16px;
   height: 16px;
   border-radius: var(--radius-sm);
}

/* Booking Form */
.booking-steps {
   display: flex;
   justify-content: center;
   margin-bottom: var(--space-2xl);
}

.step {
   display: flex;
   align-items: center;
   gap: var(--space-md);
}

.step-number {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: var(--color-border);
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-display);
   font-weight: 700;
   color: var(--color-text-light);
}

.step.active .step-number {
   background: var(--color-primary);
   color: var(--color-text-white);
}

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

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

.step.active .step-label {
   color: var(--color-text);
}

.step-connector {
   width: 60px;
   height: 2px;
   background: var(--color-border);
   margin: 0 var(--space-md);
}

/* Club Cards */
.club-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
   gap: var(--space-lg);
}

.club-card {
   background: var(--color-bg-card);
   border: 2px solid var(--color-border);
   border-radius: var(--radius-lg);
   padding: var(--space-lg);
   cursor: pointer;
   transition: all var(--transition-base);
   position: relative;
}

.club-card:hover {
   border-color: var(--color-primary);
   box-shadow: var(--shadow-md);
   transform: translateY(-2px);
}

.club-card.selected {
   border-color: var(--color-primary);
   background: rgba(196, 30, 58, 0.05);
}

.club-color-indicator {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 4px;
   border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.club-name {
   font-family: var(--font-display);
   font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: var(--space-sm);
   margin-top: var(--space-sm);
}

.club-address {
   color: var(--color-text-light);
   font-size: 0.9rem;
   margin-bottom: var(--space-md);
}

.club-travel-fee {
   font-weight: 600;
   color: var(--color-primary);
}

/* Invoice Styles */
.invoice-preview {
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-lg);
}

.invoice-header {
   background: var(--color-primary);
   color: var(--color-text-white);
   padding: var(--space-xl);
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
}

.invoice-title {
   font-family: var(--font-display);
   font-size: 3rem;
   font-weight: 700;
   letter-spacing: 4px;
}

.invoice-logo {
   width: 100px;
   height: auto;
}

.invoice-body {
   padding: var(--space-xl);
}

.invoice-meta {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: var(--space-xl);
   margin-bottom: var(--space-xl);
}

.invoice-table {
   width: 100%;
   border-collapse: collapse;
   margin-bottom: var(--space-xl);
}

.invoice-table th {
   background: var(--color-secondary);
   color: var(--color-text-white);
   padding: var(--space-md);
   text-align: left;
   font-family: var(--font-display);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
}

.invoice-table td {
   padding: var(--space-md);
   border-bottom: 1px solid var(--color-border);
}

.invoice-table .total-row td {
   font-weight: 700;
   background: var(--color-bg);
}

.invoice-footer {
   background: var(--color-primary);
   color: var(--color-text-white);
   padding: var(--space-xl);
}

/* Dashboard Stats */
.stats-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: var(--space-2xl);
   margin-bottom: var(--space-2xl);
}

.stat-card {
   background: var(--color-bg-card);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   margin: var(--space-md);
   text-align: center;
   box-shadow: var(--shadow-sm);
   border-left: 4px solid var(--color-primary);
}

.stat-number {
   font-family: var(--font-display);
   font-size: 2.5rem;
   font-weight: 700;
   color: var(--color-primary);
   line-height: 1;
}

.stat-label {
   color: var(--color-text-light);
   font-size: 0.9rem;
   margin-top: var(--space-sm);
   text-transform: uppercase;
   letter-spacing: 1px;
}

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

.booking-item {
   display: flex;
   align-items: center;
   gap: var(--space-lg);
   padding: var(--space-lg);
   background: var(--color-bg-card);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-lg);
   transition: all var(--transition-fast);
}

.booking-item:hover {
   box-shadow: var(--shadow-md);
}

.booking-date-badge {
   background: var(--color-secondary);
   color: var(--color-text-white);
   padding: var(--space-md);
   border-radius: var(--radius-md);
   text-align: center;
   min-width: 70px;
}

.booking-date-day {
   font-family: var(--font-display);
   font-size: 1.5rem;
   font-weight: 700;
   line-height: 1;
}

.booking-date-month {
   font-size: 0.75rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-top: var(--space-xs);
}

.booking-details {
   flex: 1;
}

.booking-title {
   font-weight: 600;
   margin-bottom: var(--space-xs);
}

.booking-info {
   color: var(--color-text-light);
   font-size: 0.9rem;
}

.booking-status {
   padding: var(--space-xs) var(--space-md);
   border-radius: 20px;
   font-size: 0.8rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.booking-status.pending {
   background: var(--color-warning);
   color: #744210;
}

.booking-status.approved {
   background: var(--color-success);
   color: var(--color-text-white);
}

.booking-status.denied {
   background: var(--color-error);
   color: var(--color-text-white);
}

.booking-status.completed {
   background: var(--color-secondary);
   color: var(--color-text-white);
}

/* Alerts */
.alert {
   padding: var(--space-md) var(--space-lg);
   border-radius: var(--radius-md);
   margin-bottom: var(--space-lg);
   border-left: 4px solid;
}

.alert-success {
   background: #c6f6d5;
   color: #22543d;
   border-color: var(--color-success);
}

.alert-error {
   background: #fed7d7;
   color: #742a2a;
   border-color: var(--color-error);
}

.alert-warning {
   background: #fefcbf;
   color: #744210;
   border-color: var(--color-warning);
}

.alert-info {
   background: #bee3f8;
   color: #2a4365;
   border-color: var(--color-info);
}

/* Tables */
.data-table {
   width: 100%;
   border-collapse: collapse;
   background: var(--color-bg-card);
   border-radius: var(--radius-lg);
   overflow: hidden;
   box-shadow: var(--shadow-sm);
}

.data-table th,
.data-table td {
   padding: var(--space-md) var(--space-lg);
   text-align: left;
   border-bottom: 1px solid var(--color-border);
}

.data-table th {
   background: var(--color-secondary);
   color: var(--color-text-white);
   font-family: var(--font-display);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   font-size: 0.85rem;
}

.data-table tr:hover {
   background: var(--color-bg);
}

.data-table tr:last-child td {
   border-bottom: none;
}

/* Badges */
.badge {
   display: inline-block;
   padding: var(--space-xs) var(--space-md);
   border-radius: 20px;
   font-size: 0.75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
}

.badge-primary {
   background: var(--color-primary);
   color: var(--color-text-white);
}

.badge-secondary {
   background: var(--color-secondary);
   color: var(--color-text-white);
}

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

.badge-warning {
   background: var(--color-warning);
   color: #744210;
}

.badge-error {
   background: var(--color-error);
   color: var(--color-text-white);
}

.badge-info {
   background: var(--color-info);
   color: var(--color-text-white);
}

/* Modal */
.modal-overlay {
   position: fixed;
   inset: 0;
   background: rgba(0, 0, 0, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: var(--space-lg);
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transition: all var(--transition-base);
}

.modal-overlay.active {
   opacity: 1;
   visibility: visible;
}

.modal {
   background: var(--color-bg-card);
   border-radius: var(--radius-lg);
   padding: var(--space-xl);
   max-width: 500px;
   width: 100%;
   max-height: 90vh;
   overflow-y: auto;
   transform: translateY(20px) scale(0.95);
   transition: transform var(--transition-base);
}

.modal-overlay.active .modal {
   transform: translateY(0) scale(1);
}

.modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: var(--space-lg);
   padding-bottom: var(--space-lg);
   border-bottom: 2px solid var(--color-border);
}

.modal-close {
   background: none;
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
   color: var(--color-text-light);
   transition: color var(--transition-fast);
}

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

/* Printable Schedule */
.printable-schedule {
   background: var(--color-bg-card);
   padding: var(--space-lg);
}

.schedule-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--space-lg);
   border: 1px solid var(--color-text);
}

.schedule-month {
   padding: var(--space-md);
   border: 1px solid var(--color-text);
}

.schedule-month-title {
   font-family: var(--font-display);
   font-size: 1.25rem;
   font-weight: 700;
   margin-bottom: var(--space-md);
   text-transform: uppercase;
}

.schedule-day {
   padding: 2px 4px;
   font-size: 0.85rem;
   line-height: 1.4;
}

.schedule-day.booked {
   background: #ffff00;
}

.schedule-day.blocked {
   background: #00ff00;
}

/* Loading Spinner */
.spinner {
   width: 40px;
   height: 40px;
   border: 3px solid var(--color-border);
   border-top-color: var(--color-primary);
   border-radius: 50%;
   animation: spin 1s linear infinite;
   margin: var(--space-xl) auto;
}

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

/* Empty State */
.empty-state {
   text-align: center;
   padding: var(--space-3xl) var(--space-xl);
   color: var(--color-text-light);
}

.empty-state-icon {
   font-size: 4rem;
   margin-bottom: var(--space-lg);
   opacity: 0.5;
}

/* Tabs */
.tabs {
   display: flex;
   gap: var(--space-sm);
   margin-bottom: var(--space-xl);
   border-bottom: 2px solid var(--color-border);
   padding-bottom: var(--space-sm);
   flex-wrap: wrap;
}

.tab {
   padding: var(--space-sm) var(--space-lg);
   background: transparent;
   border: none;
   font-family: var(--font-display);
   font-weight: 600;
   font-size: 0.9rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   color: var(--color-text-light);
   cursor: pointer;
   border-radius: var(--radius-md) var(--radius-md) 0 0;
   transition: all var(--transition-fast);
}

.tab:hover {
   background: var(--color-bg);
   color: var(--color-text);
}

.tab.active {
   background: var(--color-primary);
   color: var(--color-text-white);
}

.tab-content {
   display: none;
}

.tab-content.active {
   display: block;
}

/* Footer */
.footer {
   background: var(--color-secondary);
   color: var(--color-text-white);
   padding: var(--space-2xl) 0;
   text-align: center;
}

.footer a {
   color: var(--color-accent);
}

.footer p {
   margin-bottom: var(--space-sm);
   opacity: 0.9;
}

/* Utilities */
.text-center {
   text-align: center;
}
.text-right {
   text-align: right;
}
.text-muted {
   color: var(--color-text-muted);
}
.text-success {
   color: var(--color-success);
}
.text-error {
   color: var(--color-error);
}
.text-primary {
   color: var(--color-primary);
}
.text-white {
   color: var(--color-text-white);
}

.mt-sm {
   margin-top: var(--space-sm);
}
.mt-md {
   margin-top: var(--space-md);
}
.mt-lg {
   margin-top: var(--space-lg);
}
.mt-xl {
   margin-top: var(--space-xl);
}

.mb-sm {
   margin-bottom: var(--space-sm);
}
.mb-md {
   margin-bottom: var(--space-md);
}
.mb-lg {
   margin-bottom: var(--space-lg);
}
.mb-xl {
   margin-bottom: var(--space-xl);
}

.hidden {
   display: none !important;
}

.flex {
   display: flex;
}
.flex-col {
   flex-direction: column;
}
.items-center {
   align-items: center;
}
.justify-between {
   justify-content: space-between;
}
.justify-center {
   justify-content: center;
}
.gap-sm {
   gap: var(--space-sm);
}
.gap-md {
   gap: var(--space-md);
}
.gap-lg {
   gap: var(--space-lg);
}

.w-full {
   width: 100%;
}

/* Responsive */
@media (max-width: 768px) {
   h1 {
      font-size: 2rem;
   }
   h2 {
      font-size: 1.5rem;
   }

   .hero h1 {
      font-size: 2rem;
   }
   .hero p {
      font-size: 1rem;
   }

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

   .header-inner {
      flex-direction: column;
      gap: var(--space-sm);
      align-items: stretch;
   }

   .logo {
      font-size: 1.5rem;
      text-align: center;
   }

   .nav {
      width: 100%;
      justify-content: center;
      flex-wrap: wrap;
      gap: var(--space-sm);
      font-size: 0.9rem;
   }

   .nav a {
      padding: var(--space-sm) var(--space-md);
      font-size: 0.75rem;
      white-space: nowrap;
   }

   .nav .btn {
      width: 100%;
      margin-top: var(--space-sm);
   }

   /* Table optimization for mobile */
   .table-scroll {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
   }

   .data-table {
      min-width: 600px;
      font-size: 0.85rem;
   }

   .data-table th,
   .data-table td {
      padding: var(--space-sm) var(--space-md);
      white-space: nowrap;
   }

   .data-table th {
      font-size: 0.75rem;
   }

   /* Form optimization */
   .flex.gap-md {
      flex-direction: column;
      gap: var(--space-md);
   }

   .form-group {
      width: 100%;
   }

   /* Button improvements */
   .btn {
      padding: var(--space-md) var(--space-lg);
      font-size: 1rem;
      min-height: 44px;
   }

   .btn-sm {
      padding: var(--space-sm) var(--space-md);
      min-height: 36px;
   }

   /* Card improvements */
   .card {
      padding: var(--space-lg);
      margin-bottom: var(--space-lg);
   }

   .card-header {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-md);
   }

   /* Quick actions */
   .flex.justify-between {
      flex-direction: column;
      gap: var(--space-md);
   }

   .flex.justify-between .btn {
      width: 100%;
   }

   /* Calendar */
   .calendar-day {
      min-height: 60px;
      padding: var(--space-xs);
   }

   .calendar-day-number {
      font-size: 0.8rem;
   }

   .calendar-event {
      font-size: 0.65rem;
      padding: 1px 3px;
   }

   .booking-item {
      flex-direction: column;
      text-align: center;
      gap: var(--space-md);
   }

   .booking-date-badge {
      width: 100%;
      padding: var(--space-sm);
   }

   .booking-details {
      width: 100%;
   }

   .invoice-meta {
      grid-template-columns: 1fr;
   }

   .schedule-grid {
      grid-template-columns: 1fr;
   }

   .stats-grid {
      grid-template-columns: 1fr;
   }

   /* Modal improvements */
   .modal {
      max-width: 95% !important;
      margin: var(--space-md);
      max-height: 90vh;
      overflow-y: auto;
   }

   /* Container adjustments */
   .container {
      padding: var(--space-md);
   }

   /* Empty state */
   .empty-state {
      padding: var(--space-xl);
   }

   .empty-state-icon {
      font-size: 2.5rem;
   }

   .empty-state p {
      font-size: 0.95rem;
   }

   /* Improve badge readability on mobile */
   .badge {
      font-size: 0.7rem;
      padding: var(--space-xs) var(--space-sm);
   }

   /* Better card header on mobile */
   .card-header .flex {
      flex-direction: column;
      gap: var(--space-sm);
      align-items: stretch !important;
   }

   .card-header .btn {
      width: 100%;
   }
}

/* Mobile-specific optimizations for smaller phones */
@media (max-width: 480px) {
   .header {
      padding: var(--space-sm);
   }

   .nav {
      gap: var(--space-xs);
   }

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

   .data-table {
      font-size: 0.75rem;
   }

   .data-table th,
   .data-table td {
      padding: var(--space-xs) var(--space-sm);
   }

   .btn {
      font-size: 0.9rem;
      padding: var(--space-sm) var(--space-md);
   }

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

   h1 {
      font-size: 1.75rem;
   }

   h2 {
      font-size: 1.25rem;
   }

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

/* Additional dashboard and layout optimizations */
@media (max-width: 768px) {
   /* Dashboard grid layout - stack on mobile */
   .stats-grid,
   [style*="grid-template-columns: 1fr 1fr"] {
      grid-template-columns: 1fr !important;
      gap: var(--space-md);
   }

   .stat-card {
      margin: 0;
   }

   /* Improve club cards on mobile */
   .packages-grid,
   [class*="grid"] {
      grid-template-columns: 1fr;
   }

   /* Better spacing for action buttons */
   .flex.gap-sm,
   .flex.gap-md {
      flex-wrap: wrap;
   }

   /* Improve filter sections */
   .flex[style*="flex-wrap: wrap"] {
      flex-direction: column;
   }

   .flex[style*="align-items: flex-end"] > * {
      align-items: stretch !important;
   }

   /* Better mobile buttons in cards */
   .card .flex.gap-sm .btn,
   .card .flex.gap-md .btn {
      flex: 1;
      min-width: 0;
   }

   /* Form inputs get full width and better touch targets */
   .form-input,
   .form-select,
   .form-textarea {
      min-height: 44px;
      font-size: 16px; /* Prevents zoom on iOS */
   }

   .form-select {
      min-height: 44px;
   }

   /* Better spacing for page headers */
   .mb-xl.flex.justify-between {
      margin-bottom: var(--space-lg);
   }

   .mb-xl.flex.justify-between > div h1 {
      font-size: 1.75rem;
      margin-bottom: var(--space-xs);
   }

   .mb-xl.flex.justify-between > div p {
      font-size: 0.9rem;
   }

   /* Settings page grids - stack columns on mobile */
   [style*="grid-template-columns: 1fr 1fr"] {
      grid-template-columns: 1fr !important;
   }

   /* Payment method inputs on mobile */
   [style*="margin-left: 1.5rem"] {
      margin-left: 0 !important;
      width: 100% !important;
      margin-top: 0.5rem;
   }
}

@media (max-width: 480px) {
   /* Stack buttons vertically on very small screens */
   .flex.gap-sm,
   .flex.gap-md {
      flex-direction: column;
      width: 100%;
   }

   .flex.gap-sm .btn,
   .flex.gap-md .btn {
      width: 100%;
   }

   /* Improve stat cards on small screens */
   .stat-number {
      font-size: 2rem;
   }

   .stat-label {
      font-size: 0.8rem;
   }
}

@media print {
   .header,
   .footer,
   .btn,
   .nav {
      display: none !important;
   }

   .printable-schedule {
      padding: 0;
   }

   .schedule-grid {
      page-break-inside: avoid;
   }
}