:root {
    --bg-main: #f4f6f8;
    --bg-panel: #ffffff;
    --text-main: #333333;
    --text-muted: #888888;
    --border-color: #e5e5e5;
    --accent: #F2A900;
    --sidebar-bg: #ffffff;
    --sidebar-text: #444444;
    --sidebar-active: #f0f0f0;
}

[data-theme="dark"] {
    --bg-main: #121419;
    --bg-panel: #1e2025;
    --text-main: #e0e0e0;
    --text-muted: #8a8d91;
    --border-color: #2c2f36;
    --sidebar-bg: #181a1f;
    --sidebar-text: #8a8d91;
    --sidebar-active: #121419;
}

/* =========================================
   1. GLOBALE RESETS & GRUNDFARBEN
   ========================================= */
*, a:focus, a:active, button:focus, button:active, input:focus, select:focus { 
    outline: none !important; box-shadow: none !important; 
}
body { background-color: var(--bg-main); color: var(--text-main); font-family: Arial, sans-serif; }
a { color: var(--accent); text-decoration: none; } 
a:hover { color: #d19200; }

/* =========================================
   2. SEITEN-STRUKTUR & SIDEBAR
   ========================================= */
   /* Versteckt den Hamburger-Button auf dem Desktop-PC! */
#wrapper .nav-side-menu .toggle-btn {
    display: none !important;
}
#page-wrapper { margin-left: 250px; margin-top: 60px; padding: 25px; }

.nav-side-menu { 
    background-color: var(--sidebar-bg); position: fixed; top: 0; left: 0; 
    width: 250px; height: 100%; color: var(--sidebar-text); z-index: 1000; 
    border-right: 1px solid var(--border-color); 
}
.nav-side-menu .brand { 
    background-color: var(--sidebar-active); height: 60px; line-height: 59px; 
    text-align: center; font-size: 18px; font-weight: bold; border-bottom: 1px solid var(--border-color); 
}
.nav-side-menu .brand a { color: var(--text-main) !important; text-decoration: none !important; }
.nav-side-menu ul { list-style: none; padding: 0; margin: 0; }
.nav-side-menu li { padding: 0 !important; margin: 0 !important; border: none !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; cursor: pointer; }
.nav-side-menu li a { color: var(--sidebar-text); display: block !important; width: 100% !important; padding: 15px !important; box-sizing: border-box !important; border-left: 3px solid transparent !important; text-decoration: none !important; }
.nav-side-menu li a i { margin-right: 10px; width: 20px; text-align: center; color: var(--accent); }

/* Sidebar Aktive Elemente (Gold & Immun) */
#wrapper .nav-side-menu li:hover, #wrapper .nav-side-menu li:focus, #wrapper .nav-side-menu li:active, 
#wrapper .nav-side-menu li a:hover, #wrapper .nav-side-menu li a:focus, #wrapper .nav-side-menu li a:active, 
#wrapper .nav-side-menu li.active {
    background-color: rgba(242, 169, 0, 0.1) !important; background-image: none !important;
}
#wrapper .nav-side-menu li.active { border-left: 3px solid var(--accent) !important; }
#wrapper .nav-side-menu li.active a, #wrapper .nav-side-menu li.active a i, #wrapper .nav-side-menu li.active a span,
#wrapper .nav-side-menu li a.active, #wrapper .nav-side-menu li a.active i, #wrapper .nav-side-menu li a.active span,
#wrapper .nav-side-menu li:hover a, #wrapper .nav-side-menu li:hover a i, #wrapper .nav-side-menu li:hover a span { 
    color: var(--accent) !important; 
}

/* =========================================
   3. TOP-BAR & STATS (Oben Rechts)
   ========================================= */
#top-bar { 
    position: fixed; top: 0; left: 250px; right: 0; background-color: var(--bg-panel); 
    border-bottom: 1px solid var(--border-color); height: 60px; display: flex; 
    justify-content: space-between; align-items: center; padding: 0 25px; z-index: 999; 
}
#top-bar span { color: var(--text-main); }
[data-theme="light"] #top-bar span { color: #333; }

/* Stats Updated Grün zwingen */
#wrapper #statsUpdated, #wrapper #statsUpdated *, #wrapper .text-success, #wrapper .text-success * { color: #28a745 !important; font-weight: bold; }

/* Dropdowns & Toggle */
#wrapper #top-bar select { background-color: #fff !important; color: #333 !important; border: 1px solid #ccc !important; padding: 4px; border-radius: 3px; }
[data-theme="dark"] #wrapper #top-bar select { background-color: #1e2025 !important; color: #e0e0e0 !important; border-color: #2c2f36 !important; }
#theme-toggle { background: transparent; border: 1px solid var(--border-color); color: inherit; border-radius: 4px; padding: 5px 10px; cursor: pointer; }
#theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* =========================================
   4. KÄSTEN, FORMS & INFO-BOXEN (Globales Design)
   ========================================= */
/* Zusammenfassung aller Kästen und Eingabefelder auf dunkles Design */
.card, .box, .panel, .panel-default, .well, .panel-body, .list-group-item, #wrapper .infoBox,
#page-wrapper .form-control, #page-wrapper input, #page-wrapper select, #page-wrapper .input-group-addon {
    background: var(--bg-panel) !important; color: var(--text-main) !important;
    border: 1px solid var(--border-color) !important; box-shadow: none !important; text-shadow: none !important;
}
.panel-heading, .panel-title { background: var(--bg-main) !important; color: var(--text-main) !important; border-bottom: 1px solid var(--border-color) !important; }
.stat-panel { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 20px; }
.stat-panel-header { background: rgba(0,0,0,0.03); padding: 12px 20px; font-weight: bold; border-bottom: 1px solid var(--border-color); color: var(--accent); }
.stat-row { display: flex; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--border-color); font-size: 13px; }
.stat-row:last-child { border-bottom: none; }
.stat-row span:first-child { color: var(--text-muted); }

/* Info-Boxen Details */
#wrapper .infoBox *, #wrapper pre code { text-shadow: none !important; background: transparent !important; }
#wrapper .infoBox .icon { color: var(--accent) !important; border-right: 1px solid var(--border-color) !important; }
#wrapper .infoBox .icon span, #wrapper .infoBox .icon i { color: var(--accent) !important; }
#wrapper .infoBox .text, #wrapper .infoBox .text span { color: var(--text-muted) !important; font-weight: bold !important; }
#wrapper .infoBox .value, #wrapper .infoBox .value span, #wrapper .infoBox .value strong { color: var(--text-main) !important; }

/* =========================================
   5. ALLE GOLDENEN BUTTONS (Zusammengefasst)
   ========================================= */
/* Bündelt Set, Load More, Lookup & See More in einen Befehl */
#wrapper #payoutSetButton, #wrapper button[id^="loadMore"], 
#wrapper .input-group-btn .btn, #wrapper .input-group-append .btn, 
#wrapper button#yourStatsButton, #wrapper #miningApps_rows .btn-default {
    background-color: var(--accent) !important; border-color: var(--accent) !important;
    color: #000000 !important; font-weight: bold !important;
    box-shadow: none !important; text-shadow: none !important; transition: all 0.2s ease-in-out;
}
#wrapper #payoutSetButton:hover, #wrapper button[id^="loadMore"]:hover, 
#wrapper .input-group-btn .btn:hover, #wrapper .input-group-append .btn:hover, 
#wrapper button#yourStatsButton:hover, #wrapper #miningApps_rows .btn-default:hover {
    background-color: #d19200 !important; border-color: #d19200 !important;
}
/* Icons in Buttons schwarz */
#wrapper #payoutSetButton i, #wrapper #payoutSetButton span,
#wrapper .input-group-btn .btn i, #wrapper .input-group-append .btn i, #wrapper button#yourStatsButton i { color: #000000 !important; }

/* Spezieller Download-Button (bleibt Grün) */
#wrapper #miningApps_rows .btn-success { background: #28a745 !important; border-color: #28a745 !important; color: #fff !important; font-weight: bold !important; }
#wrapper #miningApps_rows .btn-success:hover { background: #218838 !important; border-color: #1e7e34 !important; }

/* =========================================
   6. TABELLEN & LISTEN (Zebra-Muster Aus)
   ========================================= */
#wrapper table, #wrapper .table, #wrapper .table th, #wrapper .table td,
#wrapper .table-striped > tbody > tr, #wrapper .table-striped > tbody > tr > td {
    background-color: transparent !important; color: var(--text-main) !important; border-color: var(--border-color) !important;
}
#wrapper .table-hover > tbody > tr:hover td { background-color: rgba(242, 169, 0, 0.05) !important; }
#wrapper .table > thead > tr > th > a { color: var(--accent) !important; }

/* =========================================
   7. BLOCK-STATUS & FARBIGE ZEILEN
   ========================================= */
/* Pending */
#wrapper .table > tbody > tr.pending > td, #wrapper .table > tbody > tr.pending > th { color: var(--text-main) !important; }
#wrapper .table > tbody > tr.pending > td a { color: var(--accent) !important; }
/* Unlocked (Cyan) */
#wrapper .table > tbody > tr.unlocked > td, #wrapper .table > tbody > tr.unlocked > th { background-color: rgba(23, 180, 100, 0.15) !important; color: var(--text-main) !important; }
#wrapper .table > tbody > tr.unlocked > td a { color: var(--accent) !important; }
/* Orphaned (Rot) */
#wrapper .table > tbody > tr.orphaned > td, #wrapper .table > tbody > tr.orphaned > th { background-color: rgba(220, 53, 69, 0.15) !important; color: var(--text-main) !important; }
#wrapper .table > tbody > tr.orphaned > td a { color: var(--accent) !important; }

/* =========================================
   8. DIAGRAMME & SONSTIGES (Getting Started)
   ========================================= */
.poolChart { display: block !important; }
.chart-wrapper { height: 250px; padding: 15px; position: relative; }
#wrapper .chart-style { background-color: rgba(242, 169, 0, 0.4) !important; border-left-color: #F2A900 !important; width: 1px !important; }

/* Getting Started Code-Boxen */
#wrapper pre { background-color: var(--bg-main) !important; color: var(--text-main) !important; border: 1px solid var(--border-color) !important; border-radius: 4px !important; padding: 15px !important; }
#wrapper pre span { color: var(--accent) !important; font-weight: bold; }

/* Getting Started Text-Stats */
#wrapper .stats, #wrapper .stats span, #wrapper .stats u { color: var(--text-main) !important; text-decoration: none !important; }
#wrapper .stats div > span:first-of-type, #wrapper .stats i { color: var(--accent) !important; font-weight: bold !important; }

/* =========================================
   9. MOBILE ANPASSUNG (Hamburger-Menü)
   ========================================= */
@media (max-width: 991px) {
    /* 1. Hauptbereich zentrieren */
    #wrapper #page-wrapper { margin-left: 0 !important; margin-top: 0 !important; padding: 15px !important; }

    /* 2. Obere Info-Leiste reparieren */
    #wrapper #top-bar { 
        position: relative !important; left: 0 !important; height: auto !important; padding: 15px !important; 
        display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important;
    }

    #wrapper .nav-side-menu { position: relative !important; width: 100% !important; height: auto !important; z-index: 1000 !important; display: block !important; }

    /* 3. Der ECHTE Hamburger-Button im edlen Gold (Sichtbar machen!) */
    #wrapper .nav-side-menu .toggle-btn,
    #wrapper .nav-side-menu [data-toggle="collapse"] {
        display: block !important; /* Überschreibt das 'display: none' vom Desktop */
        cursor: pointer !important;
        position: absolute !important;
        right: 15px !important; 
        top: 10px !important;
        z-index: 1001 !important;
        padding: 5px 12px !important;
        background-color: var(--accent) !important;
        color: #000000 !important;
        border-radius: 4px !important;
        font-size: 24px !important;
        line-height: 1 !important;
    }

    #wrapper .nav-side-menu .brand { display: block !important; text-align: left !important; padding-left: 15px !important; }

    /* 4. Das einklappbare Menü */
    #wrapper .nav-side-menu .menu-list, #wrapper .nav-side-menu ul {
        display: block !important; background-color: var(--bg-panel) !important; border-bottom: none !important;
    }

    /* Diese beiden Befehle steuern das Auf- und Zuklappen durch Bootstrap! */
    #wrapper .nav-side-menu .menu-content.collapse { display: none !important; }
    #wrapper .nav-side-menu .menu-content.collapse.in { display: block !important; }

    #wrapper .nav-side-menu li { border-right: none !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; display: block !important; }
    #wrapper .nav-side-menu li a { display: block !important; padding: 15px !important; white-space: normal !important; }
    #wrapper .nav-side-menu li.active { border-left: 3px solid var(--accent) !important; border-bottom: 1px solid rgba(0,0,0,0.05) !important; }
    #wrapper .table-responsive { border: none !important; margin-bottom: 0 !important; }
}