/* ============================================================================
   TipsChampions - Dark Theme Stylesheet
   ============================================================================
   Step 23C Revised: Complete dark theme for frontend
   This file contains all [data-theme="dark"] overrides
   Load AFTER app.css
   ============================================================================ */


/* ============================================================================
   DARK THEME VARIABLE OVERRIDES
   ============================================================================ */

[data-theme="dark"] {
    /* ===== Background Colors ===== */
    --tc-bg-body: #121212;
    --tc-bg-surface: #1e1e1e;
    --tc-bg-surface-hover: #2a2a2a;
    --tc-bg-surface-active: #333333;
    --tc-bg-muted: #181818;
    --tc-bg-highlight: rgba(102, 126, 234, 0.15);
    
    /* ===== Text Colors ===== */
    --tc-text-primary: #f8f9fa;
    --tc-text-secondary: #adb5bd;
    --tc-text-muted: #6c757d;
    --tc-text-light: #495057;
    --tc-text-inverse: #121212;
    --tc-text-link: #8b9ff5;
    --tc-text-link-hover: #a3b3f7;
    
    /* ===== Border Colors ===== */
    --tc-border-color: #3d3d3d;
    --tc-border-light: #2d2d2d;
    --tc-border-dark: #4d4d4d;
    
    /* ===== Shadow (darker in dark mode) ===== */
    --tc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --tc-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
    --tc-shadow-md: 0 6px 12px rgba(0, 0, 0, 0.4);
    --tc-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.5);
    
    /* ===== Component-Specific ===== */
    
    /* Cards */
    --tc-card-bg: var(--tc-bg-surface);
    --tc-card-border: var(--tc-border-light);
    
    /* Forms */
    --tc-input-bg: var(--tc-bg-surface-hover);
    --tc-input-border: var(--tc-border-color);
    --tc-input-text: var(--tc-text-primary);
    --tc-input-placeholder: var(--tc-text-muted);
    --tc-input-disabled-bg: var(--tc-bg-muted);
    
    /* Tables */
    --tc-table-bg: var(--tc-bg-surface);
    --tc-table-border: var(--tc-border-color);
    --tc-table-header-bg: var(--tc-bg-muted);
    --tc-table-header-text: var(--tc-text-secondary);
    --tc-table-row-hover: var(--tc-bg-surface-hover);
    --tc-table-stripe-bg: rgba(255, 255, 255, 0.02);
    
    /* Footer */
    --tc-footer-bg: var(--tc-bg-surface);
    --tc-footer-border: var(--tc-border-color);
    --tc-footer-text: var(--tc-text-secondary);
    
    /* Scrollbar */
    --tc-scrollbar-track: #2d2d2d;
    --tc-scrollbar-thumb: var(--tc-primary);
    --tc-scrollbar-thumb-hover: var(--tc-primary-hover);
    
    /* ===== Semantic Colors (Dark Theme Text) ===== */
    --tc-warning-text: #ffc107;
    --tc-success-text: #6dd893;
    --tc-danger-text: #f08080;
    --tc-info-text: #5bc0de;
}


/* ============================================================================
   BODY & BASE
   ============================================================================ */

[data-theme="dark"] body {
    color-scheme: dark;
}


/* ============================================================================
   TYPOGRAPHY
   ============================================================================ */

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
    color: var(--tc-text-primary);
}

[data-theme="dark"] a {
    color: var(--tc-text-link);
}

[data-theme="dark"] a:hover {
    color: var(--tc-text-link-hover);
}

[data-theme="dark"] code {
    background-color: var(--tc-bg-muted);
    color: #e06c75;
}

[data-theme="dark"] pre {
    background-color: var(--tc-bg-muted);
    border-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

[data-theme="dark"] kbd {
    background-color: var(--tc-bg-surface-active);
    color: var(--tc-text-primary);
}

[data-theme="dark"] mark {
    background-color: rgba(255, 193, 7, 0.3);
    color: var(--tc-text-primary);
}

[data-theme="dark"] blockquote {
    border-left-color: var(--tc-primary);
    color: var(--tc-text-secondary);
}

[data-theme="dark"] hr {
    border-color: var(--tc-border-color);
}


/* ============================================================================
   CARDS
   ============================================================================ */

[data-theme="dark"] .card {
    background-color: var(--tc-card-bg);
    border-color: var(--tc-card-border);
}

[data-theme="dark"] .card-header {
    background-color: var(--tc-bg-muted);
    border-bottom-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .card-footer {
    background-color: var(--tc-bg-muted);
    border-top-color: var(--tc-border-color);
}

[data-theme="dark"] .card-title {
    color: var(--tc-text-primary);
}

[data-theme="dark"] .card-subtitle {
    color: var(--tc-text-secondary);
}

/* Override hardcoded bg-white in cards */
[data-theme="dark"] .card-header.bg-white,
[data-theme="dark"] .bg-white {
    background-color: var(--tc-bg-surface) !important;
}


/* ============================================================================
   ALERTS
   ============================================================================ */

[data-theme="dark"] .alert-primary {
    background-color: rgba(102, 126, 234, 0.2);
    border-color: rgba(102, 126, 234, 0.3);
    color: #8b9ff5;
}

[data-theme="dark"] .alert-secondary {
    background-color: rgba(108, 117, 125, 0.2);
    border-color: rgba(108, 117, 125, 0.3);
    color: #adb5bd;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(40, 167, 69, 0.2);
    border-color: rgba(40, 167, 69, 0.3);
    color: #6dd893;
}

[data-theme="dark"] .alert-danger {
    background-color: rgba(220, 53, 69, 0.2);
    border-color: rgba(220, 53, 69, 0.3);
    color: #f08080;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 193, 7, 0.2);
    border-color: rgba(255, 193, 7, 0.3);
    color: #ffd54f;
}

[data-theme="dark"] .alert-info {
    background-color: rgba(23, 162, 184, 0.2);
    border-color: rgba(23, 162, 184, 0.3);
    color: #5bc0de;
}

[data-theme="dark"] .alert-light {
    background-color: var(--tc-bg-surface-hover);
    border-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .alert-dark {
    background-color: var(--tc-bg-muted);
    border-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .alert a {
    color: inherit;
    text-decoration: underline;
}


/* ============================================================================
   BUTTONS
   ============================================================================ */

[data-theme="dark"] .btn-outline-primary {
    color: #8b9ff5;
    border-color: #8b9ff5;
}

[data-theme="dark"] .btn-outline-primary:hover {
    background-color: rgba(102, 126, 234, 0.2);
    color: #a3b3f7;
    border-color: #a3b3f7;
}

[data-theme="dark"] .btn-outline-secondary {
    color: #adb5bd;
    border-color: #6c757d;
}

[data-theme="dark"] .btn-outline-secondary:hover {
    background-color: rgba(108, 117, 125, 0.2);
    color: #c4c9ce;
    border-color: #adb5bd;
}

[data-theme="dark"] .btn-outline-success {
    color: #6dd893;
    border-color: #6dd893;
}

[data-theme="dark"] .btn-outline-success:hover {
    background-color: rgba(40, 167, 69, 0.2);
    color: #8fe4a9;
    border-color: #8fe4a9;
}

[data-theme="dark"] .btn-outline-danger {
    color: #f08080;
    border-color: #f08080;
}

[data-theme="dark"] .btn-outline-danger:hover {
    background-color: rgba(220, 53, 69, 0.2);
    color: #f5a0a0;
    border-color: #f5a0a0;
}

[data-theme="dark"] .btn-outline-warning {
    color: #ffd54f;
    border-color: #ffd54f;
}

[data-theme="dark"] .btn-outline-warning:hover {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffe082;
    border-color: #ffe082;
}

[data-theme="dark"] .btn-outline-info {
    color: #5bc0de;
    border-color: #5bc0de;
}

[data-theme="dark"] .btn-outline-info:hover {
    background-color: rgba(23, 162, 184, 0.2);
    color: #7dd0e8;
    border-color: #7dd0e8;
}

[data-theme="dark"] .btn-outline-light {
    color: var(--tc-text-secondary);
    border-color: var(--tc-border-color);
}

[data-theme="dark"] .btn-outline-light:hover {
    background-color: var(--tc-bg-surface-hover);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .btn-outline-dark {
    color: var(--tc-text-primary);
    border-color: var(--tc-text-secondary);
}

[data-theme="dark"] .btn-outline-dark:hover {
    background-color: var(--tc-text-secondary);
    color: var(--tc-bg-body);
}

[data-theme="dark"] .btn-light {
    background-color: var(--tc-bg-surface-hover);
    border-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .btn-light:hover {
    background-color: var(--tc-bg-surface-active);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .btn-link {
    color: var(--tc-text-link);
}

[data-theme="dark"] .btn-link:hover {
    color: var(--tc-text-link-hover);
}

[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}


/* ============================================================================
   FORMS
   ============================================================================ */

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: var(--tc-input-bg);
    color: var(--tc-input-text);
    border-color: var(--tc-input-border);
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: var(--tc-input-bg);
    color: var(--tc-input-text);
    border-color: var(--tc-input-focus-border);
}

[data-theme="dark"] .form-control::placeholder {
    color: var(--tc-input-placeholder);
}

[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-select:disabled,
[data-theme="dark"] .form-control[readonly] {
    background-color: var(--tc-input-disabled-bg);
    color: var(--tc-text-muted);
}

[data-theme="dark"] .input-group-text {
    background-color: var(--tc-bg-muted);
    border-color: var(--tc-input-border);
    color: var(--tc-text-secondary);
}

[data-theme="dark"] .form-label {
    color: var(--tc-text-primary);
}

[data-theme="dark"] .form-text {
    color: var(--tc-text-muted);
}

/* Checkboxes and Radios */
[data-theme="dark"] .form-check-input {
    background-color: var(--tc-input-bg);
    border-color: var(--tc-border-color);
}

[data-theme="dark"] .form-check-input:checked {
    background-color: var(--tc-primary);
    border-color: var(--tc-primary);
}

[data-theme="dark"] .form-check-label {
    color: var(--tc-text-primary);
}

/* Switches */
[data-theme="dark"] .form-switch .form-check-input {
    background-color: var(--tc-border-color);
}

[data-theme="dark"] .form-switch .form-check-input:checked {
    background-color: var(--tc-primary);
}

/* Range */
[data-theme="dark"] .form-range::-webkit-slider-runnable-track {
    background-color: var(--tc-border-color);
}

[data-theme="dark"] .form-range::-webkit-slider-thumb {
    background-color: var(--tc-primary);
}

/* Floating Labels */
[data-theme="dark"] .form-floating > .form-control,
[data-theme="dark"] .form-floating > .form-select {
    background-color: var(--tc-input-bg);
    color: var(--tc-input-text);
}

[data-theme="dark"] .form-floating > label {
    color: var(--tc-text-muted);
}

/* Validation States */
[data-theme="dark"] .is-valid {
    border-color: #6dd893 !important;
}

[data-theme="dark"] .is-invalid {
    border-color: #f08080 !important;
}

[data-theme="dark"] .valid-feedback {
    color: #6dd893;
}

[data-theme="dark"] .invalid-feedback {
    color: #f08080;
}


/* ============================================================================
   TABLES
   ============================================================================ */

[data-theme="dark"] .table {
    color: var(--tc-text-primary);
}

[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: var(--tc-table-bg);
    border-color: var(--tc-table-border);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .table > thead {
    background-color: var(--tc-table-header-bg);
}

[data-theme="dark"] .table > thead th {
    color: var(--tc-text-secondary);
}

[data-theme="dark"] .table-hover > tbody > tr:hover > * {
    background-color: var(--tc-table-row-hover);
}

[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--tc-table-stripe-bg);
}

[data-theme="dark"] .table-bordered {
    border-color: var(--tc-table-border);
}

/* Contextual Table Rows */
[data-theme="dark"] .table-primary {
    background-color: rgba(102, 126, 234, 0.2);
    color: #8b9ff5;
}

[data-theme="dark"] .table-success {
    background-color: rgba(40, 167, 69, 0.2);
    color: #6dd893;
}

[data-theme="dark"] .table-danger {
    background-color: rgba(220, 53, 69, 0.2);
    color: #f08080;
}

[data-theme="dark"] .table-warning {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffd54f;
}

[data-theme="dark"] .table-info {
    background-color: rgba(23, 162, 184, 0.2);
    color: #5bc0de;
}

[data-theme="dark"] .table-light {
    background-color: var(--tc-bg-surface-hover);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .table-dark {
    background-color: var(--tc-bg-muted);
    color: var(--tc-text-primary);
}


/* ============================================================================
   DROPDOWNS
   ============================================================================ */

[data-theme="dark"] .dropdown-menu {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
    box-shadow: var(--tc-shadow-md);
}

[data-theme="dark"] .dropdown-item {
    color: var(--tc-text-primary);
}

[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--tc-bg-surface-hover);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .dropdown-item.active,
[data-theme="dark"] .dropdown-item:active {
    background-color: var(--tc-primary);
    color: var(--tc-text-inverse);
}

[data-theme="dark"] .dropdown-divider {
    border-color: var(--tc-border-color);
}

[data-theme="dark"] .dropdown-header {
    color: var(--tc-text-muted);
}


/* ============================================================================
   MODALS
   ============================================================================ */

[data-theme="dark"] .modal-content {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
}

[data-theme="dark"] .modal-header {
    border-bottom-color: var(--tc-border-color);
}

[data-theme="dark"] .modal-footer {
    border-top-color: var(--tc-border-color);
}

[data-theme="dark"] .modal-title {
    color: var(--tc-text-primary);
}

[data-theme="dark"] .modal-backdrop {
    background-color: #000;
}


/* ============================================================================
   LIST GROUPS
   ============================================================================ */

[data-theme="dark"] .list-group-item {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .list-group-item:hover {
    background-color: var(--tc-bg-surface-hover);
}

[data-theme="dark"] .list-group-item-action:hover,
[data-theme="dark"] .list-group-item-action:focus {
    background-color: var(--tc-bg-surface-hover);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .list-group-item.active {
    background-color: var(--tc-primary);
    border-color: var(--tc-primary);
    color: var(--tc-text-inverse);
}

[data-theme="dark"] .list-group-item.disabled {
    background-color: var(--tc-bg-muted);
    color: var(--tc-text-muted);
}

/* Contextual List Groups */
[data-theme="dark"] .list-group-item-primary {
    background-color: rgba(102, 126, 234, 0.2);
    color: #8b9ff5;
}

[data-theme="dark"] .list-group-item-success {
    background-color: rgba(40, 167, 69, 0.2);
    color: #6dd893;
}

[data-theme="dark"] .list-group-item-danger {
    background-color: rgba(220, 53, 69, 0.2);
    color: #f08080;
}

[data-theme="dark"] .list-group-item-warning {
    background-color: rgba(255, 193, 7, 0.2);
    color: #ffd54f;
}

[data-theme="dark"] .list-group-item-info {
    background-color: rgba(23, 162, 184, 0.2);
    color: #5bc0de;
}

[data-theme="dark"] .list-group-item-light {
    background-color: var(--tc-bg-surface-hover);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .list-group-item-dark {
    background-color: var(--tc-bg-muted);
    color: var(--tc-text-primary);
}


/* ============================================================================
   PAGINATION
   ============================================================================ */

[data-theme="dark"] .page-link {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .page-link:hover {
    background-color: var(--tc-bg-surface-hover);
    border-color: var(--tc-border-dark);
    color: var(--tc-text-link);
}

[data-theme="dark"] .page-item.active .page-link {
    background-color: var(--tc-primary);
    border-color: var(--tc-primary);
}

[data-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--tc-bg-muted);
    border-color: var(--tc-border-color);
    color: var(--tc-text-muted);
}


/* ============================================================================
   NAV TABS & PILLS
   ============================================================================ */

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--tc-border-color);
}

[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--tc-text-secondary);
}

[data-theme="dark"] .nav-tabs .nav-link:hover {
    border-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color) var(--tc-border-color) var(--tc-bg-surface);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .nav-pills .nav-link {
    color: var(--tc-text-secondary);
}

[data-theme="dark"] .nav-pills .nav-link:hover {
    background-color: var(--tc-bg-surface-hover);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--tc-primary);
    color: var(--tc-text-inverse);
}


/* ============================================================================
   BREADCRUMBS
   ============================================================================ */

[data-theme="dark"] .breadcrumb-item a {
    color: var(--tc-text-link);
}

[data-theme="dark"] .breadcrumb-item a:hover {
    color: var(--tc-text-link-hover);
}

[data-theme="dark"] .breadcrumb-item.active {
    color: var(--tc-text-muted);
}

[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--tc-text-muted);
}


/* ============================================================================
   BADGES
   ============================================================================ */

[data-theme="dark"] .badge.bg-light {
    background-color: var(--tc-bg-surface-hover) !important;
    color: var(--tc-text-primary);
}

[data-theme="dark"] .badge.bg-dark {
    background-color: var(--tc-bg-muted) !important;
    color: var(--tc-text-primary);
}


/* ============================================================================
   ACCORDION
   ============================================================================ */

[data-theme="dark"] .accordion-item {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
}

[data-theme="dark"] .accordion-button {
    background-color: var(--tc-bg-surface);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    background-color: var(--tc-primary-light);
    color: #8b9ff5;
}

[data-theme="dark"] .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}

[data-theme="dark"] .accordion-button:focus {
    box-shadow: var(--tc-shadow-focus);
    border-color: var(--tc-primary);
}

[data-theme="dark"] .accordion-body {
    background-color: var(--tc-bg-surface);
}


/* ============================================================================
   PROGRESS BARS
   ============================================================================ */

[data-theme="dark"] .progress {
    background-color: var(--tc-bg-muted);
}


/* ============================================================================
   OFFCANVAS
   ============================================================================ */

[data-theme="dark"] .offcanvas {
    background-color: var(--tc-bg-surface);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .offcanvas-header {
    border-bottom-color: var(--tc-border-color);
}


/* ============================================================================
   TOASTS
   ============================================================================ */

[data-theme="dark"] .toast {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
}

[data-theme="dark"] .toast-header {
    background-color: var(--tc-bg-muted);
    border-bottom-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .toast-body {
    color: var(--tc-text-primary);
}


/* ============================================================================
   TOOLTIPS & POPOVERS
   ============================================================================ */

[data-theme="dark"] .tooltip-inner {
    background-color: var(--tc-bg-surface-active);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .bs-tooltip-top .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: var(--tc-bg-surface-active);
}

[data-theme="dark"] .bs-tooltip-end .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: var(--tc-bg-surface-active);
}

[data-theme="dark"] .bs-tooltip-bottom .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: var(--tc-bg-surface-active);
}

[data-theme="dark"] .bs-tooltip-start .tooltip-arrow::before,
[data-theme="dark"] .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: var(--tc-bg-surface-active);
}

[data-theme="dark"] .popover {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
}

[data-theme="dark"] .popover-header {
    background-color: var(--tc-bg-muted);
    border-bottom-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

[data-theme="dark"] .popover-body {
    color: var(--tc-text-primary);
}


/* ============================================================================
   FOOTER
   ============================================================================ */

[data-theme="dark"] footer {
    background-color: var(--tc-footer-bg) !important;
    border-top-color: var(--tc-footer-border);
}

[data-theme="dark"] footer.bg-light {
    background-color: var(--tc-bg-surface) !important;
}

[data-theme="dark"] footer a {
    color: var(--tc-text-link);
}

[data-theme="dark"] footer a:hover {
    color: var(--tc-text-link-hover);
}


/* ============================================================================
   TIPSCHAMPIONS CUSTOM COMPONENTS
   ============================================================================ */

/* Match Cards */
[data-theme="dark"] .match-card {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
}

/* Leaderboard */
[data-theme="dark"] .leaderboard-position {
    color: var(--tc-text-inverse);
}

/* Bet Status */
[data-theme="dark"] .bet-status.pending {
    background-color: var(--tc-warning);
}

[data-theme="dark"] .bet-status.won {
    background-color: var(--tc-success);
}

[data-theme="dark"] .bet-status.lost {
    background-color: var(--tc-danger);
}

/* Chat Messages */
[data-theme="dark"] .chat-message {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
}

[data-theme="dark"] .chat-message.own-message {
    background-color: rgba(102, 126, 234, 0.15);
    border-color: rgba(102, 126, 234, 0.3);
}

[data-theme="dark"] .chat-input {
    background-color: var(--tc-bg-surface-hover);
    border-color: var(--tc-border-color);
    color: var(--tc-text-primary);
}

/* Odds Display */
[data-theme="dark"] .odds-box {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
}

[data-theme="dark"] .odds-box:hover {
    background-color: var(--tc-bg-surface-hover);
    border-color: var(--tc-primary);
}

[data-theme="dark"] .odds-box.selected {
    background-color: rgba(102, 126, 234, 0.2);
    border-color: var(--tc-primary);
}

[data-theme="dark"] .odds-value {
    color: var(--tc-primary);
}

/* Group Invite Cards */
[data-theme="dark"] .invite-card {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
}

[data-theme="dark"] .invite-code {
    background-color: var(--tc-bg-muted);
    color: var(--tc-primary);
    border: 1px dashed var(--tc-border-color);
}

/* Activity Feed */
[data-theme="dark"] .activity-item {
    border-bottom-color: var(--tc-border-color);
}

[data-theme="dark"] .activity-icon {
    background-color: var(--tc-bg-surface-hover);
}

[data-theme="dark"] .activity-time {
    color: var(--tc-text-muted);
}

/* Tournament Cards */
[data-theme="dark"] .tournament-card {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
}


/* ============================================================================
   NOTIFICATION DROPDOWN
   ============================================================================ */

[data-theme="dark"] .notification-dropdown-menu {
    background-color: var(--tc-bg-surface);
    border-color: var(--tc-border-color);
}


/* ============================================================================
   UTILITY OVERRIDES
   ============================================================================ */

[data-theme="dark"] .bg-light {
    background-color: var(--tc-bg-surface) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--tc-bg-surface) !important;
}

[data-theme="dark"] .bg-body {
    background-color: var(--tc-bg-body) !important;
}

[data-theme="dark"] .text-dark {
    color: var(--tc-text-primary) !important;
}

[data-theme="dark"] .text-body {
    color: var(--tc-text-primary) !important;
}

[data-theme="dark"] .border-light {
    border-color: var(--tc-border-color) !important;
}


/* ============================================================================
   END OF DARK THEME
   ============================================================================ */