/* =============================================================================
   DARK MODE STYLESHEET
   Organized by component type for easier maintenance
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CSS VARIABLES
   ----------------------------------------------------------------------------- */
:root.dark-mode {
    /* Base Colors */
    --bg-primary: #000000;
    --bg-secondary: #0f0f0f;
    --bg-tertiary: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #999999;
    --border-color: #2a2a2a;

    /* Accents */
    --accent-primary: #dc3545;
    --accent-secondary: #ff0000;

    /* Component Colors */
    --header-bg: #000000;
    --card-bg: #0f0f0f;
    --hover-bg: rgba(255, 255, 255, 0.05);
    --hover-accent: rgba(220, 53, 69, 0.2);
}

/* -----------------------------------------------------------------------------
   2. ANIMATIONS
   ----------------------------------------------------------------------------- */
@keyframes modernGradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.6;
    }
}

/* -----------------------------------------------------------------------------
   3. BODY & BACKGROUND
   ----------------------------------------------------------------------------- */
.dark-mode body {
    background: linear-gradient(135deg, #176abc 0%, #0a0a0a 20%, #1a0505 40%, #002a74 60%, #1a1a1a 80%, #000000 100%);
    background-size: 400% 400%;
    animation: modernGradientFlow 15s ease infinite;
    color: var(--text-primary);
    position: relative;
}

.dark-mode body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 30%, rgba(220, 53, 69, 0.015) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(220, 53, 69, 0.01) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.005) 0%, transparent 40%);
    pointer-events: none;
    z-index: -1;
}

.dark-mode body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(220, 53, 69, 0.08), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(255, 255, 255, 0.05), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(220, 53, 69, 0.05), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(255, 255, 255, 0.04), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(220, 53, 69, 0.06), transparent),
        radial-gradient(1px 1px at 33% 50%, rgba(255, 255, 255, 0.025), transparent);
    background-size: 200% 200%;
    animation: particleFloat 20s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
    opacity: 0.2;
}

.dark-mode .hero-background,
.dark-mode .sake-background-video {
    display: none !important;
}

/* -----------------------------------------------------------------------------
   4. HEADER & NAVIGATION
   ----------------------------------------------------------------------------- */
.dark-mode .header {
    background: linear-gradient(90deg, #000000 0%, #1a1a1a 100%);
    border: none;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.dark-mode .header .container {
    background-color: transparent;
    color: var(--text-primary);
}

.dark-mode .header-logo {
    content: url('/static/images/sake-logo-blk-min.png');
}

.dark-mode #headerNavDesktop .nav-link {
    color: var(--text-primary);
}

.dark-mode #headerNavDesktop .nav-link:hover {
    background-color: var(--hover-accent);
    color: var(--text-primary);
}

.dark-mode #headerNavDesktop .nav-link i {
    color: var(--text-primary);
}

.dark-mode .header-nav:not(#headerNavDesktop) {
    background-color: rgba(0, 0, 0, 0.98) !important;
    backdrop-filter: blur(15px);
}

/* -----------------------------------------------------------------------------
   5. SEARCH
   ----------------------------------------------------------------------------- */
.dark-mode .search-container .form-control {
    background: rgba(15, 15, 15, 0.9);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.dark-mode .search-container .form-control:focus {
    background: rgba(26, 26, 26, 0.95);
    border-color: var(--accent-primary);
}

.dark-mode .search-container .form-control::placeholder {
    color: #666666;
}

.dark-mode .search-results-dropdown {
    background: rgba(15, 15, 15, 0.98);
    border-color: var(--border-color);
    backdrop-filter: blur(15px);
}

.dark-mode .search-result-section {
    background: rgba(15, 15, 15, 0.95);
    border-color: var(--border-color);
}

.dark-mode .search-result-item {
    background: rgba(26, 26, 26, 0.9);
}

.dark-mode .search-result-item:hover {
    background-color: var(--hover-accent);
}

.dark-mode .search-result-title {
    color: var(--text-primary);
}

.dark-mode .search-result-subtitle {
    color: var(--text-secondary);
}

.dark-mode .search-result-meta {
    color: var(--text-muted);
}

/* -----------------------------------------------------------------------------
   6. CARDS & CONTAINERS
   ----------------------------------------------------------------------------- */
.dark-mode .main-content-container {
    background: linear-gradient(92deg, #000000 0%, #1a1a1a 100%);
    border: 3px solid #000000;
    backdrop-filter: blur(10px);
    box-shadow: -1px -5px 20px 13px rgb(34 3 3 / 60%);
}

.dark-mode .card {
    background-color: rgba(15, 15, 15, 0.95);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.dark-mode .dashboard-widget,
.dark-mode .top-tokens-container,
.dark-mode .heatmap-widget,
.dark-mode .geisha-widget,
.dark-mode .predictions-widget,
.dark-mode .all-predictions-widget,
.dark-mode .players-widget,
.dark-mode .dominance-widget,
.dark-mode .volume-analysis-widget,
.dark-mode .trending-narratives-widget {
    background: rgba(15, 15, 15, 0.95);
    border-color: var(--border-color);
}

.dark-mode .feature,
.dark-mode .stat {
    background-color: rgba(15, 15, 15, 0.95);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
}

/* -----------------------------------------------------------------------------
   7. TABS & NAVIGATION
   ----------------------------------------------------------------------------- */
.dark-mode .custom-tabs .nav-link {
    background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
    color: var(--text-secondary);
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.dark-mode .custom-tabs .nav-link:hover {
    background-color: rgba(26, 26, 26, 0.95);
    color: var(--text-primary);
}

.dark-mode .custom-tabs .nav-link.active {
    background-color: rgba(15, 15, 15, 0.98) !important;
    color: var(--accent-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* -----------------------------------------------------------------------------
   8. BUTTONS
   ----------------------------------------------------------------------------- */
.dark-mode .btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.dark-mode .btn-primary:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.dark-mode .btn-secondary {
    background-color: rgba(15, 15, 15, 0.9);
    border-color: var(--border-color);
    color: var(--text-primary);
}

.dark-mode .btn-secondary:hover {
    background-color: rgba(26, 26, 26, 0.95);
    border-color: #3f3f46;
}

.dark-mode .timeframe-btn,
.dark-mode .btn-outline-primary,
.dark-mode .btn-outline-secondary,
.dark-mode .btn-outline-success {
    background: rgba(26, 26, 26, 0.9);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.dark-mode .timeframe-btn:hover,
.dark-mode .btn-outline-primary:hover,
.dark-mode .btn-outline-secondary:hover,
.dark-mode .btn-outline-success:hover {
    background: var(--hover-accent);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.dark-mode .timeframe-btn.active,
.dark-mode .btn-outline-primary.active,
.dark-mode .btn-outline-secondary.active,
.dark-mode .btn-outline-success.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.dark-mode .buy-sake-btn,
.dark-mode .buy-sake-btn-token {
    background: linear-gradient(177deg, var(--accent-primary) 0%, #c82333 100%) !important;
    border-color: #bd2130 !important;
    color: var(--text-primary) !important;
}

.dark-mode .buy-sake-btn:hover,
.dark-mode .buy-sake-btn-token:hover {
    background: linear-gradient(177deg, #c82333 0%, var(--accent-primary) 100%) !important;
}

.dark-mode .x402-mini-btn {
    background: linear-gradient(135deg, #0fb9ff, #006fff);
    border-color: #1a3947;
}

.dark-mode .x402-mini-btn:hover {
    background: linear-gradient(135deg, #4FC3F7, #87CEEB);
}

/* -----------------------------------------------------------------------------
   9. TABLES
   ----------------------------------------------------------------------------- */
.dark-mode table {
    color: var(--text-primary);
}

.dark-mode table thead,
.dark-mode .table thead th {
    background-color: rgba(0, 0, 0, 0.95);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.dark-mode table tbody tr:hover,
.dark-mode .table tbody tr:hover td {
    background-color: rgba(220, 53, 69, 0.15);
}

.dark-mode .table tbody td {
    background-color: rgba(26, 26, 26, 0.8);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* -----------------------------------------------------------------------------
   10. CHARTS
   ----------------------------------------------------------------------------- */
.dark-mode .chart-container,
.dark-mode .narrative-chart2-wrapper,
.dark-mode .narrative-chart-canvas-container,
.dark-mode .macro-chart2-container,
.dark-mode .token-chart-card,
.dark-mode .token-chart-container,
.dark-mode .integrated-rsi-container,
.dark-mode .rsi-chart-container,
.dark-mode .prediction-chart-container,
.dark-mode .heatmap2-container,
.dark-mode .heatmap2-chart {
    background: rgba(15, 15, 15, 0.95) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .narrative-chart2-header,
.dark-mode .macro-chart2-header,
.dark-mode .token-chart-header,
.dark-mode .macro-chart2-info,
.dark-mode .token-chart-timeframe-buttons {
    background: rgba(0, 0, 0, 0.95) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.dark-mode .narrative-chart2-content,
.dark-mode .macro-chart2-canvas-container,
.dark-mode .token-chart-canvas-container {
    background: rgba(15, 15, 15, 0.95) !important;
}

.dark-mode .chart-container canvas,
.dark-mode canvas {
    background: transparent !important;
}

.dark-mode .heatmap2-header h3 {
    color: var(--text-primary) !important;
}

.dark-mode .heatmap2-narrative {
    stroke: var(--border-color) !important;
}

.dark-mode .heatmap2-narrative-link text {
    fill: var(--text-primary) !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
}

/* Sparkline Dark Mode Styling */
.dark-mode .prediction-chart-container {
    background-color: #0f0f0f !important;
}

/* Override prerendered SVG background rectangles - catch all variations */
.dark-mode .prediction-chart-container svg rect[fill="#f8f9fa"],
.dark-mode .prediction-chart-container svg rect[fill="rgb(248, 249, 250)"],
.dark-mode .prediction-chart-container svg rect[fill="rgb(248,249,250)"] {
    fill: #0f0f0f !important;
}

/* Override the first rect element in sparkline SVGs (usually the background) */
.dark-mode .prediction-chart-container svg > rect:first-of-type {
    fill: #0f0f0f !important;
}

/* Override canvas element background */
.dark-mode .prediction-chart-container canvas {
    background-color: #0f0f0f !important;
}

/* Override any SVG with light backgrounds */
.dark-mode .prediction-chart-container svg {
    background-color: #0f0f0f !important;
}

/* Fix grey area backgrounds in SVG charts - catch rgba variations */
.dark-mode .prediction-chart-container svg rect[fill*="rgba(240"],
.dark-mode .prediction-chart-container svg rect[fill*="rgba(245"],
.dark-mode .prediction-chart-container svg rect[fill*="rgba(250"],
.dark-mode .prediction-chart-container svg rect[fill*="rgb(240"],
.dark-mode .prediction-chart-container svg rect[fill*="rgb(245"],
.dark-mode .prediction-chart-container svg rect[fill*="rgb(250"] {
    fill: #0f0f0f !important;
}

/* Catch gradient backgrounds in sparklines */
.dark-mode .prediction-chart-container svg rect[fill^="url(#pastGrad)"] {
    fill: rgba(15, 15, 15, 0.5) !important;
}

/* Make NOW line more visible - change from black to white/light grey */
.dark-mode .prediction-chart-container svg line[stroke="#000"] {
    stroke: #ffffff !important;
    stroke-width: 2 !important;
}

/* Make NOW text more visible */
.dark-mode .prediction-chart-container svg text[fill="#000"] {
    fill: #ffffff !important;
}

/* Make PICK line more visible */
.dark-mode .prediction-chart-container svg line[stroke="#6c757d"] {
    stroke: #9ca3af !important;
}

/* Make PICK text more visible */
.dark-mode .prediction-chart-container svg text[fill="#333"] {
    fill: #e5e7eb !important;
}

/* -----------------------------------------------------------------------------
   11. WIDGETS & SPECIAL COMPONENTS
   ----------------------------------------------------------------------------- */

/* Dashboard Widgets */
.dark-mode .dashboard-widget-item:hover {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

/* Top Tokens */
.dark-mode .top-tokens-header {
    background: rgba(0, 0, 0, 0.95);
    border-bottom: 1px solid var(--border-color);
}

.dark-mode .top-tokens-list {
    background: transparent;
}

.dark-mode .token-list-item {
    background: rgba(26, 26, 26, 0.8);
    border-color: var(--border-color);
}

.dark-mode .token-list-item:hover {
    background: var(--hover-accent);
    border-color: rgba(220, 53, 69, 0.4);
}

/* Narratives */
.dark-mode .narratives-table-container,
.dark-mode .narrative-row {
    background-color: rgba(15, 15, 15, 0.95) !important;
}

.dark-mode .narrative-row:hover {
    background-color: rgba(220, 53, 69, 0.15) !important;
}

.dark-mode .narrative-masonry-container {
    background: linear-gradient(135deg, rgba(15, 15, 15, 0.9) 0%, rgba(0, 0, 0, 0.95) 100%);
}

/* Tournaments & Predictions */
.dark-mode .tournament-section {
    background: rgba(26, 26, 26, 0.9);
    border-color: var(--border-color);
}

.dark-mode .tournament-name {
    color: var(--text-primary);
}

.dark-mode .tournament-progress-bar {
    background-color: rgba(26, 26, 26, 0.9);
    border-color: var(--border-color);
}

.dark-mode .agent-pick-item {
    background: rgba(26, 26, 26, 0.9) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .agent-pick-item:hover {
    background: rgba(220, 53, 69, 0.15) !important;
}

.dark-mode .agent-link,
.dark-mode .token-link {
    color: var(--accent-primary);
}

.dark-mode .agent-link:hover,
.dark-mode .token-link:hover {
    color: #ff6b6b;
}

/* Players */
.dark-mode .player-item,
.dark-mode .player-card {
    background: rgba(26, 26, 26, 0.9) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode .player-item:hover,
.dark-mode .player-card:hover {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

.dark-mode .player-item .text-dark,
.dark-mode .player-card .text-dark {
    color: var(--text-primary) !important;
}

.dark-mode .player-item .text-secondary,
.dark-mode .player-card .text-secondary {
    color: var(--text-muted) !important;
}

.dark-mode .player-item .bg-light,
.dark-mode .player-card .bg-light {
    background-color: rgba(15, 15, 15, 0.95) !important;
}

.dark-mode .player-item .badge-secondary,
.dark-mode .player-card .badge-secondary {
    background-color: rgba(26, 26, 26, 0.9) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

/* Market Data Slider */
.dark-mode .active-trade-section,
.dark-mode .active-trade-container {
    background: transparent;
}

.dark-mode .trading-alert {
    background: rgba(26, 26, 26, 0.9) !important;
    border: 1px solid rgba(220, 53, 69, 0.2) !important;
    color: var(--text-primary) !important;
}

.dark-mode .trading-alert:hover {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
}

.dark-mode .market-icon {
    background: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid rgba(220, 53, 69, 0.2) !important;
}

.dark-mode .trading-progress {
    background-color: rgba(15, 15, 15, 0.95) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .trading-progress-bar {
    background-color: var(--accent-primary) !important;
}

/* Volume Analysis */
.dark-mode .volume-triple-container {
    background: transparent !important;
}

.dark-mode .triple-header,
.dark-mode .column-header {
    background: rgba(15, 15, 15, 0.95) !important;
}

.dark-mode .category-side,
.dark-mode .tokens-column {
    background: rgba(26, 26, 26, 0.9) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .side-title {
    color: var(--text-primary) !important;
}

.dark-mode .side-total {
    color: var(--accent-primary) !important;
}

.dark-mode .token-triple-row {
    background: rgba(15, 15, 15, 0.9) !important;
    border: 1px solid var(--border-color) !important;
}

.dark-mode .token-triple-row:hover {
    background: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.3) !important;
}

.dark-mode .volume-distribution-bar {
    background: rgba(26, 26, 26, 0.9) !important;
}

.dark-mode .volume-segment {
    opacity: 0.9;
}

.dark-mode .segment-label {
    color: var(--text-primary) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

.dark-mode .volume-stat {
    background: rgba(26, 26, 26, 0.9) !important;
    border: 1px solid var(--border-color) !important;
}

/* Trending Narratives */
.dark-mode .trends-label-vertical {
    color: var(--text-muted);
}

.dark-mode .trending-narratives-content {
    background: rgba(26, 26, 26, 0.8);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.dark-mode .narrative-bar {
    background-color: rgba(26, 26, 26, 0.9) !important;
    border: 1px solid rgba(220, 53, 69, 0.2) !important;
    color: var(--text-primary) !important;
}

.dark-mode .narrative-bar:hover {
    background-color: rgba(220, 53, 69, 0.15) !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3) !important;
}

.dark-mode .narrative-bar-icon {
    color: var(--accent-primary);
}

.dark-mode .narrative-bar-category {
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.3);
}

.dark-mode .narrative-bar-tokens {
    background: rgba(220, 53, 69, 0.2);
    color: var(--text-primary);
}

.dark-mode .trending-narratives-timeframes {
    background: rgba(26, 26, 26, 0.9);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.dark-mode .fixed-timeframe-label .badge {
    background: linear-gradient(135deg, var(--accent-primary) 0%, #c82333 100%);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.4);
}

/* -----------------------------------------------------------------------------
   12. FORMS & INPUTS
   ----------------------------------------------------------------------------- */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode textarea,
.dark-mode select {
    background-color: rgba(26, 26, 26, 0.9);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.dark-mode input[type="text"]:focus,
.dark-mode input[type="email"]:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    background-color: rgba(26, 26, 26, 0.95);
    border-color: var(--accent-primary);
}

/* -----------------------------------------------------------------------------
   13. MODALS & OVERLAYS
   ----------------------------------------------------------------------------- */
.dark-mode .lightweight-modal-content {
    background: rgba(15, 15, 15, 0.98);
    border-color: var(--border-color);
}

.dark-mode .lightweight-modal-header {
    background: rgba(0, 0, 0, 0.95);
    border-bottom-color: var(--border-color);
}

.dark-mode .lightweight-modal-title {
    color: var(--text-primary);
}

.dark-mode .lightweight-modal-body {
    background: rgba(15, 15, 15, 0.95);
    color: var(--text-secondary);
}

.dark-mode .lightweight-modal-footer {
    background: rgba(0, 0, 0, 0.95);
    border-top-color: var(--border-color);
}

/* -----------------------------------------------------------------------------
   14. BADGES & ALERTS
   ----------------------------------------------------------------------------- */
.dark-mode .badge {
    background-color: rgba(220, 53, 69, 0.2);
    color: var(--text-primary);
    border-color: var(--accent-primary);
}

.dark-mode .alert-info {
    background-color: rgba(13, 110, 253, 0.1);
    border-color: rgba(13, 110, 253, 0.3);
    color: var(--text-secondary);
}

.dark-mode .alert-success {
    background-color: rgba(25, 135, 84, 0.1);
    border-color: rgba(25, 135, 84, 0.3);
    color: var(--text-secondary);
}

.dark-mode .trading-alert .badge {
    background-color: rgba(220, 53, 69, 0.3) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(220, 53, 69, 0.4) !important;
}

.dark-mode .trading-alert .badge.bg-success {
    background-color: rgba(25, 135, 84, 0.3) !important;
    border-color: rgba(25, 135, 84, 0.4) !important;
}

.dark-mode .trading-alert .badge.bg-info {
    background-color: rgba(13, 110, 253, 0.3) !important;
    border-color: rgba(13, 110, 253, 0.4) !important;
}

.dark-mode .trading-alert .badge.bg-warning {
    background-color: rgba(255, 193, 7, 0.3) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
}

/* -----------------------------------------------------------------------------
   15. TYPOGRAPHY
   ----------------------------------------------------------------------------- */
.dark-mode h1, 
.dark-mode h2, 
.dark-mode h3, 
.dark-mode h4, 
.dark-mode h5, 
.dark-mode h6 {
    color: var(--text-primary);
}

.dark-mode .text-muted {
    color: var(--text-muted) !important;
}

.dark-mode .text-dark {
    color: var(--text-primary) !important;
}

.dark-mode .code-block {
    background: #1a1a1a !important;
    border: 1px solid var(--border-color);
}

/* -----------------------------------------------------------------------------
   16. FOOTER
   ----------------------------------------------------------------------------- */
.dark-mode #footer,
.dark-mode footer {
    background-color: rgba(0, 0, 0, 0.95) !important;
    color: var(--text-secondary) !important;
    border-color: var(--border-color) !important;
}

/* -----------------------------------------------------------------------------
   17. BREADCRUMBS
   ----------------------------------------------------------------------------- */
.dark-mode .breadcrumb-item {
    color: var(--text-secondary);
}

.dark-mode .breadcrumb-item.active {
    color: var(--text-primary);
}

/* -----------------------------------------------------------------------------
   18. SECTION HEADERS
   ----------------------------------------------------------------------------- */
.dark-mode .section-header {
    background-color: rgba(15, 15, 15, 0.95);
}

.dark-mode .header-black {
    background-color: rgba(0, 0, 0, 0.95);
}

.dark-mode .header-red {
    background-color: rgba(220, 53, 69, 0.9);
}

/* -----------------------------------------------------------------------------
   19. PLATFORM & SOCIAL ICONS
   ----------------------------------------------------------------------------- */
.dark-mode .platform-icon-link {
    background: rgba(26, 26, 26, 0.9) !important;
}

.dark-mode .platform-icon-link:hover {
    background: var(--hover-accent) !important;
}

/* -----------------------------------------------------------------------------
   20. SPECIAL ELEMENTS
   ----------------------------------------------------------------------------- */
.dark-mode .geisha-icon {
    display: none !important;
}

.dark-mode .sake-stand-overlay {
    display: block !important;
}

.dark-mode .sake-video-container {
    background: rgba(15, 15, 15, 0.95) !important;
}

.dark-mode .table-responsive {
    background: transparent !important;
}

.dark-mode .btc-centered-layout {
    background: rgba(26, 26, 26, 0.9) !important;
}

.dark-mode .font-monospace {
    color: #e9ecef;
}

.dark-mode .analytics-container {
    background: rgba(15, 15, 15, 0.95);
}

.dark-mode .analytics-item-box {
    background: rgba(26, 26, 26, 0.9);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.dark-mode .analytics-mini-header {
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.95) !important;
}

.dark-mode .analytics-data {
    color: var(--text-primary);
}

/* Token Profile */
.dark-mode .token-icon {
    background: rgba(26, 26, 26, 0.9);
    border: 1px solid rgba(220, 53, 69, 0.2);
}

.dark-mode .progress {
    background-color: rgba(26, 26, 26, 0.9);
}

.dark-mode .progress-bar {
    background-color: var(--accent-primary);
}

.dark-mode .token-description {
    color: var(--text-secondary);
}

.dark-mode .social-links-header .btn {
    background: rgba(26, 26, 26, 0.9);
    border-color: rgba(220, 53, 69, 0.2);
    color: var(--text-primary);
}

.dark-mode .social-links-header .btn:hover {
    background: var(--hover-accent);
    border-color: rgba(220, 53, 69, 0.4);
}

/* User Predictions Widget */
.dark-mode #tournamentPicksList {
    background: rgba(15, 15, 15, 0.95) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #tournamentPicksList .card-header {
    background: rgba(0, 0, 0, 0.95) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode #tournamentPicksList .card-body {
    background: rgba(15, 15, 15, 0.95) !important;
}

.dark-mode #tournamentPicksList .list-group-item {
    background: rgba(26, 26, 26, 0.9) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.dark-mode #tournamentPicksList .list-group-item:hover {
    background: rgba(220, 53, 69, 0.15) !important;
}

.dark-mode #tournamentPicksList .text-muted {
    color: var(--text-muted) !important;
}

/* RSI Chart Dark Mode */
.dark-mode .rsi-chart-canvas-container {
    background: rgba(15, 15, 15, 0.95) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .integrated-rsi-container {
    background: rgba(15, 15, 15, 0.95) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .rsi-chart-header {
    background: rgba(0, 0, 0, 0.95) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .rsi-chart-title {
    color: var(--text-primary) !important;
}

.dark-mode .rsi-chart-info {
    color: var(--text-muted) !important;
}

.dark-mode .rsi-zone-labels {
    color: var(--text-muted) !important;
}

.dark-mode .rsi-zone {
    background: rgba(26, 26, 26, 0.9) !important;
}

/* Card Headers */
.dark-mode .card-header.bg-primary {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%) !important;
    color: var(--text-primary) !important;
}

.dark-mode .card-header.bg-success {
    background: linear-gradient(135deg, #1a3a1a 0%, #2a4a2a 100%) !important;
    color: var(--text-primary) !important;
}

.dark-mode .card-header.bg-warning {
    background: linear-gradient(135deg, #3a2a1a 0%, #4a3a2a 100%) !important;
    color: var(--text-primary) !important;
}