/* Global Theme Styles - Include this on all pages */

/* Theme Variables */
:root {
    --bg-primary: #f9fafb;
    --bg-secondary: #ffffff;
    --bg-tertiary: #f3f4f6;
    --bg-card: #ffffff;
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;
    --border-color: #e5e7eb;
    --accent-color: #6366f1;
    --accent-hover: #4f46e5;
    --hover-bg: #f9fafb;
    --shadow: rgba(0, 0, 0, 0.1);
}

/* Dark Theme - Sleek & High-Tech */
body.theme-dark {
    --bg-primary: #0a0a0a;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #2a2a2a;
    --bg-card: #1a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #a3a3a3;
    --text-tertiary: #737373;
    --border-color: #2a2a2a;
    --accent-color: #8b5cf6;
    --accent-hover: #7c3aed;
    --hover-bg: #2a2a2a;
    --shadow: rgba(0, 0, 0, 0.5);
}

/* Logo styling */
.logo-text {
    background: linear-gradient(to right, #9333ea, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body.theme-dark .logo-text {
    background: none;
    -webkit-text-fill-color: #ffffff;
    color: #ffffff;
}

/* Apply theme variables globally */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background 0.3s ease, color 0.3s ease;
}

/* Background colors */
.bg-gray-50 {
    background: var(--bg-primary) !important;
}

.bg-white {
    background: var(--bg-card) !important;
}

.bg-gray-100 {
    background: var(--bg-tertiary) !important;
}

/* Card backgrounds */
.card-elevated,
.rounded-xl.bg-white,
.rounded-lg.bg-white {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Text colors */
.text-gray-900, .text-gray-800 {
    color: var(--text-primary) !important;
}

.text-gray-600, .text-gray-700 {
    color: var(--text-secondary) !important;
}

.text-gray-500, .text-gray-400 {
    color: var(--text-tertiary) !important;
}

/* Border colors */
.border-gray-200, .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Navigation */
nav {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Button theming */
button:not(.bg-indigo-600):not(.bg-green-600):not(.bg-red-600):not(.bg-gradient-to-r):hover {
    background: var(--hover-bg) !important;
}

.bg-indigo-600 {
    background: var(--accent-color) !important;
}

.bg-indigo-600:hover {
    background: var(--accent-hover) !important;
}

/* Input theming - ALL THEMES */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Focus states */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
}

body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
}

/* Dropzone */
#dropzone {
    border-color: var(--border-color) !important;
    background: var(--bg-card) !important;
}

#dropzone:hover {
    border-color: var(--accent-color) !important;
    background: var(--hover-bg) !important;
}

/* Modal */
#edit-modal > div {
    background: var(--bg-card) !important;
}

/* Calendar days */
.calendar-day {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.calendar-day:hover {
    background: var(--hover-bg) !important;
}

/* Has events - special styling */
.has-events {
    background-color: #f0f9ff !important;
    border-color: #3b82f6 !important;
}

body.theme-dark .has-events {
    background-color: #1e293b !important;
    border-color: #8b5cf6 !important;
}

/* Sidebar items */
.space-y-2 > div,
.space-y-3 > div {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Tab buttons */
.tab-button {
    color: var(--text-secondary) !important;
}

.tab-button:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

.tab-button.active {
    color: var(--accent-color) !important;
}

body.theme-dark .tab-button.active::after {
    background: var(--accent-color) !important;
}

/* Shadows */
.card-elevated,
.shadow-lg,
.shadow-2xl {
    box-shadow: 0 1px 3px 0 var(--shadow), 0 1px 2px -1px var(--shadow) !important;
}

.card-elevated:hover,
.shadow-lg:hover {
    box-shadow: 0 4px 6px -1px var(--shadow), 0 2px 4px -2px var(--shadow) !important;
}

/* SVG icons */
svg {
    color: inherit;
}

/* Dark mode - adjust gradients to purple */
body.theme-dark .bg-gradient-to-r.from-purple-600,
body.theme-dark .bg-gradient-to-br.from-purple-600 {
    background: linear-gradient(to right, #8b5cf6, #7c3aed) !important;
}

/* Dashboard gradient background in dark mode */
body.theme-dark .bg-gradient-to-br.from-purple-50 {
    background: var(--bg-primary) !important;
}

/* File preview */
#preview-container img {
    border-color: var(--border-color) !important;
}

/* Error containers */
#error-container {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

body.theme-dark #error-container {
    background: #7f1d1d !important;
    border-color: #991b1b !important;
    color: #fecaca !important;
}

/* Scrollbar theming */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

body.theme-dark ::-webkit-scrollbar-thumb {
    background: #404040;
}

body.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #525252;
}

/* Icon backgrounds */
.bg-indigo-100 {
    background: var(--bg-tertiary) !important;
}

body.theme-dark .bg-indigo-100 {
    background: #2d2d2d !important;
}

.text-indigo-600 {
    color: var(--accent-color) !important;
}

/* Make sure all rounded cards have proper theming */
div[class*="rounded-"] {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Dark mode specific improvements */
body.theme-dark {
    background-image: radial-gradient(circle at 20% 50%, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
                      radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
}

/* Purple accent for indigo elements in dark mode */
body.theme-dark .bg-indigo-50 {
    background: #1e1b2e !important;
}

body.theme-dark .text-indigo-700,
body.theme-dark .text-purple-700 {
    color: #a78bfa !important;
}

body.theme-dark .border-indigo-200 {
    border-color: #3730a3 !important;
}

/* Urgent items in dark mode */
body.theme-dark .border-red-300 {
    border-color: #7f1d1d !important;
}

body.theme-dark .bg-red-50 {
    background: #1a0f0f !important;
}

body.theme-dark .text-red-600 {
    color: #fca5a5 !important;
}

/* Tip boxes in dark mode */
body.theme-dark .bg-blue-50 {
    background: #1e293b !important;
    border-color: #334155 !important;
}

body.theme-dark .text-blue-900 {
    color: #93c5fd !important;
}

body.theme-dark .text-blue-800 {
    color: #bfdbfe !important;
}

body.theme-dark .bg-purple-50 {
    background: #1e1b2e !important;
    border-color: #3730a3 !important;
}

body.theme-dark .text-purple-900 {
    color: #c4b5fd !important;
}

body.theme-dark .text-purple-800 {
    color: #ddd6fe !important;
}

/* Assignment cards in dark mode - make them dark with white text */
body.theme-dark .bg-red-100 {
    background: #7f1d1d !important;
    color: #ffffff !important;
}

body.theme-dark .text-red-900,
body.theme-dark .text-red-800 {
    color: #ffffff !important;
}

body.theme-dark .bg-orange-100 {
    background: #7c2d12 !important;
    color: #ffffff !important;
}

body.theme-dark .text-orange-900,
body.theme-dark .text-orange-800 {
    color: #ffffff !important;
}

body.theme-dark .bg-blue-100 {
    background: #1e3a8a !important;
    color: #ffffff !important;
}

body.theme-dark .text-blue-900,
body.theme-dark .text-blue-800 {
    color: #ffffff !important;
}

body.theme-dark .bg-green-100 {
    background: #14532d !important;
    color: #ffffff !important;
}

body.theme-dark .text-green-900,
body.theme-dark .text-green-800 {
    color: #ffffff !important;
}

body.theme-dark .bg-purple-100 {
    background: #581c87 !important;
    color: #ffffff !important;
}

body.theme-dark .text-purple-900 {
    color: #ffffff !important;
}

body.theme-dark .bg-cyan-100 {
    background: #164e63 !important;
    color: #ffffff !important;
}

body.theme-dark .text-cyan-900,
body.theme-dark .text-cyan-800 {
    color: #ffffff !important;
}

body.theme-dark .bg-yellow-100 {
    background: #713f12 !important;
    color: #ffffff !important;
}

body.theme-dark .text-yellow-900,
body.theme-dark .text-yellow-800 {
    color: #ffffff !important;
}

body.theme-dark .bg-pink-100 {
    background: #831843 !important;
    color: #ffffff !important;
}

body.theme-dark .text-pink-900,
body.theme-dark .text-pink-800 {
    color: #ffffff !important;
}

body.theme-dark .bg-indigo-100 {
    background: #3730a3 !important;
    color: #ffffff !important;
}

body.theme-dark .text-indigo-900,
body.theme-dark .text-indigo-800 {
    color: #ffffff !important;
}

body.theme-dark .bg-gray-100 {
    background: #404040 !important;
    color: #ffffff !important;
}

body.theme-dark .text-gray-900,
body.theme-dark .text-gray-800 {
    color: #ffffff !important;
}

/* Make sure assignment text and subtitles are also white in dark mode */
body.theme-dark .calendar-day .font-medium,
body.theme-dark .calendar-day .text-xs {
    color: inherit !important;
}

/* Sidebar assignment cards in dark mode */
body.theme-dark #next10-content > div,
body.theme-dark #all-content > div {
    border-color: var(--border-color) !important;
}

body.theme-dark #next10-content .font-medium,
body.theme-dark #all-content .font-medium {
    color: var(--text-primary) !important;
}


/* Apply theme variables globally */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background 0.3s ease, color 0.3s ease;
}

/* Background colors */
.bg-gray-50 {
    background: var(--bg-primary) !important;
}

.bg-white {
    background: var(--bg-secondary) !important;
}

.bg-gray-100 {
    background: var(--bg-tertiary) !important;
}

/* Card backgrounds */
.card-elevated,
.rounded-xl.bg-white,
.rounded-lg.bg-white {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Text colors */
.text-gray-900, .text-gray-800 {
    color: var(--text-primary) !important;
}

.text-gray-600, .text-gray-700 {
    color: var(--text-secondary) !important;
}

.text-gray-500, .text-gray-400 {
    color: var(--text-tertiary) !important;
}

/* Border colors */
.border-gray-200, .border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Navigation */
nav {
    background: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

/* Button and interactive element theming */
button:not(.bg-indigo-600):not(.bg-green-600):not(.bg-red-600):not(.bg-gradient-to-r):hover {
    background: var(--hover-bg) !important;
}

/* Input theming - ALL THEMES */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-tertiary) !important;
}

/* Focus states */
input:focus,
select:focus,
textarea:focus {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}

/* Dropzone */
#dropzone {
    border-color: var(--border-color) !important;
    background: var(--bg-card) !important;
}

#dropzone:hover {
    border-color: var(--accent-color) !important;
    background: var(--hover-bg) !important;
}

/* Modal */
#edit-modal > div {
    background: var(--bg-card) !important;
}

/* Calendar days */
.calendar-day {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

.calendar-day:hover {
    background: var(--hover-bg) !important;
}

/* Sidebar items */
.space-y-2 > div,
.space-y-3 > div {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

/* Tab buttons */
.tab-button {
    color: var(--text-secondary) !important;
}

.tab-button:hover {
    background: var(--hover-bg) !important;
    color: var(--text-primary) !important;
}

.tab-button.active {
    color: var(--accent-color) !important;
}

/* Shadows */
.card-elevated,
.shadow-lg,
.shadow-2xl {
    box-shadow: 0 1px 3px 0 var(--shadow), 0 1px 2px -1px var(--shadow) !important;
}

.card-elevated:hover,
.shadow-lg:hover {
    box-shadow: 0 4px 6px -1px var(--shadow), 0 2px 4px -2px var(--shadow) !important;
}

/* Specific theme overrides for assignment items */
body.theme-dark .has-events {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--accent-color) !important;
}

body.theme-ocean .has-events {
    background-color: #cffafe !important;
    border-color: #06b6d4 !important;
}

body.theme-forest .has-events {
    background-color: #bbf7d0 !important;
    border-color: #22c55e !important;
}

body.theme-sunset .has-events {
    background-color: #fed7aa !important;
    border-color: #f97316 !important;
}

/* SVG icons */
svg {
    color: inherit;
}

/* Gradient backgrounds - keep original colors but adjust opacity */
body.theme-dark .bg-gradient-to-r,
body.theme-dark .bg-gradient-to-br {
    opacity: 0.9;
}

/* Dashboard specific */
body.theme-dark .bg-gradient-to-br.from-purple-50 {
    background: var(--bg-primary) !important;
}

/* File preview */
#preview-container img {
    border-color: var(--border-color) !important;
}

/* Error containers */
#error-container {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #991b1b !important;
}

body.theme-dark #error-container {
    background: #7f1d1d !important;
    border-color: #991b1b !important;
    color: #fecaca !important;
}

/* Stats cards on dashboard - preserve gradient colors but adjust for themes */
body.theme-dark .bg-gradient-to-br.from-purple-600 {
    filter: brightness(1.1);
}

body.theme-ocean .bg-gradient-to-br.from-purple-600 {
    background: linear-gradient(to bottom right, #0891b2, #06b6d4) !important;
}

body.theme-forest .bg-gradient-to-br.from-purple-600 {
    background: linear-gradient(to bottom right, #16a34a, #22c55e) !important;
}

body.theme-sunset .bg-gradient-to-br.from-purple-600 {
    background: linear-gradient(to bottom right, #ea580c, #f97316) !important;
}

/* Scrollbar theming */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

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

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

::-webkit-scrollbar-thumb:hover {
    background: var(--text-tertiary);
}

/* Ensure proper contrast for all text on colored backgrounds */
body.theme-dark .text-white {
    color: #f9fafb !important;
}

/* Icon backgrounds */
.bg-indigo-100 {
    background: var(--bg-tertiary) !important;
}

.text-indigo-600 {
    color: var(--accent-color) !important;
}

/* Make sure all rounded cards have proper theming */
div[class*="rounded-"] {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}