/**
 * Executive Coaches - Desktop Application Color System
 * Professional, muted, desktop-grade color palette
 * Compatible with dark-mode and long-hour usage
 */

:root {
  /* ============================================
     BACKGROUND COLORS (Three-Tier System)
     ============================================ */
  /* Warm brochure palette: cream/off-white outside, white inside cards */
  --bg-base: #F5EDE0;      /* outer page background */
  --bg-surface: #FFF8EC;   /* default surfaces (navbars/sections) */
  --bg-elevated: #F9F0DF;  /* elevated panels */
  --bg-paper: #FCF7EA;     /* paper blocks (table headers etc) */
  --bg-white: #FFFFFF;

  /* ============================================
     PRIMARY & ACCENT COLORS
     ============================================ */
  --primary: #6B1026;
  --primary-hover: #5A0D1F;
  --primary-active: #4A0D1A;
  --primary-light: rgba(107, 16, 38, 0.1);
  --primary-dark: #4A0D1A;
  
  --secondary: #C9A227;
  --secondary-hover: #B8941F;
  --accent: #D4AF37;

  /* ============================================
     STATUS COLORS (Muted & Professional)
     ============================================ */
  --info: #6B1026;
  --info-light: #F5E8EB;
  --info-dark: #4A0D1A;
  
  --success: #6BBD7E;
  --success-light: #E8F5E9;
  --success-dark: #5AAD6E;
  
  --warning: #D4A574;
  --warning-light: #FFF8E8;
  --warning-dark: #C49564;
  
  --error: #D67B7B;
  --error-light: #FCE8E8;
  --error-dark: #C56B6B;

  /* ============================================
     TYPOGRAPHY COLORS
     ============================================ */
  --text-primary: #1E1E1E;
  --text-secondary: #4A4A4A;
  --text-muted: #6B6B6B;
  --text-disabled: #9A9A9A;
  --text-inverse: #FFFFFF;

  /* ============================================
     BUTTON COLORS
     ============================================ */
  --btn-primary: var(--primary);
  --btn-primary-hover: var(--primary-hover);
  --btn-primary-active: var(--primary-active);
  --btn-primary-text: #FFFFFF;
  
  --btn-secondary: #C9A227;
  --btn-secondary-hover: #B8941F;
  --btn-secondary-text: #2A0A0C;
  
  --btn-ghost-bg: transparent;
  --btn-ghost-hover: rgba(107, 16, 38, 0.08);
  --btn-ghost-text: var(--primary);
  
  --btn-destructive: var(--error);
  --btn-destructive-hover: #E68B8B;
  --btn-destructive-text: #FFFFFF;
  
  --btn-disabled: #E5E5E5;
  --btn-disabled-text: var(--text-disabled);

  /* ============================================
     BORDERS & DIVIDERS
     ============================================ */
  --border-default: #E2D7C4;
  --border-light: #EDE3CF;
  --border-focus: var(--primary);
  --divider: #E0D7C2;

  /* ============================================
     INPUT & FORM FIELDS
     ============================================ */
  --input-bg: #FFFCF3;
  --input-border: var(--border-default);
  --input-focus: var(--primary);
  --input-focus-ring: rgba(107, 16, 38, 0.2);
  --input-placeholder: var(--text-muted);
  --input-disabled: #F2ECE0;
  --input-disabled-text: var(--text-disabled);

  /* ============================================
     TABLE COLORS
     ============================================ */
  --table-header: var(--bg-paper);
  --table-row: #FFFFFF;
  --table-row-alt: #FFFDF8;
  --table-row-hover: #F6EBDD;
  --table-border: var(--border-default);

  /* ============================================
     NAVIGATION COLORS
     ============================================ */
  --navbar-bg: var(--bg-surface);
  --sidebar-bg: var(--bg-elevated);
  --nav-item: var(--text-secondary);
  --nav-item-active: var(--primary);
  --nav-item-hover: var(--text-primary);
  --nav-item-bg-hover: rgba(107, 16, 38, 0.08);

  /* ============================================
     BADGES & LABELS
     ============================================ */
  --badge-primary: var(--primary);
  --badge-success: var(--success);
  --badge-warning: var(--warning);
  --badge-error: var(--error);
  --badge-info: var(--info);
  --badge-neutral: var(--secondary);
  --badge-text: #FFFFFF;

  /* ============================================
     SEAT MAP STATES (Distinct & Vibrant Colors)
     ============================================ */
  --seat-available: #C9A227;
  --seat-available-hover: #D4AF37;
  --seat-available-border: #7D6220;
  
  --seat-selected: #6B1026;
  --seat-selected-hover: #5A0D1F;
  --seat-selected-border: #4A0D1A;
  
  --seat-booked: #EF4444;              /* Bright Red - Booked seats */
  --seat-booked-border: #DC2626;      /* Dark Red border */
  
  --seat-held: #F97316;                /* Bright Orange - Held/Reserved seats */
  --seat-held-hover: #EA580C;         /* Darker Orange - Hover state */
  --seat-held-border: #C2410C;        /* Dark Orange border */
  
  --seat-reserved: #F97316;            /* Orange - Reserved seats (same as held) */
  --seat-vip: #8B5CF6;                 /* Bright Purple - VIP seats */
  --seat-vip-border: #7C3AED;         /* Dark Purple border */
  --seat-disabled: #6B7280;            /* Gray - Disabled seats */

  /* ============================================
     INTERACTIVE STATES
     ============================================ */
  --hover-overlay: rgba(107, 16, 38, 0.08);
  --active-overlay: rgba(107, 16, 38, 0.15);
  --focus-ring: var(--primary);
  --focus-ring-shadow: rgba(107, 16, 38, 0.2);

  /* ============================================
     SHADOWS (Subtle & Professional)
     ============================================ */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.25);
  --shadow-focus: 0 0 0 3px var(--focus-ring-shadow);

  /* ============================================
     SPACING & SIZING
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Background Utilities */
.bg-base { background-color: var(--bg-base); }
.bg-surface { background-color: var(--bg-surface); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-paper { background-color: var(--bg-paper); }

/* Text Utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-disabled { color: var(--text-disabled); }
.text-inverse { color: var(--text-inverse); }

/* Border Utilities */
.border-default { border-color: var(--border-default); }
.border-light { border-color: var(--border-light); }
.border-focus { border-color: var(--border-focus); }

/* Button Utilities */
.btn-primary {
  background-color: var(--btn-primary);
  color: var(--btn-primary-text);
  border: 1px solid var(--btn-primary);
  transition: all 0.2s ease;
}

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

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

.btn-primary:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn-secondary {
  background-color: var(--btn-secondary);
  color: var(--btn-secondary-text);
  border: 1px solid var(--border-default);
  transition: all 0.2s ease;
}

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

.btn-ghost {
  background-color: var(--btn-ghost-bg);
  color: var(--btn-ghost-text);
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

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

.btn-destructive {
  background-color: var(--btn-destructive);
  color: var(--btn-destructive-text);
  border: 1px solid var(--btn-destructive);
  transition: all 0.2s ease;
}

.btn-destructive:hover {
  background-color: var(--btn-destructive-hover);
  border-color: var(--btn-destructive-hover);
}

.btn-disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  background-color: var(--btn-disabled);
  color: var(--btn-disabled-text);
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* Input Utilities - Compatible with design-system.css */
.input-field {
  background-color: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-primary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-family-base);
  transition: all var(--transition-base);
}

.input-field::placeholder {
  color: var(--input-placeholder);
}

.input-field:focus {
  outline: none;
  border-color: var(--input-focus);
  box-shadow: var(--shadow-focus);
}

.input-field:disabled {
  background-color: var(--input-disabled);
  color: var(--input-disabled-text);
  cursor: not-allowed;
}

/* Table Utilities */
.table-header {
  background-color: var(--table-header);
  color: var(--text-primary);
  font-weight: 600;
}

.table-row {
  background-color: var(--table-row);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--table-border);
}

.table-row-alt {
  background-color: var(--table-row-alt);
}

.table-row:hover {
  background-color: var(--table-row-hover);
  transition: background-color 0.2s ease;
}

/* Badge Utilities */
.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  color: var(--badge-text);
}

.badge-primary { background-color: var(--badge-primary); }
.badge-success { background-color: var(--badge-success); }
.badge-warning { background-color: var(--badge-warning); }
.badge-error { background-color: var(--badge-error); }
.badge-info { background-color: var(--badge-info); }
.badge-neutral { background-color: var(--badge-neutral); }

/* Seat Map Utilities */
.seat {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.seat-available {
  background-color: var(--seat-available);
  border-color: var(--seat-available-border);
  border-width: 2px;
  color: #2A0A0C;
  font-weight: 700;
}

.seat-available:hover {
  background-color: var(--seat-available-hover);
  transform: scale(1.05);
  box-shadow: 0 2px 8px rgba(201, 162, 39, 0.45);
}

.seat-selected {
  background-color: var(--seat-selected);
  border-color: var(--seat-selected-border);
  border-width: 3px;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(107, 16, 38, 0.35);
}

.seat-selected:hover {
  background-color: var(--seat-selected-hover);
  box-shadow: 0 0 0 3px rgba(107, 16, 38, 0.45);
}

.seat-booked {
  background-color: var(--seat-booked);
  border-color: var(--seat-booked-border);
  border-width: 2px;
  color: #FFFFFF;
  cursor: not-allowed;
  opacity: 0.8;
  font-weight: 700;
}

.seat-held,
.seat-reserved {
  background-color: var(--seat-held);
  border-color: var(--seat-held-border);
  border-width: 2px;
  color: #FFFFFF;
  font-weight: 700;
}

.seat-held:hover,
.seat-reserved:hover {
  background-color: var(--seat-held-hover);
  transform: scale(1.05);
}

.seat-vip {
  background-color: var(--seat-vip);
  border-color: var(--seat-vip-border);
  border-width: 3px;
  color: #FFFFFF;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

.seat-disabled {
  background-color: var(--seat-disabled);
  border-color: var(--border-default);
  cursor: not-allowed;
  opacity: 0.4;
  color: var(--text-disabled);
}

/* Card Utilities - Compatible with design-system.css */
.card {
  background-color: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
  transition: all var(--transition-base);
}

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

.card-elevated {
  background-color: var(--bg-elevated);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-xl);
}

/* Route Card Specific Styles */
.route-card {
  background-color: var(--bg-surface) !important;
  border-color: var(--border-default) !important;
}

.route-card h3,
.route-card .text-primary {
  color: var(--text-primary) !important;
}

.route-card .text-secondary {
  color: var(--text-secondary) !important;
}

.route-card .text-muted {
  color: var(--text-muted) !important;
}

/* Focus Utilities */
.focus-ring:focus {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Hover Utilities */
.hover-overlay:hover {
  background-color: var(--hover-overlay);
}

.active-overlay:active {
  background-color: var(--active-overlay);
}

/* Shadow Utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Border Radius Utilities */
.radius-sm { border-radius: var(--radius-sm); }
.radius-md { border-radius: var(--radius-md); }
.radius-lg { border-radius: var(--radius-lg); }
.radius-xl { border-radius: var(--radius-xl); }