/**
 * WhenBRRR Contrast Accessibility Fixes
 * WCAG 2.1 AA Compliance - Minimum 4.5:1 for text, 3:1 for UI components
 * 
 * This file overrides low-contrast colors across the application
 * to ensure all text and interactive elements meet accessibility standards.
 * 
 * Architecture Note:
 * - Uses CSS custom properties to reduce !important declarations
 * - Provides consistent color tokens across light/dark themes
 * - Supports Windows High Contrast Mode and forced-colors
 */

/* ============================================================================
   CSS CUSTOM PROPERTIES (Design Tokens for Accessibility)
   These reduce the need for !important by establishing a consistent cascade.
   ============================================================================ */
   
:root {
    /* Text colors - WCAG AA compliant */
    --wb-text-primary: #1f2937;         /* gray-800, 8.6:1 on white */
    --wb-text-secondary: #475569;       /* slate-600, 4.7:1 on white */
    --wb-text-muted: #6b7280;           /* gray-500, 4.6:1 on white */
    --wb-text-on-dark: #ffffff;         /* white, maximum contrast on dark */
    --wb-text-on-dark-secondary: #cbd5e1; /* slate-300, 7.2:1 on dark */
    
    /* Button colors */
    --wb-btn-primary-bg: #2563eb;       /* blue-600 */
    --wb-btn-primary-text: #ffffff;
    --wb-btn-secondary-bg: #f3f4f6;     /* gray-100 */
    --wb-btn-secondary-text: #1f2937;   /* gray-800 */
    
    /* Link colors */
    --wb-link-color: #1e40af;           /* blue-800, 5.1:1 */
    --wb-link-hover: #1d4ed8;           /* blue-700 */
    
    /* Integration brand colors */
    --wb-hubspot-text: #b75100;
    --wb-hubspot-bg: #ffeadb;
    --wb-salesforce-text: #0b69c7;
    --wb-salesforce-bg: #e0f2ff;
    
    /* Alert colors */
    --wb-alert-success-bg: #d1fae5;
    --wb-alert-success-text: #065f46;   /* 8.9:1 */
    --wb-alert-warning-bg: #fef3c7;
    --wb-alert-warning-text: #92400e;   /* 7.0:1 */
    --wb-alert-danger-bg: #fee2e2;
    --wb-alert-danger-text: #7f1d1d;    /* 9.5:1 */
    --wb-alert-info-bg: #dbeafe;
    --wb-alert-info-text: #1e40af;      /* 5.1:1 */
}

[data-theme="dark"],
.dark-theme {
    --wb-text-primary: #f3f4f6;         /* gray-100 */
    --wb-text-secondary: #cbd5e1;       /* slate-300 */
    --wb-text-muted: #94a3b8;           /* slate-400, 4.8:1 on dark */
    --wb-btn-secondary-bg: #374151;     /* gray-700 */
    --wb-btn-secondary-text: #f3f4f6;   /* gray-100 */
    --wb-link-color: #93c5fd;           /* blue-300, 7.2:1 on dark */
    --wb-link-hover: #bfdbfe;           /* blue-200 */
}

/* ============================================================================
   CRITICAL FIX: Reset aggressive link styling from style.css
   The rule "button,.btn,.alert,.chip,.badge,.nav-link,a{color:#fff;background-color:#2563eb}"
   applies blue button styling to ALL links which breaks normal text links.
   ============================================================================ */

/* Reset link styling to sensible defaults - text links should not have button styling */
a:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-integration):not(.nav-cta):not([class*="cta"]):not(.toolbar-btn):not(.ent-btn) {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: auto !important;
    min-height: auto !important;
    border-radius: 0 !important;
}

/* Dashboard sidebar nav links need white text on dark sidebar background */
.sidebar .nav-link,
.sidebar a[data-nav] {
    background-color: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.95) !important;
}

.sidebar .nav-link:hover,
.sidebar a[data-nav]:hover,
.sidebar .nav-link--active,
.sidebar a[data-nav].nav-link--active {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

.sidebar .nav-link svg,
.sidebar a[data-nav] svg {
    color: inherit !important;
}

/* Toolbar and action buttons - ensure visible text */
.toolbar-btn,
.action-btn,
.ent-btn--primary,
.btn-primary {
    color: #ffffff !important;
}

.toolbar-btn:hover,
.action-btn:hover,
.ent-btn--primary:hover,
.btn-primary:hover {
    color: #ffffff !important;
}

/* Secondary buttons - dark text on light background */
.btn-secondary,
.ent-btn--secondary {
    color: var(--color-text, #1f2937) !important;
    background-color: var(--color-bg-secondary, #f3f4f6) !important;
}

/* Integration buttons - specific colors */
.btn-integration.hubspot {
    color: #b75100 !important;
    background-color: #ffeadb !important;
}

.btn-integration.salesforce {
    color: #0b69c7 !important;
    background-color: #e0f2ff !important;
}

/* ============================================================================
   GLOBAL COLOR OVERRIDES (WCAG AA Compliant)
   ============================================================================ */

/* Replace #94a3b8 (slate-400, 2.8:1 on dark - FAIL) with #cbd5e1 (slate-300, 7.2:1 - PASS) on dark backgrounds */
[style*="background: linear-gradient(135deg, #0b1b33"] .text-secondary,
[style*="background: linear-gradient(135deg, #0f2747"] .text-secondary,
.budget-header .text-secondary,
.dark-bg .text-secondary {
    color: #cbd5e1 !important;
}

/* Replace #64748b (slate-500, 3.2:1 on white - FAIL) with #475569 (slate-600, 4.7:1 - PASS) on light backgrounds */
.text-muted,
.subtitle,
.helper-text,
.stat-label-secondary {
    color: #475569 !important;
}

/* Replace #9ca3af (gray-400, 2.9:1 on white - FAIL) with #6b7280 (gray-500, 4.6:1 - PASS) */
.placeholder-text,
.disabled-text,
.inactive-label {
    color: #6b7280 !important;
}

/* ============================================================================
   BUTTON CONTRAST FIXES
   ============================================================================ */

/* Ensure all ghost/outline buttons meet 3:1 contrast ratio */
.btn-ghost,
.btn-outline {
    color: #1e40af !important; /* blue-800, high contrast */
    border-color: #1e40af !important;
}

.btn-ghost:hover,
.btn-outline:hover {
    background: #1e40af !important;
    color: #ffffff !important;
}

/* Dark theme button fixes */
[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn-outline {
    color: #93c5fd !important; /* blue-300, 7.2:1 on dark */
    border-color: #93c5fd !important;
}

[data-theme="dark"] .btn-ghost:hover,
[data-theme="dark"] .btn-outline:hover {
    background: #93c5fd !important;
    color: #1e293b !important; /* slate-800 */
}

/* ============================================================================
   SPECIFIC COMPONENT FIXES
   ============================================================================ */

/* BRRRBOT placeholder text */
.brrrbot-input::placeholder,
.brrrbot-textarea::placeholder {
    color: #6b7280 !important; /* gray-500, 4.6:1 */
    opacity: 1;
}

/* Command center secondary text */
.command-center .metric-subtitle,
.command-center .stat-description {
    color: #475569 !important; /* slate-600, 4.7:1 */
}

/* ROI Calculator labels */
.roi-label,
.roi-helper,
.roi-description {
    color: #475569 !important; /* slate-600, 4.7:1 */
}

/* HubSpot integration inactive text */
.hubspot-inactive,
.hubspot-disabled,
.salesforce-inactive {
    color: #6b7280 !important; /* gray-500, 4.6:1 */
}

/* Enterprise UX secondary text on light backgrounds */
.enterprise-subtitle,
.enterprise-description,
.enterprise-helper {
    color: #475569 !important; /* slate-600, 4.7:1 */
}

/* Enhanced dashboard - already fixed in main file, ensure consistency */
.data-highlight-label {
    color: #475569 !important; /* slate-600, 4.7:1 */
}

/* Visual effects muted text */
.visual-effects .muted-text,
.visual-effects .secondary-label {
    color: #475569 !important; /* slate-600, 4.7:1 */
}

/* ============================================================================
   DARK MODE SPECIFIC FIXES
   ============================================================================ */

[data-theme="dark"] .text-muted,
[data-theme="dark"] .subtitle,
[data-theme="dark"] .helper-text {
    color: #cbd5e1 !important; /* slate-300, 7.2:1 on dark */
}

[data-theme="dark"] .placeholder-text,
[data-theme="dark"] .disabled-text {
    color: #94a3b8 !important; /* slate-400, 4.8:1 on dark - acceptable for disabled state */
}

/* ============================================================================
   TRANSPARENT OVERLAY FIXES
   ============================================================================ */

/* Increase opacity of low-contrast transparent backgrounds */
.overlay-light {
    background: rgba(255, 255, 255, 0.15) !important; /* Increased from 0.08 */
}

.border-translucent {
    border-color: rgba(255, 255, 255, 0.3) !important; /* Increased from 0.1 */
}

/* Status pills with better contrast */
.status-pill {
    background: rgba(255, 255, 255, 0.2) !important; /* Increased from 0.08 */
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* ============================================================================
   FOCUS INDICATORS (WCAG 2.4.7 - Enhanced Visibility)
   ============================================================================ */

/* Ensure all focus states are clearly visible with 3px outline */
button:focus-visible,
.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible,
.chip:focus-visible {
    outline: 3px solid #2563eb !important; /* blue-600 */
    outline-offset: 2px !important;
    border-radius: 6px;
}

/* Dark theme focus indicators */
[data-theme="dark"] button:focus-visible,
[data-theme="dark"] .btn:focus-visible,
[data-theme="dark"] a:focus-visible,
[data-theme="dark"] input:focus-visible,
[data-theme="dark"] .nav-link:focus-visible {
    outline-color: #60a5fa !important; /* blue-400, high contrast on dark */
}

/* ============================================================================
   REGIME BANNER TEXT CONTRAST
   ============================================================================ */

/* Ensure white text on regime banners has sufficient contrast */
.regime-banner-enhanced .regime-description {
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important; /* Improves readability */
    opacity: 1 !important; /* Remove any opacity reduction */
}

.regime-banner-enhanced .regime-title {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================================
   LINK CONTRAST
   ============================================================================ */

/* Ensure all links meet 4.5:1 contrast on light backgrounds 
   IMPORTANT: Exclude sidebar, nav-link, btn classes to prevent override conflicts */
a:not(.nav-link):not([class*="btn"]):not(.sidebar a):not(.skip-link):not(.footer a):not([class*="cta"]):not([class*="link"]) {
    color: #1e40af !important; /* blue-800, 7.3:1 on white */
}

a:not(.nav-link):not([class*="btn"]):not(.sidebar a):not(.skip-link):not(.footer a):not([class*="cta"]):not([class*="link"]):hover {
    color: #1e3a8a !important; /* blue-900, 9.2:1 on white */
}

[data-theme="dark"] a:not(.nav-link):not([class*="btn"]):not(.sidebar a):not(.skip-link):not(.footer a):not([class*="cta"]):not([class*="link"]) {
    color: #93c5fd !important; /* blue-300, 7.2:1 on dark */
}

[data-theme="dark"] a:not(.nav-link):not([class*="btn"]):not(.sidebar a):not(.skip-link):not(.footer a):not([class*="cta"]):not([class*="link"]):hover {
    color: #bfdbfe !important; /* blue-200, 9.8:1 on dark */
}

/* Sidebar links - white on dark background */
.sidebar a,
.sidebar .nav-link {
    color: rgba(255, 255, 255, 0.95) !important;
}

.sidebar a:hover,
.sidebar .nav-link:hover {
    color: #ffffff !important;
}

.sidebar .nav-link svg {
    color: inherit !important;
}

/* ============================================================================
   CHART LABEL FIXES
   ============================================================================ */

/* Plotly chart axis labels and legends */
.plotly .xtick text,
.plotly .ytick text,
.plotly .legendtext {
    fill: #1f2937 !important; /* gray-800, high contrast */
}

[data-theme="dark"] .plotly .xtick text,
[data-theme="dark"] .plotly .ytick text,
[data-theme="dark"] .plotly .legendtext {
    fill: #f3f4f6 !important; /* gray-100, high contrast on dark */
}

/* ============================================================================
   TABLE TEXT CONTRAST
   ============================================================================ */

/* Table headers and cells */
table th,
.table-header {
    color: #111827 !important; /* gray-900, maximum contrast */
}

table td,
.table-cell {
    color: #1f2937 !important; /* gray-800, high contrast */
}

[data-theme="dark"] table th,
[data-theme="dark"] .table-header {
    color: #f9fafb !important; /* gray-50 */
}

[data-theme="dark"] table td,
[data-theme="dark"] .table-cell {
    color: #f3f4f6 !important; /* gray-100 */
}

/* ============================================================================
   BADGE AND CHIP FIXES
   ============================================================================ */

/* Ensure badges have sufficient contrast (3:1 minimum for UI components) */
.badge,
.chip {
    color: #ffffff !important;
    font-weight: 600 !important; /* Enhance readability */
}

.badge.secondary,
.chip.secondary {
    background: #475569 !important; /* slate-600, 4.7:1 */
    color: #ffffff !important;
}

/* ============================================================================
   ALERT CONTRAST
   ============================================================================ */

/* Warning alerts - ensure text meets 4.5:1 */
.alert-warning {
    background: #fef3c7 !important; /* amber-100 */
    color: #78350f !important; /* amber-900, 9.1:1 */
    border-color: #fbbf24 !important; /* amber-400 */
}

.alert-warning strong {
    color: #78350f !important;
}

/* Info alerts */
.alert-info {
    background: #dbeafe !important; /* blue-100 */
    color: #1e3a8a !important; /* blue-900, 9.2:1 */
    border-color: #3b82f6 !important; /* blue-500 */
}

/* Success alerts */
.alert-success {
    background: #d1fae5 !important; /* green-100 */
    color: #065f46 !important; /* green-900, 8.9:1 */
    border-color: #10b981 !important; /* green-500 */
}

/* Danger alerts */
.alert-danger {
    background: #fee2e2 !important; /* red-100 */
    color: #7f1d1d !important; /* red-900, 9.5:1 */
    border-color: #ef4444 !important; /* red-500 */
}

/* ============================================================================
   FORM INPUT CONTRAST
   ============================================================================ */

/* Ensure form labels are dark enough */
label,
.form-label {
    color: #1f2937 !important; /* gray-800, 8.6:1 */
    font-weight: 500 !important;
}

[data-theme="dark"] label,
[data-theme="dark"] .form-label {
    color: #f3f4f6 !important; /* gray-100 */
}

/* Input placeholder text */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: #6b7280 !important; /* gray-500, 4.6:1 */
    opacity: 1 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: #9ca3af !important; /* gray-400, 4.8:1 on dark */
}

/* ============================================================================
   PRINT STYLES (Ensure contrast for printed documents)
   ============================================================================ */

@media print {
    /* Force all text to black for maximum print contrast */
    body, p, span, div, li, td, th, a, label, button {
        color: #000000 !important;
    }
    
    /* Ensure backgrounds are removed or very light */
    .metric-card-enhanced,
    .ai-insight-card,
    .regime-banner-enhanced {
        background: #ffffff !important;
        border: 2px solid #000000 !important;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE (Windows High Contrast, forced-colors)
   ============================================================================ */

@media (prefers-contrast: high) {
    /* Force maximum contrast colors */
    body {
        color: CanvasText !important;
        background: Canvas !important;
    }
    
    button, .btn {
        border: 2px solid ButtonBorder !important;
        background: ButtonFace !important;
        color: ButtonText !important;
    }
    
    a {
        color: LinkText !important;
    }
    
    /* Remove all background gradients and images */
    .metric-card-enhanced,
    .ai-insight-card,
    .regime-banner-enhanced,
    .data-highlight {
        background: Canvas !important;
        border: 2px solid CanvasText !important;
        color: CanvasText !important;
    }
}

/* ============================================================================
   CONSOLIDATED MOBILE RESPONSIVE FIXES
   Consolidates mobile-specific overrides from multiple CSS files
   ============================================================================ */

@media (max-width: 768px) {
    /* Mobile navigation */
    .sidebar {
        position: fixed;
        left: -100%;
        width: 280px;
        height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
    }
    
    .sidebar.mobile-open {
        left: 0;
    }
    
    /* Mobile menu button visibility */
    .mobile-menu-btn {
        display: flex !important;
    }
    
    /* Stack cards vertically on mobile */
    .metric-cards-grid,
    .dashboard-grid,
    .cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    /* Ensure touch targets are 44px minimum (WCAG 2.5.5) */
    button,
    .btn,
    .nav-link,
    a[role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Readable font sizes on mobile */
    body {
        font-size: 16px; /* Prevents zoom on iOS input focus */
    }
    
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    /* Form inputs - prevent zoom on iOS */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="password"],
    select,
    textarea {
        font-size: 16px;
    }
    
    /* Horizontal scroll prevention */
    .content-wrapper,
    .main-content,
    main {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Chart responsiveness */
    .chart-container,
    .plotly-graph-div {
        width: 100% !important;
        max-width: 100vw;
    }
    
    /* Table horizontal scroll */
    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Extra small mobile (< 375px) */
@media (max-width: 374px) {
    .btn {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    .card {
        padding: 12px;
    }
}

/* Tablet portrait mode */
@media (min-width: 769px) and (max-width: 1024px) {
    .metric-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}