/* ========================================
   DARK MODE - CLASS BASED
   Toggle-based dark mode with .dark-mode class
======================================== */

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6fa8dc, #4a90e2);
    border: 3px solid white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: all 0.3s ease;
    z-index: 9999;
    user-select: none;
}

.dark-mode-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

body.dark-mode .dark-mode-toggle {
    background: linear-gradient(135deg, #2d4a6d, #1f3a5f);
    border-color: #404040;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .dark-mode-toggle {
        width: 50px;
        height: 50px;
        bottom: 15px;
        right: 15px;
        font-size: 20px;
    }
}

/* Smooth transition for dark mode changes */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ========================================
   DARK MODE STYLES
======================================== */

/* Base Styles */
body.dark-mode {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
}

/* Header */
body.dark-mode header,
body.dark-mode .header {
    background: linear-gradient(135deg, #2d4a6d, #1f3a5f, #16293e) !important;
    color: #e0e0e0 !important;
}

body.dark-mode header h1,
body.dark-mode .header h1,
body.dark-mode header p,
body.dark-mode .header p {
    color: #e0e0e0 !important;
}

/* Navigation */
body.dark-mode .user-nav,
body.dark-mode .navigation {
    background: linear-gradient(90deg, #2a2a2a, #333333, #2a2a2a) !important;
    border-bottom-color: #404040 !important;
}

body.dark-mode .user-nav a,
body.dark-mode .navigation a {
    color: #6fa8dc !important;
}

body.dark-mode .user-nav a:hover,
body.dark-mode .navigation a:hover {
    color: #8fc0f0 !important;
    background-color: rgba(111, 168, 220, 0.15) !important;
}

/* Content Areas */
body.dark-mode .content {
    background-color: #1a1a1a !important;
}

body.dark-mode .main-content,
body.dark-mode .content-main {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode .sidebar,
body.dark-mode .content-sidebar,
body.dark-mode .content-sidebar-right {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode .sidebar h3 {
    color: #6fa8dc !important;
}

body.dark-mode .sidebar p {
    color: #d0d0d0 !important;
}

/* Buttons and Cards */
body.dark-mode .math-button {
    background-color: #2d2d2d !important;
    border-color: #404040 !important;
}

body.dark-mode .math-button a {
    color: #e0e0e0 !important;
}

body.dark-mode .math-button:hover {
    border-color: #6fa8dc !important;
}

body.dark-mode .math-button a:hover {
    background-color: #353535 !important;
    color: #6fa8dc !important;
}

/* Content Cards */
body.dark-mode .content-card {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border: 1px solid #404040 !important;
}

body.dark-mode .content-card h3 {
    color: #6fa8dc !important;
}

body.dark-mode .content-card p {
    color: #d0d0d0 !important;
}

body.dark-mode .content-link {
    background-color: #3a70b2 !important;
    color: #ffffff !important;
}

body.dark-mode .content-link:hover {
    background-color: #2d5a92 !important;
}

/* Themen Navigation */
body.dark-mode .thema-container {
    border-color: #404040 !important;
}

body.dark-mode .thema-header {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-left-color: #6fa8dc !important;
}

body.dark-mode .thema-header:hover {
    background: #353535 !important;
}

body.dark-mode .thema-header:active {
    background: #3d3d3d !important;
}

body.dark-mode .thema-header.no-arrow:hover {
    background: #2d2d2d !important;
}

body.dark-mode .thema-arrow {
    color: #6fa8dc !important;
}

body.dark-mode .unterthemen-container {
    background: #252525 !important;
}

body.dark-mode .unterthemen-list li {
    border-bottom-color: #404040 !important;
    color: #d0d0d0 !important;
}

body.dark-mode .unterthemen-list li:hover {
    background: #2d2d2d !important;
    color: #ffffff !important;
}

body.dark-mode .unterthemen-list li.active {
    background: #3a70b2 !important;
    color: #ffffff !important;
}

body.dark-mode .unterthema-id {
    color: #888 !important;
}

body.dark-mode .unterthemen-list li.active .unterthema-id {
    color: #c0d5ee !important;
}

/* Aufgaben Blocks */
body.dark-mode .aufgabe-block {
    background: linear-gradient(145deg, #2d2d2d, #252525) !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .frage-text h3 {
    color: #e0e0e0 !important;
}

body.dark-mode .frage-bild img {
    border-color: #555 !important;
}

body.dark-mode .frage-link .external-link {
    color: #6fa8dc !important;
}

body.dark-mode .frage-code pre {
    background-color: #1a1a1a !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .frage-iframe iframe {
    border-color: #404040 !important;
}

body.dark-mode .frage-default {
    background-color: #252525 !important;
    color: #e0e0e0 !important;
}

/* Forms */
body.dark-mode .login-box {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .login-box h2 {
    color: #6fa8dc !important;
}

body.dark-mode .info-text {
    background-color: #252525 !important;
    border-left-color: #6fa8dc !important;
    color: #d0d0d0 !important;
}

body.dark-mode .info-text li {
    color: #d0d0d0 !important;
}

body.dark-mode .form-group label {
    color: #e0e0e0 !important;
}

body.dark-mode .form-group input,
body.dark-mode .form-group select,
body.dark-mode .form-group textarea {
    background-color: #1a1a1a !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group select:focus,
body.dark-mode .form-group textarea:focus {
    border-color: #6fa8dc !important;
    background-color: #252525 !important;
}

body.dark-mode .form-group input.error-field,
body.dark-mode .form-group select.error-field {
    border-color: #dc3545 !important;
    background-color: #2a1a1d !important;
}

body.dark-mode .form-info {
    background-color: #252525 !important;
    color: #d0d0d0 !important;
}

body.dark-mode .password-toggle:hover {
    background-color: rgba(111, 168, 220, 0.2) !important;
}

/* Messages */
body.dark-mode .error-messages {
    background-color: #3d2226 !important;
    border-color: #6b2d35 !important;
}

body.dark-mode .error-messages .error-message {
    color: #f5a3ae !important;
}

body.dark-mode .error-message {
    background-color: #3d2226 !important;
    color: #f5a3ae !important;
    border-left-color: #dc3545 !important;
}

body.dark-mode .success-message {
    background-color: #1e3a28 !important;
    color: #90ee90 !important;
    border-left-color: #28a745 !important;
}

body.dark-mode .success-message a {
    color: #90ee90 !important;
}

body.dark-mode .logout-message {
    background-color: #1e3a28 !important;
    color: #90ee90 !important;
    border-left-color: #28a745 !important;
}

body.dark-mode .no-aufgaben {
    color: #888 !important;
}

/* Profile and User Info */
body.dark-mode .profile-box {
    background-color: #2d2d2d !important;
    border-left-color: #6fa8dc !important;
    color: #e0e0e0 !important;
}

body.dark-mode .profile-box p {
    color: #e0e0e0 !important;
}

/* Modals */
body.dark-mode .loesung-modal {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

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

body.dark-mode .loesung-modal-title {
    color: #6fa8dc !important;
}

body.dark-mode .loesung-modal-header {
    border-bottom-color: #6fa8dc !important;
}

body.dark-mode .loesung-close,
body.dark-mode .close {
    color: #888 !important;
}

body.dark-mode .loesung-close:hover,
body.dark-mode .loesung-close:focus,
body.dark-mode .close:hover {
    color: #e0e0e0 !important;
}

body.dark-mode .loesung-item {
    border-left-color: #28a745 !important;
    background-color: #252525 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .loesung-item h4 {
    color: #90ee90 !important;
}

body.dark-mode .loesung-bild img {
    border-color: #555 !important;
}

body.dark-mode .loesung-link a {
    color: #6fa8dc !important;
}

body.dark-mode .loesung-code {
    background-color: #1a1a1a !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

/* Footer */
body.dark-mode footer {
    background-color: #252525 !important;
    border-top-color: #404040 !important;
    color: #d0d0d0 !important;
}

body.dark-mode footer a {
    color: #6fa8dc !important;
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar-track {
    background: #1a1a1a !important;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #555 !important;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #666 !important;
}

/* User Type Selection */
body.dark-mode .user-type-button {
    background: linear-gradient(145deg, #2d2d2d, #252525) !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .user-type-button:hover {
    border-color: #6fa8dc !important;
    background: linear-gradient(145deg, #353535, #2d2d2d) !important;
}

body.dark-mode .user-type-button.schueler:hover {
    border-color: #28a745 !important;
    background: linear-gradient(145deg, #2d3d2f, #252a26) !important;
}

body.dark-mode .user-type-button.lehrer:hover {
    border-color: #dc3545 !important;
    background: linear-gradient(145deg, #3d2a2d, #2a2325) !important;
}

body.dark-mode .user-type-button h3 {
    color: #e0e0e0 !important;
}

body.dark-mode .user-type-button p {
    color: #d0d0d0 !important;
}

/* Klassen Management */
body.dark-mode .klassen-kachel {
    background: #2d2d2d !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .klassen-kachel.neue-klasse {
    border-color: #3a70b2 !important;
    background: #252525 !important;
}

body.dark-mode .klassen-kachel h3 {
    color: #e0e0e0 !important;
}

body.dark-mode .klassen-kachel p {
    color: #d0d0d0 !important;
}

body.dark-mode .modal-header {
    color: #e0e0e0 !important;
}

body.dark-mode .schueler-row {
    background: #252525 !important;
}

body.dark-mode .schueler-row input[readonly] {
    background: #1a1a1a !important;
    color: #888 !important;
}

/* Buttons */
body.dark-mode .btn-primary {
    background: #3a70b2 !important;
}

body.dark-mode .btn-success {
    background: #28a745 !important;
}

body.dark-mode .btn-secondary {
    background: #495057 !important;
}

body.dark-mode .aufgabe-link {
    background-color: #3a70b2 !important;
}

body.dark-mode .aufgabe-link:hover {
    background-color: #2d5a92 !important;
}

body.dark-mode .login-button,
body.dark-mode .submit-btn {
    background: linear-gradient(135deg, #3a70b2, #2d5a92) !important;
}

/* Nav Links */
body.dark-mode .nav-links a {
    color: #6fa8dc !important;
    border-bottom-color: #404040 !important;
}

body.dark-mode .nav-links a:hover,
body.dark-mode .nav-links a.active {
    background-color: #2d2d2d !important;
}

/* Content Sidebar Overrides */
body.dark-mode .content-sidebar .thema-header {
    background-color: #2d2d2d !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .content-sidebar .thema-header:hover {
    background-color: #353535 !important;
}

body.dark-mode .content-sidebar .unterthemen-container {
    background-color: #252525 !important;
    border-color: #404040 !important;
}

body.dark-mode .content-sidebar .unterthemen-list li {
    border-bottom-color: #333 !important;
    color: #d0d0d0 !important;
}

body.dark-mode .content-sidebar .unterthemen-list li:hover {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
}

body.dark-mode .content-sidebar .unterthemen-list li.active {
    background-color: #3a70b2 !important;
}

/* MathJax in Dark Mode */
body.dark-mode .MathJax {
    color: #e0e0e0 !important;
}

body.dark-mode .MathJax_Error {
    color: #f5a3ae !important;
    background: #3d2226 !important;
    border-color: #6b2d35 !important;
}

/* Tables */
body.dark-mode table {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

body.dark-mode th {
    background-color: #353535 !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode td {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode tr:hover td {
    background-color: #353535 !important;
}

/* ========================================
   SCHULBUCH.PHP SPECIFIC ELEMENTS
======================================== */

/* Sidebar Left & Right (schulbuch.php) */
body.dark-mode .sidebar-left {
    background: #252525 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    border: 1px solid #404040 !important;
}

body.dark-mode .sidebar-left h3 {
    color: #6fa8dc !important;
    background: linear-gradient(135deg, #2d2d2d, #252525) !important;
    border-color: #404040 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

body.dark-mode .sidebar-right {
    background: #252525 !important;
    color: #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
    border: 1px solid #404040 !important;
}

body.dark-mode .sidebar-right h4 {
    color: #6fa8dc !important;
    border-bottom-color: #404040 !important;
}

body.dark-mode .sidebar-right a {
    color: #6fa8dc !important;
}

body.dark-mode .sidebar-right a:hover {
    color: #8fc0f0 !important;
}

body.dark-mode .sidebar-right li {
    color: #e0e0e0 !important;
}

/* Aufgaben Anzeige Root */
body.dark-mode #aufgaben-anzeige-root {
    background: #1a1a1a !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

/* Aufgabe Container */
body.dark-mode .aufgabe-container {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    border-left-color: #6fa8dc !important;
}

body.dark-mode .aufgabe-titel {
    color: #e0e0e0 !important;
    border-bottom-color: #404040 !important;
}

/* Klasse Switcher */
body.dark-mode .klasse-switcher-box {
    background: #2d2d2d !important;
}

body.dark-mode .klasse-toggle {
    background: linear-gradient(135deg, #2d4a6d, #1f3a5f) !important;
    border-color: #6fa8dc !important;
    color: #8fc0f0 !important;
    box-shadow: 0 2px 6px rgba(111, 168, 220, 0.2) !important;
}

body.dark-mode .klasse-toggle:hover {
    background: linear-gradient(135deg, #3a5a7d, #2d4a6d) !important;
    border-color: #8fc0f0 !important;
    color: #afd5f5 !important;
    box-shadow: 0 3px 8px rgba(111, 168, 220, 0.3) !important;
}

body.dark-mode .klassen-dropdown {
    background: #2d2d2d !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .klassen-dropdown button {
    background: #353535 !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode .klassen-dropdown button:hover {
    background: #404040 !important;
    color: #6fa8dc !important;
}

/* Main Content (schulbuch.php) */
body.dark-mode .main-content {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* Thema Toggle (schulbuch.php) */
body.dark-mode .thema-toggle {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode .thema-toggle:hover {
    background: #353535 !important;
    border-color: #6fa8dc !important;
}

body.dark-mode .thema-toggle.active {
    background: #3a70b2 !important;
    color: #ffffff !important;
}

/* Unterthema Item (schulbuch.php) */
body.dark-mode .unterthema-item {
    background: #252525 !important;
    color: #d0d0d0 !important;
    border-color: #404040 !important;
}

body.dark-mode .unterthema-item:hover {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #6fa8dc !important;
}

body.dark-mode .unterthema-item.active {
    background: #3a70b2 !important;
    color: #ffffff !important;
    border-color: #6fa8dc !important;
}

/* ========================================
   INLINE STYLE OVERRIDES
======================================== */

/* Override inline color styles */
body.dark-mode div[style*="color: #666"],
body.dark-mode div[style*="color:#666"],
body.dark-mode div[style*="color: #888"],
body.dark-mode div[style*="color:#888"],
body.dark-mode div[style*="color: #333"],
body.dark-mode div[style*="color:#333"] {
    color: #d0d0d0 !important;
}

body.dark-mode div[style*="color: black"],
body.dark-mode div[style*="color:black"] {
    color: #e0e0e0 !important;
}

/* Override inline background styles */
body.dark-mode div[style*="background:white"],
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background-color:white"],
body.dark-mode div[style*="background-color: white"],
body.dark-mode div[style*="background:#fff"],
body.dark-mode div[style*="background: #fff"],
body.dark-mode div[style*="background-color:#fff"],
body.dark-mode div[style*="background-color: #fff"] {
    background-color: #2d2d2d !important;
}

/* Cookie Modal dark mode */
body.dark-mode #cookieModal div[style*="background:white"] {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
}

body.dark-mode #cookieModal h2,
body.dark-mode #cookieModal p,
body.dark-mode #cookieModal strong {
    color: #e0e0e0 !important;
}

/* Navigation form inputs */
body.dark-mode .user-nav form input {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode .user-nav form input::placeholder {
    color: #888 !important;
}

body.dark-mode .user-nav form button {
    background: linear-gradient(135deg, #3a70b2, #2d5a92) !important;
    color: #ffffff !important;
}

body.dark-mode .user-nav form button:hover {
    background: linear-gradient(135deg, #2d5a92, #1f3a5f) !important;
}

/* ========================================
   LOGIN FORM ELEMENTS
======================================== */

/* Login form container and elements */
body.dark-mode .login-form {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
}

body.dark-mode .login-form input,
body.dark-mode .login-form select,
body.dark-mode .login-form textarea {
    background-color: #1a1a1a !important;
    border-color: #404040 !important;
    color: #e0e0e0 !important;
}

body.dark-mode .login-form input::placeholder,
body.dark-mode .login-form select::placeholder,
body.dark-mode .login-form textarea::placeholder {
    color: #888 !important;
}

body.dark-mode .login-form input:focus,
body.dark-mode .login-form select:focus,
body.dark-mode .login-form textarea:focus {
    border-color: #6fa8dc !important;
    background-color: #252525 !important;
    box-shadow: 0 0 0 3px rgba(111, 168, 220, 0.2) !important;
}

body.dark-mode .login-form button,
body.dark-mode .login-form button[type="submit"] {
    background: linear-gradient(135deg, #3a70b2, #2d5a92) !important;
    color: #ffffff !important;
    border-color: #6fa8dc !important;
}

body.dark-mode .login-form button:hover,
body.dark-mode .login-form button[type="submit"]:hover {
    background: linear-gradient(135deg, #2d5a92, #1f3a5f) !important;
    box-shadow: 0 5px 15px rgba(111, 168, 220, 0.3) !important;
}

/* ========================================
   THEMEN TOGGLE ELEMENTS
======================================== */

/* Themen toggle button */
body.dark-mode .themen-toggle,
body.dark-mode .thema-toggle {
    background: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #404040 !important;
}

body.dark-mode .themen-toggle:hover,
body.dark-mode .thema-toggle:hover {
    background: #353535 !important;
    border-color: #6fa8dc !important;
    color: #6fa8dc !important;
}

body.dark-mode .themen-toggle.active,
body.dark-mode .thema-toggle.active {
    background: #3a70b2 !important;
    color: #ffffff !important;
    border-color: #6fa8dc !important;
}

body.dark-mode .themen-toggle.active:hover,
body.dark-mode .thema-toggle.active:hover {
    background: #2d5a92 !important;
}