/**
 * Cloudline Modern Refinements
 * Version: 2.4.0
 * Date: October 29, 2025
 * Purpose: Implement Cloudline Modern color palette with 3-color font system
 *
 * Light Mode Color Palette:
 * - Header Blue: #71acde (Darker professional blue)
 * - Button Blue: #71acde gradient (Matches header)
 * - Teal/Cyan: #71C7DD (Headings h2-h6, stat values, emphasis, accent spans)
 * - Gray: #6B7280 (Body text, descriptions, labels)
 * - Black: #2C2C2C (SPARINGLY - main h1 only, primary spans)
 *
 * Font Color Strategy (3 colors):
 * 1. Teal (#71C7DD) - All smaller headings, stat values, emphasis, .text-accent
 * 2. Gray (#6B7280) - Body text, descriptions
 * 3. Black (#2C2C2C) - RARELY used, main page h1 only, .text-primary
 *
 * Refinements:
 * 1. Darker blue header (#71acde) for professional feel
 * 2. Blue gradient buttons matching header
 * 3. Teal headings and stat values for visual hierarchy
 * 4. Minimal black text usage
 * 5. Dark mode with Electric Violet highlights and glows
 * 6. Two-color heading pattern (.text-accent + .text-primary) for visual interest
 * 7. Dark mode toggle button restored - Oct 29, 2025
 */

/* ============================================================================
   HEADER SIMPLIFICATION - Keep only essential UI elements (Oct 29, 2025)
   ============================================================================ */

/* RESTORE header-actions - dark mode toggle is essential */
/* (Previously hidden, now restored per user request) */

/* ============================================================================
   LIGHT MODE - Cloudline Modern Implementation
   Ethereal, airy, professional SaaS aesthetic
   ============================================================================ */

/* Light mode only - not dark mode */
body:not(.dark-mode):not([data-theme="dark"]),
:root:not([data-theme="dark"]) body:not(.dark-mode) {
    /* ========================================
       LAYOUT BACKGROUNDS
       ======================================== */

    /* Sidebar - Very light, almost white with subtle blue tint */
    .artemis-sidebar,
    .sidebar.artemis-sidebar,
    aside.artemis-sidebar {
        background: linear-gradient(180deg,
            rgba(255, 255, 255, 1) 0%,
            rgba(248, 251, 253, 1) 50%,
            rgba(255, 255, 255, 1) 100%
        ) !important;
        border-right: 1px solid rgba(158, 217, 245, 0.15) !important;
    }

    /* Header - Darker blue gradient (#71acde) for professional feel */
    .artemis-global-header,
    .header.artemis-global-header,
    header.artemis-global-header {
        background: linear-gradient(90deg,
            #71acde 0%,
            #6AA0D8 50%,
            #71acde 100%
        ) !important;
        backdrop-filter: blur(10px) !important;
        border-bottom: 1px solid rgba(113, 172, 222, 0.4) !important;
    }

    /* Header title - White text on blue background for proper contrast */
    body:not(.dark-mode) .artemis-global-header .header-title,
    body:not(.dark-mode) .header.artemis-global-header .header-title,
    body:not(.dark-mode) header.artemis-global-header .header-title {
        color: #FFFFFF !important;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    }

    /* Main content area - Very subtle off-white */
    .artemis-main-content,
    .main-content.artemis-main-content,
    main.artemis-main-content {
        background: #FAFCFD !important;
    }

    /* ========================================
       NAVIGATION ITEMS
       ======================================== */

    .artemis-sidebar .nav-item {
        color: #5A5A5A !important;
    }

    .artemis-sidebar .nav-item:hover {
        background: rgba(158, 217, 245, 0.08) !important;
        color: #2C2C2C !important;
    }

    /* Active nav item - Electric Violet accent */
    .artemis-sidebar .nav-item.active {
        background: linear-gradient(135deg,
            rgba(158, 217, 245, 0.15),
            rgba(203, 232, 246, 0.15)
        ) !important;
        color: #8E7CC3 !important;
        border-left: 3px solid #8E7CC3 !important;
        padding-left: 13px !important;
    }
}

/* ============================================================================
   HERO SECTION - Pale Blue to Arctic Blue gradient
   ============================================================================ */

body:not(.dark-mode) .hero-section,
body:not(.dark-mode) .hero,
body:not(.dark-mode) .page-hero {
    background: linear-gradient(135deg,
        rgba(158, 217, 245, 0.25) 0%,
        rgba(203, 232, 246, 0.35) 50%,
        rgba(158, 217, 245, 0.15) 100%
    ) !important;
    border: 1px solid rgba(158, 217, 245, 0.3) !important;
    border-radius: 16px !important;
    backdrop-filter: blur(20px) !important;
}

/* Hero text - Black used ONLY for main h1 */
body:not(.dark-mode) .hero-section h1,
body:not(.dark-mode) .hero h1,
body:not(.dark-mode) .page-hero h1 {
    color: #2C2C2C !important;
}

/* Accent text - Pale Blue/Teal for emphasis */
body:not(.dark-mode) .hero-section h1 .accent-text,
body:not(.dark-mode) .hero h1 .accent-text,
body:not(.dark-mode) .page-hero h1 .accent-text,
body:not(.dark-mode) .accent-blue,
body:not(.dark-mode) .text-pale-blue {
    color: #71C7DD !important;  /* Teal variant for visibility */
    text-shadow: 0 0 8px rgba(113, 199, 221, 0.3);
}

/* Electric Violet accent text */
body:not(.dark-mode) .accent-violet,
body:not(.dark-mode) .text-violet {
    color: #8E7CC3 !important;
}

/* Two-color heading pattern - Accent part (cyan) */
body:not(.dark-mode) .text-accent,
body:not(.dark-mode) h1 .text-accent,
body:not(.dark-mode) h2 .text-accent {
    color: #71C7DD !important;  /* Light cyan for emphasis */
    text-shadow: 0 0 10px rgba(113, 199, 221, 0.3);
}

/* Two-color heading pattern - Primary part (black) */
body:not(.dark-mode) .text-primary,
body:not(.dark-mode) h1 .text-primary,
body:not(.dark-mode) h2 .text-primary {
    color: #2C2C2C !important;  /* Black for main content */
}

/* Subtitle text - Medium gray for readability */
body:not(.dark-mode) .hero-section p,
body:not(.dark-mode) .hero p,
body:not(.dark-mode) .page-hero p {
    color: #6B7280 !important;  /* Gray - one of the 3 colors */
}

/* Section headings h2, h3, h4 - Use TEAL, not black (3-color palette) */
body:not(.dark-mode) h2,
body:not(.dark-mode) h3,
body:not(.dark-mode) h4,
body:not(.dark-mode) h5,
body:not(.dark-mode) h6 {
    color: #71C7DD !important;  /* Teal - one of the 3 colors */
    font-weight: 600 !important;
}

/* Body text - Gray (3-color palette) */
body:not(.dark-mode) p,
body:not(.dark-mode) .text-body {
    color: #6B7280 !important;  /* Gray - one of the 3 colors */
}

/* ============================================================================
   BUSINESS TYPE CARDS - Light, airy aesthetic
   ============================================================================ */

body:not(.dark-mode) .business-type-card,
body:not(.dark-mode) .business-card,
body:not(.dark-mode) .card {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1.5px solid rgba(113, 172, 222, 0.4) !important;  /* Darker blue #71acde */
    box-shadow:
        0 2px 8px rgba(113, 172, 222, 0.15),
        0 1px 3px rgba(113, 172, 222, 0.1) !important;
    backdrop-filter: blur(10px) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body:not(.dark-mode) .business-type-card:hover,
body:not(.dark-mode) .business-card:hover,
body:not(.dark-mode) .card:hover {
    background: rgba(255, 255, 255, 1) !important;
    border-color: rgba(113, 172, 222, 0.6) !important;  /* Darker blue #71acde on hover */
    box-shadow:
        0 8px 24px rgba(113, 172, 222, 0.25),
        0 4px 12px rgba(113, 172, 222, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* Card icons - Darker blue (#71acde) background circles */
body:not(.dark-mode) .business-type-card .icon,
body:not(.dark-mode) .business-card .icon-wrapper,
body:not(.dark-mode) .business-card .business-icon,
body:not(.dark-mode) .card .icon,
body:not(.dark-mode) .business-icon {
    background: linear-gradient(135deg,
        #71acde 0%,
        #5A9BD4 100%
    ) !important;  /* Darker blue gradient matching header */
    border: 2px solid rgba(113, 172, 222, 0.5) !important;
}

/* Card text - Strategic color usage with 3-color palette */
body:not(.dark-mode) .business-type-card h3,
body:not(.dark-mode) .business-card h3,
body:not(.dark-mode) .card h3 {
    color: #71C7DD !important;  /* Teal - one of the 3 colors */
    font-weight: 600 !important;
}

body:not(.dark-mode) .business-type-card p,
body:not(.dark-mode) .business-card p,
body:not(.dark-mode) .card p {
    color: #6B7280 !important;  /* Gray - one of the 3 colors */
}

/* ============================================================================
   STAT CARDS - Arctic Blue backgrounds
   ============================================================================ */

body:not(.dark-mode) .stat-card,
body:not(.dark-mode) .stats-card,
body:not(.dark-mode) .metric-card {
    background: linear-gradient(135deg,
        rgba(203, 232, 246, 0.25) 0%,
        rgba(158, 217, 245, 0.15) 100%
    ) !important;
    border: 1.5px solid rgba(158, 217, 245, 0.35) !important;
    box-shadow:
        0 2px 8px rgba(158, 217, 245, 0.15),
        0 1px 3px rgba(158, 217, 245, 0.1) !important;
}

/* Stat card numbers - Teal for emphasis */
body:not(.dark-mode) .stat-value,
body:not(.dark-mode) .metric-value,
body:not(.dark-mode) .stat-card .stat-number {
    color: #71C7DD !important;  /* Teal - one of the 3 colors */
    font-weight: 600 !important;
    text-shadow: 0 0 10px rgba(113, 199, 221, 0.2);
}

/* Stat card labels - Gray for clarity */
body:not(.dark-mode) .stat-label,
body:not(.dark-mode) .metric-label,
body:not(.dark-mode) .stat-card .stat-title {
    color: #6B7280 !important;  /* Gray - one of the 3 colors */
}

body:not(.dark-mode) .stat-card:hover,
body:not(.dark-mode) .stats-card:hover,
body:not(.dark-mode) .metric-card:hover {
    border-color: rgba(142, 124, 195, 0.4) !important;
    box-shadow:
        0 4px 16px rgba(158, 217, 245, 0.25),
        0 2px 8px rgba(142, 124, 195, 0.15) !important;
}

/* ============================================================================
   BUTTONS - Electric Violet primary, Arctic Blue secondary
   ============================================================================ */

/* Primary buttons - Blue gradient matching header (#71acde) */
body:not(.dark-mode) .btn-primary,
body:not(.dark-mode) button.primary,
body:not(.dark-mode) .primary-button,
body:not(.dark-mode) .btn-action {
    background: linear-gradient(135deg, #71acde 0%, #5A9BD4 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow:
        0 4px 12px rgba(113, 172, 222, 0.35),
        0 2px 4px rgba(113, 172, 222, 0.25) !important;
}

body:not(.dark-mode) .btn-primary:hover,
body:not(.dark-mode) button.primary:hover,
body:not(.dark-mode) .primary-button:hover,
body:not(.dark-mode) .btn-action:hover {
    background: linear-gradient(135deg, #5A9BD4 0%, #4A8BC8 100%) !important;
    box-shadow:
        0 6px 20px rgba(113, 172, 222, 0.45),
        0 3px 8px rgba(113, 172, 222, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* Secondary buttons - Arctic Blue */
body:not(.dark-mode) .btn-secondary,
body:not(.dark-mode) button.secondary,
body:not(.dark-mode) .secondary-button {
    background: rgba(203, 232, 246, 0.3) !important;
    color: #5A5A5A !important;
    border: 1.5px solid rgba(158, 217, 245, 0.4) !important;
}

body:not(.dark-mode) .btn-secondary:hover,
body:not(.dark-mode) button.secondary:hover,
body:not(.dark-mode) .secondary-button:hover {
    background: rgba(203, 232, 246, 0.5) !important;
    border-color: rgba(142, 124, 195, 0.5) !important;
    color: #2C2C2C !important;
}

/* ============================================================================
   FORM INPUTS - Very light, minimal
   ============================================================================ */

body:not(.dark-mode) input[type="text"],
body:not(.dark-mode) input[type="email"],
body:not(.dark-mode) input[type="search"],
body:not(.dark-mode) textarea,
body:not(.dark-mode) select {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1.5px solid rgba(158, 217, 245, 0.3) !important;
    color: #2C2C2C !important;
}

body:not(.dark-mode) input:focus,
body:not(.dark-mode) textarea:focus,
body:not(.dark-mode) select:focus {
    border-color: rgba(142, 124, 195, 0.5) !important;
    box-shadow:
        0 0 0 3px rgba(142, 124, 195, 0.1),
        0 2px 8px rgba(158, 217, 245, 0.15) !important;
    outline: none !important;
}

/* ============================================================================
   OVERALL POLISH
   ============================================================================ */

/* Very subtle page background texture */
body:not(.dark-mode) {
    background:
        radial-gradient(circle at 20% 50%, rgba(158, 217, 245, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(203, 232, 246, 0.04) 0%, transparent 50%),
        #FAFCFD !important;
}

/* Scrollbar styling - Pale blue theme */
body:not(.dark-mode) ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body:not(.dark-mode) ::-webkit-scrollbar-track {
    background: rgba(203, 232, 246, 0.15);
    border-radius: 4px;
}

body:not(.dark-mode) ::-webkit-scrollbar-thumb {
    background: rgba(158, 217, 245, 0.4);
    border-radius: 4px;
}

body:not(.dark-mode) ::-webkit-scrollbar-thumb:hover {
    background: rgba(142, 124, 195, 0.5);
}

/* ============================================================================
   DARK MODE - Cloudline Modern Implementation
   Night sky with Electric Violet aurora and Pale Blue moonlight
   ============================================================================ */

/* Dark mode styles */
body.dark-mode,
body[data-theme="dark"],
:root[data-theme="dark"] body {
    /* ========================================
       LAYOUT BACKGROUNDS
       ======================================== */

    /* Sidebar - EXACT color from mockup */
    .artemis-sidebar,
    .sidebar.artemis-sidebar,
    aside.artemis-sidebar {
        background: linear-gradient(180deg, #1E2A3A 0%, #0F1419 100%) !important;
        border-right: 1px solid rgba(122, 197, 232, 0.2) !important;
        box-shadow: none !important;
    }

    /* Header - EXACT color from mockup */
    .artemis-global-header,
    .header.artemis-global-header,
    header.artemis-global-header {
        background: linear-gradient(135deg, #1E2A3A 0%, #0F1419 100%) !important;
        backdrop-filter: none !important;
        border-bottom: 1px solid rgba(122, 197, 232, 0.2) !important;
        box-shadow: 0 4px 16px rgba(122, 197, 232, 0.1) !important;
    }

    /* Main content area - EXACT color from mockup */
    .artemis-main-content,
    .main-content.artemis-main-content,
    main.artemis-main-content {
        background: #0F1419 !important;
    }

    /* ========================================
       NAVIGATION ITEMS
       ======================================== */

    .artemis-sidebar .nav-item {
        color: #A8B4C4 !important;
    }

    .artemis-sidebar .nav-item:hover {
        background: rgba(122, 197, 232, 0.1) !important;
        color: #E8EDF2 !important;
    }

    /* Active nav item - Electric Violet glow */
    .artemis-sidebar .nav-item.active {
        background: linear-gradient(135deg,
            rgba(160, 141, 214, 0.15),
            rgba(122, 197, 232, 0.1)
        ) !important;
        color: #A08DD6 !important;
        border-left: 3px solid #A08DD6 !important;
        padding-left: 13px !important;
        box-shadow: 0 0 15px rgba(160, 141, 214, 0.2) !important;
    }
}

/* ============================================================================
   DARK MODE - HERO SECTION
   ============================================================================ */

body.dark-mode .hero-section,
body.dark-mode .hero,
body.dark-mode .page-hero,
body[data-theme="dark"] .hero-section,
body[data-theme="dark"] .hero,
body[data-theme="dark"] .page-hero {
    background: linear-gradient(135deg, #1E2A3A 0%, #0F1419 50%, #1E2A3A 100%) !important;
    border: 2px solid rgba(122, 197, 232, 0.3) !important;
    border-radius: 16px !important;
    backdrop-filter: none !important;
    box-shadow: 0 8px 32px rgba(122, 197, 232, 0.2), 0 0 60px rgba(160, 141, 214, 0.1) !important;
}

/* Hero heading - Gradient EXACT from mockup */
body.dark-mode .hero-section h1,
body.dark-mode .hero h1,
body.dark-mode .page-hero h1,
body[data-theme="dark"] .hero-section h1,
body[data-theme="dark"] .hero h1,
body[data-theme="dark"] .page-hero h1 {
    background: linear-gradient(135deg, #7AC5E8 0%, #A08DD6 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    filter: drop-shadow(0 0 20px rgba(122, 197, 232, 0.3)) !important;
}

/* Accent text - Electric Violet with glow */
body.dark-mode .hero-section h1 .accent-text,
body.dark-mode .hero h1 .accent-text,
body.dark-mode .page-hero h1 .accent-text,
body.dark-mode .accent-violet,
body.dark-mode .text-violet,
body[data-theme="dark"] .accent-violet,
body[data-theme="dark"] .text-violet {
    color: #A08DD6 !important;
    text-shadow: 0 0 15px rgba(160, 141, 214, 0.5);
}

/* Cyan accent EXACT from mockup */
body.dark-mode .accent-blue,
body.dark-mode .text-pale-blue,
body[data-theme="dark"] .accent-blue,
body[data-theme="dark"] .text-pale-blue {
    color: #7AC5E8 !important;
    text-shadow: 0 0 12px rgba(122, 197, 232, 0.4);
}

/* Two-color heading pattern - Accent part (cyan from mockup) */
body.dark-mode .text-accent,
body.dark-mode h1 .text-accent,
body.dark-mode h2 .text-accent,
body[data-theme="dark"] .text-accent,
body[data-theme="dark"] h1 .text-accent,
body[data-theme="dark"] h2 .text-accent {
    color: #7AC5E8 !important;  /* Muted cyan from mockup */
    text-shadow: 0 0 15px rgba(122, 197, 232, 0.5);
}

/* Two-color heading pattern - Primary part (light gray) */
body.dark-mode .text-primary,
body.dark-mode h1 .text-primary,
body.dark-mode h2 .text-primary,
body[data-theme="dark"] .text-primary,
body[data-theme="dark"] h1 .text-primary,
body[data-theme="dark"] h2 .text-primary {
    color: #E8EDF2 !important;  /* Light gray for dark mode */
}

/* Subtitle text */
body.dark-mode .hero-section p,
body.dark-mode .hero p,
body.dark-mode .page-hero p,
body[data-theme="dark"] .hero-section p,
body[data-theme="dark"] .hero p,
body[data-theme="dark"] .page-hero p {
    color: #A8B4C4 !important;
}

/* ============================================================================
   DARK MODE - BUSINESS TYPE CARDS
   ============================================================================ */

body.dark-mode .business-type-card,
body.dark-mode .business-card,
body.dark-mode .card,
body[data-theme="dark"] .business-type-card,
body[data-theme="dark"] .business-card,
body[data-theme="dark"] .card {
    background: linear-gradient(135deg, #1E2A3A 0%, #0F1419 100%) !important;
    border: 2px solid rgba(122, 197, 232, 0.3) !important;
    box-shadow: 0 4px 20px rgba(122, 197, 232, 0.15), 0 0 40px rgba(122, 197, 232, 0.05) !important;
    backdrop-filter: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

body.dark-mode .business-type-card:hover,
body.dark-mode .business-card:hover,
body.dark-mode .card:hover,
body[data-theme="dark"] .business-type-card:hover,
body[data-theme="dark"] .business-card:hover,
body[data-theme="dark"] .card:hover {
    background: linear-gradient(135deg, #1E2A3A 0%, #0F1419 100%) !important;
    border-color: var(--accent, #A08DD6) !important;
    box-shadow: 0 8px 32px rgba(122, 197, 232, 0.3), 0 0 60px rgba(160, 141, 214, 0.2) !important;
    transform: translateY(-4px) !important;
}

/* Card icons - Purple gradient matching buttons (EXACT from mockup accent color) */
body.dark-mode .business-type-card .icon,
body.dark-mode .business-card .icon-wrapper,
body.dark-mode .business-card .business-icon,
body.dark-mode .card .icon,
body.dark-mode .card .business-icon,
body[data-theme="dark"] .business-type-card .icon,
body[data-theme="dark"] .business-card .icon-wrapper,
body[data-theme="dark"] .business-card .business-icon,
body[data-theme="dark"] .card .icon,
body[data-theme="dark"] .card .business-icon {
    background: linear-gradient(135deg, #A08DD6 0%, #8E7CC3 100%) !important;
    border: 2px solid rgba(160, 141, 214, 0.4) !important;
    box-shadow: 0 0 20px rgba(160, 141, 214, 0.4) !important;
}

/* Card headings - Lavender purple from mockup */
body.dark-mode .business-type-card h3,
body.dark-mode .business-card h3,
body.dark-mode .card h3,
body[data-theme="dark"] .business-type-card h3,
body[data-theme="dark"] .business-card h3,
body[data-theme="dark"] .card h3 {
    color: #a896d4 !important;
    text-shadow: 0 0 10px rgba(168, 150, 212, 0.3);
}

body.dark-mode .business-type-card p,
body.dark-mode .business-card p,
body.dark-mode .card p,
body[data-theme="dark"] .business-type-card p,
body[data-theme="dark"] .business-card p,
body[data-theme="dark"] .card p {
    color: #7A8A9E !important;
}

/* ============================================================================
   DARK MODE - STAT CARDS
   ============================================================================ */

body.dark-mode .stat-card,
body.dark-mode .stats-card,
body.dark-mode .metric-card,
body[data-theme="dark"] .stat-card,
body[data-theme="dark"] .stats-card,
body[data-theme="dark"] .metric-card {
    background: linear-gradient(135deg, #1E2A3A 0%, #0F1419 100%) !important;
    border: 2px solid rgba(122, 197, 232, 0.3) !important;
    box-shadow: 0 4px 20px rgba(122, 197, 232, 0.15), 0 0 40px rgba(122, 197, 232, 0.05) !important;
}

/* Stat card numbers - Muted cyan from mockup */
body.dark-mode .stat-value,
body.dark-mode .metric-value,
body.dark-mode .stat-card .stat-number,
body[data-theme="dark"] .stat-value,
body[data-theme="dark"] .metric-value,
body[data-theme="dark"] .stat-card .stat-number {
    color: #7AC5E8 !important;
    font-weight: 600 !important;
    text-shadow: 0 0 20px rgba(122, 197, 232, 0.5);
}

/* Stat card labels */
body.dark-mode .stat-label,
body.dark-mode .metric-label,
body.dark-mode .stat-card .stat-title,
body[data-theme="dark"] .stat-label,
body[data-theme="dark"] .metric-label,
body[data-theme="dark"] .stat-card .stat-title {
    color: #A8B4C4 !important;
}

body.dark-mode .stat-card:hover,
body.dark-mode .stats-card:hover,
body.dark-mode .metric-card:hover,
body[data-theme="dark"] .stat-card:hover,
body[data-theme="dark"] .stats-card:hover,
body[data-theme="dark"] .metric-card:hover {
    border-color: var(--accent, #A08DD6) !important;
    box-shadow: 0 8px 32px rgba(122, 197, 232, 0.3), 0 0 60px rgba(160, 141, 214, 0.2) !important;
    transform: translateY(-4px) !important;
}

/* ============================================================================
   DARK MODE - BUTTONS
   ============================================================================ */

/* Primary buttons - Electric Violet with glow */
body.dark-mode .btn-primary,
body.dark-mode button.primary,
body.dark-mode .primary-button,
body.dark-mode .btn-action,
body[data-theme="dark"] .btn-primary,
body[data-theme="dark"] button.primary,
body[data-theme="dark"] .primary-button,
body[data-theme="dark"] .btn-action {
    background: linear-gradient(135deg, #A08DD6 0%, #8E7CC3 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow:
        0 4px 12px rgba(160, 141, 214, 0.4),
        0 0 25px rgba(160, 141, 214, 0.3) !important;
}

body.dark-mode .btn-primary:hover,
body.dark-mode button.primary:hover,
body.dark-mode .primary-button:hover,
body.dark-mode .btn-action:hover,
body[data-theme="dark"] .btn-primary:hover,
body[data-theme="dark"] button.primary:hover,
body[data-theme="dark"] .primary-button:hover,
body[data-theme="dark"] .btn-action:hover {
    background: linear-gradient(135deg, #B8A7E5 0%, #A08DD6 100%) !important;
    box-shadow:
        0 6px 20px rgba(160, 141, 214, 0.5),
        0 0 40px rgba(160, 141, 214, 0.4) !important;
    transform: translateY(-1px) !important;
}

/* Secondary buttons - EXACT from mockup */
body.dark-mode .btn-secondary,
body.dark-mode button.secondary,
body.dark-mode .secondary-button,
body[data-theme="dark"] .btn-secondary,
body[data-theme="dark"] button.secondary,
body[data-theme="dark"] .secondary-button {
    background: rgba(30, 42, 58, 0.8) !important;
    color: #7AC5E8 !important;
    border: 2px solid #7AC5E8 !important;
    box-shadow: 0 0 20px rgba(122, 197, 232, 0.2) !important;
}

body.dark-mode .btn-secondary:hover,
body.dark-mode button.secondary:hover,
body.dark-mode .secondary-button:hover,
body[data-theme="dark"] .btn-secondary:hover,
body[data-theme="dark"] button.secondary:hover,
body[data-theme="dark"] .secondary-button:hover {
    background: rgba(122, 197, 232, 0.2) !important;
    border-color: #7AC5E8 !important;
    color: #7AC5E8 !important;
    box-shadow: 0 0 30px rgba(122, 197, 232, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* ============================================================================
   DARK MODE - FORM INPUTS
   ============================================================================ */

body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="search"],
body.dark-mode textarea,
body.dark-mode select,
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="search"],
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
    background: rgba(30, 42, 58, 0.8) !important;
    border: 1.5px solid rgba(122, 197, 232, 0.3) !important;
    color: #E8EDF2 !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus,
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus,
body[data-theme="dark"] select:focus {
    border-color: rgba(160, 141, 214, 0.6) !important;
    box-shadow:
        0 0 0 3px rgba(160, 141, 214, 0.2),
        0 0 20px rgba(160, 141, 214, 0.3) !important;
    outline: none !important;
}

/* ============================================================================
   DARK MODE - OVERALL POLISH
   ============================================================================ */

/* Dark background from mockup - very dark blue-black */
body.dark-mode,
body[data-theme="dark"] {
    background:
        radial-gradient(circle at 20% 30%, rgba(168, 150, 212, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(122, 197, 232, 0.02) 0%, transparent 50%),
        #0d1219 !important;
}

/* Scrollbar styling - Violet theme */
body.dark-mode ::-webkit-scrollbar,
body[data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track,
body[data-theme="dark"] ::-webkit-scrollbar-track {
    background: rgba(30, 42, 58, 0.5);
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb,
body[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: rgba(122, 197, 232, 0.4);
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover,
body[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: rgba(160, 141, 214, 0.6);
}

/* ============================================================================
   RESPONSIVE ADJUSTMENTS
   Maintain Cloudline Modern aesthetic on mobile
   ============================================================================ */

@media (max-width: 768px) {
    /* Light mode mobile */
    body:not(.dark-mode) .artemis-sidebar {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
    }

    body:not(.dark-mode) .artemis-global-header {
        background: linear-gradient(90deg,
            #CBE8F6 0%,
            #B8E3F4 50%,
            #CBE8F6 100%
        ) !important;
        backdrop-filter: blur(10px) !important;
    }

    /* Dark mode mobile */
    body.dark-mode .artemis-sidebar,
    body[data-theme="dark"] .artemis-sidebar {
        background: linear-gradient(180deg, #1E2A3A 0%, #0F1419 100%) !important;
        backdrop-filter: blur(20px) !important;
    }

    body.dark-mode .artemis-global-header,
    body[data-theme="dark"] .artemis-global-header {
        background: linear-gradient(135deg, #1E2A3A 0%, #0F1419 100%) !important;
        backdrop-filter: blur(10px) !important;
    }
}