@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

      /* Official FitConnectX CSS Design System - Light & Dark */
      :root {
        --fc-primary: var(--brand-primary);
        --fc-primary-hover: var(--brand-secondary);
        --fc-accent-purple: #6366F1;
        --fc-accent-teal: #2DD4BF;
        --brand-accent-teal: #059669;
        --brand-accent-green: #10B981;
        --brand-accent-rose: #E11D48;
        --fc-bg: var(--bg-main);
        --fc-surface: var(--bg-surface, #FFFFFF);
        --fc-border: var(--border-color, #E2E8F0);
        --fc-text: var(--text-primary, #0F172A);
        --fc-text-muted: var(--text-secondary, #64748B);
        --fc-gradient: var(--accent-gradient);
        --fc-gradient-full: var(--accent-gradient);
      }

      .dark {
        --fc-primary: var(--brand-primary);
        --fc-primary-hover: var(--brand-secondary);
        --fc-accent-purple: #818CF8;
        --fc-accent-teal: #38BDF8;
        --brand-accent-teal: #10B981;
        --brand-accent-green: #34D399;
        --brand-accent-rose: #F43F5E;
        --fc-bg: var(--bg-main);
        --fc-surface: var(--bg-surface, #111827);
        --fc-border: var(--border-color);
        --fc-text: var(--text-primary);
        --fc-text-muted: var(--text-secondary);
        --fc-gradient: var(--accent-gradient);
        --fc-gradient-full: var(--accent-gradient);
      }

      /* ======================================================== */
      /* FITCONNECTX UNIFIED DESIGN SYSTEM OVERRIDES: 1 Style Rule*/
      /* Ensures every button, tab, and pill uses signature style */
      /* ======================================================== */
      html:not([data-theme="burgundy"]) .bg-\[\#5C1D24\],
      html:not([data-theme="burgundy"]) .bg-\[\#5c1d24\],
      html:not([data-theme="burgundy"]) .bg-\[\#611C35\],
      html:not([data-theme="burgundy"]) .bg-\[\#6b1d24\],
      html:not([data-theme="burgundy"]) .bg-\[\#4A0E17\],
      html:not([data-theme="burgundy"]) .bg-\[\#7A1F2D\] {
        background: var(--fc-gradient) !important;
        color: var(--text-on-brand) !important;
      }

      html:not([data-theme="burgundy"]) .text-\[\#5C1D24\],
      html:not([data-theme="burgundy"]) .text-\[\#5c1d24\],
      html:not([data-theme="burgundy"]) .text-\[\#611C35\],
      html:not([data-theme="burgundy"]) .text-\[\#6b1d24\],
      html:not([data-theme="burgundy"]) .text-\[\#4A0E17\],
      html:not([data-theme="burgundy"]) .text-\[\#7A1F2D\] {
        color: var(--fc-primary) !important;
      }

      html:not([data-theme="burgundy"]) .border-\[\#5C1D24\],
      html:not([data-theme="burgundy"]) .border-\[\#5c1d24\],
      html:not([data-theme="burgundy"]) .border-\[\#611C35\] {
        border-color: var(--fc-primary) !important;
      }

      html:not([data-theme="burgundy"]) .ring-\[\#5C1D24\],
      html:not([data-theme="burgundy"]) .ring-\[\#5c1d24\] {
        --tw-ring-color: var(--fc-primary) !important;
      }

      html:not([data-theme="burgundy"]) .hover\:bg-\[\#4A0E17\]:hover,
      html:not([data-theme="burgundy"]) .hover\:bg-\[\#4a0e17\]:hover,
      html:not([data-theme="burgundy"]) .hover\:bg-\[\#5C1D24\]:hover,
      html:not([data-theme="burgundy"]) .hover\:bg-\[\#5c1d24\]:hover {
        background-color: var(--brand-secondary) !important;
      }

      html:not([data-theme="burgundy"]) .hover\:text-\[\#5C1D24\]:hover,
      html:not([data-theme="burgundy"]) .hover\:text-\[\#5c1d24\]:hover {
        color: var(--fc-primary-hover) !important;
      }

      html:not([data-theme="burgundy"]) .group:hover .group-hover\:text-\[\#5C1D24\],
      html:not([data-theme="burgundy"]) .group:hover .group-hover\:text-\[\#5c1d24\] {
        color: var(--fc-primary) !important;
      }

      html:not([data-theme="burgundy"]) .hover\:border-\[\#5C1D24\]\/30:hover,
      html:not([data-theme="burgundy"]) .hover\:border-\[\#5C1D24\]\/40:hover,
      html:not([data-theme="burgundy"]) .hover\:border-\[\#5C1D24\]\/50:hover,
      html:not([data-theme="burgundy"]) .hover\:border-\[\#5c1d24\]\/30:hover,
      html:not([data-theme="burgundy"]) .hover\:border-\[\#5c1d24\]\/40:hover,
      html:not([data-theme="burgundy"]) .hover\:border-\[\#5c1d24\]\/50:hover {
        border-color: var(--brand-primary-light) !important;
      }

      html:not([data-theme="burgundy"]) .focus\:border-\[\#5C1D24\]:focus,
      html:not([data-theme="burgundy"]) .focus\:border-\[\#5c1d24\]:focus,
      html:not([data-theme="burgundy"]) .focus-within\:border-\[\#5C1D24\]:focus-within,
      html:not([data-theme="burgundy"]) .focus-within\:border-\[\#5c1d24\]:focus-within {
        border-color: var(--fc-primary) !important;
      }

      html:not([data-theme="burgundy"]) .focus-within\:ring-\[\#5C1D24\]\/20:focus-within,
      html:not([data-theme="burgundy"]) .focus-within\:ring-\[\#5c1d24\]\/20:focus-within {
        --tw-ring-color: var(--brand-primary-light) !important;
      }

      html:not([data-theme="burgundy"]) .bg-\[\#5C1D24\]\/10,
      html:not([data-theme="burgundy"]) .bg-\[\#5c1d24\]\/10 {
        background-color: var(--brand-primary-light) !important;
      }

      html:not([data-theme="burgundy"]) .bg-\[\#5C1D24\]\/20,
      html:not([data-theme="burgundy"]) .bg-\[\#5c1d24\]\/20 {
        background-color: var(--brand-primary-light) !important;
      }

      html:not([data-theme="burgundy"]) .border-\[\#5C1D24\]\/20,
      html:not([data-theme="burgundy"]) .border-\[\#5c1d24\]\/20 {
        border-color: var(--brand-primary-light) !important;
      }

      html:not([data-theme="burgundy"]) .fill-\[\#5C1D24\]\/10,
      html:not([data-theme="burgundy"]) .fill-\[\#5c1d24\]\/10 {
        fill: var(--brand-primary-light) !important;
      }


      html:not(.dark) .bg-\[\#FAF8F7\],
      html:not(.dark) .bg-\[\#faf8f7\],
      html:not(.dark) .bg-\[\#FAF8F5\],
      html:not(.dark) .bg-\[\#faf8f5\],
      html:not(.dark) .bg-slate-50 {
        background-color: var(--bg-main) !important;
      }

      .dark .bg-slate-50,
      .dark .bg-\[\#FAF8F7\],
      .dark .bg-\[\#FAF8F5\],
      .dark .bg-slate-950,
      .dark .bg-\[\#0B0F19\] {
        background-color: var(--bg-main) !important;
      }

      html:not([data-theme="burgundy"]) .bg-\[\#FAF0F0\],
      html:not([data-theme="burgundy"]) .bg-\[\#faf0f0\],
      html:not([data-theme="burgundy"]) .hover\:bg-\[\#FAF0F0\]:hover,
      html:not([data-theme="burgundy"]) .hover\:bg-\[\#faf0f0\]:hover {
        background-color: var(--brand-primary-light) !important;
      }

      html:not(.dark) .border-\[\#EADAD9\],
      html:not(.dark) .border-\[\#eadad9\] {
        border-color: var(--border-color, #E2E8F0) !important;
      }

      html:not([data-theme="burgundy"]) .border-\[\#F3DCDD\],
      html:not([data-theme="burgundy"]) .border-\[\#f3dcdd\],
      html:not([data-theme="burgundy"]) .hover\:border-\[\#F3DCDD\]:hover,
      html:not([data-theme="burgundy"]) .hover\:border-\[\#f3dcdd\]:hover {
        border-color: rgba(14, 165, 233, 0.25) !important;
      }

      html:not([data-theme="burgundy"]) .border-rose-200 {
        border-color: rgba(14, 165, 233, 0.25) !important;
      }

      html:not([data-theme="burgundy"]) .bg-rose-50,
      html:not([data-theme="burgundy"]) .bg-rose-50\/70,
      html:not([data-theme="burgundy"]) .hover\:bg-rose-50\/50:hover {
        background-color: rgba(14, 165, 233, 0.08) !important;
      }

      html:not([data-theme="burgundy"]) .hover\:bg-rose-100\/80:hover {
        background-color: rgba(14, 165, 233, 0.16) !important;
      }

      html:not([data-theme="burgundy"]) .text-rose-200 {
        color: rgba(255, 255, 255, 0.9) !important;
      }

      /* Dynamic Brand Token Overrides for Analytics Views */
      html:not([data-theme="burgundy"]) .text-brand-accent {
        color: var(--brand-accent) !important;
      }
      html:not([data-theme="burgundy"]) .bg-brand-accent {
        background-color: var(--brand-accent) !important;
      }
      html:not([data-theme="burgundy"]) .border-brand-accent {
        border-color: var(--brand-accent) !important;
      }
      html:not([data-theme="burgundy"]) .text-brand-muted {
        color: var(--brand-muted, #64748B) !important;
      }
      html:not([data-theme="burgundy"]) .bg-brand-accent-light {
        background-color: var(--brand-primary-light) !important;
      }
      html:not(.dark) .border-brand-beige {
        border-color: var(--border-color, #E2E8F0) !important;
      }
      html:not(.dark) .bg-brand-bg {
        background-color: var(--bg-main, #F8FAFC) !important;
      }
      /* Additional Legacy Fallback Remappings */

      /* FITCONNECTX GLOBAL UTILITY CLASSES FOR DESIGN CONSISTENCY */
      .fc-btn-primary {
        background: var(--fc-gradient) !important;
        color: #ffffff !important;
        border-radius: 0.75rem !important;
        font-weight: 700 !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
        cursor: pointer !important;
      }
      .fc-btn-primary:hover {
        filter: brightness(1.1);
        transform: translateY(-1px);
      }
      .fc-tab-active {
        background: var(--fc-gradient) !important;
        color: #ffffff !important;
        font-weight: 800 !important;
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
      }

      .fc-badge-neutral {
        background-color: var(--bg-surface-secondary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        font-weight: 700;
        font-size: 10px;
        padding: 2px 8px;
        border-radius: 6px;
      }
      .dark .fc-badge-neutral {
        background-color: var(--bg-surface-secondary);
        color: var(--text-primary);
        border-color: var(--border-color);
      }

      html:not([data-theme="burgundy"]) .bg-\[\#8C2343\],
      html:not([data-theme="burgundy"]) .bg-\[\#8c2343\],
      html:not([data-theme="burgundy"]) .bg-\[\#8C2D37\],
      html:not([data-theme="burgundy"]) .bg-\[\#8c2d37\] {
        background-color: var(--fc-primary) !important;
      }

      html:not([data-theme="burgundy"]) .text-\[\#8C2343\],
      html:not([data-theme="burgundy"]) .text-\[\#8c2343\],
      html:not([data-theme="burgundy"]) .text-\[\#8C2D37\],
      html:not([data-theme="burgundy"]) .text-\[\#8c2d37\] {
        color: var(--fc-primary) !important;
      }

      html:not([data-theme="burgundy"]) .border-\[\#8C2343\],
      html:not([data-theme="burgundy"]) .border-\[\#8c2343\],
      html:not([data-theme="burgundy"]) .border-\[\#8C2D37\],
      html:not([data-theme="burgundy"]) .border-\[\#8c2d37\] {
        border-color: var(--fc-primary) !important;
      }

      html:not(.dark) .text-brand-dark {
        color: var(--text-primary, #0F172A) !important;
      }
      html:not([data-theme="burgundy"]) .text-brand-accent {
        color: var(--fc-primary) !important;
      }
      html:not([data-theme="burgundy"]) .bg-brand-accent {
        background-color: var(--fc-primary) !important;
      }
      html:not(.dark) .bg-\[\#FDFBF9\],
      html:not(.dark) .bg-\[\#fdfbf9\],
      html:not(.dark) .bg-\[\#FAF5F0\],
      html:not(.dark) .bg-\[\#faf5f0\],
      html:not(.dark) .bg-\[\#FAF8F5\],
      html:not(.dark) .bg-\[\#faf8f5\] {
        background-color: var(--bg-main, #F8FAFC) !important;
      }

      html:not([data-theme="burgundy"]) .bg-\[\#47161C\],
      html:not([data-theme="burgundy"]) .bg-\[\#47161c\],
      html:not([data-theme="burgundy"]) .bg-\[\#4A151B\],
      html:not([data-theme="burgundy"]) .bg-\[\#4a151b\],
      html:not([data-theme="burgundy"]) .bg-\[\#431419\] {
        background-color: var(--fc-primary-hover) !important;
      }

      html:not([data-theme="burgundy"]) .hover\:bg-\[\#47161c\]:hover,
      html:not([data-theme="burgundy"]) .hover\:bg-\[\#47161C\]:hover {
        background-color: var(--fc-primary-hover) !important;
      }

      html:not([data-theme="burgundy"]) .bg-\[\#FAF0F0\],
      html:not([data-theme="burgundy"]) .bg-\[\#faf0f0\],
      html:not([data-theme="burgundy"]) .bg-\[\#F3DCDD\],
      html:not([data-theme="burgundy"]) .bg-\[\#f3dcdd\] {
        background-color: rgba(14, 165, 233, 0.08) !important;
      }

      html:not([data-theme="burgundy"]) .text-\[\#47161C\],
      html:not([data-theme="burgundy"]) .text-\[\#47161c\],
      html:not([data-theme="burgundy"]) .text-\[\#1E1412\],
      html:not([data-theme="burgundy"]) .text-\[\#1e1412\] {
        color: var(--fc-text) !important;
      }

      html:not([data-theme="burgundy"]) .text-\[\#8C7A75\],
      html:not([data-theme="burgundy"]) .text-\[\#8c7a75\] {
        color: var(--fc-text-muted) !important;
      }

      /* ======================================================== */
      /* FITCONNECTX UNIFIED DARK MODE SURFACES & TEXT OVERRIDES   */
      /* Ensures cohesive dark surfaces, no black-on-dark hover   */
      /* Strictly exempts Burgundy Analytics OS                    */
      /* ======================================================== */
      html.dark .bg-white,
      html.dark .bg-white\/95,
      html.dark .bg-white\/90,
      html.dark .bg-white\/80 {
        background-color: var(--fc-surface, #111827) !important;
      }
      html.dark .bg-\[\#FAF8F7\],
      html.dark .bg-\[\#faf8f7\],
      html.dark .bg-\[\#FAF5F0\],
      html.dark .bg-\[\#faf5f0\],
      html.dark .bg-\[\#FAF8F5\],
      html.dark .bg-\[\#faf8f5\],
      html.dark .bg-\[\#FDFBF9\],
      html.dark .bg-\[\#fdfbf9\],
      html.dark .bg-brand-bg,
      html.dark .bg-gray-50,
      html.dark .bg-slate-50,
      html.dark .bg-slate-50\/80,
      html.dark .bg-slate-50\/70,
      html.dark .bg-slate-50\/60,
      html.dark .bg-slate-50\/50,
      html.dark .bg-gray-50\/90,
      html.dark .bg-gray-50\/80 {
        background-color: var(--bg-main, #0B0F19) !important;
      }
      html.dark .bg-gray-100,
      html.dark .bg-gray-100\/80,
      html.dark .bg-slate-100,
      html.dark .bg-slate-200,
      html.dark .bg-slate-200\/70,
      html.dark .bg-slate-200\/50 {
        background-color: var(--bg-surface-secondary) !important;
      }
      html.dark .border-gray-200,
      html.dark .border-gray-200\/80,
      html.dark .border-gray-200\/70,
      html.dark .border-gray-100,
      html.dark .border-gray-300,
      html.dark .border-slate-200,
      html.dark .border-slate-300,
      html.dark .border-brand-beige,
      html.dark .border-\[\#EADAD9\],
      html.dark .border-\[\#eadad9\],
      html.dark .border-\[\#F1EDE6\],
      html.dark .border-\[\#f1ede6\] {
        border-color: var(--border-color) !important;
      }
      html.dark .text-gray-900,
      html.dark .text-gray-800,
      html.dark .text-slate-900,
      html.dark .text-slate-800,
      html.dark .text-brand-dark,
      html.dark .text-\[\#1E1412\],
      html.dark .text-\[\#1e1412\] {
        color: var(--text-primary) !important;
      }
      html.dark .text-gray-700,
      html.dark .text-slate-700 {
        color: var(--text-primary) !important;
      }
      html.dark .text-gray-600,
      html.dark .text-gray-500,
      html.dark .text-slate-600,
      html.dark .text-slate-500,
      html.dark .text-slate-400,
      html.dark .text-brand-muted,
      html.dark .text-\[\#8C5963\],
      html.dark .text-\[\#8c5963\],
      html.dark .text-\[\#8C7A75\],
      html.dark .text-\[\#8c7a75\] {
        color: var(--text-secondary) !important;
      }
      html.dark .hover\:text-gray-900:hover,
      html.dark .hover\:text-gray-800:hover,
      html.dark .hover\:text-slate-900:hover,
      html.dark .hover\:text-slate-800:hover {
        color: var(--text-primary) !important;
      }
      html.dark .hover\:bg-white:hover {
        background-color: rgba(255, 255, 255, 0.08) !important;
      }
      html.dark .hover\:bg-gray-50:hover,
      html.dark .hover\:bg-gray-100:hover,
      html.dark .hover\:bg-slate-50:hover,
      html.dark .hover\:bg-slate-100:hover {
        background-color: rgba(255, 255, 255, 0.06) !important;
      }

      /* Fix Chrome / Edge / Safari Autofill turning inputs blinding white with black text */
      input:-webkit-autofill,
      input:-webkit-autofill:hover, 
      input:-webkit-autofill:focus, 
      input:-webkit-autofill:active,
      select:-webkit-autofill,
      select:-webkit-autofill:hover,
      select:-webkit-autofill:focus {
        transition: background-color 500000s ease-in-out 0s, color 500000s ease-in-out 0s !important;
      }
      html.dark input:-webkit-autofill,
      html.dark input:-webkit-autofill:hover, 
      html.dark input:-webkit-autofill:focus, 
      html.dark input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px var(--bg-surface-secondary) inset !important;
        -webkit-text-fill-color: var(--text-primary) !important;
        caret-color: var(--text-primary) !important;
      }
      html:not(.dark) input:-webkit-autofill,
      html:not(.dark) input:-webkit-autofill:hover, 
      html:not(.dark) input:-webkit-autofill:focus, 
      html:not(.dark) input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px var(--bg-surface) inset !important;
        -webkit-text-fill-color: var(--text-primary) !important;
        caret-color: var(--text-primary) !important;
      }

      body {
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
        background-color: var(--fc-bg, #F8FAFC);
        color: var(--fc-text, #0F172A);
      }
      
      h1, h2, h3, h4, h5, h6, p, span, button, input, label, select, td, th {
        font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      }

      .font-serif, .font-serif-italic {
        font-family: 'Cormorant Garamond', Georgia, serif !important;
        font-style: italic;
      }
      
      .font-serif-regular {
        font-family: 'Cormorant Garamond', Georgia, serif !important;
      }
      
      .font-mono {
        font-family: 'JetBrains Mono', monospace !important;
      }
      
      /* Global Modern Scrollbars (FitConnectX Clean) */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      ::-webkit-scrollbar-track {
        background: transparent;
      }
      ::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.3);
        border-radius: 9999px;
      }
      ::-webkit-scrollbar-thumb:hover {
        background: rgba(14, 165, 233, 0.5);
      }

      .custom-scrollbar {
        scrollbar-width: thin;
        scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
      }
      .custom-scrollbar::-webkit-scrollbar {
        width: 6px;
        height: 6px;
      }
      .custom-scrollbar::-webkit-scrollbar-track {
        background: transparent;
      }
      .custom-scrollbar::-webkit-scrollbar-thumb {
        background: rgba(148, 163, 184, 0.35);
        border-radius: 9999px;
      }
      .custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: rgba(14, 165, 233, 0.5);
      }

      /* Clean Tab / Pill Navigation: Completely hidden horizontal scrollbars */
      .no-scrollbar,
      .hide-scrollbar,
      [data-scrollbar="hidden"] {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
      }
      .no-scrollbar::-webkit-scrollbar,
      .hide-scrollbar::-webkit-scrollbar,
      [data-scrollbar="hidden"]::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
      }
      
      /* PRINT STYLES - Robust Fix */
      @media print {
        @page { 
          size: auto; 
          margin: 10mm; 
        }
        
        /* Kill all scroll containers and fixed heights */
        html, body, #root, .flex, .flex-col, .h-screen, .overflow-hidden, main, div {
          height: auto !important;
          min-height: auto !important;
          max-height: none !important;
          overflow: visible !important;
          overflow-x: visible !important;
          overflow-y: visible !important;
          position: static !important;
          display: block !important;
        }

        /* Hide interface elements */
        .no-print, 
        aside, 
        nav, 
        header, 
        .sidebar-container, 
        .topbar-container,
        button:not(.snapshot-button) {
          display: none !important;
        }

        /* Quality resets */
        * {
          -webkit-print-color-adjust: exact !important;
          print-color-adjust: exact !important;
          box-shadow: none !important;
        }

        .max-w-5xl {
          max-width: 100% !important;
          width: 100% !important;
          margin: 0 !important;
          border: none !important;
          padding: 0 !important;
          box-shadow: none !important;
        }

        .page-break { 
          page-break-before: always !important; 
        }
        
        /* Ensure charts retain their space */
        .recharts-responsive-container {
          width: 100% !important;
          height: 300px !important;
        }
      }