/**
 * Dark Mode Styles
 * Comprehensive dark theme implementation
 */

/* ========================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ======================================== */
:root {
    /* Light Mode Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8fafc;
    --bg-tertiary: #f1f5f9;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border-primary: #e2e8f0;
    --border-secondary: #cbd5e1;
    --accent-primary: #e63946;
    --accent-secondary: #3b82f6;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Unigroup brand colors for light mode */
    --uni-navy: #0b2a4a;
    --uni-red: #d93a2d;
    --uni-accent: #ff0000;
}

/* ========================================
   LIGHT MODE TITLE COLORS (EXPLICIT)
   ======================================== */
/* Ensure titles are visible in light mode - MAXIMUM SPECIFICITY */
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) h4,
html:not([data-theme="dark"]) h5,
html:not([data-theme="dark"]) h6 {
    color: #1e293b !important;
}

html:not([data-theme="dark"]) .text-uniNavy,
html:not([data-theme="dark"]) h1.text-uniNavy,
html:not([data-theme="dark"]) h2.text-uniNavy,
html:not([data-theme="dark"]) h3.text-uniNavy,
html:not([data-theme="dark"]) h4.text-uniNavy,
html:not([data-theme="dark"]) h5.text-uniNavy,
html:not([data-theme="dark"]) h6.text-uniNavy {
    color: #0b2a4a !important;
}

html:not([data-theme="dark"]) .text-slate-800,
html:not([data-theme="dark"]) .text-slate-900,
html:not([data-theme="dark"]) .text-gray-800,
html:not([data-theme="dark"]) .text-gray-900 {
    color: #1e293b !important;
}

/* Force override any existing styles in light mode */
body:not([data-theme="dark"]) h1,
body:not([data-theme="dark"]) h2,
body:not([data-theme="dark"]) h3,
body:not([data-theme="dark"]) h4,
body:not([data-theme="dark"]) h5,
body:not([data-theme="dark"]) h6 {
    color: #1e293b !important;
}

body:not([data-theme="dark"]) .text-uniNavy {
    color: #0b2a4a !important;
}

/* Ultra-specific overrides for common patterns */
html:not([data-theme="dark"]) .text-3xl.text-uniNavy,
html:not([data-theme="dark"]) .text-4xl.text-uniNavy,
html:not([data-theme="dark"]) .text-xl.text-uniNavy,
html:not([data-theme="dark"]) .text-lg.text-uniNavy,
html:not([data-theme="dark"]) .font-bold.text-uniNavy,
html:not([data-theme="dark"]) .font-semibold.text-uniNavy,
html:not([data-theme="dark"]) .font-extrabold.text-uniNavy {
    color: #0b2a4a !important;
}

/* Override any potential inline styles */
html:not([data-theme="dark"]) *[class*="text-uniNavy"] {
    color: #0b2a4a !important;
}

/* NUCLEAR OPTION - Force all text-uniNavy to be dark blue in light mode */
html:not([data-theme="dark"]) .text-uniNavy,
html:not([data-theme="dark"]) .text-uniNavy *,
html:not([data-theme="dark"]) [class*="text-uniNavy"],
html:not([data-theme="dark"]) [class*="text-uniNavy"] * {
    color: #0b2a4a !important;
}

/* Force all headings to be dark in light mode */
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) h4,
html:not([data-theme="dark"]) h5,
html:not([data-theme="dark"]) h6,
html:not([data-theme="dark"]) h1 *,
html:not([data-theme="dark"]) h2 *,
html:not([data-theme="dark"]) h3 *,
html:not([data-theme="dark"]) h4 *,
html:not([data-theme="dark"]) h5 *,
html:not([data-theme="dark"]) h6 * {
    color: #1e293b !important;
}

/* Dark Mode Colors */
[data-theme="dark"] {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --border-primary: #475569;
    --border-secondary: #64748b;
    --accent-primary: #ef4444;
    --accent-secondary: #60a5fa;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
    
    /* Unigroup brand colors for dark mode - brighter and more vibrant */
    --uni-navy: #3b82f6;  /* Blue instead of dark navy for better contrast */
    --uni-red: #ef4444;   /* Brighter red for dark mode */
    --uni-accent: #fbbf24; /* Golden yellow accent for dark mode */
}

/* ========================================
   DARK MODE TOGGLE STYLES
   ======================================== */
.dark-mode-toggle-container {
    position: relative;
    display: inline-block;
}

.dark-mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    width: 60px;
    height: 32px;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.dark-mode-toggle-track {
    width: 100%;
    height: 100%;
    background: var(--border-primary);
    border-radius: 16px;
    position: relative;
    transition: background-color 0.3s ease;
    border: 2px solid var(--border-secondary);
}

[data-theme="dark"] .dark-mode-toggle-track {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
}

.dark-mode-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: var(--bg-primary);
    border-radius: 50%;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .dark-mode-toggle-thumb {
    transform: translateX(28px);
}

.dark-mode-icon {
    position: absolute;
    transition: opacity 0.3s ease;
    color: var(--text-secondary);
}

.sun-icon {
    opacity: 1;
}

.moon-icon {
    opacity: 0;
}

[data-theme="dark"] .sun-icon {
    opacity: 0;
}

[data-theme="dark"] .moon-icon {
    opacity: 1;
}

/* ========================================
   GLOBAL DARK MODE STYLES
   ======================================== */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Force dark mode styles to override all other styles */
html[data-theme="dark"] {
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-white {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-slate-50 {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .bg-slate-100 {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .text-slate-600 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-slate-500 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-slate-700 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-slate-800 {
    color: #ffffff !important;
}

[data-theme="dark"] .text-slate-900 {
    color: #ffffff !important;
}

[data-theme="dark"] .text-gray-800 {
    color: #ffffff !important;
}

[data-theme="dark"] .text-gray-900 {
    color: #ffffff !important;
}

[data-theme="dark"] .border-slate-200 {
    border-color: var(--border-primary) !important;
}

[data-theme="dark"] .border-slate-300 {
    border-color: var(--border-secondary) !important;
}

/* ========================================
   NAVIGATION DARK MODE
   ======================================== */
[data-theme="dark"] .navbar {
    background: rgba(15, 23, 42, 0.95);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--border-primary);
}

/* Logo switching for dark mode */
.navbar .logo-light {
    display: block;
}

.navbar .logo-dark {
    display: none;
}

[data-theme="dark"] .navbar .logo-light {
    display: none;
}

[data-theme="dark"] .navbar .logo-dark {
    display: block;
}


[data-theme="dark"] .navbar-brand {
    color: var(--text-primary);
}

[data-theme="dark"] .navbar-nav .nav-link {
    color: var(--text-secondary);
}

[data-theme="dark"] .navbar-nav .nav-link:hover {
    color: var(--text-primary);
}

[data-theme="dark"] .navbar-nav .nav-link.active {
    color: var(--accent-primary);
}

/* ========================================
   HERO SLIDESHOW DARK MODE
   ======================================== */
[data-theme="dark"] .hero-slideshow-container {
    background: #000;
}

[data-theme="dark"] .hero-slide-overlay {
    background: linear-gradient(
        135deg,
        rgba(0, 0, 0, 0.8) 0%,
        rgba(0, 0, 0, 0.6) 40%,
        rgba(0, 0, 0, 0.4) 70%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

[data-theme="dark"] .hero-indicators {
    background: rgba(15, 23, 42, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .hero-indicator {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .hero-indicator:hover {
    background: rgba(255, 255, 255, 0.4);
    border-color: rgba(255, 255, 255, 0.5);
}

[data-theme="dark"] .hero-indicator-preview {
    background: rgba(15, 23, 42, 0.9);
    border-color: var(--border-primary);
}

/* ========================================
   CARDS AND SECTIONS DARK MODE
   ======================================== */
[data-theme="dark"] .card-glow {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .card-glow:hover {
    box-shadow: var(--shadow-xl);
    border-color: var(--border-secondary);
}

[data-theme="dark"] .glass-morph {
    background: rgba(30, 41, 59, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-primary);
}

/* ========================================
   FORMS DARK MODE
   ======================================== */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

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

/* ========================================
   BUTTONS DARK MODE
   ======================================== */
[data-theme="dark"] .btn-primary {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
}

[data-theme="dark"] .btn-primary:hover {
    background-color: #dc2626;
    border-color: #dc2626;
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--border-primary);
    border-color: var(--border-secondary);
}

/* ========================================
   FOOTER DARK MODE
   ======================================== */
[data-theme="dark"] footer {
    background-color: var(--bg-secondary);
    border-top: 1px solid var(--border-primary);
}

[data-theme="dark"] footer .text-slate-400 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] footer .text-slate-500 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] footer .text-slate-600 {
    color: var(--text-secondary) !important;
}

/* ========================================
   MODAL DARK MODE
   ======================================== */
[data-theme="dark"] .modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-primary);
}

[data-theme="dark"] .modal-header {
    border-bottom: 1px solid var(--border-primary);
}

[data-theme="dark"] .modal-footer {
    border-top: 1px solid var(--border-primary);
}

/* ========================================
   HEADINGS DARK MODE - HIGH SPECIFICITY
   ======================================== */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
    color: #ffffff !important;
}

/* H2 Gradient Override for Dark Mode */
html[data-theme="dark"] h2,
[data-theme="dark"] h2 {
    background: linear-gradient(135deg, var(--uni-navy) 0%, var(--uni-red) 50%, var(--uni-accent) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    background-size: 200% 200% !important;
    animation: gradientShift 3s ease-in-out infinite !important;
}

html[data-theme="dark"] .text-2xl,
html[data-theme="dark"] .text-3xl,
html[data-theme="dark"] .text-4xl,
html[data-theme="dark"] .text-5xl,
html[data-theme="dark"] .text-6xl,
[data-theme="dark"] .text-2xl,
[data-theme="dark"] .text-3xl,
[data-theme="dark"] .text-4xl,
[data-theme="dark"] .text-5xl,
[data-theme="dark"] .text-6xl {
    color: #ffffff !important;
}

html[data-theme="dark"] .font-bold,
html[data-theme="dark"] .font-semibold,
html[data-theme="dark"] .font-extrabold,
[data-theme="dark"] .font-bold,
[data-theme="dark"] .font-semibold,
[data-theme="dark"] .font-extrabold {
    color: #ffffff !important;
}

html[data-theme="dark"] .hero-title,
[data-theme="dark"] .hero-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .hero-description,
[data-theme="dark"] .hero-description {
    color: rgba(255, 255, 255, 0.9) !important;
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .service-title,
html[data-theme="dark"] .company-title,
[data-theme="dark"] .section-title,
[data-theme="dark"] .page-title,
[data-theme="dark"] .card-title,
[data-theme="dark"] .service-title,
[data-theme="dark"] .company-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .text-xl,
html[data-theme="dark"] .text-lg,
[data-theme="dark"] .text-xl,
[data-theme="dark"] .text-lg {
    color: #ffffff !important;
}

/* Force all text elements to be white in dark mode */
html[data-theme="dark"] * {
    color: inherit !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .text-2xl,
html[data-theme="dark"] .text-3xl,
html[data-theme="dark"] .text-4xl,
html[data-theme="dark"] .text-5xl,
html[data-theme="dark"] .text-6xl,
html[data-theme="dark"] .font-bold,
html[data-theme="dark"] .font-semibold,
html[data-theme="dark"] .font-extrabold {
    color: #ffffff !important;
}

/* ========================================
   UTILITY CLASSES DARK MODE
   ======================================== */
/* Only apply in dark mode - ensure light mode colors are preserved */
html[data-theme="dark"] .text-uniNavy,
[data-theme="dark"] .text-uniNavy {
    color: var(--accent-primary) !important;
}

/* Override any inline styles or high specificity rules - DARK MODE ONLY */
html[data-theme="dark"] h1.text-uniNavy,
html[data-theme="dark"] h2.text-uniNavy,
html[data-theme="dark"] h3.text-uniNavy,
html[data-theme="dark"] h4.text-uniNavy,
html[data-theme="dark"] h5.text-uniNavy,
html[data-theme="dark"] h6.text-uniNavy,
[data-theme="dark"] h1.text-uniNavy,
[data-theme="dark"] h2.text-uniNavy,
[data-theme="dark"] h3.text-uniNavy,
[data-theme="dark"] h4.text-uniNavy,
[data-theme="dark"] h5.text-uniNavy,
[data-theme="dark"] h6.text-uniNavy {
    color: var(--accent-primary) !important;
}

[data-theme="dark"] .bg-uniNavy {
    background-color: var(--bg-tertiary) !important;
}

[data-theme="dark"] .border-uniNavy {
    border-color: var(--border-primary) !important;
}

/* ========================================
   AGGRESSIVE DARK MODE OVERRIDE
   ======================================== */
html[data-theme="dark"] {
    color-scheme: dark !important;
}

html[data-theme="dark"] body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] * {
    color: inherit !important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6,
html[data-theme="dark"] .text-2xl,
html[data-theme="dark"] .text-3xl,
html[data-theme="dark"] .text-4xl,
html[data-theme="dark"] .text-5xl,
html[data-theme="dark"] .text-6xl,
html[data-theme="dark"] .font-bold,
html[data-theme="dark"] .font-semibold,
html[data-theme="dark"] .font-extrabold,
html[data-theme="dark"] .hero-title,
html[data-theme="dark"] .section-title,
html[data-theme="dark"] .page-title,
html[data-theme="dark"] .card-title,
html[data-theme="dark"] .service-title,
html[data-theme="dark"] .company-title {
    color: #ffffff !important;
}

html[data-theme="dark"] .text-slate-600,
html[data-theme="dark"] .text-slate-500,
html[data-theme="dark"] .text-slate-400,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-400 {
    color: #cbd5e1 !important;
}

html[data-theme="dark"] .text-slate-700,
html[data-theme="dark"] .text-slate-800,
html[data-theme="dark"] .text-slate-900,
html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-800,
html[data-theme="dark"] .text-gray-900 {
    color: #ffffff !important;
}

/* Maximum specificity override for text-uniNavy - DARK MODE ONLY */
html[data-theme="dark"] body .text-uniNavy,
html[data-theme="dark"] main .text-uniNavy,
html[data-theme="dark"] section .text-uniNavy,
html[data-theme="dark"] div .text-uniNavy {
    color: var(--accent-primary) !important;
}

/* Override any Tailwind-generated styles - DARK MODE ONLY */
html[data-theme="dark"] *[class*="text-uniNavy"] {
    color: var(--accent-primary) !important;
}

/* ========================================
   SMOOTH TRANSITIONS
   ======================================== */
* {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* ========================================
   DARK MODE ANIMATIONS
   ======================================== */
@keyframes darkModeFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-theme="dark"] * {
    animation: darkModeFadeIn 0.3s ease-out;
}

/* ========================================
   RESPONSIVE DARK MODE
   ======================================== */
@media (max-width: 768px) {
    .dark-mode-toggle-container {
        position: fixed;
        top: 1rem;
        right: 1rem;
        z-index: 1001;
    }
    
    .dark-mode-toggle {
        width: 50px;
        height: 28px;
    }
    
    .dark-mode-toggle-thumb {
        width: 20px;
        height: 20px;
    }
    
    [data-theme="dark"] .dark-mode-toggle-thumb {
        transform: translateX(22px);
    }
}
