/* ============================================
   DARK MODE STYLES FOR SALESGH
   ============================================ */

/* Root Variables for Theme Colors */
:root {
    /* Light Mode (Default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --text-tertiary: #6b7280;
    --border-color: #e5e7eb;
    --shadow-color: rgba(0, 0, 0, 0.1);
    
    /* Brand Colors (same in both modes) */
    --color-primary: #6A00F4;
    --color-secondary: #D902EE;
    --color-accent: #3A0CA3;
}

/* Dark Mode Variables */
.dark-mode {
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;
    --border-color: #334155;
    --shadow-color: rgba(0, 0, 0, 0.4);
    
    /* Slightly muted brand colors for dark mode comfort */
    --color-primary-muted: #7c3aed;
    --color-secondary-muted: #e879f9;
    --color-accent-muted: #6366f1;
}

/* Smooth Transition for Theme Switch */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

body,
.dark-mode body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ============================================
   DARK MODE BASE STYLES
   ============================================ */

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

/* Header */
.dark-mode header {
    background-color: var(--bg-secondary) !important;
    box-shadow: 0 1px 3px var(--shadow-color);
}

.dark-mode header .text-gray-700 {
    color: var(--text-secondary) !important;
}

.dark-mode header .text-gray-700:hover {
    color: var(--color-primary-muted) !important;
}

.dark-mode header .text-primary {
    color: var(--color-primary-muted) !important;
}

/* Mobile Menu */
.dark-mode #mobile-menu-panel {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .mobile-nav-link {
    color: var(--text-secondary) !important;
}

.dark-mode .mobile-nav-link:hover {
    background-color: var(--bg-tertiary) !important;
    color: var(--color-primary-muted) !important;
}

.dark-mode .border-gray-200 {
    border-color: var(--border-color) !important;
}

/* ============================================
   SECTIONS & CONTAINERS
   ============================================ */

.dark-mode section.bg-white {
    background-color: var(--bg-primary) !important;
}

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

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

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

/* Text Colors */
.dark-mode .text-gray-800 {
    color: var(--text-primary) !important;
}

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

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

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

.dark-mode .text-gray-900 {
    color: var(--text-primary) !important;
}

/* ============================================
   CARDS & PANELS
   ============================================ */

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

.dark-mode .border-gray-200 {
    border-color: var(--border-color) !important;
}

.dark-mode .border {
    border-color: var(--border-color) !important;
}

.dark-mode .shadow-md,
.dark-mode .shadow-lg,
.dark-mode .shadow-xl,
.dark-mode .shadow-2xl {
    box-shadow: 0 4px 6px var(--shadow-color) !important;
}

/* Hover Effects on Cards */
.dark-mode .hover\:shadow-lg:hover,
.dark-mode .hover\:shadow-xl:hover {
    box-shadow: 0 10px 15px var(--shadow-color) !important;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Primary Buttons - Keep vibrant but slightly muted */
.dark-mode .bg-primary {
    background-color: var(--color-primary-muted) !important;
}

.dark-mode .bg-primary:hover,
.dark-mode .hover\:bg-primary:hover {
    background-color: var(--color-accent-muted) !important;
}

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

.dark-mode .bg-secondary:hover,
.dark-mode .hover\:bg-secondary:hover {
    background-color: var(--color-accent-muted) !important;
}

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

.dark-mode .bg-accent:hover,
.dark-mode .hover\:bg-accent:hover {
    background-color: var(--color-primary-muted) !important;
}

/* Text Buttons */
.dark-mode .text-primary {
    color: var(--color-primary-muted) !important;
}

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

.dark-mode .hover\:text-primary:hover {
    color: var(--color-primary-muted) !important;
}

/* Border Buttons */
.dark-mode .border-primary {
    border-color: var(--color-primary-muted) !important;
}

.dark-mode .border-2.border-primary {
    border-color: var(--color-primary-muted) !important;
}

/* ============================================
   FORMS & INPUTS
   ============================================ */

.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    border-color: var(--color-primary-muted) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}

/* ============================================
   FOOTER
   ============================================ */

.dark-mode footer {
    background-color: var(--bg-secondary) !important;
}

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

.dark-mode footer a:hover {
    color: var(--color-primary-muted) !important;
}

/* ============================================
   SPECIAL SECTIONS
   ============================================ */

/* Gradient sections - keep as is, they look good in both modes */
.dark-mode .bg-gradient-to-r,
.dark-mode .bg-gradient-to-br,
.dark-mode .bg-gradient-to-l {
    /* Gradients remain unchanged as they are decorative */
}

/* Feature Cards with Icons */
.dark-mode .bg-primary.bg-opacity-10 {
    background-color: rgba(124, 58, 237, 0.15) !important;
}

/* Pricing Cards - Special attention */
.dark-mode .border-2.border-primary {
    background-color: var(--bg-secondary) !important;
}

/* ============================================
   FAQ SECTION
   ============================================ */

.dark-mode .faq-item {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .faq-question {
    color: var(--text-primary) !important;
}

.dark-mode .faq-answer {
    color: var(--text-secondary) !important;
}

/* ============================================
   TESTIMONIALS
   ============================================ */

.dark-mode .testimonial-card {
    background-color: var(--bg-secondary) !important;
}

/* ============================================
   TABLES
   ============================================ */

.dark-mode table {
    background-color: var(--bg-secondary) !important;
}

.dark-mode th {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

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

.dark-mode tr:hover {
    background-color: var(--bg-tertiary) !important;
}

/* ============================================
   BACK TO TOP BUTTON
   ============================================ */

.dark-mode .back-to-top {
    background-color: var(--color-primary-muted) !important;
}

.dark-mode .back-to-top:hover {
    background-color: var(--color-accent-muted) !important;
}

/* ============================================
   COOKIE CONSENT BANNER
   ============================================ */

.dark-mode .cookie-consent-banner {
    background: linear-gradient(135deg, var(--color-primary-muted), var(--color-accent-muted)) !important;
}

/* ============================================
   DARK MODE TOGGLE BUTTON
   ============================================ */

.dark-mode-toggle,
#darkModeToggle,
#darkModeToggleMobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #4b5563;
}

.dark-mode-toggle:hover,
#darkModeToggle:hover,
#darkModeToggleMobile:hover {
    background-color: #f3f4f6;
}

.dark-mode .dark-mode-toggle,
.dark-mode #darkModeToggle,
.dark-mode #darkModeToggleMobile {
    color: var(--text-secondary);
}

.dark-mode .dark-mode-toggle:hover,
.dark-mode #darkModeToggle:hover,
.dark-mode #darkModeToggleMobile:hover {
    background-color: var(--bg-tertiary);
}

.dark-mode-toggle i,
#darkModeToggle i,
#darkModeToggleMobile i {
    width: 20px;
    height: 20px;
}

/* ============================================
   BREADCRUMBS
   ============================================ */

.dark-mode nav[aria-label="Breadcrumb"] a {
    color: rgba(241, 245, 249, 0.8) !important;
}

.dark-mode nav[aria-label="Breadcrumb"] a:hover {
    color: rgba(241, 245, 249, 1) !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    .dark-mode-toggle,
    #darkModeToggle,
    #darkModeToggleMobile {
        width: 36px;
        height: 36px;
    }
    
    .dark-mode-toggle i,
    #darkModeToggle i,
    #darkModeToggleMobile i {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.dark-mode a:focus,
.dark-mode button:focus {
    outline: 2px solid var(--color-primary-muted);
    outline-offset: 2px;
}

/* Ensure sufficient contrast */
.dark-mode .opacity-90 {
    opacity: 0.95 !important;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */

.dark-mode * {
    transition: background-color 0.3s ease, 
                color 0.3s ease, 
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

/* Preserve fast transitions for hover effects */
.dark-mode a,
.dark-mode button {
    transition: all 0.3s ease;
}

/* ============================================
   LEGAL PAGES (Privacy, Terms, Cookies)
   ============================================ */

.dark-mode .legal-section {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .legal-content {
    color: var(--text-secondary) !important;
}

.dark-mode .legal-content h2,
.dark-mode .legal-content h3,
.dark-mode .legal-content h4 {
    color: var(--text-primary) !important;
}

.dark-mode .legal-content ul li,
.dark-mode .legal-content ol li {
    color: var(--text-secondary) !important;
}

.dark-mode .legal-content a {
    color: var(--color-primary-muted) !important;
}

.dark-mode .legal-content a:hover {
    color: var(--color-secondary-muted) !important;
}

/* ============================================
   INDUSTRY CARDS & FEATURE CARDS
   ============================================ */

.dark-mode .industry-card,
.dark-mode .feature-card {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode .industry-card:hover,
.dark-mode .feature-card:hover {
    background-color: var(--bg-tertiary) !important;
}

/* ============================================
   OFFLINE INSTALLATION NOTICE
   ============================================ */

.dark-mode .offline-notice {
    /* Keep gradient background - it provides good contrast */
    background: linear-gradient(135deg, var(--color-primary-muted), var(--color-accent-muted)) !important;
}

/* ============================================
   IMAGES & MEDIA
   ============================================ */

.dark-mode img {
    opacity: 0.9;
}

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

/* ============================================
   LOADING STATES
   ============================================ */

.dark-mode .loading,
.dark-mode .skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-secondary) 25%,
        var(--bg-tertiary) 50%,
        var(--bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   COOKIE SETTINGS PAGE SPECIFIC
   ============================================ */

.dark-mode #consentStatus {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-color) !important;
}

.dark-mode #withdrawConsent {
    background-color: #dc2626 !important;
}

.dark-mode #withdrawConsent:hover {
    background-color: #b91c1c !important;
}

/* ============================================
   TESTIMONIAL SPECIFIC STYLES
   ============================================ */

.dark-mode .testimonial-card blockquote {
    color: var(--text-secondary) !important;
}

.dark-mode .testimonial-card cite {
    color: var(--text-tertiary) !important;
}

/* ============================================
   FAQ ACCORDION SPECIFIC
   ============================================ */

.dark-mode .faq-item.active {
    background-color: var(--bg-tertiary) !important;
}

.dark-mode .faq-question:hover {
    color: var(--color-primary-muted) !important;
}

/* ============================================
   HERO SECTION IMAGES
   ============================================ */

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

/* ============================================
   WHITE/LIGHT BACKGROUND OVERRIDES
   ============================================ */

.dark-mode .bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark-mode .bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* ============================================
   PRICING CARD HIGHLIGHTS
   ============================================ */

.dark-mode .border-2.border-primary.rounded-xl {
    background-color: var(--bg-tertiary) !important;
    box-shadow: 0 0 20px rgba(124, 58, 237, 0.3) !important;
}

/* ============================================
   MOBILE MENU OVERLAY
   ============================================ */

.dark-mode #mobile-menu {
    background-color: rgba(0, 0, 0, 0.7) !important;
}

/* ============================================
   INDUSTRIES & FEATURE ICONS
   ============================================ */

.dark-mode .bg-opacity-10 {
    background-color: rgba(124, 58, 237, 0.2) !important;
}

/* ============================================
   ENSURE TEXT CONTRAST IN GRADIENT SECTIONS
   ============================================ */

.dark-mode .bg-gradient-to-r .text-white,
.dark-mode .bg-gradient-to-br .text-white,
.dark-mode .bg-gradient-to-l .text-white {
    color: #ffffff !important;
}

/* ============================================
   LINK COLORS IN LIGHT SECTIONS
   ============================================ */

.dark-mode a.hover\:underline {
    color: var(--color-primary-muted) !important;
}

.dark-mode a.hover\:underline:hover {
    text-decoration-color: var(--color-primary-muted) !important;
}

/* ============================================
   PREVENT FLASH OF UNSTYLED CONTENT
   ============================================ */

html:not(.dark-mode) {
    transition: none;
}

html.dark-mode {
    color-scheme: dark;
}

html {
    color-scheme: light;
}

/* ============================================
   SCROLLBAR STYLING FOR DARK MODE
   ============================================ */

.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 6px;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-muted);
}

/* Firefox scrollbar */
.dark-mode * {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-tertiary) var(--bg-secondary);
}