/* Font Declarations */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('/fonts/OpenDyslexia/OpenDyslexic3-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('/fonts/OpenDyslexia/OpenDyslexic3-Bold.ttf') format('truetype');
    font-style: normal;
}

/* CSS Variables for Themes */
:root {
    /* Dark Mode (Default) - Modern Subtle Palette */
    --bg-primary: #141414;
    --bg-secondary: #1F1F1F;
    --bg-tertiary: #292929;
    --bg-quaternary: #333333;
    --text-primary: #DADFF7;
    --text-secondary: #EEF0FB;
    --text-muted: #B5B2C2;
    --border-primary: #232528;
    --border-secondary: #2F3237;
    --accent-primary: #5e7ce2;
    --accent-secondary: #627CE4;

    /* Card Surfaces */
    --card-bg: rgba(30, 41, 59, 0.4);
    --card-nested: rgba(20, 30, 45, 0.6);

    --border-subtle: #3D3D3D;
    --border-normal: #474747;
    --border-accent: #525252;

    /* Simple Colors */
    --green: #a4da8b;
    --yellow: #fff78e;
    --red: #fca5a5;
    --blue: #9aaeff;
    --orange: #ecb041;
    --purple: #9c59df;
    --pink: #f9a8d4;
    --gray: #6b7280;


    /* Workbench Confirm Dialog Animations */
    @keyframes fadeIn {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-1rem) scale(0.95);
        }

        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes slideOut {
        from {
            opacity: 1;
            transform: translateY(0) scale(1);
        }

        to {
            opacity: 0;
            transform: translateY(-1rem) scale(0.95);
        }
    }

    --orange: #ecb041;
    --red: #ee2415;
    --blue: #9aaeff;
}

/* Hover effect for dropdown items */
.hover-bg:hover {
    background-color: var(--bg-tertiary) !important;
}

/* ===== DROPDOWN SYSTEM USING FRAMEWORK VARIABLES ===== */

/* Base dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown toggle button */
.dropdown .user-dropdown-toggle,
.dropdown .btn[data-dropdown-toggle] {
    background-color: transparent !important;
    border: none !important;
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.dropdown .user-dropdown-toggle:hover,
.dropdown .btn[data-dropdown-toggle]:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* Dropdown menu container */
.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 220px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(16px);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

/* Show dropdown menu */
.dropdown:hover .dropdown-menu,
.dropdown.show .dropdown-menu,
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown items */
.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    color: var(--text-primary);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    font-size: 0.875rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    outline: none;
}

.dropdown-item:active {
    background-color: var(--bg-quaternary);
}

/* Dropdown divider */
.dropdown-divider {
    height: 1px;
    margin: 0.5rem 0;
    background-color: var(--border-subtle);
    border: none;
}

/* Chevron icon in dropdown toggle */
.dropdown .chevron-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 0.2s ease;
    filter: brightness(0.8);
}

.dropdown:hover .chevron-icon {
    transform: rotate(180deg);
    filter: brightness(1);
}

/* User name styling */
.dropdown .user-name {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.875rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* Ensure dropdown toggle button doesn't expand beyond reasonable width */
.dropdown .user-dropdown-toggle {
    max-width: 160px;
    overflow: hidden;
}

[data-theme="light"] {
    --bg-primary: #EBEBEB;
    --bg-secondary: #F5F5F5;
    --bg-tertiary: #E2E4F6;
    --bg-quaternary: #FFFFFF;
    --text-primary: #232528;
    --text-secondary: #2F3237;
    --text-muted: #383C42;
    --border-primary: #F5F5F5;
    --border-secondary: #E2E4F6;
    --accent-primary: #5e7ce2;
    --accent-secondary: #627CE4;

    /* Light Mode Adjustments */
    --card-bg: #ff13ad;
    --card-nested: #ff13ad;
    --border-subtle: #3D3D3D;
    --border-normal: #474747;
    --border-accent: #333333;
}

/* Base Body Styling with CSS Variables */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'ASM', system-ui, -apple-system, sans-serif;
    /* Body font for regular text */
}

/* Typography System - Two Font Approach */
/* Only major headings and display text use Eina */
h1,
h2,
.heading-1,
.heading-2,
.display-text {
    font-family: 'Eina', system-ui, -apple-system, sans-serif !important;
    /* Display font for major headings only */
}

/* All other elements including section titles use ASM */
h3,
h4,
h5,
h6,
.heading-3,
.heading-4,
p,
span,
div,
label,
a,
button,
input,
textarea,
select,
.text-gray-300,
.text-gray-400,
.text-gray-500,
.body-text,
.body-small,
.caption-text {
    font-family: 'ASM', system-ui, -apple-system, sans-serif !important;
}

/* Labels use normal ASM weight (not bold) */
label,
.text-gray-400,
.text-gray-500,
.block.text-sm.font-medium,
.caption-text {
    font-family: 'ASM', system-ui, -apple-system, sans-serif !important;
}

/* Brand/Logo text always uses Martel - never affected by font switching */
body:not(.font-dyslexic) #logo-text,
body:not(.font-dyslexic) .loader-text,
body:not(.font-dyslexic) .mpalo-brand,
body:not(.font-dyslexic) [data-brand="mpalo"],
body:not(.font-dyslexic) #mpalo-loader-overlay span,
body:not(.font-dyslexic) .text-8xl {
    font-family: 'Martel', serif !important;
    font-weight: 700 !important;
}

/* Hide chart content during loader */
body:not(.content-ready) .chart-container,
body:not(.content-ready) .chart-placeholder,
body:not(.content-ready) .dashboard-card-value,
body:not(.content-ready) canvas {
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Dashboard refresh loading states */
.dashboard-refreshing {
    position: relative;
}

.dashboard-refreshing::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(99, 102, 241, 0.1) 50%,
            transparent 100%);
    animation: shimmer 1.5s infinite;
    pointer-events: none;
    z-index: 1;
    border-radius: 12px;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

/* SVG loader animations */
@keyframes draw-svg-loader {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fill-svg-loader {
    to {
        fill: #5e7ce2;
        stroke: #5e7ce2;
    }
}

/* Initial draw-in animation when loader appears */
@keyframes draw-initial {
    0% {
        stroke-dashoffset: var(--path-length, 1000);
        opacity: 0.8;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

/* Smooth reversing SVG loader animation */
@keyframes draw-loader-loop {
    0% {
        stroke-dashoffset: var(--path-length, 1000);
        opacity: 0.8;
    }

    50% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: var(--path-length, 1000);
        opacity: 0.8;
    }
}

.dashboard-svg-loader {
    background: var(--bg-tertiary);
    border-radius: 12px;
    padding: 20px;
    backdrop-filter: blur(2px);
}

/* Loading state transitions */
#dashboard-usage-chart,
#api-keys-list,
#audit-log-container {
    transition: opacity 0.2s ease-in-out;
}

/* Dashboard card loading pulse */
.dashboard-refreshing .dashboard-card {
    animation: pulse-subtle 1.5s ease-in-out infinite;
}

@keyframes pulse-subtle {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.95;
    }
}

/* Cache status indicator */
.cache-status {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-normal);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-secondary);
    z-index: 1000;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.cache-status.show {
    opacity: 1;
    transform: translateY(0);
}

.cache-status.cached {
    border-color: var(--green);
    color: var(--green);
}

.cache-status.loading {
    border-color: var(--blue);
    color: var(--blue);
}

/* Specifically target loader Mpalo text */
#mpalo-loader-overlay span.text-8xl,
#mpalo-loader-overlay span.font-bold {
    font-family: 'Martel', serif !important;
    font-weight: 700 !important;
}

/* In dyslexic mode, even brand uses OpenDyslexic for consistency */
body.font-dyslexic #logo-text,
body.font-dyslexic .loader-text,
body.font-dyslexic .mpalo-brand,
body.font-dyslexic [data-brand="mpalo"],
body.font-dyslexic #mpalo-loader-overlay span {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Font Classes */
.font-default,
body.font-default {
    font-family: 'ASM', system-ui, -apple-system, sans-serif !important;
}

/* Only major headings use Eina in default mode */
body.font-default h1,
body.font-default h2,
body.font-default .heading-1,
body.font-default .heading-2,
body.font-default .display-text {
    font-family: 'Eina', system-ui, -apple-system, sans-serif !important;
}

/* Everything else uses ASM in default mode */
body.font-default h3,
body.font-default h4,
body.font-default h5,
body.font-default h6,
body.font-default .heading-3,
body.font-default .heading-4,
body.font-default p,
body.font-default span,
body.font-default div,
body.font-default label,
body.font-default a,
body.font-default button,
body.font-default .text-gray-300,
body.font-default .text-gray-400,
body.font-default .text-gray-500,
body.font-default .body-text,
body.font-default .body-small,
body.font-default .caption-text {
    font-family: 'ASM', system-ui, -apple-system, sans-serif !important;
}

.font-dyslexic,
body.font-dyslexic,
body.font-dyslexic * {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Override ALL elements in dyslexic mode - both Eina and ASM */
body.font-dyslexic h1,
body.font-dyslexic h2,
body.font-dyslexic h3,
body.font-dyslexic h4,
body.font-dyslexic h5,
body.font-dyslexic h6,
body.font-dyslexic .heading-1,
body.font-dyslexic .heading-2,
body.font-dyslexic .heading-3,
body.font-dyslexic .heading-4,
body.font-dyslexic .display-text,
body.font-dyslexic p,
body.font-dyslexic span,
body.font-dyslexic div,
body.font-dyslexic label,
body.font-dyslexic a,
body.font-dyslexic button,
body.font-dyslexic input,
body.font-dyslexic textarea,
body.font-dyslexic select,
body.font-dyslexic .text-gray-300,
body.font-dyslexic .text-gray-400,
body.font-dyslexic .text-gray-500,
body.font-dyslexic .text-white,
body.font-dyslexic .font-medium,
body.font-dyslexic .font-semibold,
body.font-dyslexic .font-bold {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Absolute catch-all for dyslexic mode - highest specificity */
body.font-dyslexic *:not(svg):not(path):not(circle):not(rect):not(line):not(polyline):not(polygon):not(#mpalo-loader-overlay span),
body.font-dyslexic *::before,
body.font-dyslexic *::after {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Extra specific overrides for stubborn elements */
body.font-dyslexic label *,
body.font-dyslexic .block *,
body.font-dyslexic .text-sm *,
body.font-dyslexic .font-medium * {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Override dyslexic for loader - loader should ALWAYS use Martel unless specifically in dyslexic mode */
body:not(.font-dyslexic) #mpalo-loader-overlay span,
body:not(.font-dyslexic) #mpalo-loader-overlay *,
#mpalo-loader-overlay span.text-white.font-bold {
    font-family: 'Martel', serif !important;
    font-weight: 700 !important;
}

/* Font Preview Cards - Always show their specific fonts regardless of current selection */
[style*="font-family: 'Eina'"] {
    font-family: 'Eina', sans-serif !important;
}

[style*="font-family: 'ASM'"] {
    font-family: 'ASM', sans-serif !important;
}

[style*="font-family: 'OpenDyslexic'"] {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Specific targeting for font preview cards */
.font-preview-eina,
div[style*="font-family: 'Eina'"] {
    font-family: 'Eina', sans-serif !important;
}

.font-preview-asm,
div[style*="font-family: 'ASM'"] {
    font-family: 'ASM', sans-serif !important;
}

.font-preview-dyslexic,
div[style*="font-family: 'OpenDyslexic'"] {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* Apply CSS Variables to Common Elements - Override Tailwind */
body,
.framework-body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Background overrides */
.bg-gray-900,
.bg-gray-800 {
    background-color: var(--bg-primary) !important;
}

/* Text color overrides */
.text-white {
    color: var(--text-primary) !important;
}

.text-gray-300,
.text-gray-400 {
    color: var(--text-secondary) !important;
}

.text-gray-500 {
    color: var(--text-muted) !important;
}

/* Border color overrides */
.border-gray-700 {
    border-color: var(--border-primary) !important;
}

/* Form inputs */
input.form-input,
textarea,
select {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-secondary) !important;
}

/* Component backgrounds */
[class*="bg-gray-800"] {
    background-color: var(--bg-secondary) !important;
}

/* Profile Picture/Avatar contrast based on theme */

/* In light mode, use dark text on light avatars */
[data-theme="light"] #settings-user-avatar,
[data-theme="light"] .user-avatar {
    color: #ffffff !important;
    background-color: var(--accent-primary) !important;
}

/* Prevent unwanted text selection */
.font-preview,
.item-color,
.tab-link,
button,
label.relative.cursor-pointer {
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}

/* Light Mode Specific Overrides */
[data-theme="light"] {
    /* Header and Navigation */
    --header-bg: var(--bg-primary);
    --sidebar-bg: var(--bg-secondary);
}

/* Header styling for all themes */
#service-health-card-wrapper,
#header,
.header {
    background-color: var(--bg-primary) !important;
    border-color: var(--border-primary) !important;
    z-index: 50 !important;
    /* Header should be above sidebar */
}

/* Header text colors for light mode */
[data-theme="light"] #service-health-card-wrapper,
[data-theme="light"] #service-health-card-wrapper *,
[data-theme="light"] #header,
[data-theme="light"] #header *,
[data-theme="light"] .header,
[data-theme="light"] .header *,
[data-theme="light"] .header-text,
[data-theme="light"] .user-menu,
[data-theme="light"] .user-menu * {
    color: var(--text-primary) !important;
}

/* Light mode header links and buttons */
[data-theme="light"] #service-health-card-wrapper a,
[data-theme="light"] #header a,
[data-theme="light"] .header a,
[data-theme="light"] #service-health-card-wrapper button,
[data-theme="light"] #header button,
[data-theme="light"] .header button {
    color: var(--text-primary) !important;
}

/* Sidebar styling for all themes */
#sidebar,
.sidebar {
    background-color: transparent !important;
    border-color: var(--border-primary) !important;
    z-index: 30 !important;
    /* Sidebar should be below header */
}

/* Light mode SVG color - more aggressive targeting BUT exclude logo AND loader */
[data-theme="light"] svg:not([src*="logo"]):not([src*="Logo"]):not([src*="Mpalo"]):not(#mpalo-loader-svg) *,
[data-theme="light"] svg:not([src*="logo"]):not([src*="Logo"]):not([src*="Mpalo"]):not(#mpalo-loader-svg) path,
[data-theme="light"] svg:not([src*="logo"]):not([src*="Logo"]):not([src*="Mpalo"]):not(#mpalo-loader-svg) circle,
[data-theme="light"] svg:not([src*="logo"]):not([src*="Logo"]):not([src*="Mpalo"]):not(#mpalo-loader-svg) rect,
[data-theme="light"] svg:not([src*="logo"]):not([src*="Logo"]):not([src*="Mpalo"]):not(#mpalo-loader-svg) line,
[data-theme="light"] svg:not([src*="logo"]):not([src*="Logo"]):not([src*="Mpalo"]):not(#mpalo-loader-svg) polyline,
[data-theme="light"] svg:not([src*="logo"]):not([src*="Logo"]):not([src*="Mpalo"]):not(#mpalo-loader-svg) polygon,
[data-theme="light"] svg:not([src*="logo"]):not([src*="Logo"]):not([src*="Mpalo"]):not(#mpalo-loader-svg) ellipse,
[data-theme="light"] svg:not([src*="logo"]):not([src*="Logo"]):not([src*="Mpalo"]):not(#mpalo-loader-svg) g {
    fill: #242325 !important;
    stroke: #242325 !important;
    color: #242325 !important;
}

/* Even more aggressive - target common icon containers BUT exclude logo AND loader */
[data-theme="light"] .sidebar-link:not([href*="mpalo.com"]) svg:not(#mpalo-loader-svg) *,
[data-theme="light"] .btn:not(.logo-btn) svg:not(#mpalo-loader-svg) *,
[data-theme="light"] button:not(.logo-btn) svg:not(#mpalo-loader-svg) *,
[data-theme="light"] a:not([href*="mpalo.com"]) svg:not(#mpalo-loader-svg) *,
[data-theme="light"] [class*="icon"]:not([class*="logo"]) svg:not(#mpalo-loader-svg) *,
[data-theme="light"] img[src*=".svg"]:not([src*="logo"]):not([src*="Logo"]):not([src*="Mpalo"]) {
    fill: #242325 !important;
    stroke: #242325 !important;
    filter: brightness(0) saturate(100%) invert(12%) sepia(8%) saturate(1354%) hue-rotate(314deg) brightness(95%) contrast(89%) !important;
}

/* Light mode logo switching - use light version */
[data-theme="light"] img[src*="logo.svg"],
[data-theme="light"] img[src*="Mpalo-Logo"],
[data-theme="light"] .mpalo-logo img {
    content: url('/assets/Mpalo-Logo3-light.svg') !important;
}

/* Light mode illustration switching */
[data-theme="light"] img[src*="empty-space-illustration.jpg"] {
    content: url('/assets/images/empty-space-illustration-light.jpg') !important;
}

/* Light mode loader styling */
[data-theme="light"] #mpalo-loader-overlay,
[data-theme="light"] .loader-overlay {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

[data-theme="light"] #mpalo-loader-overlay span,
[data-theme="light"] .loader-overlay span {
    color: var(--text-primary) !important;
    font-family: 'Martel', serif !important;
    font-weight: 700 !important;
}

/* NUCLEAR MARTEL FONT ENFORCEMENT - Override ALL font settings */
#mpalo-loader-overlay span,
.loader-overlay span,
#page-loader-overlay span,
body #mpalo-loader-overlay span,
body.font-eina #mpalo-loader-overlay span,
body.font-eina-asm #mpalo-loader-overlay span,
body[class*="font-"] #mpalo-loader-overlay span,
body[data-font*="eina"] #mpalo-loader-overlay span,
body[data-font*="asm"] #mpalo-loader-overlay span {
    font-family: 'Martel', serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

/* Dark mode version too */
[data-theme="dark"] #mpalo-loader-overlay span,
[data-theme="dark"] .loader-overlay span,
body[data-theme="dark"] #mpalo-loader-overlay span {
    font-family: 'Martel', serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Prevent SVG color change for specific elements */
[data-theme="light"] .user-avatar svg,
[data-theme="light"] .user-avatar svg *,
[data-theme="light"] .color-preview svg,
[data-theme="light"] .color-preview svg *,
[data-theme="light"] img[src*="Mpalo-Logo3-light"],
[data-theme="light"] img[src*="Mpalo-Logo3-light.svg"],
[data-theme="light"] *[src*="Mpalo-Logo3-light"] *,
[data-theme="light"] svg[*|href*="Mpalo-Logo3-light"],
[data-theme="light"] use[*|href*="Mpalo-Logo3-light"],
[data-theme="light"] img[src*="logo"],
[data-theme="light"] img[src*="Logo"],
[data-theme="light"] img[src*="Mpalo"],
[data-theme="light"] a[href*="mpalo.com"] *,
[data-theme="light"] .mpalo-logo * {
    fill: inherit !important;
    stroke: inherit !important;
    filter: none !important;
    color: inherit !important;
    opacity: 1 !important;
}

/* COMPLETE LOADER SVG PROTECTION - Keep original colors */
#mpalo-loader-svg,
#mpalo-loader-svg *,
#mpalo-loader-svg path,
#mpalo-loader-svg g,
#mpalo-loader-overlay svg,
#mpalo-loader-overlay svg *,
#mpalo-loader-overlay svg path,
#mpalo-loader-overlay svg g,
#page-loader-overlay svg,
#page-loader-overlay svg *,
#page-loader-overlay svg path,
#page-loader-overlay svg g {
    opacity: 1 !important;
}

/* Light mode card enhancements */
[data-theme="light"] .bg-gray-800,
[data-theme="light"] [class*="bg-gray-8"] {
    background-color: var(--bg-secondary) !important;
}

[data-theme="light"] .border-gray-600,
[data-theme="light"] .border-gray-700,
[data-theme="light"] .border-gray-800,
[data-theme="light"] [class*="border-gray"] {
    border-color: var(--border-primary) !important;
}

/* Light mode loading skeletons and progress bars */
[data-theme="light"] .skeleton,
[data-theme="light"] .loading-skeleton,
[data-theme="light"] .progress-bar,
[data-theme="light"] .loading-bar,
[data-theme="light"] [class*="skeleton"],
[data-theme="light"] [style*="background-color: #374151"],
[data-theme="light"] [style*="background-color: #4b5563"],
[data-theme="light"] [style*="background-color: #6b7280"] {
    background-color: #C0C0C0 !important;
    /* Darker gray for visibility */
}

/* Light mode generic borders and dividers */
[data-theme="light"] .border-b,
[data-theme="light"] .border-t,
[data-theme="light"] .border-l,
[data-theme="light"] .border-r,
[data-theme="light"] .border,
[data-theme="light"] hr {
    border-color: var(--border-primary) !important;
}

/* Light mode text hover effects */
[data-theme="light"] .text-gray-400:hover,
[data-theme="light"] .text-gray-500:hover,
[data-theme="light"] .text-secondary:hover,
[data-theme="light"] label:hover,
[data-theme="light"] .caption-text:hover,
[data-theme="light"] a:hover,
[data-theme="light"] button:hover {
    color: #75756C !important;
    transition: color 0.2s ease !important;
}

/* Ensure hover works for elements using --text-secondary */
[data-theme="light"] *[style*="color: #65655E"]:hover,
[data-theme="light"] *[style*="color: var(--text-secondary)"]:hover {
    color: #75756C !important;
    transition: color 0.2s ease !important;
}

/* Light mode active/selected tab styling */
[data-theme="light"] .tab-link.active,
[data-theme="light"] .tab-link.active:hover,
[data-theme="light"] button.active,
[data-theme="light"] .active {
    color: #6366f1 !important;
    /* Mpalo blue instead of white */
}

/* Light mode tab hover (non-active) */
[data-theme="light"] .tab-link:hover:not(.active) {
    color: #75756C !important;
}

/* Light mode dropdown adjustments */
[data-theme="light"] .dropdown-menu {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(16px);
    border: 1px solid var(--border-normal);
}

/* Light mode chevron icon filter adjustment */
[data-theme="light"] .dropdown .chevron-icon {
    filter: brightness(0.6);
}

[data-theme="light"] .dropdown:hover .chevron-icon {
    filter: brightness(0.4);
}

/* ===== AUDIT LOG USER FILTER DROPDOWN ===== */

/* Audit filter dropdown container */
.audit-user-filter-dropdown {
    position: relative;
    display: inline-block;
}

/* Audit filter toggle button */
.audit-filter-toggle {
    background-color: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    padding: 0.375rem 0.75rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    font-size: 0.75rem;
    max-width: 140px;
}

.audit-filter-toggle:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--border-normal);
}

/* Audit filter text with truncation */
.audit-filter-text {
    color: var(--text-secondary);
    font-size: 0.75rem;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

/* Audit filter chevron */
.audit-filter-chevron {
    width: 0.75rem;
    height: 0.75rem;
    transition: transform 0.2s ease;
    filter: brightness(0.7);
    flex-shrink: 0;
}

.audit-user-filter-dropdown:hover .audit-filter-chevron {
    transform: rotate(180deg);
    filter: brightness(1);
}

/* Audit filter menu */
.audit-filter-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(12px);
    padding: 0.375rem 0;
    margin-top: 0.25rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 200px;
    overflow: hidden;
}

/* Show audit filter menu */
.audit-user-filter-dropdown:hover .audit-filter-menu,
.audit-user-filter-dropdown.show .audit-filter-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Audit filter items */
.audit-filter-item {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    color: var(--text-primary);
    text-decoration: none;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    font-family: inherit;
    font-size: 0.75rem;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-filter-item:hover,
.audit-filter-item:focus {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    outline: none;
}

.audit-filter-item.selected {
    background-color: var(--bg-quaternary);
    color: var(--text-secondary);
}

/* Light mode sidebar expand/collapse button */
[data-theme="light"] .sidebar-toggle,
[data-theme="light"] .expand-sidebar,
[data-theme="light"] .collapse-sidebar,
[data-theme="light"] [class*="sidebar-toggle"],
[data-theme="light"] button[onclick*="sidebar"],
[data-theme="light"] .collapse-button {
    color: var(--text-primary) !important;
    background-color: transparent !important;
    /* Remove background */
    border: none !important;
    /* Remove border */
    padding: 4px 8px !important;
}

[data-theme="light"] .sidebar-toggle:hover,
[data-theme="light"] .expand-sidebar:hover,
[data-theme="light"] .collapse-sidebar:hover,
[data-theme="light"] [class*="sidebar-toggle"]:hover,
[data-theme="light"] button[onclick*="sidebar"]:hover,
[data-theme="light"] .collapse-button:hover {
    background-color: transparent !important;
    /* No background on hover */
    color: #75756C !important;
    /* Light up text instead */
    transition: color 0.2s ease !important;
}

/* Light mode primary button specific */
[data-theme="light"] .btn-primary,
[data-theme="light"] button[class*="primary"] {
    background-color: #6366f1 !important;
    color: #ffffff !important;
    border-color: #6366f1 !important;
}

[data-theme="light"] .btn-primary:hover,
[data-theme="light"] button[class*="primary"]:hover {
    background-color: #4f46e5 !important;
    /* Darker blue on hover */
    color: #ffffff !important;
    border-color: #4f46e5 !important;
}

/* Light mode secondary/other buttons */
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-outline {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-outline:hover {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--text-primary) !important;
}

/* Custom Form Controls */

/* Hide default checkbox appearance */
.input[type="checkbox"] {
    display: none;
}

/* Style for the custom checkbox */
.custom-checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #5e7ce2;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    background-color: transparent;
}

/* Style for the custom checkmark */
.custom-checkbox::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #5e7ce2;
    border-radius: 2px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Show the checkmark when checkbox is checked */
.input[type="checkbox"]:checked+.custom-checkbox::after {
    opacity: 1;
}

/* Hover effect */
.custom-checkbox:hover {
    border-color: #758ae1;
}

.input[type="checkbox"]:checked+.custom-checkbox:hover::after {
    background-color: #758ae1;
}

/* Simple Red Radio Button Placeholder */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ef4444;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
    position: relative;
    background-color: transparent;
    margin-right: 8px;
    vertical-align: middle;
}

input[type="radio"]:checked {
    background-color: transparent;
    border-color: #ef4444;
}

input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background-color: #ef4444;
    border-radius: 2px;
    display: block;
}

/* Light mode custom checkbox colors */
[data-theme="light"] .custom-checkbox {
    border-color: #5e7ce2 !important;
}

[data-theme="light"] .custom-checkbox::after {
    background-color: #5e7ce2 !important;
}

[data-theme="light"] .custom-checkbox:hover {
    border-color: #758ae1 !important;
}

[data-theme="light"] .input[type="checkbox"]:checked+.custom-checkbox:hover::after {
    background-color: #758ae1 !important;
}

/* Toggle Switch Styles - From Uiverse.io by TimTrayler */
.switch {
    --secondary-container: #2A3A5C;
    --primary: #5e7ce2;
    font-size: 17px;
    position: relative;
    display: inline-block;
    width: 3.7em;
    height: 1.8em;
}

.switch input {
    display: none;
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #313033;
    transition: .2s;
    border-radius: 30px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 1.4em;
    width: 1.4em;
    border-radius: 20px;
    left: 0.2em;
    bottom: 0.2em;
    background-color: #aeaaae;
    transition: .4s;
}

input:checked+.slider::before {
    background-color: var(--primary);
}

input:checked+.slider {
    background-color: var(--secondary-container);
}

input:focus+.slider {
    box-shadow: 0 0 1px var(--secondary-container);
}

input:checked+.slider:before {
    transform: translateX(1.9em);
}

/* Text Selection */
::selection {
    background-color: rgba(0, 85, 255, 0.3);
    color: #ffffff;
}

::-moz-selection {
    background-color: rgba(0, 85, 255, 0.3);
    color: #ffffff;
}

/* Custom Slider Styles */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, #5e7ce2 0%, #5e7ce2 var(--slider-progress, 50%), #374151 var(--slider-progress, 50%), #374151 100%);
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
}

/* WebKit track */
input[type="range"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: transparent;
    cursor: pointer;
}

/* Firefox track */
input[type="range"]::-moz-range-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: #374151;
    border: none;
    cursor: pointer;
}

/* Firefox progress */
input[type="range"]::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: #5e7ce2;
    border: none;
}


input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #5e7ce2;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 12px rgba(81, 110, 225, 0.15), 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-top: -7px;
    position: relative;
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #5e7ce2;
    cursor: pointer;
    border: none;
    box-shadow: 0 0 0 12px rgba(81, 110, 225, 0.15), 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-appearance: none;
}

/* Round UIverse Radio Button Styles */
.uiverse-pixel-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.75em;
    border-radius: 0.5em;
    font-family: "Courier New", monospace;
}

.uiverse-pixel-radio {
    display: flex;
    align-items: center;
    gap: 0.75em;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px #000;
    position: relative;
}


/* Square UIverse Checkbox Styles */
.uiverse-pixel-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75em;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px #000;
    position: relative;
    padding-right: 0.8em;
    /* margin-bottom removed to avoid conflict with Tailwind space-y classes */
}

.uiverse-pixel-checkbox input[type="checkbox"] {
    appearance: none;
    width: 0.8em;
    height: 0.8em;
    background: #5e7ce2;
    border: 2px solid #000;
    border-radius: 0;
    /* Square for checkboxes */
    image-rendering: pixelated;
    margin: 0;
    transition: all 0.1s steps(1);
    position: relative;
    flex-shrink: 0;
}

.uiverse-pixel-checkbox input[type="checkbox"]::before {
    content: "";
    display: block;
    width: 0.5em;
    height: 0.5em;
    background: #000;
    border-radius: 0;
    /* Keep square for checkboxes */
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.1s ease-out;
    box-shadow: 0 0 0 1px #fff;
}

.uiverse-pixel-checkbox input[type="checkbox"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
    background: #fff;
    border-radius: 0;
    /* Keep square for checked state */
}

.uiverse-pixel-checkbox input[type="checkbox"]:hover {
    background: #425ACC;
}

.uiverse-pixel-checkbox input[type="checkbox"]:active {
    background: #3A4DB8;
    transform: translateY(0.125em);
}

.uiverse-pixel-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px dashed #fff;
    outline-offset: 0.2em;
}



/*
  Updated checkbox styles combining the direct input targeting
  of the old version with the visual design of the new version.
*/
input[type="checkbox"] {
    /*
      Define custom properties for easy theme changes.
      These are the colors from your new design.
    */
    --input-focus: #2d8cf0;
    --input-out-of-focus: #ccc;
    --bg-color: #fff;
    --main-color: #323232;

    /*
      Remove default browser styling to apply our own.
    */
    -webkit-appearance: none;
    appearance: none;

    /*
      Set up the base styles for the checkbox itself,
      mimicking the ".checkmark" class from your new design.
    */
    position: relative;
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin: 0;
    /* A good reset */

    border: 2px solid var(--main-color);
    border-radius: 5px;
    box-shadow: 4px 4px var(--main-color);
    background-color: var(--input-out-of-focus);
    transition: all 0.3s;
}

/*
    Change the background color when the checkbox is checked.
  */
input[type="checkbox"]:checked {
    background-color: var(--input-focus);
}

/*
    Create the checkmark symbol using the ::after pseudo-element.
    It's hidden by default.
  */
input[type="checkbox"]::after {
    content: "";
    position: absolute;
    display: none;
    /* Hide by default */

    /* Sizing and positioning the checkmark */
    width: 7px;
    height: 15px;
    top: 2px;
    left: 8px;

    /* Styling the checkmark using borders */
    border: solid var(--bg-color);
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

/*
    Display the checkmark symbol when the checkbox is checked.
  */
input[type="checkbox"]:checked::after {
    display: block;
}

/* Optional: Add focus styles for accessibility */
input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--input-focus);
    outline-offset: 2px;
}


/* Radio Button Labels */
label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #E5E7EB;
    font-size: 14px;
    font-weight: 400;
    transition: color 0.2s ease;
}

label:hover {
    color: #ffffff;
}

/* Base & Layout */
.framework-body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
}

.framework-body-container {
    display: flex;
    height: 90%;

}


#add-llm-section .provider-grid {
    grid-column: 1 / -1;
    /* span full width inside stepped form grid */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3×2 lineup */
    gap: 1.5rem;
    /* generous spacing */
}

.provider-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    color: var(--color-text-primary);
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background-color: var(--color-background-component);
    border: 1px solid var(--color-border-secondary);
    border-radius: 20px;
    /* Squircle corners */
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.15s ease;
    width: 100%;
}

.provider-card:hover,
.provider-card:focus {
    border-color: var(--accent-primary);
    background-color: rgba(81, 110, 225, 0.15);
    transform: translateY(-2px);
}

.provider-logo {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
}

.provider-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.provider-title {
    font-weight: 600;
    color: var(--color-text-on-brand);
}

/* Stepped form typography spacing */
.form-step-title {
    margin-bottom: 0.375rem;
}

.form-step-description {
    margin-top: 0;
    margin-bottom: 1.25rem;
    color: var(--color-text-secondary);
}

/* Provider card overrides */
.provider-card {
    flex-direction: row;
    align-items: center;
    color: var(--color-text-primary);
}

.provider-info {
    margin-left: 0.75rem;
    display: flex;
    flex-direction: column;
}

.provider-title {
    font-weight: 600;
    color: var(--color-text-on-brand);
}

.provider-desc {
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    align-items: left;
}

.provider-card:hover,
.provider-card:focus {
    background-color: rgba(81, 110, 225, 0.15);
    border-color: var(--accent-primary);
    transform: none;
}

/* legacy button class retained for back-compat */
.connection-button {
    justify-content: flex-start;
    /* Align content to the start */
    margin: 0.25rem 0;
}

#main-content {
    flex-grow: 1;
    /* Allow main content to fill remaining space */
    overflow-y: scroll;
    /* Always show scrollbar to prevent layout shift */
}

/* Sidebar */
.sidebar-nav-scrollable {
    overflow-y: auto;
    overflow-x: hidden;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

.sidebar-nav-scrollable::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, and Opera */
}

/* Footer (placeholder) */
.framework-footer {
    display: none;
    /* Hidden as per current template structure */
}

/* Skeleton Loading */

/* === Consistent Scrollbar Styling === */
:root {
    --scrollbar-bg: #0d1117;
    --scrollbar-thumb: #30363d;
    --scrollbar-thumb-hover: #484f58;
    --scrollbar-thumb-active: #656d76;
    /* prevent overly bright on click */
}

/* Apply to all elements except those that intentionally hide scrollbar */
body *::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body *::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 4px;
}

body *::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

body *::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active);
}

/* Firefox */
body {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}


/* ---- Fix page scrolling & form navigation button alignment ---- */

/* Ensure stepped-form container fills available space */
.stepped-form-container {
    height: 100%;
}

html {
    height: 100%;
    overflow: hidden;
    /* Prevent browser-level scrolling */
}

/* Make each form step fill available vertical space so nav buttons sit at bottom */
.form-step {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Navigation buttons always pinned to bottom of form section */
.form-navigation-buttons {
    margin-top: auto;
    /* Push to bottom */
}


.skeleton-line {
    /* Base & customizable vars */
    --skeleton-base-color: var(--border-normal);
    --skeleton-shimmer-color: rgba(255, 255, 255, 0.15);
    --skeleton-shimmer-speed: 1.1s;
    /* quicker shimmer */
    background-color: var(--skeleton-base-color);
    border-radius: 0.25rem;
    position: relative;
    overflow: hidden;
    height: 0.5rem;
    /* default thickness */
}

/* Shimmer overlay */
.skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, transparent, var(--skeleton-shimmer-color), transparent);
    animation: shimmer var(--skeleton-shimmer-speed) infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Thickness modifier */
.skeleton-line.thick {
    height: 0.75rem;
}

/* Text skeleton for inline elements */
.skeleton-line.text {
    display: inline-block;
    width: 4rem;
    height: 1rem;
    vertical-align: middle;
}

.skeleton-line.short {
    width: 3rem;
}

/* Width utilities */
.skeleton-line.long {
    width: 100%;
}

.skeleton-line.w-3-4 {
    width: 75%;
}

.skeleton-line.w-2-4 {
    width: 50%;
}

.skeleton-line.w-1-4 {
    width: 25%;
}

/* Stack utility for grouping lines with adjustable gap */
.skeleton-stack {
    display: flex;
    flex-direction: column;
    gap: var(--skeleton-gap, 0.5rem);
}

/* Card container for skeleton placeholder blocks */
.skeleton-card {
    background-color: var(--card-bg);
    border: 1px solid var(--border-normal);
    border-radius: 0.75rem;
    /* Match connection-card styling */
    padding: 1rem 1.25rem;
    width: 100%;
}

@keyframes pulse {
    50% {
        opacity: .5;
    }
}


/* Mpalo Workbench Framework - Core Styles */

/*
* This framework is built from the ground up based on the user's specific requirements
* and the visual reference of `src/pages/workbench/index.html`.
* It avoids using generic utility classes and instead uses semantic class names
* to ensure maintainability and clarity.
*/


:root {
    /* --- Brand & Accent Palette --- */
    --color-brand-primary: #5e7ce2;
    /* Corporate Blue */
    --color-brand-hover: #758ae1;
    /* Darker shade for hover */
    --color-text-on-brand: #FFFFFF;

    /* --- Base & Background Palette --- */
    --color-background-page: var(--bg-primary);
    --color-background-content: var(--bg-secondary);
    --color-background-card: var(--bg-tertiary);
    --color-background-component: var(--bg-quaternary);
    --color-background-info: var(--bg-primary);

    /* --- Text Palette --- */
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-tertiary: var(--text-muted);
    --color-text-info: #5870a1;

    /* --- Status & Notification Palette --- */
    --color-status-success: #6de5adac;
    --color-status-warning: #edc95e;
    --color-status-error: #ce5864;

    /* --- Border & Separator Palette --- */
    --color-border-primary: var(--border-primary);
    --color-border-secondary: var(--border-secondary);
    --color-border-focus: var(--color-brand-primary);

    /* --- Layout Dimensions --- */
    --sidebar-width: 16rem;
    /* 256px */
    --sidebar-width-collapsed: 4.5rem;
    /* 72px */
    --header-height: 64px;
    /* Corresponds to h-16 in Tailwind */
    --footer-height: 3rem;
    /* 48px */

    /* --- Grid System Tokens (Standard Theme) --- */
    /* Breakpoints */
    --breakpoint-sm: 320px;
    --breakpoint-md: 600px;
    --breakpoint-lg: 1136px;

    /* Gutters */
    --gutter-sm: 16px;
    --gutter-md: 36px;
    --gutter-lg: 36px;

    /* Margins */
    --margin-default: 16px;
    --margin-sm: 16px;
    --margin-md: 36px;
    --margin-lg: 64px;

    /* Columns */
    --columns-default: 1;
    --columns-sm: 4;
    --columns-md: 8;
    --columns-lg: 12;

    /* Corner Radii - Squircle aesthetic */
    --radius-100: 12px;
    --radius-200: 20px;
    --radius-300: 20px;
    /* Default card radius - squircle feel */
    --radius-400: 24px;
}

/*
============================================
FONT FACES
============================================
*/

/* Eina - Display Font */
@font-face {
    font-family: 'Eina';
    src: url('/fonts/eina/Eina01-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Eina';
    src: url('/fonts/eina/Eina01-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Eina';
    src: url('/fonts/eina/Eina03-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* ASM - Body Font */
@font-face {
    font-family: 'ASM';
    src: url('/fonts/asm/ASM Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'ASM';
    src: url('/fonts/asm/ASM Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
}

:root {
    /* Typography */
    --font-family-display: 'Eina', sans-serif;
    --font-family-body: 'ASM', sans-serif;

    --font-weight-regular: 400;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Modular Scale (Perfect Fourth - 1.333 Ratio) */
    --font-size-100: 12px;
    /* 16 / 1.333 */
    --font-size-200: 14px;
    /* Rounded for legibility */
    --font-size-300: 16px;
    /* Base */
    --font-size-400: 21px;
    /* 16 * 1.333 */
    --font-size-500: 28px;
    /* 21 * 1.333 */
    --font-size-600: 37px;
    /* 28 * 1.333 */
    --font-size-700: 50px;
    /* 37 * 1.333 */
    --font-size-800: 66px;
    /* 50 * 1.333 */
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: var(--color-background-page);
    color: var(--color-text-primary);
    font-family: var(--font-family-body);
    font-size: var(--font-size-300);
    font-weight: var(--font-weight-regular);
}

/*
============================================
TYPOGRAPHY UTILITIES
============================================
*/

.display-text {
    font-family: var(--font-family-display);
    font-size: var(--font-size-800);
    font-weight: var(--font-weight-bold);
    line-height: 96px;
    margin: 0 0 48px 0;
}

.heading-1 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-700);
    font-weight: var(--font-weight-bold);
    line-height: 72px;
    margin: 0 0 36px 0;
}

.heading-2 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-600);
    font-weight: var(--font-weight-bold);
    line-height: 52px;
    margin: 0 0 24px 0;
}

.heading-3 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-500);
    font-weight: var(--font-weight-semibold);
    line-height: 40px;
    margin: 0 0 20px 0;
}

.heading-4 {
    font-family: var(--font-family-display);
    font-size: var(--font-size-400);
    font-weight: var(--font-weight-semibold);
    line-height: 32px;
    margin: 0 0 16px 0;
}

.body-large {
    font-family: var(--font-family-body);
    font-size: var(--font-size-400);
    font-weight: var(--font-weight-regular);
    line-height: 32px;
    margin: 0 0 32px 0;
}

.body-text {
    font-family: var(--font-family-body);
    font-size: var(--font-size-300);
    font-weight: var(--font-weight-regular);
    line-height: 24px;
    margin: 0 0 24px 0;
}

.body-small {
    font-family: var(--font-family-body);
    font-size: var(--font-size-200);
    font-weight: var(--font-weight-regular);
    line-height: 20px;
    margin: 0 0 20px 0;
}

.caption-text {
    font-family: var(--font-family-body);
    font-size: var(--font-size-100);
    font-weight: var(--font-weight-regular);
    line-height: 16px;
    margin: 0;
}

.text-mono-metric {
    font-family: var(--font-family-display);
    font-size: var(--font-size-800);
    font-weight: var(--font-weight-bold);
    line-height: 96px;
    margin: 0;
}

.framework-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.framework-sidebar {
    z-index: 100;
    /* Ensure sidebar is always on top */
    position: fixed;
    flex-direction: column;
    height: 100vh;
    width: var(--sidebar-width);
    background-color: transparent;
    border-right: 1px solid var(--color-brand-primary);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-x: hidden;
    transition: width 0.3s ease-in-out;
}

.framework-body-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    /* Prevent body scroll */
}

.framework-content-wrapper {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.framework-main-wrapper {
    display: flex;
    flex-grow: 1;
}

.framework-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    padding-top: 5rem;
    /* Add padding to account for the new header height */
    padding-left: 2rem;
    /* Add padding from sidebar */
    border-bottom: 1px solid var(--color-border-primary);
    /* Add border to prevent content from hiding behind footer */
}

#service-health-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    /* even spacing */
    margin: 0 auto;
    /* center within header */
    /* Ensure card position stays consistent regardless of sidebar state */
}

.framework-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1rem;
    padding-top: 5rem;
    /* Add padding to account for the new header height */
    padding-left: 2rem;
    /* Add padding from sidebar */
    border-bottom: 1px solid var(--color-border-primary);
    /* Adjust header position when sidebar is collapsed */
}

/* Hide scrollbar on sidebar nav */
.sidebar-nav-scrollable {
    overflow-y: auto;
}

.sidebar-nav-scrollable::-webkit-scrollbar {
    display: none;
}

.sidebar-nav-scrollable {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#sidebar {
    transition: width 0.3s ease-in-out;
    position: relative;
    overflow-x: hidden;
}

#sidebar.collapsed {
    width: 5rem;
    /* 80px */
    transition-duration: 0s;
}

#sidebar.collapsed .sidebar-text,
#sidebar.collapsed #logo-text,
#sidebar.collapsed #sidebar-bottom-nav {
    opacity: 0;
    pointer-events: none;
}

.framework-footer {
    height: var(--footer-height);
    border-top: 1px solid var(--color-grey-800);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    flex-shrink: 0;
    /* Prevent footer from shrinking */
    background-color: var(--color-dark-100);
}

.footer-left,
.footer-center,
.footer-right {
    flex: 1;
}

.footer-center {
    text-align: center;
}

.footer-right {
    text-align: right;
}

.copyright-text {
    color: var(--color-grey-500);
    font-size: 0.875rem;
    /* 14px */
}

.sidebar-toggle-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: color 0.2s, background-color 0.2s;
}

.sidebar-toggle-btn:hover .toggle-text {
    color: var(--color-text-primary);
}


.toggle-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-left: 0.5rem;
}

.toggle-text {
    white-space: nowrap;
}

body.sidebar-collapsed .sidebar-text,
body.sidebar-collapsed .logo-text,
body.sidebar-collapsed .sidebar-section-title {
    display: none;
}

/* When the sidebar is collapsed, shrink the margin */
body.sidebar-collapsed .framework-content-wrapper {
    margin-left: var(--sidebar-width-collapsed);
}

#invitation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-background-card);
    /* Darker background to match cards */
    border: 1px solid var(--color-border-primary);
    /* Border to match card styling */
    color: var(--color-text-secondary);
    /* Light gray text */
    margin: -1rem 0 1rem 0;
    border-radius: 12px;
    /* Modern rounded corners */
    animation: slideDown 0.5s ease-in-out;
}



.framework-sidebar.collapsed {
    width: var(--sidebar-width-collapsed);
}

.sidebar-no-transition {
    transition: none !important;
}

/* --- Grid System --- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(var(--columns-default), 1fr);
    gap: var(--gutter-sm);
    padding: 0 var(--margin-default);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.grid-item {
    background-color: transparent;
    padding: 1.25rem;
    /* 20px */
    border-radius: 12px;
    /* Modern rounded corners */
    border: 1px solid var(--color-brand-primary);
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    flex: 1 1 0px;
    /* Allow cards to grow and shrink */
}

.main-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--header-height));
    /* Full height minus header */
    overflow-y: auto;
    /* Allow page scroll; keep horizontal overflow hidden */
    overflow-x: hidden;
    padding-top: 5rem;
    /* Add padding to account for header */
    padding-left: 2rem;
    /* Add padding from sidebar */
    padding-right: 3rem;
    /* Add padding on the right for better content spacing */
}

/* Studio page specific - no top padding needed */
body:has(#playground-layout) .main-content,
body:has(#playground-layout) #main-content {
    padding-top: 0 !important;
}

.invitation-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background-color: var(--color-background-info);
    color: var(--color-text-info);
    border-radius: 12px;
    /* Modern rounded corners */
    box-shadow: var(--shadow-300);
}

.card-grid-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    /* Gutter between rows */
    padding: 1.5rem;
    flex-grow: 1;
}

.card-row {
    display: flex;
    gap: 1.5rem;
    /* Gutter between cards */
    flex: 1 1 0px;
}

.card-span-2 {
    flex-grow: 2;
    /* Make this card twice as wide */
}

.chart-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.chart-card-info {
    display: flex;
    flex-direction: column;
}

.chart-card-label {
    font-size: 0.875rem;
    /* 14px */
    color: var(--color-text-secondary);
}

.chart-card-value {
    font-size: 1.875rem;
    /* 30px */
    font-weight: 600;
    color: var(--color-text-primary);
}

.chart-card-sparkline {
    width: 150px;
    height: 50px;
    /* Placeholder for sparkline chart */
    background-image: url('data:image/svg+xml;utf8,<svg width="150" height="50" xmlns="http://www.w3.org/2000/svg"><path d="M0 25 L10 15 L20 30 L30 20 L40 35 L50 25 L60 40 L70 30 L80 45 L90 35 L100 25 L110 15 L120 30 L130 20 L140 35 L150 25" stroke="%235271FF" fill="none" stroke-width="2"/></svg>');
    background-repeat: no-repeat;
    background-size: contain;
}

/* --- Responsive Grid Adjustments --- */
/* Small breakpoint */
@media (min-width: var(--breakpoint-sm)) {
    .grid-container {
        grid-template-columns: repeat(var(--columns-sm), 1fr);
        gap: var(--gutter-sm);
        padding: 0 var(--margin-sm);
    }
}

/* Medium breakpoint */
@media (min-width: var(--breakpoint-md)) {
    .grid-container {
        grid-template-columns: repeat(var(--columns-md), 1fr);
        gap: var(--gutter-md);
        padding: 0 var(--margin-md);
    }
}

/* Large breakpoint */
@media (min-width: var(--breakpoint-lg)) {
    .grid-container {
        grid-template-columns: repeat(var(--columns-lg), 1fr);
        gap: var(--gutter-lg);
        padding: 0 var(--margin-lg);
    }
}

/* --- Column Span Utilities --- */
.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-7 {
    grid-column: span 7 / span 7;
}

.col-span-8 {
    grid-column: span 8 / span 8;
}

.col-span-9 {
    grid-column: span 9 / span 9;
}

.col-span-10 {
    grid-column: span 10 / span 10;
}

.col-span-11 {
    grid-column: span 11 / span 11;
}

.col-span-12 {
    grid-column: span 12 / span 12;
}

.col-span-full {
    grid-column: 1 / -1;
}

/* Responsive Span Utilities */
@media (min-width: var(--breakpoint-sm)) {
    .sm\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .sm\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .sm\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .sm\:col-span-4 {
        grid-column: span 4 / span 4;
    }
}

@media (min-width: var(--breakpoint-md)) {
    .md\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .md\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .md\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .md\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .md\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .md\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .md\:col-span-7 {
        grid-column: span 7 / span 7;
    }

    .md\:col-span-8 {
        grid-column: span 8 / span 8;
    }
}

@media (min-width: var(--breakpoint-lg)) {
    .lg\:col-span-1 {
        grid-column: span 1 / span 1;
    }

    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }

    .lg\:col-span-3 {
        grid-column: span 3 / span 3;
    }

    .lg\:col-span-4 {
        grid-column: span 4 / span 4;
    }

    .lg\:col-span-5 {
        grid-column: span 5 / span 5;
    }

    .lg\:col-span-6 {
        grid-column: span 6 / span 6;
    }

    .lg\:col-span-7 {
        grid-column: span 7 / span 7;
    }

    .lg\:col-span-8 {
        grid-column: span 8 / span 8;
    }

    .lg\:col-span-9 {
        grid-column: span 9 / span 9;
    }

    .lg\:col-span-10 {
        grid-column: span 10 / span 10;
    }

    .lg\:col-span-11 {
        grid-column: span 11 / span 11;
    }

    .lg\:col-span-12 {
        grid-column: span 12 / span 12;
    }
}

/* --- Column Skip Utilities (for offsets) --- */
.skip-1 {
    grid-column-start: 2;
}

.skip-2 {
    grid-column-start: 3;
}

.skip-3 {
    grid-column-start: 4;
}

.skip-4 {
    grid-column-start: 5;
}

.skip-5 {
    grid-column-start: 6;
}

.skip-6 {
    grid-column-start: 7;
}

.skip-7 {
    grid-column-start: 8;
}

.skip-8 {
    grid-column-start: 9;
}

.skip-9 {
    grid-column-start: 10;
}

.skip-10 {
    grid-column-start: 11;
}

.skip-11 {
    grid-column-start: 12;
}

/* Responsive Skip Utilities */
@media (min-width: var(--breakpoint-sm)) {
    .sm\:skip-0 {
        grid-column-start: 1;
    }

    .sm\:skip-1 {
        grid-column-start: 2;
    }

    .sm\:skip-2 {
        grid-column-start: 3;
    }

    .sm\:skip-3 {
        grid-column-start: 4;
    }
}

@media (min-width: var(--breakpoint-md)) {
    .md\:skip-0 {
        grid-column-start: 1;
    }

    .md\:skip-1 {
        grid-column-start: 2;
    }

    .md\:skip-2 {
        grid-column-start: 3;
    }

    .md\:skip-3 {
        grid-column-start: 4;
    }

    .md\:skip-4 {
        grid-column-start: 5;
    }

    .md\:skip-5 {
        grid-column-start: 6;
    }

    .md\:skip-6 {
        grid-column-start: 7;
    }

    .md\:skip-7 {
        grid-column-start: 8;
    }
}

@media (min-width: var(--breakpoint-lg)) {
    .lg\:skip-0 {
        grid-column-start: 1;
    }

    .lg\:skip-1 {
        grid-column-start: 2;
    }

    .lg\:skip-2 {
        grid-column-start: 3;
    }

    .lg\:skip-3 {
        grid-column-start: 4;
    }

    .lg\:skip-4 {
        grid-column-start: 5;
    }

    .lg\:skip-5 {
        grid-column-start: 6;
    }

    .lg\:skip-6 {
        grid-column-start: 7;
    }

    .lg\:skip-7 {
        grid-column-start: 8;
    }

    .lg\:skip-8 {
        grid-column-start: 9;
    }

    .lg\:skip-9 {
        grid-column-start: 10;
    }

    .lg\:skip-10 {
        grid-column-start: 11;
    }

    .lg\:skip-11 {
        grid-column-start: 12;
    }
}

/* --- Responsive Visibility Utilities --- */
.hidden {
    display: none;
}

@media (max-width: 319.98px) {

    /* Below sm breakpoint */
    .xs-only\:block {
        display: block !important;
    }

    .xs-only\:flex {
        display: flex !important;
    }
}

@media (min-width: var(--breakpoint-sm)) {
    .sm\:hidden {
        display: none;
    }
}

@media (min-width: var(--breakpoint-md)) {
    .md\:hidden {
        display: none;
    }
}

@media (min-width: var(--breakpoint-lg)) {
    .lg\:hidden {
        display: none;
    }
}

.invitation-banner.hidden {
    display: none;
}

.invitation-text {
    margin: 0;
    flex-grow: 1;
    text-align: center;
}

.invitation-link {
    color: white;
    font-weight: bold;
    text-decoration: underline;
}

.dismiss-button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    margin-left: 1rem;
    font-size: 1.25rem;
    font-weight: bold;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.dismiss-button:hover {
    opacity: 1;
}

.form-step {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.form-step.active {
    display: block;
    opacity: 1;
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translateX(0);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Chat title zoom-responsive styles */
#playground-config-btn-bar {
    min-height: 60px;
}

#chat-title {
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
}

/* Ensure config bar doesn't overflow at any zoom level */
@media (max-width: 768px) {
    #chat-title {
        max-width: min(12ch, 25vw) !important;
        font-size: 1rem !important;
    }

    #playground-config-btn-bar .flex-shrink-0 button {
        padding: 0.375rem !important;
    }

    #playground-config-btn-bar .flex-shrink-0 img {
        width: 0.875rem !important;
        height: 0.875rem !important;
    }
}

/* High zoom level adjustments */
@media (min-resolution: 150dpi) {
    #chat-title {
        max-width: min(12ch, 25vw) !important;
    }
}

/* Container overflow protection */
#playground-config-btn-bar {
    overflow: hidden;
    flex-wrap: nowrap;
}

#playground-config-btn-bar>div:first-child {
    min-width: 0;
    overflow: hidden;
}

/* Override hardcoded width in playground-styles.css */
#run-settings-container {
    width: 320px !important;
}

/* Performance stats styling */
.stat-item {
    transition: all 0.2s ease;
}

.stat-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#performance-stats {
    backdrop-filter: blur(10px);
}

/* Tooltip styles */
.has-tooltip[data-tip] {
    position: relative;
}

.has-tooltip[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: 50%;
    left: calc(100% + 8px);
    transform: translateY(-50%);
    background: rgba(24, 24, 37, 0.95);
    color: #f4f3ee;
    padding: 6px 10px;
    font-size: 0.75rem;
    border-radius: 6px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
    z-index: 999999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.has-tooltip[data-tip]:hover::after {
    opacity: 1;
}

/* Tooltip positioning for rightmost buttons - show on left side */
#docs-btn.has-tooltip[data-tip]::after,
#system-prompt-btn.has-tooltip[data-tip]::after,
#clear-chat-btn.has-tooltip[data-tip]::after,
#delete-config-btn.has-tooltip[data-tip]::after {
    left: auto;
    right: calc(100% + 8px);
}

/* ===== NEW WORKBENCH CHART SYSTEM ===== */
.workbench-chart-container {
    width: 100%;
    height: 100%;
    position: relative;
    min-height: 80px;
}

.workbench-chart-container svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    display: block;
}

.workbench-chart-tooltip {
    position: fixed;
    background: #1F2937;
    border: 1px solid #374151;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: #F9FAFB;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -100%) translateY(-8px);
    transition: opacity 0.2s ease;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    font-family: var(--font-family-body);
    backdrop-filter: blur(8px);
}

/* Chart hover effects */
.workbench-chart-container .data-points circle {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    stroke-width: 1;
}

.workbench-chart-container .data-points circle:hover {
    stroke-width: 2;
    filter: drop-shadow(0 0 8px currentColor);
}

/* Grid styling */

/* === SIDEBAR ENHANCEMENTS === */
/* Sidebar link hover effects with circle background and lightened icons */
.sidebar-link {
    position: relative;
    transition: all 0.2s ease-in-out;
    border-radius: 0;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
    width: calc(100% + 2rem);
}

.sidebar-link:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff !important;
}

.sidebar-link:hover img {
    filter: brightness(1.3) saturate(1.2);
}

/* Active/current page styling */
.sidebar-link.active,
.sidebar-link[aria-current="page"] {
    background-color: transparent;
    text-decoration: underline;
    text-underline-offset: 4px;
    color: #ffffff !important;
}

.sidebar-link.active img,
.sidebar-link[aria-current="page"] img {
    filter: brightness(1.2) saturate(1.1);
}

/* Enhanced icon styling within sidebar links */
.sidebar-link img {
    transition: filter 0.2s ease-in-out;
}

/* Section titles styling enhancement */
.sidebar-section-title {
    font-weight: 600;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    margin-top: 1.5rem;
}

/* Sidebar scrollable area refinements */
.sidebar-nav-scrollable {
    padding-bottom: 1rem;
}

/* Focus states for accessibility */
.sidebar-link:focus {
    outline: 2px solid #5e7ce2;
    outline-offset: -2px;
    background-color: rgba(82, 113, 255, 0.1);
}

.sidebar-link:focus img {
    filter: brightness(1.3) saturate(1.2);
}

.workbench-chart-container .grid line {
    stroke: #374151;
    stroke-width: 1;
    opacity: 0.3;
}

/* Area and line styling */
.workbench-chart-container path[fill*="url"] {
    opacity: 1;
}

.workbench-chart-container path[stroke*="url"] {
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 3px rgba(59, 130, 246, 0.2));
}

/* === SIDEBAR VISIBILITY UTILITIES === */
/* Utility class to make sidebars invisible and transparent */
.sidebar-invisible {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Alternative utility for completely hidden sidebars */
.sidebar-hidden {
    display: none !important;
}

/* Utility for transparent sidebars that maintain layout but are see-through */
.sidebar-transparent {
    opacity: 0.1 !important;
    transition: opacity 0.3s ease !important;
}

/* === QUICK ACTIONS CARD NO-GAP STYLING === */
/* Remove gaps and padding between elements in quick actions card */
.quick-actions-card.sidebar-invisible .dashboard-card-header,
.quick-actions-card.sidebar-invisible .dashboard-card-content,
.quick-actions-card.sidebar-invisible .quick-actions-grid,
.quick-actions-card.sidebar-invisible .quick-action-item {
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
}

.quick-actions-card.sidebar-invisible .dashboard-card-title,
.quick-actions-card.sidebar-invisible .dashboard-card-subtitle {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.quick-actions-card.sidebar-invisible .quick-action-item span,
.quick-actions-card.sidebar-invisible .quick-action-item img {
    margin: 0 !important;
    padding: 0 !important;
}

.quick-actions-card.sidebar-invisible .rank-number {
    margin-right: 0 !important;
}

/* === QUICK ACTIONS CARD STYLING IMPROVEMENTS === */
/* Reduce gaps and spacing in quick actions card */
.quick-actions-card .dashboard-card-header {
    margin-bottom: 0.5rem !important;
    padding-bottom: 0.25rem !important;
}

.quick-actions-card .dashboard-card-content {
    padding-top: 0 !important;
}

.quick-actions-card .quick-actions-grid {
    gap: 0.5rem !important;
    /* Smaller gap between action items */
}

.quick-actions-card .quick-action-item {
    padding: 0.5rem !important;
    /* Smaller padding inside each item */
    gap: 0.375rem !important;
    /* Smaller gap between icon and text */
}

.quick-actions-card .dashboard-card-title {
    margin-bottom: 0.25rem !important;
}

.quick-actions-card .dashboard-card-subtitle {
    margin-bottom: 0 !important;
}

/* Hide scrollbar in quick actions card */
.quick-actions-card .dashboard-card-content,
.quick-actions-card .quick-actions-grid {
    -ms-overflow-style: none !important;
    /* IE and Edge */
    scrollbar-width: none !important;
    /* Firefox */
}

.quick-actions-card .dashboard-card-content::-webkit-scrollbar,
.quick-actions-card .quick-actions-grid::-webkit-scrollbar {
    display: none !important;
    /* Chrome, Safari, and Opera */
}

/* Page Loader Styles - Prevent Content Flash */
/* Hide only main content initially, keep header/sidebar/footer visible */
#main-content {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Show main content only after loader is ready */
body.content-ready #main-content {
    opacity: 1 !important;
}

/* Fallback: If content-ready class is not added, show content after a delay */
body:not(.content-ready) #main-content {
    animation: showContentFallback 0.3s ease-in-out 3s forwards;
}

@keyframes showContentFallback {
    to {
        opacity: 1;
    }
}

/* Loader overlay should be above main content but below header/sidebar */
#page-loader-overlay {
    z-index: 40 !important;
    /* Below header (z-40) but above main content */
}

/* Ensure header and sidebar stay above the loader */
header {
    z-index: 50 !important;
}

aside#sidebar {
    z-index: 50 !important;
}

/* Ensure sidebar links are always clickable */
aside#sidebar .sidebar-link,
aside#sidebar nav a {
    pointer-events: auto;
}

/* ===== Connection Selection Grid ===== */
/* 2-column grid for connection selection in API keys and similar forms */
.connection-selection-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0.5rem;
    margin-bottom: 1.5rem;
}

/* Single column on mobile */
@media (max-width: 640px) {
    .connection-selection-grid {
        grid-template-columns: 1fr;
    }
}

/* Connection cards inside grid */
.connection-selection-grid .skeleton-card,
.connection-selection-grid .connection-card,
.connection-selection-grid .api-item {
    min-height: 80px;
    max-height: 120px;
    overflow: hidden;
}

/* Text truncation for connection names and descriptions */
.connection-selection-grid .connection-name,
.connection-selection-grid .api-item h4,
.connection-selection-grid .provider-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.connection-selection-grid .connection-description,
.connection-selection-grid .api-item p,
.connection-selection-grid .provider-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.8em;
    line-height: 1.4em;
}

/* Custom scrollbar for connection grid */
.connection-selection-grid::-webkit-scrollbar {
    width: 8px;
}

.connection-selection-grid::-webkit-scrollbar-track {
    background: rgba(31, 41, 55, 0.3);
    border-radius: 4px;
}

.connection-selection-grid::-webkit-scrollbar-thumb {
    background: rgba(99, 102, 241, 0.5);
    border-radius: 4px;
}

.connection-selection-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(99, 102, 241, 0.7);
}

/* ===== SIMPLE FRAMEWORK COLOR UTILITIES ===== */

/*
SIMPLE WORKBENCH COLOR SYSTEM
=============================

SMALL, FOCUSED SET OF COLOR VARIABLES:

BASIC STRUCTURE:
- Existing: --bg-primary, --bg-secondary, --bg-tertiary, --bg-quaternary
- Existing: --text-primary, --text-secondary, --text-muted  
- Existing: --border-primary, --border-secondary
- Existing: --accent-primary, --accent-secondary

CARD SURFACES:
- --card-bg (main card backgrounds)
- --card-nested (nested content inside cards)

BORDER LINES:
- --border-subtle (light borders)
- --border-normal (standard borders) 
- --border-accent (highlighted borders)

SIMPLE COLORS:
- --green, --yellow, --red, --blue

USAGE EXAMPLES:
Instead of: background-color: #ef4444;
Use: background-color: var(--red);

Instead of: background: rgba(30, 41, 59, 0.4);
Use: background-color: var(--card-bg);

Instead of: border: 1px solid rgba(75, 85, 99, 0.3);
Use: border: 1px solid var(--border-subtle);

This system automatically adapts to light/dark themes!
*/

/* Simple Utility Classes */
.text-green {
    color: var(--green) !important;
}

.text-yellow {
    color: var(--yellow) !important;
}

.text-red {
    color: var(--red) !important;
}

.text-blue {
    color: var(--blue) !important;
}

.bg-green {
    background-color: var(--green) !important;
}

.bg-yellow {
    background-color: var(--yellow) !important;
}

.bg-red {
    background-color: var(--red) !important;
}

.bg-blue {
    background-color: var(--blue) !important;
}

.card-bg {
    background-color: var(--card-bg) !important;
}

.card-nested {
    background-color: var(--card-nested) !important;
}

.border-subtle {
    border-color: var(--border-subtle) !important;
}

.border-normal {
    border-color: var(--border-normal) !important;
}

.border-accent {
    border-color: var(--border-accent) !important;
}

/* ===== BUTTON SYSTEM ===== */

/* Base button styles - HIGHER SPECIFICITY */
body .btn,
.btn {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    font-family: inherit !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    min-height: 2.5rem !important;
    line-height: 1 !important;
}

/* Button hover state - slightly lighter */
body .btn:hover,
.btn:hover {
    background-color: var(--bg-quaternary) !important;
}

/* Button focus state */
body .btn:focus,
.btn:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(94, 124, 226, 0.2) !important;
}

/* Button disabled state */
body .btn:disabled,
.btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

body .btn:disabled:hover,
.btn:disabled:hover {
    background-color: var(--bg-tertiary) !important;
}

/* Primary button variant */
body .btn-primary,
.btn-primary {
    background-color: var(--accent-primary) !important;
    color: white !important;
}

body .btn-primary:hover,
.btn-primary:hover {
    background-color: var(--accent-secondary) !important;
}

/* Secondary button variant */
body .btn-secondary,
.btn-secondary {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
    border: none !important;
}

body .btn-secondary:hover,
.btn-secondary:hover {
    background-color: var(--bg-quaternary) !important;
}

/* Ghost button variant - transparent background */
body .btn-ghost,
.btn-ghost {
    background-color: transparent !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

body .btn-ghost:hover,
.btn-ghost:hover {
    background-color: var(--bg-tertiary) !important;
    border-color: var(--border-secondary) !important;
}

/* Small button variant */
body .btn-sm,
.btn-sm {
    padding: 0.375rem 0.75rem !important;
    font-size: 0.75rem !important;
    min-height: 2rem !important;
    border-radius: 6px !important;
}

/* Large button variant */
body .btn-lg,
.btn-lg {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
    min-height: 3rem !important;
    border-radius: 10px !important;
}