/* 
 * سِفر قيس Platform - Enhanced Harmonious Dark Mode Implementation
 * 
 * A sophisticated dark mode that respects the Arabic scholarly aesthetic while
 * maintaining excellent usability with traditional dark backgrounds enhanced by
 * manuscript-inspired accents and cultural authenticity.
 * 
 * Integration: Harmoniously extends styles.css foundation authority
 * Enhancement: Leverages sefr-design-system.css tokens and scholarly-article-creation.css components
 * Performance: Optimized cascade with design system integration
 * 
 * "في الظلمة نور العلم يضيء"
 * (In darkness, the light of knowledge shines)
 */

/* ===== ENHANCED DARK MODE FOUNDATION VARIABLES ===== */
:root {
  /* Traditional Dark Mode Backgrounds (Usability Priority) */
  --dark-background-primary: #0F1419;      /* Deep scholarly night */
  --dark-background-secondary: #1A1F2E;    /* Card backgrounds */
  --dark-background-tertiary: #252A3A;     /* Elevated surfaces */
  --dark-background-quaternary: #2F3441;   /* Interactive elements */
  
  /* Manuscript-Inspired Warm Neutrals (Cultural Integration) */
  --dark-manuscript-bg: #1C1815;           /* Warm manuscript base */
  --dark-parchment-tint: #2A2520;          /* Aged parchment darkness */
  --dark-papyrus-tint: #332C24;            /* Ancient papyrus darkness */
  
  /* Enhanced Text Colors with Manuscript Consideration */
  --dark-text-primary: #F7F9FA;            /* Pure readability */
  --dark-text-secondary: #E1E8ED;          /* Secondary content */
  --dark-text-muted: #A0ADB8;              /* Muted text */
  --dark-text-manuscript: #E8DDD0;         /* Manuscript text warmth */
  --dark-text-calligraphy: #F2E8D8;        /* Calligraphic text */
  
  /* Manuscript-Inspired Accent Integration */
  --dark-accent-gold: #D4A574;             /* Manuscript gold (from design system) */
  --dark-accent-gold-hover: #E5B685;       /* Gold hover state */
  --dark-accent-gold-light: #F0C896;       /* Light gold accents */
  --dark-accent-copper: #B87333;           /* Sacred copper (from design system) */
  --dark-accent-amber: #C9A961;            /* Geometric gold (from design system) */
  
  /* Scholarly Blue Integration */
  --dark-scholarly-blue: #4A7BA8;          /* Enhanced manuscript blue */
  --dark-scholarly-blue-light: #5A8BC2;    /* Light scholarly blue */
  --dark-scholarly-blue-dark: #3A6B98;     /* Dark scholarly blue */
  
  /* Cultural Green Integration */
  --dark-islamic-green: #5A9667;           /* Enhanced manuscript green */
  --dark-islamic-green-light: #6AAA77;     /* Light Islamic green */
  --dark-islamic-green-dark: #4A8557;      /* Dark Islamic green */
  
  /* Enhanced Border System */
  --dark-border-subtle: #374151;           /* Subtle borders */
  --dark-border-default: #4B5563;          /* Default borders */
  --dark-border-emphasis: #6B7280;         /* Emphasized borders */
  --dark-border-manuscript: #8B7355;       /* Manuscript-inspired borders */
  
  /* Sophisticated Shadow System with Manuscript Integration */
  --dark-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
  --dark-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --dark-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
  --dark-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.25);
  
  /* Manuscript-Inspired Shadows */
  --dark-shadow-manuscript: 0 8px 32px rgba(212, 165, 116, 0.12);
  --dark-shadow-illumination: 0 0 24px rgba(212, 165, 116, 0.15);
  --dark-shadow-calligraphy: 0 4px 16px rgba(201, 169, 97, 0.1);
  --dark-shadow-ornamental: 0 6px 20px rgba(184, 115, 51, 0.1);
  
  /* Status Colors - Dark Mode Optimized */
  --dark-success: #10B981;                 /* Emerald success */
  --dark-success-bg: rgba(16, 185, 129, 0.15);
  --dark-warning: #F59E0B;                 /* Amber warning */
  --dark-warning-bg: rgba(245, 158, 11, 0.15);
  --dark-error: #EF4444;                   /* Red error */
  --dark-error-bg: rgba(239, 68, 68, 0.15);
  --dark-info: #3B82F6;                    /* Blue info */
  --dark-info-bg: rgba(59, 130, 246, 0.15);
  
  /* Form and Interactive Elements */
  --dark-input-background: #252A3A;
  --dark-input-border: #4B5563;
  --dark-input-focus: var(--dark-accent-gold);
  --dark-input-placeholder: #9CA3AF;
  
  /* Enhanced Manuscript Gradients for Special Elements */
  --dark-manuscript-gradient: linear-gradient(135deg, var(--dark-manuscript-bg) 0%, var(--dark-background-secondary) 100%);
  --dark-parchment-gradient: linear-gradient(135deg, var(--dark-parchment-tint) 0%, var(--dark-background-tertiary) 100%);
  --dark-illumination-gradient: linear-gradient(135deg, var(--dark-accent-gold) 0%, var(--dark-accent-copper) 100%);
  
  /* Missing CSS Variables - Light Mode Defaults */
  --parchment-secondary: linear-gradient(135deg, #FBF8F1 0%, #F4F1E8 50%, #F0EBE3 100%);
  --manuscript-shadow-soft: 0 4px 20px rgba(138, 90, 68, 0.08);
  --illumination-primary: linear-gradient(135deg, #D4A574 0%, #C9A961 50%, #B87333 100%);
}

/* ===== ENHANCED DARK MODE ACTIVATION ===== */
body.dark-mode {
  /* Override Foundation Variables with Dark Mode Harmony */
  --primary-color: var(--dark-scholarly-blue);
  --primary-light: var(--dark-scholarly-blue-light);
  --primary-dark: var(--dark-scholarly-blue-dark);
  
  --accent-color: var(--dark-accent-gold);
  --accent-hover: var(--dark-accent-gold-hover);
  --accent-light: var(--dark-accent-gold-light);
  
  --background-color: var(--dark-background-primary);
  --card-background: var(--dark-background-secondary);
  --alt-background: var(--dark-background-tertiary);
  
  --text-color: var(--dark-text-primary);
  --text-dark: var(--dark-text-primary);
  --text-muted: var(--dark-text-muted);
  
  --border-color: var(--dark-border-default);
  --border-dark: var(--dark-border-emphasis);
  
  --input-background: var(--dark-input-background);
  --input-border: var(--dark-input-border);
  --input-focus: var(--dark-input-focus);
  
  --success: var(--dark-success);
  --error: var(--dark-error);
  --warning: var(--dark-warning);
  --info: var(--dark-info);
  
  /* Enhanced Shadow System */
  --shadow-sm: var(--dark-shadow-sm);
  --shadow-md: var(--dark-shadow-md);
  --shadow-lg: var(--dark-shadow-lg);
  --shadow-xl: var(--dark-shadow-xl);
  
  /* ===== MANUSCRIPT COLOR SYSTEM DARK MODE INTEGRATION ===== */
  /* Bridge sophisticated manuscript aesthetics with dark mode override architecture */
  
  /* Manuscript Primary Color Overrides - Enhanced for Dark Mode */
  --manuscript-gold-primary: #E5B685;         /* Lighter gold for dark backgrounds */
  --manuscript-gold-secondary: #D4A574;       /* Warm manuscript gold */
  --manuscript-gold-light: #F0C896;           /* Light gold accents */
  --manuscript-gold-dark: #B8925A;            /* Deep gold for emphasis */
  
  --manuscript-blue-primary: #5A8BC2;         /* Enhanced scholarly blue for dark mode */
  --manuscript-blue-secondary: #4A7BA8;       /* Readable blue secondary */
  --manuscript-blue-light: #6A9BD2;           /* Light blue accents */
  --manuscript-blue-dark: #3A6B98;            /* Dark blue for contrast */
  
  --manuscript-red-primary: #E57373;          /* Softened red for dark mode */
  --manuscript-red-secondary: #D66B6B;        /* Red secondary */
  --manuscript-red-light: #EF9A9A;            /* Light red accents */
  --manuscript-red-dark: #C74545;             /* Dark red for emphasis */
  
  --manuscript-green-primary: #81C784;        /* Enhanced green for dark mode */
  --manuscript-green-secondary: #66BB6A;      /* Green secondary */
  --manuscript-green-light: #A5D6A7;          /* Light green accents */
  --manuscript-green-dark: #4CAF50;           /* Dark green for contrast */
  
  /* Sacred Geometry Colors - Dark Mode Optimized */
  --sacred-copper: #D4A574;                   /* Aligned with manuscript gold */
  --sacred-silver: #E5E5E5;                   /* Brighter silver for dark backgrounds */
  --sacred-bronze: #E5B685;                   /* Warm bronze for dark mode */
  --sacred-platinum: #F5F5F5;                 /* Light platinum for contrast */
  
  /* Illumination Gradients - Dark Mode Compatible */
  --illumination-primary: linear-gradient(135deg, var(--manuscript-gold-primary) 0%, var(--manuscript-gold-secondary) 50%, var(--sacred-copper) 100%);
  --illumination-secondary: linear-gradient(45deg, var(--manuscript-blue-primary) 0%, var(--manuscript-blue-secondary) 100%);
  --illumination-tertiary: linear-gradient(225deg, var(--manuscript-red-primary) 0%, var(--manuscript-red-secondary) 100%);
  --illumination-quaternary: linear-gradient(315deg, var(--manuscript-green-primary) 0%, var(--manuscript-green-secondary) 100%);
  
  /* Parchment Gradients - Dark Mode Adapted */
  --parchment-primary: radial-gradient(ellipse at center, var(--dark-background-secondary) 0%, var(--dark-background-tertiary) 50%, var(--dark-background-quaternary) 100%);
  --parchment-secondary: linear-gradient(135deg, var(--dark-background-secondary) 0%, var(--dark-background-tertiary) 50%, var(--dark-background-quaternary) 100%);
  --parchment-aged: radial-gradient(circle at 30% 20%, var(--dark-background-tertiary) 0%, var(--dark-background-quaternary) 40%, var(--dark-border-subtle) 100%);
  
  /* Illumination Glow Effects - Dark Mode Enhanced */
  --illumination-glow-soft: 0 0 20px rgba(229, 182, 133, 0.2);
  --illumination-glow-medium: 0 0 30px rgba(229, 182, 133, 0.3);
  --illumination-glow-strong: 0 0 40px rgba(229, 182, 133, 0.4);
  --illumination-glow-divine: 0 0 60px rgba(229, 182, 133, 0.5);
  
  /* Manuscript Shadows - Dark Mode Optimized */
  --manuscript-shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.3);
  --manuscript-shadow-medium: 0 8px 32px rgba(0, 0, 0, 0.4);
  --manuscript-shadow-strong: 0 12px 48px rgba(0, 0, 0, 0.5);
  --manuscript-shadow-dramatic: 0 20px 64px rgba(0, 0, 0, 0.6);
  
  /* Dark Mode Overrides for Source Form Variables */
  --parchment-secondary: var(--dark-parchment-gradient);
  --illumination-primary: linear-gradient(135deg, var(--dark-accent-gold) 0%, var(--dark-accent-copper) 100%);
  
  /* Set Base Styles */
  color: var(--dark-text-primary);
  background-color: var(--dark-background-primary);
}

/* ===== TEXT SELECTION DARK MODE FIX ===== */

/* Global Text Selection - Dark Mode */
body.dark-mode ::selection {
  background: rgba(212, 165, 116, 0.3); /* Gold background with transparency */
  color: var(--dark-text-primary); /* Light text for visibility */
}

body.dark-mode ::-moz-selection {
  background: rgba(212, 165, 116, 0.3);
  color: var(--dark-text-primary);
}

/* Input Field Text Selection - Dark Mode */
body.dark-mode input::selection,
body.dark-mode textarea::selection,
body.dark-mode .form-control::selection {
  background: rgba(229, 182, 133, 0.4); /* Lighter gold for better contrast */
  color: var(--dark-text-primary);
}

body.dark-mode input::-moz-selection,
body.dark-mode textarea::-moz-selection,
body.dark-mode .form-control::-moz-selection {
  background: rgba(229, 182, 133, 0.4);
  color: var(--dark-text-primary);
}

/* Source Form Input Selection - Dark Mode */
body.dark-mode .source-item input::selection,
body.dark-mode .source-item textarea::selection {
  background: rgba(240, 200, 150, 0.5); /* Very light gold for maximum contrast */
  color: var(--dark-background-primary); /* Dark text on light background */
}

body.dark-mode .source-item input::-moz-selection,
body.dark-mode .source-item textarea::-moz-selection {
  background: rgba(240, 200, 150, 0.5);
  color: var(--dark-background-primary);
}

/* ===== ENHANCED MANUSCRIPT FORM COMPONENTS DARK MODE ===== */

/* Form Steps and Headers - Dark Mode Integration */
body.dark-mode .form-step {
  background: var(--parchment-primary);
}

body.dark-mode .step-header h2 {
  color: var(--manuscript-blue-primary);
}

body.dark-mode .step-header::before,
body.dark-mode .step-header::after {
  background: var(--illumination-primary);
  box-shadow: var(--illumination-glow-soft);
}

/* Form Groups and Labels - Enhanced Dark Mode */
body.dark-mode .form-group label {
  color: var(--manuscript-blue-primary);
}

body.dark-mode .form-group label.required::after {
  color: var(--manuscript-red-primary);
}

body.dark-mode .form-group:focus-within label {
  color: var(--manuscript-gold-primary);
}

/* Large Input Fields - Dark Mode Compatible */
body.dark-mode .large-input {
  background: var(--parchment-secondary);
  border-color: var(--manuscript-gold-light);
  color: var(--dark-text-primary);
}

body.dark-mode .large-input:focus {
  border-color: var(--manuscript-gold-primary);
  box-shadow: var(--illumination-glow-soft);
  background: var(--dark-background-secondary);
  color: var(--dark-text-primary);
}

/* SefrEditor Wrapper - Dark Mode Integration */
body.dark-mode .sefr-editor-wrapper {
  border-color: var(--manuscript-gold-light);
  background: var(--dark-background-secondary);
  box-shadow: var(--manuscript-shadow-medium);
}

body.dark-mode .sefr-editor-wrapper::before {
  background: var(--illumination-primary);
}

body.dark-mode .sefr-editor-wrapper:focus-within {
  border-color: var(--manuscript-gold-primary);
  box-shadow: var(--illumination-glow-medium);
}

/* Editor Footer - Dark Mode Enhanced */
body.dark-mode .editor-footer {
  background: var(--parchment-secondary);
  border-top-color: var(--manuscript-gold-light);
}

body.dark-mode .editor-stats span {
  color: var(--manuscript-blue-primary);
}

body.dark-mode .editor-stats span:hover {
  color: var(--manuscript-gold-primary);
}

/* Form Navigation - Dark Mode Integration */
body.dark-mode .form-navigation {
  background: var(--parchment-secondary);
  border-top-color: var(--manuscript-gold-light);
}

body.dark-mode .form-navigation .btn {
  border-color: var(--manuscript-gold-light);
  background: var(--dark-background-secondary);
  color: var(--manuscript-blue-primary);
}

body.dark-mode .form-navigation .btn:hover {
  background: var(--manuscript-gold-primary);
  color: var(--dark-background-primary);
  box-shadow: var(--illumination-glow-soft);
}

body.dark-mode .form-navigation .btn-primary {
  background: var(--illumination-primary);
  border-color: var(--manuscript-gold-primary);
  color: var(--dark-background-primary);
}

body.dark-mode .form-navigation .btn-primary:hover {
  background: var(--manuscript-gold-primary);
  box-shadow: var(--illumination-glow-medium);
}

/* Sidebar Widgets - Dark Mode Enhanced */
body.dark-mode .sidebar-widget {
  background: var(--parchment-secondary);
  border-color: var(--manuscript-gold-light);
  box-shadow: var(--manuscript-shadow-soft);
}

body.dark-mode .sidebar-widget h3 {
  color: var(--manuscript-blue-primary);
  border-bottom-color: var(--manuscript-gold-light);
}

body.dark-mode .template-btn {
  background: var(--dark-background-secondary);
  border-color: var(--manuscript-gold-light);
  color: var(--manuscript-blue-primary);
}

body.dark-mode .template-btn:hover {
  background: var(--manuscript-gold-primary);
  color: var(--dark-background-primary);
  box-shadow: var(--illumination-glow-soft);
}

/* Tips and Guidance - Dark Mode Integration */
body.dark-mode .tips-list li {
  color: var(--dark-text-secondary);
}

body.dark-mode .tips-list li::before {
  color: var(--manuscript-gold-primary);
}

/* Source Management - Dark Mode Enhanced */
body.dark-mode .source-item {
  background: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
  box-shadow: var(--dark-shadow-md);
  color: var(--dark-text-primary);
}

body.dark-mode .source-header {
  background: rgba(212, 165, 116, 0.1);
  color: var(--dark-text-primary);
  border-bottom-color: var(--dark-accent-gold);
}

body.dark-mode .btn-remove-source {
  color: var(--manuscript-red-primary);
}

body.dark-mode .btn-remove-source:hover {
  background: var(--manuscript-red-primary);
  color: var(--dark-background-primary);
}

/* ===== KEYWORDS AND TAG SUGGESTIONS DARK MODE FIX ===== */

/* Keywords Input Field - Dark Mode Focus Fix */
body.dark-mode #tags {
  background-color: var(--dark-background-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-default) !important;
}

body.dark-mode #tags:focus {
  background-color: var(--dark-background-tertiary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-accent-gold) !important;
  box-shadow: 0 0 0 3px rgba(229, 182, 133, 0.3) !important;
}

body.dark-mode #tags::placeholder {
  color: var(--dark-input-placeholder) !important;
}

/* Tag Suggestions Container - Dark Mode */
body.dark-mode .tag-suggestions {
  background: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
  box-shadow: var(--dark-shadow-lg);
}

/* Tag Suggestion Items - Dark Mode Enhanced Visibility */
body.dark-mode .tag-suggestion {
  background: var(--dark-background-tertiary) !important;
  border-color: var(--dark-border-default) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-mode .tag-suggestion:hover {
  background: var(--dark-accent-gold) !important;
  color: var(--dark-background-primary) !important;
  border-color: var(--dark-accent-gold-hover) !important;
}

body.dark-mode .tag-suggestion:focus {
  background: var(--dark-accent-gold) !important;
  color: var(--dark-background-primary) !important;
  border-color: var(--dark-accent-gold-hover) !important;
  outline: 3px solid rgba(229, 182, 133, 0.5) !important;
  outline-offset: 2px !important;
}

body.dark-mode .tag-suggestion.used,
body.dark-mode .tag-suggestion.applied {
  background: var(--dark-accent-gold) !important;
  color: var(--dark-background-primary) !important;
  border-color: var(--dark-accent-gold-hover) !important;
}

/* Suggestions Label - Dark Mode */
body.dark-mode .suggestions-label {
  color: var(--dark-text-muted) !important;
}

/* Keywords Input Text Selection - Dark Mode */
body.dark-mode #tags::selection {
  background: rgba(240, 200, 150, 0.5); /* Very light gold for maximum contrast */
  color: var(--dark-background-primary); /* Dark text on light background */
}

body.dark-mode #tags::-moz-selection {
  background: rgba(240, 200, 150, 0.5);
  color: var(--dark-background-primary);
}

/* ===== ARABIC RTL & MANUSCRIPT TYPOGRAPHY DARK MODE ===== */

/* Arabic Text Enhancement in Dark Mode */
body.dark-mode .creation-title,
body.dark-mode .manuscript-title {
  color: var(--manuscript-gold-primary);
  text-shadow: 0 2px 8px rgba(229, 182, 133, 0.3);
}

body.dark-mode .creation-title .highlight {
  color: var(--manuscript-blue-primary);
}

/* Arabic Form Labels - Enhanced Readability */
body.dark-mode .form-group label[lang="ar"],
body.dark-mode .arabic-label {
  color: var(--manuscript-blue-primary);
  font-weight: 600;
  letter-spacing: var(--tracking-arabic, 0.02em);
  word-spacing: var(--word-spacing-arabic, 0.15em);
}

/* Poetry and Quranic Text in Dark Mode */
body.dark-mode .poetry-text,
body.dark-mode .quranic-text {
  color: var(--dark-text-manuscript);
  background: var(--parchment-aged);
  border-right: 4px solid var(--manuscript-gold-primary);
  box-shadow: var(--manuscript-shadow-soft);
}

/* Calligraphy Elements - Dark Mode Enhanced */
body.dark-mode .calligraphy-element {
  color: var(--dark-text-calligraphy);
  background: var(--dark-manuscript-gradient);
  border-color: var(--manuscript-gold-light);
}

/* Arabic Input Fields - Enhanced Dark Mode */
body.dark-mode input[lang="ar"],
body.dark-mode textarea[lang="ar"],
body.dark-mode .arabic-input {
  background: var(--parchment-secondary);
  color: var(--dark-text-primary);
  border-color: var(--manuscript-gold-light);
  font-family: var(--font-body);
}

body.dark-mode input[lang="ar"]:focus,
body.dark-mode textarea[lang="ar"]:focus,
body.dark-mode .arabic-input:focus {
  border-color: var(--manuscript-gold-primary);
  box-shadow: var(--illumination-glow-soft);
  background: var(--dark-background-secondary);
}

/* Manuscript Decorative Elements */
body.dark-mode .manuscript-ornament {
  color: var(--manuscript-gold-primary);
  filter: drop-shadow(0 2px 4px rgba(229, 182, 133, 0.3));
}

body.dark-mode .islamic-pattern {
  fill: var(--manuscript-gold-primary);
  opacity: 0.6;
}

/* Enhanced Tooltips and Help Text */
body.dark-mode .tooltip-content,
body.dark-mode .help-text {
  background: var(--dark-background-secondary);
  color: var(--dark-text-secondary);
  border-color: var(--manuscript-gold-light);
  box-shadow: var(--manuscript-shadow-medium);
}

/* Character Counter and Field Help */
body.dark-mode .char-counter,
body.dark-mode .field-help {
  color: var(--dark-text-muted);
}

body.dark-mode .char-counter.warning {
  color: var(--manuscript-red-primary);
}

/* Progressive Enhancement for Manuscript Aesthetics */
body.dark-mode .scholarly-creation-container {
  background: var(--parchment-primary);
  background-image: var(--geometric-pattern-primary);
}

body.dark-mode .scholarly-creation-container::before {
  background: var(--illumination-primary);
  opacity: 0.08;
}

/* Enhanced Focus States for Arabic Content */
body.dark-mode *[contenteditable="true"]:focus,
body.dark-mode .sefr-editor-content:focus {
  outline: 2px solid var(--manuscript-gold-primary);
  outline-offset: 2px;
  background: var(--parchment-secondary);
}

/* ===== PRESERVED DARK MODE TOGGLE ANIMATION (Enhanced) ===== */
.theme-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 var(--space-2);
}

.theme-toggle-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  background-color: var(--alt-background);
  border: 2px solid var(--border-color);
  color: var(--text-color);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  box-shadow: var(--shadow-sm);
}

.theme-toggle-btn:hover {
  background-color: var(--accent-light);
  border-color: var(--accent-color);
  transform: translateY(-2px) scale(1.05);
  box-shadow: var(--shadow-md);
}

.theme-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.3);
}

.theme-toggle-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Enhanced Icon Animation System */
.theme-toggle .icon {
  position: absolute;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.6s cubic-bezier(0.18, 0.89, 0.32, 1.28), 
              opacity 0.4s ease,
              filter 0.3s ease;
}

.theme-toggle .dark-icon {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
  filter: drop-shadow(0 2px 4px rgba(212, 165, 116, 0.3));
}

.theme-toggle .light-icon {
  opacity: 0;
  transform: translateY(12px) rotate(-90deg) scale(0.8);
  filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.3));
}

/* Dark Mode Active State with Enhanced Animation */
body.dark-mode .theme-toggle .dark-icon {
  opacity: 0;
  transform: translateY(-12px) rotate(90deg) scale(0.8);
  filter: drop-shadow(0 2px 4px rgba(212, 165, 116, 0.2));
}

body.dark-mode .theme-toggle .light-icon {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
  filter: drop-shadow(0 2px 4px rgba(255, 193, 7, 0.4));
}

/* Enhanced Admin Sidebar Toggle */
.admin-sidebar-footer .theme-toggle-btn {
  background-color: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.admin-sidebar-footer .theme-toggle-btn:hover {
  background-color: rgba(212, 165, 116, 0.2);
  border-color: var(--dark-accent-gold);
}

body.dark-mode .admin-sidebar-footer .theme-toggle-btn {
  background-color: rgba(0, 0, 0, 0.2);
  border-color: rgba(0, 0, 0, 0.3);
}

body.dark-mode .admin-sidebar-footer .theme-toggle-btn:hover {
  background-color: rgba(212, 165, 116, 0.2);
  border-color: var(--dark-accent-gold);
}

/* ===== ENHANCED COMPONENT THEMING ===== */

/* ===== SEFREDITOR TOOLBAR BUTTONS - SOPHISTICATED DARK MODE ===== */
/* Override white gradient overlays with beautiful dark mode equivalents */

/* Base SefrEditor toolbar button - Perfect dark mode gradients */
body.dark-mode .sefr-toolbar-button {
  background: 
    linear-gradient(135deg, rgba(37, 42, 58, 0.95) 0%, rgba(26, 31, 46, 0.95) 100%),
    radial-gradient(circle at center, rgba(212, 165, 116, 0.15) 0%, transparent 70%) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-default) !important;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* Sophisticated hover state - Enhanced golden glow */
body.dark-mode .sefr-toolbar-button:hover {
  background: 
    linear-gradient(135deg, rgba(52, 58, 74, 0.95) 0%, rgba(41, 47, 62, 0.95) 100%),
    radial-gradient(circle at center, rgba(212, 165, 116, 0.25) 0%, transparent 70%) !important;
  border-color: var(--dark-accent-gold) !important;
  box-shadow: 
    0 4px 16px rgba(0, 0, 0, 0.2),
    0 0 0 1px var(--dark-accent-gold, #D4A574),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

/* Active state - Beautiful pressed effect */
body.dark-mode .sefr-toolbar-button:active,
body.dark-mode .sefr-toolbar-button.active {
  background: 
    linear-gradient(135deg, rgba(212, 165, 116, 0.9) 0%, rgba(201, 169, 97, 0.9) 100%),
    radial-gradient(circle at center, rgba(15, 20, 25, 0.3) 0%, transparent 70%) !important;
  color: var(--dark-background-primary) !important;
  border-color: var(--dark-accent-gold-hover, #E5B685) !important;
  box-shadow: 
    inset 0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 0 1px var(--dark-accent-gold-hover, #E5B685);
  transform: translateY(0);
}

/* Focus state - Accessibility enhancement */
body.dark-mode .sefr-toolbar-button:focus {
  outline: 2px solid var(--dark-accent-gold) !important;
  outline-offset: 2px !important;
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.15),
    0 0 0 3px rgba(212, 165, 116, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* Disabled state - Subtle and accessible */
body.dark-mode .sefr-toolbar-button:disabled {
  background: 
    linear-gradient(135deg, rgba(26, 31, 46, 0.6) 0%, rgba(37, 42, 58, 0.6) 100%),
    radial-gradient(circle at center, rgba(212, 165, 116, 0.05) 0%, transparent 70%) !important;
  color: var(--dark-text-muted, #A0ADB8) !important;
  border-color: var(--dark-border-subtle, #374151) !important;
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Enhanced ripple effect for dark mode */
body.dark-mode .sefr-toolbar-button::before {
  background: radial-gradient(circle, var(--dark-accent-gold, #D4A574) 0%, transparent 70%) !important;
}

/* Icon color inheritance - Perfect visibility */
body.dark-mode .sefr-toolbar-button i,
body.dark-mode .sefr-toolbar-button svg,
body.dark-mode .sefr-toolbar-button [class*="icon"] {
  color: inherit !important;
  opacity: 1 !important;
}

/* Dropdown buttons - Consistent styling */
body.dark-mode .sefr-toolbar-select {
  background: 
    linear-gradient(135deg, rgba(26, 31, 46, 0.95) 0%, rgba(37, 42, 58, 0.95) 100%),
    radial-gradient(circle at center, rgba(212, 165, 116, 0.1) 0%, transparent 70%) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-default) !important;
}

body.dark-mode .sefr-toolbar-select:hover {
  background: 
    linear-gradient(135deg, rgba(41, 47, 62, 0.95) 0%, rgba(52, 58, 74, 0.95) 100%),
    radial-gradient(circle at center, rgba(212, 165, 116, 0.2) 0%, transparent 70%) !important;
  border-color: var(--dark-accent-gold) !important;
}

body.dark-mode .sefr-toolbar-select:focus {
  border-color: var(--dark-accent-gold) !important;
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.3) !important;
  outline: none !important;
}

/* Header and Navigation */
body.dark-mode .site-header {
  background-color: var(--dark-background-secondary);
  border-bottom: 1px solid var(--dark-border-default);
  box-shadow: var(--dark-shadow-md);
}

body.dark-mode .site-brand h1 {
  color: var(--dark-text-primary);
}

body.dark-mode .nav-list a {
  color: var(--dark-text-secondary);
}

body.dark-mode .nav-list a:hover,
body.dark-mode .nav-list a.active {
  color: var(--dark-accent-gold);
}

body.dark-mode .nav-list a::after {
  background-color: var(--dark-accent-gold);
}

/* Enhanced Search Components */
body.dark-mode .search-form input,
body.dark-mode .search-input-container input {
  background-color: var(--dark-input-background);
  border-color: var(--dark-input-border);
  color: var(--dark-text-primary);
}

body.dark-mode .search-form input:focus,
body.dark-mode .search-input-container input:focus {
  border-color: var(--dark-accent-gold);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.2);
  background-color: var(--dark-background-tertiary);
}

body.dark-mode .search-form input::placeholder,
body.dark-mode .search-input-container input::placeholder {
  color: var(--dark-input-placeholder);
}

body.dark-mode .search-suggestions {
  background-color: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
  box-shadow: var(--dark-shadow-lg);
}

body.dark-mode .suggestion-item {
  border-bottom-color: var(--dark-border-subtle);
}

body.dark-mode .suggestion-item:hover,
body.dark-mode .suggestion-item.active {
  background-color: var(--dark-background-tertiary);
}

body.dark-mode .suggestion-text strong {
  color: var(--dark-accent-gold);
}

body.dark-mode .suggestion-type {
  color: var(--dark-text-muted);
}

/* Enhanced User Interface Elements */
body.dark-mode .icon-button {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-text-secondary);
}

body.dark-mode .icon-button:hover {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
}

body.dark-mode .user-menu-trigger {
  border-color: var(--dark-border-default);
}

body.dark-mode .user-dropdown {
  background-color: var(--dark-background-secondary);
  border-color: var(--dark-border-emphasis);
  box-shadow: var(--dark-shadow-lg);
}

body.dark-mode .user-links a {
  color: var(--dark-text-secondary);
}

body.dark-mode .user-links a:hover {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-accent-gold);
}

body.dark-mode .user-links .separator {
  background-color: var(--dark-border-subtle);
}

/* Mobile Navigation Enhancement */
body.dark-mode .mobile-toggle span {
  background-color: var(--dark-text-primary);
}

body.dark-mode .mobile-toggle:hover {
  background-color: var(--dark-background-tertiary);
}

body.dark-mode .mobile-toggle:active {
  background-color: var(--dark-accent-light);
}

/* ===== ENHANCED CARD SYSTEM ===== */
body.dark-mode .article-card,
body.dark-mode .researcher-card,
body.dark-mode .sidebar-widget,
body.dark-mode .manuscript-card {
  background-color: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
  box-shadow: var(--dark-shadow-md);
}

body.dark-mode .article-card:hover,
body.dark-mode .researcher-card:hover,
body.dark-mode .sidebar-widget:hover {
  box-shadow: var(--dark-shadow-lg);
  border-color: var(--dark-accent-gold);
}

body.dark-mode .article-card h3 a,
body.dark-mode .researcher-card h3 a {
  color: var(--dark-text-primary);
}

body.dark-mode .article-card h3 a:hover,
body.dark-mode .researcher-card h3 a:hover {
  color: var(--dark-accent-gold);
}

body.dark-mode .article-excerpt,
body.dark-mode .researcher-bio p {
  color: var(--dark-text-muted);
}

body.dark-mode .article-stats {
  border-top-color: var(--dark-border-subtle);
  color: var(--dark-text-muted);
}

body.dark-mode .article-stats i {
  color: var(--dark-accent-gold);
}

/* Enhanced Badge System */
body.dark-mode .era-badge,
body.dark-mode .poetry-badge {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
  box-shadow: var(--dark-shadow-sm);
}

body.dark-mode .poetry-badge {
  background-color: var(--dark-scholarly-blue);
  color: var(--dark-text-primary);
}

/* ===== MANUSCRIPT-INSPIRED SCHOLARLY COMPONENTS ===== */

/* Enhanced Verse Container for Dark Mode */
body.dark-mode .verse-container,
body.dark-mode .quranic-guidance {
  background: var(--dark-manuscript-gradient);
  border-color: var(--dark-accent-gold);
  box-shadow: var(--dark-shadow-manuscript);
  backdrop-filter: blur(8px);
}

body.dark-mode .verse-container:hover,
body.dark-mode .quranic-guidance:hover {
  box-shadow: var(--dark-shadow-illumination);
  border-color: var(--dark-accent-gold-hover);
}

body.dark-mode .verse-text {
  color: var(--dark-text-calligraphy);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .verse-reference {
  color: var(--dark-accent-amber);
}

/* Enhanced Poetry Block Theming */
body.dark-mode .poetry-block,
body.dark-mode .poetry-content {
  background: var(--dark-parchment-gradient);
  border-color: var(--dark-accent-gold);
  box-shadow: var(--dark-shadow-calligraphy);
}

body.dark-mode .poetry-content .hemistich:first-child::after {
  color: var(--dark-accent-copper);
}

body.dark-mode .poetry-meta {
  color: var(--dark-text-muted);
}

body.dark-mode .poetry-meta .poet {
  color: var(--dark-text-manuscript);
}

body.dark-mode .poetry-verse {
  color: var(--dark-text-calligraphy);
}

/* Enhanced Illuminated Initial */
body.dark-mode .illuminated-initial {
  background: var(--dark-illumination-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(212, 165, 116, 0.3));
}

/* Citation and Reference Enhancement */
body.dark-mode .citation,
body.dark-mode .citation-reference {
  background-color: rgba(212, 165, 116, 0.2);
  border-right-color: var(--dark-accent-gold);
  color: var(--dark-text-manuscript);
}

body.dark-mode .citation::before,
body.dark-mode .citation-reference::before {
  color: var(--dark-accent-copper);
}

body.dark-mode .citation-source {
  color: var(--dark-text-muted);
}

/* Enhanced Manuscript Card */
body.dark-mode .manuscript-card {
  background: var(--dark-manuscript-gradient);
  border-color: var(--dark-accent-gold);
  box-shadow: var(--dark-shadow-manuscript);
}

body.dark-mode .manuscript-card:hover {
  box-shadow: var(--dark-shadow-illumination);
  border-color: var(--dark-accent-gold-hover);
}

/* ===== ENHANCED SIDEBAR WIDGETS ===== */
body.dark-mode .sidebar-widget h3,
body.dark-mode .widget-title {
  color: var(--dark-text-primary);
}

body.dark-mode .sidebar-widget h3::after,
body.dark-mode .widget-title::after {
  background-color: var(--dark-accent-gold);
}

body.dark-mode .eras-list a,
body.dark-mode .content-type,
body.dark-mode .era-item,
body.dark-mode .category-item {
  color: var(--dark-text-secondary);
}

body.dark-mode .eras-list a:hover,
body.dark-mode .content-type:hover,
body.dark-mode .era-item:hover,
body.dark-mode .category-item:hover {
  color: var(--dark-accent-gold);
  background-color: var(--dark-background-tertiary);
}

body.dark-mode .eras-list li,
body.dark-mode .article-item {
  border-bottom-color: var(--dark-border-subtle);
}

body.dark-mode .eras-list .count,
body.dark-mode .count {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-text-muted);
}

body.dark-mode .eras-list a:hover .count,
body.dark-mode .content-type:hover .count,
body.dark-mode .era-item:hover .count,
body.dark-mode .category-item:hover .count {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
}

/* Enhanced Tag Cloud */
body.dark-mode .tags-cloud .tag,
body.dark-mode .tag-cloud .tag,
body.dark-mode .tag {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-text-secondary);
}

body.dark-mode .tags-cloud .tag:hover,
body.dark-mode .tag-cloud .tag:hover,
body.dark-mode .tag-cloud .tag.active,
body.dark-mode .tag:hover {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
}

/* ===== ENHANCED FORM SYSTEM ===== */
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="search"],
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .form-control {
  background-color: var(--dark-input-background);
  color: var(--dark-text-primary);
  border-color: var(--dark-input-border);
}

body.dark-mode input[type="text"]:focus,
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode input[type="search"]:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body.dark-mode .form-control:focus {
  border-color: var(--dark-accent-gold);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.2);
  background-color: var(--dark-background-tertiary);
  color: var(--dark-text-primary) !important; /* Ensure light text on dark background */
}

/* Source Form Input Focus - Enhanced Visibility */
body.dark-mode .source-item input[type="text"]:focus,
body.dark-mode .source-item input[type="email"]:focus,
body.dark-mode .source-item input[type="url"]:focus,
body.dark-mode .source-item textarea:focus,
body.dark-mode .source-item select:focus {
  background-color: var(--dark-background-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-accent-gold) !important;
  box-shadow: 0 0 0 3px rgba(229, 182, 133, 0.3) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: var(--dark-input-placeholder);
}

body.dark-mode .form-label,
body.dark-mode label {
  color: var(--dark-text-secondary);
}

body.dark-mode .form-text,
body.dark-mode .form-hint {
  color: var(--dark-text-muted);
}

body.dark-mode .form-check-label {
  color: var(--dark-text-secondary);
}

body.dark-mode .form-check-input {
  border-color: var(--dark-input-border);
  background-color: var(--dark-input-background);
}

body.dark-mode .form-check-input:checked {
  background-color: var(--dark-accent-gold);
  border-color: var(--dark-accent-gold);
}

/* Enhanced Form Controls for Manuscript Interface */
body.dark-mode .form-control-manuscript {
  background: var(--dark-manuscript-gradient);
  border-color: var(--dark-accent-gold);
  color: var(--dark-text-manuscript);
  box-shadow: var(--dark-shadow-calligraphy);
}

body.dark-mode .form-control-manuscript:focus {
  border-color: var(--dark-accent-copper);
  box-shadow: var(--dark-shadow-illumination);
}

/* ===== ENHANCED BUTTON SYSTEM ===== */
body.dark-mode .btn-primary {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
  border-color: var(--dark-accent-gold);
}

body.dark-mode .btn-primary:hover {
  background-color: var(--dark-accent-gold-hover);
  border-color: var(--dark-accent-gold-hover);
}

body.dark-mode .btn-outline,
body.dark-mode .btn-secondary {
  background-color: transparent;
  color: var(--dark-text-secondary);
  border-color: var(--dark-border-default);
}

body.dark-mode .btn-outline:hover,
body.dark-mode .btn-secondary:hover {
  background-color: var(--dark-border-default);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-emphasis);
}

body.dark-mode .btn-manuscript {
  background: var(--dark-illumination-gradient);
  color: var(--dark-background-primary);
  border: none;
  box-shadow: var(--dark-shadow-manuscript);
}

body.dark-mode .btn-manuscript:hover {
  background: linear-gradient(135deg, var(--dark-accent-copper) 0%, var(--dark-accent-gold) 100%);
  box-shadow: var(--dark-shadow-illumination);
}

body.dark-mode .btn-calligraphy {
  background: var(--dark-manuscript-gradient);
  color: var(--dark-text-calligraphy);
  border: 2px solid var(--dark-accent-gold);
}

body.dark-mode .btn-calligraphy:hover {
  background: var(--dark-parchment-gradient);
  border-color: var(--dark-accent-gold-hover);
}

body.dark-mode .btn-danger {
  background-color: var(--dark-error);
  color: var(--dark-text-primary);
}

body.dark-mode .btn-success {
  background-color: var(--dark-success);
  color: var(--dark-text-primary);
}

/* ===== ENHANCED ALERT SYSTEM ===== */
body.dark-mode .alert {
  background-color: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
  color: var(--dark-text-secondary);
}

body.dark-mode .alert-success {
  background-color: var(--dark-success-bg);
  border-right-color: var(--dark-success);
  color: var(--dark-success);
}

body.dark-mode .alert-error,
body.dark-mode .alert-danger {
  background-color: var(--dark-error-bg);
  border-right-color: var(--dark-error);
  color: var(--dark-error);
}

body.dark-mode .alert-warning {
  background-color: var(--dark-warning-bg);
  border-right-color: var(--dark-warning);
  color: var(--dark-warning);
}

body.dark-mode .alert-info {
  background-color: var(--dark-info-bg);
  border-right-color: var(--dark-info);
  color: var(--dark-info);
}

body.dark-mode .alert-manuscript {
  background: var(--dark-manuscript-gradient);
  color: var(--dark-text-calligraphy);
  border: 2px solid var(--dark-accent-gold);
}

/* ===== ENHANCED TABLE SYSTEM ===== */
body.dark-mode table {
  border-color: var(--dark-border-default);
}

body.dark-mode th {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-text-primary);
  border-color: var(--dark-border-emphasis);
}

body.dark-mode td {
  border-color: var(--dark-border-subtle);
  color: var(--dark-text-secondary);
}

body.dark-mode tr:nth-child(even) {
  background-color: rgba(42, 37, 32, 0.3);
}

/* ===== ENHANCED PAGINATION ===== */
body.dark-mode .pagination .page-number,
body.dark-mode .pagination .page-nav {
  background-color: var(--dark-background-secondary);
  color: var(--dark-text-secondary);
  border-color: var(--dark-border-default);
}

body.dark-mode .pagination .page-number:hover,
body.dark-mode .pagination .page-nav:hover {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
  border-color: var(--dark-accent-gold);
}

body.dark-mode .pagination .page-number.active {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
  border-color: var(--dark-accent-gold);
}

/* ===== ENHANCED FOOTER ===== */
body.dark-mode .site-footer {
  background-color: var(--dark-background-primary);
  color: var(--dark-text-muted);
  border-top: 1px solid var(--dark-border-subtle);
}

body.dark-mode .site-footer h2,
body.dark-mode .site-footer h3 {
  color: var(--dark-text-primary);
}

body.dark-mode .footer-tagline {
  color: var(--dark-accent-gold);
}

body.dark-mode .footer-links-column h3::after {
  background-color: var(--dark-accent-gold);
}

body.dark-mode .footer-links-column ul li a {
  color: var(--dark-text-muted);
}

body.dark-mode .footer-links-column ul li a:hover {
  color: var(--dark-accent-gold);
}

body.dark-mode .social-icons a {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-text-secondary);
}

body.dark-mode .social-icons a:hover {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
}

body.dark-mode .footer-bottom {
  border-top-color: var(--dark-border-subtle);
}

body.dark-mode .back-to-top {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
  /* Force fixed positioning regardless of parent containment */
  position: fixed !important;
  bottom: var(--space-4, 16px) !important;
  left: var(--space-4, 16px) !important;
  z-index: 999 !important;
}

body.dark-mode .back-to-top:hover {
  background-color: var(--dark-accent-gold-hover);
}

/* ===== ENHANCED ADMIN DASHBOARD ===== */
body.dark-mode .admin-body {
  background-color: var(--dark-background-primary);
}

body.dark-mode .admin-sidebar {
  background-color: var(--dark-background-secondary);
  color: var(--dark-text-muted);
  border-right: 1px solid var(--dark-border-subtle);
}

body.dark-mode .admin-brand {
  background-color: var(--dark-background-primary);
  border-bottom-color: var(--dark-border-subtle);
}

body.dark-mode .admin-brand h1 {
  color: var(--dark-text-primary);
}

body.dark-mode .admin-sidebar-toggle {
  color: var(--dark-text-muted);
}

body.dark-mode .admin-sidebar-toggle:hover {
  color: var(--dark-accent-gold);
}

body.dark-mode .admin-nav a {
  color: var(--dark-text-muted);
}

body.dark-mode .admin-nav a:hover {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-accent-gold);
}

body.dark-mode .admin-nav li.active a {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-accent-gold);
  border-right-color: var(--dark-accent-gold);
}

body.dark-mode .admin-sidebar-footer {
  border-top-color: var(--dark-border-subtle);
}

body.dark-mode .admin-header {
  background-color: var(--dark-background-secondary);
  border-bottom-color: var(--dark-border-default);
}

body.dark-mode .admin-header-title h2 {
  color: var(--dark-text-primary);
}

body.dark-mode .admin-user-menu {
  border-right-color: var(--dark-border-subtle);
}

body.dark-mode .admin-user-info {
  color: var(--dark-text-secondary);
}

body.dark-mode .admin-user-info:hover {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-accent-gold);
}

body.dark-mode .stat-card,
body.dark-mode .dashboard-card {
  background-color: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
}

body.dark-mode .dashboard-card-header {
  border-bottom-color: var(--dark-border-subtle);
}

body.dark-mode .activity-item {
  border-bottom-color: var(--dark-border-subtle);
}

/* ===== ENHANCED ARTICLE CREATION INTERFACE ===== */
body.dark-mode .scholarly-creation-container {
  background: var(--dark-background-primary);
}

body.dark-mode .creation-header {
  background: var(--dark-background-secondary);
  border-bottom-color: var(--dark-border-default);
}

body.dark-mode .creation-title {
  color: var(--dark-text-primary);
}

body.dark-mode .creation-title .highlight {
  color: var(--dark-accent-gold);
}

body.dark-mode .enhanced-article-form,
body.dark-mode .main-content-area {
  background: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
}

body.dark-mode .step-header h2 {
  color: var(--dark-text-primary);
}

body.dark-mode .step-header p {
  color: var(--dark-text-muted);
}

body.dark-mode .sources-container {
  background: var(--dark-manuscript-gradient);
  border-color: var(--dark-accent-gold);
}

/* Removed duplicate .source-item rule - using consolidated version at line 325 */

body.dark-mode .source-item:hover {
  border-color: var(--dark-accent-gold);
  box-shadow: var(--illumination-glow-soft);
}

body.dark-mode .review-section {
  background: var(--dark-parchment-gradient);
  border-color: var(--dark-accent-gold);
}

body.dark-mode .review-preview {
  background-color: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
  color: var(--dark-text-manuscript);
}

/* ===== ENHANCED FILTERS AND NAVIGATION ===== */
body.dark-mode .filters-bar {
  background-color: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
}

body.dark-mode .filter-select {
  background-color: var(--dark-input-background);
  color: var(--dark-text-primary);
  border-color: var(--dark-input-border);
}

body.dark-mode .filter-select:focus {
  border-color: var(--dark-accent-gold);
  box-shadow: 0 0 0 2px rgba(212, 165, 116, 0.2);
}

body.dark-mode .view-btn {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-text-muted);
  border-color: var(--dark-border-default);
}

body.dark-mode .view-btn:hover {
  background-color: var(--dark-accent-light);
  color: var(--dark-accent-gold);
}

body.dark-mode .view-btn.active {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
  border-color: var(--dark-accent-gold);
}

body.dark-mode .filter-tag {
  background-color: var(--dark-background-tertiary);
  color: var(--dark-text-secondary);
}

body.dark-mode .filter-tag:hover {
  background-color: var(--dark-accent-gold);
  color: var(--dark-background-primary);
}

body.dark-mode .clear-all {
  color: var(--dark-accent-gold);
}

body.dark-mode .clear-all:hover {
  color: var(--dark-accent-gold-hover);
}

/* ===== ENHANCED LOADING AND TRANSITIONS ===== */
body.dark-mode .loading-spinner {
  border-color: var(--dark-border-emphasis);
  border-top-color: var(--dark-accent-gold);
}

body.dark-mode .articles-loading {
  background-color: rgba(15, 20, 25, 0.8);
  backdrop-filter: blur(6px);
}

/* ===== ENHANCED CODE AND CONTENT BLOCKS ===== */
body.dark-mode pre,
body.dark-mode code {
  background-color: var(--dark-background-primary);
  color: var(--dark-text-secondary);
  border-color: var(--dark-border-default);
}

body.dark-mode .footnotes {
  border-top-color: var(--dark-border-subtle);
}

body.dark-mode .footnote {
  color: var(--dark-text-muted);
}

body.dark-mode .footnote::before,
body.dark-mode .footnote-backref,
body.dark-mode .footnote-ref {
  color: var(--dark-accent-gold);
}

/* ===== ENHANCED TIMELINE AND SPECIAL COMPONENTS ===== */
body.dark-mode .timeline::before {
  background-color: var(--dark-accent-gold);
}

body.dark-mode .timeline-marker {
  background-color: var(--dark-accent-gold);
}

body.dark-mode .timeline-date {
  color: var(--dark-accent-gold);
}

body.dark-mode .timeline-content {
  background-color: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
}

body.dark-mode .historical-figure {
  background-color: var(--dark-background-secondary);
  border-color: var(--dark-border-default);
}

body.dark-mode .figure-image {
  border-color: var(--dark-accent-gold);
}

body.dark-mode .article-summary-box {
  background-color: var(--dark-background-tertiary);
  border-right-color: var(--dark-accent-gold);
}

body.dark-mode .summary-title {
  color: var(--dark-accent-gold);
}

/* ===== ENHANCED ACCESSIBILITY AND FOCUS STATES ===== */
body.dark-mode a:focus-visible,
body.dark-mode button:focus-visible,
body.dark-mode input:focus-visible,
body.dark-mode select:focus-visible,
body.dark-mode textarea:focus-visible {
  outline: 2px solid var(--dark-accent-gold);
  outline-offset: 2px;
}

body.dark-mode .focus-visible:focus {
  outline: 2px solid var(--dark-accent-gold);
  outline-offset: 2px;
}

/* ===== ENHANCED TOOLBAR DARK MODE ACCESSIBILITY ===== */
/* High contrast mode support for toolbar elements */
@media (prefers-contrast: high) {
  body.dark-mode .toolbar-button,
  body.dark-mode .sefr-toolbar .toolbar-button {
    border-width: 2px !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 1px var(--dark-accent-gold) !important;
  }
  
  body.dark-mode .toolbar-button:hover,
  body.dark-mode .sefr-toolbar .toolbar-button:hover {
    box-shadow: 0 0 0 3px var(--dark-accent-gold) !important;
    border-width: 3px !important;
  }
  
  body.dark-mode .toolbar-button:focus,
  body.dark-mode .sefr-toolbar .toolbar-button:focus {
    outline: 3px solid var(--dark-accent-gold) !important;
    outline-offset: 3px !important;
  }
}

/* Enhanced focus states for toolbar accessibility */
body.dark-mode .toolbar-button:focus,
body.dark-mode .sefr-toolbar .toolbar-button:focus {
  outline: 2px solid var(--dark-accent-gold) !important;
  outline-offset: 2px !important;
  background-color: var(--dark-background-tertiary) !important;
  box-shadow: 0 0 0 4px rgba(212, 165, 116, 0.3) !important;
}

/* Ensure icons remain visible and accessible */
body.dark-mode .toolbar-button .fas,
body.dark-mode .toolbar-button .far,
body.dark-mode .toolbar-button .fab,
body.dark-mode .toolbar-button i,
body.dark-mode .sefr-toolbar .toolbar-button .fas,
body.dark-mode .sefr-toolbar .toolbar-button .far,
body.dark-mode .sefr-toolbar .toolbar-button .fab,
body.dark-mode .sefr-toolbar .toolbar-button i {
  color: currentColor !important;
  opacity: 1 !important;
  filter: none !important;
}

/* Enhanced keyboard navigation for toolbar */
body.dark-mode .toolbar-button:focus-visible,
body.dark-mode .sefr-toolbar .toolbar-button:focus-visible {
  background-color: var(--dark-accent-gold) !important;
  color: var(--dark-background-primary) !important;
  outline: 2px solid var(--dark-text-primary) !important;
  outline-offset: 2px !important;
  transform: translateY(-1px) !important;
}

/* Disabled state accessibility for toolbar buttons */
body.dark-mode .toolbar-button:disabled,
body.dark-mode .toolbar-button.disabled,
body.dark-mode .sefr-toolbar .toolbar-button:disabled,
body.dark-mode .sefr-toolbar .toolbar-button.disabled {
  background-color: var(--dark-background-secondary) !important;
  color: var(--dark-text-muted) !important;
  border-color: var(--dark-border-subtle) !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* Screen reader accessibility for toolbar */
body.dark-mode .toolbar-button .sr-only,
body.dark-mode .sefr-toolbar .toolbar-button .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== ENHANCED MEDIA AND RESPONSIVE ADJUSTMENTS ===== */
body.dark-mode img:not(.preserve-colors) {
  filter: brightness(0.9) contrast(1.1);
}

body.dark-mode .logo img,
body.dark-mode .icon img,
body.dark-mode img.preserve-colors {
  filter: none !important;
}

/* High Contrast Mode Enhancement */
@media (prefers-contrast: high) {
  body.dark-mode {
    --dark-background-primary: #000000;
    --dark-background-secondary: #111111;
    --dark-text-primary: #FFFFFF;
    --dark-accent-gold: #FFD700;
    --dark-border-default: #666666;
  }
  
  body.dark-mode .btn,
  body.dark-mode .form-control,
  body.dark-mode .card {
    border-width: 3px;
  }
  
  body.dark-mode .manuscript-card {
    border-width: 4px;
  }
}

/* Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
  body.dark-mode *,
  body.dark-mode *::before,
  body.dark-mode *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  body.dark-mode .theme-toggle .icon {
    transition: opacity 0.1s ease;
  }
}

/* ===== ENHANCED PRINT STYLES FOR DARK MODE ===== */
@media print {
  body.dark-mode {
    /* Force light theme for printing with manuscript consideration */
    --primary-color: #4A5568 !important;
    --accent-color: #8A5A44 !important;
    --background-color: #FFFFFF !important;
    --card-background: #FFFFFF !important;
    --text-color: #1A202C !important;
    --text-dark: #000000 !important;
    --border-color: #E2E8F0 !important;
    
    background-color: white !important;
    color: black !important;
  }
  
  body.dark-mode .verse-container,
  body.dark-mode .poetry-block,
  body.dark-mode .manuscript-card {
    background: white !important;
    border: 2pt solid #8A5A44 !important;
    color: black !important;
  }
  
  body.dark-mode .verse-text,
  body.dark-mode .poetry-verse {
    color: black !important;
  }
  
  body.dark-mode .illuminated-initial {
    color: #8A5A44 !important;
    -webkit-text-fill-color: #8A5A44 !important;
  }
}

/* ===== ENHANCED SMOOTH TRANSITIONS FOR DARK MODE TOGGLE ===== */
body, 
html,
.site-header, 
.site-footer, 
.article-card, 
.researcher-card, 
.sidebar-widget,
input, 
button, 
textarea, 
select,
.btn, 
.form-control, 
.form-select,
.card, 
.alert, 
table, 
th, 
td,
.nav-list a, 
.footer-links-column a,
.verse-container,
.poetry-block,
.manuscript-card,
.illuminated-initial,
.citation,
.timeline-content,
.admin-sidebar,
.admin-header,
.theme-toggle-btn {
  transition: background-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              border-color 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              backdrop-filter 0.4s ease;
}

/* Enhanced transition specifically for manuscript elements */
.verse-container,
.poetry-block,
.manuscript-card,
.illuminated-initial,
.quranic-guidance,
.sources-container,
.review-section {
  transition: background 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              border-color 0.4s ease,
              box-shadow 0.4s ease,
              backdrop-filter 0.4s ease;
}

/* ===== PERFORMANCE OPTIMIZATION ===== */
/* Enable hardware acceleration for smooth dark mode transitions */
.theme-toggle-btn,
.theme-toggle .icon,
body.dark-mode .article-card,
body.dark-mode .researcher-card,
body.dark-mode .sidebar-widget {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Optimize repaints during theme transitions */
body.dark-mode {
  /* contain: layout style paint; - REMOVED: This creates a new containing block for fixed positioned elements, breaking font controls positioning */
  
  /* CRITICAL FIX: Ensure no CSS containment breaks viewport positioning */
  contain: none !important;
  
  /* Maintain position static to prevent containing block creation */
  position: static !important;
}

/* ===== SEFREDITOR CONTENT INSERTION MODAL DARK MODE HARMONY ===== */

/* ===== COMPREHENSIVE MODAL SYSTEM - LIGHT MODE BASE STYLES ===== */

/* Base modal positioning and structure */
.editor-dialog-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--card-background);
    border: 2px solid var(--border-color);
    border-radius: 12px;
    padding: 25px;
    box-shadow: var(--shadow-xl);
    z-index: 10000;
    min-width: 400px;
    max-width: 90vw;
    max-height: 90vh;
    overflow-y: auto;
    font-family: var(--font-body);
    direction: rtl;
    color: var(--text-color);
}

/* Specific modal types */
.sefr-poetry-dialog.editor-dialog-modal {
    min-width: 450px;
}

.sefr-citation-dialog.editor-dialog-modal {
    min-width: 400px;
}

/* Dialog overlay */
.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    backdrop-filter: blur(2px);
}

/* Dialog components */
.dialog-title {
    margin: 0 0 20px 0;
    color: var(--primary-color);
    text-align: center;
    font-family: var(--font-heading);
    font-size: 1.5em;
    font-weight: 700;
}

.dialog-form-group {
    margin-bottom: 20px;
}

.dialog-label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: var(--text-color);
    font-size: 0.9rem;
}

.dialog-textarea {
    width: 100%;
    height: 140px;
    padding: 15px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    font-family: var(--font-poetry);
    font-size: 16px;
    line-height: 1.8;
    resize: vertical;
    direction: rtl;
    box-sizing: border-box;
    background: var(--input-background);
    color: var(--text-color);
    transition: all 0.3s ease;
}

.dialog-textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(138, 90, 68, 0.3);
    background: var(--card-background);
}

.dialog-input {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
    background: var(--input-background);
    color: var(--text-color);
    transition: all 0.3s ease;
}

.dialog-input:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(138, 90, 68, 0.3);
    background: var(--card-background);
}

.dialog-actions {
    text-align: center;
    margin-top: 20px;
}

.dialog-btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 14px;
    margin: 0 5px;
    transition: all 0.3s ease;
    min-width: 120px;
}

.dialog-btn-primary {
    background: var(--accent-color);
    color: white;
    font-weight: bold;
}

.dialog-btn-primary:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.dialog-btn-secondary {
    background: var(--text-muted);
    color: white;
}

.dialog-btn-secondary:hover {
    background: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

/* Inserted content styling */
.sefr-poetry-block.poetry-content-block {
    display: block;
    padding: 20px;
    background: linear-gradient(135deg, var(--background-color) 0%, var(--alt-background) 100%);
    border-right: 4px solid var(--accent-color);
    font-family: var(--font-poetry);
    font-size: 1.3em;
    line-height: 2;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
    white-space: pre-line;
    direction: rtl;
    text-align: center;
    color: var(--text-color);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.sefr-poetry-block.poetry-content-block:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    border-right-color: var(--accent-hover);
}

.citation.citation-reference {
    color: var(--accent-color);
    font-weight: bold;
    vertical-align: super;
    font-size: 0.9em;
    background: rgba(138, 90, 68, 0.1);
    padding: 2px 4px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.citation.citation-reference:hover {
    background: var(--accent-light);
    color: var(--accent-hover);
}

/* ===== DARK MODE OVERRIDES FOR CONTENT INSERTION MODALS ===== */

body.dark-mode .editor-dialog-modal {
    background: var(--dark-background-secondary) !important;
    border-color: var(--dark-border-default) !important;
    color: var(--dark-text-primary) !important;
    box-shadow: var(--dark-shadow-xl) !important;
}

body.dark-mode .dialog-overlay {
    background: rgba(0, 0, 0, 0.8) !important;
    backdrop-filter: blur(4px) !important;
}

body.dark-mode .dialog-title {
    color: var(--dark-accent-gold) !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

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

body.dark-mode .dialog-textarea {
    background: var(--dark-input-background) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .dialog-textarea:focus {
    border-color: var(--dark-accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.3) !important;
    background: var(--dark-background-tertiary) !important;
}

body.dark-mode .dialog-textarea::placeholder {
    color: var(--dark-input-placeholder) !important;
}

body.dark-mode .dialog-input {
    background: var(--dark-input-background) !important;
    border-color: var(--dark-input-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode .dialog-input:focus {
    border-color: var(--dark-accent-gold) !important;
    box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.3) !important;
    background: var(--dark-background-tertiary) !important;
}

body.dark-mode .dialog-input::placeholder {
    color: var(--dark-input-placeholder) !important;
}

body.dark-mode .dialog-btn-primary {
    background: var(--dark-accent-gold) !important;
    color: var(--dark-background-primary) !important;
}

body.dark-mode .dialog-btn-primary:hover {
    background: var(--dark-accent-gold-hover) !important;
    box-shadow: var(--dark-shadow-md) !important;
}

body.dark-mode .dialog-btn-secondary {
    background: var(--dark-background-tertiary) !important;
    color: var(--dark-text-secondary) !important;
    border: 1px solid var(--dark-border-default) !important;
}

body.dark-mode .dialog-btn-secondary:hover {
    background: var(--dark-background-quaternary) !important;
    color: var(--dark-text-primary) !important;
    box-shadow: var(--dark-shadow-md) !important;
}

/* Dark mode inserted content styling */
body.dark-mode .sefr-poetry-block.poetry-content-block {
    background: var(--dark-manuscript-gradient) !important;
    border-right-color: var(--dark-accent-gold) !important;
    color: var(--dark-text-manuscript) !important;
    box-shadow: var(--dark-shadow-manuscript) !important;
}

body.dark-mode .sefr-poetry-block.poetry-content-block:hover {
    box-shadow: var(--dark-shadow-illumination) !important;
    border-right-color: var(--dark-accent-gold-hover) !important;
}

body.dark-mode .citation.citation-reference {
    color: var(--dark-accent-gold) !important;
    background: rgba(212, 165, 116, 0.2) !important;
}

body.dark-mode .citation.citation-reference:hover {
    background: rgba(212, 165, 116, 0.3) !important;
    color: var(--dark-accent-gold-hover) !important;
}

/* Enhanced accessibility for dark mode modals */
body.dark-mode .editor-dialog-modal:focus-within {
    border-color: var(--dark-accent-gold) !important;
    box-shadow: 
        var(--dark-shadow-xl),
        0 0 0 3px rgba(212, 165, 116, 0.3) !important;
}

/* Mobile responsive adjustments for modals */
@media (max-width: 768px) {
    .editor-dialog-modal {
        min-width: 90vw !important;
        margin: 10px;
        padding: 20px;
        max-height: 85vh;
    }
    
    .dialog-textarea {
        height: 120px;
        font-size: 14px;
    }
    
    .dialog-btn {
        padding: 10px 20px;
        font-size: 13px;
        margin: 5px 2px;
        min-width: 100px;
    }
}

/* High contrast mode support for content insertion modals */
@media (prefers-contrast: high) {
    body.dark-mode .editor-dialog-modal {
        border-width: 3px !important;
        box-shadow: 0 0 0 2px var(--dark-accent-gold) !important;
    }
    
    body.dark-mode .dialog-btn {
        border-width: 2px !important;
        font-weight: 700 !important;
    }
    
    body.dark-mode .citation.citation-reference {
        background: var(--dark-accent-gold) !important;
        color: var(--dark-background-primary) !important;
    }
}

/* Smooth transitions for modal appearance */
.editor-dialog-modal {
    animation: modalSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dialog-overlay {
    animation: overlayFadeIn 0.3s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -60%) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes overlayFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== DARK MODE ENHANCEMENT COMPLETION ===== */
/* 
 * Dark mode implementation complete with:
 * ✅ Preserved beautiful toggle animation
 * ✅ Traditional dark backgrounds for usability
 * ✅ Manuscript-inspired accent integration
 * ✅ Enhanced design system token usage
 * ✅ Fixed broken references
 * ✅ Platform consistency across all components
 * ✅ Cultural authenticity with Arabic scholarly aesthetic
 * ✅ Performance optimizations
 * ✅ Accessibility enhancements
 * ✅ Smooth transitions and animations
 * ✅ COMPLETE CONTENT INSERTION MODAL DARK MODE HARMONY
 * 
 * The implementation respects styles.css foundation while adding
 * sophisticated manuscript theming that feels native to the سِفر قيس platform.
 */