/* Protocol Explorer - Minimal Custom CSS for Tailwind + daisyUI */
/* Only contains: D3 visualizations, geometric shapes, animations, and print styles */

/* ================================================================
   Geometric Background Shapes
   ================================================================ */
.geometric-shape {
    border: 1px solid rgba(255, 255, 255, .1);
    width: 10em;
    height: 10em;
    transform: rotate(45deg);
    position: fixed;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Position each shape across the viewport */
.geometric-shape:nth-child(1) { top: -5em; left: 10%; }
.geometric-shape:nth-child(2) { top: 5em; left: 30%; }
.geometric-shape:nth-child(3) { top: -3em; left: 50%; }
.geometric-shape:nth-child(4) { top: 10em; left: 70%; }
.geometric-shape:nth-child(5) { top: 2em; left: 85%; }
.geometric-shape:nth-child(6) { top: 25em; left: 5%; }
.geometric-shape:nth-child(7) { top: 30em; left: 25%; }
.geometric-shape:nth-child(8) { top: 28em; left: 45%; }
.geometric-shape:nth-child(9) { top: 35em; left: 65%; }
.geometric-shape:nth-child(10) { top: 22em; left: 90%; }
.geometric-shape:nth-child(11) { top: 50em; left: 15%; }
.geometric-shape:nth-child(12) { top: 55em; left: 35%; }
.geometric-shape:nth-child(13) { top: 52em; left: 55%; }
.geometric-shape:nth-child(14) { top: 58em; left: 75%; }
.geometric-shape:nth-child(15) { top: 48em; left: 95%; }
.geometric-shape:nth-child(16) { top: 75em; left: 10%; }
.geometric-shape:nth-child(17) { top: 80em; left: 30%; }
.geometric-shape:nth-child(18) { top: 78em; left: 50%; }
.geometric-shape:nth-child(19) { top: 85em; left: 70%; }
.geometric-shape:nth-child(20) { top: 72em; left: 88%; }

/* ================================================================
   D3 Network Visualization Styles
   ================================================================ */

/* ================================================================
   SGS Digital Suite Color Palette & Design System
   ================================================================ */
:root {
    /* Base Colors */
    --color-base-100: #ffffff;
    --color-base-200: #f7f8fa;
    --color-base-300: #e2ecf4;
    --color-base-content: #2a2a2a;
    
    /* Primary Colors - Original Palette */
    --color-primary-orange: #ff6501;
    --color-primary-orange-light: #ff8855;
    --color-primary-orange-dark: #e55a00;
    --color-primary-orange-content: #ffffff;
    
    --color-primary-brown: #8c827c;
    --color-primary-brown-light: #a89f99;
    --color-primary-brown-dark: #736a65;
    --color-primary-brown-content: #ffffff;
    
    /* Secondary Colors - Original Palette */
    --color-secondary-blue: #49738b;
    --color-secondary-blue-light: #6b9bb8;
    --color-secondary-blue-dark: #3a5a6f;
    --color-secondary-blue-content: #ffffff;
    
    --color-secondary-green: #254406;
    --color-secondary-green-light: #3a6b0a;
    --color-secondary-green-dark: #1a3304;
    --color-secondary-green-content: #ffffff;
    
    /* Accent Colors - Original Palette */
    --color-accent-peach: #fff0e6;
    --color-accent-brown: #f5f3f2;
    --color-accent-green: #e8f0e4;
    --color-accent-blue: #eef4f8;
    
    /* Semantic Colors - Using Original Palette */
    --color-info: #49738b;
    --color-info-content: #ffffff;
    --color-success: #254406;
    --color-success-content: #ffffff;
    --color-warning: #ff6501;
    --color-warning-content: #ffffff;
    --color-error: #d11e26;
    --color-error-content: #ffffff;
    
    /* Gradient Definitions - Using Original Palette Only */
    --gradient-primary: linear-gradient(135deg, #ff6501 0%, #ff8855 50%, #49738b 100%);
    --gradient-secondary: linear-gradient(135deg, #49738b 0%, #8c827c 50%, #254406 100%);
    --gradient-warm: linear-gradient(135deg, #ff6501 0%, #8c827c 100%);
    --gradient-cool: linear-gradient(135deg, #49738b 0%, #254406 100%);
    --gradient-success: linear-gradient(135deg, #254406 0%, #e8f0e4 100%);
    
    /* Ensure gradients work as background */
    --gradient-primary-bg: var(--gradient-primary);
    --gradient-secondary-bg: var(--gradient-secondary);
    
    /* Background Accents - Using Original Palette */
    --bg-accent-orange: rgba(255, 101, 1, 0.1);
    --bg-accent-blue: rgba(73, 115, 139, 0.1);
    --bg-accent-brown: rgba(140, 130, 124, 0.1);
    --bg-accent-green: rgba(37, 68, 6, 0.1);
    --bg-accent-peach: rgba(255, 240, 230, 0.8);
    
    /* Border Radii */
    --radius-selector: 0.375rem;
    --radius-field: 0.375rem;
    --radius-box: 0.75rem;

    /* Legacy Variable Mapping (for compatibility) */
    --color-primary: var(--color-primary-orange);
    --color-primary-content: var(--color-primary-orange-content);
    --color-secondary: var(--color-primary-brown);
    --color-secondary-content: var(--color-primary-brown-content);
    --color-accent: var(--color-secondary-blue);
    --color-accent-content: var(--color-secondary-blue-content);
    --color-neutral: var(--color-primary-brown);
    --color-neutral-content: var(--color-primary-brown-content);
    --primary-orange: var(--color-primary-orange);
    --color-primary-orange-hover: var(--color-primary-orange-dark);
    --color-secondary-blue-light: var(--color-secondary-blue-light);
    --color-neutral-light: var(--color-base-200);
    --color-neutral-dark: var(--color-base-content);
    --color-neutral-text: var(--color-base-content);
    --color-neutral-border: var(--color-base-300);
    
    /* Network Visualization Variables */
    --network-node-center: var(--color-primary-orange);
    --network-node-related: var(--color-primary-orange);
    --network-node-brown: var(--color-primary-brown);
    --network-node-green: var(--color-secondary-green);
    --network-link: var(--color-primary-orange);
    --network-link-active: var(--color-primary-orange);
    --network-arrow: var(--color-primary-orange);
    --network-tooltip-bg: rgba(0, 0, 0, 0.9);
    --network-tooltip-color: #ffffff;
}

/* ================================================================
   Colorful Utility Classes - Using Original Palette
   Add vibrant colors throughout the app using our palette
   ================================================================ */

/* Gradient Background Utilities */
.bg-gradient-primary { 
    background: linear-gradient(135deg, #ff6501 0%, #ff8855 50%, #49738b 100%) !important; 
}
.bg-gradient-secondary { 
    background: linear-gradient(135deg, #49738b 0%, #8c827c 50%, #254406 100%) !important; 
}
.bg-gradient-warm { 
    background: linear-gradient(135deg, #ff6501 0%, #8c827c 100%) !important; 
}
.bg-gradient-cool { 
    background: linear-gradient(135deg, #49738b 0%, #254406 100%) !important; 
}
.bg-gradient-success { 
    background: linear-gradient(135deg, #254406 0%, #e8f0e4 100%) !important; 
}

/* Solid Background Colors for Dots and Small Elements */
.bg-orange { background-color: #ff6501 !important; }
.bg-blue { background-color: #49738b !important; }
.bg-brown { background-color: #8c827c !important; }
.bg-green { background-color: #254406 !important; }
.bg-error { background-color: #d11e26 !important; }

/* Text Color Utilities - Original Palette */
.text-orange { color: #ff6501 !important; }
.text-brown { color: #8c827c !important; }
.text-blue { color: #49738b !important; }
.text-green { color: #254406 !important; }
.text-error { color: #d11e26 !important; }
.text-accent-peach { color: #fff0e6 !important; }

/* Border Color Utilities - Original Palette */
.border-orange { border-color: var(--color-primary-orange); }
.border-brown { border-color: var(--color-primary-brown); }
.border-blue { border-color: var(--color-secondary-blue); }
.border-green { border-color: var(--color-secondary-green); }
.border-error { border-color: var(--color-error); }

/* Accent Background Utilities - Original Palette */
.bg-accent-orange { background-color: rgba(255, 101, 1, 0.1) !important; }
.bg-accent-blue { background-color: rgba(73, 115, 139, 0.1) !important; }
.bg-accent-brown { background-color: rgba(140, 130, 124, 0.1) !important; }
.bg-accent-green { background-color: rgba(37, 68, 6, 0.1) !important; }
.bg-accent-error { background-color: rgba(209, 30, 38, 0.1) !important; }
.bg-accent-peach { background-color: #fff0e6 !important; }

/* Hover Effects - Original Palette */
.hover-orange:hover { color: var(--color-primary-orange); }
.hover-brown:hover { color: var(--color-primary-brown); }
.hover-blue:hover { color: var(--color-secondary-blue); }
.hover-green:hover { color: var(--color-secondary-green); }

.hover-bg-orange:hover { background-color: var(--color-primary-orange); color: var(--color-primary-orange-content); }
.hover-bg-brown:hover { background-color: var(--color-primary-brown); color: var(--color-primary-brown-content); }
.hover-bg-blue:hover { background-color: var(--color-secondary-blue); color: var(--color-secondary-blue-content); }
.hover-bg-green:hover { background-color: var(--color-secondary-green); color: var(--color-secondary-green-content); }

/* Shadow Utilities - Original Palette */
.shadow-orange { box-shadow: 0 4px 14px 0 rgba(255, 101, 1, 0.3); }
.shadow-blue { box-shadow: 0 4px 14px 0 rgba(73, 115, 139, 0.3); }
.shadow-brown { box-shadow: 0 4px 14px 0 rgba(140, 130, 124, 0.3); }
.shadow-green { box-shadow: 0 4px 14px 0 rgba(37, 68, 6, 0.3); }

/* Custom Checkbox Orange */
.checkbox-orange {
    --chkbg: var(--color-primary-orange);
    --chkfg: var(--color-primary-orange-content);
    border-color: var(--color-primary-orange) !important;
}

.checkbox-orange:checked {
    background-color: var(--color-primary-orange) !important;
    border-color: var(--color-primary-orange) !important;
    color: var(--color-primary-orange-content) !important;
}

.checkbox-orange:checked:hover {
    background-color: var(--color-primary-orange-dark) !important;
    border-color: var(--color-primary-orange-dark) !important;
}

/* Badge Variants - Original Palette */
.badge-orange {
    background-color: var(--color-primary-orange);
    color: var(--color-primary-orange-content);
    border: none;
}

.badge-brown {
    background-color: var(--color-primary-brown);
    color: var(--color-primary-brown-content);
    border: none;
}

.badge-blue {
    background-color: var(--color-secondary-blue);
    color: var(--color-secondary-blue-content);
    border: none;
}

.badge-green {
    background-color: var(--color-secondary-green);
    color: var(--color-secondary-green-content);
    border: none;
}

/* Button Variants - Original Palette */
.btn-orange {
    background-color: var(--color-primary-orange);
    color: var(--color-primary-orange-content);
    border-color: var(--color-primary-orange);
}

.btn-orange:hover {
    background-color: var(--color-primary-orange-dark);
    border-color: var(--color-primary-orange-dark);
}

.btn-brown {
    background-color: var(--color-primary-brown);
    color: var(--color-primary-brown-content);
    border-color: var(--color-primary-brown);
}

.btn-brown:hover {
    background-color: var(--color-primary-brown-dark);
    border-color: var(--color-primary-brown-dark);
}

.btn-blue {
    background-color: var(--color-secondary-blue);
    color: var(--color-secondary-blue-content);
    border-color: var(--color-secondary-blue);
}

.btn-blue:hover {
    background-color: var(--color-secondary-blue-dark);
    border-color: var(--color-secondary-blue-dark);
}

.btn-green {
    background-color: var(--color-secondary-green);
    color: var(--color-secondary-green-content);
    border-color: var(--color-secondary-green);
}

.btn-green:hover {
    background-color: var(--color-secondary-green-dark);
    border-color: var(--color-secondary-green-dark);
}

/* Badge & Chip Styles - Matching DaisyUI's official implementation */
.badge-soft {
    border: none !important;
    font-weight: 600;
    padding: 0.25rem 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1.2 !important;
}

/* Use oklab color space for more accurate color mixing (matches DaisyUI implementation) */
.badge-soft.badge-primary {
    background-color: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-primary) 10%, var(--color-base-100)) !important;
    color: var(--color-primary) !important;
}

.badge-soft.badge-secondary {
    background-color: color-mix(in oklab, var(--color-secondary) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-secondary) 10%, var(--color-base-100)) !important;
    color: var(--color-secondary) !important;
}

.badge-soft.badge-accent {
    background-color: color-mix(in oklab, var(--color-accent) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-accent) 10%, var(--color-base-100)) !important;
    color: var(--color-accent) !important;
}

.badge-soft.badge-success {
    background-color: color-mix(in oklab, var(--color-success) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-success) 10%, var(--color-base-100)) !important;
    color: var(--color-success) !important;
}

.badge-soft.badge-warning {
    background-color: color-mix(in oklab, var(--color-warning) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-warning) 10%, var(--color-base-100)) !important;
    color: var(--color-warning) !important;
}

.badge-soft.badge-error {
    background-color: color-mix(in oklab, var(--color-error) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-error) 10%, var(--color-base-100)) !important;
    color: var(--color-error) !important;
}

.badge-soft.badge-info {
    background-color: color-mix(in oklab, var(--color-info) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-info) 10%, var(--color-base-100)) !important;
    color: var(--color-info) !important;
}

.badge-soft.badge-neutral {
    background-color: color-mix(in oklab, var(--color-neutral) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-neutral) 10%, var(--color-base-100)) !important;
    color: var(--color-neutral) !important;
}

/* Colorful Soft Badge Variants - Original Palette */
.badge-soft.badge-orange {
    background-color: color-mix(in oklab, var(--color-primary-orange) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-primary-orange) 10%, var(--color-base-100)) !important;
    color: var(--color-primary-orange) !important;
}

.badge-soft.badge-brown {
    background-color: color-mix(in oklab, var(--color-primary-brown) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-primary-brown) 10%, var(--color-base-100)) !important;
    color: var(--color-primary-brown) !important;
}

.badge-soft.badge-blue {
    background-color: color-mix(in oklab, var(--color-secondary-blue) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-secondary-blue) 10%, var(--color-base-100)) !important;
    color: var(--color-secondary-blue) !important;
}

.badge-soft.badge-green {
    background-color: color-mix(in oklab, var(--color-secondary-green) 8%, var(--color-base-100)) !important;
    border-color: color-mix(in oklab, var(--color-secondary-green) 10%, var(--color-base-100)) !important;
    color: var(--color-secondary-green) !important;
}

/* New Design System Components */
/* Centralized hover behavior: default border-base-300, orange border on hover */
.glass-card {
    background: color-mix(in srgb, var(--color-base-100) 80%, transparent);
    backdrop-filter: blur(12px);
    border: 1px solid var(--color-base-300);
    border-radius: var(--radius-box);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card:hover {
    border-color: var(--color-primary-orange);
    box-shadow: 0 4px 6px -1px rgba(255, 101, 1, 0.1), 0 2px 4px -2px rgba(255, 101, 1, 0.05);
}

/* Colorful Glass Card Variants - Original Palette */
.glass-card-orange {
    border-color: var(--color-primary-orange);
}

.glass-card-orange:hover {
    border-color: var(--color-primary-orange);
    box-shadow: 0 10px 15px -3px rgba(255, 101, 1, 0.2), 0 4px 6px -4px rgba(255, 101, 1, 0.1);
}

.glass-card-blue {
    border-color: var(--color-secondary-blue);
}

.glass-card-blue:hover {
    border-color: var(--color-secondary-blue);
    box-shadow: 0 10px 15px -3px rgba(73, 115, 139, 0.2), 0 4px 6px -4px rgba(73, 115, 139, 0.1);
}

.glass-card-brown {
    border-color: var(--color-primary-brown);
}

.glass-card-brown:hover {
    border-color: var(--color-primary-brown);
    box-shadow: 0 10px 15px -3px rgba(140, 130, 124, 0.2), 0 4px 6px -4px rgba(140, 130, 124, 0.1);
}

.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

/* Colorful Hover Lift Variants */
.hover-lift-orange:hover {
    box-shadow: 0 10px 15px -3px rgba(255, 101, 1, 0.3), 0 4px 6px -4px rgba(255, 101, 1, 0.2);
}

.hover-lift-blue:hover {
    box-shadow: 0 10px 15px -3px rgba(73, 115, 139, 0.3), 0 4px 6px -4px rgba(73, 115, 139, 0.2);
}

.hover-lift-brown:hover {
    box-shadow: 0 10px 15px -3px rgba(140, 130, 124, 0.3), 0 4px 6px -4px rgba(140, 130, 124, 0.2);
}

.hover-lift-green:hover {
    box-shadow: 0 10px 15px -3px rgba(37, 68, 6, 0.3), 0 4px 6px -4px rgba(37, 68, 6, 0.2);
}

.stat-card {
    background: var(--color-base-100);
    padding: 1.5rem;
    border-radius: var(--radius-box);
    border: 1px solid var(--color-base-300);
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
}

/* Colorful Stat Card Variants - Original Palette */
.stat-card-orange {
    border-left: 4px solid var(--color-primary-orange);
}

.stat-card-orange:hover {
    border-color: var(--color-primary-orange);
    box-shadow: 0 4px 12px rgba(255, 101, 1, 0.2);
}

.stat-card-blue {
    border-left: 4px solid var(--color-secondary-blue);
}

.stat-card-blue:hover {
    border-color: var(--color-secondary-blue);
    box-shadow: 0 4px 12px rgba(73, 115, 139, 0.2);
}

.stat-card-brown {
    border-left: 4px solid var(--color-primary-brown);
}

.stat-card-brown:hover {
    border-color: var(--color-primary-brown);
    box-shadow: 0 4px 12px rgba(140, 130, 124, 0.2);
}

.stat-card-green {
    border-left: 4px solid var(--color-secondary-green);
}

.stat-card-green:hover {
    border-color: var(--color-secondary-green);
    box-shadow: 0 4px 12px rgba(37, 68, 6, 0.2);
}

.eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 0.5rem;
}

.section-heading {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-base-content);
    margin-bottom: 1rem;
}

.cta-panel {
    background: linear-gradient(135deg, var(--color-base-100) 0%, var(--color-base-200) 100%);
    border-radius: var(--radius-box);
    border: 1px solid var(--color-base-300);
    padding: 2rem;
    transition: all 0.3s ease;
}

.cta-panel:hover {
    background: var(--gradient-primary);
    border-color: var(--color-primary);
    color: white;
}

.cta-panel:hover * {
    color: white !important;
}

/* Colorful CTA Panel Variants */
.cta-panel-orange {
    background: linear-gradient(135deg, rgba(255, 101, 1, 0.1) 0%, rgba(255, 101, 1, 0.05) 100%);
    border-color: var(--color-primary-orange);
}

.cta-panel-orange:hover {
    background: linear-gradient(135deg, var(--color-primary-orange) 0%, var(--color-primary-orange-dark) 100%);
}

.cta-panel-blue {
    background: linear-gradient(135deg, rgba(73, 115, 139, 0.1) 0%, rgba(73, 115, 139, 0.05) 100%);
    border-color: var(--color-secondary-blue);
}

.cta-panel-blue:hover {
    background: linear-gradient(135deg, var(--color-secondary-blue) 0%, var(--color-secondary-blue-dark) 100%);
}

.cta-panel-brown {
    background: linear-gradient(135deg, rgba(140, 130, 124, 0.1) 0%, rgba(140, 130, 124, 0.05) 100%);
    border-color: var(--color-primary-brown);
}

.cta-panel-brown:hover {
    background: linear-gradient(135deg, var(--color-primary-brown) 0%, var(--color-primary-brown-dark) 100%);
}

/* Dark theme overrides - Original Palette */
[data-theme="dark"] {
    --color-base-100: #0f172a;
    --color-base-200: #1e293b;
    --color-base-300: #334155;
    --color-base-content: #f8fafc;
    
    /* Primary Colors - Brighter for dark mode */
    --color-primary-orange: #ff6501;
    --color-primary-orange-light: #ff8855;
    --color-primary-orange-dark: #e55a00;
    --color-primary-orange-content: #ffffff;
    
    --color-primary-brown: #a89f99;
    --color-primary-brown-light: #c4beb9;
    --color-primary-brown-dark: #8c827c;
    --color-primary-brown-content: #ffffff;
    
    /* Secondary Colors - Brighter for dark mode */
    --color-secondary-blue: #6b9bb8;
    --color-secondary-blue-light: #8cb3c7;
    --color-secondary-blue-dark: #49738b;
    --color-secondary-blue-content: #ffffff;
    
    --color-secondary-green: #3a6b0a;
    --color-secondary-green-light: #4d8f0d;
    --color-secondary-green-dark: #254406;
    --color-secondary-green-content: #ffffff;
    
    /* Accent Colors - Adjusted for dark mode */
    --color-accent-peach: rgba(255, 240, 230, 0.2);
    --color-accent-brown: rgba(245, 243, 242, 0.2);
    --color-accent-green: rgba(232, 240, 228, 0.2);
    --color-accent-blue: rgba(238, 244, 248, 0.2);
    
    /* Semantic colors - Using original palette */
    --color-info: #6b9bb8;
    --color-info-content: #ffffff;
    --color-success: #3a6b0a;
    --color-success-content: #ffffff;
    --color-warning: #ff6501;
    --color-warning-content: #ffffff;
    --color-error: #f87171;
    --color-error-content: #ffffff;
    
    /* Background Accents - More visible in dark mode */
    --bg-accent-orange: rgba(255, 101, 1, 0.2);
    --bg-accent-blue: rgba(73, 115, 139, 0.2);
    --bg-accent-brown: rgba(140, 130, 124, 0.2);
    --bg-accent-green: rgba(37, 68, 6, 0.2);
    --bg-accent-peach: rgba(255, 240, 230, 0.3);
    
    /* Legacy mappings for dark mode */
    --color-primary: var(--color-primary-orange);
    --color-primary-content: var(--color-primary-orange-content);
    --color-secondary: var(--color-primary-brown);
    --color-secondary-content: var(--color-primary-brown-content);
    --color-accent: var(--color-secondary-blue);
    --color-accent-content: var(--color-secondary-blue-content);
    --color-neutral: var(--color-primary-brown);
    --color-neutral-content: var(--color-primary-brown-content);
    
    /* Network visualization colors for dark mode */
    --network-node-center: var(--color-primary-orange);
    --network-node-related: var(--color-primary-orange);
    --network-node-brown: var(--color-primary-brown);
    --network-node-green: var(--color-secondary-green);
    --network-link: var(--color-primary-orange);
    --network-link-active: var(--color-primary-orange);
    --network-arrow: var(--color-primary-orange);
    --network-tooltip-bg: rgba(15, 23, 42, 0.95);
    
    color-scheme: dark;
}

/* Ensure glass cards look good in dark mode */
[data-theme="dark"] .glass-card {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Range Slider Styling */
.range {
    height: 0.5rem;
    background: transparent;
    margin: 0.75rem 0;  /* Add vertical margin to prevent clipping */
}

/* Slider track */
.range::-webkit-slider-runnable-track {
    height: 0.5rem;
    background: var(--color-base-300);
    border-radius: 9999px;
}

.range::-moz-range-track {
    height: 0.5rem;
    background: var(--color-base-300);
    border-radius: 9999px;
}

/* Slider thumb */
.range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--color-base-100);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: -0.375rem;
    transition: all 0.2s ease;
}

.range::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    background: var(--color-primary);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--color-base-100);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

/* Slider thumb hover */
.range::-webkit-slider-thumb:hover {
    background: var(--color-primary-orange-hover, #b33c00);
    transform: scale(1.1);
}

.range::-moz-range-thumb:hover {
    background: var(--color-primary-orange-hover, #b33c00);
    transform: scale(1.1);
}

/* Slider focus state */
.range:focus {
    outline: none;
}

.range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(202, 67, 0, 0.2);
}

.range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(202, 67, 0, 0.2);
}

/* ================================================================
   Centralized Table Styling
   Applies consistent borders and hover effects to ALL tables
   ================================================================ */

/* Base table setup - applies to all tables */
.table {
    border-collapse: separate;
    border-spacing: 0;
}

/* Table header styling - consistent separator line */
.table thead tr {
    border-bottom: 1px solid var(--color-base-300) !important;
}

.table thead tr th {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Remove default borders from tbody rows */
.table tbody tr {
    border-top: none;
}

/* Ensure first row doesn't have double border */
.table tbody tr:first-child {
    border-top: none;
}

.table tbody tr:first-child td {
    border-top: none;
}

/* Support for divide-y utility - adds borders between rows */
.table tbody.divide-y > tr + tr {
    border-top: 1px solid var(--color-base-300);
}

.table tbody.divide-y > tr + tr td {
    border-top: 1px solid var(--color-base-300);
}

/* Zebra striping support - alternating row colors */
.table-zebra tbody tr:nth-child(even) {
    background-color: var(--color-base-200);
}

[data-theme="dark"] .table-zebra tbody tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Hover effect for interactive tables */
.table tbody tr.hover\:bg-base-200\/50:hover {
    background-color: var(--color-accent-blue);
}

[data-theme="dark"] .table tbody tr.hover\:bg-base-200\/50:hover {
    background-color: rgba(73, 115, 139, 0.15);
}

/* Colorful table row hover variants */
.table tbody tr.hover-orange:hover {
    background-color: #fef3f0 !important;
}

.table tbody tr.hover-blue:hover {
    background-color: #eef4f8 !important;
}

.table tbody tr.hover-brown:hover {
    background-color: #f5f3f2 !important;
}

.table tbody tr.hover-green:hover {
    background-color: #e8f0e4 !important;
}

/* Direct hover class for table rows */
.hover-blue:hover {
    background-color: #eef4f8 !important;
}

.hover-orange:hover {
    background-color: #fff0e6 !important;
}

.hover-brown:hover {
    background-color: #f5f3f2 !important;
}

.hover-green:hover {
    background-color: #e8f0e4 !important;
}

/* Ensure zebra striping doesn't interfere with borders */
.table-zebra tbody tr {
    border-top: none;
}

/* Methodology link styling */
.methodology-link {
    cursor: pointer;
    color: var(--color-secondary-blue);
    transition: all 0.2s ease;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    padding: 2px 4px;
    border-radius: 3px;
}

.methodology-link:hover {
    color: var(--color-primary-orange);
    text-decoration-style: solid;
    background: var(--color-accent-peach);
    font-weight: 500;
}

/* Colorful Methodology Link Variants - Original Palette */
.methodology-link-orange {
    color: var(--color-primary-orange);
}

.methodology-link-orange:hover {
    color: var(--color-primary-orange-dark);
    background: var(--color-accent-peach);
}

.methodology-link-blue {
    color: var(--color-secondary-blue);
}

.methodology-link-blue:hover {
    background-color: var(--color-primary-orange) !important;
    color: var(--color-primary-orange-content) !important;
}

.methodology-link-brown {
    color: var(--color-primary-brown);
}

.methodology-link-brown:hover {
    color: var(--color-primary-brown-dark);
    background: var(--color-accent-brown);
}

.methodology-link-green {
    color: var(--color-secondary-green);
}

.methodology-link-green:hover {
    color: var(--color-secondary-green-dark);
    background: var(--color-accent-green);
}

/* Network visualization container */
#networkContainer, #networkVisualization {
    border: 1px solid hsl(var(--bc) / 0.2);
    border-radius: 8px;
    background: hsl(var(--b1));
    position: relative;
}

/* Network tooltip */
.network-tooltip,
.protocol-network-tooltip {
    position: absolute;
    background: var(--network-tooltip-bg);
    color: var(--network-tooltip-color);
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 12px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    max-width: 320px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    line-height: 1.6;
}

.network-tooltip strong,
.protocol-network-tooltip strong {
    font-size: 13px;
    color: #fff;
    display: block;
    margin-bottom: 6px;
}

/* Network graph SVG styling */
.network-group .node circle {
    stroke: #fff;
    stroke-width: 2px;
    transition: all 0.2s;
}

.network-group .node:hover circle {
    stroke-width: 3px;
    filter: brightness(1.1);
}

.network-group .node circle.selected {
    stroke: #fff;
    stroke-width: 3px;
    filter: drop-shadow(0 0 8px rgba(255, 101, 1, 0.8));
}

.network-group .link {
    stroke: var(--network-link);
    stroke-opacity: 0.6;
    transition: all 0.2s;
}

.network-group .link:hover {
    stroke-opacity: 0.9;
    stroke-width: 3px;
}

/* Protocol network container */
#protocol-network-container {
    background: linear-gradient(135deg, hsl(var(--b1)) 0%, hsl(var(--b2)) 100%);
    border-radius: 0 0 8px 8px;
    position: relative;
    overflow: hidden;
}

#protocol-network-container .network-group .node circle {
    stroke: #fff;
    stroke-width: 2px;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

#protocol-network-container .network-group .node:hover circle {
    stroke-width: 3px;
    filter: brightness(1.15) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    transform: scale(1.05);
}

#protocol-network-container .network-group .node text {
    font-family: 'Inter', -apple-system, sans-serif;
    pointer-events: none;
    user-select: none;
}

#protocol-network-container .network-group .link {
    stroke-linecap: round;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Methodology Dropdown Styles */
.methodology-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: hsl(var(--b1));
    border: 1px solid hsl(var(--bc) / 0.2);
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-top: 1px;
}

.methodology-dropdown-item {
    padding: 10px 15px;
    cursor: pointer;
    border-bottom: 1px solid hsl(var(--bc) / 0.1);
    transition: background 0.2s;
}

.methodology-dropdown-item:hover {
    background: hsl(var(--b2));
}

.methodology-dropdown-item:last-child {
    border-bottom: none;
}

.methodology-dropdown-item .methodology-id {
    font-weight: 500;
    display: block;
    margin-bottom: 2px;
    font-size: 0.9rem;
}

.methodology-dropdown-item .methodology-meta {
    font-size: 0.8rem;
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 10px;
}

.methodology-dropdown-item .usage-badge {
    background: var(--color-accent-blue);
    color: var(--color-secondary-blue);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
}

.methodology-dropdown-empty {
    padding: 15px;
    text-align: center;
    opacity: 0.6;
}

/* Methodology badge styles */
.methodology-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: var(--color-accent-blue);
    border: 1px solid var(--color-neutral-border);
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.methodology-badge:hover {
    background: var(--color-primary-orange);
    color: white;
    border-color: var(--color-primary-orange);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* ================================================================
   Custom Animations
   ================================================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@keyframes pulse-orange {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(255, 101, 1, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(255, 101, 1, 0);
    }
}

@keyframes pulse-blue {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(73, 115, 139, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(73, 115, 139, 0);
    }
}

@keyframes pulse-brown {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(140, 130, 124, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(140, 130, 124, 0);
    }
}

@keyframes pulse-green {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 68, 6, 0.7);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(37, 68, 6, 0);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.pulse-orange {
    animation: pulse-orange 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.pulse-blue {
    animation: pulse-blue 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.pulse-brown {
    animation: pulse-brown 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.pulse-green {
    animation: pulse-green 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

.shimmer-orange {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 101, 1, 0.3) 50%,
        transparent 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

.shimmer-blue {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(73, 115, 139, 0.3) 50%,
        transparent 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

.shimmer-brown {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(140, 130, 124, 0.3) 50%,
        transparent 100%
    );
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

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

.fade-in {
    animation: fadeIn 0.3s ease-out;
}

.pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ================================================================
   Print Styles
   ================================================================ */

@media print {
    body {
        background-color: white !important;
    }
    
    .navbar,
    .btn,
    .table-toolbar,
    .table-pagination,
    .sidebar-sticky,
    .chat-input-area,
    .hero-section,
    .network-section-content,
    #protocol-network-container,
    .comparison-section-content,
    #protocol-comparison-container,
    .geometric-shape {
        display: none !important;
    }
    
    .table {
        border: 1px solid #000;
    }
    
    .table th,
    .table td {
        border: 1px solid #000;
        padding: 8px;
    }
}

/* ================================================================
   Responsive Adjustments for Network Visualizations
   ================================================================ */

@media (max-width: 768px) {
    #protocol-network-container {
        height: 500px !important;
    }
    
    .protocol-network-tooltip {
        max-width: 240px;
        font-size: 11px;
        padding: 10px 12px;
    }
    
    #protocol-network-container .legend {
        transform: scale(0.85);
        transform-origin: left bottom;
    }
}

/* ================================================================
   Misc Utility Classes
   ================================================================ */

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: hsl(var(--bc) / 0.2);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--bc) / 0.3);
}

.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: hsl(var(--bc) / 0.1);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-orange);
}

/* Smooth scrollbar for side panels */
#sidePanelContent::-webkit-scrollbar {
    width: 4px;
}

#sidePanelContent::-webkit-scrollbar-track {
    background: hsl(var(--b2));
}

#sidePanelContent::-webkit-scrollbar-thumb {
    background: hsl(var(--bc) / 0.2);
    border-radius: 2px;
}

#sidePanelContent::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--bc) / 0.3);
}

/* ================================================================
   Protocol Editing Styles
   ================================================================ */
.editable-field {
    position: relative;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: var(--radius-selector);
    transition: all 0.2s ease;
    border: 1px border transparent;
}

.editable-field:hover {
    background-color: var(--bg-accent-orange);
    box-shadow: 0 0 0 1px var(--color-primary-orange) inset;
}

.editable-field.editing {
    background-color: var(--color-base-100);
    box-shadow: 0 0 0 2px var(--color-primary-orange);
    outline: none;
    cursor: text;
}

.editable-field.editing-hidden {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

.editing-input {
    border: 2px solid var(--color-primary-orange) !important;
    background-color: var(--color-base-100) !important;
    color: var(--color-base-content) !important;
    box-shadow: 0 4px 12px rgba(255, 101, 1, 0.15) !important;
    outline: none !important;
}

.editable-field::after {
    content: '\f303';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    opacity: 0;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    color: var(--color-primary-orange);
    transition: opacity 0.2s;
    pointer-events: none;
}

.editable-field:hover::after {
    opacity: 0.7;
}

.editable-field.changed {
    background-color: var(--bg-accent-orange);
    padding-left: 24px !important; /* Room for the small orange circle indicator */
    padding-right: 8px;
}

/* Specific styling for small fields like codes in tables */
td .editable-field {
    display: inline-flex !important;
    min-width: 40px;
    justify-content: center;
}

td .editable-field.changed {
    padding-left: 24px !important; /* Room for the small orange circle indicator */
}

.editable-field.changed::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 8px;
    height: 8px;
    background-color: var(--color-primary-orange);
    border-radius: 50%;
    border: 1.5px solid var(--color-base-100);
    box-shadow: 0 0 0 1px var(--color-primary-orange);
    z-index: 10;
}

.original-tag {
    font-size: 8px;
    font-weight: 800;
    color: var(--color-secondary-blue);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background-color: var(--color-base-100);
    padding: 0 4px;
    border-radius: 2px;
    border: 1px solid var(--color-secondary-blue);
    line-height: 1;
    display: inline-block;
    z-index: 10;
}

.editable-field.changed::after {
    right: 8px; /* Pencil in default position */
}

/* Larger hover area for methodology fields */
.editable-field[data-field-type="methodology"] {
    padding: 4px 24px 4px 8px;
    transition: padding 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.editable-field[data-field-type="methodology"]:hover {
    padding: 8px 32px 8px 16px;
}

.editable-field[data-field-type="methodology"]::after {
    right: 12px;
}

/* Larger hover area for evaluation fields */
td[data-column="evaluation"] .editable-field {
    padding: 4px 24px 4px 8px;
    transition: padding 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

td[data-column="evaluation"] .editable-field:hover {
    padding: 8px 32px 8px 16px;
}

td[data-column="evaluation"] .editable-field::after {
    right: 12px;
}

/* Larger hover area for code fields */
td[data-column="code"] .editable-field {
    padding: 4px 24px 4px 8px;
    transition: padding 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

td[data-column="code"] .editable-field:hover {
    padding: 8px 32px 8px 16px;
}

td[data-column="code"] .editable-field::after {
    right: 12px;
}

/* Larger hover area for samples fields */
td[data-column="samples"] .editable-field {
    padding: 4px 24px 4px 8px;
    transition: padding 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

td[data-column="samples"] .editable-field:hover {
    padding: 8px 32px 8px 16px;
}

td[data-column="samples"] .editable-field::after {
    right: 12px;
}

/* Larger hover area for protocol info section editable fields - matching methodology column spacing */
.collapse-content .card.glass-card .editable-field {
    padding: 4px 24px 4px 8px;
    transition: padding 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.collapse-content .card.glass-card .editable-field:hover {
    padding: 8px 32px 8px 16px;
}

.collapse-content .card.glass-card .editable-field::after {
    right: 12px;
}

/* Methodology Editor Styles */
.method-tab-content.hidden {
    display: none;
}

#methodology-modal .tab {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    border-radius: 8px !important;
    height: 2.5rem;
    color: var(--color-base-content);
    opacity: 0.5;
}

#methodology-modal .tab:hover {
    opacity: 0.8;
    background-color: rgba(0, 0, 0, 0.05);
}

#methodology-modal .tab-active {
    opacity: 1 !important;
    color: white !important;
}

/* Tab-specific active states - Using soft accent backgrounds for less contrast */
#methodology-modal .tab-active[onclick*="search-existing"] {
    background-color: var(--bg-accent-blue) !important;
    color: var(--color-secondary-blue) !important;
    border: 1px solid var(--color-secondary-blue) !important;
}

#methodology-modal .tab-active[onclick*="add-regulatory"] {
    background-color: var(--bg-accent-orange) !important;
    color: var(--color-primary-orange) !important;
    border: 1px solid var(--color-primary-orange) !important;
}

#methodology-modal .tab-active[onclick*="add-internal"] {
    background-color: var(--bg-accent-blue) !important;
    color: var(--color-secondary-blue) !important;
    border: 1px solid var(--color-secondary-blue) !important;
}

#methodology-modal .tab-active[onclick*="add-custom"] {
    background-color: var(--bg-accent-brown) !important;
    color: var(--color-primary-brown) !important;
    border: 1px solid var(--color-primary-brown) !important;
}

#method-search-results button {
    text-align: left;
}

#current-methods-list .badge {
    user-select: none;
}

#current-methods-list .badge-primary {
    background-color: var(--bg-accent-blue);
    color: var(--color-secondary-blue);
    border: 1px solid var(--color-secondary-blue);
}

#current-methods-list .badge-primary i:hover {
    color: var(--color-error);
}

/* ================================================================
   Chat Interface Styles
   ================================================================ */
.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--color-base-100);
    border-bottom: 1px solid var(--color-base-300);
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

[data-theme="dark"] .chat-header {
    background: var(--color-base-100);
    border-bottom-color: var(--color-base-300);
}

.chat-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 80px);
    max-width: 1400px;
    margin: 0 auto;
}

.chat-window-container {
    position: relative;
    flex-grow: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.chat-window {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
}

/* Chat messages */
.message {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    max-width: 85%;
}

.message.bot-message {
    margin-right: auto;
}

.message.user-message {
    margin-left: auto;
    flex-direction: row-reverse;
}

.message-content {
    padding: 1rem;
    border-radius: 0.75rem;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.message-content.bot {
    background: white;
}

.user-message .message-content {
    background: var(--color-primary);
    color: white;
    border: none;
}

[data-theme="dark"] .message-content {
    background: var(--color-base-200);
    border-color: var(--color-base-300);
}

[data-theme="dark"] .message-content.bot {
    background: var(--color-base-200);
}

[data-theme="dark"] .user-message .message-content {
    background: var(--color-primary);
    color: white;
}

/* Scroll to bottom button */
.scroll-to-bottom-btn {
    position: absolute;
    bottom: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all 0.2s ease;
    z-index: 100;
}

.scroll-to-bottom-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.scroll-to-bottom-btn:active {
    transform: scale(0.95);
}

/* Blinking animation when new message arrives */
.scroll-to-bottom-btn.blinking {
    animation: blink-pulse 0.6s ease-in-out 5;
}

@keyframes blink-pulse {
    0%, 100% {
        background: var(--color-primary);
        box-shadow: 0 4px 12px rgba(202, 67, 0, 0.3);
        transform: scale(1);
    }
    50% {
        background: #e55a00;
        box-shadow: 0 4px 20px rgba(202, 67, 0, 0.6);
        transform: scale(1.15);
    }
}

/* Agent status styling */
.agent-status-container {
    padding: 0.5rem 1rem;
    min-height: 2.5rem;
}

.agent-status {
    color: white !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

.status-text {
    font-weight: 500;
}

/* Spinning wheel animation */
.spinner-wheel {
    width: 20px;
    height: 20px;
    animation: rotate 1s linear infinite;
}

.spinner-path {
    stroke: white;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* Chat input area */
.chat-input-area {
    padding: 1rem 1.5rem;
    background: var(--color-base-100);
    border-top: 1px solid var(--color-base-300);
}

[data-theme="dark"] .chat-input-area {
    background: var(--color-base-100);
    border-top-color: var(--color-base-300);
}

.chat-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.chat-input {
    flex: 1;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-base-300);
    border-radius: 0.5rem;
    background: var(--color-base-100);
    color: var(--color-base-content);
    font-size: 0.9375rem;
    transition: all 0.2s;
}

.chat-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(202, 67, 0, 0.15);
}

.chat-input::placeholder {
    color: #9ca3af;
}

[data-theme="dark"] .chat-input {
    background: var(--color-base-200);
    border-color: var(--color-base-300);
    color: var(--color-base-content);
}

.chat-send-btn,
.chat-stop-btn {
    padding: 0.875rem 1rem;
    border: none;
    border-radius: 0.5rem;
    background: var(--color-primary);
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 1rem;
}

.chat-send-btn:hover {
    background: #e55a00;
    transform: translateY(-1px);
}

.chat-stop-btn {
    background: #dc2626;
}

.chat-stop-btn:hover {
    background: #b91c1c;
}

/* Example prompts styling */
.example-prompts summary {
    list-style: none;
}

.example-prompts summary::-webkit-details-marker {
    display: none;
}

.example-question {
    cursor: pointer;
    color: hsl(var(--p));
    transition: all 0.2s ease;
}

.example-question:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ================================================================
   Thinking Process & Steps Styling
   ================================================================ */
.thinking-container {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

[data-theme="dark"] .thinking-container {
    background: hsl(var(--b2));
    border-color: hsl(var(--bc) / 0.2);
}

.thinking-header {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background: #f1f5f9;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.8125rem;
    color: #475569;
    transition: background 0.2s;
}

[data-theme="dark"] .thinking-header {
    background: hsl(var(--b3));
    color: hsl(var(--bc) / 0.8);
}

.thinking-header:hover {
    background: #e2e8f0;
}

[data-theme="dark"] .thinking-header:hover {
    background: hsl(var(--b2));
}

.thinking-arrow {
    font-size: 0.625rem;
    margin-right: 0.5rem;
    color: #64748b;
}

.thinking-title {
    font-weight: 600;
    font-size: 0.8125rem;
}

.thinking-current-step {
    margin-left: 0.5rem;
    color: #64748b;
    font-weight: 400;
    font-size: 0.75rem;
}

.thinking-steps {
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
}

.thinking-container.collapsed .thinking-steps {
    display: none;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.8125rem;
}

[data-theme="dark"] .step-item {
    border-bottom-color: hsl(var(--bc) / 0.1);
}

.step-item:last-child {
    border-bottom: none;
}

.step-status-icon {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-check-icon {
    color: #22c55e;
    font-weight: bold;
}

.step-message-container {
    flex: 1;
    min-width: 0;
}

.step-message {
    color: #334155;
    font-size: 0.875rem;
}

[data-theme="dark"] .step-message {
    color: hsl(var(--bc) / 0.8);
}

.step-output {
    margin-top: 0.5rem;
}

.thinking-placeholder {
    color: #64748b;
    font-style: italic;
    font-size: 0.8125rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.thinking-placeholder::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #e2e8f0;
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ================================================================
   Final Answer Styling
   ================================================================ */
.final-answer {
    line-height: 1.7;
    color: #1e293b;
}

[data-theme="dark"] .final-answer {
    color: hsl(var(--bc));
}

.final-answer h1,
.final-answer h2,
.final-answer h3,
.final-answer h4 {
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: #0f172a;
}

[data-theme="dark"] .final-answer h1,
[data-theme="dark"] .final-answer h2,
[data-theme="dark"] .final-answer h3,
[data-theme="dark"] .final-answer h4 {
    color: hsl(var(--bc));
}

.final-answer p {
    margin-bottom: 0.75rem;
}

.final-answer ul,
.final-answer ol {
    margin: 0.75rem 0;
    padding-left: 1.5rem;
}

.final-answer li {
    margin-bottom: 0.5rem;
}

.final-answer a {
    color: var(--color-primary);
    text-decoration: underline;
}

.final-answer a:hover {
    color: #e55a00;
}

.final-answer code {
    background: #f1f5f9;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
}

[data-theme="dark"] .final-answer code {
    background: hsl(var(--b3));
}

.final-answer pre {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}

[data-theme="dark"] .final-answer pre {
    background: hsl(var(--b2));
    border-color: hsl(var(--bc) / 0.2);
}

.final-answer table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.875rem;
}

.final-answer th,
.final-answer td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

[data-theme="dark"] .final-answer th,
[data-theme="dark"] .final-answer td {
    border-bottom-color: hsl(var(--bc) / 0.2);
}

.final-answer th {
    background: #f8fafc;
    font-weight: 600;
}

[data-theme="dark"] .final-answer th {
    background: hsl(var(--b2));
}

/* ================================================================
   Sources Component Styling
   ================================================================ */
.sources-container {
    margin-top: 1rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    background: #f8fafc;
}

[data-theme="dark"] .sources-container {
    background: hsl(var(--b2));
    border-color: hsl(var(--bc) / 0.2);
}

.sources-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #f1f5f9;
    cursor: pointer;
    font-weight: 500;
    color: #475569;
    transition: background 0.2s;
}

[data-theme="dark"] .sources-header {
    background: hsl(var(--b3));
    color: hsl(var(--bc) / 0.8);
}

.sources-header:hover {
    background: #e2e8f0;
}

[data-theme="dark"] .sources-header:hover {
    background: hsl(var(--b2));
}

.sources-toggle {
    color: #64748b;
    font-size: 0.875rem;
}

.sources-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sources-list {
    padding: 0.75rem;
}

.sources-container.collapsed .sources-list {
    display: none;
}

.source-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
}

[data-theme="dark"] .source-card {
    background: hsl(var(--b1));
    border-color: hsl(var(--bc) / 0.15);
}

.source-card:last-child {
    margin-bottom: 0;
}

.source-icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    background: var(--color-accent-blue);
    color: var(--color-secondary-blue);
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .source-icon {
    background: rgba(73, 115, 139, 0.15);
    color: var(--color-secondary-blue-light);
}

.source-info {
    flex: 1;
    min-width: 0;
}

.source-protocol {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.source-protocol a {
    color: var(--color-primary);
    text-decoration: none;
}

.source-protocol a:hover {
    text-decoration: underline;
}

.source-description {
    font-size: 0.875rem;
    color: #475569;
    margin-bottom: 0.25rem;
}

[data-theme="dark"] .source-description {
    color: hsl(var(--bc) / 0.7);
}

.source-location {
    font-size: 0.75rem;
    color: #64748b;
}

[data-theme="dark"] .source-location {
    color: hsl(var(--bc) / 0.5);
}

.source-actions {
    display: flex;
    gap: 0.5rem;
}

.btn-view-protocol,
.btn-download-source {
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.375rem;
    color: #64748b;
    background: #f1f5f9;
    border: none;
    text-decoration: none;
    transition: all 0.2s;
}

[data-theme="dark"] .btn-view-protocol,
[data-theme="dark"] .btn-download-source {
    background: hsl(var(--b2));
    color: hsl(var(--bc) / 0.6);
}

.btn-view-protocol:hover,
.btn-download-source:hover {
    background: var(--color-primary);
    color: white;
}

/* ================================================================
   SQL Results Styling
   ================================================================ */
.sql-results-prominent {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    overflow: hidden;
    margin-top: 0.5rem;
}

[data-theme="dark"] .sql-results-prominent {
    border-color: hsl(var(--bc) / 0.2);
}

.sql-results-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: #f1f5f9;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
}

[data-theme="dark"] .sql-results-header {
    background: hsl(var(--b3));
    color: hsl(var(--bc) / 0.8);
}

.sql-results-toggle {
    font-size: 0.75rem;
    color: #64748b;
}

.sql-results-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sql-results-body {
    overflow-x: auto;
}

.sql-results-prominent.collapsed .sql-results-body {
    display: none;
}

.sql-results-prominent.collapsed .sql-results-toggle {
    transform: rotate(-90deg);
}

.sql-result-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.sql-result-table th,
.sql-result-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
    white-space: nowrap;
}

[data-theme="dark"] .sql-result-table th,
[data-theme="dark"] .sql-result-table td {
    border-bottom-color: hsl(var(--bc) / 0.15);
}

.sql-result-table th {
    background: #f8fafc;
    font-weight: 600;
    color: #334155;
}

[data-theme="dark"] .sql-result-table th {
    background: hsl(var(--b2));
    color: hsl(var(--bc) / 0.9);
}

.sql-result-table tr:hover td {
    background: #f8fafc;
}

[data-theme="dark"] .sql-result-table tr:hover td {
    background: hsl(var(--b2) / 0.5);
}

.sql-result-count {
    padding: 0.75rem;
    text-align: center;
    color: #64748b;
    font-size: 0.875rem;
}

.sql-more {
    padding: 0.5rem;
    text-align: center;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 0.8125rem;
}

[data-theme="dark"] .sql-more {
    background: hsl(var(--b2));
    border-top-color: hsl(var(--bc) / 0.15);
    color: hsl(var(--bc) / 0.6);
}

/* ================================================================
   Chat Avatar Styling
   ================================================================ */
.avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.125rem;
}

.bot-avatar {
    background: linear-gradient(135deg, var(--color-accent-brown) 0%, #e8e4e2 100%);
    color: var(--color-primary-brown);
}

.bot-avatar i {
    font-size: 1.125rem;
}

[data-theme="dark"] .bot-avatar {
    background: linear-gradient(135deg, rgba(140, 130, 124, 0.2) 0%, rgba(140, 130, 124, 0.1) 100%);
    color: var(--color-primary-brown);
}

.user-avatar {
    background: linear-gradient(135deg, var(--color-accent-peach) 0%, #ffe0cc 100%);
    color: var(--color-primary-orange);
}

.user-avatar i {
    font-size: 1.125rem;
}

[data-theme="dark"] .user-avatar {
    background: linear-gradient(135deg, rgba(255, 101, 1, 0.2) 0%, rgba(255, 101, 1, 0.1) 100%);
    color: var(--color-primary-orange);
}

/* ================================================================
   Dashboard Tooltip Styling
   ================================================================ */
.dashboard-tooltip {
    position: fixed;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 12px;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.2s ease;
    max-width: 280px;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dashboard-tooltip strong {
    color: #fff;
    display: block;
    margin-bottom: 4px;
}

/* Comparison Dashboard specific styles */
.comparison-dashboard .stat-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comparison-dashboard .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.comparison-dashboard .bar-chart-svg,
.comparison-dashboard .donut-chart-svg {
    display: block;
    margin: 0 auto;
}

.comparison-dashboard .bar-chart-svg .bar {
    transition: opacity 0.2s;
}

.comparison-dashboard .bar-chart-svg .bar:hover {
    opacity: 0.8;
}

.comparison-dashboard .y-axis text {
    fill: currentColor;
}

.comparison-dashboard .x-axis text {
    fill: currentColor;
}

/* Methodology Detail & Component Standardization */
.comp-highlight {
    background: linear-gradient(to right, color-mix(in oklab, var(--color-primary) 12%, transparent) 0%, transparent 100%) !important;
    border-bottom: 2px solid var(--color-primary) !important;
}

.comp-inactive {
    background: linear-gradient(to right, color-mix(in oklab, var(--color-base-content) 5%, transparent) 0%, transparent 100%) !important;
    border-bottom: 1px solid var(--color-base-300) !important;
}

.comp-highlight h1, .comp-highlight h2, .comp-highlight h3, 
.comp-highlight h4, .comp-highlight h5, .comp-highlight h6 {
    color: var(--color-primary) !important;
}

.comp-inactive h1, .comp-inactive h2, .comp-inactive h3, 
.comp-inactive h4, .comp-inactive h5, .comp-inactive h6 {
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent) !important;
}

/* Centralized Component Border Hover Behavior */
/* Note: Base .glass-card now has this behavior by default across all views */
/* .comp-focusable can be used for explicit control when needed */
.glass-card.comp-focusable,
.card.glass-card.comp-focusable {
    border: 1px solid var(--color-base-300) !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-card.comp-focusable:hover,
.card.glass-card.comp-focusable:hover {
    border-color: var(--color-primary-orange) !important;
    box-shadow: 0 4px 6px -1px rgba(255, 101, 1, 0.1), 0 2px 4px -2px rgba(255, 101, 1, 0.05);
}

/* ================================================================
   Modal Box Background Fix
   Ensure modal boxes have solid backgrounds
   ================================================================ */
.modal-box {
    background-color: hsl(var(--b1)) !important;
}

[data-theme="dark"] .modal-box {
    background-color: hsl(var(--b1)) !important;
}

/* ================================================================
   Harmonization Button Colors
   Ensure reject and send for review buttons have proper colors
   ================================================================ */
#rejectGlobalBtn:hover,
#detailRejectBtn:hover,
#confirmRejectBtn:hover {
    background-color: #d11e26 !important;
    border-color: #d11e26 !important;
    opacity: 0.9;
}

#approveGlobalBtn:hover,
#detailAcceptBtn:hover,
#confirmSendForReviewBtn:hover {
    background-color: #4db373 !important;
    border-color: #4db373 !important;
    opacity: 0.9;
}

/* Custom Toggle Orange */
.toggle-orange {
    --tglbg: var(--color-base-100);
}

.toggle-orange:checked {
    background-color: var(--color-primary-orange) !important;
    border-color: var(--color-primary-orange) !important;
    --tglbg: var(--color-primary-orange-content) !important;
}

.toggle-orange:checked:hover {
    background-color: var(--color-primary-orange-dark) !important;
    border-color: var(--color-primary-orange-dark) !important;
}