
/* ============================================================
   GENERATED CSS FILE
   Generated on: 2026-03-02 20:45:27 CST
   Version: leadthink-app
   Primary Palette: tailwind-blue
   Neutral Palette: tailwind-zinc
   Success Palette: tailwind-green
   Failure Palette: tailwind-red
   Warning Palette: tailwind-yellow
============================================================ */

/* ============================================================
   GLOBAL RESET
   Modern normalize/reset styles
============================================================ */

/* reset.css */
/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

*,
::before,
::after {
    box-sizing: border-box;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/

html {
    font-family:
            system-ui,
            'Segoe UI',
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji'; /* 1 */
    line-height: 1.15; /* 2 */
    -webkit-text-size-adjust: 100%; /* 3 */
    tab-size: 4; /* 4 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
    margin: 0;
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
    font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
    font-family:
            ui-monospace,
            SFMono-Regular,
            Consolas,
            'Liberation Mono',
            Menlo,
            monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
    font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
    border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
    padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
    vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
    height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
    display: list-item;
}


/* ============================================================
   BASE COLORS
   Essential black and white values
============================================================ */

:root {
  --white: #FFFFFF;
  --black: #000000;
}

/* Primary Palette: tailwind-blue */
:root {
    --primary-50:  #eff6ff;
    --primary-100: #dbeafe;
    --primary-200: #bfdbfe;
    --primary-300: #93c5fd;
    --primary-400: #60a5fa;
    --primary-500: #3b82f6;
    --primary-600: #2563eb;
    --primary-700: #1d4ed8;
    --primary-800: #1e40af;
    --primary-900: #1e3a8a;
    --primary-950: #172554;
}

/* Neutral Palette: tailwind-zinc */
:root {
    --neutral-50:  #fafafa;
    --neutral-100: #f4f4f5;
    --neutral-200: #e4e4e7;
    --neutral-300: #d4d4d8;
    --neutral-400: #a1a1aa;
    --neutral-500: #71717a;
    --neutral-600: #52525b;
    --neutral-700: #3f3f46;
    --neutral-800: #27272a;
    --neutral-900: #18181b;
    --neutral-950: #09090b;
}

/* Success Palette: tailwind-green */
:root {
    --success-50:  #f0fdf4;
    --success-100: #dcfce7;
    --success-200: #bbf7d0;
    --success-300: #86efac;
    --success-400: #4ade80;
    --success-500: #22c55e;
    --success-600: #16a34a;
    --success-700: #15803d;
    --success-800: #166534;
    --success-900: #14532d;
    --success-950: #052e16;
}

/* Failure Palette: tailwind-red */
:root {
    --failure-50:  #fef2f2;
    --failure-100: #fee2e2;
    --failure-200: #fecaca;
    --failure-300: #fca5a5;
    --failure-400: #f87171;
    --failure-500: #ef4444;
    --failure-600: #dc2626;
    --failure-700: #b91c1c;
    --failure-800: #991b1b;
    --failure-900: #7f1d1d;
    --failure-950: #450a0a;
}

/* Warning Palette: tailwind-yellow */
:root {
    --warning-50:  #fefce8;
    --warning-100: #fef9c3;
    --warning-200: #fef08a;
    --warning-300: #fde047;
    --warning-400: #facc15;
    --warning-500: #eab308;
    --warning-600: #ca8a04;
    --warning-700: #a16207;
    --warning-800: #854d0e;
    --warning-900: #713f12;
    --warning-950: #422006;
}

/* ============================================================
   GLOBAL STYLE VARIABLES
   Site-wide design defaults
============================================================ */

:root {
    /* Global */
    --global-border-width: 1px;
    --global-border-style: solid;
    --global-border-radius: var(--radius-lg);

}

/* ============================================================
   COMPONENT VARIABLES
   Component-specific style variables
============================================================ */

:root {
    /* Body */
    --body-bg-color: var(--neutral-100);
    --body-color: var(--neutral-900);

    /* Button */
    --button-bg: var(--primary-500);
    --button-bg-hover: var(--primary-900);
    --button-bg-active: var(--primary-500);
    --button-bg-disabled: var(--neutral-300);
    --button-text: var(--neutral-50);
    --button-text-hover: var(--white);
    --button-text-disabled: var(--neutral-500);
    --button-border: var(--primary-500);
    --button-border-hover: var(--primary-700);
    --button-border-disabled: var(--neutral-300);
    --button-border-width: var(--global-border-width);
    --button-shadow: var(--shadow-md);
    --button-shadow-active: var(--shadow-sm);
    --button-radius-top-left: var(--button-radius);
    --button-radius-top-right: var(--button-radius);
    --button-radius-bottom-right: var(--button-radius);
    --button-radius-bottom-left: var(--button-radius);
    --button-font-size: var(--text-lg);


}

/* ============================================================
   MEDIA VARIABLES
   CSS custom properties for media (images, videos, SVG, content)
============================================================ */

:root {
        --logo: url('/images/logo.svg');

}

/*======================================
 * TYPOGRAPHY SYSTEM
 *
 * Comprehensive typographic styles that establish visual hierarchy
 *  * through headings, paragraphs, and text formatting. This section
 *  * ensures consistent and readable text across the entire website.
 *======================================*/

/* Warning: Font directory for 'neutral' (dir: neutral) not found */
@font-face {
    font-family: 'Archivo-Light';
    src: url('/framework/fonts/archivo/ArchivoLight.ttf') format('truetype');
}
@font-face {
    font-family: 'Archivo-Regular';
    src: url('/framework/fonts/archivo/ArchivoRegular.woff2') format('woff2'),
         url('/framework/fonts/archivo/ArchivoRegular.ttf') format('truetype');
}
@font-face {
    font-family: 'Archivo-Medium';
    src: url('/framework/fonts/archivo/ArchivoMedium.woff2') format('woff2'),
         url('/framework/fonts/archivo/ArchivoMedium.ttf') format('truetype');
}
@font-face {
    font-family: 'Archivo-Bold';
    src: url('/framework/fonts/archivo/Archivo-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Archivo-Black';
    src: url('/framework/fonts/archivo/ArchivoBlack.woff2') format('woff2'),
         url('/framework/fonts/archivo/ArchivoBlack.ttf') format('truetype');
}

:root {
    /* Font families */
    --font-color: 'neutral-950', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Archivo-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-headings: 'Archivo-Black', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-paragraph: 'Archivo-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-strong: 'Archivo-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-button: 'Archivo-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* Typography Classes */
/* Additional typography utilities and classes from leadthink-app/typography.css */

:root {
    /* Font sizes */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    --text-6xl: 3.75rem;

    /* Spacing */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2rem;
    --space-6: 3rem;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headings);
    font-weight: normal;
    margin-top: 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    font-weight: inherit;
}

h1 {
    font-size: var(--text-4xl);
    line-height: 1.2;
}

h2 {
    font-size: var(--text-3xl);
    line-height: 1.3;
}

h3 {
    font-size: var(--text-2xl);
    line-height: 1.4;
}

h4 {
    font-size: var(--text-xl);
    line-height: 1.4;
}

h5 {
    font-size: var(--text-lg);
    line-height: 1.4;
    color: var(--neutral-700);
}

p {
    font-family: var(--font-paragraph);
    margin: 0 0 var(--space-4) 0;
}

strong, b {
    font-family: var(--font-strong);
    font-weight: normal;
}

button, .btn {
    font-family: var(--font-button);
}

hr {
    background-image: linear-gradient(to right, transparent, rgba(50, 50, 50, 0.4), transparent);
    border: 0;
    height: 2px;
    margin: 22px auto;
    max-width: 90%;
}

p img {
    margin: 0;
}

p.lead {
    font-size: var(--text-xl);
    line-height: 1.5;
    color: var(--neutral-600);
}

em {
    font-style: italic;
}

small {
    font-size: var(--text-sm);
}

sup {
    font-size: var(--text-xs);
    line-height: 0;
    position: relative;
    vertical-align: baseline;
    top: -0.5em;
}

.subheader {
    color: var(--neutral-600);
}

/* Links */
a, a:visited {
    color: var(--primary-800);
    text-decoration: underline;
    outline: 0;
    transition: color var(--transition-default);
}

a:hover, a:focus {
    color: var(--primary-600);
}

p a, p a:visited {
    line-height: inherit;
}

/* Lists */
ul, ol {
    margin-bottom: var(--space-4);
}

ul {
    list-style: none outside;
}

ol {
    list-style: decimal;
}

ol, ul.square, ul.circle, ul.disc {
    margin-left: 30px;
}

ul.square {
    list-style: square outside;
}

ul.circle {
    list-style: circle outside;
}

ul.disc {
    list-style: disc outside;
}

ul ul, ul ol, ol ol, ol ul {
    margin: var(--space-1) 0 var(--space-2) 30px;
    font-size: 90%;
}

ul ul li, ul ol li, ol ol li, ol ul li {
    margin-bottom: 0px;
}

li {
    line-height: 1.4;
    margin-bottom: 0px;
}

ul.large li {
    line-height: 1.6;
}

li p {
    line-height: 1.5;
}

/* ========== MOBILE RESPONSIVE ========== */
/* Mobile (below 768px) */
@media (max-width: 768px) {
    h1 {
        font-size: var(--text-3xl);
    }

    h2 {
        font-size: var(--text-2xl);
    }

    h3 {
        font-size: var(--text-xl);
    }

    h4 {
        font-size: var(--text-lg);
    }

    h5 {
        font-size: var(--text-base);
    }
}

/* Small mobile (below 480px) */
@media (max-width: 480px) {
    h1 {
        font-size: var(--text-2xl);
    }

    h2 {
        font-size: var(--text-xl);
    }

    h3 {
        font-size: var(--text-lg);
    }

    h4 {
        font-size: var(--text-base);
    }
}


/* ============================================================
   CORE STYLES
   Layout, typography, and utilities
============================================================ */

/* app.css */
/**
 * App Page Styles - GENERIC LAYOUT
 * Global layout with grey background and white card components
 * UPDATED: Transparent main container with padding + gap
 * Path: /inc/framework/css/styles/leadthink-app/layout/app.css
 */

/* ====================
   GLOBAL BODY LAYOUT
   ==================== */

body {
    background: #f0f2f5;
    margin: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
}

/* ====================
   MAIN PAGE VIEW - TRANSPARENT CONTAINER WITH GAP
   ==================== */

main.page-view {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100vh;
    overflow: hidden;
    flex: 1;
}

/* Direct children are white cards (components handle their own styling) */
main.page-view > * {
    flex-shrink: 0;
}

/* Last child (typically data table) grows to fill remaining space */
main.page-view > *:last-child {
    flex: 1;
    min-height: 0;
}

/* ====================
   DRILL-DOWN LINKS
   ==================== */

.drilldown-link {
    color: #1877f2;
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
}

.drilldown-link:hover {
    text-decoration: underline;
}

/* ====================
   REPORT ICONS (Related Reports Column)
   ==================== */

.report-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

.report-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: background-color 0.15s;
}

.report-icons a:hover {
    background-color: #f2f3f5;
}

.report-icons img {
    display: block;
}

/* ====================
   RESPONSIVE
   ==================== */

@media (max-width: 768px) {
    main.page-view {
        padding: 12px;
        gap: 12px;
    }

    .report-icons {
        gap: 6px;
    }
}

/* utilities.css */
/* ============================================================
   DESIGN UTILITIES
   Shadows, opacity, transitions, and other design tokens
============================================================ */

:root {
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    --shadow-md: 0 3px 5px 0 rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    --shadow-neobrute: 4px 4px 0 rgba(0, 0, 0, 1);
    --shadow-neobrute-20: 4px 4px 0 rgba(0, 0, 0, 0.2);

    /* Dark mode shadows */
    --shadow-dark-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-dark: 0 1px 3px 0 rgba(0, 0, 0, 0.6);
    --shadow-dark-md: 0 3px 5px 0 rgba(0, 0, 0, 0.7);
    --shadow-dark-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.8);
    --shadow-dark-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.9);
    --shadow-dark-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.3);

    /* Neobrute for dark mode - using light colors */
    --shadow-neobrute-light: 4px 4px 0 rgba(255, 255, 255, 0.15);
    --shadow-neobrute-light-20: 4px 4px 0 rgba(255, 255, 255, 0.2);
    --shadow-neobrute-light-40: 4px 4px 0 rgba(255, 255, 255, 0.4);

    /* Colored neobrute variants */
    --shadow-neobrute-primary: 4px 4px 0 var(--primary-500);
    --shadow-neobrute-primary-20: 4px 4px 0 var(--primary-200);

    /* Opacity */
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-40: 0.4;
    --opacity-60: 0.6;
    --opacity-80: 0.8;

    /* Border Radius */
    --radius-sm: 0.125rem;
    --radius: 0.25rem;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --radius-2xl: 1rem;
    --radius-3xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-default: 300ms ease-in-out;
    --transition-slow: 500ms ease-in-out;

    /* Z-index */
    --z-0: 0;
    --z-10: 10;
    --z-20: 20;
    --z-30: 30;
    --z-40: 40;
    --z-50: 50;
    --z-overlay: 100;
    --z-modal: 200;
    --z-popover: 300;
    --z-tooltip: 400;
}

/* ============================================================
   UTILITY CLASSES
   Helper classes for common layout and text tasks
============================================================ */

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

/* ========== TEXT HIGHLIGHTS ========== */

.highlight {
    background: var(--highlight-bg);
    color: var(--highlight-text-color);
    padding: var(--highlight-padding);
    display: var(--highlight-display);
    font-family: var(--highlight-font-family);
    font-weight: var(--highlight-font-weight);
    background-clip: var(--highlight-clip);
    -webkit-background-clip: var(--highlight-clip);
    background-size: var(--highlight-bg-size);
    animation: var(--highlight-animation);
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes shimmer {
    0% {
        background-position: 0% center;
    }
    100% {
        background-position: 200% center;
    }
}


/* ============================================================
   COMPONENT STYLES
   Reusable component definitions
============================================================ */

/* body.css */
/**
 * body.css
 */

body {
    /* Background and text color using variables */
    background: var(--body-bg-color);
    color: var(--body-color);
}

/* button.css */
/**
 * Core Button Component
 * Base styles for all buttons in the application
 * Layout-specific styles (width, margin, position) should be added at the page level
 */

/* Base Button Styles */
button {
    /* Border Radius - allows for asymmetric corners */
    border-top-left-radius: var(--button-radius-top-left);
    border-top-right-radius: var(--button-radius-top-right);
    border-bottom-right-radius: var(--button-radius-bottom-right);
    border-bottom-left-radius: var(--button-radius-bottom-left);

    /* Border & Shadow */
    border: var(--button-border-width) solid var(--button-border);
    box-shadow: var(--button-shadow);

    /* Colors */
    background-color: var(--button-bg);
    color: var(--button-text);

    /* Typography */
    font-family: var(--font-button);
    font-size: var(--button-font-size);
    text-align: center;
    white-space: nowrap;

    /* Core Button Behavior */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Remove default button styles */
    outline: none;
    text-decoration: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Hover State */
button:hover:not([disabled]) {
    background-color: var(--button-bg-hover);
    color: var(--button-text-hover);
    border-color: var(--button-border-hover);
}

/* Active/Pressed State */
button:active:not([disabled]) {
    background-color: var(--button-bg-active);
    box-shadow: var(--button-shadow-active);
}

/* Focus State (for accessibility) */
button:focus-visible {
    outline: 2px solid var(--button-focus-outline, currentColor);
    outline-offset: 2px;
}

/* Disabled State */
button[disabled] {
    background-color: var(--button-bg-disabled);
    color: var(--button-text-disabled);
    border-color: var(--button-border-disabled);
    cursor: not-allowed;
    opacity: 0.6;
}

/* data-table.css */
/* DataTable Component Styles - WITH TOTALS ROW SUPPORT
 * - Component is fully self-contained and works everywhere
 * - Uses higher specificity to prevent external overrides
 * - Fixed viewport height with sticky footer
 * - Fixed zebra striping with proper specificity
 * - Fixed sort arrows to be side-by-side
 * - Added smart column sizing
 * - Fixed responsive behavior
 * - NEW: Totals row support with proper alignment
 * - FIXED: Using DataTables.js wrapper div pattern for proper table layout
 * - UPDATED: Column widths now config-based (removed hardcoded nth-child rules)
 * - FIXED: Two-row footer structure for totals + controls
 * - NEW: Breakdown expand/collapse functionality
 * - MOBILE STYLES REMOVED (desktop only)
 * Path: /inc/framework/css/styles/leadthink-app/components/data-table.css
 */

/* ====================
   CONTAINER - VIEWPORT HEIGHT
   ==================== */

.data-table-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    /* Calculate height: 100vh - header (65px) - refresh bar (~60px) - filter bar (~75px) - page padding (~40px) */
    height: calc(100vh - 240px);
    min-height: 400px;
    overflow: hidden;
}

/* ====================
   LOADING STATE - WITH LOGO
   ==================== */

.data-table-container .table-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #65676b;
    flex: 1;
}

.data-table-container .loading-logo-large {
    width: 64px;
    height: 64px;
    display: block;
    animation: thinking-pulse 1.5s ease-in-out infinite;
    margin-bottom: 0; /* No text below, no margin needed */
}

/* Thinking pulse animation - breathe + subtle glow */
@keyframes thinking-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 0px rgba(24, 119, 242, 0));
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
        filter: drop-shadow(0 0 8px rgba(24, 119, 242, 0.6));
    }
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.data-table-container .loading-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    animation: spin 1s linear infinite;
    margin-right: 8px;
}

/* ====================
   ERROR STATE
   ==================== */

.data-table-container .table-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #721c24;
    flex: 1;
}

.data-table-container .error-message {
    font-size: 16px;
    margin-bottom: 16px;
}

.data-table-container .retry-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.data-table-container .retry-button:hover {
    background-color: #0056b3;
}

/* ====================
   EMPTY STATE
   ==================== */

.data-table-container .table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: #65676b;
    text-align: center;
    flex: 1;
}

.data-table-container .table-empty p {
    margin: 8px 0;
    font-size: 14px;
}

/* ====================
   TABLE WRAPPER - SCROLLABLE FLEX-GROW
   ==================== */

.data-table-container .table-wrapper {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    background: white;
    border-radius: 8px 8px 0 0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    -webkit-overflow-scrolling: touch;
}

/* ====================
   TABLE - WITH SMART SIZING AND FIXED LAYOUT
   ==================== */

.data-table-container .data-table,
.data-table-container .totals-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed; /* CRITICAL: Fixed layout for aligned columns */
}

/* Column widths are now set via inline styles from config - no hardcoded nth-child rules */

/* ====================
   TABLE HEADER - DATATABLES.JS WRAPPER DIV PATTERN
   ==================== */

.data-table-container .data-table thead {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
}

.data-table-container .data-table th {
    padding: 0; /* FIXED: Remove padding from th, move to wrapper */
    text-align: left;
    font-weight: 600;
    color: #050505;
    white-space: nowrap;
    position: sticky;
    top: 0;
    background-color: #f8f9fa;
    z-index: 10;
}

.data-table-container .data-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

/* FIXED: Flex wrapper inside <th> (DataTables.js pattern) */
.data-table-container .data-table th .th-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px; /* Padding moved here from <th> */
    width: 100%;
}

.data-table-container .data-table th .th-label {
    flex: 1;
    text-align: left;
}

.data-table-container .data-table th.sortable:hover {
    background-color: #e9ecef;
}

/* Sorted column highlighting */
.data-table-container .data-table th.sortable.sorted {
    background-color: #e7f3ff;
    color: #1877f2;
}

/* ====================
   SORT ARROWS - SIDE-BY-SIDE WITH PROPER ALIGNMENT
   ==================== */

.data-table-container .data-table th .sort-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
}

/* Dual arrows container for inactive columns - HORIZONTAL */
.data-table-container .data-table th .sort-arrows {
    display: inline-flex;
    flex-direction: row;
    gap: 1px; /* UPDATED: Closer together (was 2px, now 40% closer) */
    line-height: 0;
    opacity: 0.4;
}

.data-table-container .data-table th .sort-arrow-up,
.data-table-container .data-table th .sort-arrow-down {
    display: block;
    width: 12px;
    height: 12px;
}

/* Single arrow for active column */
.data-table-container .data-table th .sort-icon.active {
    opacity: 1;
}

.data-table-container .data-table th .sort-icon.active .sort-arrow {
    width: 12px; /* UPDATED: Same size as inactive arrows (was 16px) */
    height: 12px;
    display: block;
}

/* Filter for blue color on active sort arrow */
.data-table-container .data-table th.sortable.sorted .sort-icon.active .sort-arrow {
    opacity: 1;
    filter: invert(36%) sepia(93%) saturate(2543%) hue-rotate(201deg) brightness(97%) contrast(98%);
}

/* Hover effect for sort arrows */
.data-table-container .data-table th.sortable:hover .sort-arrows {
    opacity: 0.7;
}

/* ====================
   TABLE BODY - ZEBRA STRIPING (COMPONENT INDEPENDENT)
   ==================== */

/* CRITICAL: Higher specificity to prevent external CSS interference */
.data-table-container .data-table tbody tr {
    border-bottom: 1px solid #dee2e6;
    transition: background-color 0.2s;
    background-color: #ffffff !important;
}

/* Zebra striping - strong specificity with !important */
.data-table-container .data-table tbody tr.row-zebra {
    background-color: #f8f9fa !important;
}

/* Hover state - highest priority */
.data-table-container .data-table tbody tr:hover {
    background-color: #e7f3ff !important;
}

.data-table-container .data-table td {
    padding: 12px 16px;
    color: #050505;
    word-wrap: break-word;
    background-color: transparent;
}

/* Alignment classes for table cells */
.data-table-container .data-table td.align-left {
    text-align: left;
}

.data-table-container .data-table td.align-center {
    text-align: center;
}

.data-table-container .data-table td.align-right {
    text-align: right;
}

/* ====================
   URL LINKS
   ==================== */

.data-table-container .url-link {
    color: #1877f2;
    text-decoration: none;
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}

.data-table-container .url-link:hover {
    text-decoration: underline;
}

/* ====================
   BADGES
   ==================== */

.data-table-container .badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.data-table-container .badge-success {
    background-color: #d4edda;
    color: #155724;
}

.data-table-container .badge-secondary {
    background-color: #e2e3e5;
    color: #6c757d;
}

/* ====================
   CONFIG CELLS
   ==================== */

.data-table-container .config-exists {
    color: #28a745;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.data-table-container .config-exists:hover {
    color: #1e7e34;
}

.data-table-container .config-empty {
    color: #adb5bd;
}

/* ====================
   TOTALS ROW - NEW ADDITION
   ==================== */

/* Totals row wrapper - sits at top of footer */
.data-table-container .totals-row-wrapper {
    width: 100%;
    overflow-x: auto;
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa;
}

/* Totals table matches main table structure */
.data-table-container .totals-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: fixed; /* Already set above, but emphasizing */
}

/* Totals row styling */
.data-table-container .totals-row {
    background-color: #f8f9fa;
    font-weight: 600;
}

.data-table-container .totals-row th {
    padding: 12px 16px;
    border: none;
    color: #050505;
    white-space: nowrap;
}

/* Alignment classes for totals cells - matches column alignment */
.data-table-container .totals-row th.align-left {
    text-align: left;
}

.data-table-container .totals-row th.align-center {
    text-align: center;
}

.data-table-container .totals-row th.align-right {
    text-align: right;
}

/* ====================
   STICKY FOOTER - TWO ROW STRUCTURE
   ==================== */

.data-table-container .data-table-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: #ffffff;
    border-top: 2px solid #dee2e6;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
    z-index: 20;
    display: flex;
    flex-direction: column; /* Stack rows vertically */
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* Footer controls row - summary + pagination side by side */
.data-table-container .footer-controls-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    gap: 16px;
}

/* ====================
   RESULTS SUMMARY (IN FOOTER ROW 2 - LEFT SIDE)
   ==================== */

.data-table-container .results-summary {
    font-size: 14px;
    color: #050505;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ====================
   PAGINATION (IN FOOTER ROW 2 - RIGHT SIDE)
   ==================== */

.data-table-container .pagination {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.data-table-container .pagination-button {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #050505;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.data-table-container .pagination-button .pagination-icon {
    width: 14px;
    height: 14px;
    display: block;
}

.data-table-container .pagination-button:hover:not(:disabled):not(.active) {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.data-table-container .pagination-button.active {
    background-color: #1877f2;
    color: white;
    border-color: #1877f2;
}

.data-table-container .pagination-button.active .pagination-icon {
    filter: brightness(0) invert(1);
}

.data-table-container .pagination-button:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    background-color: #e9ecef;
}

.data-table-container .pagination-ellipsis {
    padding: 8px 4px;
    color: #6c757d;
}

/* ====================
   EXPAND/COLLAPSE BREAKDOWN ICONS
   ==================== */

/* First cell with expand icon - space-between layout with HIGHEST SPECIFICITY */
.data-table-container .data-table tbody tr td:first-child {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Cell content span takes available space */
.data-table-container .data-table tbody tr td:first-child .cell-content {
    flex: 1;
}

/* Expand icon positioned on the right */
.data-table-container .expand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    cursor: pointer;
    margin-left: auto;
    flex-shrink: 0;
}

.data-table-container .expand-icon img {
    width: 16px;
    height: 16px;
    display: block;
}

/* When COLLAPSED - show chevron-down (pointing down) */
.data-table-container .expand-icon .chevron-collapsed {
    display: block;
}

.data-table-container .expand-icon .chevron-expanded {
    display: none;
}

/* When EXPANDED - show chevron-up (pointing up) */
.data-table-container .expand-icon.expanded .chevron-collapsed {
    display: none;
}

.data-table-container .expand-icon.expanded .chevron-expanded {
    display: block;
}

/* Sub-row styling */
.data-table-container .sub-row {
    background-color: #f8f9fa !important;
}

.data-table-container .sub-row td {
    font-size: 13px;
    color: #65676b;
}

.data-table-container .sub-row:hover {
    background-color: #e9ecef !important;
}

.data-table-container .sub-row td:first-child {
    padding-left: 48px !important;
}

/* Hover effect */
.data-table-container .expand-icon:hover {
    opacity: 0.7;
}

/* ====================
   LOADING OVERLAY - WITH LOGO (NO TEXT)
   ==================== */

.data-table-container .table-wrapper.loading-overlay {
    position: relative;
    pointer-events: none;
    opacity: 0.6;
}

/* Logo only - no text */
.data-table-container .table-wrapper.loading-overlay::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    background-image: url('/images/logo-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: thinking-pulse 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
}

/* ====================
   SMOOTH TRANSITIONS
   ==================== */

.data-table-container .data-table tbody tr,
.data-table-container .pagination-button,
.data-table-container .table-wrapper {
    transition: all 0.2s ease;
}

/* ====================
   SCROLLBAR STYLING
   ==================== */

.data-table-container .table-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.data-table-container .table-wrapper::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.data-table-container .table-wrapper::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.data-table-container .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* date-range-picker.css */
/**
 * Date Range Picker Component Styles
 * Facebook Ads Manager style
 * FIXED: Made presets column scrollable to match calendar height
 * Path: /inc/framework/css/styles/leadthink-app/components/date-range-picker.css
 */

/* ====================
   TRIGGER BUTTON
   ==================== */

.date-range-picker {
    position: relative;
    display: inline-block;
}

.date-range-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e4e6eb;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: #050505;
}

.date-range-trigger:hover {
    background: #f0f2f5;
    border-color: #1877f2;
}

.date-range-icon {
    width: 16px;
    height: 16px;
}

.date-range-label {
    font-weight: 600;
    color: #050505;
}

.date-range-dates {
    color: #65676b;
}

.date-range-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s;
}

.date-range-trigger[aria-expanded="true"] .date-range-chevron {
    transform: rotate(180deg);
}

/* ====================
   DROPDOWN PANEL
   ==================== */

.date-range-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #dfe1e5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    min-width: 700px;
}

.date-range-content {
    display: flex;
}

/* ====================
   LEFT PANEL: PRESETS
   ==================== */

.date-range-presets {
    flex: 0 0 160px;
    padding: 12px 0;
    border-right: 1px solid #e4e6eb;
    /* ✅ FIX: Make scrollable to match calendar height */
    max-height: 304px;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ✅ FIX: Custom scrollbar styling for presets */
.date-range-presets::-webkit-scrollbar {
    width: 6px;
}

.date-range-presets::-webkit-scrollbar-track {
    background: transparent;
}

.date-range-presets::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 3px;
}

.date-range-presets::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

.preset-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.preset-item:hover {
    background: #f0f2f5;
}

.preset-item input[type="radio"] {
    margin: 0;
    margin-right: 8px;
    cursor: pointer;
}

.preset-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: #050505;
}

.preset-item input[type="radio"]:checked + label {
    font-weight: 600;
    color: #1877f2;
}

/* ====================
   MIDDLE & RIGHT: CALENDARS
   ==================== */

.date-range-calendar {
    flex: 1;
    padding: 16px;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.calendar-month-year {
    font-size: 14px;
    font-weight: 600;
    color: #050505;
}

.calendar-nav-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
}

.calendar-nav-btn:hover {
    background: #f0f2f5;
}

.calendar-nav-btn img {
    width: 16px;
    height: 16px;
}

.calendar-label {
    font-size: 12px;
    font-weight: 600;
    color: #65676b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.calendar-grid {
    width: 100%;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.calendar-weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: #65676b;
    padding: 4px 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #050505;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.calendar-day:not(.empty):hover {
    background: #f0f2f5;
}

.calendar-day.empty {
    cursor: default;
}

.calendar-day.selected {
    background: #1877f2;
    color: #fff;
    font-weight: 600;
}

.calendar-day.in-range {
    background: #e7f3ff;
}

.calendar-day.selected.in-range {
    background: #1877f2;
}

/* ====================
   FOOTER: CANCEL AND APPLY BUTTONS
   ==================== */

.date-range-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid #e4e6eb;
}

.date-range-cancel-btn {
    padding: 8px 24px;
    background: #fff;
    color: #65676b;
    border: 1px solid #e4e6eb;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.date-range-cancel-btn:hover {
    background: #f0f2f5;
    border-color: #bcc0c4;
}

.date-range-apply-btn {
    padding: 8px 24px;
    background: #1877f2;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.date-range-apply-btn:hover {
    background: #166fe5;
}

/* ====================
   RESPONSIVE
   ==================== */

@media (max-width: 768px) {
    .date-range-dropdown {
        min-width: 320px;
        right: auto;
        left: 0;
    }

    .date-range-content {
        flex-direction: column;
    }

    .date-range-presets {
        flex: none;
        border-right: none;
        border-bottom: 1px solid #e4e6eb;
        /* Mobile: Allow more height for presets */
        max-height: 250px;
    }

    .date-range-calendar {
        flex: none;
    }

    .date-range-footer {
        justify-content: stretch;
    }

    .date-range-cancel-btn,
    .date-range-apply-btn {
        flex: 1;
    }
}

/* log-display-block.css */
/* Log Display Block Component Styles - FIXED (Tailwind Variables)
 * Path: /inc/framework/css/styles/leadthink-app/components/log-display-block.css
 *
 * FIXES:
 * 1. Added TRACE badge styling
 * 2. Individual error entry collapse working properly
 * 3. Added Framework log styling
 */

/* ====================
   LOG SERVER BLOCK
   ==================== */

.log-server-block {
    background: var(--neutral-50);
    border: 1px solid var(--neutral-200);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.log-server-block:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ====================
   SERVER HEADER
   ==================== */

.log-server-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--neutral-50);
    border-bottom: 1px solid var(--neutral-200);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.log-server-header:hover {
    background: var(--neutral-100);
}

.server-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.server-icon {
    width: 24px;
    height: 24px;
    opacity: 0.7;
}

.server-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.server-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--neutral-900);
    margin: 0;
}

.server-ip {
    font-size: 13px;
    color: var(--neutral-600);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.server-stats {
    display: flex;
    align-items: center;
    gap: 16px;
}

.error-count {
    font-size: 14px;
    color: var(--neutral-600);
    font-weight: 500;
}

.error-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
}

.error-badge-warning {
    background: var(--warning-100);
    color: var(--warning-900);
}

.badge-icon {
    width: 16px;
    height: 16px;
}

.collapse-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.collapse-toggle:hover {
    background: var(--neutral-200);
}

.toggle-icon {
    width: 20px;
    height: 20px;
    transition: transform 0.3s;
}

.log-server-block.collapsed .toggle-icon {
    transform: rotate(-90deg);
}

/* ====================
   LOG CONTAINER
   ==================== */

.log-container {
    max-height: 600px;
    overflow-y: auto;
    transition: max-height 0.3s ease;
}

.log-server-block.collapsed .log-container {
    max-height: 0;
    overflow: hidden;
}

/* Custom scrollbar */
.log-container::-webkit-scrollbar {
    width: 8px;
}

.log-container::-webkit-scrollbar-track {
    background: var(--neutral-100);
}

.log-container::-webkit-scrollbar-thumb {
    background: var(--neutral-400);
    border-radius: 4px;
}

.log-container::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-500);
}

/* ====================
   ERROR ENTRY
   ==================== */

.error-entry {
    border-bottom: 1px solid var(--neutral-200);
}

.error-entry:last-child {
    border-bottom: none;
}

.error-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--neutral-100);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.error-header:hover {
    background: var(--neutral-200);
}

.error-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
}

.error-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.expand-error {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}

.expand-error:hover {
    background: var(--neutral-300);
}

.expand-icon {
    width: 16px;
    height: 16px;
    transition: transform 0.3s;
}

.error-entry.collapsed .expand-icon {
    transform: rotate(-90deg);
}

.error-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--neutral-600);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.meta-icon {
    width: 14px;
    height: 14px;
    opacity: 0.6;
}

.error-level-badge {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.error-level-notice {
    background: var(--primary-100);
    color: var(--primary-900);
}

.error-level-warning,
.error-level-warn {
    background: var(--warning-100);
    color: var(--warning-900);
}

.error-level-error,
.error-level-fatal,
.error-level-php-fatal-error {
    background: var(--failure-100);
    color: var(--failure-900);
}

/* TRACE badge styling */
.error-level-trace {
    background: var(--neutral-200);
    color: var(--neutral-700);
}

/* DEBUG badge styling (for framework logs) */
.error-level-debug {
    background: var(--primary-100);
    color: var(--primary-900);
}

/* INFO badge styling (for framework logs) */
.error-level-info {
    background: var(--success-100);
    color: var(--success-900);
}

.copy-error {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid var(--neutral-300);
    border-radius: 6px;
    color: var(--neutral-700);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.copy-error:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-400);
}

.copy-error:active {
    transform: scale(0.98);
}

.copy-error.copied {
    background: var(--success-100);
    border-color: var(--success-600);
    color: var(--success-900);
}

.copy-icon {
    width: 16px;
    height: 16px;
}

.copy-error.copied .copy-icon {
    filter: invert(36%) sepia(93%) saturate(2543%) hue-rotate(160deg);
}

/* ====================
   ERROR CONTENT (IDE THEME) - COLLAPSIBLE
   ==================== */

.error-content {
    background: #1e1e1e; /* VS Code dark background */
    padding: 16px 20px;
    max-height: 400px;
    overflow-y: auto;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

/* Collapsed state */
.error-entry.collapsed .error-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
}

.error-content pre {
    margin: 0;
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: #d4d4d4; /* VS Code default text */
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.error-content code {
    font-family: inherit;
    color: inherit;
}

/* Syntax highlighting classes - VS Code theme colors */
.log-timestamp {
    color: #4ec9b0; /* Teal - timestamps */
    font-weight: 600;
}

.log-level {
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

.log-level-notice {
    color: #4fc1ff; /* Blue */
    background: rgba(79, 193, 255, 0.15);
}

.log-level-warning {
    color: #ffd700; /* Yellow */
    background: rgba(255, 215, 0, 0.15);
}

.log-level-fatal,
.log-level-error {
    color: #f48771; /* Red */
    background: rgba(244, 135, 113, 0.15);
}

.log-filepath {
    color: #ce9178; /* Orange - file paths */
    text-decoration: underline;
    text-decoration-style: dotted;
}

.log-linenum {
    color: #b5cea8; /* Green - line numbers */
    font-weight: 600;
}

.log-stack {
    color: #9cdcfe; /* Light blue - stack trace */
    font-weight: 700;
}

.log-function {
    color: #dcdcaa; /* Yellow - function names */
    font-weight: 600;
}

/* ====================
   EMPTY / ERROR STATES
   ==================== */

.log-error-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: var(--warning-100);
    color: var(--warning-900);
}

.log-error-message .error-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.log-error-message p {
    margin: 0;
    font-size: 14px;
}

.log-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--neutral-500);
}

.log-empty p {
    margin: 0;
    font-size: 14px;
}

/* ====================
   RESPONSIVE
   ==================== */

@media (max-width: 768px) {
    .log-server-header {
        padding: 12px 16px;
    }

    .server-name {
        font-size: 15px;
    }

    .server-ip {
        font-size: 12px;
    }

    .error-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 12px 16px;
    }

    .error-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .copy-error {
        align-self: flex-end;
    }

    .error-content {
        padding: 12px 16px;
    }

    .error-content pre {
        font-size: 12px;
    }
}

/* ====================
   ANIMATIONS
   ==================== */

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.log-server-block:not(.collapsed) .log-container {
    animation: slideDown 0.3s ease;
}

/* ====================
   FRAMEWORK LOG STYLING
   ==================== */

/* Subtle blue accent for framework logs */
.log-server-block[data-log-type="framework"] .server-name {
    color: #1877f2;
}

.log-server-block[data-log-type="framework"] .server-icon {
    filter: invert(44%) sepia(96%) saturate(2593%) hue-rotate(200deg);
}

/* Framework log content styling */
.log-component {
    color: #dcdcaa;
    font-weight: 600;
}

.log-message {
    color: #d4d4d4;
}

.log-context {
    color: #ce9178;
    display: block;
    margin-top: 8px;
    padding-left: 16px;
    border-left: 2px solid #4ec9b0;
    white-space: pre-wrap;
}

.log-user {
    color: #9cdcfe;
    display: block;
    margin-top: 4px;
    font-size: 12px;
}

/* page-header-bar.css */
/**
 * Page Header Bar Component Styles
 * White card with title and controls
 * Path: /inc/framework/css/styles/leadthink-app/components/page-header-bar.css
 */

/* ====================
   CONTAINER - WHITE CARD
   ==================== */

.page-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    flex-wrap: wrap;
    gap: 16px;
}

/* ====================
   PAGE TITLE
   ==================== */

.page-title {
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    color: #050505;
}

/* ====================
   HEADER CONTROLS
   ==================== */

.header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ====================
   LAST UPDATED INFO
   ==================== */

.last-updated-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    color: #65676b;
}

.last-updated-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.last-updated-time {
    font-size: 13px;
    font-weight: 500;
    color: #050505;
}

/* ====================
   REFRESH BUTTON
   ==================== */

.refresh-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: #fff;
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 0;
}

.refresh-button:hover {
    background: #f2f3f5;
    border-color: #1877f2;
}

.refresh-button:active {
    transform: scale(0.95);
}

.refresh-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.refresh-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.refresh-button:hover .refresh-icon {
    filter: invert(36%) sepia(93%) saturate(2543%) hue-rotate(201deg) brightness(97%) contrast(98%);
}

.refresh-icon.spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ====================
   RESPONSIVE
   ==================== */

@media (max-width: 768px) {
    .page-header-bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 16px;
    }

    .page-title {
        font-size: 20px;
    }

    .header-controls {
        width: 100%;
        justify-content: space-between;
    }

    .refresh-button {
        width: 32px;
        height: 32px;
    }

    .refresh-icon {
        width: 16px;
        height: 16px;
    }
}

/* pagination.css */
/**
 * Pagination Component Styles
 * Consolidated styles for reusable pagination
 * Path: /inc/framework/css/styles/leadthink-app/components/pagination.css
 */

/* ====================
   PAGINATION WRAPPER
   ==================== */

.pagination-component {
    /* Container is hidden by default - JS controls visibility */
}

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px;
    background: white;
    gap: 16px;
    flex-wrap: wrap;
}

/* ====================
   PAGINATION SUMMARY
   ==================== */

.pagination-summary {
    font-size: 14px;
    color: #65676b;
    white-space: nowrap;
}

.pagination-summary .summary-start,
.pagination-summary .summary-end,
.pagination-summary .summary-total {
    font-weight: 600;
    color: #050505;
}

/* ====================
   PER-PAGE SELECTOR - IMPROVED
   ==================== */

.per-page-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #050505;
    white-space: nowrap;
    margin-right: 8px; /* Add space before summary if both present */
}

.per-page-selector label {
    color: #050505;
    font-weight: 500;
    font-size: 14px;
}

.per-page-select {
    /* Match pagination button styling */
    padding: 8px 32px 8px 12px;
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    background: white url('/framework/images/icons/chevron-down-mini.svg') no-repeat right 10px center;
    background-size: 16px;
    font-size: 14px;
    font-weight: 500;
    color: #050505;
    cursor: pointer;
    appearance: none;
    min-width: 75px;
    transition: all 0.2s ease;
    height: 36px; /* Match button height */
}

.per-page-select:hover {
    background-color: #f2f3f5;
    border-color: #1877f2;
}

.per-page-select:focus {
    outline: none;
    border-color: #1877f2;
    box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.1);
}

.per-page-label {
    color: #050505;
    font-weight: 500;
    font-size: 14px;
}

/* ====================
   PAGINATION CONTROLS
   ==================== */

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    color: #050505;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 36px;
}

.pagination-button:hover:not(:disabled) {
    background: #f2f3f5;
    border-color: #1877f2;
}

.pagination-button.active {
    background: #1877f2;
    border-color: #1877f2;
    color: white;
}

.pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.pagination-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.pagination-button.active .pagination-icon {
    filter: brightness(0) invert(1);
}

.pagination-ellipsis {
    padding: 0 4px;
    color: #65676b;
    font-size: 14px;
}

/* ====================
   PREV/NEXT BUTTONS
   ==================== */

.pagination-prev,
.pagination-next {
    font-weight: 600;
}

.pagination-prev .pagination-icon {
    margin-right: -2px;
}

.pagination-next .pagination-icon {
    margin-left: -2px;
}

/* ====================
   RESPONSIVE
   ==================== */

@media (max-width: 768px) {
    .pagination-wrapper {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .pagination-controls {
        width: 100%;
        justify-content: center;
    }

    .pagination-summary {
        font-size: 13px;
    }

    .pagination-button {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 32px;
    }

    .pagination-icon {
        width: 14px;
        height: 14px;
    }

    .per-page-select {
        height: 32px;
        padding: 6px 28px 6px 10px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .pagination-button {
        padding: 6px 8px;
        font-size: 12px;
    }

    /* Hide prev/next text on very small screens, keep icons */
    .pagination-prev .button-content,
    .pagination-next .button-content {
        display: none;
    }

    .pagination-prev,
    .pagination-next {
        min-width: 32px;
        padding: 6px;
    }
}

/* ====================
   STICKY PAGINATION (for tabs like Server Logs)
   ==================== */

.pagination-wrapper.sticky {
    position: sticky;
    bottom: 0;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

/* ====================
   ALTERNATIVE LAYOUT (Summary on Right)
   ==================== */

.pagination-wrapper.summary-right {
    flex-direction: row-reverse;
}

/* sidebar-nav.css */
/* Modern Sidebar Navigation Component Styles - Updated
 * Path: /inc/framework/css/styles/leadthink-app/components/sidebar-nav.css
 * Features: Desktop hover behavior, mobile tap-to-toggle, no separate button, fixed shadows
 */

/* ====================
   SIDEBAR CONTAINER
   ==================== */

.sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 70px;
    height: 100vh;
    background: var(--neutral-0, #ffffff);
    border-right: 1px solid var(--neutral-200, #e5e7eb);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width 0.3s ease, box-shadow 0.3s ease;
    box-shadow: none; /* No shadow when collapsed */
}

/* Expanded on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover {
        width: 280px;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }
}

.sidebar-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ====================
   HEADER (Logo Only)
   ==================== */

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-200, #e5e7eb);
    flex-shrink: 0;
    gap: 12px;
    min-height: 80px;
}

/* Brand (Logo + Text) */
.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    justify-content: center;
}

/* On hover, align left */
@media (min-width: 769px) {
    .sidebar-nav:hover .sidebar-brand {
        justify-content: flex-start;
    }
}

.brand-logo-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.brand-text {
    font-size: 18px;
    font-weight: 700;
    color: var(--neutral-900, #111827);
    white-space: nowrap;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, width 0.3s ease;
    display: none;
}

/* Show text on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover .brand-text {
        opacity: 1;
        width: auto;
        display: block;
    }
}

/* ====================
   NAVIGATION ITEMS
   ==================== */

.sidebar-nav-items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 0;
}

.nav-section {
    margin-bottom: 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    width: 100%;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: var(--neutral-600, #4b5563);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    position: relative;
    white-space: nowrap;
    justify-content: center;
    box-shadow: none; /* No shadow by default */
}

/* Show full layout on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-item {
        justify-content: flex-start;
        padding: 12px 20px;
    }
}

.nav-item:hover {
    background: var(--neutral-50, #f9fafb);
    color: var(--neutral-900, #1f2937);
}

.nav-item.active {
    background: var(--primary-50, #eff6ff);
    color: var(--primary-600, #1877f2);
    font-weight: 600;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-600, #1877f2);
}

/* ONLY add shadow when section is expanded AND sidebar is open */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-item.expanded {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
}

.nav-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
    margin: 0 auto;
}

/* Center icon when collapsed */
.nav-item {
    padding-left: 0;
    padding-right: 0;
}

/* On hover, icon moves to left with padding */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-icon {
        margin: 0;
    }
}

.nav-item:hover .nav-icon,
.nav-item.active .nav-icon {
    opacity: 1;
}

.nav-label {
    flex: 1;
    text-align: left;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, width 0.3s ease;
    display: none;
}

/* Show labels on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-label {
        opacity: 1;
        width: auto;
        display: block;
    }
}

.nav-arrow {
    width: 0;
    height: 16px;
    opacity: 0;
    overflow: hidden;
    transition: transform 0.3s, opacity 0.3s, width 0.3s;
    display: none;
}

/* Show arrows on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-arrow {
        opacity: 0.5;
        width: 16px;
        display: block;
    }
}

.nav-item.expanded .nav-arrow {
    transform: rotate(90deg);
}

/* Badge (for notifications) */
.nav-badge {
    display: none;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--red-500, #ef4444);
    color: var(--neutral-0, #ffffff);
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show badges on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-badge {
        display: inline-flex;
        opacity: 1;
    }
}

/* ====================
   SUBMENU
   ==================== */

.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    background: var(--neutral-50, #f9fafb);
}

.nav-submenu.expanded {
    max-height: 0;
}

/* Only show expanded submenus on hover (desktop) */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-submenu.expanded {
        max-height: 2000px;
    }
}

.nav-subitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px 10px 52px;
    color: var(--neutral-500, #6b7280);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
    opacity: 0;
}

/* Show subitems on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-subitem {
        opacity: 1;
    }
}

.nav-subitem:hover {
    background: var(--neutral-0, #ffffff);
    color: var(--neutral-900, #1f2937);
}

.nav-subitem.active {
    color: var(--primary-600, #1877f2);
    font-weight: 500;
}

/* Subgroup (for nested categories) */
.nav-subgroup {
    margin: 8px 0;
}

.nav-subgroup-label {
    padding: 8px 20px 4px 52px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--neutral-400, #9ca3af);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show subgroup labels on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-subgroup-label {
        opacity: 1;
    }
}

/* Divider */
.nav-divider {
    height: 1px;
    background: var(--neutral-200, #e5e7eb);
    margin: 8px 20px 8px 52px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show dividers on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-divider {
        opacity: 1;
    }
}

/* ====================
   FOOTER SECTION
   ==================== */

.sidebar-footer {
    border-top: 1px solid var(--neutral-200, #e5e7eb);
    padding: 8px 0;
    flex-shrink: 0;
    background: var(--neutral-25, #fafbfc);
}

.nav-item-footer {
    padding: 12px 0;
    justify-content: center;
}

/* Show full layout on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-item-footer {
        padding: 12px 20px;
        justify-content: flex-start;
    }
}

.nav-item-footer .nav-icon {
    opacity: 0.6;
}

.nav-item-footer:hover .nav-icon {
    opacity: 1;
}

/* ====================
   OVERLAY (Mobile)
   ==================== */

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    pointer-events: none;
}

.sidebar-overlay.active {
    display: block;
    pointer-events: auto;
}

/* ====================
   SCROLLBAR STYLING
   ==================== */

.sidebar-nav-items::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav-items::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav-items::-webkit-scrollbar-thumb {
    background: var(--neutral-300, #d1d5db);
    border-radius: 3px;
}

.sidebar-nav-items::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-400, #9ca3af);
}

/* ====================
   MOBILE RESPONSIVE
   ==================== */

@media (max-width: 768px) {
    /* Mobile: sidebar always visible at 70px, expands to 280px when tapped */
    .sidebar-nav {
        width: 70px;
        transition: width 0.3s ease, box-shadow 0.3s ease;
    }

    .sidebar-nav.mobile-open {
        width: 280px;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
    }

    /* Always show full content on mobile when open */
    .sidebar-nav.mobile-open .nav-label,
    .sidebar-nav.mobile-open .nav-arrow,
    .sidebar-nav.mobile-open .nav-badge,
    .sidebar-nav.mobile-open .brand-text,
    .sidebar-nav.mobile-open .nav-subitem,
    .sidebar-nav.mobile-open .nav-subgroup-label,
    .sidebar-nav.mobile-open .nav-divider {
        opacity: 1 !important;
        width: auto !important;
        overflow: visible !important;
        display: block !important;
    }

    .sidebar-nav.mobile-open .nav-badge {
        display: inline-flex !important;
    }

    .sidebar-nav.mobile-open .nav-item,
    .sidebar-nav.mobile-open .nav-item-footer {
        justify-content: flex-start !important;
        padding: 12px 20px !important;
    }

    .sidebar-nav.mobile-open .sidebar-brand {
        justify-content: flex-start !important;
    }

    .sidebar-nav.mobile-open .nav-icon {
        margin: 0 !important;
    }

    /* Show expanded submenus when mobile-open */
    .sidebar-nav.mobile-open .nav-submenu.expanded {
        max-height: 2000px;
    }

    /* Add shadow to expanded sections on mobile when open */
    .sidebar-nav.mobile-open .nav-item.expanded {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    }
}

/* ====================
   LAYOUT ADJUSTMENTS FOR PAGES
   ==================== */

/* When sidebar is present, push content right */
body.has-sidebar {
    margin-left: 70px;
    transition: margin-left 0.3s ease;
}

@media (max-width: 768px) {
    body.has-sidebar {
        margin-left: 70px; /* Keep margin on mobile since sidebar is always visible */
    }
}

/* ====================
   ANIMATIONS
   ==================== */

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.sidebar-nav.animating {
    animation: slideIn 0.3s ease;
}

.sidebar-overlay.animating {
    animation: fadeIn 0.3s ease;
}

/* ====================
   NEW BADGE STYLING
   ==================== */

/* NEW badge for updated/new reports */
.nav-subitem .new-badge {
    margin-left: 8px;
    padding: 2px 8px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    animation: subtle-pulse 2s ease-in-out infinite;
}

/* Subtle pulse animation to draw attention */
@keyframes subtle-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

/* Hide on collapsed sidebar */
.nav-subitem .new-badge {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Show on hover (desktop only) */
@media (min-width: 769px) {
    .sidebar-nav:hover .nav-subitem .new-badge {
        opacity: 1;
    }
}

/* Always show on mobile when expanded */
@media (max-width: 768px) {
    .sidebar-nav.mobile-open .nav-subitem .new-badge {
        opacity: 1 !important;
    }
}

/* Hover effect on the badge itself */
.nav-subitem:hover .new-badge {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

/* sidebar-viewer.css */
/* Sidebar Viewer Component Styles - Updated with unique class names
 * Path: /inc/framework/css/styles/leadthink-app/components/sidebar-viewer.css
 */

/* Overlay */
.sidebar-viewer-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-viewer-overlay.active {
    display: block;
    opacity: 1;
}

/* Sidebar Panel */
.sidebar-viewer-panel {
    position: fixed;
    top: 0;
    right: -500px;
    width: 500px;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.sidebar-viewer-panel.active {
    right: 0;
}

/* Sidebar Header */
.sidebar-header {
    padding: 24px;
    background-color: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-shrink: 0;
}

.sidebar-header-content {
    flex: 1;
    padding-right: 16px;
}

.sidebar-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.sidebar-subtitle {
    font-size: 13px;
    color: #3b82f6;
    margin: 4px 0 0 0;
    display: block;
    text-decoration: none;
    word-break: break-all;
}

.sidebar-subtitle:hover {
    text-decoration: underline;
}

.sidebar-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #6b7280;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.sidebar-close:hover {
    background-color: #f3f4f6;
    color: #374151;
}

/* Sidebar Body */
.sidebar-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    background-color: #fafafa;
}

/* Configuration Sections */
.config-section {
    margin-bottom: 32px;
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #e5e7eb;
}

.config-section:last-child {
    margin-bottom: 0;
}

.config-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 16px 0;
}

/* Configuration Items */
.config-item {
    margin-bottom: 20px;
}

.config-item:last-child {
    margin-bottom: 0;
}

.config-item-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.config-item-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.config-item-value {
    font-size: 13px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    color: #374151;
    background-color: #f9fafb;
    padding: 4px 8px;
    border-radius: 4px;
    display: inline-block;
}

/* Palette Preview */
.palette-grid {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 4px;
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
}

.palette-feedback {
    margin-top: 8px;
    height: 24px;
    display: none;
    text-align: center;
}

.copy-success {
    color: #10b981;
    font-size: 13px;
    font-weight: 500;
    padding: 4px 12px;
    background: #ecfdf5;
    border-radius: 4px;
    display: inline-block;
}

.color-swatch {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.color-swatch:hover {
    transform: scale(1.15);
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.swatch-label {
    font-size: 9px;
    color: white;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
    font-weight: 600;
}

/* Remove old tooltip styles */
.swatch-tooltip {
    display: none;
}

/* Font Preview */
.font-preview {
    padding: 12px;
    background: #f9fafb;
    border-radius: 6px;
}

.font-sample {
    color: #111827;
    margin-bottom: 0;
    text-align: left;
}

.font-sample-heading {
    font-size: 24px;
    font-weight: bold;
    line-height: 1.3;
}

.font-sample-body,
.font-sample-paragraph {
    font-size: 15px;
    line-height: 1.6;
}

.font-sample-strong {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.6;
}

.font-sample-button-wrapper {
    padding: 8px 0;
    text-align: left;
}

.font-sample-button {
    background: #3b82f6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.font-sample-button:hover {
    background: #2563eb;
}

/* Remove font variants display */
.font-variants {
    display: none;
}

/* Step Configuration Specific */
.step-item {
    padding: 16px;
    background: #f9fafb;
    border-radius: 6px;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    text-align: left;
}

.step-item:last-child {
    margin-bottom: 0;
}

.step-number {
    font-size: 12px;
    font-weight: 600;
    color: #3b82f6;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.step-field {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.step-field-label {
    font-weight: 500;
}

.step-field-value {
    font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
    background: #ffffff;
    padding: 2px 6px;
    border-radius: 3px;
    margin-left: 8px;
}

.step-question {
    font-size: 14px;
    color: #111827;
    line-height: 1.5;
}

/* Index Configuration Specific */
.content-preview {
    padding: 16px;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #3b82f6;
    text-align: left;
}

.content-label {
    font-size: 11px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 6px;
}

.content-text {
    font-size: 14px;
    color: #111827;
    line-height: 1.6;
    word-break: break-word;
}

.content-text-long {
    max-height: 200px;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* Nested items styling */
.content-items {
    margin-top: 12px;
}

.content-item-entry {
    padding: 12px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 8px;
    border: 1px solid #e5e7eb;
}

.content-item-entry:last-child {
    margin-bottom: 0;
}

.content-item-field {
    display: block;
    margin-bottom: 8px;
}

.content-item-field:last-child {
    margin-bottom: 0;
}

.content-item-label {
    font-weight: 600;
    color: #6b7280;
    font-size: 12px;
}

.content-item-value {
    color: #111827;
    font-size: 13px;
    margin-left: 4px;
}

.content-subsection-label {
    font-weight: 600;
    color: #374151;
    font-size: 13px;
    margin-bottom: 8px;
    margin-top: 12px;
}

.content-subsection-label:first-child {
    margin-top: 0;
}

.content-nested-field {
    display: block;
    margin-bottom: 8px;
}

.content-nested-field:last-child {
    margin-bottom: 0;
}

.content-nested-label {
    font-weight: 600;
    color: #6b7280;
    font-size: 12px;
}

.content-nested-value {
    color: #111827;
    font-size: 13px;
    margin-left: 4px;
}

.content-simple-item {
    padding: 8px 12px;
    background: #ffffff;
    border-radius: 4px;
    margin-bottom: 6px;
    border: 1px solid #e5e7eb;
    font-size: 13px;
    color: #111827;
}

.content-simple-item:last-child {
    margin-bottom: 0;
}

.content-item-title {
    font-weight: 600;
    color: #111827;
    margin-bottom: 4px;
    font-size: 14px;
}

.content-item-desc {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

/* Loading States */
.config-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #6b7280;
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-right: 12px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Empty State */
.config-empty {
    text-align: center;
    padding: 48px 24px;
    color: #6b7280;
}

.config-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 16px;
    opacity: 0.3;
}

.config-empty-text {
    font-size: 14px;
    line-height: 1.5;
}

/* Custom Scrollbar */
.sidebar-body::-webkit-scrollbar {
    width: 6px;
}

.sidebar-body::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.sidebar-body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar-viewer-panel {
        width: 100%;
        right: -100%;
    }

    .sidebar-header {
        padding: 20px;
    }

    .sidebar-body {
        padding: 20px;
    }

    .config-section {
        padding: 16px;
    }

    .palette-preview {
        padding: 8px;
    }

    .color-swatch {
        width: 32px;
        height: 32px;
    }
}

/* smart-filter-bar.css */
/* Smart Filter Bar Styles - Desktop Only
 * Facebook Ads Manager Style
 * UPDATED: Added multi-select dropdown styles
 * Path: /inc/framework/css/styles/leadthink-app/components/smart-filter-bar.css
 */

/* ====================
   FILTER BAR CONTAINER
   ==================== */

.smart-filter-bar {
    position: relative;
}

/* Filter Input Wrapper - PILL SHAPE WITH GRADIENT INNER SHADOW */
.filter-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #ccd0d5;
    border-radius: 8px;
    padding: 8px 10px;
    transition: all 0.2s;
    min-height: 50px;
    flex-wrap: nowrap;
    box-shadow: inset 0 1px 3px rgba(24, 119, 242, 0.1);
    gap: 4px;
}

.filter-input-wrapper:hover {
    border-color: #b0b3b8;
    box-shadow: inset 0 1px 4px rgba(24, 119, 242, 0.15);
}

.filter-input-wrapper:focus-within {
    border-color: #1877f2;
    box-shadow: inset 0 1px 4px rgba(24, 119, 242, 0.2), 0 0 0 2px rgba(24, 119, 242, 0.1);
}

.filter-icon {
    display: flex;
    align-items: center;
    padding: 0 10px;
    color: #65676b;
    align-self: stretch;
    flex-shrink: 0;
}

.filter-icon .search-icon-img {
    width: 16px;
    height: 16px;
    display: block;
}

/* ====================
   BASE CHIP CLASS (Shared by search-chip and filter-chip)
   ==================== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 9px;
    font-size: 13px;
    white-space: nowrap;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chip-content {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chip-remove {
    background: var(--neutral-50);
    border: none;
    cursor: pointer;
    padding: 0;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
}

.chip-remove:hover {
    background: rgba(0, 0, 0, 0.1);
}

.chip-remove .remove-icon {
    width: 12px;
    height: 12px;
    display: block;
    opacity: 0.6;
    transition: opacity 0.2s;
}

.chip-remove:hover .remove-icon {
    opacity: 1;
}

/* ====================
   SEARCH CHIP (Bordered chip with inner shadow showing current input)
   ==================== */

.search-chip {
    background: var(--primary-50);
    border: 1px solid var(--primary-100);
    box-shadow: inset 0 2px 4px 0 rgba(59, 130, 246, 0.3);
    color: #050505;
    margin-left: 0;
    min-width: 56px !important;
    width: auto;
    position: relative;
    cursor: text;
}

.search-chip .chip-content {
    min-width: 40px;
    max-width: 300px;
    display: flex;
    align-items: center;
}

/* Input inside the search chip */
.search-chip .chip-input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #050505;
    padding: 0;
    margin: 0;
    width: 100%;
    min-width: 40px;
    max-width: 280px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    cursor: text !important;
}

.search-chip .chip-input:focus {
    cursor: text !important;
}

.search-chip .chip-input::placeholder {
    color: transparent;
}

.search-chip:hover {
    box-shadow: inset 0 2px 5px 0 rgba(59, 130, 246, 0.4);
}

/* ====================
   ACTIVE FILTERS CONTAINER
   ==================== */

.active-filters-inline {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    max-width: calc(100% - 200px);
    overflow-x: auto;
    flex-shrink: 0;
}

.active-filters-inline::-webkit-scrollbar {
    height: 0;
}

/* ====================
   FILTER CHIPS (Blue chips for active filters)
   ==================== */

.filter-chip {
    background: var(--primary-50);
    border: 1px solid var(--primary-100);
    color: #050505;
    cursor: pointer;
}

.filter-chip:hover {
    background: #d0e7ff;
}

/* ====================
   MAIN FILTER INPUT
   ==================== */

.filter-input {
    flex: 1;
    border: none;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    background: transparent;
    min-width: 120px;
    width: auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #050505;
    cursor: pointer;
}

.filter-input::placeholder {
    color: #65676b;
}

/* ====================
   CLEAR FILTERS BUTTON
   ==================== */

.clear-filters {
    padding: 6px 12px;
    background: transparent;
    border: 1px solid #ccd0d5;
    border-radius: 8px;
    color: #1877f2;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    margin-left: auto;
    margin-right: 0px;
    flex-shrink: 0;
}

.clear-filters:hover {
    background: #e7f3ff;
    border-color: #1877f2;
}

/* ====================
   FILTER EDITOR (inline editing)
   ==================== */

.filter-editor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--primary-50);
    border: 2px solid var(--primary-100);
    border-radius: 8px;
    font-size: 13px;
    flex-shrink: 0;
    position: relative;
}

.filter-editor-type {
    font-weight: 600;
    color: #050505;
}

.filter-editor-operator,
.filter-editor-value {
    padding: 2px 6px;
    border: 1px solid #dfe1e5;
    border-radius: 4px;
    font-size: 13px;
    outline: none;
    background: #fff;
}

.filter-editor-operator {
    min-width: 80px;
}

.filter-editor-value {
    min-width: 100px;
    max-width: 200px;
}

.filter-editor-operator:focus,
.filter-editor-value:focus {
    border-color: #1877f2;
}

.filter-editor-operator-fixed {
    color: #65676b;
    font-size: 13px;
}

/* Currency wrapper */
.filter-editor-currency-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #dfe1e5;
    border-radius: 4px;
    padding: 2px 6px;
    background: #fff;
}

.filter-editor-currency-wrapper:focus-within {
    border-color: #1877f2;
}

.filter-editor-currency-symbol {
    color: #65676b;
    font-size: 13px;
    font-weight: 600;
}

.filter-editor-currency-wrapper .filter-editor-value {
    border: none;
    padding: 0;
    min-width: 80px;
    max-width: 180px;
}

.filter-editor-currency-wrapper .filter-editor-value:focus {
    border: none;
    box-shadow: none;
}

/* Percentage wrapper */
.filter-editor-percentage-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid #dfe1e5;
    border-radius: 4px;
    padding: 2px 6px;
    background: #fff;
}

.filter-editor-percentage-wrapper:focus-within {
    border-color: #1877f2;
}

.filter-editor-percentage-symbol {
    color: #65676b;
    font-size: 13px;
    font-weight: 600;
}

.filter-editor-percentage-wrapper .filter-editor-value {
    border: none;
    padding: 0;
    min-width: 60px;
    max-width: 100px;
}

.filter-editor-percentage-wrapper .filter-editor-value:focus {
    border: none;
    box-shadow: none;
}

.filter-editor-save,
.filter-editor-cancel {
    background: var(--neutral-50);
    border: none;
    cursor: pointer;
    padding: 0;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.filter-editor-save:hover,
.filter-editor-cancel:hover {
    background: rgba(24, 119, 242, 0.1);
}

.filter-editor-save:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.filter-editor-save:disabled:hover {
    background: transparent;
}

.filter-editor-save .editor-icon,
.filter-editor-cancel .editor-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.filter-editor-save .editor-icon {
    filter: invert(36%) sepia(93%) saturate(2543%) hue-rotate(201deg) brightness(97%) contrast(98%);
}

.filter-editor-cancel .editor-icon {
    opacity: 0.6;
}

.filter-editor-save:hover .editor-icon {
    filter: invert(24%) sepia(95%) saturate(3456%) hue-rotate(201deg) brightness(95%) contrast(98%);
}

.filter-editor-cancel:hover .editor-icon {
    opacity: 1;
}

.filter-editor-save:disabled .editor-icon {
    opacity: 0.3;
    filter: grayscale(100%);
}

.filter-editor-error {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding: 6px 10px;
    background: #721c24;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    animation: slideDown 0.2s ease;
}

.filter-editor-error:before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    border: 5px solid transparent;
    border-bottom-color: #721c24;
}

/* ====================
   NEW: MULTI-SELECT DROPDOWN
   ==================== */

.multi-select-dropdown {
    display: inline-block;
}

.multi-select-button {
    padding: 4px 12px;
    background: #fff;
    border: 1px solid #dfe1e5;
    border-radius: 4px;
    font-size: 13px;
    color: #050505;
    cursor: pointer;
    min-width: 120px;
    text-align: left;
    transition: all 0.2s;
    white-space: nowrap;
}

.multi-select-button:hover {
    border-color: #1877f2;
    background: #f8f9fa;
}

.multi-select-button:focus {
    outline: none;
    border-color: #1877f2;
    box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.1);
}

.multi-select-options {
    /* Fixed positioning set by JavaScript */
    position: fixed;
    background: #fff;
    border: 1px solid #dfe1e5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 300px;
    overflow-y: auto;
    min-width: 200px;
    z-index: 1001;
}

.multi-select-option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.15s;
    gap: 8px;
}

.multi-select-option:hover {
    background: #f2f3f5;
}

.multi-select-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin: 0;
    flex-shrink: 0;
}

.multi-select-option label {
    cursor: pointer;
    font-size: 14px;
    color: #050505;
    flex: 1;
    margin: 0;
}

/* Checkbox styling */
.multi-select-option input[type="checkbox"]:checked {
    accent-color: #1877f2;
}

/* Scrollbar for options list */
.multi-select-options::-webkit-scrollbar {
    width: 8px;
}

.multi-select-options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.multi-select-options::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.multi-select-options::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ====================
   SUGGESTIONS DROPDOWN
   ==================== */

.filter-suggestions {
    position: absolute;
    margin-top: 4px;
    background: #fff;
    border: 1px solid #dfe1e5;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1000;
}

.suggestion-group {
    padding: 8px 0;
}

.suggestion-group-header {
    padding: 12px 16px 8px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #65676b;
    letter-spacing: 0.5px;
}

.suggestion-item {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
    font-size: 15px;
    line-height: 20px;
}

.suggestion-item:hover {
    background: #f2f3f5;
}

.suggestion-item.selected {
    background: #e7f3ff;
}

.suggestion-item strong {
    color: #050505;
    font-weight: 600;
    margin-right: 4px;
}

.suggestion-item .suggestion-operator {
    color: #65676b;
    margin-right: 4px;
}

.suggestion-item .suggestion-match {
    color: #1877f2;
    font-weight: 500;
}

.suggestion-item .suggestion-highlight {
    background: #dbeafe;
    padding: 1px 2px;
    border-radius: 2px;
}

.suggestion-value {
    color: #050505;
}

/* Helper Text */
.filter-helper {
    position: absolute;
    top: -28px;
    left: 0;
    padding: 4px 8px;
    background: #050505;
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.filter-input-wrapper:focus-within .filter-helper {
    opacity: 1;
}

/* ====================
   ANIMATIONS
   ==================== */

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================
   RESPONSIVE - Minimal adjustments for smaller screens
   ==================== */

@media (max-width: 768px) {
    .filter-input-wrapper {
        font-size: 13px;
        min-height: 36px;
    }

    .chip {
        font-size: 12px;
        padding: 3px 6px;
    }

    .filter-input {
        font-size: 13px;
        padding: 6px 10px;
    }

    .clear-filters {
        font-size: 13px;
        padding: 5px 10px;
    }

    /* Allow horizontal scroll for many filters */
    .active-filters-inline {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Suggestions take full width on mobile */
    .filter-suggestions {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Multi-select dropdown adjustments */
    .multi-select-options {
        left: 50%;
        transform: translateX(-50%);
        max-width: calc(100vw - 32px);
    }

    .multi-select-button {
        min-width: 100px;
        font-size: 12px;
    }

    .multi-select-option {
        padding: 8px 10px;
    }

    .multi-select-option label {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .filter-input-wrapper {
        min-height: 34px;
    }

    .chip {
        font-size: 11px;
    }

    .filter-input {
        font-size: 12px;
        min-width: 80px;
    }
}

/* ====================
   CHIP TOOLTIP STYLES - SIMPLIFIED
   ==================== */

.chip-tooltip {
    position: fixed;
    white-space: nowrap;
    z-index: 10000;
    background: #1e3a8a; /* primary-900 dark blue */
    color: #dbeafe; /* primary-100 light blue */
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    max-width: 300px;
    animation: tooltipFadeIn 0.15s ease-out;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chip-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

/* Tooltip content wrapper */
.chip-tooltip-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px; /* Max 10 items at ~20px each */
    overflow-y: auto;
    padding-right: 4px;
}

/* Tooltip item (works for single and multi-select) */
.chip-tooltip-item {
    color: #dbeafe;
    padding: 4px 0;
    font-size: 13px;
}

/* Scrollbar styling for list */
.chip-tooltip-content::-webkit-scrollbar {
    width: 6px;
}

.chip-tooltip-content::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.chip-tooltip-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.chip-tooltip-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chip-tooltip {
        max-width: calc(100vw - 40px);
        font-size: 12px;
        padding: 6px 10px;
    }

    .chip-tooltip-item {
        font-size: 12px;
    }

    .chip-tooltip-content {
        max-height: 150px;
    }
}

/* Accessibility - ensure tooltips don't interfere with interactions */
.chip-tooltip {
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .chip-tooltip {
        animation: none;
    }
}

/* ====================
   ACCESSIBILITY
   ==================== */

@media (prefers-reduced-motion: reduce) {
    .chip,
    .filter-editor,
    .suggestion-item,
    .clear-filters,
    .filter-input-wrapper,
    .multi-select-button,
    .multi-select-option {
        animation: none;
        transition: none;
    }
}


/* ============================================================
   PAGE STYLES
   Page-specific styles and overrides
============================================================ */

/* server-log.css */
/**
 * Server Log Page Styles - TABBED VIEW (UPDATED)
 * Removed page header styles (now in page-header-bar component)
 * Path: /inc/framework/css/styles/leadthink-app/pages/server-log.css
 */

/* ====================
   TAB NAVIGATION
   ==================== */

.log-tabs-nav {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    background: #f0f2f5;
    border-bottom: 2px solid #e4e6eb;
    overflow-x: auto;
    scrollbar-width: thin;
}

.log-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    color: #65676b;
    font-size: 14px;
    font-weight: 500;
}

.log-tab:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #050505;
}

.log-tab.active {
    background: white;
    color: #1877f2;
    border-bottom-color: #1877f2;
}

.log-tab .tab-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.log-tab.active .tab-icon {
    opacity: 1;
    filter: invert(36%) sepia(93%) saturate(2543%) hue-rotate(201deg) brightness(97%) contrast(98%);
}

.log-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #e4e6eb;
    color: #65676b;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.log-tab.active .tab-badge {
    background: #e7f3ff;
    color: #1877f2;
}

.log-tab[data-log-type="framework"] .tab-name {
    color: #1877f2;
}

.log-tab[data-log-type="framework"].active {
    border-bottom-color: #1877f2;
}

/* ====================
   TAB CONTENT
   ==================== */

.log-tabs-content {
    position: relative;
    background: white;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.log-tab-content {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.log-tab-content.active {
    display: flex;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ====================
   TAB CONTENT HEADER
   ==================== */

.tab-content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e4e6eb;
}

.tab-content-header .server-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tab-content-header .server-name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #050505;
}

.tab-content-header .server-ip {
    font-size: 13px;
    color: #65676b;
}

.tab-content-header .entry-count {
    font-size: 14px;
    color: #65676b;
}

/* ====================
   LOG ENTRIES CONTAINER
   ==================== */

.log-entries-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: white;
}

.log-entries-container::-webkit-scrollbar {
    width: 8px;
}

.log-entries-container::-webkit-scrollbar-track {
    background: #f0f2f5;
}

.log-entries-container::-webkit-scrollbar-thumb {
    background: #ccd0d5;
    border-radius: 4px;
}

.log-entries-container::-webkit-scrollbar-thumb:hover {
    background: #a8adb3;
}

/* ====================
   TAB PAGINATION
   ==================== */

.tab-pagination {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: white;
    border-top: 1px solid #e4e6eb;
    gap: 16px;
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.tab-pagination .pagination-summary {
    font-size: 14px;
    color: #65676b;
    white-space: nowrap;
}

.tab-pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tab-pagination .pagination-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: white;
    border: 1px solid #ccd0d5;
    border-radius: 6px;
    color: #050505;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-pagination .pagination-button:hover:not(:disabled) {
    background: #f2f3f5;
    border-color: #1877f2;
}

.tab-pagination .pagination-button.active {
    background: #1877f2;
    border-color: #1877f2;
    color: white;
}

.tab-pagination .pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.tab-pagination .pagination-icon {
    width: 16px;
    height: 16px;
}

.tab-pagination .pagination-button.active .pagination-icon {
    filter: brightness(0) invert(1);
}

.tab-pagination .pagination-ellipsis {
    padding: 0 4px;
    color: #65676b;
}

/* ====================
   EMPTY STATES
   ==================== */

.logs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.logs-empty .empty-icon {
    width: 64px;
    height: 64px;
    opacity: 0.3;
    margin-bottom: 16px;
}

.logs-empty p {
    margin: 0;
    font-size: 16px;
    color: #65676b;
}

.log-empty {
    padding: 40px 20px;
    text-align: center;
}

.log-empty p {
    margin: 0;
    font-size: 14px;
    color: #65676b;
}

.log-error-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    background: #fff3cd;
    color: #856404;
    margin: 20px;
    border-radius: 8px;
    border: 1px solid #ffeaa7;
}

.log-error-message .error-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.log-error-message p {
    margin: 0;
    font-size: 14px;
}

/* ====================
   RESPONSIVE
   ==================== */

@media (max-width: 768px) {
    .log-tabs-nav {
        padding: 0 16px;
    }

    .log-tab {
        padding: 10px 12px;
        font-size: 13px;
    }

    .tab-content-header {
        padding: 12px 16px;
    }

    .tab-content-header .server-name {
        font-size: 14px;
    }

    .tab-pagination {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
    }

    .tab-pagination .pagination-summary {
        text-align: center;
    }

    .tab-pagination .pagination-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
}