/* Schedule View Styles with Dark Mode Support */

/* Light mode variables (default) */
:root {
    --schedule-bg-color: #ffffff;
    --schedule-text-color: #000000;
    --schedule-muted-color: #6c757d;
    --schedule-border-color: #dee2e6;
    --schedule-card-bg: #ffffff;
    --schedule-card-hover-bg: #f8f9fa;
    --schedule-stats-bg: #ffffff;
    --schedule-unscheduled-bg: #fff3cd;
    --schedule-unscheduled-border: #ffeaa7;
    --schedule-shadow: rgba(0,0,0,0.1);
    --schedule-hover-shadow: rgba(0,0,0,0.15);
}

/* Dark mode variables */
[data-bs-theme="dark"] {
    --schedule-bg-color: #1a1a1a;
    --schedule-text-color: #ffffff;
    --schedule-muted-color: #adb5bd;
    --schedule-border-color: #404040;
    --schedule-card-bg: #2d2d2d;
    --schedule-card-hover-bg: #3d3d3d;
    --schedule-stats-bg: #2d2d2d;
    --schedule-unscheduled-bg: #3d3529;
    --schedule-unscheduled-border: #5d4e2f;
    --schedule-shadow: rgba(0,0,0,0.3);
    --schedule-hover-shadow: rgba(0,0,0,0.5);
}

/* Manual dark mode override class */
.dark-mode {
    --schedule-bg-color: #1a1a1a;
    --schedule-text-color: #ffffff;
    --schedule-muted-color: #adb5bd;
    --schedule-border-color: #404040;
    --schedule-card-bg: #2d2d2d;
    --schedule-card-hover-bg: #3d3d3d;
    --schedule-stats-bg: #2d2d2d;
    --schedule-unscheduled-bg: #3d3529;
    --schedule-unscheduled-border: #5d4e2f;
    --schedule-shadow: rgba(0,0,0,0.3);
    --schedule-hover-shadow: rgba(0,0,0,0.5);
}

/* Apply dark mode styles to body when dark mode is active */
.dark-mode {
    background-color: var(--schedule-bg-color);
    color: var(--schedule-text-color);
}

[data-bs-theme="dark"] body {
    background-color: var(--schedule-bg-color);
    color: var(--schedule-text-color);
}

/* Schedule Header */
.schedule-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 30px 0;
    margin-bottom: 30px;
}

span.admin-page {
    color: var(--danger-color);
}

/* Schedule Statistics */
.schedule-stats {
    background: var(--schedule-stats-bg);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px var(--schedule-shadow);
    border: 1px solid var(--schedule-border-color);
}

.stat-card {
    text-align: center;
    padding: 15px;
}

.stat-number {
    font-size: 2rem;
    font-weight: bold;
    color: var(--secondary-color);
}

.stat-label {
    color: var(--schedule-muted-color);
    font-size: 0.9rem;
}

/* Date Sections */
.date-section {
    background: var(--schedule-card-bg);
    border-radius: 10px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px var(--schedule-shadow);
    /* overflow: hidden; deactivate because we want the children date-header to be sticky */
    /* border: 1px solid var(--schedule-border-color); */
}

.full-width-container {
    width: 100%;
    max-width: none;
}

/* 1-8 courts */
.game-row--courts-1 { flex: 0 0 100%; max-width: 100%; }
.game-row--courts-2 { flex: 0 0 50%;  max-width: 50%; }
.game-row--courts-3 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.game-row--courts-4 { flex: 0 0 25%; max-width: 25%; }
.game-row--courts-5 { flex: 0 0 20%; max-width: 20%; }
/* below ones are not used in the template */
.game-row--courts-6 { flex: 0 0 16.6667%; max-width: 16.6667%; }
.game-row--courts-7 { flex: 0 0 14.2857%; max-width: 14.2857%; }
.game-row--courts-8 { flex: 0 0 12.5%; max-width: 12.5%; }

.date-header {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    padding: 15px 20px;
    font-size: 1.25rem;
    font-weight: 600;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

/* Make the Date Header Sticky */
.date-header {
    position: sticky;
    top: 0px; /* Adjust if your navbar is a different height */
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Time Slots */
.time-slot {
    border-bottom: 1px solid var(--schedule-border-color);
    padding: 20px;
}

.time-slot:last-child {
    border-bottom: none;
}

.time-label {
    background: var(--primary-color);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    display: inline-block;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Game Cards */
.game-card {
    background: var(--schedule-card-hover-bg);
    border: 1px solid var(--schedule-border-color);
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    color: var(--schedule-text-color);
}

.admin .game-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--schedule-hover-shadow);
}

.game-card.completed, .unscheduled-game.completed {
    border-left: 4px solid var(--secondary-color);
    background-color: #e8ffe8;
}

.game-card.in-progress {
    border-left: 4px solid var(--warning-color);
}

.game-card.scheduled {
    border-left: 4px solid var(--primary-color);
}

/* Empty Game Card Styles */
.game-card.empty-card {
    background: transparent;
    border: 2px dashed var(--schedule-border-color);
    border-left: 4px dashed var(--schedule-muted-color);
    min-height: 130px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.game-card.empty-card:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.8;
}

.empty-card-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.empty-card-content i {
    font-size: 2rem;
    color: var(--schedule-muted-color);
}

.empty-card-content span {
    font-size: 0.9rem;
    color: var(--schedule-muted-color);
    font-style: italic;
}

/* Empty unscheduled game cards */
.unscheduled-game.empty-card {
    background: transparent;
    border: 2px dashed var(--schedule-unscheduled-border);
    border-left: 4px dashed var(--warning-color);
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.unscheduled-game.empty-card:hover {
    transform: none;
    box-shadow: none;
    opacity: 0.8;
}

/* Dark mode adjustments for unscheduled empty cards */
.dark-mode .unscheduled-game.empty-card {
    border-color: var(--schedule-unscheduled-border);
    border-left-color: var(--warning-color);
}

/* Game Card Elements */
.game-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
    gap: 4px;
}

.game-teams {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--schedule-text-color);
    display: flex;
}

.vs-separator {
    color: var(--schedule-muted-color);
    margin: 0 10px;
}

.winner {
    color: var(--success-color);
    font-weight: bold;
}

.game-info {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.game-meta {
    display: flex;
    gap: 15px;
    color: var(--schedule-muted-color);
    font-size: 0.9rem;
}

/* Chips/Badges */
.chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.chip-group {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #bbdefb;
}

.chip-phase {
    background-color: #f3e5f5;
    color: #7b1fa2;
    border: 1px solid #e1bee7;
}

.chip-competition {
    background-color: #e8f5e8;
    color: #388e3c;
    border: 1px solid #c8e6c9;
}

.chip-completed {
    background-color: var(--secondary-color);
    color: #fff;
    border: 1px solid var(--secondary-color);
}

.chip-in-progress {
    background-color: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffcc02;
}

.chip-scheduled {
    background-color: #e3f2fd;
    color: #1976d2;
    border: 1px solid #90caf9;
}

.chip-court {
    background-color: #fff3e0;
    color: #f57c00;
    border: 1px solid #ffcc02;
}

/* Dark mode chip adjustments */
.dark-mode .chip-group,
[data-bs-theme="dark"] .chip-group {
    background-color: #1a2332;
    color: #64b5f6;
    border: 1px solid #2d3748;
}

.dark-mode .chip-phase,
[data-bs-theme="dark"] .chip-competition {
    background-color: #2d1b32;
    color: #ba68c8;
    border: 1px solid #3d2748;
}

.dark-mode .chip-competition,
[data-bs-theme="dark"] .chip-phase {
    background-color: #1b2d1b;
    color: #66bb6a;
    border: 1px solid #2d4a2d;
}

.dark-mode .chip-completed,
[data-bs-theme="dark"] .chip-completed {
    background-color: var(--secondary-color);
    color: var(--text-on-dark);
    border: 1px solid var(--secondary-color);
}

.dark-mode .chip-in-progress,
[data-bs-theme="dark"] .chip-in-progress {
    background-color: #332a1a;
    color: #ffb74d;
    border: 1px solid #4a3d2a;
}

.dark-mode .chip-scheduled,
[data-bs-theme="dark"] .chip-scheduled {
    background-color: #1a2332;
    color: #64b5f6;
    border: 1px solid #2d3748;
}

.dark-mode .chip-court,
[data-bs-theme="dark"] .chip-in-progress {
    background-color: #332a1a;
    color: #ffb74d;
    border: 1px solid #4a3d2a;
}

.dark-mode .game-card.completed, .dark-mode .unscheduled-game.completed {
    background-color: #000000;
}

/* Unscheduled Games Section */
.unscheduled-section {
    background: var(--schedule-card-bg);
    border-radius: 10px;
    box-shadow: 0 4px 15px var(--schedule-shadow);
    overflow: hidden;
}

.unscheduled-header {
    background: var(--warning-color);
    color: #666;
    padding: 15px 20px;
    font-size: 1.25rem;
    font-weight: 600;
}

.unscheduled-content {
    padding: 20px;
    color: var(--schedule-text-color);
}

.unscheduled-game {
    background: var(--schedule-unscheduled-bg);
    border: 1px solid var(--schedule-unscheduled-border);
    border-radius: 8px;
    padding: 15px;
    margin-top: 12px;
    color: var(--schedule-text-color);
}

.drag-n-drop-btn {
    position: fixed;
    bottom: 16px;
    right: 70px;
}

.back-button {
    margin-bottom: 20px;
    height: 40px;
}

.back-button .btn {
    float: right;
}

/* Filter Controls */
.filter-controls {
    text-align: right;
}

.filter-controls label {
    font-weight: 600;
    color: var(--secondary-color);
}

.filter-controls .form-select {
    background-color: var(--schedule-card-bg);
    border-color: var(--schedule-border-color);
    color: var(--schedule-text-color);
}

.dark-mode .filter-controls .form-select,
[data-bs-theme="dark"] .filter-controls .form-select {
    background-color: var(--schedule-card-bg);
    border-color: var(--schedule-border-color);
    color: var(--schedule-text-color);
}

.dark-mode .filter-controls .form-select:focus,
[data-bs-theme="dark"] .filter-controls .form-select:focus {
    background-color: var(--schedule-card-bg);
    border-color: var(--secondary-color);
    color: var(--schedule-text-color);
    box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
}

/* Text color overrides for dark mode */
.dark-mode .text-muted,
[data-bs-theme="dark"] .text-muted {
    color: var(--schedule-muted-color) !important;
}

/* Admin Schedule View CSS */
body.admin .game-card {
    padding: 0;
}

body.admin .game-card a {
    padding: 15px;
    display: block;
    text-decoration: none;
}

body.admin .unscheduled-game a {
    text-decoration: none;
}

a.game-admin-edit-link {
    padding: 0 !important;
    float: right;
    font-size: 12px;
}

/* Responsive Design */

/* For larger courts configurations, show empty cards on larger screens */
@media (max-width: 1320px) {
    .game-row--courts-5 {  flex-basis: 25%; max-width: 25%; }
}

@media (min-width: 992px) {
    .game-card.empty-card {
        display: flex !important;
    }
}

/* Hide empty cards on medium screens when we have many courts */
@media (max-width: 991px) {
    .game-card.empty-card {
        /* display: none !important; */
    }
    .game-row--courts-4 {  flex-basis: 33.3333%; max-width: 33.3333%; }
    .game-row--courts-5 {  flex-basis: 33.3333%; max-width: 33.3333%; }
}

@media (max-width: 768px) {
    .filter-controls {
        text-align: left;
        margin-top: 20px;
    }
    
    [class^="game-row--courts-"] {
        flex: 0 0 100%; max-width: 100%;
    }

    /* Hide empty cards on smaller screens to save space */
    .empty-card-row {
        display: none !important;
        height: 60px;
    }
}

/* For very small screens, always use full width */
@media (max-width: 576px) {
    /* Override all column classes for very small screens */
    .row > div[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .game-meta {
        flex-direction: column;
        gap: 5px;
    }
    
    .game-info {
        /* justify-content: center; */
    }
}

@media (max-width: 320px) {
    .game-teams {
        display: flex;
        flex-direction: column;
    }

    .game-teams .vs-separator {
        margin: 0;
    }

    .game-info {
        justify-content: unset;
    }
}

/* Dark Mode Toggle Button Styles */
.dark-mode-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1050;
    background: var(--secondary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 10px var(--schedule-shadow);
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    background: var(--primary-color);
}

/* Ensure proper contrast for badges in dark mode */
.dark-mode .badge,
[data-bs-theme="dark"] .badge {
    color: white;
}

.dark-mode .badge.bg-primary,
[data-bs-theme="dark"] .badge.bg-primary {
    background-color: var(--secondary-color) !important;
}

.dark-mode .badge.bg-success,
[data-bs-theme="dark"] .badge.bg-success {
    background-color: var(--success-color) !important;
}