/* ================================
   COMPLETE DARK MODE STYLES
   From Calculus Module
   ================================ */

/* Base Dark Mode Styles */
body.dark-mode {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
    color: #e0e0e0 !important;
    min-height: 100vh;
}

/* Container and Main Content */
body.dark-mode .container {
    background: rgba(30, 30, 46, 0.95) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .main-content {
    background: rgba(30, 30, 46, 0.8) !important;
    color: #e0e0e0 !important;
}

/* ================================
   PROGRESS BAR STYLES (FIX WHITE BG)
   ================================ */

/* Main Progress Container */
body.dark-mode #progress-bar-container {
    background: linear-gradient(145deg, #1a1a1a, #2a2a2a) !important;
    border: 1px solid #444 !important;
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

body.dark-mode #progress-bar-container:hover {
    box-shadow: 
        inset 0 2px 4px rgba(0, 0, 0, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(102, 126, 234, 0.3) !important;
}

/* Progress Bar Fill */
body.dark-mode #progress-bar-fill {
    background: linear-gradient(90deg, #667eea, #764ba2) !important;
    box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3) !important;
}

body.dark-mode #progress-bar {
    background: linear-gradient(90deg, #4a5cc5, #64b5f6) !important;
}

/* Progress Text */
body.dark-mode #progress-percentage {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
}

/* Progress Module */
body.dark-mode .progress-module {
    background: rgba(35, 35, 50, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .module.progress-module {
    background: rgba(35, 35, 50, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .progress-module h2 {
    color: #ffffff !important;
}

/* Section Progress Containers */
body.dark-mode .section-progress-container {
    background: rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .section-progress-bar {
    background: #1a1a1a !important;
    border: 1px solid #444 !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .section-progress-fill {
    background: linear-gradient(90deg, #667eea, #764ba2) !important;
    box-shadow: 0 1px 3px rgba(102, 126, 234, 0.3) !important;
}

body.dark-mode .section-progress-text {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
    font-weight: bold !important;
}

/* ================================
   MODULE & TASK MODULE STYLES
   ================================ */

body.dark-mode .module {
    background-color: rgba(45, 45, 65, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .task-module {
    background-color: rgba(45, 45, 65, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .module-header {
    background: rgba(35, 35, 50, 0.5) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .module-header h2,
body.dark-mode .module-header h3 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

/* ================================
   NOTES SECTION STYLES (FIX WHITE BG)
   ================================ */

/* Section Notes Container */
body.dark-mode .section-notes {
    background: rgba(30, 30, 45, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

/* Notes Toggle Button */
body.dark-mode .notes-toggle {
    background-color: rgba(55, 55, 75, 0.9) !important;
    color: #e0e0e0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .notes-toggle:hover {
    background-color: rgba(70, 70, 90, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Notes Text Areas */
body.dark-mode .notes-area,
body.dark-mode .notes-input,
body.dark-mode textarea {
    background: rgba(30, 30, 45, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .notes-area:focus,
body.dark-mode .notes-input:focus,
body.dark-mode textarea:focus {
    background: rgba(35, 35, 50, 0.95) !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
    color: #ffffff !important;
}

/* Item Notes */
body.dark-mode .item-notes {
    background: rgba(30, 30, 45, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .item-notes-area {
    background: rgba(30, 30, 45, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .item-notes-toggle {
    background: rgba(35, 35, 50, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

body.dark-mode .item-notes-toggle:hover {
    background: rgba(45, 45, 65, 0.95) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* ================================
   TASK ITEMS & CONTENT
   ================================ */

body.dark-mode .task-item {
    background: linear-gradient(135deg, rgba(40, 40, 55, 0.9) 0%, rgba(45, 45, 60, 0.9) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .task-item:hover {
    background: linear-gradient(135deg, rgba(50, 50, 65, 0.95) 0%, rgba(55, 55, 70, 0.95) 100%) !important;
    border-color: rgba(102, 126, 234, 0.4) !important;
}

body.dark-mode .task-content {
    color: #e0e0e0 !important;
}

body.dark-mode .task-content p {
    color: #e0e0e0 !important;
}

body.dark-mode .task-content strong {
    color: #ffffff !important;
}

/* Item Content */
body.dark-mode .item-content {
    color: #e0e0e0 !important;
    background: transparent !important;
}

body.dark-mode .item-with-status {
    background: rgba(35, 35, 50, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .item-description {
    color: #ffffff !important;
}

body.dark-mode .item-content .item-description {
    color: #ffffff !important;
}

body.dark-mode .resource-item .item-description {
    color: #ffffff !important;
}

body.dark-mode .item-content small {
    color: #b0b0b0 !important;
}

body.dark-mode .resource-item small {
    color: #b0b0b0 !important;
}

/* ================================
   LINKS & RESOURCES
   ================================ */

body.dark-mode a {
    color: #5eb3ff !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(94, 179, 255, 0.3) !important;
    text-underline-offset: 2px !important;
    transition: all 0.2s ease !important;
}

body.dark-mode a:hover {
    color: #90caf9 !important;
    text-decoration-color: #90caf9 !important;
}

body.dark-mode a:visited {
    color: #a294ff !important;
}

body.dark-mode .item-content a {
    color: #5eb3ff !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(94, 179, 255, 0.3) !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 2px !important;
    font-weight: 500 !important;
    position: relative !important;
    display: inline-block !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .item-content a::before {
    content: "🔗 " !important;
    font-size: 0.85em !important;
    opacity: 0.7 !important;
    margin-right: 2px !important;
}

body.dark-mode .item-content a:hover {
    color: #90caf9 !important;
    text-decoration-color: #90caf9 !important;
    text-decoration-thickness: 2px !important;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(94, 179, 255, 0.1) 10%, 
        rgba(94, 179, 255, 0.1) 90%, 
        transparent) !important;
    padding: 0 4px !important;
    margin: 0 -4px !important;
    border-radius: 3px !important;
}

body.dark-mode .resource-link {
    color: #e2e8f0 !important;
}

body.dark-mode .resource-link:hover {
    color: #90caf9 !important;
}

/* Resource Items */
body.dark-mode .resource-item {
    background: linear-gradient(135deg, rgba(45, 55, 72, 0.9) 0%, rgba(55, 65, 82, 0.9) 100%) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .resource-item:hover {
    border-color: #667eea !important;
}

body.dark-mode .resource-description {
    color: #cbd5e0 !important;
}

/* ================================
   BUTTONS & INPUTS
   ================================ */

body.dark-mode button {
    background: rgba(55, 55, 75, 0.9) !important;
    color: #e0e0e0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode button:hover {
    background: rgba(70, 70, 90, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode select {
    background: rgba(30, 30, 45, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode select:focus {
    background: rgba(35, 35, 50, 0.95) !important;
    border-color: #667eea !important;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2) !important;
}

/* Checkboxes */
body.dark-mode input[type="checkbox"] {
    accent-color: #667eea !important;
}

body.dark-mode .task-tracking input[type="checkbox"] {
    background: rgba(30, 30, 45, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ================================
   EXERCISE & CHALLENGE SECTIONS
   ================================ */

body.dark-mode .exercise-box {
    background: rgba(35, 35, 50, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .exercises-section {
    background: linear-gradient(135deg, rgba(74, 85, 104, 0.5) 0%, rgba(45, 55, 72, 0.5) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .exercise-content strong {
    color: #ffffff !important;
}

body.dark-mode .exercise-description {
    color: #cbd5e0 !important;
}

/* ================================
   GAMIFICATION ELEMENTS
   ================================ */

body.dark-mode .gamified-header {
    background: linear-gradient(135deg, rgba(30, 30, 46, 0.95) 0%, rgba(45, 45, 65, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .level-badge {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
}

body.dark-mode .achievements-bar {
    background: rgba(30, 30, 45, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .achievement-title {
    color: #ffffff !important;
}

/* Daily Challenges Sidebar */
body.dark-mode .daily-challenges-sidebar {
    background: rgba(30, 30, 46, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .challenges-header {
    background: rgba(35, 35, 50, 0.95) !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .challenges-list {
    background: rgba(30, 30, 45, 0.9) !important;
}

/* ================================
   MODAL STYLES
   ================================ */

body.dark-mode .modules-modal-overlay {
    background: rgba(0, 0, 0, 0.7) !important;
}

body.dark-mode .modules-modal-content {
    background: rgba(30, 30, 46, 0.98) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .modules-modal-header {
    background: rgba(35, 35, 50, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* ================================
   TIMER SECTION
   ================================ */

body.dark-mode .timer-container {
    background: rgba(35, 35, 50, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #e0e0e0 !important;
}

body.dark-mode .timer-display {
    background: rgba(30, 30, 45, 0.9) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ================================
   SCROLLBAR STYLES
   ================================ */

body.dark-mode::-webkit-scrollbar {
    width: 12px !important;
    height: 12px !important;
}

body.dark-mode::-webkit-scrollbar-track {
    background: rgba(30, 30, 45, 0.9) !important;
    border-radius: 6px !important;
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-radius: 6px !important;
    border: 2px solid rgba(30, 30, 45, 0.9) !important;
}

body.dark-mode::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #764ba2, #667eea) !important;
}

/* ================================
   ADDITIONAL FIXES
   ================================ */

/* Fix any remaining white backgrounds */
body.dark-mode div[style*="background: white"],
body.dark-mode div[style*="background-color: white"],
body.dark-mode div[style*="background:#fff"],
body.dark-mode div[style*="background-color:#fff"] {
    background: rgba(35, 35, 50, 0.95) !important;
}

/* Ensure all text is readable */
body.dark-mode * {
    color: inherit;
}

/* Override any inline styles that might cause white backgrounds */
body.dark-mode [style*="background-color: rgb(255, 255, 255)"] {
    background-color: rgba(35, 35, 50, 0.95) !important;
}

/* Fix list items */
body.dark-mode ul li,
body.dark-mode ol li {
    color: #e0e0e0 !important;
}

/* Fix any headers */
body.dark-mode h1,
body.dark-mode h2, 
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: #ffffff !important;
}

/* Fix paragraphs */
body.dark-mode p {
    color: #e0e0e0 !important;
}

/* Fix strong and em tags */
body.dark-mode strong,
body.dark-mode b {
    color: #ffffff !important;
}

body.dark-mode em,
body.dark-mode i {
    color: #e0e0e0 !important;
}

/* Code blocks */
body.dark-mode code,
body.dark-mode pre {
    background: rgba(20, 20, 30, 0.9) !important;
    color: #90caf9 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Tables */
body.dark-mode table {
    background: rgba(30, 30, 45, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode th {
    background: rgba(35, 35, 50, 0.95) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode td {
    background: rgba(30, 30, 45, 0.5) !important;
    color: #e0e0e0 !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Ensure specificity for critical elements */
body.dark-mode #progress-bar-container,
body.dark-mode .progress-module,
body.dark-mode .section-notes,
body.dark-mode .notes-area,
body.dark-mode .item-notes {
    background: rgba(35, 35, 50, 0.95) !important;
}