/*
 * Global Dark Mode Overrides
 * Only applies when body has .dark-mode class
 */

:root {
    color-scheme: light dark;
    --dark-bg: #0b1120;
    --dark-surface: #111827;
    --dark-muted: #1f2937;
    --dark-border: #374151;
    --dark-text: #f8fafc;
    --dark-text-muted: #d1d5db;
    --dark-accent: #38bdf8;
}

/* Dark mode only applies when body has .dark-mode class */
body.dark-mode,
body.dark-mode html {
    background-color: var(--dark-bg) !important;
    color: var(--dark-text) !important;
}

/* Override body gradient background in dark mode */
body.dark-mode.min-h-screen.bg-gradient-to-br {
    background: var(--dark-bg) !important;
    background-color: var(--dark-bg) !important;
}

body.dark-mode * {
    color: var(--dark-text) !important;
}

body.dark-mode a {
    color: var(--dark-accent) !important;
}

body.dark-mode a:hover,
body.dark-mode a:focus {
    color: #bae6fd !important;
}

/* Inputs, selects, textareas, buttons */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode button,
body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100,
body.dark-mode .bg-gray-200,
body.dark-mode .bg-gray-300 {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Select dropdowns */
body.dark-mode select option {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

/* Colored backgrounds */
body.dark-mode .bg-blue-50,
body.dark-mode .bg-green-50,
body.dark-mode .bg-purple-50,
body.dark-mode .bg-orange-50,
body.dark-mode .bg-primary-50,
body.dark-mode .bg-primary-100,
body.dark-mode .bg-red-50,
body.dark-mode .bg-amber-50,
body.dark-mode .bg-slate-50 {
    background-color: var(--dark-muted) !important;
}

/* All text colors */
body.dark-mode .text-gray-500,
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900,
body.dark-mode .text-blue-600,
body.dark-mode .text-green-600,
body.dark-mode .text-primary-600,
body.dark-mode .text-primary-700,
body.dark-mode .text-primary-800 {
    color: var(--dark-text) !important;
}

/* Borders */
body.dark-mode .border-gray-100,
body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300,
body.dark-mode .border-gray-400,
body.dark-mode .border-white,
body.dark-mode .border-gray-500 {
    border-color: var(--dark-border) !important;
}

/* Shadows */
body.dark-mode .shadow,
body.dark-mode .shadow-sm,
body.dark-mode .shadow-md,
body.dark-mode .shadow-lg,
body.dark-mode .shadow-xl,
body.dark-mode .shadow-2xl {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
}

/* Dashboard specific */
body.dark-mode .bg-gradient-to-br.from-slate-50.to-blue-50,
body.dark-mode .from-slate-50,
body.dark-mode .to-blue-50 {
    background: var(--dark-bg) !important;
}

/* Badges and status indicators */
body.dark-mode .bg-green-100,
body.dark-mode .bg-purple-100,
body.dark-mode .bg-orange-100,
body.dark-mode .bg-blue-100,
body.dark-mode .bg-yellow-100,
body.dark-mode .bg-red-100 {
    background-color: var(--dark-muted) !important;
}

body.dark-mode .text-green-800,
body.dark-mode .text-purple-800,
body.dark-mode .text-orange-800,
body.dark-mode .text-blue-800,
body.dark-mode .text-yellow-800,
body.dark-mode .text-red-800 {
    color: var(--dark-text) !important;
}

/* Superset cards */
body.dark-mode .superset-group-card {
    background-color: var(--dark-muted) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .superset-exercise-item {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

/* Timer modal */
body.dark-mode #training-modal .bg-white,
body.dark-mode #training-modal .bg-gray-50,
body.dark-mode #training-modal .bg-gray-200,
body.dark-mode #training-modal .bg-gray-800 {
    background-color: var(--dark-surface) !important;
}

body.dark-mode #training-modal .text-gray-800,
body.dark-mode #training-modal .text-gray-700,
body.dark-mode #training-modal .text-gray-400,
body.dark-mode #training-modal .text-gray-600 {
    color: var(--dark-text) !important;
}

body.dark-mode #training-modal .bg-primary-500 {
    background-color: var(--dark-accent) !important;
}

/* Quill editor */
body.dark-mode .ql-editor,
body.dark-mode .ql-container {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .ql-toolbar {
    background-color: var(--dark-muted) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .ql-stroke {
    stroke: var(--dark-text) !important;
}

body.dark-mode .ql-fill {
    fill: var(--dark-text) !important;
}

/* Login page specific */
body.dark-mode .glass-morphism {
    background: rgba(17, 24, 39, 0.8) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .gradient-bg {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
}

/* Login page gradients */
body.dark-mode [class*="from-primary-50"],
body.dark-mode [class*="via-white"],
body.dark-mode [class*="to-accent-50"],
body.dark-mode [class*="from-primary-200"],
body.dark-mode [class*="to-accent-200"],
body.dark-mode [class*="from-accent-200"],
body.dark-mode [class*="to-primary-200"],
body.dark-mode [class*="from-primary-300"],
body.dark-mode [class*="to-accent-300"] {
    background: var(--dark-bg) !important;
}

body.dark-mode [class*="bg-gradient-to-br"][class*="from-primary-50"],
body.dark-mode [class*="bg-gradient-to-br"][class*="via-white"],
body.dark-mode [class*="bg-gradient-to-br"][class*="to-accent-50"] {
    background: var(--dark-bg) !important;
}

/* Login page body background */
body.dark-mode.bg-gradient-to-br.from-primary-50.via-white.to-accent-50,
body.dark-mode [class*="bg-gradient-to-br"][class*="from-primary-50"][class*="via-white"][class*="to-accent-50"] {
    background: var(--dark-bg) !important;
}

body.dark-mode .bg-gradient-to-br.from-primary-500.to-accent-600 {
    background: linear-gradient(135deg, var(--dark-accent) 0%, #2563eb 100%) !important;
}

body.dark-mode .bg-gradient-to-r.from-primary-600.to-accent-700 {
    background: linear-gradient(90deg, var(--dark-accent) 0%, #2563eb 100%) !important;
}

body.dark-mode .text-gray-600 {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .bg-gradient-to-r.from-red-500.to-pink-500 {
    background: linear-gradient(90deg, #dc2626 0%, #ec4899 100%) !important;
}

/* Workout section cards */
body.dark-mode .workout-section-card {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .section-title-header {
    border-color: var(--dark-border) !important;
}

/* Exercise detail grid */
body.dark-mode .exercise-detail-grid {
    color: var(--dark-text) !important;
}

/* Prose content */
body.dark-mode .prose,
body.dark-mode .prose * {
    color: var(--dark-text) !important;
}

/* Placeholder text */
body.dark-mode ::placeholder,
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dark-text-muted) !important;
    opacity: 0.7;
}

/* Tables */
body.dark-mode table,
body.dark-mode thead,
body.dark-mode tbody,
body.dark-mode tr,
body.dark-mode td,
body.dark-mode th {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .bg-gray-50 {
    background-color: var(--dark-muted) !important;
}

/* Links and buttons in tables */
body.dark-mode .text-primary-600,
body.dark-mode .text-yellow-600,
body.dark-mode .text-green-600,
body.dark-mode .text-red-600 {
    color: var(--dark-accent) !important;
}

body.dark-mode .text-primary-600:hover,
body.dark-mode .text-yellow-600:hover,
body.dark-mode .text-green-600:hover,
body.dark-mode .text-red-600:hover {
    color: #bae6fd !important;
}

/* Timer circle SVG */
body.dark-mode .timer-circle {
    stroke: var(--dark-accent) !important;
}

body.dark-mode #timer-text {
    color: var(--dark-accent) !important;
}

/* Gradient backgrounds */
body.dark-mode .bg-gradient-to-r.from-primary-50.to-white,
body.dark-mode .from-primary-50,
body.dark-mode .to-white {
    background: var(--dark-surface) !important;
}

/* Date text */
body.dark-mode .text-sm.text-gray-600 {
    color: var(--dark-text-muted) !important;
}

/* Exercise name colors */
body.dark-mode .exercise-name-main,
body.dark-mode .exercise-name-superset {
    color: var(--dark-text) !important;
}

/* Detail items */
body.dark-mode .detail-item span:first-child {
    color: var(--dark-text-muted) !important;
}

/* Quill dropdown menu */
body.dark-mode .ql-picker-options {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .ql-picker-item {
    color: var(--dark-text) !important;
}

body.dark-mode .ql-picker-item:hover {
    background-color: var(--dark-muted) !important;
}

/* SweetAlert modal */
body.dark-mode .swal2-popup {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .swal2-title,
body.dark-mode .swal2-content {
    color: var(--dark-text) !important;
}

/* Opacity adjustments */
body.dark-mode .opacity-60 {
    opacity: 0.8 !important;
}

/* All gradient combinations */
body.dark-mode [class*="gradient"] {
    background-image: none !important;
}

body.dark-mode [class*="from-"],
body.dark-mode [class*="via-"],
body.dark-mode [class*="to-"] {
    background: var(--dark-bg) !important;
}

/* Specific text color overrides */
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: var(--dark-text) !important;
}

/* Header elements */
body.dark-mode header,
body.dark-mode header * {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Footer */
body.dark-mode footer,
body.dark-mode footer * {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* All divs with background colors */
body.dark-mode div[class*="bg-"] {
    background-color: var(--dark-surface) !important;
}

body.dark-mode div[class*="bg-white"],
body.dark-mode div[class*="bg-gray"] {
    background-color: var(--dark-surface) !important;
}

/* Specific classes that need override */
body.dark-mode .bg-white,
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100,
body.dark-mode .bg-gray-200 {
    background-color: var(--dark-surface) !important;
}

/* Text content areas */
body.dark-mode .text-content,
body.dark-mode .prose {
    color: var(--dark-text) !important;
}

body.dark-mode .prose * {
    color: var(--dark-text) !important;
}

/* All span elements with text colors */
body.dark-mode span[class*="text-"] {
    color: var(--dark-text) !important;
}

/* Keep accent colors for links and important elements */
body.dark-mode a[class*="text-primary"],
body.dark-mode button[class*="text-primary"] {
    color: var(--dark-accent) !important;
}

/* Force all text to be visible */
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600,
body.dark-mode .text-gray-500,
body.dark-mode .text-gray-400 {
    color: var(--dark-text) !important;
}

/* Superset specific */
body.dark-mode .superset-group-card,
body.dark-mode .superset-title {
    color: var(--dark-text) !important;
}

body.dark-mode .superset-title {
    color: var(--dark-accent) !important;
}

/* Timer specific */
body.dark-mode #training-modal,
body.dark-mode #training-modal * {
    color: var(--dark-text) !important;
}

body.dark-mode #training-modal .bg-white,
body.dark-mode #training-modal .bg-gray-50,
body.dark-mode #training-modal .bg-gray-200,
body.dark-mode #training-modal .bg-gray-800 {
    background-color: var(--dark-surface) !important;
}

body.dark-mode #training-modal .text-gray-800,
body.dark-mode #training-modal .text-gray-700,
body.dark-mode #training-modal .text-gray-400,
body.dark-mode #training-modal .text-gray-600,
body.dark-mode #training-modal .text-gray-500 {
    color: var(--dark-text) !important;
}

body.dark-mode #training-modal .text-primary-700 {
    color: var(--dark-accent) !important;
}

body.dark-mode #training-modal .text-primary-500 {
    color: var(--dark-accent) !important;
}

body.dark-mode #training-modal .bg-primary-500 {
    background-color: var(--dark-accent) !important;
}

body.dark-mode #training-modal .bg-primary-600 {
    background-color: var(--dark-accent) !important;
}

body.dark-mode #training-modal .bg-gray-900 {
    background-color: var(--dark-muted) !important;
}

body.dark-mode #training-modal .text-gray-400 {
    color: var(--dark-text-muted) !important;
}

/* Select dropdowns - force dark */
body.dark-mode select {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode select option {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
}

/* Quill editor dropdowns */
body.dark-mode .ql-picker-label {
    color: var(--dark-text) !important;
}

body.dark-mode .ql-picker-options {
    background-color: var(--dark-surface) !important;
    border: 1px solid var(--dark-border) !important;
}

body.dark-mode .ql-picker-item {
    color: var(--dark-text) !important;
}

body.dark-mode .ql-picker-item:hover,
body.dark-mode .ql-picker-item.ql-selected {
    background-color: var(--dark-muted) !important;
    color: var(--dark-text) !important;
}

/* Exercise search results dropdown */
body.dark-mode .exercise-search-results {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .exercise-search-results div {
    color: var(--dark-text) !important;
    background-color: var(--dark-surface) !important;
}

body.dark-mode .exercise-search-results div:hover {
    background-color: var(--dark-muted) !important;
    color: var(--dark-text) !important;
}

/* Superset exercise search results */
body.dark-mode .superset-exercise-search {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode #exercise-search,
body.dark-mode #superset-exercise-search-ITEM_INDEX,
body.dark-mode input.superset-exercise-search {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode #exercise-search::placeholder,
body.dark-mode #superset-exercise-search-ITEM_INDEX::placeholder,
body.dark-mode input.superset-exercise-search::placeholder {
    color: var(--dark-text-muted) !important;
    opacity: 0.7;
}

/* Assign tab specific elements */
body.dark-mode .main-item {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .superset-header {
    background-color: var(--dark-muted) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .superset-body {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
}

body.dark-mode .workout-section {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .superset-exercise-item {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
}

/* Labels in assign tab */
body.dark-mode label[for="exercise-search"],
body.dark-mode label[for*="superset-exercise-search"],
body.dark-mode .block.text-sm.font-medium.text-gray-700 {
    color: var(--dark-text) !important;
}

/* All input fields in assign tab */
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode textarea {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Drag handle */
body.dark-mode .drag-handle {
    color: var(--dark-text-muted) !important;
}

/* All buttons in assign tab */
body.dark-mode button[type="button"],
body.dark-mode button[type="submit"] {
    color: var(--dark-text) !important;
}

body.dark-mode .bg-blue-600,
body.dark-mode .bg-blue-700,
body.dark-mode .bg-primary-600,
body.dark-mode .bg-primary-700 {
    background-color: var(--dark-accent) !important;
}

body.dark-mode .text-white {
    color: var(--dark-text) !important;
}

/* Remove item buttons */
body.dark-mode .remove-item,
body.dark-mode .remove-superset-exercise {
    color: var(--dark-accent) !important;
}

body.dark-mode .remove-item:hover,
body.dark-mode .remove-superset-exercise:hover {
    color: #bae6fd !important;
}

/* View video buttons */
body.dark-mode .view-video-btn {
    color: var(--dark-accent) !important;
}

body.dark-mode .view-video-btn:hover {
    color: #bae6fd !important;
}

/* All form elements */
body.dark-mode form {
    color: var(--dark-text) !important;
}

/* Input xs class */
body.dark-mode .input-xs {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

/* Label xs class */
body.dark-mode .label-xs {
    color: var(--dark-text) !important;
}

/* No items message */
body.dark-mode #no-items-msg {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-muted) !important;
}

/* Dark Mode Toggle Button - Header Style (Icon Only) */
.dark-mode-toggle-header {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    font-size: 1.125rem;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-right: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dark-mode-toggle-header:hover {
    transform: scale(1.1) rotate(15deg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

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

body.dark-mode .dark-mode-toggle-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

body.dark-mode .dark-mode-toggle-header i,
body.dark-mode .dark-mode-toggle-header .fas,
body.dark-mode .dark-mode-toggle-header .fa-sun {
    background: transparent !important;
    background-color: transparent !important;
    color: white !important;
}

body.dark-mode .dark-mode-toggle-header:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

body:not(.dark-mode) .dark-mode-toggle-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

body:not(.dark-mode) .dark-mode-toggle-header:hover {
    background: linear-gradient(135deg, #7c8ef0 0%, #8a5cc4 100%);
}

/* Fixed position toggle (for non-admin pages) */
.dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: white;
    font-size: 24px;
}

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

body.dark-mode .dark-mode-toggle {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

body.dark-mode .dark-mode-toggle i,
body.dark-mode .dark-mode-toggle .fas,
body.dark-mode .dark-mode-toggle .fa-sun {
    background: transparent !important;
    background-color: transparent !important;
    color: white !important;
}

/* Login page specific dark mode fixes */
body.dark-mode .text-gray-700 {
    color: var(--dark-text) !important;
}

body.dark-mode input[class*="bg-white"] {
    background-color: var(--dark-surface) !important;
    color: var(--dark-text) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .absolute.inset-y-0 i.text-gray-400,
body.dark-mode i.text-gray-400 {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .text-gray-500 {
    color: var(--dark-text-muted) !important;
}

body.dark-mode .glass-morphism {
    background: rgba(17, 24, 39, 0.9) !important;
    border-color: var(--dark-border) !important;
    backdrop-filter: blur(10px);
}

body.dark-mode .glass-morphism.border-white\/20 {
    border-color: var(--dark-border) !important;
}

/* Login page animated background circles */
body.dark-mode [class*="bg-gradient-to-br"][class*="from-primary-200"],
body.dark-mode [class*="bg-gradient-to-tr"][class*="from-accent-200"],
body.dark-mode [class*="bg-gradient-to-br"][class*="from-primary-300"] {
    background: rgba(56, 189, 248, 0.1) !important;
    opacity: 0.3 !important;
}

body.dark-mode [class*="bg-gradient-to-br"][class*="to-accent-200"],
body.dark-mode [class*="bg-gradient-to-tr"][class*="to-primary-200"],
body.dark-mode [class*="bg-gradient-to-br"][class*="to-accent-300"] {
    background: rgba(56, 189, 248, 0.1) !important;
    opacity: 0.3 !important;
}

/* Login page input focus states */
body.dark-mode input:focus {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-accent) !important;
    color: var(--dark-text) !important;
}

body.dark-mode input::placeholder {
    color: var(--dark-text-muted) !important;
    opacity: 0.6 !important;
}

/* Login page button gradient */
body.dark-mode .bg-gradient-to-r.from-primary-600.to-accent-700 {
    background: linear-gradient(90deg, var(--dark-accent) 0%, #2563eb 100%) !important;
}

body.dark-mode .bg-gradient-to-r.from-primary-600.to-accent-700:hover {
    background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%) !important;
}

/* Login page icon container */
body.dark-mode .inline-flex.items-center.justify-center.w-20.h-20.bg-gradient-to-br.from-primary-500.to-accent-600 {
    background: linear-gradient(135deg, var(--dark-accent) 0%, #2563eb 100%) !important;
}

/* Login page title gradient text - ensure visibility in dark mode */
body.dark-mode h1.bg-gradient-to-r.from-primary-600.to-accent-700.bg-clip-text.text-transparent,
body.dark-mode .bg-gradient-to-r.from-primary-600.to-accent-700.bg-clip-text.text-transparent,
body.dark-mode h1.text-4xl.font-bold.bg-gradient-to-r {
    background: linear-gradient(90deg, #60a5fa 0%, #38bdf8 100%) !important;
    background-image: linear-gradient(90deg, #60a5fa 0%, #38bdf8 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block !important;
}

/* Fallback - ensure text is visible if gradient clip fails (only for h1 without bg-clip-text) */
body.dark-mode h1.text-4xl.font-bold:not(.bg-clip-text) {
    color: #60a5fa !important;
}

/* Login page footer text */
body.dark-mode .text-center.mt-8 .text-gray-600,
body.dark-mode .text-center.mt-8 .text-gray-500 {
    color: var(--dark-text-muted) !important;
}

/* Login page primary icon colors */
body.dark-mode .text-primary-500 {
    color: var(--dark-accent) !important;
}

/* Login page error alert */
body.dark-mode .bg-gradient-to-r.from-red-500.to-pink-500 {
    background: linear-gradient(90deg, #dc2626 0%, #ec4899 100%) !important;
}

body.dark-mode .bg-gradient-to-r.from-red-500.to-pink-500.text-white {
    color: #ffffff !important;
}