/* Dark Mode Styles */

body.dark-mode {
    background: #1a1a1a;
    color: #e0e0e0;
}

body.dark-mode .container,
body.dark-mode .container-fluid > .container,
body.dark-mode .welcome-content {
    background: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .navbar {
    background: #1a1a1a !important;
    border-bottom: 1px solid #3d3d3d;
}

body.dark-mode .jumbotron {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    color: #e0e0e0;
}

body.dark-mode .table {
    background: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .table thead {
    background: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%);
    color: #e0e0e0;
}

body.dark-mode .table tbody {
    background: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .table tbody tr {
    background: #2d2d2d;
}

body.dark-mode .table tbody tr:hover {
    background: #3d3d3d;
}

/* Table info (user's address highlight) - use gold color like pools page */
body.dark-mode .table tbody tr.table-info,
body.dark-mode tr.table-info {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 165, 0, 0.25) 100%) !important;
    border-left: 4px solid #FFD700 !important;
}

body.dark-mode .table tbody tr.table-info td,
body.dark-mode tr.table-info td {
    color: #e0e0e0 !important;
    background: transparent !important;
}

body.dark-mode .table tbody tr.table-info:hover,
body.dark-mode tr.table-info:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.4) 0%, rgba(255, 165, 0, 0.35) 100%) !important;
}

body.dark-mode .table tbody td {
    border-color: #3d3d3d;
    color: #e0e0e0;
}


body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode select.form-control,
body.dark-mode select {
    background: #3d3d3d;
    border-color: #4d4d4d;
    color: #e0e0e0;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode select.form-control:focus,
body.dark-mode select:focus {
    background: #3d3d3d;
    border-color: #007bff;
    color: #e0e0e0;
}

body.dark-mode .card,
body.dark-mode .game-card,
body.dark-mode .sport-card {
    background: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

/* Info card styling for dark mode */
body.dark-mode .card.border-info {
    border-color: #3d3d3d !important;
}

body.dark-mode .card-header.bg-info {
    background: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%) !important;
    border-color: #3d3d3d !important;
    color: #e0e0e0 !important;
}

body.dark-mode .sport-section {
    background: #2d2d2d;
    border-color: #3d3d3d;
}

body.dark-mode .league-badge {
    background: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%);
}

body.dark-mode .section-title {
    color: #ffffff !important;
    border-bottom-color: #007bff;
    background: #2d2d2d !important;
    border-color: #3d3d3d;
}

body.dark-mode .sport-card h3,
body.dark-mode .sport-card h4,
body.dark-mode .league-card h4 {
    color: #ffffff !important;
}

body.dark-mode .modal-content {
    background: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode .modal-header {
    background: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%);
    border-bottom: 1px solid #4d4d4d;
}

body.dark-mode .modal-body {
    background: #2d2d2d;
    color: #e0e0e0;
}

body.dark-mode footer {
    background: #1a1a1a !important;
    border-top: 1px solid #3d3d3d;
}

body.dark-mode .alert {
    background: #3d3d3d;
    border-color: #4d4d4d;
    color: #e0e0e0;
}

body.dark-mode .alert-success {
    background: rgba(40, 167, 69, 0.2);
    border-left-color: #28a745;
    color: #90ee90;
}

body.dark-mode .alert-danger {
    background: rgba(220, 53, 69, 0.2);
    border-left-color: #dc3545;
    color: #ff6b6b;
}

body.dark-mode .alert-warning {
    background: rgba(255, 193, 7, 0.2);
    border-left-color: #ffc107;
    color: #ffd700;
}

body.dark-mode .alert-info {
    background: rgba(23, 162, 184, 0.2);
    border-left-color: #17a2b8;
    color: #87ceeb;
}

body.dark-mode .filter-section {
    background: #2d2d2d;
    border-color: #3d3d3d;
}

body.dark-mode .page-header {
    background: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%);
    color: #e0e0e0;
}

body.dark-mode .text-muted {
    color: #a0a0a0 !important;
}

body.dark-mode hr {
    border-color: #3d3d3d;
}

body.dark-mode .btn-secondary {
    background: #3d3d3d;
    border-color: #4d4d4d;
    color: #e0e0e0;
}

body.dark-mode .btn-secondary:hover {
    background: #4d4d4d;
    border-color: #5d5d5d;
    color: #ffffff;
}

body.dark-mode .info-card {
    background: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

body.dark-mode .info-card h5 {
    color: #e0e0e0;
}

body.dark-mode .info-card p {
    color: #c0c0c0;
}

body.dark-mode .donation-card {
    background: #2d2d2d;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

body.dark-mode .donation-card h5 {
    color: #e0e0e0;
}

/* DataTables pagination dark mode */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #e0e0e0 !important;
    background: transparent !important;
    border: none !important;
    padding: 0.5rem 0.75rem !important;
    margin: 0 0.25rem !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    color: #ffffff !important;
    background: #4d4d4d !important;
    border: none !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    color: #ffffff !important;
    background: #007bff !important;
    border: none !important;
    font-weight: 600 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #0056b3 !important;
    border: none !important;
}

/* Disabled pagination buttons - make them visible but clearly disabled */
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate span.paginate_button {
    color: #e0e0e0 !important;
    background: transparent !important;
    border: none !important;
    cursor: not-allowed !important;
    opacity: 0.5 !important;
    pointer-events: none !important;
    font-weight: 500 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:disabled:hover,
body.dark-mode .dataTables_wrapper .dataTables_paginate a.paginate_button.disabled:hover {
    color: #d0d0d0 !important;
    background: transparent !important;
    border: none !important;
}

/* Ellipsis buttons */
body.dark-mode .dataTables_wrapper .dataTables_paginate .ellipsis {
    color: #e0e0e0 !important;
    background: transparent !important;
    border: none !important;
    cursor: default !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.5rem !important;
}

body.dark-mode .dataTables_wrapper .dataTables_info {
    color: #e0e0e0 !important;
    padding: 0.5rem 0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate {
    padding: 0.5rem 0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 2.5rem;
    text-align: center;
}

body.dark-mode .dataTables_wrapper .dataTables_length label,
body.dark-mode .dataTables_wrapper .dataTables_filter label {
    color: #e0e0e0 !important;
}

body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_filter input {
    background: #3d3d3d !important;
    border-color: #4d4d4d !important;
    color: #e0e0e0 !important;
}

body.dark-mode .navbar-nav .nav-item.active .nav-link {
    color: #FFD700 !important;
    font-weight: 700;
    border-bottom: 2px solid #FFD700;
}

body.dark-mode .day-header {
    color: #e0e0e0;
    background: linear-gradient(135deg, #3d3d3d 0%, #2d2d2d 100%);
    border-left-color: #007bff;
}

body.dark-mode .day-separator {
    border-top-color: #4d4d4d;
}

/* Roadmap page - Release cards dark mode */
body.dark-mode .release-card {
    border-color: #3d3d3d;
    background: #2d2d2d;
}

body.dark-mode .release-card .card-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-bottom-color: #007bff;
}

body.dark-mode .release-card .card-body {
    background: #2d2d2d;
}

body.dark-mode .release-card .card-body li {
    color: #e0e0e0;
}

body.dark-mode .release-card .card-body a {
    color: #4da6ff;
}

body.dark-mode .release-card .card-body a:hover {
    color: #66b3ff;
}

/* Roadmap page - Roadmap cards dark mode */
body.dark-mode .roadmap-card {
    border-color: #3d3d3d;
    background: #2d2d2d;
}

body.dark-mode .roadmap-card .card-header {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
}

body.dark-mode .roadmap-card .card-body {
    background: #2d2d2d;
}

body.dark-mode .roadmap-card .card-body li {
    color: #e0e0e0;
}

/* Recommendation highlights - dark mode */
/* Only apply highlighting when the highlight class is present (checkbox is checked) */
body.dark-mode .team1_rec.highlight,
body.dark-mode .team2_rec.highlight,
body.dark-mode .draw_rec.highlight,
body.dark-mode .is_rec.highlight {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.4) 0%, rgba(255, 152, 0, 0.35) 100%) !important;
    border-left: 4px solid #FFC107 !important;
    font-weight: 600 !important;
}

/* Dark text for highlighted rows ONLY - override default dark mode table text */
body.dark-mode .team1_rec.highlight td,
body.dark-mode .team2_rec.highlight td,
body.dark-mode .draw_rec.highlight td,
body.dark-mode .is_rec.highlight td {
    color: #1a1a1a !important;
    font-weight: 600 !important;
    background: transparent !important;
}

/* Dark text for other content in highlighted rows (but inset tables stay white - see below) */
body.dark-mode .team1_rec.highlight td *,
body.dark-mode .team2_rec.highlight td *,
body.dark-mode .draw_rec.highlight td *,
body.dark-mode .is_rec.highlight td * {
    color: #1a1a1a !important;
}

/* Override any Bootstrap info/primary blue backgrounds when highlighted */
body.dark-mode .team1_rec.highlight.bg-info,
body.dark-mode .team2_rec.highlight.bg-info,
body.dark-mode .draw_rec.highlight.bg-info,
body.dark-mode .is_rec.highlight.bg-info,
body.dark-mode .team1_rec.highlight.table-info,
body.dark-mode .team2_rec.highlight.table-info,
body.dark-mode .draw_rec.highlight.table-info,
body.dark-mode .is_rec.highlight.table-info {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.4) 0%, rgba(255, 152, 0, 0.35) 100%) !important;
    color: #1a1a1a !important;
}

body.dark-mode .team1_rec.highlight:hover,
body.dark-mode .team2_rec.highlight:hover,
body.dark-mode .draw_rec.highlight:hover,
body.dark-mode .is_rec.highlight:hover {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.5) 0%, rgba(255, 152, 0, 0.45) 100%) !important;
}

/* Inset table text (td + th) always white, even in highlighted rows */
body.dark-mode tr.is_rec.highlight td table td,
body.dark-mode tr.is_rec.highlight td table th,
body.dark-mode tr.team1_rec.highlight td table td,
body.dark-mode tr.team1_rec.highlight td table th,
body.dark-mode tr.team2_rec.highlight td table td,
body.dark-mode tr.team2_rec.highlight td table th,
body.dark-mode tr.draw_rec.highlight td table td,
body.dark-mode tr.draw_rec.highlight td table th {
    color: #e0e0e0 !important;
}

/* Toast notifications - dark mode */
body.dark-mode .toast {
    background: #2d2d2d;
    border-color: #3d3d3d;
}

body.dark-mode .toast-header {
    border-bottom-color: #4d4d4d;
}

body.dark-mode .toast.bg-success {
    background: rgba(40, 167, 69, 0.3) !important;
    border: 1px solid #28a745;
}

body.dark-mode .toast.bg-danger {
    background: rgba(220, 53, 69, 0.3) !important;
    border: 1px solid #dc3545;
}

body.dark-mode .toast.bg-warning {
    background: rgba(255, 193, 7, 0.3) !important;
    border: 1px solid #ffc107;
}

body.dark-mode .toast.bg-warning .toast-body.text-dark {
    color: #ffffff !important;
}

body.dark-mode .toast.bg-warning .toast-header {
    color: #ffffff !important;
}

body.dark-mode .toast.bg-warning .close.text-dark {
    color: #ffffff !important;
}

body.dark-mode .toast.bg-info {
    background: rgba(23, 162, 184, 0.3) !important;
    border: 1px solid #17a2b8;
}