/**
 * Theme System - Dark/Light Mode
 * Toggle between dark and light themes
 */

/* ============================================
   CSS VARIABLES - LIGHT THEME (DEFAULT)
   ============================================ */
:root {
    /* Light Theme Colors */
    --bg-primary: #f5f7ff;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-input: #f8f9fa;
    --text-primary: #1a1a2e;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --border-color: #e2e8f0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --accent-color: #f59e0b;
    --accent-hover: #d97706;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #3b82f6;
    
    /* Header/Navigation */
    --header-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --header-text: #ffffff;
    --nav-link: rgba(255, 255, 255, 0.85);
    --nav-link-hover: #f59e0b;
    
    /* Cards & Components */
    --card-bg: #ffffff;
    --card-border: #e2e8f0;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    
    /* Result Cards */
    --result-bg: #ffffff;
    --result-header-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    --result-number-bg: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --result-number-text: #1a1a2e;
    
    /* Prize rows */
    --prize-row-bg: #f8f9fa;
    --prize-row-hover: #e9ecef;
    --prize-label-color: #4a5568;
    --prize-value-color: #1a1a2e;
    
    /* Footer */
    --footer-bg: #1a1a2e;
    --footer-text: #e2e8f0;
    
    /* Scrollbar */
    --scrollbar-bg: #e2e8f0;
    --scrollbar-thumb: #94a3b8;
}

/* ============================================
   DARK THEME
   ============================================ */
[data-theme="dark"] {
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-card: #1e1e32;
    --bg-input: #252540;
    --text-primary: #e2e8f0;
    --text-secondary: #a0aec0;
    --text-muted: #718096;
    --border-color: #2d2d4a;
    --shadow-color: rgba(0, 0, 0, 0.5);
    
    /* Header/Navigation - slightly different for dark */
    --header-bg: linear-gradient(135deg, #0a0a14 0%, #12121f 100%);
    
    /* Cards */
    --card-bg: #1e1e32;
    --card-border: #2d2d4a;
    --card-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    
    /* Result Cards */
    --result-bg: #1e1e32;
    --result-header-bg: linear-gradient(135deg, #0a0a14 0%, #12121f 100%);
    
    /* Prize rows - DARK */
    --prize-row-bg: #252540;
    --prize-row-hover: #2d2d4a;
    --prize-label-color: #a0aec0;
    --prize-value-color: #f59e0b;
    
    /* Footer */
    --footer-bg: #0a0a14;
    
    /* Scrollbar */
    --scrollbar-bg: #1a1a2e;
    --scrollbar-thumb: #3d3d5c;
}

/* ============================================
   FORCE DARK BACKGROUNDS ON ALL SECTIONS
   ============================================ */
[data-theme="dark"],
[data-theme="dark"] body {
    background-color: #0f0f1a !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .bg-light,
[data-theme="dark"] [class*="bg-light"] {
    background-color: #1a1a2e !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] [class*="bg-white"] {
    background-color: #1e1e32 !important;
}

[data-theme="dark"] section,
[data-theme="dark"] main,
[data-theme="dark"] article {
    background-color: #0f0f1a !important;
}

[data-theme="dark"] section.bg-light,
[data-theme="dark"] section[class*="bg-light"],
[data-theme="dark"] div.bg-light {
    background-color: #1a1a2e !important;
}

/* Container and wrappers */
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] .container-lg,
[data-theme="dark"] .container-md,
[data-theme="dark"] .container-sm,
[data-theme="dark"] .container-xl,
[data-theme="dark"] .container-xxl {
    background-color: transparent !important;
}

/* Row backgrounds that might be white */
[data-theme="dark"] .row {
    background-color: transparent !important;
}

/* ============================================
   SPECIFIC SECTIONS DARK MODE
   ============================================ */
/* Popular Markets Section */
[data-theme="dark"] .popular-markets,
[data-theme="dark"] section.popular-markets {
    background-color: #1a1a2e !important;
}

[data-theme="dark"] .popular-markets .market-card,
[data-theme="dark"] .market-card.bg-white {
    background-color: #1e1e32 !important;
    border: 1px solid #2d2d4a !important;
}

[data-theme="dark"] .popular-markets .market-card-body {
    background-color: #1e1e32 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .popular-markets .market-card-body li {
    color: #a0aec0 !important;
}

[data-theme="dark"] .popular-markets .market-card-body strong {
    color: #e2e8f0 !important;
}

/* Schedule Section */
[data-theme="dark"] .schedule-section {
    background-color: #0f0f1a !important;
}

[data-theme="dark"] .schedule-table-wrapper {
    background-color: #1e1e32 !important;
}

[data-theme="dark"] .schedule-table {
    background-color: #1e1e32 !important;
}

[data-theme="dark"] .schedule-table tbody tr {
    background-color: #1e1e32 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .schedule-table tbody tr:hover {
    background-color: #252540 !important;
}

/* Analysis Section */
[data-theme="dark"] .analysis-section,
[data-theme="dark"] section.analysis-section,
[data-theme="dark"] #analysis {
    background-color: #1a1a2e !important;
}

[data-theme="dark"] .analysis-card,
[data-theme="dark"] div.analysis-card {
    background-color: #1e1e32 !important;
    border: 1px solid #2d2d4a !important;
    color: #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .analysis-card h3,
[data-theme="dark"] .analysis-card .h3 {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .pattern-label,
[data-theme="dark"] .pattern-item .pattern-label {
    color: #a0aec0 !important;
}

[data-theme="dark"] .pattern-chart,
[data-theme="dark"] .pattern-item .pattern-chart {
    background-color: #252540 !important;
    border: 1px solid #2d2d4a;
}

[data-theme="dark"] .chart-value {
    color: #e2e8f0 !important;
}

[data-theme="dark"] .number-frequency {
    color: #e2e8f0;
}

[data-theme="dark"] .freq-item {
    color: #a0aec0 !important;
}

/* History Section */
[data-theme="dark"] .history-section,
[data-theme="dark"] section.history-section,
[data-theme="dark"] #history {
    background-color: #0f0f1a !important;
}

[data-theme="dark"] .history-search,
[data-theme="dark"] .history-search.bg-light {
    background-color: #1e1e32 !important;
    border: 1px solid #2d2d4a !important;
}

[data-theme="dark"] .history-table {
    background-color: #1e1e32 !important;
}

[data-theme="dark"] .history-table tbody tr {
    background-color: #1e1e32 !important;
    color: #e2e8f0 !important;
}

/* Intro Section */
[data-theme="dark"] .intro-section,
[data-theme="dark"] section.intro-section {
    background-color: #0f0f1a !important;
}

[data-theme="dark"] .intro-section p,
[data-theme="dark"] .intro-section .lead {
    color: #a0aec0 !important;
}

/* Live Results Section */
[data-theme="dark"] .live-results-section,
[data-theme="dark"] section.live-results-section,
[data-theme="dark"] #hasil-togel {
    background-color: #0f0f1a !important;
}

/* Result tabs */
[data-theme="dark"] .result-tabs .nav-link {
    color: #a0aec0 !important;
    background-color: transparent !important;
}

[data-theme="dark"] .result-tabs .nav-link.active {
    color: #f59e0b !important;
    border-color: #f59e0b !important;
    background-color: #1e1e32 !important;
}

/* Freshness info */
[data-theme="dark"] .freshness-info {
    color: #718096 !important;
}

/* Schedule section */
[data-theme="dark"] .schedule-section,
[data-theme="dark"] section.schedule-section,
[data-theme="dark"] #schedule {
    background-color: #0f0f1a !important;
}

/* ============================================
   HEADINGS - H1, H2, H3, H4, H5, 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,
[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: #e2e8f0 !important;
}

[data-theme="dark"] .section-title,
[data-theme="dark"] .section-header h2 {
    color: #ffffff !important;
}

[data-theme="dark"] .section-subtitle,
[data-theme="dark"] .section-header p {
    color: #a0aec0 !important;
}

/* ============================================
   PARAGRAPHS AND TEXT
   ============================================ */
[data-theme="dark"] p {
    color: #a0aec0 !important;
}

[data-theme="dark"] .text-muted {
    color: #718096 !important;
}

[data-theme="dark"] .text-dark {
    color: #e2e8f0 !important;
}

[data-theme="dark"] label {
    color: #e2e8f0 !important;
}

[data-theme="dark"] strong {
    color: #e2e8f0 !important;
}

/* ============================================
   THEME TOGGLE BUTTON
   ============================================ */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 50px;
    cursor: pointer;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
}

.theme-toggle:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 15px var(--shadow-color);
}

.theme-toggle-icon {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.theme-toggle-text {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-primary);
}

/* Sun icon for dark mode, Moon for light mode */
[data-theme="dark"] .theme-toggle .sun-icon {
    display: inline;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: inline;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .theme-toggle {
        bottom: 80px;
        left: 10px;
        padding: 8px 12px;
    }
    
    .theme-toggle-text {
        display: none;
    }
}

/* ============================================
   APPLY THEME TO ELEMENTS
   ============================================ */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Main container background */
.container, .container-fluid {
    background-color: transparent;
}

/* ============================================
   CARDS - RESULT CARDS
   ============================================ */
.card, .result-card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    box-shadow: var(--card-shadow) !important;
    color: var(--text-primary);
}

.card-body {
    background-color: var(--card-bg) !important;
    color: var(--text-primary);
}

.card-header {
    background-color: var(--bg-secondary) !important;
    border-color: var(--card-border) !important;
    color: var(--text-primary);
}

.card-footer {
    background-color: var(--bg-secondary) !important;
    border-color: var(--card-border) !important;
}

/* ============================================
   PRIZE ROWS - IMPORTANT FOR DARK MODE
   ============================================ */
.prize-row {
    background-color: var(--prize-row-bg) !important;
    color: var(--text-primary);
}

.prize-row:hover {
    background-color: var(--prize-row-hover) !important;
}

.prize-label {
    color: var(--prize-label-color) !important;
}

.prize-value {
    color: var(--prize-value-color) !important;
}

/* Prize details container */
.prize-details {
    background-color: var(--card-bg);
}

/* ============================================
   MARKET NAME & HEADERS
   ============================================ */
.market-name, .result-card h5, .result-card .card-title {
    color: var(--text-primary) !important;
}

.market-time, .result-time {
    color: var(--text-secondary) !important;
}

/* ============================================
   BOOTSTRAP OVERRIDES FOR DARK MODE
   ============================================ */
[data-theme="dark"] .bg-white {
    background-color: var(--card-bg) !important;
}

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

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

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

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

/* Alert boxes */
[data-theme="dark"] .alert-info {
    background-color: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

[data-theme="dark"] .alert-success {
    background-color: rgba(16, 185, 129, 0.15);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

/* ============================================
   SPECIFIC TOGEL ELEMENTS
   ============================================ */
/* Latest badge */
.badge-terbaru, .badge.bg-warning {
    background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%) !important;
    color: #1a1a2e !important;
}

/* Result section backgrounds */
[data-theme="dark"] .results-container,
[data-theme="dark"] #resultsContainer,
[data-theme="dark"] .results-grid {
    background-color: var(--bg-primary);
}

/* ============================================
   RESULT CARD - FULL DARK MODE SUPPORT
   ============================================ */
[data-theme="dark"] .result-card {
    background-color: #1e1e32 !important;
    border: 1px solid #2d2d4a !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .result-card .result-header {
    background: linear-gradient(135deg, #252540 0%, #1a1a2e 100%) !important;
    border-bottom: 1px solid #2d2d4a;
}

[data-theme="dark"] .result-card .country-name,
[data-theme="dark"] .result-card h3,
[data-theme="dark"] .result-card h5 {
    color: #ffffff !important;
}

[data-theme="dark"] .result-card .draw-date,
[data-theme="dark"] .result-card .draw-info {
    color: #a0aec0 !important;
}

[data-theme="dark"] .result-card .result-body {
    background-color: #1e1e32 !important;
}

[data-theme="dark"] .result-card .prize-details {
    background-color: #1e1e32 !important;
}

[data-theme="dark"] .result-card .prize-row {
    background-color: #252540 !important;
    border: 1px solid #2d2d4a;
}

[data-theme="dark"] .result-card .prize-row:hover {
    background-color: #2d2d4a !important;
}

[data-theme="dark"] .result-card .prize-label {
    color: #a0aec0 !important;
}

[data-theme="dark"] .result-card .prize-value {
    color: #f59e0b !important;
    font-weight: 600;
}

[data-theme="dark"] .result-card .result-footer {
    background-color: #1a1a2e !important;
    border-top: 1px solid #2d2d4a;
}

[data-theme="dark"] .result-card .btn-details {
    background-color: #252540 !important;
    border-color: #2d2d4a !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .result-card .btn-details:hover {
    background-color: #2d2d4a !important;
    color: #f59e0b !important;
}

/* Market card body */
[data-theme="dark"] .market-card-body {
    background-color: #1e1e32 !important;
}

/* Section headers */
[data-theme="dark"] .section-title,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
    color: #e2e8f0 !important;
}

/* Info text */
[data-theme="dark"] p,
[data-theme="dark"] span {
    color: #a0aec0;
}

[data-theme="dark"] a:not(.btn):not(.nav-link) {
    color: #f59e0b;
}

[data-theme="dark"] a:not(.btn):not(.nav-link):hover {
    color: #fbbf24;
}

/* Modal dialogs */
[data-theme="dark"] .modal-content {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

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

/* Dropdown menus */
[data-theme="dark"] .dropdown-menu {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

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

[data-theme="dark"] .dropdown-item:hover {
    background-color: var(--bg-secondary);
}

/* List groups */
[data-theme="dark"] .list-group-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
    color: var(--text-primary);
}

/* Tabs and nav pills */
[data-theme="dark"] .nav-tabs .nav-link {
    color: var(--text-secondary);
}

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

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

[data-theme="dark"] .nav-pills .nav-link.active {
    background-color: var(--accent-color);
    color: #1a1a2e;
}

.navbar, .header {
    background: var(--header-bg);
}

.footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
}

/* Form elements */
input, select, textarea {
    background-color: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2) !important;
}

/* Placeholder text */
::placeholder {
    color: var(--text-muted) !important;
    opacity: 1;
}

/* Buttons */
[data-theme="dark"] .btn-light {
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}

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

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

/* ============================================
   LIST ITEMS - UL, LI
   ============================================ */
[data-theme="dark"] ul,
[data-theme="dark"] ol {
    color: #a0aec0;
}

[data-theme="dark"] li {
    color: #a0aec0 !important;
}

[data-theme="dark"] .list-unstyled li {
    color: #a0aec0 !important;
}

/* ============================================
   BOOTSTRAP CARD OVERRIDES
   ============================================ */
[data-theme="dark"] .card {
    background-color: #1e1e32 !important;
    border-color: #2d2d4a !important;
}

[data-theme="dark"] .card-body {
    background-color: #1e1e32 !important;
}

[data-theme="dark"] .card-header {
    background-color: #252540 !important;
    border-color: #2d2d4a !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .card-footer {
    background-color: #252540 !important;
    border-color: #2d2d4a !important;
}

[data-theme="dark"] .shadow-sm {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .rounded {
    border: 1px solid #2d2d4a !important;
}

/* ============================================
   FORM CONTROLS IN DARK MODE
   ============================================ */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
    background-color: #252540 !important;
    border-color: #2d2d4a !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
    background-color: #2d2d4a !important;
    border-color: #f59e0b !important;
    color: #e2e8f0 !important;
    box-shadow: 0 0 0 0.25rem rgba(245, 158, 11, 0.25) !important;
}

[data-theme="dark"] .form-label {
    color: #e2e8f0 !important;
}

/* Tables */
.table {
    color: var(--text-primary);
}

.table thead th {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

.table td, .table th {
    border-color: var(--border-color) !important;
    color: var(--text-primary);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .table {
    background-color: #1e1e32 !important;
    color: #e2e8f0 !important;
}

[data-theme="dark"] .table tbody {
    background-color: #1e1e32 !important;
}

[data-theme="dark"] .table tbody tr {
    background-color: #1e1e32 !important;
}

[data-theme="dark"] .table tbody td {
    background-color: #1e1e32 !important;
    color: #e2e8f0 !important;
    border-color: #2d2d4a !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: #252540 !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) td {
    background-color: #252540 !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(even) {
    background-color: #1e1e32 !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: #2d2d4a !important;
}

[data-theme="dark"] .table-hover tbody tr:hover td {
    background-color: #2d2d4a !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}

/* ============================================
   COPY BUTTON STYLES
   ============================================ */
.copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.copy-btn:hover {
    background: var(--accent-color);
    color: var(--text-primary);
    border-color: var(--accent-color);
}

.copy-btn.copied {
    background: var(--success-color);
    color: white;
    border-color: var(--success-color);
}

.copy-btn i {
    font-size: 0.85rem;
}

/* Copy tooltip */
.copy-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: var(--text-primary);
    color: var(--bg-primary);
    font-size: 0.7rem;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.copy-btn:hover .copy-tooltip,
.copy-btn.copied .copy-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: calc(100% + 5px);
}

/* Result number with copy */
.result-number-container {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.result-copy-all {
    margin-top: 8px;
}