:root {
    /* Layout and spacing */
    --ground-and-field-column-width: 90px;
    --cell-padding: 4px;
    --header-height: 30px;
    
    /* Colors - Base */
    --section-bg-color: #d9d9d9;
    --border-color: #ddd;
    --field-border-color: black;
    --spacer-bg-color: #d0d0d0;
    --header-border-color: #6f6f6f;
    
    /* Header colors */
    --header-bg: #2c3e50;
    --header-fg: white;
    
    /* Table colors */
    --table-main-bg: #ffffff;
    --table-header-bg: #f8f9fa;
    --table-alternate-row-bg: #f8f9fa;
    --table-ground-column-bg: #e9ecef;
    --table-field-column-bg: #f1f3f4;
    --table-section-header-bg: #d9d9d9;
    --table-day-separator-bg: #e3e6ea;
    
    /* Fixture Status Colors - Consolidated */
    --fixture-washout: rgba(100, 150, 255, 0.4);
    --fixture-completed: #cccccc;
    --fixture-cancelled: #ffcccc;
    --fixture-forfeit: #ffcccc;
    --fixture-finals: #ffd700;
    --fixture-error: #ff6b6b;
    --fixture-warning: #ffcc99;
    --fixture-pending: #d4f8d4;
    
    /* Fixture Border Colors */
    --fixture-washout-border: rgba(70, 120, 255, 0.8);
    --fixture-completed-border: #a3a3a3;
    --fixture-cancelled-border: #e6a3a3;
    --fixture-forfeit-border: #e6a3a3;
    --fixture-finals-border: #e6b800;
    --fixture-error-border: #cc0000;
    --fixture-warning-border: #e6a366;
    --fixture-pending-border: #b8e0b8;
    
    /* Fixture Gradient End Colors */
    --fixture-washout-gradient-end: rgba(80, 130, 255, 0.4);
    --fixture-completed-gradient-end: #b3b3b3;
    --fixture-cancelled-gradient-end: #ffb3b3;
    --fixture-forfeit-gradient-end: #ffb3b3;
    --fixture-finals-gradient-end: #ffcc00;
    --fixture-error-gradient-end: #ff5252;
    --fixture-warning-gradient-end: #ffb366;
    --fixture-pending-gradient-end: #c8f0c8;
    --fixture-pending-competition-gradient-end: rgba(200, 240, 200, 0.8);
    
    /* Competition-specific colors (for dynamic assignment) */
    --fixture-background-color: #d4f8d4;
    --fixture-border-color: #b3b3b3;
    
    /* Common UI Colors */
    --text-primary: #333;
    --text-secondary: #666;
    --text-muted: #6c757d;
    --text-light: #bdc3c7;
    --text-white: #fff;
    --text-black: #000;
    
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #f0f0f0;
    --bg-dark: #2c3e50;
    --bg-light: #e9ecef;
    --bg-lighter: #f1f3f4;
    
    /* Border Colors */
    --border-light: #ddd;
    --border-medium: #ced4da;
    --border-dark: #6f6f6f;
    --border-black: #000;
    
    /* Shadow Colors */
    --shadow-light: rgba(0, 0, 0, 0.1);
    --shadow-medium: rgba(0, 0, 0, 0.15);
    --shadow-dark: rgba(0, 0, 0, 0.2);
    --shadow-darker: rgba(0, 0, 0, 0.3);
    --shadow-white: rgba(255, 255, 255, 0.1);
    --shadow-white-medium: rgba(255, 255, 255, 0.3);
    --shadow-white-heavy: rgba(255, 255, 255, 0.8);
    
    /* Gradient Colors */
    --gradient-header-end: #34495e;
    --gradient-table-header-start: #444;
    --gradient-table-header-end: #555;
    --gradient-section-end: #d0d0d0;
    --gradient-ground-column-end: #e3e6ea;
    --gradient-white-start: rgba(255, 255, 255, 0.1);
    --gradient-white-end: rgba(255, 255, 255, 0.05);
    
    /* Status Colors */
    --status-success: #007bff;
    --status-info: #3498db;
    --status-warning: #ffcc99;
    --status-error: #ff6b6b;
    
    /* Overlay Colors */
    --overlay-dark: rgba(0, 0, 0, 0.8);
    --overlay-medium: rgba(0, 0, 0, 0.5);
    --overlay-light: rgba(0, 0, 0, 0.2);
    
    /* Focus Colors */
    --focus-ring: rgba(44, 62, 80, 0.1);
    
    /* Typography Scale */
    --font-size-xs: 0.7em;
    --font-size-sm: 0.8em;
    --font-size-base: 0.9em;
    --font-size-lg: 1.1em;
    --font-size-xl: 1.2em;
    --font-size-2xl: 1.5em;
    --font-size-3xl: 2rem;
    --font-size-4xl: 2.5rem;
    
    /* Font Sizes - Pixels */
    --font-size-10px: 10px;
    --font-size-12px: 12px;
    --font-size-14px: 14px;
    --font-size-16px: 16px;
    --font-size-20px: 20px;
    --font-size-24px: 24px;
    --font-size-48px: 48px;
    
    /* Spacing Scale */
    --spacing-xs: 1px;
    --spacing-sm: 2px;
    --spacing-md: 4px;
    --spacing-lg: 6px;
    --spacing-xl: 8px;
    --spacing-2xl: 10px;
    --spacing-3xl: 15px;
    --spacing-4xl: 20px;
    --spacing-5xl: 30px;
    --spacing-6xl: 40px;
    
    /* Border Radius Scale */
    --border-radius-xs: 4px;
    --border-radius-sm: 5px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 10px;
    --border-radius-full: 50%;
    
    /* Border Widths */
    --border-width-xs: 0.5px;
    --border-width-sm: 1px;
    --border-width-md: 2px;
    --border-width-lg: 3px;
    
    /* Box Shadow Offsets */
    --shadow-offset-xs: 1px;
    --shadow-offset-sm: 2px;
    --shadow-offset-md: 3px;
    --shadow-offset-lg: 4px;
    --shadow-offset-xl: 6px;
    --shadow-offset-2xl: 8px;
    --shadow-offset-3xl: 12px;
    --shadow-offset-4xl: 16px;
    --shadow-offset-5xl: 20px;
    --shadow-offset-6xl: 24px;
    
    /* Dimensions */
    --icon-size-xs: 12px;
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;
    --icon-size-xl: 48px;
    
    --container-width-sm: 250px;
    --container-width-md: 320px;
    --container-width-lg: 625px;
    
    /* Z-index Scale */
    --z-index-base: 1;
    --z-index-dropdown: 2;
    --z-index-sticky: 5;
    --z-index-overlay: 8;
    --z-index-sticky-top: 20;
    --z-index-sticky-middle: 15;
    --z-index-sticky-bottom: 10;
    --z-index-header: 25;
    --z-index-modal: 10000;
    --z-index-tooltip: 999999;
}

html,body{
    height: 100%; 
    margin: 0;
    padding: 0; 
    overflow: hidden;}

body {
    font-family: Arial, sans-serif;
}

.overflow-row,
.overflow-row td.col-ground,
.overflow-row td.col-field{
    background-color: pink !important;}

#pageContainer{
    height: 100vh;
    background-color: var(--bg-tertiary);}

#pageHeader, #pageBody, #pageFooter{width: 100%;}

#headerTitle{flex: 1;margin: var(--spacing-lg); position: relative;}

/* Hide header title on screens smaller than 1600px */
@media (max-width: 1599px) {
    #headerTitle {
        display: none;
    }
}

#fillerBlock{
    width:625px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-right: 50px;
    gap: 20px;
}

.summary-table {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.summary-table table {
    border-collapse: collapse;
    font-size: 0.8em;
    color: white;
}

.summary-table td {
    padding: 2px 6px;
    text-align: left;
    white-space: nowrap;
}

.summary-table td:first-child {
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

			.summary-table td:nth-child(2) {
				font-weight: 600;
				color: white;
				text-align: center;
				min-width: 30px;
			}

			.summary-table td:last-child {
				font-weight: 500;
				color: rgba(255, 255, 255, 0.9);
				text-align: left;
				font-size: 0.95em;
			}

/* Responsive design for summary table */
@media (max-width: 768px) {
    .summary-table {
        font-size: 0.7em;
        padding: 6px 8px;
    }
    
    .summary-table td {
        padding: 1px 4px;
    }
    
    #fillerBlock {
        flex-direction: column;
        gap: 10px;
        align-items: flex-end;
    }
}

@media (max-width: 480px) {
    .summary-table {
        font-size: 0.6em;
        padding: 4px 6px;
    }
    
    .summary-table td {
        padding: 1px 2px;
    }
}

#pageBody {
    flex: 1 1 auto; /* ✅ Fills remaining space */
    overflow: hidden;
}

#placeholderText{font-size: var(--font-size-2xl); margin:var(--spacing-4xl); }

#pageHeader, #pageFooter {
    flex-shrink: 0; 
    color: white; 
    background-color: black;}

#pageHeader {
    padding: var(--spacing-2xl) var(--spacing-4xl);
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--header-bg) 0%, var(--gradient-header-end) 100%);
    color: var(--header-fg);
    box-shadow: 0 var(--shadow-offset-lg) var(--shadow-offset-3xl) var(--shadow-darker), inset 0 var(--shadow-offset-sm) 0 var(--shadow-white);
    border-bottom: var(--border-width-sm) solid var(--overlay-light);
}

#headerTitle h1 {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-xl);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--header-fg);
}

#headerTitle .subtitle {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--text-light);
    font-weight: 300;
    letter-spacing: 0.5px;
}

@media (min-width: 768px) {
    #headerTitle h1 {
        font-size: var(--font-size-2xl);
        margin: 0 0 var(--spacing-lg) 0;
    }
    
    #headerTitle .subtitle {
        font-size: var(--font-size-sm);
    }
}

@media (min-width: 800px) {
    #headerTitle h1 {
        font-size: var(--font-size-3xl);
    }
    
    #headerTitle .subtitle {
        font-size: var(--font-size-base);
    }
}

.flex-row{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;}

.flex-column{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}

#scheduleContainer{
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
    padding: 0;
    border-radius: var(--border-radius-2xl);
    overflow-x:auto; 
    overflow-y: auto;
    margin: var(--spacing-2xl);
    min-width: 75vw;
    height: calc(100% - 20px);
    /* Virtual scrolling optimizations */
    contain: layout style paint;
    will-change: scroll-position;
    font-size: var(--schedule-text-size, 100%);
    box-shadow: 0 var(--shadow-offset-lg) var(--shadow-offset-4xl) var(--shadow-light), inset 0 var(--shadow-offset-sm) 0 var(--shadow-white-heavy);
    border: var(--border-width-sm) solid var(--shadow-light);
    /* Ensure sticky positioning works properly */
    position: relative;
    }

/* Virtual scrolling container */
.schedule-container {
    position: relative;
    overflow: auto;
    contain: layout style paint;
    will-change: scroll-position;
    /* Optimize scrolling performance */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Ensure sticky positioning works properly */
    isolation: isolate;
    /* Ensure sticky headers are not clipped */
    clip-path: none;
}

    /* this is the main table */
.schedule-grid {
    background-color: var(--table-main-bg);
    width: max-content;
    height: auto;
    max-height: 100%;
    border-collapse: collapse;      /* Fix border gaps */
    border-spacing: 0;             /* No spacing between cells */
    box-shadow: 0 var(--shadow-offset-lg) var(--shadow-offset-3xl) var(--shadow-medium), 0 var(--shadow-offset-sm) var(--shadow-offset-md) var(--shadow-light);
    border-radius: var(--border-radius-xl);
    overflow: visible; /* Changed from hidden to visible for sticky positioning */
    /* DOM batching optimizations */
    contain: layout style;
    will-change: contents;
    /* Ensure sticky positioning works properly */
    position: relative;
    
}


/* Virtual scrolling optimizations */
.schedule-grid tbody {
    contain: layout style;
    will-change: contents;
}

.schedule-grid tr {
    contain: layout style;
    will-change: contents;
}



/* Optimized time slot rendering */
.time-slot {
    contain: layout style;
    will-change: contents;
}




.schedule-grid th[data-start-time] {
    text-align: left;    
}

.time-slot[data-has-fixture="true"] {
    text-align: left;
    border-radius: 6px; /* Works visually even if table layout clips it */
    font-size: 0.9em;
    color: black;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    /* Preserve JavaScript-set background colors */
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    background-blend-mode: overlay;
}

.time-slot[data-has-fixture="true"]:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

/* Consolidated Fixture Cell Styling */
.time-slot[data-has-fixture="true"] {
    text-align: left;
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    color: var(--text-black);
    box-shadow: 0 var(--shadow-offset-sm) var(--shadow-offset-lg) var(--shadow-light);
    border: var(--border-width-sm) solid var(--shadow-light);
    transition: all 0.2s ease;
    background-image: linear-gradient(135deg, var(--gradient-white-start) 0%, var(--gradient-white-end) 100%);
    background-blend-mode: overlay;
    position: relative;
    z-index: var(--z-index-base);
}

.time-slot[data-has-fixture="true"]:hover {
    box-shadow: 0 var(--shadow-offset-lg) var(--shadow-offset-xl) var(--shadow-medium);
    transform: translateY(-1px);
}

/* Fixture Status Classes - Consolidated Priority System */
.fixture-cell {
    position: relative;
    z-index: var(--z-index-base);
}

/* 1. Pending fixtures (lowest priority - default) */
.fixture-cell.pending,
.time-slot[data-has-fixture="true"].pending {
    background: linear-gradient(135deg, var(--fixture-pending) 0%, var(--fixture-pending-gradient-end) 100%) !important;
    box-shadow: inset 0 0 0 2px var(--fixture-pending-border), 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 2. Warning fixtures */
.fixture-cell.warning,
.time-slot[data-has-fixture="true"].warning {
    background: linear-gradient(135deg, var(--fixture-warning) 0%, var(--fixture-warning-gradient-end) 100%) !important;
    color: var(--text-primary) !important;
    box-shadow: inset 0 0 0 2px var(--fixture-warning-border), 0 2px 4px var(--shadow-light);
}

/* 3. Error fixtures */
.fixture-cell.error,
.time-slot[data-has-fixture="true"].error {
    background: linear-gradient(135deg, var(--fixture-error) 0%, var(--fixture-error-gradient-end) 100%) !important;
    color: var(--text-white) !important;
    box-shadow: inset 0 0 0 2px var(--fixture-error-border), 0 2px 4px var(--shadow-light);
}

/* 3a. Error fixtures with finals (error takes priority) */
.fixture-cell.error.finals,
.time-slot[data-has-fixture="true"].error.finals {
    background: linear-gradient(135deg, var(--fixture-error) 0%, var(--fixture-error-gradient-end) 100%) !important;
    color: var(--text-white) !important;
    box-shadow: inset 0 0 0 2px var(--fixture-error-border), 0 2px 4px var(--shadow-light);
}

/* 4. Finals fixtures */
.fixture-cell.finals,
.time-slot[data-has-fixture="true"].finals {
    background: linear-gradient(135deg, var(--fixture-finals) 0%, var(--fixture-finals-gradient-end) 100%) !important;
    box-shadow: inset 0 0 0 2px var(--fixture-finals-border), 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 5. Cancelled/Forfeit fixtures */
.fixture-cell.cancelled,
.fixture-cell.forfeit,
.time-slot[data-has-fixture="true"].cancelled,
.time-slot[data-has-fixture="true"].forfeit {
    background: linear-gradient(135deg, var(--fixture-cancelled) 0%, var(--fixture-cancelled-gradient-end) 100%) !important;
    box-shadow: inset 0 0 0 2px var(--fixture-cancelled-border), 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 6. Completed fixtures */
.fixture-cell.completed,
.time-slot[data-has-fixture="true"].completed {
    background: linear-gradient(135deg, var(--fixture-completed) 0%, var(--fixture-completed-gradient-end) 100%) !important;
    box-shadow: inset 0 0 0 2px var(--fixture-completed-border), 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 7. Washout fixtures (highest priority) */
.fixture-cell.washout,
.time-slot[data-has-fixture="true"].washout {
    background: linear-gradient(135deg, var(--fixture-washout) 0%, var(--fixture-washout-gradient-end) 100%) !important;
    box-shadow: inset 0 0 0 2px var(--fixture-washout-border), 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Competition-specific pending fixtures */
.fixture-cell.pending-competition,
.time-slot[data-has-fixture="true"].pending-competition {
    background: var(--fixture-background-color, var(--fixture-pending)) !important;
    box-shadow: inset 0 0 0 2px var(--fixture-border-color, var(--fixture-completed-border)), 0 2px 4px var(--shadow-light);
}

/* Ensure fixture content is above any pseudo-elements */
.fixture-cell .fixture-top-line,
.fixture-cell .fixture-bottom-line,
.fixture-cell .fixture-icons,
.time-slot[data-has-fixture="true"] .fixture-top-line,
.time-slot[data-has-fixture="true"] .fixture-bottom-line,
.time-slot[data-has-fixture="true"] .fixture-icons {
    position: relative;
    z-index: 2;
}

.schedule-grid thead tr {
    border-bottom: var(--border-width-sm) solid var(--header-border-color);
    
}

.schedule-grid tbody tr {
    border-bottom: var(--border-width-sm) solid var(--border-light);
    
}


.schedule-grid td, .schedule-grid th {font-size: var(--font-size-base);}

.schedule-grid thead tr:nth-child(2) th{font-size: var(--font-size-sm);}


.schedule-grid thead tr:nth-child(2) th:not(.day-divider){
    border-right: var(--border-width-sm) solid var(--header-border-color);
    
}

.schedule-grid thead tr:nth-child(3) th[data-end-time$=":30:00"],
.schedule-grid thead tr:nth-child(3) th[data-end-time$=":00:00"]
{
    border-right: var(--border-width-sm) solid var(--header-border-color);
}
.schedule-grid thead tr:nth-child(3) th[data-end-time$=":15:00"],
.schedule-grid thead tr:nth-child(3) th[data-end-time$=":45:00"]
{
    border-right: var(--border-width-sm) solid var(--header-border-color);  
}

.schedule-grid thead tr:nth-child(3) th[data-end-time$=":05:00"],
.schedule-grid thead tr:nth-child(3) th[data-end-time$=":10:00"],
.schedule-grid thead tr:nth-child(3) th[data-end-time$=":20:00"],
.schedule-grid thead tr:nth-child(3) th[data-end-time$=":25:00"],
.schedule-grid thead tr:nth-child(3) th[data-end-time$=":35:00"],
.schedule-grid thead tr:nth-child(3) th[data-end-time$=":40:00"],
.schedule-grid thead tr:nth-child(3) th[data-end-time$=":50:00"],
.schedule-grid thead tr:nth-child(3) th[data-end-time$=":55:00"]
{
    border-right: none;    
}

.schedule-grid tbody tr td[data-end-time$=":30:00"],
.schedule-grid tbody tr td[data-end-time$=":00:00"]
{
    border-right: var(--border-width-sm) solid var(--border-light);
}

/* Remove right border from cells that are immediately followed by day-divider */
.schedule-grid tbody tr td.no-right-border,
.schedule-grid thead tr th.no-right-border,
.schedule-grid tbody tr td.consolidated-slot.no-right-border {
    border-right: none !important;
}
.schedule-grid tbody tr td[data-end-time$=":15:00"],
.schedule-grid tbody tr td[data-end-time$=":45:00"]
{
    border-right: var(--border-width-sm) dashed var(--border-light);  
}

.schedule-grid tbody tr td[data-end-time$=":05:00"],
.schedule-grid tbody tr td[data-end-time$=":10:00"],
.schedule-grid tbody tr td[data-end-time$=":20:00"],
.schedule-grid tbody tr td[data-end-time$=":25:00"],
.schedule-grid tbody tr td[data-end-time$=":35:00"],
.schedule-grid tbody tr td[data-end-time$=":40:00"],
.schedule-grid tbody tr td[data-end-time$=":50:00"],
.schedule-grid tbody tr td[data-end-time$=":55:00"]
{
    border-right: none;    
}






.schedule-grid th:not(.day-divider) {
    background: linear-gradient(135deg, var(--gradient-table-header-start) 0%, var(--gradient-table-header-end) 100%);
    color: var(--text-white);
    font-weight: bold;
    box-shadow: inset 0 1px 0 var(--shadow-white);
    text-shadow: 0 1px 2px var(--shadow-darker);
}

.schedule-grid tr.ground-spacer-row
{
    padding: 0;
    margin: 0;
    line-height: 0;
    height: 2px;
    background-color: var(--spacer-bg-color);
    border: none;
    pointer-events: none;
    user-select: none;
}

.schedule-grid td.col-ground,
.schedule-grid th.col-ground,
.schedule-grid td.section-label-text-cell{
    width: var(--ground-and-field-column-width);
    max-width: var(--ground-and-field-column-width);
    min-width: var(--ground-and-field-column-width);
    font-weight: bold;
    
}

/* Allow section label text to overflow into adjacent cell */
.schedule-grid td.section-label-text-cell {
    overflow: visible;
    white-space: nowrap;
    position: relative;
    z-index: var(--z-index-sticky);
    /* Ensure text can overflow while maintaining sticky positioning */
    text-overflow: unset;
    /* Ensure no clipping of child elements */
    clip-path: none;
}

.schedule-grid td.col-field,
.schedule-grid th.col-field,
.schedule-grid td.section-label-blank-cell {
    width: var(--ground-and-field-column-width);
    max-width: var(--ground-and-field-column-width);
    min-width: var(--ground-and-field-column-width);
    border-right: 2px solid black;
    white-space: normal;      /* ✅ allow wrapping */
    overflow: visible;        /* ✅ no clipping */
    text-overflow: unset;     /* ✅ disable ellipsis */
    word-wrap: break-word;    /* optional: break long words if needed */
    
}

/* Overlay text element for section labels */
.section-label-overlay {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    padding-left: 2px;
    padding-right: 2px;
    font-weight: bold;
    white-space: nowrap;
    overflow: visible;
    z-index: var(--z-index-overlay);
    pointer-events: none;
    /* Allow text to extend beyond the cell boundaries */
    width: max-content;
    height: 100%;
}

thead {background-color: var(--table-header-bg);}

.schedule-grid .day-divider {
    width: 1.5px;
    min-width: 1.5px;
    max-width: 1.5px;
    background-color: black;
    border: none;
    padding: 0;
    margin: 0;
    display: table-cell;
}


.fixture-top-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: var(--font-size-base);
    
}

.fixture-bottom-line {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;        /* ✅ Limit to 2 lines */
    line-clamp: 2; /* ✅ Standard property (future support) */
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    max-height: 2.4em;
}

.fixture-icons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    white-space: nowrap;

}

.fixture-info-icon {
    cursor: help; /* Keep the 'help' behavior */
    cursor: default; /* Override the question mark, fallback to arrow */
    position: relative; /* Needed for tooltip positioning */
    margin-left: 0px;
    margin-right: 0px;
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    display: block;
    z-index: var(--z-index-base); /* Ensure it creates a stacking context */
    
}

/* Tooltip positioning is now handled by JavaScript for better z-index control */

/* Section header rows (e.g. Home Fields, Away Fields) */
.section-header-row td:not(.day-divider),
.section-filler-cell:not(.day-divider) {
    background: linear-gradient(135deg, var(--table-section-header-bg) 0%, var(--gradient-section-end) 100%);
    border-left: none;
    border-right: none;
    box-shadow: inset 0 1px 0 var(--shadow-white-medium);
}

/* Ensure section header rows have proper height for overlay text */
.section-header-row {
    min-height: calc(1em + 4px); /* Font height + 2px top + 2px bottom */
    height: calc(1em + 4px);
}

/* Ensure section header rows extend across all columns */
.section-header-row td.time-slot {
    background: linear-gradient(135deg, var(--table-section-header-bg) 0%, var(--gradient-section-end) 100%) !important;
    border-left: none;
    border-right: none;
    box-shadow: inset 0 1px 0 var(--shadow-white-medium);
}

td.section-label-text-cell{
    font-weight: bold;
    text-align: left;
    white-space: nowrap;
    overflow: visible;
}

.section-header-row td.col-ground,
.section-header-row td.col-field {
    background: linear-gradient(135deg, var(--table-section-header-bg) 0%, var(--gradient-section-end) 100%) !important;
}

td.section-label-blank-cell{
    overflow: visible;
}

.schedule-grid thead tr:nth-child(1),
.schedule-grid thead tr:nth-child(2),
.schedule-grid thead tr:nth-child(3) {
    position: sticky;
    background-color: var(--table-header-bg);
    z-index: var(--z-index-sticky); /* Higher than data cells and sticky columns */
    min-height: var(--header-height);
    box-shadow: 0 var(--shadow-offset-sm) var(--shadow-offset-lg) var(--shadow-light);
    backdrop-filter: blur(10px);
    /* Ensure proper stacking context */
    transform: translateZ(0);
}

.schedule-grid thead tr:nth-child(1){
    top: 0;
    z-index: var(--z-index-sticky-top); /* Highest z-index for top header */
    box-shadow: 0 var(--shadow-offset-sm) var(--shadow-offset-lg) var(--shadow-light), 0 var(--shadow-offset-md) var(--shadow-offset-xl) var(--shadow-medium);
}

.schedule-grid thead tr:nth-child(2){
    top: var(--header-height);
    z-index: var(--z-index-sticky-middle); /* Second highest for middle header */
    box-shadow: 0 var(--shadow-offset-sm) var(--shadow-offset-lg) var(--shadow-light);
}

.schedule-grid thead tr:nth-child(3){
    top: calc(2 * var(--header-height));
    z-index: var(--z-index-sticky-bottom); /* Third highest for bottom header */
    box-shadow: 0 var(--shadow-offset-sm) var(--shadow-offset-lg) var(--shadow-light);
}

.schedule-grid tbody tr:not(.ground-spacer-row) td.time-slot:not([rowspan]) {
    padding: 4px;                 /* Original padding */
    vertical-align: top;     /* Optional: align content */

}



.schedule-grid thead tr:nth-child(3) th[data-date][data-start-time] {
    width: max(5px, 0.4vh);
    padding:0;
}

.schedule-grid thead tr th{height: var(--header-height);min-height: var(--header-height);max-height: var(--header-height);}

.text-right{text-align: right !important; padding-right: 6px !important;}
.text-left{text-align: left !important;padding-left: 3px  !important;}
.border-right{border-right: 2px solid black !important;}

.section-header-row {font-weight: bold;}

/* Sticky first column (Ground) */
.schedule-grid td.col-ground,
.schedule-grid th.col-ground,
.schedule-grid td.section-label-text-cell {
    position: sticky;
    left: 0;
    z-index: var(--z-index-sticky); /* Higher than regular data cells */
}

/* Ensure section header cells maintain their background when sticky */
.section-header-row td.col-ground,
.section-header-row td.col-field {
    background: linear-gradient(135deg, var(--table-section-header-bg) 0%, #d0d0d0 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

td.col-ground{line-clamp: 3;}

/* Sticky second column (Field) */
.schedule-grid td.col-field,
.schedule-grid td.section-label-blank-cell,
.schedule-grid th.col-field {
    position: sticky;
    left: calc(var(--ground-and-field-column-width) + 3px); /* width of .col-ground */
    z-index: var(--z-index-sticky); /* Higher than regular data cells */
    background: inherit; /* Ensure background is preserved */
}

/* Ensure section header blank cells maintain their background when sticky */
.section-header-row td.section-label-blank-cell {
    background: linear-gradient(135deg, var(--table-section-header-bg) 0%, #d0d0d0 100%) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Ensure sticky column headers are above data cells but below main headers */
.schedule-grid thead th.col-ground,
.schedule-grid thead th.col-field {
    z-index: var(--z-index-sticky-bottom); /* Higher than sticky data cells but lower than main headers */
    background: var(--table-header-bg) !important; /* Force header background */
}

/* Fix top-left corner to match header background */
.schedule-grid thead tr:nth-child(1) th.col-ground,
.schedule-grid thead tr:nth-child(1) th.col-field,
.schedule-grid thead tr:nth-child(2) th.col-ground,
.schedule-grid thead tr:nth-child(2) th.col-field,
.schedule-grid thead tr:nth-child(3) th.col-ground,
.schedule-grid thead tr:nth-child(3) th.col-field {
    background: linear-gradient(135deg, var(--gradient-table-header-end) 0%, var(--gradient-table-header-end) 100%) !important;
    z-index: var(--z-index-sticky-top); /* Ensure corner cells are above everything */
}

/* Allow flipping left */
.fixture-tooltip-left::after {
    right: 0 !important;
    left: auto !important;
}

.schedule-grid tbody tr:not(.ground-spacer-row) td.col-ground,
.schedule-grid tbody tr:not(.ground-spacer-row) td.col-field {
    background: linear-gradient(135deg, var(--table-ground-column-bg) 0%, var(--gradient-ground-column-end) 100%);
    box-shadow: inset 0 1px 0 var(--shadow-white-medium);
    
}


.circle-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.7em;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--bg-light);
    color: var(--text-secondary);
    border: 1px solid var(--border-medium);
    font-family: sans-serif;
    
}

td.section-label-text-cell,
td.col-ground, th.col-ground, 
.schedule-grid thead tr:nth-child(3) th.col-field,
td.col-field {text-align: left;padding-left:2px;padding-right: 2px;}

.toggle-icon {
    margin-right: 6px;
    font-weight: bold;
}

/* Updated CSS for Fixed Ground Map Overlay */
.ground-map-overlay {
    position: absolute;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    border-radius: 6px;
    z-index: 10000;
    opacity: 1;
    transition: all 0.3s ease;
    pointer-events: auto;
    max-width: 320px;
    overflow: hidden;
    padding: 8px;
    cursor: pointer;
}

/* Hidden class for ground map overlay */
.ground-map-overlay.hidden {
    display: none;
}

.ground-map-overlay:hover {
    display: block;
}

.ground-map-overlay iframe {
    border-radius: 4px;
    width: 100%;
    height: 200px;
    border: 0;
}

.ground-map-info {
    font-size: 0.9em;
    line-height: 1.4;
    color: #333;
}

.ground-map-info strong {
    font-size: 1.1em;
    display: block;
}

#filterOptions {
    width: var(--container-width-lg);
    min-height: 100px;
    margin-left: var(--spacing-2xl);
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--border-medium) 50%, var(--border-medium) 100%);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-base);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    box-shadow: 0 var(--shadow-offset-lg) var(--shadow-offset-3xl) var(--shadow-medium), inset 0 var(--shadow-offset-sm) 0 var(--shadow-white-heavy);
    border: var(--border-width-sm) solid var(--overlay-light);
    position: relative;
}

#filterOptions .filter-group {
    margin: 2px 0;
    color: var(--text-color);
    font-size: 0.9em;
    width: max-content;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
}

#filterOptions label:not(.day-checkbox-label):not(.field-size-checkbox-label) {
    width: 160px;
    margin-left: 5px;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    font-weight: 500;
}

.day-checkboxes, .field-size-checkboxes {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    border: var(--border-width-sm) solid var(--border-medium);
    border-radius: var(--border-radius-xs);
    padding: var(--spacing-xs);
    box-shadow: 0 var(--shadow-offset-sm) var(--shadow-offset-md) var(--shadow-light), inset 0 var(--shadow-offset-sm) 0 var(--shadow-white-heavy);
    display: flex;
    justify-content: space-between;
    width: 130px;
    transition: all 0.2s ease;
}

.day-checkboxes:hover, .field-size-checkboxes:hover {
    box-shadow: 0 var(--shadow-offset-sm) var(--shadow-offset-md) var(--shadow-medium), inset 0 var(--shadow-offset-sm) 0 var(--shadow-white-heavy);
    transform: translateY(-1px);
}

#filterOptions .filter-group select {
    padding: var(--spacing-xs);
    border: var(--border-width-sm) solid var(--border-medium);
    border-radius: var(--border-radius-xs);
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
    box-shadow: 0 var(--shadow-offset-sm) var(--shadow-offset-md) var(--shadow-light), inset 0 var(--shadow-offset-sm) 0 var(--shadow-white-heavy);
    transition: all 0.2s ease;
    width: 130px;
    font-size: var(--font-size-base);
}

#filterOptions .filter-group select:focus {
    outline: none;
    border-color: var(--header-bg);
    box-shadow: 0 0 0 var(--shadow-offset-md) var(--focus-ring), 0 var(--shadow-offset-sm) var(--shadow-offset-md) var(--shadow-light);
}

#filterOptions .filter-group input[type="checkbox"] {
    display: block;
    margin: 0 auto;
    cursor: pointer;
    width: var(--icon-size-xs);
    height: var(--icon-size-xs);
}

label.day-checkbox-label {
    margin: 0;
    padding: 1px;
    cursor: pointer;
    flex: 1;
    text-align: center;
}

label.field-size-checkbox-label {
    margin: 0;
    padding: 1px;
    cursor: pointer;
    flex: 1;
    text-align: center;
}

.day-abbr, label.field-size-checkbox-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

#filterOptions .filter-group .day-checkboxes,
#filterOptions .filter-group .field-size-checkboxes {
    width: 130px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#filterOptions .filter-group .day-checkboxes *,
#filterOptions .filter-group .field-size-checkboxes * {
    text-align: center;
}

#filterOptions .filter-group select,
#filterOptions .filter-group .day-checkboxes-container,
#filterOptions .filter-group .field-size-checkboxes-container {
    margin: 0;
    width: 130px;
}

.clipboard-icon{cursor: pointer !important; pointer-events:auto !important;}

/* Loading Indicator Styles - Moved from JavaScript inline styles */
#loadingIndicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--overlay-dark);
    color: var(--text-white);
    padding: var(--spacing-4xl) var(--spacing-5xl);
    border-radius: var(--border-radius-xl);
    z-index: var(--z-index-modal);
    font-size: var(--font-size-16px);
    font-weight: bold;
    box-shadow: 0 var(--shadow-offset-lg) var(--shadow-offset-3xl) var(--shadow-darker);
    text-align: center;
    border: var(--border-width-md) solid var(--text-light);
    min-width: var(--container-width-sm);
    display: none;
    overflow: hidden;
}

/* Loading indicator visibility states */
#loadingIndicator.visible {
    display: block !important;
}

#loadingIndicator.hidden {
    display: none !important;
}

#loadingIndicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: var(--spacing-md);
    background: linear-gradient(90deg, transparent, var(--status-info), #2980b9, var(--status-info), transparent);
    animation: loadingStrip 2s ease-in-out infinite;
}

@keyframes loadingStrip {
    0% {
        left: -100%;
    }
    50% {
        left: 0%;
    }
    100% {
        left: 100%;
    }
}



/* No Fixtures Message Styles - Moved from JavaScript inline styles */
.no-fixtures-message {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: var(--spacing-5xl);
    text-align: center;
    background: var(--bg-secondary);
    border-radius: var(--border-radius-xl);
    margin: var(--spacing-4xl);
    border: var(--border-width-md) dashed var(--border-medium);
}

.no-fixtures-content {
    text-align: center;
    max-width: var(--container-width-md);
}

.no-fixtures-icon {
    font-size: var(--font-size-48px);
    margin-bottom: var(--spacing-4xl);
}

.no-fixtures-message h2 {
    color: var(--text-muted);
    margin-bottom: var(--spacing-3xl);
    font-size: var(--font-size-24px);
}

.no-fixtures-message p {
    color: var(--text-muted);
    margin-bottom: var(--spacing-4xl);
    font-size: var(--font-size-16px);
}

.no-fixtures-message p.suggestion-header {
    color: var(--text-muted);
    margin-bottom: var(--spacing-3xl);
    font-weight: bold;
}

.no-fixtures-message ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
    display: inline-block;
}

.no-fixtures-message li {
    color: var(--text-muted);
    margin-bottom: var(--spacing-xl);
    font-size: var(--font-size-14px);
}

.no-fixtures-message li::marker {
    color: var(--status-success);
}

.page-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-2xl) var(--spacing-4xl);
    position: relative;
}

.last-refresh-time {
    color: var(--text-light);
    font-size: var(--font-size-sm);
    flex: 0 0 auto;
    margin-left: var(--spacing-2xl);
}

.page-footer p {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
}

/* Consolidated Animation Keyframes */
@keyframes puddle-splash {
  0% {
    opacity: 0;
    transform: scale(0.1);
  }
  10% {
    opacity: 1;
    transform: scale(0.3);
  }
  30% {
    opacity: 0.9;
    transform: scale(0.8);
  }
  60% {
    opacity: 0.6;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@keyframes puddle-rings {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  20% {
    opacity: 0.8;
    transform: scale(0.6);
  }
  50% {
    opacity: 0.5;
    transform: scale(1);
  }
  80% {
    opacity: 0.2;
    transform: scale(1.4);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes puddle-splash-delayed {
  0% {
    opacity: 0;
    transform: scale(0.15);
  }
  15% {
    opacity: 1;
    transform: scale(0.4);
  }
  40% {
    opacity: 0.8;
    transform: scale(0.9);
  }
  70% {
    opacity: 0.5;
    transform: scale(1.3);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}

@keyframes puddle-rings-delayed {
  0% {
    opacity: 0;
    transform: scale(0.25);
  }
  25% {
    opacity: 0.7;
    transform: scale(0.7);
  }
  55% {
    opacity: 0.4;
    transform: scale(1.1);
  }
  85% {
    opacity: 0.15;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.9);
  }
}



/* PUDDLE SPLASH ANIMATION - Raindrops falling into puddle with splash and rings */

.washout-fixture {
  background: linear-gradient(
    to bottom,
    rgba(100, 150, 255, 0.4),
    rgba(80, 130, 255, 0.4)
  ) !important;
  position: relative;
  overflow: hidden;
}

/* Puddle background effect */
.washout-fixture::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    /* Splash drops - highly visible with blue and white */
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.7) 3px, transparent 3px),
    radial-gradient(circle at 60% 40%, rgba(173, 216, 230, 0.8) 2.5px, transparent 2.5px),
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.75) 4px, transparent 4px),
    radial-gradient(circle at 40% 70%, rgba(135, 206, 235, 0.7) 2px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(255, 255, 255, 0.65) 3.5px, transparent 3.5px),
    /* Expanding rings - highly visible with blue and white */
    radial-gradient(circle at 20% 30%, transparent 3px, rgba(255, 255, 255, 0.4) 3px, rgba(255, 255, 255, 0.4) 6px, transparent 6px),
    radial-gradient(circle at 60% 40%, transparent 2.5px, rgba(173, 216, 230, 0.35) 2.5px, rgba(173, 216, 230, 0.35) 5px, transparent 5px),
    radial-gradient(circle at 80% 20%, transparent 4px, rgba(255, 255, 255, 0.45) 4px, rgba(255, 255, 255, 0.45) 8px, transparent 8px),
    radial-gradient(circle at 40% 70%, transparent 2px, rgba(135, 206, 235, 0.3) 2px, rgba(135, 206, 235, 0.3) 4px, transparent 4px),
    radial-gradient(circle at 70% 60%, transparent 3.5px, rgba(255, 255, 255, 0.35) 3.5px, rgba(255, 255, 255, 0.35) 7px, transparent 7px);
  background-size: 40px 40px, 35px 35px, 45px 45px, 30px 30px, 42px 42px, 40px 40px, 35px 35px, 45px 45px, 30px 30px, 42px 42px;
  background-position: 0 0, 20px 15px, 10px 25px, 25px 5px, 15px 35px, 0 0, 20px 15px, 10px 25px, 25px 5px, 15px 35px;
  animation: puddle-splash 3s ease-out infinite, puddle-rings 3s ease-out infinite;
  pointer-events: none;
}

/* Raindrops falling */
.washout-fixture::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    /* Splash drops - highly visible with blue and white */
    radial-gradient(circle at 10% 50%, rgba(255, 255, 255, 0.65) 2.8px, transparent 2.8px),
    radial-gradient(circle at 50% 25%, rgba(173, 216, 230, 0.75) 3.2px, transparent 3.2px),
    radial-gradient(circle at 90% 35%, rgba(135, 206, 235, 0.6) 2.2px, transparent 2.2px),
    radial-gradient(circle at 30% 80%, rgba(255, 255, 255, 0.8) 3.8px, transparent 3.8px),
    radial-gradient(circle at 75% 75%, rgba(173, 216, 230, 0.7) 2.7px, transparent 2.7px),
    /* Expanding rings - highly visible with blue and white */
    radial-gradient(circle at 10% 50%, transparent 2.8px, rgba(255, 255, 255, 0.3) 2.8px, rgba(255, 255, 255, 0.3) 5.6px, transparent 5.6px),
    radial-gradient(circle at 50% 25%, transparent 3.2px, rgba(173, 216, 230, 0.25) 3.2px, rgba(173, 216, 230, 0.25) 6.4px, transparent 6.4px),
    radial-gradient(circle at 90% 35%, transparent 2.2px, rgba(135, 206, 235, 0.2) 2.2px, rgba(135, 206, 235, 0.2) 4.4px, transparent 4.4px),
    radial-gradient(circle at 30% 80%, transparent 3.8px, rgba(255, 255, 255, 0.35) 3.8px, rgba(255, 255, 255, 0.35) 7.6px, transparent 7.6px),
    radial-gradient(circle at 75% 75%, transparent 2.7px, rgba(173, 216, 230, 0.25) 2.7px, rgba(173, 216, 230, 0.25) 5.4px, transparent 5.4px);
  background-size: 38px 38px, 43px 43px, 32px 32px, 47px 47px, 36px 36px, 38px 38px, 43px 43px, 32px 32px, 47px 47px, 36px 36px;
  background-position: 5px 10px, 15px 20px, 25px 8px, 8px 30px, 20px 25px, 5px 10px, 15px 20px, 25px 8px, 8px 30px, 20px 25px;
  animation: puddle-splash-delayed 3.5s ease-out infinite, puddle-rings-delayed 3.5s ease-out infinite;
  pointer-events: none;
}

.washout-fixture .fixture-top-line,
.washout-fixture .fixture-bottom-line,
.washout-fixture .fixture-icons {
  position: relative;
  z-index: 1;
}

/* Third rain layer removed for puddle splash animation */

/* Puddle splash animation keyframes */
@keyframes puddle-splash {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  20% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
  80% {
    opacity: 0.4;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}

@keyframes puddle-rings {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  30% {
    opacity: 0.4;
    transform: scale(1);
  }
  60% {
    opacity: 0.6;
    transform: scale(1.2);
  }
  90% {
    opacity: 0.2;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

@keyframes puddle-splash-2 {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  25% {
    opacity: 0.5;
    transform: scale(1);
  }
  55% {
    opacity: 0.7;
    transform: scale(1.05);
  }
  85% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes puddle-rings-2 {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  35% {
    opacity: 0.3;
    transform: scale(1);
  }
  65% {
    opacity: 0.5;
    transform: scale(1.15);
  }
  95% {
    opacity: 0.15;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}


#filterOptions .loading-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--container-border);
    border-top: 2px solid var(--secondary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}



/* Accessibility and Modal Styles */

/* Modal styles */
.fixture-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--z-index-modal);
    background-color: var(--overlay-medium);
}

.fixture-modal .modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 20px;
}

.fixture-modal .modal-content {
    background: var(--bg-primary);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 var(--shadow-offset-lg) var(--shadow-offset-5xl) var(--shadow-darker);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

.fixture-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-4xl) var(--spacing-4xl) 0 var(--spacing-4xl);
    border-bottom: var(--border-width-sm) solid var(--border-light);
}

.fixture-modal .modal-header h2 {
    margin: 0;
    font-size: var(--font-size-2xl);
    color: var(--text-primary);
}

.fixture-modal .modal-close {
    background: none;
    border: none;
    font-size: var(--font-size-24px);
    cursor: pointer;
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-xs);
    color: var(--text-secondary);
    transition: background-color 0.2s;
}

.fixture-modal .modal-close:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.fixture-modal .modal-body {
    padding: var(--spacing-4xl);
}

.fixture-details p {
    margin: 10px 0;
    line-height: 1.5;
}

.fixture-details strong {
    color: var(--text-primary);
    font-weight: 600;
}





/* Enhanced Responsive Design */
@media (max-width: 1200px) {
    #filterOptions {
        width: var(--container-width-md);
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    
    #fillerBlock {
        width: var(--container-width-md);
    }
    
    .schedule-grid {
        font-size: var(--font-size-sm);
    }
    
    .time-slot[data-has-fixture="true"] {
        font-size: var(--font-size-xs);
    }
    
    .fixture-top-line {
        font-size: var(--font-size-base);
    }
    
    .fixture-bottom-line {
        font-size: var(--font-size-sm);
    }
}

@media (max-width: 768px) {
    #pageHeader {
        flex-direction: column;
        padding: var(--spacing-3xl) var(--spacing-2xl);
        gap: var(--spacing-2xl);
    }
    
    #filterOptions {
        width: 100%;
        margin: 0 var(--spacing-2xl);
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
        padding: var(--spacing-md);
    }
    
    #fillerBlock {
        display: none;
    }
    
    #headerTitle h1 {
        font-size: var(--font-size-xl);
        text-align: center;
    }
    
    #headerTitle .subtitle {
        font-size: var(--font-size-sm);
        text-align: center;
    }
    
    .schedule-grid {
        font-size: var(--font-size-sm);
        border-radius: var(--border-radius-xs);
    }
    
    .time-slot[data-has-fixture="true"] {
        font-size: var(--font-size-xs);
        padding: var(--spacing-sm);
    }
    
    .fixture-top-line {
        font-size: var(--font-size-base);
        flex-direction: column;
        gap: var(--spacing-sm);
    }
    
    .fixture-bottom-line {
        font-size: var(--font-size-sm);
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }
    
    .fixture-icons {
        justify-content: center;
        gap: var(--spacing-sm);
    }
    
    .fixture-info-icon {
        font-size: var(--font-size-sm);
    }
    
    .no-fixtures-message {
        margin: var(--spacing-2xl);
        padding: var(--spacing-4xl) var(--spacing-3xl);
        min-height: 250px;
    }
    
    .no-fixtures-icon {
        font-size: var(--font-size-40px);
        margin-bottom: var(--spacing-3xl);
    }
    
    .no-fixtures-message h2 {
        font-size: var(--font-size-lg);
        margin-bottom: 10px;
    }
    
    .no-fixtures-message p {
        font-size: var(--font-size-base);
        margin-bottom: var(--spacing-2xl);
    }
    
    .no-fixtures-message li {
        font-size: var(--font-size-sm);
        margin: var(--spacing-lg) 0;
    }
    
    /* Mobile-specific filter improvements */
    #filterOptions .filter-group {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    
    #filterOptions label:not(.day-checkbox-label):not(.field-size-checkbox-label) {
        width: 100%;
        margin-left: 0;
        font-size: var(--font-size-base);
    }
    
    #filterOptions .filter-group select,
    #filterOptions .filter-group .day-checkboxes,
    #filterOptions .filter-group .field-size-checkboxes {
        width: 100%;
        max-width: 200px;
    }
    
    /* Mobile modal improvements */
    .fixture-modal .modal-content {
        margin: var(--spacing-2xl);
        max-width: none;
        max-height: 90vh;
    }
    
    .fixture-modal .modal-header {
        padding: var(--spacing-3xl) var(--spacing-3xl) 0 var(--spacing-3xl);
    }
    
    .fixture-modal .modal-header h2 {
        font-size: var(--font-size-lg);
    }
    
    .fixture-modal .modal-body {
        padding: var(--spacing-3xl);
    }
    
    .fixture-modal .modal-body p {
        font-size: var(--font-size-base);
        line-height: 1.4;
    }
}

@media (max-width: 480px) {
    #pageHeader {
        padding: var(--spacing-2xl) var(--spacing-lg);
    }
    
    #filterOptions {
        margin: 0 var(--spacing-lg);
        padding: var(--spacing-md);
        font-size: var(--font-size-xs);
    }
    
    #headerTitle h1 {
        font-size: var(--font-size-lg);
    }
    
    #headerTitle .subtitle {
        font-size: var(--font-size-xs);
    }
    
    .schedule-grid {
        font-size: var(--font-size-xs);
        margin: var(--spacing-lg);
    }
    
    .time-slot[data-has-fixture="true"] {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs);
    }
    
    .fixture-top-line {
        font-size: var(--font-size-sm);
    }
    
    .fixture-bottom-line {
        font-size: var(--font-size-xs);
    }
    
    .fixture-info-icon {
        font-size: var(--font-size-xs);
    }
    
    /* Ultra-compact mobile filters */
    #filterOptions .filter-group {
        margin: var(--spacing-xs) 0;
    }
    
    #filterOptions label:not(.day-checkbox-label):not(.field-size-checkbox-label) {
        font-size: var(--font-size-xs);
    }
    
    .day-checkboxes, .field-size-checkboxes {
        padding: var(--spacing-xs);
        gap: var(--spacing-xs);
    }
    
    .day-abbr, label.field-size-checkbox-label {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs);
    }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
    #pageHeader {
        padding: var(--spacing-lg) var(--spacing-4xl);
    }
    
    #headerTitle h1 {
        font-size: var(--font-size-base);
        margin: 0 0 var(--spacing-sm) 0;
    }
    
    #headerTitle .subtitle {
        font-size: var(--font-size-xs);
        margin: 0;
    }
    
    #filterOptions {
        min-height: 80px;
        padding: var(--spacing-md);
    }
    
    .schedule-grid {
        font-size: var(--font-size-base);
    }
    
    .time-slot[data-has-fixture="true"] {
        font-size: var(--font-size-sm);
        padding: var(--spacing-sm);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .schedule-grid {
        border-width: var(--border-width-xs);
    }
    
    .time-slot[data-has-fixture="true"] {
        border-width: var(--border-width-xs);
    }
    
    .fixture-info-icon {
        transform: scale(1.1);
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .schedule-grid,
    .time-slot[data-has-fixture="true"],
    .fixture-modal .modal-content,
    #filterOptions .filter-group select,
    .day-checkboxes,
    .field-size-checkboxes {
        transition: none !important;
        animation: none !important;
    }
    
    .washout-fixture::before,
    .washout-fixture::after {
        animation: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .schedule-grid {
        border: var(--border-width-md) solid var(--text-black);
    }
    
    .time-slot[data-has-fixture="true"] {
        border: var(--border-width-md) solid var(--text-black);
        background-color: var(--text-white) !important;
        color: var(--text-black) !important;
    }
    
    .fixture-modal .modal-content {
        border: var(--border-width-md) solid var(--text-black);
    }
    
    #filterOptions {
        border: var(--border-width-md) solid var(--text-black);
        background-color: var(--text-white);
    }
    
    #filterOptions .filter-group select {
        border: var(--border-width-md) solid var(--text-black);
        background-color: var(--text-white);
        color: var(--text-black);
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --ground-and-field-column-width: 90px;
        --section-bg-color: #2d2d2d;
        --border-color: #444;
        --field-border-color: #666;
        --header-bg: #1a1a1a;
        --header-fg: #e0e0e0;
        --cell-padding: 4px;
        --header-height: 30px;
        --spacer-bg-color: #3a3a3a;
        --header-border-color: #555;
        
        --table-main-bg: #1e1e1e;
        --table-header-bg: #2a2a2a;
        --table-alternate-row-bg: #2a2a2a;
        --table-ground-column-bg: #333;
        --table-field-column-bg: #2d2d2d;
        --table-section-header-bg: #3a3a3a;
        --table-day-separator-bg: #333;
    }
    
    body {
        background-color: #1a1a1a;
        color: #e0e0e0;
    }
    
    .schedule-grid {
        background-color: var(--table-main-bg);
        color: #e0e0e0;
    }
    
    .schedule-grid th {
        background: linear-gradient(135deg, #333 0%, #444 100%);
        color: #e0e0e0;
    }
    
    .time-slot[data-has-fixture="true"] {
        color: #e0e0e0;
    }
    
    .fixture-modal .modal-content {
        background-color: #2a2a2a;
        color: #e0e0e0;
    }
    
    #filterOptions {
        background: linear-gradient(135deg, #2a2a2a 0%, #333 50%, #3a3a3a 100%);
        color: #e0e0e0;
    }
    
    #filterOptions .filter-group select {
        background: linear-gradient(135deg, #333 0%, #2a2a2a 100%);
        color: #e0e0e0;
        border-color: #555;
    }
}

/* Print styles */
@media print {
    .fixture-modal,
    .loading-indicator,
    .filter-options,
    .no-fixtures-message {
        display: none !important;
    }
    
    .schedule-grid {
        box-shadow: none;
        border: var(--border-width-sm) solid var(--text-black);
    }
    
    .time-slot[data-has-fixture="true"] {
        border: var(--border-width-sm) solid var(--text-black);
        background-color: var(--text-white) !important;
        color: var(--text-black) !important;
    }
    
    .washout-fixture {
        background: #e6f3ff !important;
    }
    
    .washout-fixture::before,
    .washout-fixture::after {
        display: none !important;
    }
        
    .fixture-cell.error {
        background: #ffcccc !important;
        border: 2px solid #cc0000 !important;
    }
}

/* Dynamic Tooltip Styles */
.dynamic-tooltip {
    position: fixed;
    background: var(--bg-dark);
    color: var(--text-white);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
    z-index: var(--z-index-tooltip);
    pointer-events: none;
    box-shadow: 0 var(--shadow-offset-lg) var(--shadow-offset-3xl) var(--shadow-darker);
    white-space: pre-line;
    max-width: 400px;
    word-wrap: break-word;
}



/* Modern Refresh Button Styles */
.modern-refresh-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--header-fg);
    cursor: pointer;
    padding: 12px;
    border-radius: 50%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.modern-refresh-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modern-refresh-button:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.modern-refresh-button:hover::before {
    opacity: 1;
}

.modern-refresh-button:active {
    transform: translateY(0) scale(0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.modern-refresh-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.refresh-icon {
    width: 24px;
    height: 24px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.modern-refresh-button:hover .refresh-icon {
    transform: rotate(180deg);
}

.modern-refresh-button:active .refresh-icon {
    transform: rotate(360deg);
}

/* Loading state for refresh button */
.modern-refresh-button.loading {
    pointer-events: none;
    opacity: 0.7;
}

.modern-refresh-button.loading .refresh-icon {
    animation: spin 1s linear infinite;
}

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