/*
 * DayPilot Scheduler - Fluent UI Theme
 * Integrates DayPilot Lite with Microsoft Fluent UI design tokens
 * Modern light business theme for TennisUp
 */

/* ============================================
   CSS Variables (Fluent UI Design Tokens)
   ============================================ */
:root {
    /* Brand Colors - Tennis Green Theme */
    --dp-brand-primary: #059669;
    --dp-brand-hover: #047857;
    --dp-brand-active: #065f46;
    --dp-brand-light: rgba(5, 150, 105, 0.1);
    
    /* Neutral Colors - Light Theme */
    --dp-neutral-background: #ffffff;
    --dp-neutral-background-hover: #f8fafc;
    --dp-neutral-background-selected: #f1f5f9;
    --dp-neutral-background-alt: #f8fafc;
    --dp-neutral-foreground: #1e293b;
    --dp-neutral-foreground-secondary: #64748b;
    --dp-neutral-foreground-disabled: #94a3b8;
    --dp-neutral-stroke: #e2e8f0;
    --dp-neutral-stroke-hover: #cbd5e1;
    --dp-neutral-stroke-strong: #94a3b8;
    
    /* Status Colors */
    --dp-success: #dcfce7;
    --dp-success-foreground: #16a34a;
    --dp-warning: #fef3c7;
    --dp-warning-foreground: #d97706;
    --dp-danger: #fee2e2;
    --dp-danger-foreground: #dc2626;
    
    /* Booking Type Colors - Vibrant and distinct */
    --dp-booking-regular: #10b981;
    --dp-booking-lesson: #3b82f6;
    --dp-booking-tournament: #f59e0b;
    --dp-booking-maintenance: #6b7280;
    --dp-booking-blocked: #9ca3af;
    --dp-booking-pending: #f59e0b;
    --dp-booking-cancelled: #d1d5db;
    
    /* Surface Type Colors */
    --dp-surface-clay: #ea580c;
    --dp-surface-hard: #0284c7;
    --dp-surface-grass: #16a34a;
    --dp-surface-carpet: #7c3aed;
    
    /* Shadows - Subtle and modern */
    --dp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --dp-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --dp-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    
    /* Spacing */
    --dp-spacing-xxs: 2px;
    --dp-spacing-xs: 4px;
    --dp-spacing-s: 8px;
    --dp-spacing-m: 12px;
    --dp-spacing-l: 16px;
    
    /* Border Radius */
    --dp-radius-none: 0;
    --dp-radius-sm: 4px;
    --dp-radius-md: 6px;
    --dp-radius-lg: 8px;
    --dp-radius-xl: 12px;
    
    /* Typography */
    --dp-font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --dp-font-size-xs: 11px;
    --dp-font-size-sm: 12px;
    --dp-font-size-md: 13px;
    --dp-font-size-lg: 14px;
    --dp-font-weight-normal: 400;
    --dp-font-weight-medium: 500;
    --dp-font-weight-semibold: 600;
}

/* ============================================
   Scheduler Container
   ============================================ */
.scheduler_default_main {
    font-family: var(--dp-font-family) !important;
    background: var(--dp-neutral-background) !important;
    border: 1px solid var(--dp-neutral-stroke) !important;
    border-radius: var(--dp-radius-lg) !important;
    box-shadow: var(--dp-shadow-sm) !important;
    overflow: hidden;
}

/* ============================================
   Header Styles
   ============================================ */
.scheduler_default_corner {
    background: var(--dp-neutral-background-alt) !important;
    border-right: 1px solid var(--dp-neutral-stroke) !important;
    border-bottom: 1px solid var(--dp-neutral-stroke) !important;
}

.scheduler_default_timeheader,
.scheduler_default_timeheadergroup {
    background: var(--dp-neutral-background-alt) !important;
    border-bottom: 1px solid var(--dp-neutral-stroke) !important;
    font-size: var(--dp-font-size-sm) !important;
    font-weight: var(--dp-font-weight-semibold) !important;
    color: var(--dp-neutral-foreground) !important;
}

.scheduler_default_timeheadergroup {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    font-weight: var(--dp-font-weight-medium) !important;
}

.scheduler_default_timeheader_inner {
    padding: var(--dp-spacing-s) var(--dp-spacing-m) !important;
}

/* ============================================
   Row Header (Resources/Courts)
   ============================================ */
.scheduler_default_rowheader {
    background: var(--dp-neutral-background) !important;
    border-right: 1px solid var(--dp-neutral-stroke) !important;
    border-bottom: 1px solid var(--dp-neutral-stroke) !important;
    transition: background-color 0.15s ease;
}

.scheduler_default_rowheader_inner {
    padding: var(--dp-spacing-m) var(--dp-spacing-l) !important;
    font-size: var(--dp-font-size-md) !important;
    font-weight: var(--dp-font-weight-semibold) !important;
    color: var(--dp-neutral-foreground) !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.scheduler_default_rowheader:hover {
    background: var(--dp-neutral-background-hover) !important;
}

/* Court Info Badge */
.court-info-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--dp-spacing-xs);
    padding: 3px 8px;
    border-radius: var(--dp-radius-md);
    font-size: var(--dp-font-size-xs);
    font-weight: var(--dp-font-weight-medium);
    margin-top: var(--dp-spacing-xs);
}

.court-info-badge.surface-clay { background: rgba(234, 88, 12, 0.12); color: var(--dp-surface-clay); }
.court-info-badge.surface-hard { background: rgba(2, 132, 199, 0.12); color: var(--dp-surface-hard); }
.court-info-badge.surface-grass { background: rgba(22, 163, 74, 0.12); color: var(--dp-surface-grass); }
.court-info-badge.surface-carpet { background: rgba(124, 58, 237, 0.12); color: var(--dp-surface-carpet); }

.court-info-badge.indoor { background: rgba(100, 116, 139, 0.12); color: var(--dp-neutral-foreground-secondary); }
.court-info-badge.outdoor { background: rgba(245, 158, 11, 0.12); color: #d97706; }

/* ============================================
   Grid Cells
   ============================================ */
.scheduler_default_cell {
    background: var(--dp-neutral-background) !important;
    border-right: 1px solid var(--dp-neutral-stroke) !important;
    border-bottom: 1px solid var(--dp-neutral-stroke) !important;
    transition: background-color 0.1s ease;
}

.scheduler_default_cell:hover {
    background: var(--dp-brand-light) !important;
}

.scheduler_default_cell.scheduler_default_cell_business {
    background: var(--dp-neutral-background) !important;
}

.scheduler_default_cell.scheduler_default_cell_nonbusiness {
    background: var(--dp-neutral-background-alt) !important;
}

/* Past time cells */
.scheduler_default_cell.past-time {
    background: #f1f5f9 !important;
    opacity: 0.6;
}

/* Current time highlight */
.scheduler_default_cell.current-time {
    background: var(--dp-brand-light) !important;
    border-left: 2px solid var(--dp-brand-primary) !important;
}

/* Selected cell */
.scheduler_default_cell_selected {
    background: rgba(5, 150, 105, 0.15) !important;
    border: 2px solid var(--dp-brand-primary) !important;
}

/* ============================================
   Events (Bookings)
   ============================================ */
.scheduler_default_event {
    border-radius: var(--dp-radius-md) !important;
    box-shadow: var(--dp-shadow-sm) !important;
    transition: all 0.2s ease !important;
    overflow: hidden;
    border: none !important;
}

.scheduler_default_event:hover {
    box-shadow: var(--dp-shadow-md) !important;
    transform: translateY(-1px) scale(1.01);
    z-index: 100 !important;
}

.scheduler_default_event_inner {
    padding: var(--dp-spacing-xs) var(--dp-spacing-s) !important;
    font-size: var(--dp-font-size-sm) !important;
    font-weight: var(--dp-font-weight-medium) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
}

/* Event Duration Bar */
.scheduler_default_event_bar {
    width: 4px !important;
    left: 0 !important;
    border-radius: var(--dp-radius-sm) 0 0 var(--dp-radius-sm) !important;
}

/* Booking Type Styles - Modern gradient backgrounds */
.booking-type-regular {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: white !important;
}

.booking-type-lesson {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    color: white !important;
}

.booking-type-tournament {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
    color: white !important;
}

.booking-type-maintenance {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
    color: white !important;
}

.booking-type-blocked {
    background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;
    color: white !important;
}

/* Booking Status Styles */
.booking-status-pending {
    opacity: 0.85;
    border: 2px dashed var(--dp-booking-pending) !important;
}

.booking-status-cancelled {
    opacity: 0.5;
    text-decoration: line-through;
    background: var(--dp-booking-cancelled) !important;
}

/* ============================================
   Event Icons
   ============================================ */
.event-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    margin-right: var(--dp-spacing-xs);
    font-size: var(--dp-font-size-xs);
}

.event-indicator {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
}

.event-indicator.paid { background: #22c55e; }
.event-indicator.unpaid { background: #f59e0b; }

/* ============================================
   Time Range Selection
   ============================================ */
.scheduler_default_selection {
    background: rgba(5, 150, 105, 0.2) !important;
    border: 2px solid var(--dp-brand-primary) !important;
    border-radius: var(--dp-radius-md) !important;
}

/* ============================================
   Scrollbars - Modern minimal style
   ============================================ */
.scheduler_default_scrollable::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scheduler_default_scrollable::-webkit-scrollbar-track {
    background: transparent;
    border-radius: var(--dp-radius-md);
}

.scheduler_default_scrollable::-webkit-scrollbar-thumb {
    background: var(--dp-neutral-stroke);
    border-radius: var(--dp-radius-md);
}

.scheduler_default_scrollable::-webkit-scrollbar-thumb:hover {
    background: var(--dp-neutral-stroke-strong);
}

/* ============================================
   Today Marker / Current Time Line
   ============================================ */
.scheduler_default_now {
    background: var(--dp-brand-primary) !important;
    width: 2px !important;
    box-shadow: 0 0 4px rgba(5, 150, 105, 0.5);
}

/* ============================================
   Loading Indicator
   ============================================ */
.scheduler_default_loading {
    background: var(--dp-neutral-background) !important;
    border: 1px solid var(--dp-neutral-stroke) !important;
    border-radius: var(--dp-radius-lg) !important;
    box-shadow: var(--dp-shadow-lg) !important;
    color: var(--dp-neutral-foreground) !important;
    font-family: var(--dp-font-family) !important;
    padding: var(--dp-spacing-l);
}

/* ============================================
   Responsive Styles
   ============================================ */
@media (max-width: 768px) {
    .scheduler_default_rowheader_inner {
        padding: var(--dp-spacing-s) var(--dp-spacing-m) !important;
        font-size: var(--dp-font-size-sm) !important;
    }
    
    .scheduler_default_event_inner {
        padding: var(--dp-spacing-xxs) var(--dp-spacing-xs) !important;
        font-size: var(--dp-font-size-xs) !important;
    }
    
    .scheduler_default_timeheader_inner {
        padding: var(--dp-spacing-xs) var(--dp-spacing-s) !important;
        font-size: var(--dp-font-size-xs) !important;
    }
    
    .court-info-badge {
        display: none;
    }
}

@media (max-width: 480px) {
    .scheduler_default_event_bar {
        display: none !important;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .scheduler_default_main {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
    }
    
    .scheduler_default_event {
        box-shadow: none !important;
        border: 1px solid #999 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    
    .scheduler_default_scrollable {
        overflow: visible !important;
    }
}

/* ============================================
   Dark Mode Support - DISABLED for consistent light theme
   ============================================ */
/* 
 * Dark mode is intentionally disabled to maintain a consistent 
 * modern business look regardless of system theme preferences.
 * The calendar always uses light theme for optimal visibility.
 */

/* ============================================
   Phase 1: Cell prices, status colours & legend
   ============================================ */
.scheduler-cell-price {
    font-size: 10px;
    color: var(--dp-neutral-foreground-secondary, #64748b);
    font-weight: var(--dp-font-weight-medium, 500);
    line-height: 14px;
    white-space: nowrap;
    pointer-events: none;
}

/* Bookable free cell - signals the slot can be clicked to book */
.scheduler-cell-bookable {
    cursor: pointer;
    transition: background-color 0.12s ease-in-out;
}

.scheduler-cell-bookable:hover {
    background-color: var(--dp-accent-subtle, rgba(37, 99, 235, 0.12)) !important;
    box-shadow: inset 0 0 0 2px var(--dp-accent, #2563eb);
}

/* Full-cell hit target that carries the slot data for delegated click handling */
.tu-cell-hit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 2px 4px;
    cursor: pointer;
}

/* Past slots cannot be booked */
.scheduler-cell-past {
    background-color: #fafafa !important;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(0, 0, 0, 0.03) 0,
        rgba(0, 0, 0, 0.03) 4px,
        transparent 4px,
        transparent 8px
    );
    cursor: not-allowed;
}

/* Pending (awaiting confirmation) bookings */
.scheduler-event-pending .scheduler_default_event_inner {
    background: var(--dp-warning, #fef3c7) !important;
    border-color: var(--dp-warning-foreground, #d97706) !important;
    color: var(--dp-warning-foreground, #d97706) !important;
    background-image: repeating-linear-gradient(
        45deg,
        rgba(217, 119, 6, 0.12) 0,
        rgba(217, 119, 6, 0.12) 6px,
        transparent 6px,
        transparent 12px
    ) !important;
}

/* Cancelled bookings */
.scheduler-event-cancelled .scheduler_default_event_inner {
    background: var(--dp-booking-cancelled, #d1d5db) !important;
    border-color: #9ca3af !important;
    color: #6b7280 !important;
    text-decoration: line-through;
    opacity: 0.75;
}

/* Color legend below the scheduler */
.scheduler-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    padding: 10px 4px 2px;
    font-size: 12px;
    color: var(--dp-neutral-foreground-secondary, #64748b);
}

.scheduler-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.scheduler-legend .legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
}

.scheduler-legend .legend-swatch.legend-free {
    background: #ffffff;
    border: 1px solid var(--dp-neutral-stroke, #e2e8f0);
}

/* Day / Week view toggle group */
.scheduler-view-days {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}