/* ===================================================================
   CALLBOARD STYLES - DaisyUI Theme Integration
   ================================================================ */

/* ===================================================================
   CALLBOARD DAISYUI 4.12 THEME CUSTOMIZATION - OKLCH FORMAT
   ================================================================ */

/* Override DaisyUI dark theme with CallBoard brand colors (DaisyUI 4.12 format) */
:root {
  /* CallBoard Brand Colors in OKLCH format for DaisyUI 4.12 */
  --p: 84.3% 0.151 88.3;                    /* Primary: CallBoard Gold #F4C542 */
  --pf: 80% 0.14 88.3;                      /* Primary focus: slightly darker gold */
  --pc: 15% 0.03 88.3;                      /* Primary content: dark text on gold */
  
  --s: 33.2% 0.052 210.8;                   /* Secondary: Dark Teal #0B3D45 */
  --sf: 28% 0.045 210.8;                    /* Secondary focus: darker teal */
  --sc: 90% 0.02 210.8;                     /* Secondary content: light text on teal */
  
  /* Base Colors - CallBoard's signature dark teal backgrounds */
  --b1: 33.2% 0.052 210.8;                  /* Main background: Dark Teal #0B3D45 */
  --b2: 25% 0.052 210.8;                    /* Elevated surfaces: darker teal */
  --b3: 15% 0.052 210.8;                    /* Deepest backgrounds: darkest teal */
  --bc: 90% 0.02 210.8;                     /* Base content: warm white text */
  
  /* Accent - Brighter gold for highlights */
  --a: 75% 0.18 88.3;                       /* Accent: brighter gold */
  --af: 70% 0.16 88.3;                      /* Accent focus */
  --ac: 10% 0.03 88.3;                      /* Accent content: dark on bright gold */
  
  /* Neutral - Desaturated teal for subtle elements */
  --n: 30% 0.02 210.8;                      /* Neutral: desaturated teal */
  --nf: 25% 0.02 210.8;                     /* Neutral focus */
  --nc: 85% 0.02 210.8;                     /* Neutral content: light text */
  
  /* State Colors - Accessible and on-brand */
  --in: 55% 0.10 210.8;                     /* Info: light teal (CallBoard brand) */
  --inc: 15% 0.03 210.8;                    /* Info content: dark text on info */

  --su: 70% 0.15 140;                       /* Success: professional green */
  --suc: 15% 0.03 140;                      /* Success content: dark text on success */

  --wa: 84.3% 0.151 88.3;                   /* Warning: CallBoard gold (same as primary) */
  --wac: 15% 0.03 88.3;                     /* Warning content: dark text on warning */

  --er: 65% 0.17 25;                        /* Error: accessible red */
  --erc: 15% 0.03 25;                       /* Error content: dark text on error */
  
  /* Border Radius and Animation (DaisyUI 4.12 variables) */
  --rounded-box: 0.75rem;
  --rounded-btn: 0.5rem;
  --rounded-badge: 0.75rem;
  --animation-btn: 0.25s;
  --animation-input: 0.2s;
  --btn-focus-scale: 0.95;
  --border-btn: 1px;
  --tab-border: 1px;
  --tab-radius: 0.5rem;
}

/* ===================================================================
   DAISYUI ALERT ACCESSIBILITY OVERRIDES
   ================================================================ */

/* Apply content colors to alert text and links for WCAG AA compliance */
.alert-info,
.alert-info * {
  color: oklch(var(--inc)) !important;
}

.alert-success,
.alert-success * {
  color: oklch(var(--suc)) !important;
}

.alert-warning,
.alert-warning * {
  color: oklch(var(--wac)) !important;
}

.alert-error,
.alert-error * {
  color: oklch(var(--erc)) !important;
}

/* Ensure links in alerts are visible with proper contrast */
.alert-info a,
.alert-success a,
.alert-warning a,
.alert-error a {
  text-decoration: underline !important;
  font-weight: 600 !important;
}

/* ===================================================================
   STATUS INDICATOR - Minimal overrides for DaisyUI buttons
   ================================================================ */

/* Ensure all button types render identically */
.status-indicator.btn {
  width: 2rem !important;
  height: 2rem !important;
  min-width: 2rem !important;
  min-height: 2rem !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ===================================================================
   CALLBOARD-SPECIFIC BUSINESS LOGIC COMPONENTS
   ================================================================ */

/* Call Type Styling - These are business-specific, not covered by DaisyUI */
.call-type-personal {
  background: linear-gradient(135deg, oklch(84.3% 0.151 88.3), oklch(80% 0.14 88.3)) !important;
  color: oklch(15% 0.03 88.3) !important;
  border-left: 3px solid oklch(70% 0.12 88.3) !important;
}

.call-type-load-in {
  background: linear-gradient(135deg, oklch(70% 0.17 25), oklch(65% 0.15 25)) !important;
  color: oklch(95% 0.02 25) !important;
  border-left: 3px solid oklch(60% 0.14 25) !important;
}

.call-type-show {
  background: linear-gradient(135deg, oklch(70% 0.15 140), oklch(65% 0.13 140)) !important;
  color: oklch(15% 0.03 140) !important;
  border-left: 3px solid oklch(60% 0.12 140) !important;
}

.call-type-rehearsal {
  background: linear-gradient(135deg, oklch(65% 0.15 270), oklch(60% 0.13 270)) !important;
  color: oklch(95% 0.02 270) !important;
  border-left: 3px solid oklch(55% 0.12 270) !important;
}

.call-type-strike {
  background: linear-gradient(135deg, oklch(55% 0.18 0), oklch(50% 0.16 0)) !important;
  color: oklch(95% 0.02 0) !important;
  border-left: 3px solid oklch(45% 0.15 0) !important;
}

.call-type-maintenance {
  background: linear-gradient(135deg, oklch(50% 0.05 210.8), oklch(45% 0.04 210.8)) !important;
  color: oklch(90% 0.02 210.8) !important;
  border-left: 3px solid oklch(40% 0.03 210.8) !important;
}

/* Call Status Indicators */
.call-status-confirmed::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-top: 12px solid oklch(70% 0.15 140);
}

.call-status-offered {
  opacity: 0.8;
  border: 2px dashed oklch(80% 0.15 70);
}

.call-status-draft {
  opacity: 0.6;
  filter: grayscale(30%);
}

/* ===================================================================
   FULLCALENDAR INTEGRATION - Specialized component styling
   ================================================================ */

/* Base Calendar Styling using theme colors */
.fc {
  --fc-bg-color: oklch(var(--b2));
  --fc-border-color: oklch(var(--p) / 0.2);
  --fc-text-color: oklch(var(--bc));
  --fc-button-bg-color: transparent;
  --fc-button-border-color: oklch(var(--p) / 0.3);
  --fc-button-text-color: oklch(var(--bc));
  --fc-button-hover-bg-color: oklch(var(--p) / 0.1);
  --fc-button-hover-border-color: oklch(var(--p));
  --fc-button-active-bg-color: oklch(var(--p));
  --fc-button-active-border-color: oklch(var(--p));
  --fc-button-active-text-color: oklch(var(--pc));
  
  background-color: var(--fc-bg-color);
  border: 1px solid var(--fc-border-color);
  border-radius: var(--radius-box);
  color: var(--fc-text-color);
  font-family: inherit;
}

/* Toolbar using DaisyUI button styling */
.fc-toolbar {
  background-color: oklch(var(--b3));
  border-bottom: 1px solid var(--fc-border-color);
  border-radius: var(--radius-box) var(--radius-box) 0 0;
  padding: 1rem 1.5rem;
  margin-bottom: 0;
}

.fc-toolbar-title {
  color: oklch(var(--p));
  font-size: 1.5rem;
  font-weight: 700;
}

/* Use DaisyUI button classes for calendar buttons */
.fc-button {
  @apply btn btn-sm btn-outline;
  background-color: var(--fc-button-bg-color);
  border-color: var(--fc-button-border-color);
  color: var(--fc-button-text-color);
}

.fc-button:hover {
  background-color: var(--fc-button-hover-bg-color);
  border-color: var(--fc-button-hover-border-color);
  color: oklch(var(--p));
}

.fc-button-active,
.fc-button:active {
  background-color: var(--fc-button-active-bg-color);
  border-color: var(--fc-button-active-border-color);
  color: var(--fc-button-active-text-color);
}

.fc-today-button {
  @apply btn btn-sm btn-primary;
}

/* Calendar Grid */
.fc-col-header {
  background-color: oklch(var(--b3));
}

.fc-col-header-cell-cushion {
  color: oklch(var(--p));
  font-weight: 600;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.fc-daygrid-day {
  border-color: var(--fc-border-color);
  background-color: oklch(var(--b1));
  transition: background-color 0.2s ease;
}

.fc-daygrid-day:hover {
  background-color: oklch(var(--p) / 0.05);
}

.fc-day-today {
  background-color: oklch(var(--p) / 0.1) !important;
  border-color: oklch(var(--p) / 0.3) !important;
}

.fc-day-today .fc-daygrid-day-number {
  @apply badge badge-primary;
  font-weight: 700;
}

/* Event Styling - Use call type classes defined above */
.fc-event {
  border: none !important;
  border-radius: var(--radius-field) !important;
  padding: 2px 6px !important;
  margin: 1px !important;
  font-size: 0.625rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  min-height: 16px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 2px 4px oklch(var(--b3) / 0.3) !important;
  position: relative !important;
}

.fc-event:hover {
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 4px 8px oklch(var(--b3) / 0.5) !important;
  z-index: 10 !important;
}

/* ===================================================================
   DASHBOARD LAYOUT UTILITIES
   ================================================================ */

/* Dashboard grid using CSS Grid - DaisyUI doesn't have grid layouts */
.cb-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

@media (min-width: 1024px) {
  .cb-dashboard-grid {
    grid-template-columns: 2fr 1fr;
  }
}

.cb-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

/* Enhanced card hover effects for dashboard */
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px oklch(var(--b3) / 0.2);
}

/* ===================================================================
   INCOME & FINANCIAL COMPONENTS
   ================================================================ */

/* Income summary card - business specific styling */
.cb-income-summary {
  @apply card bg-primary/10 border border-primary/20;
}

.cb-income-summary-amount {
  color: oklch(var(--p));
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.cb-income-summary-details {
  color: oklch(var(--bc) / 0.7);
  font-size: 0.75rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* ===================================================================
   FORM ENHANCEMENTS - Extend DaisyUI forms
   ================================================================ */

/* Time picker styling - specialized input */
.cb-time-select {
  @apply select select-bordered;
  font-family: 'SF Mono', 'Monaco', 'Cascadia Code', monospace;
  font-size: 0.9rem;
}

/* Form validation states using DaisyUI colors */
.input-error {
  @apply input-error;
  box-shadow: 0 0 0 2px oklch(var(--er) / 0.2);
}

.input-success {
  @apply input-success;
  box-shadow: 0 0 0 2px oklch(var(--su) / 0.2);
}

/* Enhanced form sections */
.cb-form-section {
  @apply card bg-base-200 border border-primary/10;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.cb-form-section-title {
  @apply text-primary font-semibold text-lg mb-4 flex items-center gap-2;
}

/* ===================================================================
   LOADING & STATE UTILITIES
   ================================================================ */

/* Loading spinner using DaisyUI */
.cb-loading-spinner {
  @apply loading loading-spinner loading-sm text-primary;
}

/* Optimistic update feedback */
.cb-optimistic-update {
  position: relative;
  overflow: hidden;
}

.cb-optimistic-update::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, oklch(var(--p) / 0.2), transparent);
  animation: optimisticSweep 0.8s ease-out;
}

@keyframes optimisticSweep {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ===================================================================
   MARKETING-SPECIFIC COMPONENTS
   ================================================================ */

/* Marketing page hero backgrounds */
.hero-gradient {
  background: linear-gradient(135deg, 
    oklch(var(--b3)) 0%, 
    oklch(var(--b2)) 50%, 
    oklch(var(--b1)) 100%);
}

/* Enhanced card hover effects for marketing */
.marketing-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.marketing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px oklch(var(--b3) / 0.3);
}

/* Feature highlight sections */
.feature-section {
  background: oklch(var(--b2) / 0.6);
  border: 1px solid oklch(var(--p) / 0.15);
  backdrop-filter: blur(8px);
}

/* Animated elements */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeInUp 0.8s ease-out;
}

.stagger-1 { animation-delay: 0.2s; }
.stagger-2 { animation-delay: 0.4s; }
.stagger-3 { animation-delay: 0.6s; }

/* Feature cards with enhanced interaction */
.feature-card {
  background: oklch(var(--b2) / 0.4);
  border: 1px solid oklch(var(--p) / 0.1);
  transition: all 0.3s ease;
}

.feature-card:hover {
  border-color: oklch(var(--p) / 0.3);
  background: oklch(var(--p) / 0.05);
}

.feature-arrow {
  transition: transform 0.3s ease;
}

.feature-details {
  transition: all 0.3s ease;
}

/* CTA sections */
.cta-section {
  background: linear-gradient(135deg, 
    oklch(var(--p) / 0.05) 0%, 
    oklch(var(--p) / 0.08) 50%, 
    oklch(var(--p) / 0.05) 100%);
  border: 1px solid oklch(var(--p) / 0.2);
}

/* Loading states */
.loading-shimmer {
  background: linear-gradient(90deg, 
    oklch(var(--b2)) 25%, 
    oklch(var(--b3)) 50%, 
    oklch(var(--b2)) 75%);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

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

/* ===================================================================
   MOBILE OPTIMIZATIONS
   ================================================================ */

@media (max-width: 768px) {
  /* Calendar adjustments */
  .fc-toolbar {
    padding: 0.75rem 1rem;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .fc-toolbar-title {
    font-size: 1.25rem;
    order: -1;
  }
  
  .fc-event {
    font-size: 0.5rem !important;
    min-height: 14px !important;
  }
  
  /* Dashboard grid adjustments */
  .cb-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  /* Form adjustments */
  .modal-box {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
  }
  
  /* Larger touch targets */
  .btn {
    min-height: 48px;
  }
  
  .input,
  .select {
    min-height: 44px;
    font-size: 16px; /* Prevents zoom on iOS */
  }
}

/* ===================================================================
   ACCESSIBILITY ENHANCEMENTS
   ================================================================ */

/* Focus states using DaisyUI */
.fc-button:focus,
.fc-event:focus {
  @apply outline outline-2 outline-primary outline-offset-2;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .fc-event {
    border: 2px solid oklch(var(--bc)) !important;
  }
  
  .input-error {
    border-width: 2px;
    border-color: oklch(var(--er));
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .fc-event,
  .card,
  .cb-optimistic-update::after,
  .cb-loading-spinner {
    animation: none;
    transition: none;
  }
}

/* ===================================================================
   PRINT STYLES
   ================================================================ */

@media print {
  .fc {
    background: white !important;
    color: black !important;
  }
  
  .fc-event {
    background: #333 !important;
    color: white !important;
  }
  
  .card {
    background: white !important;
    border: 1px solid #333 !important;
    box-shadow: none !important;
  }
}