/**
 * Dark Mode Theme for MATHMATIX AI
 *
 * Activates when [data-theme="dark"] is set on the html element.
 * Uses CSS custom properties to override light theme colors.
 *
 * @module dark-mode
 */

/* Dark theme variable overrides */
[data-theme="dark"] {
    /* Core colors - dark backgrounds, light text */
    --clr-bg-light: #0F1A24;
    --clr-bg-subtle: #141E29;
    --clr-bg-dark: #FFFFFF;
    --clr-text: #F0F4F8;
    --clr-text-dim: #8B9AAB;
    --clr-border: #243040;
    --clr-border-light: #1A2633;

    /* Text colors for dark mode */
    --text-primary: #F0F4F8;
    --text-secondary: #8B9AAB;
    --text-light: #0F1A24;
    --text-dark: #F0F4F8;

    /* Adjusted brand colors for dark mode (brighter for WCAG AA contrast on dark bg) */
    --clr-primary-teal: #14C8C8;
    --clr-primary-teal-light: #0F2D2D;
    --clr-primary-teal-dark: #16DADA;
    --clr-accent-hotpink: #FF6FA0;  /* Bumped from #FF4D8B for 4.6:1 contrast on #0F1A24 */
    --clr-accent-hotpink-light: #2D0F1A;
    --clr-success-green: #1AD97A;
    --clr-success-green-light: #0F2D1A;
    --clr-warning-gold: #FFD066;
    --clr-warning-gold-light: #2D240F;
    --clr-error-red: #FF6B6B;
    --clr-error-red-light: #2D0F0F;

    /* RGB versions for rgba() */
    --clr-primary-teal-rgb: 20, 200, 200;
    --clr-accent-hotpink-rgb: 255, 77, 139;
    --clr-success-green-rgb: 26, 217, 122;

    /* Shadows - darker, more subtle for dark mode */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -1px rgba(0,0,0,0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.2);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.4), 0 10px 10px -5px rgba(0,0,0,0.2);
    --shadow-card-primary: 0 4px 14px rgba(var(--clr-primary-teal-rgb), 0.2);
    --shadow-card-hover: 0 12px 28px rgba(var(--clr-primary-teal-rgb), 0.25);
    --shadow-glow-teal: 0 0 20px rgba(var(--clr-primary-teal-rgb), 0.2);
    --shadow-glow-pink: 0 0 20px rgba(var(--clr-accent-hotpink-rgb), 0.2);
}

/* Body styles for dark mode */
[data-theme="dark"] body {
    background-color: #0A1118;
    color: var(--text-primary);
}

/* Cards and panels */
[data-theme="dark"] .panel,
[data-theme="dark"] .card,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .stat-box,
[data-theme="dark"] .widget {
    background-color: #141E29;
    border-color: #243040;
}

/* Modal backgrounds */
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .dialog-content {
    background-color: #141E29;
    border-color: #243040;
}

/* Table styles */
[data-theme="dark"] table,
[data-theme="dark"] .table {
    background-color: #141E29;
}

[data-theme="dark"] th,
[data-theme="dark"] thead {
    background-color: #1A2633;
    color: var(--text-primary);
}

[data-theme="dark"] td {
    border-color: #243040;
}

[data-theme="dark"] tr:hover {
    background-color: #1A2633;
}

/* Input fields */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: #1A2633;
    border-color: #243040;
    color: var(--text-primary);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-secondary);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--clr-primary-teal);
    box-shadow: 0 0 0 3px rgba(var(--clr-primary-teal-rgb), 0.2);
}

/* Sidebar and navigation */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .nav-sidebar,
[data-theme="dark"] .dashboard-sidebar {
    background-color: #0D151D;
    border-color: #243040;
}

[data-theme="dark"] .sidebar-item:hover,
[data-theme="dark"] .nav-item:hover {
    background-color: #1A2633;
}

[data-theme="dark"] .sidebar-item.active,
[data-theme="dark"] .nav-item.active {
    background-color: rgba(var(--clr-primary-teal-rgb), 0.15);
}

/* Header styles */
[data-theme="dark"] header,
[data-theme="dark"] .site-header,
[data-theme="dark"] .dashboard-header {
    background-color: #0D151D;
    border-color: #243040;
}

/* Footer styles */
[data-theme="dark"] footer,
[data-theme="dark"] .site-footer {
    background-color: #0A1118;
    border-color: #243040;
}

/* Chat message bubbles */
[data-theme="dark"] .chat-message.user-message {
    background-color: var(--clr-primary-teal);
    color: white;
}

[data-theme="dark"] .chat-message.ai-message,
[data-theme="dark"] .chat-message.tutor-message {
    background-color: #1A2633;
    color: var(--text-primary);
}

[data-theme="dark"] .chat-container,
[data-theme="dark"] .chat-messages {
    background-color: #0F1A24;
}

/* Code and math blocks */
[data-theme="dark"] code,
[data-theme="dark"] pre,
[data-theme="dark"] .math-block,
[data-theme="dark"] .code-block {
    background-color: #1A2633;
    border-color: #243040;
    color: #E8F0F8;
}

/* KaTeX math rendering — ensure text color adapts to dark mode */
[data-theme="dark"] .katex {
    color: var(--text-primary, #F0F4F8);
}

/* KaTeX display math blocks — subtle background for visual separation */
[data-theme="dark"] .katex-display {
    background: rgba(26, 38, 51, 0.5);
    border-radius: 6px;
    padding: 8px 12px;
}

/* Calculator and equation input */
[data-theme="dark"] .calculator-display,
[data-theme="dark"] .equation-input,
[data-theme="dark"] #inputDisplay,
[data-theme="dark"] #resultDisplay {
    background-color: #1A2633;
    border-color: #243040;
    color: var(--text-primary);
}

[data-theme="dark"] .calculator-btn {
    background-color: #1A2633;
    border-color: #243040;
    color: var(--text-primary);
}

[data-theme="dark"] .calculator-btn:hover {
    background-color: #243040;
}

[data-theme="dark"] .calculator-btn.primary,
[data-theme="dark"] .calculator-btn.operator {
    background-color: var(--clr-primary-teal);
    color: white;
}

/* Dropdowns and menus */
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .dropdown-content,
[data-theme="dark"] .menu-dropdown {
    background-color: #141E29;
    border-color: #243040;
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dropdown-item:hover {
    background-color: #1A2633;
}

/* Tooltips */
[data-theme="dark"] .tooltip,
[data-theme="dark"] [data-tooltip]:after {
    background-color: #1A2633;
    color: var(--text-primary);
    border-color: #243040;
}

/* Progress bars */
[data-theme="dark"] .progress,
[data-theme="dark"] .progress-bar-bg,
[data-theme="dark"] .skill-progress-bg {
    background-color: #1A2633;
}

/* Badges and tags */
[data-theme="dark"] .badge,
[data-theme="dark"] .tag {
    background-color: #1A2633;
    color: var(--text-primary);
}

/* Alerts and notifications - keep their colors for visibility */
[data-theme="dark"] .alert-success {
    background-color: rgba(22, 200, 109, 0.15);
    border-color: var(--clr-success-green);
    color: var(--clr-success-green);
}

[data-theme="dark"] .alert-error,
[data-theme="dark"] .alert-danger {
    background-color: rgba(255, 78, 78, 0.15);
    border-color: var(--clr-error-red);
    color: var(--clr-error-red);
}

[data-theme="dark"] .alert-warning {
    background-color: rgba(255, 194, 75, 0.15);
    border-color: var(--clr-warning-gold);
    color: var(--clr-warning-gold);
}

[data-theme="dark"] .alert-info {
    background-color: rgba(var(--clr-primary-teal-rgb), 0.15);
    border-color: var(--clr-primary-teal);
    color: var(--clr-primary-teal);
}

/* Scrollbar styling for dark mode (webkit browsers) */
[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: #0F1A24;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: #3A4A5C;
    border-radius: 4px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: #4A5A6C;
}

/* Avatar and profile elements */
[data-theme="dark"] .avatar,
[data-theme="dark"] .profile-avatar {
    border-color: #243040;
}

/* Activity items and lists */
[data-theme="dark"] .activity-item,
[data-theme="dark"] .list-item {
    border-color: #243040;
}

[data-theme="dark"] .activity-item:hover,
[data-theme="dark"] .list-item:hover {
    background-color: #1A2633;
}

/* Skeleton loading states */
[data-theme="dark"] .skeleton,
[data-theme="dark"] .loading-skeleton {
    background: linear-gradient(90deg, #1A2633 25%, #243040 50%, #1A2633 75%);
}

/* Selection color */
[data-theme="dark"] ::selection {
    background-color: rgba(var(--clr-primary-teal-rgb), 0.4);
    color: white;
}

/* Links in dark mode */
[data-theme="dark"] a {
    color: var(--clr-primary-teal);
}

[data-theme="dark"] a:hover {
    color: #16DADA;
}

/* Borders general */
[data-theme="dark"] hr {
    border-color: #243040;
}

/* Empty states */
[data-theme="dark"] .empty-state,
[data-theme="dark"] .no-data {
    color: var(--text-secondary);
}

/* Checkbox and radio custom styling */
[data-theme="dark"] input[type="checkbox"],
[data-theme="dark"] input[type="radio"] {
    accent-color: var(--clr-primary-teal);
}

/* Logo - brighten for dark backgrounds (invert + hue-rotate preserves hue) */
[data-theme="dark"] .main-logo-hero,
[data-theme="dark"] .main-logo {
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

/* Confirmation dialog dark mode */
[data-theme="dark"] .confirm-dialog {
    background: #1A2633;
    border: 1px solid #243040;
}

[data-theme="dark"] .confirm-dialog-title { color: #F0F4F8; }
[data-theme="dark"] .confirm-dialog-message { color: #8B9AAB; }

/* Landing header glass effect in dark mode */
[data-theme="dark"] .landing-header {
    background: rgba(15, 26, 36, 0.95);
    border-bottom-color: rgba(36, 48, 64, 0.4);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Mobile input container dark mode */
[data-theme="dark"] #input-container {
    border-top-color: rgba(36, 48, 64, 0.5);
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.1);
}

/* Chat disclaimer dark mode */
[data-theme="dark"] .chat-disclaimer {
    color: #4a5568;
}

/* iMessage dark mode overrides */
[data-theme="dark"] #chat-messages-container {
    background-color: #000;
}

[data-theme="dark"] .message.ai {
    background-color: #1c1c1e;
    color: #f0f0f0;
}

[data-theme="dark"] .message.user {
    background: #0b84fe;
}

[data-theme="dark"] #user-input {
    background: #1c1c1e;
    border-color: #38383a;
    color: #f0f0f0;
}

[data-theme="dark"] #user-input:empty::before {
    color: #636366;
}

[data-theme="dark"] .imessage-tool-btn {
    color: #0a84ff;
}

[data-theme="dark"] .imessage-send-btn {
    background: #0a84ff;
}

[data-theme="dark"] #thinking-indicator,
[data-theme="dark"] #parent-thinking-indicator {
    background-color: #1c1c1e;
    color: #636366;
}

[data-theme="dark"] .session-stats-bar {
    background: #000;
    border-top-color: #1c1c1e;
}

[data-theme="dark"] .stat-label {
    color: #636366;
}

[data-theme="dark"] .stat-value {
    color: #0a84ff;
}

/* Hamburger dropdown dark mode */
[data-theme="dark"] .header-dropdown-menu {
    background: #1c1c1e;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .header-menu-item {
    color: #f0f0f0;
}

[data-theme="dark"] .header-menu-item:hover {
    background: #2c2c2e;
}

[data-theme="dark"] .header-menu-item i {
    color: #0a84ff;
}

[data-theme="dark"] .header-menu-divider {
    background: #38383a;
}

/* App sidebar in dark mode */
[data-theme="dark"] #app-sidebar {
    background-color: #0D151D;
    border-right-color: #243040;
}

[data-theme="dark"] .sidebar-tool-btn {
    background: #1A2633;
    color: var(--text-primary);
    border-color: transparent;
}

[data-theme="dark"] .sidebar-tool-btn:hover {
    background: rgba(20, 200, 200, 0.1);
    border-color: rgba(20, 200, 200, 0.2);
}

[data-theme="dark"] .sessions-toggle,
[data-theme="dark"] .tools-toggle,
[data-theme="dark"] .leaderboard-toggle,
[data-theme="dark"] .quest-toggle {
    background: #1A2633;
    color: var(--text-primary);
}

[data-theme="dark"] .sessions-toggle:hover,
[data-theme="dark"] .tools-toggle:hover,
[data-theme="dark"] .leaderboard-toggle:hover,
[data-theme="dark"] .quest-toggle:hover {
    background: #243040;
}

[data-theme="dark"] .session-item {
    background: #1A2633;
    color: var(--text-primary);
}

[data-theme="dark"] .session-item:hover {
    background: #243040;
}

[data-theme="dark"] .session-item.active {
    background: rgba(20, 200, 200, 0.08);
    border-color: var(--clr-primary-teal);
}

/* Session item text elements */
[data-theme="dark"] .session-name {
    color: var(--text-primary);
}

[data-theme="dark"] .session-preview {
    color: var(--text-secondary);
}

[data-theme="dark"] .session-time {
    color: var(--text-secondary);
}

[data-theme="dark"] .session-stats {
    color: var(--clr-primary-teal);
}

/* Mobile drawers in dark mode */
[data-theme="dark"] .mobile-drawer {
    background: #0D151D;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .drawer-section {
    border-bottom-color: #243040;
}

[data-theme="dark"] .drawer-stat-item {
    background: #1A2633;
    border-color: #243040;
}

[data-theme="dark"] .drawer-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* More Tools Menu dark mode */
[data-theme="dark"] .more-tools-menu {
    background: #141E29;
    border-color: #243040;
}

[data-theme="dark"] .more-tool-item {
    background: #1A2633;
    border-color: #243040;
    color: var(--text-primary);
}

[data-theme="dark"] .more-tool-item:hover {
    background: #243040;
}

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

[data-theme="dark"] .more-tool-separator {
    background: #243040;
}

/* Login / Signup pages dark mode */
[data-theme="dark"] .login-container,
[data-theme="dark"] .signup-container {
    background: #141E29;
    border-color: #243040;
}

[data-theme="dark"] .social-btn {
    background: #1A2633;
    border-color: #243040;
    color: var(--text-primary);
}

[data-theme="dark"] .social-btn:hover {
    background: #243040;
}

[data-theme="dark"] .or-separator span {
    background: #141E29;
    color: var(--text-secondary);
}

/* Landing page sections dark mode */
[data-theme="dark"] .lp-features,
[data-theme="dark"] .lp-steps,
[data-theme="dark"] .lp-compare,
[data-theme="dark"] .lp-testimonials,
[data-theme="dark"] .lp-faq {
    background: #0A1118;
}

[data-theme="dark"] .lp-feature-card,
[data-theme="dark"] .lp-compare-card,
[data-theme="dark"] .lp-testimonial,
[data-theme="dark"] .lp-info-card {
    background: #141E29;
    border-color: #243040;
}

[data-theme="dark"] .lp-faq-item {
    border-bottom-color: #243040;
}

[data-theme="dark"] .lp-sticky-cta {
    background: rgba(15, 26, 36, 0.92);
    border-top-color: rgba(36, 48, 64, 0.5);
}

/* Inline equation palette dark mode */
[data-theme="dark"] .inline-equation-palette {
    background: #141E29;
    border-color: #243040;
}

/* Dark-mode: bottom sheet header + math field container */
[data-theme="dark"] .inline-equation-palette .equation-palette-header,
[data-theme="dark"] .inline-equation-palette .inline-math-field-container {
    background: #141E29;
}

[data-theme="dark"] .symbol-btn,
[data-theme="dark"] .script-btn {
    background: #1A2633;
    border-color: #243040;
    color: var(--text-primary);
}

[data-theme="dark"] .symbol-btn:hover,
[data-theme="dark"] .script-btn:hover {
    background: #243040;
}

/* Math Keyboard Panel dark mode */
[data-theme="dark"] .math-keyboard-panel {
    background: #141E29;
    border-top-color: #243040;
}
[data-theme="dark"] .mk-tabs {
    border-bottom-color: #243040;
}
[data-theme="dark"] .mk-tab-icon,
[data-theme="dark"] .mk-tab-label {
    color: #8899aa;
}
[data-theme="dark"] .mk-tab-active .mk-tab-icon,
[data-theme="dark"] .mk-tab-active .mk-tab-label {
    color: #5ac8fa;
}
[data-theme="dark"] .mk-tab-active {
    border-bottom-color: #5ac8fa;
}
[data-theme="dark"] .mk-section-label {
    color: #667788;
}
[data-theme="dark"] .mk-key {
    background: #1A2633;
    border-color: #243040;
    color: var(--text-primary, #e0e0e0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
[data-theme="dark"] .mk-key:active {
    background: #243040;
}
[data-theme="dark"] .mk-key-action {
    background: #243040;
}
[data-theme="dark"] .mk-key-hint {
    color: #667788;
}
[data-theme="dark"] .math-keyboard-field {
    background: #1A2633;
    border-color: rgba(90, 200, 250, 0.5);
    color: var(--text-primary, #e0e0e0);
}
[data-theme="dark"] .mk-done-btn {
    background: #5ac8fa;
    color: #0a1520;
}
[data-theme="dark"] .mk-helper-text {
    color: #667788;
}
[data-theme="dark"] .mk-helper-text strong {
    color: #5ac8fa;
}

/* Transition for smooth theme switching */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}