/**
 * Artemis Unified Design System
 * Version: 1.0.0
 * Date: October 29, 2025
 * Purpose: Fix design inconsistencies across all pages
 *
 * Fixes:
 * 1. Logo size standardization (40px all pages)
 * 2. Sidebar font size standardization (16px)
 * 3. AI Assistant page font increases
 * 4. Header background consistency (light mode for specific pages)
 */

/* ============================================================================
   FIX #1: LOGO SIZE STANDARDIZATION
   Issue: 3 different sizes (32px, 40px, 60px)
   Solution: Standardize to 40px across all pages
   ============================================================================ */

.logo-image,
img.logo-image,
.sidebar-logo img,
.logo img,
.header .logo img {
    height: 40px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Override any inline styles */
.sidebar-header img[src*="artemis-logo"],
img[alt*="Artemis"][src*="logo"] {
    height: 40px !important;
    width: auto !important;
}

/* Mobile: maintain 40px consistency */
@media (max-width: 480px) {
    .logo-image,
    img.logo-image,
    .sidebar-logo img,
    .logo img {
        height: 40px !important;
    }
}

/* Tablet: maintain 40px consistency */
@media (min-width: 481px) and (max-width: 768px) {
    .logo-image {
        height: 40px !important;
    }
}

/* Desktop: maintain 40px consistency */
@media (min-width: 769px) {
    .logo-image {
        height: 40px !important;
    }
}

/* ============================================================================
   FIX #2: SIDEBAR FONT SIZE STANDARDIZATION
   Issue: No explicit font-size defined, causing variations
   Solution: Set to 16px for better readability
   ============================================================================ */

.nav-item,
.sidebar-nav a,
nav a.nav-item {
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* Ensure spans within nav items inherit */
.nav-item span {
    font-size: inherit !important;
}

/* Icon sizing to match larger text */
.nav-item i {
    font-size: 18px !important;
    width: 24px !important;
    text-align: center;
}

/* Sidebar header text */
.sidebar-header,
.sidebar h2,
.sidebar h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Apply to all sidebar variations */
.sidebar-nav .nav-item,
aside .nav-item,
.navigation .nav-item {
    font-size: 16px !important;
}

/* Dark mode: maintain same sizing */
.dark-mode .nav-item,
[data-theme="dark"] .nav-item {
    font-size: 16px !important;
}

/* ============================================================================
   FIX #3: AI ASSISTANT PAGE FONT INCREASES
   Issue: Font sizes too small for primary use case
   Solution: Increase to 16px base, 18-20px headings
   ============================================================================ */

/* Apply to AI Assistant page only */
body[data-page="ai-assistant"] {
    font-size: 16px;
}

/* Chat interface text */
body[data-page="ai-assistant"] .chat-panel p,
body[data-page="ai-assistant"] .chat-message,
body[data-page="ai-assistant"] .chat-input,
body[data-page="ai-assistant"] .chat-messages p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Chat panel headings */
body[data-page="ai-assistant"] .chat-panel h3,
body[data-page="ai-assistant"] .chat-panel h4 {
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Business type buttons - larger text and padding */
body[data-page="ai-assistant"] .business-type-btn {
    font-size: 16px !important;
    padding: 14px 20px !important;
    line-height: 1.4 !important;
}

body[data-page="ai-assistant"] .business-type-btn i {
    font-size: 20px !important;
}

/* Feature cards - enhanced readability */
body[data-page="ai-assistant"] .feature-card h3 {
    font-size: 20px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

body[data-page="ai-assistant"] .feature-card p {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

body[data-page="ai-assistant"] .feature-card {
    padding: 20px !important;
}

/* Budget card text */
body[data-page="ai-assistant"] .budget-card p,
body[data-page="ai-assistant"] .budget-card label {
    font-size: 15px !important;
}

/* ZIP code input and labels */
body[data-page="ai-assistant"] .zip-card label,
body[data-page="ai-assistant"] .zip-card p {
    font-size: 15px !important;
}

/* Segment cards in results */
body[data-page="ai-assistant"] .segment-card .segment-name {
    font-size: 16px !important;
    font-weight: 600 !important;
}

body[data-page="ai-assistant"] .segment-card .segment-description {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Chat welcome prompts */
body[data-page="ai-assistant"] .chat-welcome-prompt {
    font-size: 16px !important;
}

/* Quick actions */
body[data-page="ai-assistant"] .quick-action-btn {
    font-size: 15px !important;
    padding: 12px 18px !important;
}

/* Main page headings */
body[data-page="ai-assistant"] h2 {
    font-size: 22px !important;
}

body[data-page="ai-assistant"] h3 {
    font-size: 20px !important;
}

body[data-page="ai-assistant"] h4 {
    font-size: 18px !important;
}

/* ============================================================================
   NOTE: Header backgrounds removed - headers now respect dark/light mode
   Previous "fix" was forcing white headers in dark mode, which was incorrect
   ============================================================================ */

/* ============================================================================
   ADDITIONAL CONSISTENCY FIXES
   ============================================================================ */

/* Ensure all pages use same card padding */
.card,
.glass-card {
    padding: 20px !important;
}

/* Standardize button text sizes */
button,
.btn {
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* Primary buttons - ensure consistency */
.btn-primary {
    font-size: 16px !important;
    padding: 12px 24px !important;
}

/* Secondary buttons */
.btn-secondary {
    font-size: 15px !important;
    padding: 10px 20px !important;
}

/* ============================================================================
   MOBILE OPTIMIZATIONS
   ============================================================================ */

@media (max-width: 768px) {
    /* Slightly smaller fonts on mobile for space efficiency */
    body[data-page="ai-assistant"] .chat-panel p,
    body[data-page="ai-assistant"] .chat-message {
        font-size: 15px !important;
    }

    body[data-page="ai-assistant"] .business-type-btn {
        font-size: 15px !important;
        padding: 12px 16px !important;
    }

    body[data-page="ai-assistant"] .feature-card h3 {
        font-size: 18px !important;
    }

    body[data-page="ai-assistant"] .feature-card p {
        font-size: 15px !important;
    }

    /* Sidebar nav items on mobile */
    .nav-item {
        font-size: 15px !important;
    }

    .nav-item i {
        font-size: 17px !important;
    }
}

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

/* Ensure minimum tap target size on mobile */
@media (max-width: 768px) {
    button,
    .btn,
    .nav-item,
    a[role="button"] {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* Ensure focus indicators work with new sizing */
*:focus-visible {
    outline-offset: 2px !important;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    /* Ensure logos print at consistent size */
    .logo-image {
        height: 30px !important;  /* Slightly smaller for print */
    }

    /* Ensure text is readable */
    body {
        font-size: 12pt !important;
    }

    .nav-item {
        font-size: 11pt !important;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    /* Remove animations on logo */
    .logo-image {
        transition: none !important;
    }
}

/* ============================================================================
   END OF UNIFIED DESIGN SYSTEM
   ============================================================================ */