/**
 * Dark Mode Styles
 * Complete dark theme for the platform
 */

/* ============================================
   LOGO VISIBILITY CONTROL (Tailwind-like classes)
   ============================================ */

/* Hide elements with dark:hidden class when dark mode is active */
.dark .dark\:hidden {
    display: none !important;
}

/* Show elements with dark:block class when dark mode is active */
.dark .dark\:block {
    display: block !important;
}

/* Hide elements with hidden class by default */
.hidden {
    display: none !important;
}

/* ============================================
   DARK MODE ROOT VARIABLES
   ============================================ */
:root {
    --bg-primary-light: #ffffff;
    --bg-secondary-light: #f9fafb;
    --text-primary-light: #111827;
    --text-secondary-light: #6b7280;
    --border-light: #e5e7eb;
    
    --bg-primary-dark: #1a1a1a;
    --bg-secondary-dark: #2d2d2d;
    --text-primary-dark: #f9fafb;
    --text-secondary-dark: #d1d5db;
    --border-dark: #374151;
}

/* ============================================
   DARK MODE BASE STYLES
   ============================================ */
body.dark-mode {
    background-color: var(--bg-primary-dark);
    color: var(--text-primary-dark);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.dark-mode {
    /* Background colors */
    --tw-bg-opacity: 1;
    
    /* Text colors */
    color-scheme: dark;
}

/* ============================================
   BACKGROUNDS
   ============================================ */
.dark-mode .bg-white {
    background-color: #2d2d2d !important;
}

.dark-mode .bg-gray-50,
.dark-mode .bg-gray-100 {
    background-color: #374151 !important;
}

.dark-mode .bg-gray-200 {
    background-color: #4b5563 !important;
}

.dark-mode .bg-gray-800 {
    background-color: #1f2937 !important;
}

.dark-mode .bg-gray-900 {
    background-color: #111827 !important;
}

/* ============================================
   COLORED BACKGROUNDS (Tailwind Utility Classes)
   ============================================ */

/* Blue backgrounds */
.dark-mode .bg-blue-50 {
    background-color: #1e3a5f !important;
    border-color: #3b82f6 !important;
}

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

.dark-mode .bg-blue-200 {
    background-color: #1e40af !important;
}

/* Green backgrounds */
.dark-mode .bg-green-50 {
    background-color: #064e3b !important;
    border-color: #10b981 !important;
}

.dark-mode .bg-green-100 {
    background-color: #065f46 !important;
}

.dark-mode .bg-green-200 {
    background-color: #047857 !important;
}

/* Yellow/Amber backgrounds */
.dark-mode .bg-yellow-50 {
    background-color: #78350f !important;
    border-color: #f59e0b !important;
}

.dark-mode .bg-yellow-100 {
    background-color: #92400e !important;
}

.dark-mode .bg-amber-50 {
    background-color: #78350f !important;
    border-color: #f59e0b !important;
}

/* Red backgrounds */
.dark-mode .bg-red-50 {
    background-color: #7f1d1d !important;
    border-color: #ef4444 !important;
}

.dark-mode .bg-red-100 {
    background-color: #991b1b !important;
}

/* Purple backgrounds */
.dark-mode .bg-purple-50 {
    background-color: #4c1d95 !important;
    border-color: #a855f7 !important;
}

.dark-mode .bg-purple-100 {
    background-color: #5b21b6 !important;
}

/* Pink backgrounds */
.dark-mode .bg-pink-50 {
    background-color: #831843 !important;
    border-color: #ec4899 !important;
}

/* Indigo backgrounds */
.dark-mode .bg-indigo-50 {
    background-color: #312e81 !important;
    border-color: #6366f1 !important;
}

/* Orange backgrounds */
.dark-mode .bg-orange-50 {
    background-color: #7c2d12 !important;
    border-color: #f97316 !important;
}

/* Asegurar que el texto dentro sea legible */
.dark-mode .bg-blue-50,
.dark-mode .bg-green-50,
.dark-mode .bg-yellow-50,
.dark-mode .bg-amber-50,
.dark-mode .bg-red-50,
.dark-mode .bg-purple-50,
.dark-mode .bg-pink-50,
.dark-mode .bg-indigo-50,
.dark-mode .bg-orange-50 {
    color: #f9fafb !important;
}

/* Asegurar texto en elementos hijos */
.dark-mode .bg-blue-50 *,
.dark-mode .bg-green-50 *,
.dark-mode .bg-yellow-50 *,
.dark-mode .bg-amber-50 *,
.dark-mode .bg-red-50 *,
.dark-mode .bg-purple-50 *,
.dark-mode .bg-pink-50 *,
.dark-mode .bg-indigo-50 *,
.dark-mode .bg-orange-50 * {
    color: #f9fafb !important;
}

/* Bordes de colores más brillantes en dark mode */
.dark-mode .border-blue-500 {
    border-color: #3b82f6 !important;
}

.dark-mode .border-green-500 {
    border-color: #10b981 !important;
}

.dark-mode .border-yellow-500 {
    border-color: #f59e0b !important;
}

.dark-mode .border-red-500 {
    border-color: #ef4444 !important;
}

.dark-mode .border-purple-500 {
    border-color: #a855f7 !important;
}

.dark-mode .border-primary {
    border-color: #01ACE4 !important;
}

/* Textos de colores en elementos de alerta/info */
.dark-mode .text-blue-600,
.dark-mode .text-blue-700,
.dark-mode .text-blue-800 {
    color: #60a5fa !important;
}

.dark-mode .text-green-600,
.dark-mode .text-green-700,
.dark-mode .text-green-800 {
    color: #34d399 !important;
}

.dark-mode .text-yellow-600,
.dark-mode .text-yellow-700,
.dark-mode .text-yellow-800 {
    color: #fbbf24 !important;
}

.dark-mode .text-red-600,
.dark-mode .text-red-700,
.dark-mode .text-red-800 {
    color: #f87171 !important;
}

/* ============================================
   TEXT COLORS
   ============================================ */
.dark-mode .text-gray-900,
.dark-mode .text-gray-800,
.dark-mode .text-gray-700 {
    color: #f9fafb !important;
}

.dark-mode .text-gray-600,
.dark-mode .text-gray-500 {
    color: #d1d5db !important;
}

.dark-mode .text-gray-400 {
    color: #9ca3af !important;
}

.dark-mode .text-gray-300 {
    color: #d1d5db !important;
}

/* Asegurar que los headings sean legibles */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: #f9fafb !important;
}

/* Párrafos y texto general */
.dark-mode p,
.dark-mode div,
.dark-mode span,
.dark-mode li {
    color: #d1d5db;
}

/* Strong y emphasis */
.dark-mode strong,
.dark-mode b,
.dark-mode em {
    color: #f9fafb !important;
}

.dark-mode .text-black {
    color: #f9fafb !important;
}

/* ============================================
   BORDERS
   ============================================ */
.dark-mode .border-gray-200,
.dark-mode .border-gray-300 {
    border-color: #374151 !important;
}

.dark-mode .border {
    border-color: #374151 !important;
}

/* ============================================
   CARDS
   ============================================ */
.dark-mode .card {
    background-color: #2d2d2d;
    border-color: #374151;
    color: #f9fafb;
}

.dark-mode .card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* ============================================
   BUTTONS
   ============================================ */
.dark-mode .btn {
    border-color: #374151;
}

.dark-mode .btn-secondary {
    background-color: #374151;
    color: #f9fafb;
}

.dark-mode .btn-secondary:hover {
    background-color: #4b5563;
}

/* Primary buttons keep their colors */
.dark-mode .btn-primary,
.dark-mode .bg-primary {
    /* Keep original colors for brand consistency */
}

/* ============================================
   FORMS
   ============================================ */
.dark-mode input[type="text"],
.dark-mode input[type="email"],
.dark-mode input[type="password"],
.dark-mode input[type="tel"],
.dark-mode input[type="number"],
.dark-mode input[type="search"],
.dark-mode textarea,
.dark-mode select {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #9ca3af;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* ============================================
   NAVIGATION
   ============================================ */
.dark-mode header {
    background-color: #1a1a1a;
    border-bottom-color: #374151;
}

.dark-mode nav a {
    color: #d1d5db;
}

.dark-mode nav a:hover {
    color: #f9fafb;
}

.dark-mode .mobile-menu {
    background-color: #1a1a1a;
    border-right-color: #374151;
}

/* ============================================
   DROPDOWNS
   ============================================ */
.dark-mode .dropdown-menu,
.dark-mode [class*="group-hover:"] {
    background-color: #2d2d2d;
    border-color: #374151;
}

.dark-mode .dropdown-item:hover {
    background-color: #374151;
}

/* ============================================
   MODALS
   ============================================ */
.dark-mode .modal {
    background-color: rgba(0, 0, 0, 0.8);
}

.dark-mode .modal-content {
    background-color: #2d2d2d;
    border-color: #374151;
}

.dark-mode .modal-header {
    border-bottom-color: #374151;
}

.dark-mode .modal-footer {
    border-top-color: #374151;
}

/* ============================================
   TABLES
   ============================================ */
.dark-mode table {
    color: #f9fafb;
}

.dark-mode thead {
    background-color: #374151;
}

.dark-mode tbody tr {
    border-bottom-color: #374151;
}

.dark-mode tbody tr:hover {
    background-color: #374151;
}

/* ============================================
   SHADOWS
   ============================================ */
.dark-mode .shadow,
.dark-mode .shadow-sm,
.dark-mode .shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}

.dark-mode .shadow-xl,
.dark-mode .shadow-2xl {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.5);
}

/* ============================================
   CODE BLOCKS
   ============================================ */
.dark-mode pre,
.dark-mode code {
    background-color: #1a1a1a;
    color: #f9fafb;
    border-color: #374151;
}

/* ============================================
   ALERTS & NOTIFICATIONS
   ============================================ */
.dark-mode .alert {
    background-color: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

.dark-mode .alert-info {
    background-color: #1e3a5f;
    border-color: #2563eb;
}

.dark-mode .alert-success {
    background-color: #1e4620;
    border-color: #10b981;
}

.dark-mode .alert-warning {
    background-color: #4a3a1a;
    border-color: #f59e0b;
}

.dark-mode .alert-danger {
    background-color: #4a1a1a;
    border-color: #ef4444;
}

/* ============================================
   BADGES
   ============================================ */
.dark-mode .badge {
    background-color: #374151;
    color: #f9fafb;
}

/* ============================================
   PROGRESS BARS
   ============================================ */
.dark-mode .progress {
    background-color: #374151;
}

/* ============================================
   FOOTER
   ============================================ */
.dark-mode footer {
    background-color: #1a1a1a;
    border-top-color: #374151;
}

/* ============================================
   HERO SECTIONS
   ============================================ */
.dark-mode .hero-section {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* Keep gradient sections with original colors but darken slightly */
.dark-mode .bg-gradient-to-r {
    filter: brightness(0.85);
}

/* ============================================
   IMAGES
   ============================================ */
.dark-mode img {
    opacity: 0.9;
}

.dark-mode img:hover {
    opacity: 1;
}

/* ============================================
   SCROLLBAR (Webkit)
   ============================================ */
.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: #1a1a1a;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 6px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */
.dark-mode-toggle {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #3b82f6;
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .dark-mode-toggle {
        bottom: 80px;
        right: 20px;
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
}

.dark-mode-toggle:hover {
    transform: translateY(-5px) rotate(15deg);
    box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

.dark-mode .dark-mode-toggle {
    background: #f59e0b;
}

/* Icon transitions */
.dark-mode-toggle .sun-icon,
.dark-mode-toggle .moon-icon {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.dark-mode-toggle .sun-icon {
    display: none;
}

.dark-mode .dark-mode-toggle .sun-icon {
    display: block;
}

.dark-mode .dark-mode-toggle .moon-icon {
    display: none;
}

/* ============================================
   TRANSITION FOR SMOOTH MODE SWITCHING
   ============================================ */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Exclude animations from transition */
.fade-in,
.fade-in-up,
.scale-in,
[class*="animate-"] {
    transition: none;
}

/* ============================================
   SPECIFIC COMPONENT OVERRIDES
   ============================================ */

/* Alert/Info boxes with border-left */
.dark-mode .border-l-4,
.dark-mode .border-l-2,
.dark-mode [class*="border-l-"] {
    border-left-width: 4px;
}

/* Info boxes - Blue */
.dark-mode .bg-blue-50.border-l-4,
.dark-mode .bg-blue-50[class*="border-l-"] {
    background-color: rgba(30, 58, 95, 0.5) !important;
    border-left-color: #3b82f6 !important;
    backdrop-filter: blur(10px);
}

.dark-mode .bg-blue-50.border-l-4 p,
.dark-mode .bg-blue-50.border-l-4 .text-sm {
    color: #e0f2fe !important;
}

.dark-mode .bg-blue-50.border-l-4 strong {
    color: #ffffff !important;
}

.dark-mode .bg-blue-50.border-l-4 i {
    color: #60a5fa !important;
}

/* Success boxes - Green */
.dark-mode .bg-green-50.border-l-4,
.dark-mode .bg-green-50[class*="border-l-"] {
    background-color: rgba(6, 78, 59, 0.5) !important;
    border-left-color: #10b981 !important;
    backdrop-filter: blur(10px);
}

.dark-mode .bg-green-50.border-l-4 p,
.dark-mode .bg-green-50.border-l-4 .text-sm {
    color: #d1fae5 !important;
}

.dark-mode .bg-green-50.border-l-4 strong {
    color: #ffffff !important;
}

.dark-mode .bg-green-50.border-l-4 i {
    color: #34d399 !important;
}

/* Warning boxes - Yellow */
.dark-mode .bg-yellow-50.border-l-4,
.dark-mode .bg-yellow-50[class*="border-l-"] {
    background-color: rgba(120, 53, 15, 0.5) !important;
    border-left-color: #f59e0b !important;
    backdrop-filter: blur(10px);
}

.dark-mode .bg-yellow-50.border-l-4 p,
.dark-mode .bg-yellow-50.border-l-4 .text-sm {
    color: #fef3c7 !important;
}

.dark-mode .bg-yellow-50.border-l-4 strong {
    color: #ffffff !important;
}

.dark-mode .bg-yellow-50.border-l-4 i {
    color: #fbbf24 !important;
}

/* Error boxes - Red */
.dark-mode .bg-red-50.border-l-4,
.dark-mode .bg-red-50[class*="border-l-"] {
    background-color: rgba(127, 29, 29, 0.5) !important;
    border-left-color: #ef4444 !important;
    backdrop-filter: blur(10px);
}

.dark-mode .bg-red-50.border-l-4 p,
.dark-mode .bg-red-50.border-l-4 .text-sm {
    color: #fee2e2 !important;
}

.dark-mode .bg-red-50.border-l-4 strong {
    color: #ffffff !important;
}

.dark-mode .bg-red-50.border-l-4 i {
    color: #f87171 !important;
}

/* Purple boxes */
.dark-mode .bg-purple-50.border-l-4,
.dark-mode .bg-purple-50[class*="border-l-"] {
    background-color: rgba(76, 29, 149, 0.5) !important;
    border-left-color: #a855f7 !important;
    backdrop-filter: blur(10px);
}

.dark-mode .bg-purple-50.border-l-4 p,
.dark-mode .bg-purple-50.border-l-4 .text-sm {
    color: #f3e8ff !important;
}

.dark-mode .bg-purple-50.border-l-4 strong {
    color: #ffffff !important;
}

.dark-mode .bg-purple-50.border-l-4 i {
    color: #c084fc !important;
}

/* Orange boxes */
.dark-mode .bg-orange-50.border-l-4,
.dark-mode .bg-orange-50[class*="border-l-"] {
    background-color: rgba(124, 45, 18, 0.5) !important;
    border-left-color: #f97316 !important;
    backdrop-filter: blur(10px);
}

.dark-mode .bg-orange-50.border-l-4 p,
.dark-mode .bg-orange-50.border-l-4 .text-sm {
    color: #ffedd5 !important;
}

.dark-mode .bg-orange-50.border-l-4 strong {
    color: #ffffff !important;
}

.dark-mode .bg-orange-50.border-l-4 i {
    color: #fb923c !important;
}

/* Course cards */
.dark-mode .course-card {
    background-color: #2d2d2d;
    border-color: #374151;
}

.dark-mode .course-card:hover {
    border-color: #3b82f6;
}

/* Dashboard widgets */
.dark-mode .dashboard-widget {
    background-color: #2d2d2d;
    border-color: #374151;
}

/* Colored info cards/boxes without border-left (rounded style) */
.dark-mode .bg-blue-50.rounded,
.dark-mode .bg-blue-50.rounded-lg {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.6) 0%, rgba(30, 64, 175, 0.4) 100%) !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.dark-mode .bg-green-50.rounded,
.dark-mode .bg-green-50.rounded-lg {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.6) 0%, rgba(5, 150, 105, 0.4) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.dark-mode .bg-yellow-50.rounded,
.dark-mode .bg-yellow-50.rounded-lg {
    background: linear-gradient(135deg, rgba(120, 53, 15, 0.6) 0%, rgba(180, 83, 9, 0.4) 100%) !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.dark-mode .bg-red-50.rounded,
.dark-mode .bg-red-50.rounded-lg {
    background: linear-gradient(135deg, rgba(127, 29, 29, 0.6) 0%, rgba(153, 27, 27, 0.4) 100%) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.dark-mode .bg-purple-50.rounded,
.dark-mode .bg-purple-50.rounded-lg {
    background: linear-gradient(135deg, rgba(76, 29, 149, 0.6) 0%, rgba(91, 33, 182, 0.4) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

/* Quiz/Exam interface */
.dark-mode .quiz-container {
    background-color: #2d2d2d;
}

.dark-mode .quiz-question {
    background-color: #374151;
}

/* Video player */
.dark-mode .video-player {
    background-color: #1a1a1a;
}

/* Comments section */
.dark-mode .comment {
    background-color: #374151;
    border-color: #4b5563;
}

/* Profile page */
.dark-mode .profile-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
}

/* ============================================
   ADMIN AREAS - Improved Contrast
   ============================================ */

/* Admin Layout Container */
.dark-mode .admin-layout {
    background-color: #1a1a1a;
}

/* Admin Sidebar */
.dark-mode .sidebar {
    background-color: #002336 !important;
    border-right: 1px solid #374151;
}

.dark-mode .sidebar-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.dark-mode .sidebar-header .title {
    color: #f9fafb !important;
}

.dark-mode .nav-section-title {
    color: #9ca3af !important;
}

.dark-mode .nav-item {
    color: rgba(255, 255, 255, 0.8) !important;
}

.dark-mode .nav-item:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f9fafb !important;
}

.dark-mode .nav-item.active {
    background: rgba(1, 172, 228, 0.1) !important;
    color: #01ACE4 !important;
    border-left-color: #01ACE4 !important;
}

/* Admin Top Bar */
.dark-mode .top-bar {
    background-color: #2d2d2d !important;
    border-bottom-color: #374151 !important;
}

.dark-mode .top-bar-left h1 {
    color: #f9fafb !important;
}

.dark-mode .top-bar-right {
    color: #d1d5db;
}

.dark-mode .notifications-btn {
    color: #d1d5db !important;
}

.dark-mode .notifications-btn:hover {
    background-color: #374151 !important;
    color: #01ACE4 !important;
}

/* Admin Main Content */
.dark-mode .main-content {
    background-color: #1a1a1a;
}

.dark-mode .content-wrapper {
    background-color: #1a1a1a;
}

/* Admin Tables */
.dark-mode table {
    background-color: #2d2d2d;
    border-color: #374151;
}

.dark-mode table thead {
    background-color: #374151 !important;
}

.dark-mode table thead th {
    color: #f9fafb !important;
    border-color: #4b5563;
}

.dark-mode table tbody tr {
    background-color: #2d2d2d !important;
    border-color: #374151;
}

.dark-mode table tbody tr:hover {
    background-color: #374151 !important;
}

.dark-mode table tbody td {
    color: #d1d5db !important;
    border-color: #374151;
}

/* Admin Stat Cards */
.dark-mode .stat-card,
.dark-mode [class*="stat-"],
.dark-mode .dashboard-card,
.dark-mode .stats-grid .card {
    background-color: #2d2d2d !important;
    border-color: #374151 !important;
}

.dark-mode .stat-card h3,
.dark-mode .stat-card h4,
.dark-mode .stat-card p,
.dark-mode .stat-card span,
.dark-mode [class*="stat-"] h3,
.dark-mode [class*="stat-"] h4,
.dark-mode [class*="stat-"] p,
.dark-mode [class*="stat-"] span {
    color: #f9fafb !important;
}

.dark-mode .stat-card .number,
.dark-mode .stat-card .value,
.dark-mode [class*="stat-"] .number,
.dark-mode [class*="stat-"] .value {
    color: #f9fafb !important;
}

.dark-mode .stat-card .label,
.dark-mode .stat-card .title,
.dark-mode [class*="stat-"] .label,
.dark-mode [class*="stat-"] .title {
    color: #d1d5db !important;
}

/* Admin Cards General */
.dark-mode .card,
.dark-mode .panel,
.dark-mode .widget {
    background-color: #2d2d2d !important;
    border-color: #374151 !important;
}

.dark-mode .card-header,
.dark-mode .panel-header,
.dark-mode .widget-header {
    background-color: #374151 !important;
    border-bottom-color: #4b5563 !important;
    color: #f9fafb !important;
}

.dark-mode .card-body,
.dark-mode .panel-body,
.dark-mode .widget-body {
    color: #d1d5db !important;
}

.dark-mode .card-title,
.dark-mode .panel-title,
.dark-mode .widget-title {
    color: #f9fafb !important;
}

/* Admin Forms */
.dark-mode .admin-form label,
.dark-mode form label {
    color: #f9fafb !important;
}

.dark-mode .admin-form select,
.dark-mode form select {
    background-color: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

/* ============================================
   LEGAL PAGES - Improved Readability
   ============================================ */

/* Legal Page Main Container */
.dark-mode .legal-content,
.dark-mode article,
.dark-mode main {
    background-color: #2d2d2d;
}

/* Legal Page Headings - Maximum Contrast */
.dark-mode article h1,
.dark-mode article h2,
.dark-mode article h3,
.dark-mode article h4,
.dark-mode main h1,
.dark-mode main h2,
.dark-mode main h3,
.dark-mode main h4 {
    color: #f9fafb !important;
}

/* Legal Page Paragraphs and Lists */
.dark-mode article p,
.dark-mode article li,
.dark-mode article div,
.dark-mode main p,
.dark-mode main li,
.dark-mode main div {
    color: #d1d5db !important;
}

/* Legal Page Strong/Bold Text */
.dark-mode article strong,
.dark-mode article b,
.dark-mode main strong,
.dark-mode main b {
    color: #f9fafb !important;
}

/* Legal Page Sections */
.dark-mode section {
    background-color: #2d2d2d;
}

.dark-mode section h2,
.dark-mode section h3 {
    color: #f9fafb !important;
}

.dark-mode section p,
.dark-mode section div,
.dark-mode section li {
    color: #d1d5db !important;
}

/* Legal Page Lists */
.dark-mode ul li,
.dark-mode ol li {
    color: #d1d5db !important;
}

.dark-mode ul li strong,
.dark-mode ol li strong {
    color: #f9fafb !important;
}

/* Legal Page Definition Lists */
.dark-mode dt {
    color: #f9fafb !important;
    font-weight: bold;
}

.dark-mode dd {
    color: #d1d5db !important;
}

/* Legal Page Call-to-Action Sections */
.dark-mode .cta-section,
.dark-mode [class*="bg-gradient"] {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
}

.dark-mode .cta-section h2,
.dark-mode .cta-section p,
.dark-mode [class*="bg-gradient"] h2,
.dark-mode [class*="bg-gradient"] p {
    color: #ffffff !important;
}

/* Legal Page Contact Information */
.dark-mode .contact-info,
.dark-mode [class*="contact-"] {
    background-color: #374151;
}

.dark-mode .contact-info p,
.dark-mode .contact-info a {
    color: #d1d5db !important;
}

.dark-mode .contact-info a:hover {
    color: #3b82f6 !important;
}

/* Ensure all nested divs in content areas are readable */
.dark-mode .space-y-8 > div,
.dark-mode .space-y-6 > div,
.dark-mode .space-y-4 > div {
    color: #d1d5db;
}

/* Legal Page Icon Headers */
.dark-mode .inline-flex {
    background-color: #1e40af !important;
}

/* Override any remaining light backgrounds */
.dark-mode .bg-gray-50,
.dark-mode .bg-gray-100 {
    background-color: #2d2d2d !important;
}

.dark-mode .bg-gray-200 {
    background-color: #374151 !important;
}

/* ============================================
   PRINT MODE (Keep light for printing)
   ============================================ */
@media print {
    body.dark-mode {
        background-color: white !important;
        color: black !important;
    }
    
    .dark-mode * {
        background-color: white !important;
        color: black !important;
        border-color: #ddd !important;
    }
}