/* 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 {
    color-scheme: light;
    --b1: 0 0% 100%;
    --b2: 210 20% 97%;
    --b3: 205 45% 92%;
    --bc: 0 0% 16%;
    --p: 18 100% 50%;
    --pc: 0 0% 100%;
    --s: 25 10% 50%;
    --sc: 0 0% 100%;
    --a: 201 31% 42%;
    --ac: 0 0% 100%;
    --n: 25 10% 50%;
    --nc: 0 0% 100%;
    /* 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);
    --bg-accent-error: rgba(209, 30, 38, 0.1);
    
    /* Border Radii - Standardized sizing system */
    --radius-selector: 0.375rem;  /* 6px - Small elements (chips, badges) */
    --radius-field: 0.375rem;     /* 6px - Form inputs */
    --radius-box: 0.75rem;        /* 12px - Cards, containers */
    --radius-lg: 1rem;             /* 16px - Large cards */
    --radius-xl: 1.5rem;           /* 24px - Extra large containers */
    --radius-2xl: 2rem;            /* 32px - Hero sections */
    --radius-full: 9999px;         /* Fully rounded (pills, circles) */
    
    /* Spacing Scale - Standardized spacing system */
    --spacing-xs: 0.25rem;         /* 4px */
    --spacing-sm: 0.5rem;          /* 8px */
    --spacing-md: 0.75rem;         /* 12px */
    --spacing-lg: 1rem;            /* 16px */
    --spacing-xl: 1.5rem;          /* 24px */
    --spacing-2xl: 2rem;           /* 32px */
    --spacing-3xl: 3rem;           /* 48px */
    --spacing-4xl: 4rem;           /* 64px */

    /* 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;
}

:root,
[data-theme="sgs"],
[data-theme="dark"],
[data-theme="light"] {
    color-scheme: light;
    --b1: 0 0% 100%;
    --b2: 210 20% 97%;
    --b3: 205 45% 92%;
    --bc: 0 0% 16%;
    --p: 18 100% 50%;
    --pc: 0 0% 100%;
    --s: 25 10% 50%;
    --sc: 0 0% 100%;
    --a: 201 31% 42%;
    --ac: 0 0% 100%;
    --n: 25 10% 50%;
    --nc: 0 0% 100%;
}

html,
body {
    color-scheme: light;
    background-color: var(--color-base-200);
    color: var(--color-base-content);
}

.dropdown-content {
    background-color: var(--color-base-100);
}
/* ================================================================
   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, var(--color-primary-orange) 0%, var(--color-primary-orange-light) 50%, var(--color-secondary-blue) 100%) !important; 
}
.bg-gradient-secondary { 
    background: linear-gradient(135deg, var(--color-secondary-blue) 0%, var(--color-primary-brown) 50%, var(--color-secondary-green) 100%) !important; 
}
.bg-gradient-warm { 
    background: linear-gradient(135deg, var(--color-primary-orange) 0%, var(--color-primary-brown) 100%) !important; 
}
.bg-gradient-cool { 
    background: linear-gradient(135deg, var(--color-secondary-blue) 0%, var(--color-secondary-green) 100%) !important; 
}
.bg-gradient-success { 
    background: linear-gradient(135deg, var(--color-secondary-green) 0%, var(--color-accent-green) 100%) !important; 
}

/* Solid Background Colors for Dots and Small Elements */
.bg-orange { background-color: var(--color-primary-orange) !important; }
.bg-blue { background-color: var(--color-secondary-blue) !important; }
.bg-brown { background-color: var(--color-primary-brown) !important; }
.bg-green { background-color: var(--color-secondary-green) !important; }
.bg-error { background-color: var(--color-error) !important; }

/* Text Color Utilities - Original Palette */
.text-orange { color: var(--color-primary-orange) !important; }
.text-brown { color: var(--color-primary-brown) !important; }
.text-blue { color: var(--color-secondary-blue) !important; }
.text-green { color: var(--color-secondary-green) !important; }
.text-error { color: var(--color-error) !important; }
.text-accent-peach { color: var(--color-accent-peach) !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: var(--bg-accent-orange) !important; }
.bg-accent-blue { background-color: var(--bg-accent-blue) !important; }
.bg-accent-brown { background-color: var(--bg-accent-brown) !important; }
.bg-accent-green { background-color: var(--bg-accent-green) !important; }
.bg-accent-error { background-color: var(--bg-accent-error) !important; }
.bg-accent-peach { background-color: var(--bg-accent-peach) !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;
}

/* Base Button Styles - Ensure buttons are always visible */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-weight: 500;
    border-radius: 0.5rem;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    min-height: 2.5rem;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    min-height: 2rem;
}

.btn-xs {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    min-height: 1.75rem;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.125rem;
    min-height: 3rem;
}

/* 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);
}

/* Button Success Variant - Uses semantic success color */
.btn-success {
    background-color: var(--color-success);
    color: var(--color-success-content);
    border-color: var(--color-success);
}

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

/* Button Error Variant - Uses semantic error color */
.btn-error {
    background-color: var(--color-error);
    color: var(--color-error-content);
    border-color: var(--color-error);
}

.btn-error:hover {
    background-color: var(--color-error);
    border-color: var(--color-error);
    opacity: 0.9;
}

/* Button Primary Variant - Uses orange as primary color */
.btn-primary {
    background-color: var(--color-primary-orange);
    color: var(--color-primary-orange-content);
    border: 1px solid var(--color-primary-orange);
}

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

.btn-primary:focus-visible {
    outline: 2px solid var(--color-primary-orange);
    outline-offset: 2px;
}

/* Button Ghost Variant - Transparent background with border */
.btn-ghost {
    background-color: transparent;
    color: var(--color-base-content);
    border: 1px solid var(--color-base-300);
}

.btn-ghost:hover {
    background-color: var(--color-base-200);
    border-color: var(--color-base-300);
    color: var(--color-base-content);
}

.btn-ghost:focus-visible {
    outline: 2px solid var(--color-base-300);
    outline-offset: 2px;
}

/* Button Secondary Variant - Uses brown as secondary color */
.btn-secondary {
    background-color: var(--color-primary-brown);
    color: var(--color-primary-brown-content);
    border: 1px solid var(--color-primary-brown);
}

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

.btn-secondary:focus-visible {
    outline: 2px solid var(--color-primary-brown);
    outline-offset: 2px;
}

/* Button Warning Variant - Uses semantic warning color */
.btn-warning {
    background-color: var(--color-warning);
    color: var(--color-warning-content, var(--color-base-content));
    border: 1px solid var(--color-warning);
}

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

.btn-warning:focus-visible {
    outline: 2px solid var(--color-warning);
    outline-offset: 2px;
}

/* Button Info Variant - Uses semantic info color */
.btn-info {
    background-color: var(--color-info);
    color: var(--color-info-content, var(--color-base-content));
    border: 1px solid var(--color-info);
}

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

.btn-info:focus-visible {
    outline: 2px solid var(--color-info);
    outline-offset: 2px;
}

/* Button Outline Variant - Transparent background with colored border */
.btn-outline {
    background-color: transparent;
    border: 1px solid var(--color-base-300);
    color: var(--color-base-content);
}

.btn-outline:hover {
    background-color: var(--color-base-200);
    border-color: var(--color-base-300);
    color: var(--color-base-content);
}

/* Outline variants with color borders */
.btn-outline.btn-primary,
.btn-outline.btn-orange {
    border-color: var(--color-primary-orange);
    color: var(--color-primary-orange);
}

.btn-outline.btn-primary:hover,
.btn-outline.btn-orange:hover {
    background-color: var(--bg-accent-orange);
    border-color: var(--color-primary-orange);
    color: var(--color-primary-orange);
}

.btn-outline.btn-error {
    border-color: var(--color-error);
    color: var(--color-error);
}

.btn-outline.btn-error:hover {
    background-color: color-mix(in srgb, var(--color-error) 10%, transparent);
    border-color: var(--color-error);
    color: var(--color-error);
}

.btn-outline.btn-accent {
    border-color: var(--color-secondary-blue);
    color: var(--color-secondary-blue);
}

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

/* Button Neutral Variant - Uses base colors */
.btn-neutral {
    background-color: var(--color-base-200);
    color: var(--color-base-content);
    border: 1px solid var(--color-base-300);
}

.btn-neutral:hover {
    background-color: var(--color-base-300);
    border-color: var(--color-base-300);
    color: var(--color-base-content);
}

.btn-neutral:focus-visible {
    outline: 2px solid var(--color-base-300);
    outline-offset: 2px;
}

/* Centralized Chip Component - Ensures full text coverage even with multiple lines */
.chip {
    display: inline-flex !important;
    align-items: flex-start !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    font-weight: 600 !important;
    font-size: 0.625rem !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: calc(1.4em + 0.5rem) !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
    border: none !important;
    text-align: left !important;
}

/* Chip size variants */
.chip.chip-sm {
    font-size: 0.625rem !important;
    padding: 0.25rem 0.5rem !important;
    min-height: calc(1.4em + 0.5rem) !important;
}

.chip.chip-md {
    font-size: 0.75rem !important;
    padding: 0.375rem 0.75rem !important;
    min-height: calc(1.4em + 0.75rem) !important;
}

.chip.chip-lg {
    font-size: 0.875rem !important;
    padding: 0.5rem 1rem !important;
    min-height: calc(1.4em + 1rem) !important;
}

/* 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: flex-start !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    width: fit-content !important;
    max-width: 100% !important;
    min-height: calc(1.4em + 0.5rem) !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
    text-align: left !important;
}

/* Ensure badges in table cells wrap properly and cover full height */
table td .badge-soft,
table td .badge,
table td .chip {
    display: inline-flex !important;
    align-items: flex-start !important;
    padding: 0.25rem 0.5rem !important;
    line-height: 1.4 !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    min-height: calc(1.4em + 0.5rem) !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
    text-align: left !important;
}

/* Center text in chips within status column */
table td[data-column="status"] .chip {
    text-align: center !important;
    justify-content: center !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;
}

/* Centralized Chip Color Variants - Use with .chip class */
.chip.chip-primary {
    background-color: color-mix(in oklab, var(--color-primary) 8%, var(--color-base-100)) !important;
    color: var(--color-primary) !important;
}

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

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

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

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

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

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

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

.chip.chip-orange {
    background-color: color-mix(in oklab, var(--color-primary-orange) 8%, var(--color-base-100)) !important;
    color: var(--color-primary-orange) !important;
}

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

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

.chip.chip-green {
    background-color: color-mix(in oklab, var(--color-secondary-green) 8%, 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%);
}

/* Ensure dropdown-content has solid background */
.dropdown-content {
    background-color: var(--color-base-100) !important;
}

/* Override bg-accent-blue on table headers to use solid background */
.table thead th.bg-accent-blue,
.table thead tr.bg-accent-blue,
.table thead.bg-accent-blue {
    background-color: var(--color-base-200) !important;
    background-color: var(--color-base-100) !important; /* Solid background for headers */
}

/* Override Tailwind placeholder-base-content utility classes - lighter grey for better visibility */
input.placeholder-base-content\/40::placeholder,
input[class*="placeholder-base-content"]::placeholder,
textarea.placeholder-base-content\/40::placeholder,
textarea[class*="placeholder-base-content"]::placeholder {
    color: var(--color-base-content) !important;
    opacity: 0.6;
}

/* Match icon colors to placeholder text - same opacity */
.text-base-content\/40,
i.text-base-content\/40,
.fas.text-base-content\/40,
.far.text-base-content\/40 {
    color: var(--color-base-content) !important;
    opacity: 0.6;
}

/* Match smart search status text to placeholder carousel - same lighter grey */
#smartSearchStatus,
#smartSearchStatus.text-base-content\/40,
.text-base-content\/40 {
    color: var(--color-base-content) !important;
    opacity: 0.6;
}

/* Ensure icons inside smart search status also match */
#smartSearchStatus i,
#smartSearchStatus .fas,
#smartSearchStatus .far {
    color: var(--color-base-content) !important;
    opacity: 0.6;
}

/* All input placeholders - lighter grey */
input::placeholder,
textarea::placeholder {
    color: var(--color-base-content) !important;
    opacity: 0.5;
}

/* Recently Updated protocol links hover effect */
.recent-protocol-link:hover {
    background-color: var(--bg-accent-blue) !important;
}

/* 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;
    background-color: var(--color-base-200) !important;
}

/* Ensure sticky table headers have solid background (not transparent) */
.table thead tr th.sticky,
.table thead tr.sticky th,
.table thead.sticky th,
.table thead.sticky tr th {
    background-color: var(--color-base-200) !important;
    background-color: var(--color-base-100) !important; /* Use base-100 for solid background */
}

/* Ensure all thead backgrounds are solid (override any transparent backgrounds) */
.table thead,
.table thead tr,
.table thead th {
    background-color: var(--color-base-200) !important;
}

/* Override transparent backgrounds on sticky headers */
.table thead.sticky,
.table thead.sticky tr,
.table thead.sticky th {
    background-color: var(--color-base-200) !important;
    background-color: var(--color-base-100) !important; /* Solid background for sticky headers */
}

/* Ensure all sticky th elements have solid backgrounds (override any transparent classes) */
.table thead th.sticky,
.table thead th[class*="sticky"],
.table thead tr th.sticky,
.table thead tr th[class*="sticky"] {
    background-color: var(--color-base-100) !important; /* Solid background for sticky headers */
}

/* Override bg-base-200 on sticky headers to use solid base-100 */
.table thead th.sticky.bg-base-200,
.table thead th[class*="sticky"].bg-base-200 {
    background-color: var(--color-base-100) !important;
}

/* Remove default borders from tbody rows */
/* Ensure consistent row divider color - match protocol view table */
/* Override any Tailwind border classes to use consistent color */
.table tbody tr {
    border-top: none !important;
    border-bottom: 1px solid var(--color-base-300) !important;
    /* Ensure regular rows are below sticky rows */
    position: relative;
    z-index: 0;
}

/* Override Tailwind border-base-200 classes on table rows */
.table tbody tr.border-base-200,
.table tbody tr[class*="border-base-200"] {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* 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 !important;
}

/* Ensure all sticky rows have solid backgrounds (not transparent) */
.table tbody tr.sticky,
.table tbody tr[class*="sticky"] {
    background-color: var(--color-base-100) !important;
}

/* Centralized hover effect - applies to all tables */
.table tbody tr:hover {
    background-color: var(--color-base-200) !important;
}

/* Ensure table text color is consistent */
.table tbody tr td {
    color: var(--color-base-content);
}

/* Ensure table header text color is consistent */
.table thead tr th {
    color: var(--color-base-content);
}

/* Ensure table headers use base content color for text */
.table thead tr th {
    color: var(--color-base-content) !important;
}

/* Ensure all table borders use base-300 */
.table thead tr th,
.table thead tr,
.table tbody tr td,
.table tbody tr {
    border-color: var(--color-base-300) !important;
}

/* Fix table header backgrounds to be solid */
.table thead tr th {
    background-color: var(--color-base-100) !important;
}

/* Ensure hover doesn't break sticky headers */
.table thead tr th.sticky:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure sticky header remains above rows */
.table thead tr th.sticky {
    z-index: 10;
}

/* Ensure sticky header rows are above other rows */
.table thead.sticky {
    z-index: 10;
}

/* Ensure table header borders are visible */
.table thead tr th {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure table header row is visible */
.table thead tr {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure row dividers are visible */
.table tbody tr {
    border-bottom: 1px solid var(--color-base-300) !important;
}

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

/* Table content should wrap and align properly */
.table td {
    vertical-align: top;
}

/* Ensure no transparent backgrounds for table headers */
.table thead th {
    background-color: var(--color-base-100) !important;
}

/* Ensure sticky headers don't inherit hover styles */
.table thead th:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table headers maintain consistent height */
.table thead th {
    height: auto;
}

/* Ensure table headers have padding */
.table thead th {
    padding: 0.75rem 1rem;
}

/* Ensure table cells have padding */
.table tbody td {
    padding: 0.75rem 1rem;
}

/* Ensure table borders are consistent */
.table {
    border: 1px solid var(--color-base-300) !important;
}

/* Ensure table headers have borders */
.table thead tr th {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure table rows have borders */
.table tbody tr {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure table header row uses base background */
.table thead tr {
    background-color: var(--color-base-100) !important;
}

/* Ensure table hover doesn't affect header */
.table thead tr:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header cells stay solid */
.table thead tr th {
    background-color: var(--color-base-100) !important;
}

/* Ensure hover state only affects body rows */
.table tbody tr:hover {
    background-color: var(--color-base-200) !important;
}

/* Ensure hover effect for table rows */
.table tbody tr:hover td {
    color: var(--color-base-content);
}

/* Ensure table header text wraps properly */
.table thead th {
    white-space: nowrap;
}

/* Ensure table rows are visible */
.table tbody tr {
    background-color: var(--color-base-100);
}

/* Ensure table row hover is visible */
.table tbody tr:hover {
    background-color: var(--color-base-200) !important;
}

/* Ensure table row hover does not affect text color */
.table tbody tr:hover td {
    color: var(--color-base-content) !important;
}

/* Ensure table row hover does not affect header */
.table thead tr th:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table row hover does not affect sticky header */
.table thead tr th.sticky:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure sticky header stays above hover rows */
.table thead tr th.sticky {
    z-index: 20;
}

/* Ensure sticky header row stays above hover rows */
.table thead.sticky {
    z-index: 20;
}

/* Ensure table row borders remain visible */
.table tbody tr {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure table header borders remain visible */
.table thead tr th {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure table header row border remains visible */
.table thead tr {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure table row border remains visible */
.table tbody tr {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure table header row border remains visible */
.table thead tr {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure table row borders are consistent */
.table tbody tr {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure table header borders are consistent */
.table thead tr th {
    border-bottom: 1px solid var(--color-base-300) !important;
}

/* Ensure table headers have solid background */
.table thead tr th {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row has solid background */
.table thead tr {
    background-color: var(--color-base-100) !important;
}

/* Ensure table hover does not affect header */
.table thead tr:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header cells stay solid */
.table thead tr th:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table hover does not affect sticky header */
.table thead tr th.sticky:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table hover does not affect sticky header row */
.table thead.sticky:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table hover does not affect sticky header cells */
.table thead.sticky th:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header text color is consistent */
.table thead tr th {
    color: var(--color-base-content) !important;
}

/* Ensure table body text color is consistent */
.table tbody tr td {
    color: var(--color-base-content) !important;
}

/* Ensure table header border color is consistent */
.table thead tr th {
    border-color: var(--color-base-300) !important;
}

/* Ensure table row border color is consistent */
.table tbody tr {
    border-color: var(--color-base-300) !important;
}

/* Ensure table header row border color is consistent */
.table thead tr {
    border-color: var(--color-base-300) !important;
}

/* Ensure table row background color is consistent */
.table tbody tr {
    background-color: var(--color-base-100) !important;
}

/* Ensure table row hover background color is consistent */
.table tbody tr:hover {
    background-color: var(--color-base-200) !important;
}

/* Ensure table header background color is consistent */
.table thead tr th {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row background color is consistent */
.table thead tr {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header hover background color is consistent */
.table thead tr th:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row hover background color is consistent */
.table thead tr:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead tr:hover th {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead tr:hover td {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead tr:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead tr th:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead tr th.sticky:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead.sticky:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead.sticky th:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead tr:hover th {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead tr:hover {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead tr:hover th.sticky {
    background-color: var(--color-base-100) !important;
}

/* Ensure table header row is not affected by hover */
.table thead tr:hover th.sticky:hover {
    background-color: var(--color-base-100) !important;
}


/* Ensure table header row is not affected by hover */
.table thead tr:hover th.sticky:hover {
    background-color: var(--color-base-100) !important;
}