/* ============================================================
   GENERATED CSS FILE
   Generated on: 2026-06-20 18:05:34 CDT
   Version: leadthink-app
   Primary Palette: tailwind-sky
   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-sky */
:root {
    --primary-50:  #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-200: #bae6fd;
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --primary-800: #075985;
    --primary-900: #0c4a6e;
    --primary-950: #082f49;
}

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

    /* Data table */
    --data-table-bg: var(--neutral-50);
    --data-table-text: var(--neutral-950);
    --data-table-text-muted: var(--neutral-500);
    --data-table-border: var(--neutral-200);
    --data-table-card-border: var(--neutral-300);
    --data-table-error-text: var(--failure-800);
    --data-table-retry-bg: var(--primary-500);
    --data-table-retry-bg-hover: var(--primary-700);
    --data-table-retry-text: var(--white);
    --data-table-scrollbar-track: var(--neutral-100);
    --data-table-scrollbar-thumb: var(--neutral-400);
    --data-table-scrollbar-thumb-hover: var(--neutral-600);

    /* Cell */
    --cell-header-bg: var(--neutral-50);
    --cell-header-bg-hover: var(--neutral-100);
    --cell-header-border: var(--neutral-200);
    --cell-header-text: var(--neutral-950);
    --cell-text: var(--neutral-950);
    --cell-text-muted: var(--neutral-500);
    --cell-text-faint: var(--neutral-400);
    --cell-sorted-bg: var(--primary-50);
    --cell-sorted-text: var(--primary-500);
    --cell-link: var(--primary-500);
    --cell-badge-success-bg: var(--success-100);
    --cell-badge-success-text: var(--success-800);
    --cell-badge-secondary-bg: var(--neutral-200);
    --cell-badge-secondary-text: var(--neutral-600);
    --cell-config-exists: var(--success-500);
    --cell-config-exists-hover: var(--success-700);
    --cell-config-empty: var(--neutral-400);
    --cell-negative: var(--failure-500);

    /* Row */
    --row-bg: var(--neutral-50);
    --row-bg-zebra: var(--neutral-100);
    --row-bg-hover: var(--primary-50);
    --row-border: var(--neutral-200);
    --row-sub-text: var(--neutral-500);

    /* Skeleton */
    --skeleton-base: var(--primary-200);
    --skeleton-highlight: var(--primary-100);

    /* App header bar */
    --app-header-bar-bg: var(--neutral-50);
    --app-header-bar-text: var(--neutral-950);
    --app-header-bar-divider: var(--neutral-200);

    /* Sidebar nav */
    --sidebar-nav-bg: var(--neutral-50);
    --sidebar-nav-border: var(--neutral-200);
    --sidebar-nav-text: var(--neutral-600);
    --sidebar-nav-text-strong: var(--neutral-900);
    --sidebar-nav-text-muted: var(--neutral-500);
    --sidebar-nav-text-faint: var(--neutral-400);
    --sidebar-nav-hover-bg: var(--neutral-100);
    --sidebar-nav-active-bg: var(--primary-50);
    --sidebar-nav-active-text: var(--primary-600);
    --sidebar-nav-badge-bg: var(--failure-500);
    --sidebar-nav-badge-text: var(--white);
    --sidebar-nav-scrollbar-thumb: var(--neutral-300);
    --sidebar-nav-scrollbar-thumb-hover: var(--neutral-400);
    --sidebar-nav-toggle: var(--neutral-500);
    --sidebar-nav-overlay-bg: var(--neutral-950);

    /* Pagination */
    --pagination-bg: var(--neutral-50);
    --pagination-bg-hover: var(--neutral-100);
    --pagination-bg-disabled: var(--neutral-200);
    --pagination-border: var(--neutral-200);
    --pagination-border-hover: var(--neutral-400);
    --pagination-border-focus: var(--primary-500);
    --pagination-text: var(--neutral-950);
    --pagination-text-muted: var(--neutral-500);
    --pagination-active-bg: var(--primary-500);
    --pagination-active-text: var(--white);

    /* Group by bar */
    --group-by-bar-bg: var(--neutral-50);
    --group-by-bar-bg-hover: var(--neutral-100);
    --group-by-bar-border: var(--neutral-300);
    --group-by-bar-border-hover: var(--neutral-400);
    --group-by-bar-text: var(--neutral-950);
    --group-by-bar-text-muted: var(--neutral-500);
    --group-by-bar-text-disabled: var(--neutral-400);
    --group-by-bar-option-hover-bg: var(--neutral-100);
    --group-by-bar-option-selected-bg: var(--primary-50);
    --group-by-bar-option-selected-hover-bg: var(--primary-100);
    --group-by-bar-check: var(--primary-500);

    /* Refresh button */
    --refresh-button-bg: var(--neutral-50);
    --refresh-button-bg-hover: var(--neutral-100);
    --refresh-button-border: var(--neutral-300);
    --refresh-button-border-hover: var(--primary-500);
    --refresh-button-icon: var(--neutral-500);
    --refresh-button-icon-hover: var(--primary-500);
    --refresh-button-text: var(--neutral-950);
    --refresh-button-text-muted: var(--neutral-500);

    /* Date range picker */
    --date-range-picker-surface: var(--neutral-50);
    --date-range-picker-surface-hover: var(--neutral-100);
    --date-range-picker-border: var(--neutral-200);
    --date-range-picker-border-panel: var(--neutral-300);
    --date-range-picker-border-hover: var(--neutral-400);
    --date-range-picker-text: var(--neutral-950);
    --date-range-picker-text-muted: var(--neutral-500);
    --date-range-picker-text-disabled: var(--neutral-400);
    --date-range-picker-placeholder: var(--neutral-400);
    --date-range-picker-icon: var(--neutral-500);
    --date-range-picker-accent: var(--primary-500);
    --date-range-picker-accent-hover: var(--primary-600);
    --date-range-picker-range-bg: var(--primary-50);
    --date-range-picker-range-hover-bg: var(--primary-200);
    --date-range-picker-scrollbar: var(--neutral-300);
    --date-range-picker-scrollbar-hover: var(--neutral-400);
    --date-range-picker-warning-bg: warning-100;
    --date-range-picker-warning-icon: warning-600;
    --date-range-picker-error: var(--failure-500);

    /* Smart filter bar */
    --smart-filter-bar-surface: var(--white);
    --smart-filter-bar-text: var(--neutral-950);
    --smart-filter-bar-text-muted: var(--neutral-500);
    --smart-filter-bar-border: var(--neutral-200);
    --smart-filter-bar-border-strong: var(--neutral-300);
    --smart-filter-bar-border-hover: var(--neutral-400);
    --smart-filter-bar-control-bg: var(--neutral-50);
    --smart-filter-bar-surface-hover: var(--neutral-100);
    --smart-filter-bar-accent: var(--primary-500);
    --smart-filter-bar-accent-bg: var(--primary-50);
    --smart-filter-bar-accent-pale: var(--primary-100);
    --smart-filter-bar-scrollbar: var(--neutral-400);
    --smart-filter-bar-scrollbar-hover: var(--neutral-500);
    --smart-filter-bar-error-bg: var(--failure-800);
    --smart-filter-bar-warning-icon: var(--failure-600);
    --smart-filter-bar-tooltip-bg: var(--primary-900);
    --smart-filter-bar-invalid-bg: var(--failure-50);
    --smart-filter-bar-invalid-text: var(--failure-700);
    --smart-filter-bar-invalid-border: var(--failure-200);

    /* Select */
    --select-surface: var(--white);
    --select-text: var(--neutral-950);
    --select-border: var(--neutral-300);
    --select-border-hover: var(--neutral-400);
    --select-arrow: var(--neutral-500);
    --select-accent: var(--primary-500);
    --select-disabled-bg: var(--neutral-100);
    --select-disabled-text: var(--neutral-400);

    /* Framework log service */
    --framework-log-service-surface: var(--neutral-50);
    --framework-log-service-surface-raised: var(--neutral-100);
    --framework-log-service-surface-hover: var(--neutral-100);
    --framework-log-service-text: var(--neutral-950);
    --framework-log-service-text-muted: var(--neutral-500);
    --framework-log-service-text-faint: var(--neutral-400);
    --framework-log-service-border: var(--neutral-200);
    --framework-log-service-border-strong: var(--neutral-300);
    --framework-log-service-backdrop: color-mix(in srgb, var(--primary-900) 50%, transparent);
    --framework-log-service-accent: var(--primary-500);
    --framework-log-service-accent-bg: var(--primary-50);
    --framework-log-service-scrollbar: var(--neutral-400);
    --framework-log-service-scrollbar-hover: var(--neutral-500);
    --framework-log-service-pill-muted-bg: var(--neutral-100);
    --framework-log-service-pill-muted-text: var(--neutral-600);
    --framework-log-service-pill-info-bg: var(--success-200);
    --framework-log-service-pill-info-text: var(--success-700);
    --framework-log-service-pill-warn-bg: warning-200;
    --framework-log-service-pill-warn-text: warning-800;
    --framework-log-service-pill-error-bg: var(--failure-200);
    --framework-log-service-pill-error-text: var(--failure-700);
    --framework-log-service-pill-time-bg: var(--primary-200);
    --framework-log-service-pill-time-text: var(--primary-700);
    --framework-log-service-pill-active-bg: var(--primary-500);
    --framework-log-service-pill-active-text: var(--white);
    --framework-log-service-pill-info-solid-bg: var(--success-600);
    --framework-log-service-pill-warn-solid-bg: warning-700;
    --framework-log-service-pill-error-solid-bg: var(--failure-600);
    --framework-log-service-pill-solid-text: var(--white);
    --framework-log-service-pill-all-bg: var(--neutral-200);
    --framework-log-service-pill-all-text: var(--neutral-800);
    --framework-log-service-pill-all-solid-bg: var(--neutral-800);
    --framework-log-service-pill-time-solid-bg: var(--primary-600);


}

/* ============================================================
   THEME OVERRIDES
   Scoped variable blocks selected by the data-theme attribute
============================================================ */

:root[data-theme="dark"] {
    /* Body */
    --body-bg-color: var(--neutral-950);
    --body-color: var(--neutral-100);

    /* Button */
    --button-bg: var(--primary-500);
    --button-bg-hover: var(--primary-400);
    --button-bg-active: var(--primary-500);
    --button-bg-disabled: var(--neutral-800);
    --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-400);
    --button-border-disabled: var(--neutral-800);

    /* Data table */
    --data-table-bg: var(--neutral-900);
    --data-table-text: var(--neutral-50);
    --data-table-text-muted: var(--neutral-400);
    --data-table-border: var(--neutral-700);
    --data-table-card-border: var(--neutral-600);
    --data-table-error-text: var(--failure-400);
    --data-table-retry-bg: var(--primary-500);
    --data-table-retry-bg-hover: var(--primary-400);
    --data-table-retry-text: var(--white);
    --data-table-scrollbar-track: var(--neutral-800);
    --data-table-scrollbar-thumb: var(--neutral-600);
    --data-table-scrollbar-thumb-hover: var(--neutral-500);

    /* Cell */
    --cell-header-bg: var(--neutral-900);
    --cell-header-bg-hover: var(--neutral-800);
    --cell-header-border: var(--neutral-700);
    --cell-header-text: var(--neutral-50);
    --cell-text: var(--neutral-50);
    --cell-text-muted: var(--neutral-400);
    --cell-text-faint: var(--neutral-500);
    --cell-sorted-bg: var(--primary-950);
    --cell-sorted-text: var(--primary-400);
    --cell-link: var(--primary-400);
    --cell-badge-success-bg: var(--success-900);
    --cell-badge-success-text: var(--success-300);
    --cell-badge-secondary-bg: var(--neutral-700);
    --cell-badge-secondary-text: var(--neutral-300);
    --cell-config-exists: var(--success-500);
    --cell-config-exists-hover: var(--success-400);
    --cell-config-empty: var(--neutral-500);
    --cell-negative: var(--failure-400);

    /* Row */
    --row-bg: var(--neutral-900);
    --row-bg-zebra: var(--neutral-800);
    --row-bg-hover: var(--primary-950);
    --row-border: var(--neutral-700);
    --row-sub-text: var(--neutral-400);

    /* Skeleton */
    --skeleton-base: var(--primary-800);
    --skeleton-highlight: var(--primary-700);

    /* App header bar */
    --app-header-bar-bg: var(--neutral-900);
    --app-header-bar-text: var(--neutral-50);
    --app-header-bar-divider: var(--neutral-700);

    /* Sidebar nav */
    --sidebar-nav-bg: var(--neutral-900);
    --sidebar-nav-border: var(--neutral-700);
    --sidebar-nav-text: var(--neutral-300);
    --sidebar-nav-text-strong: var(--neutral-50);
    --sidebar-nav-text-muted: var(--neutral-400);
    --sidebar-nav-text-faint: var(--neutral-500);
    --sidebar-nav-hover-bg: var(--neutral-800);
    --sidebar-nav-active-bg: var(--primary-950);
    --sidebar-nav-active-text: var(--primary-400);
    --sidebar-nav-badge-bg: var(--failure-500);
    --sidebar-nav-badge-text: var(--white);
    --sidebar-nav-scrollbar-thumb: var(--neutral-600);
    --sidebar-nav-scrollbar-thumb-hover: var(--neutral-500);
    --sidebar-nav-toggle: var(--neutral-400);
    --sidebar-nav-overlay-bg: var(--neutral-950);

    /* Pagination */
    --pagination-bg: var(--neutral-900);
    --pagination-bg-hover: var(--neutral-800);
    --pagination-bg-disabled: var(--neutral-800);
    --pagination-border: var(--neutral-700);
    --pagination-border-hover: var(--neutral-500);
    --pagination-border-focus: var(--primary-400);
    --pagination-text: var(--neutral-50);
    --pagination-text-muted: var(--neutral-400);
    --pagination-active-bg: var(--primary-500);
    --pagination-active-text: var(--white);

    /* Group by bar */
    --group-by-bar-bg: var(--neutral-900);
    --group-by-bar-bg-hover: var(--neutral-800);
    --group-by-bar-border: var(--neutral-600);
    --group-by-bar-border-hover: var(--neutral-500);
    --group-by-bar-text: var(--neutral-50);
    --group-by-bar-text-muted: var(--neutral-400);
    --group-by-bar-text-disabled: var(--neutral-500);
    --group-by-bar-option-hover-bg: var(--neutral-800);
    --group-by-bar-option-selected-bg: var(--primary-950);
    --group-by-bar-option-selected-hover-bg: var(--primary-900);
    --group-by-bar-check: var(--primary-400);

    /* Refresh button */
    --refresh-button-bg: var(--neutral-900);
    --refresh-button-bg-hover: var(--neutral-800);
    --refresh-button-border: var(--neutral-600);
    --refresh-button-border-hover: var(--primary-400);
    --refresh-button-icon: var(--neutral-400);
    --refresh-button-icon-hover: var(--primary-400);
    --refresh-button-text: var(--neutral-50);
    --refresh-button-text-muted: var(--neutral-400);

    /* Date range picker */
    --date-range-picker-surface: var(--neutral-900);
    --date-range-picker-surface-hover: var(--neutral-800);
    --date-range-picker-border: var(--neutral-700);
    --date-range-picker-border-panel: var(--neutral-600);
    --date-range-picker-border-hover: var(--neutral-500);
    --date-range-picker-text: var(--neutral-50);
    --date-range-picker-text-muted: var(--neutral-400);
    --date-range-picker-text-disabled: var(--neutral-500);
    --date-range-picker-placeholder: var(--neutral-500);
    --date-range-picker-icon: var(--neutral-400);
    --date-range-picker-accent: var(--primary-400);
    --date-range-picker-accent-hover: var(--primary-300);
    --date-range-picker-range-bg: var(--primary-950);
    --date-range-picker-range-hover-bg: var(--primary-800);
    --date-range-picker-scrollbar: var(--neutral-600);
    --date-range-picker-scrollbar-hover: var(--neutral-500);
    --date-range-picker-warning-bg: warning-900;
    --date-range-picker-warning-icon: warning-400;
    --date-range-picker-error: var(--failure-400);

    /* Smart filter bar */
    --smart-filter-bar-surface: var(--neutral-900);
    --smart-filter-bar-text: var(--neutral-50);
    --smart-filter-bar-text-muted: var(--neutral-400);
    --smart-filter-bar-border: var(--neutral-700);
    --smart-filter-bar-border-strong: var(--neutral-600);
    --smart-filter-bar-border-hover: var(--neutral-500);
    --smart-filter-bar-control-bg: var(--neutral-800);
    --smart-filter-bar-surface-hover: var(--neutral-800);
    --smart-filter-bar-accent: var(--primary-400);
    --smart-filter-bar-accent-bg: var(--primary-950);
    --smart-filter-bar-accent-pale: var(--primary-900);
    --smart-filter-bar-scrollbar: var(--neutral-600);
    --smart-filter-bar-scrollbar-hover: var(--neutral-500);
    --smart-filter-bar-warning-icon: var(--failure-400);
    --smart-filter-bar-invalid-bg: var(--failure-950);
    --smart-filter-bar-invalid-text: var(--failure-300);
    --smart-filter-bar-invalid-border: var(--failure-800);

    /* Select */
    --select-surface: var(--neutral-900);
    --select-text: var(--neutral-50);
    --select-border: var(--neutral-600);
    --select-border-hover: var(--neutral-500);
    --select-arrow: var(--neutral-400);
    --select-accent: var(--primary-400);
    --select-disabled-bg: var(--neutral-800);
    --select-disabled-text: var(--neutral-500);

    /* Framework log service */
    --framework-log-service-surface: var(--neutral-900);
    --framework-log-service-surface-raised: var(--neutral-800);
    --framework-log-service-surface-hover: var(--neutral-800);
    --framework-log-service-text: var(--neutral-50);
    --framework-log-service-text-muted: var(--neutral-400);
    --framework-log-service-text-faint: var(--neutral-500);
    --framework-log-service-border: var(--neutral-700);
    --framework-log-service-border-strong: var(--neutral-600);
    --framework-log-service-backdrop: color-mix(in srgb, var(--primary-900) 65%, transparent);


}

/* ============================================================
   ACCENT PALETTES
   Scoped --primary-* blocks selected by the data-accent attribute
============================================================ */

/* Primary Palette: tailwind-amber */
:root[data-accent="tailwind-amber"] {
    --primary-50:  #fffbeb;
    --primary-100: #fef3c7;
    --primary-200: #fde68a;
    --primary-300: #fcd34d;
    --primary-400: #fbbf24;
    --primary-500: #f59e0b;
    --primary-600: #d97706;
    --primary-700: #b45309;
    --primary-800: #92400e;
    --primary-900: #78350f;
    --primary-950: #451a03;
}

/* Primary Palette: tailwind-blue */
:root[data-accent="tailwind-blue"] {
    --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;
}

/* Primary Palette: tailwind-cyan */
:root[data-accent="tailwind-cyan"] {
    --primary-50:  #ecfeff;
    --primary-100: #cffafe;
    --primary-200: #a5f3fc;
    --primary-300: #67e8f9;
    --primary-400: #22d3ee;
    --primary-500: #06b6d4;
    --primary-600: #0891b2;
    --primary-700: #0e7490;
    --primary-800: #155e75;
    --primary-900: #164e63;
    --primary-950: #083344;
}

/* Primary Palette: tailwind-emerald */
:root[data-accent="tailwind-emerald"] {
    --primary-50:  #ecfdf5;
    --primary-100: #d1fae5;
    --primary-200: #a7f3d0;
    --primary-300: #6ee7b7;
    --primary-400: #34d399;
    --primary-500: #10b981;
    --primary-600: #059669;
    --primary-700: #047857;
    --primary-800: #065f46;
    --primary-900: #064e3b;
    --primary-950: #022c22;
}

/* Primary Palette: tailwind-fuchsia */
:root[data-accent="tailwind-fuchsia"] {
    --primary-50:  #fdf4ff;
    --primary-100: #fae8ff;
    --primary-200: #f5d0fe;
    --primary-300: #f0abfc;
    --primary-400: #e879f9;
    --primary-500: #d946ef;
    --primary-600: #c026d3;
    --primary-700: #a21caf;
    --primary-800: #86198f;
    --primary-900: #701a75;
    --primary-950: #4a044e;
}

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

/* Primary Palette: tailwind-indigo */
:root[data-accent="tailwind-indigo"] {
    --primary-50:  #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #3730a3;
    --primary-900: #312e81;
    --primary-950: #1e1b4b;
}

/* Primary Palette: tailwind-lime */
:root[data-accent="tailwind-lime"] {
    --primary-50:  #f7fee7;
    --primary-100: #ecfccb;
    --primary-200: #d9f99d;
    --primary-300: #bef264;
    --primary-400: #a3e635;
    --primary-500: #84cc16;
    --primary-600: #65a30d;
    --primary-700: #4d7c0f;
    --primary-800: #3f6212;
    --primary-900: #365314;
    --primary-950: #1a2e05;
}

/* Primary Palette: tailwind-orange */
:root[data-accent="tailwind-orange"] {
    --primary-50:  #fff7ed;
    --primary-100: #ffedd5;
    --primary-200: #fed7aa;
    --primary-300: #fdba74;
    --primary-400: #fb923c;
    --primary-500: #f97316;
    --primary-600: #ea580c;
    --primary-700: #c2410c;
    --primary-800: #9a3412;
    --primary-900: #7c2d12;
    --primary-950: #431407;
}

/* Primary Palette: tailwind-pink */
:root[data-accent="tailwind-pink"] {
    --primary-50:  #fdf2f8;
    --primary-100: #fce7f3;
    --primary-200: #fbcfe8;
    --primary-300: #f9a8d4;
    --primary-400: #f472b6;
    --primary-500: #ec4899;
    --primary-600: #db2777;
    --primary-700: #be185d;
    --primary-800: #9d174d;
    --primary-900: #831843;
    --primary-950: #500724;
}

/* Primary Palette: tailwind-purple */
:root[data-accent="tailwind-purple"] {
    --primary-50:  #faf5ff;
    --primary-100: #f3e8ff;
    --primary-200: #e9d5ff;
    --primary-300: #d8b4fe;
    --primary-400: #c084fc;
    --primary-500: #a855f7;
    --primary-600: #9333ea;
    --primary-700: #7e22ce;
    --primary-800: #6b21a8;
    --primary-900: #581c87;
    --primary-950: #3b0764;
}

/* Primary Palette: tailwind-red */
:root[data-accent="tailwind-red"] {
    --primary-50:  #fef2f2;
    --primary-100: #fee2e2;
    --primary-200: #fecaca;
    --primary-300: #fca5a5;
    --primary-400: #f87171;
    --primary-500: #ef4444;
    --primary-600: #dc2626;
    --primary-700: #b91c1c;
    --primary-800: #991b1b;
    --primary-900: #7f1d1d;
    --primary-950: #450a0a;
}

/* Primary Palette: tailwind-rose */
:root[data-accent="tailwind-rose"] {
    --primary-50:  #fff1f2;
    --primary-100: #ffe4e6;
    --primary-200: #fecdd3;
    --primary-300: #fda4af;
    --primary-400: #fb7185;
    --primary-500: #f43f5e;
    --primary-600: #e11d48;
    --primary-700: #be123c;
    --primary-800: #9f1239;
    --primary-900: #881337;
    --primary-950: #4c0519;
}

/* Primary Palette: tailwind-sky */
:root[data-accent="tailwind-sky"] {
    --primary-50:  #f0f9ff;
    --primary-100: #e0f2fe;
    --primary-200: #bae6fd;
    --primary-300: #7dd3fc;
    --primary-400: #38bdf8;
    --primary-500: #0ea5e9;
    --primary-600: #0284c7;
    --primary-700: #0369a1;
    --primary-800: #075985;
    --primary-900: #0c4a6e;
    --primary-950: #082f49;
}

/* Primary Palette: tailwind-teal */
:root[data-accent="tailwind-teal"] {
    --primary-50:  #f0fdfa;
    --primary-100: #ccfbf1;
    --primary-200: #99f6e4;
    --primary-300: #5eead4;
    --primary-400: #2dd4bf;
    --primary-500: #14b8a6;
    --primary-600: #0d9488;
    --primary-700: #0f766e;
    --primary-800: #115e59;
    --primary-900: #134e4a;
    --primary-950: #042f2e;
}

/* Primary Palette: tailwind-violet */
:root[data-accent="tailwind-violet"] {
    --primary-50:  #f5f3ff;
    --primary-100: #ede9fe;
    --primary-200: #ddd6fe;
    --primary-300: #c4b5fd;
    --primary-400: #a78bfa;
    --primary-500: #8b5cf6;
    --primary-600: #7c3aed;
    --primary-700: #6d28d9;
    --primary-800: #5b21b6;
    --primary-900: #4c1d95;
    --primary-950: #2e1065;
}

/* Primary Palette: tailwind-yellow */
:root[data-accent="tailwind-yellow"] {
    --primary-50:  #fefce8;
    --primary-100: #fef9c3;
    --primary-200: #fef08a;
    --primary-300: #fde047;
    --primary-400: #facc15;
    --primary-500: #eab308;
    --primary-600: #ca8a04;
    --primary-700: #a16207;
    --primary-800: #854d0e;
    --primary-900: #713f12;
    --primary-950: #422006;
}

/* ============================================================
   SURFACE PALETTES
   Scoped --neutral-* blocks selected by the data-surface attribute
============================================================ */

/* Neutral Palette: tailwind-gray */
:root[data-surface="tailwind-gray"] {
    --neutral-50:  #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;
}

/* Neutral Palette: tailwind-neutral */
:root[data-surface="tailwind-neutral"] {
    --neutral-50:  #fafafa;
    --neutral-100: #f5f5f5;
    --neutral-200: #e5e5e5;
    --neutral-300: #d4d4d4;
    --neutral-400: #a3a3a3;
    --neutral-500: #737373;
    --neutral-600: #525252;
    --neutral-700: #404040;
    --neutral-800: #262626;
    --neutral-900: #171717;
    --neutral-950: #0a0a0a;
}

/* Neutral Palette: tailwind-slate */
:root[data-surface="tailwind-slate"] {
    --neutral-50:  #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    --neutral-950: #020617;
}

/* Neutral Palette: tailwind-stone */
:root[data-surface="tailwind-stone"] {
    --neutral-50:  #fafaf9;
    --neutral-100: #f5f5f4;
    --neutral-200: #e7e5e4;
    --neutral-300: #d6d3d1;
    --neutral-400: #a8a29e;
    --neutral-500: #78716c;
    --neutral-600: #57534e;
    --neutral-700: #44403c;
    --neutral-800: #292524;
    --neutral-900: #1c1917;
    --neutral-950: #0c0a09;
}

/* Neutral Palette: tailwind-zinc */
:root[data-surface="tailwind-zinc"] {
    --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;
}

/* ============================================================
   PALETTE CATALOG
   Flat, always-on copy of every palette ramp for JS to read as
   var(--palette-<name>-<step>). Intentionally duplicates the
   data-accent ramps (same hexes, different job) - do not dedupe.
   The two name lists let a consumer scope itself to colours or
   neutrals; the ramps carry both.
============================================================ */

:root {
	--palette-color-names: tailwind-amber tailwind-blue tailwind-cyan tailwind-emerald tailwind-fuchsia tailwind-green tailwind-indigo tailwind-lime tailwind-orange tailwind-pink tailwind-purple tailwind-red tailwind-rose tailwind-sky tailwind-teal tailwind-violet tailwind-yellow;
	--palette-neutral-names: tailwind-gray tailwind-neutral tailwind-slate tailwind-stone tailwind-zinc;
}

/* Palette-tailwind-amber Palette: tailwind-amber */
:root {
    --palette-tailwind-amber-50:  #fffbeb;
    --palette-tailwind-amber-100: #fef3c7;
    --palette-tailwind-amber-200: #fde68a;
    --palette-tailwind-amber-300: #fcd34d;
    --palette-tailwind-amber-400: #fbbf24;
    --palette-tailwind-amber-500: #f59e0b;
    --palette-tailwind-amber-600: #d97706;
    --palette-tailwind-amber-700: #b45309;
    --palette-tailwind-amber-800: #92400e;
    --palette-tailwind-amber-900: #78350f;
    --palette-tailwind-amber-950: #451a03;
}

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

/* Palette-tailwind-cyan Palette: tailwind-cyan */
:root {
    --palette-tailwind-cyan-50:  #ecfeff;
    --palette-tailwind-cyan-100: #cffafe;
    --palette-tailwind-cyan-200: #a5f3fc;
    --palette-tailwind-cyan-300: #67e8f9;
    --palette-tailwind-cyan-400: #22d3ee;
    --palette-tailwind-cyan-500: #06b6d4;
    --palette-tailwind-cyan-600: #0891b2;
    --palette-tailwind-cyan-700: #0e7490;
    --palette-tailwind-cyan-800: #155e75;
    --palette-tailwind-cyan-900: #164e63;
    --palette-tailwind-cyan-950: #083344;
}

/* Palette-tailwind-emerald Palette: tailwind-emerald */
:root {
    --palette-tailwind-emerald-50:  #ecfdf5;
    --palette-tailwind-emerald-100: #d1fae5;
    --palette-tailwind-emerald-200: #a7f3d0;
    --palette-tailwind-emerald-300: #6ee7b7;
    --palette-tailwind-emerald-400: #34d399;
    --palette-tailwind-emerald-500: #10b981;
    --palette-tailwind-emerald-600: #059669;
    --palette-tailwind-emerald-700: #047857;
    --palette-tailwind-emerald-800: #065f46;
    --palette-tailwind-emerald-900: #064e3b;
    --palette-tailwind-emerald-950: #022c22;
}

/* Palette-tailwind-fuchsia Palette: tailwind-fuchsia */
:root {
    --palette-tailwind-fuchsia-50:  #fdf4ff;
    --palette-tailwind-fuchsia-100: #fae8ff;
    --palette-tailwind-fuchsia-200: #f5d0fe;
    --palette-tailwind-fuchsia-300: #f0abfc;
    --palette-tailwind-fuchsia-400: #e879f9;
    --palette-tailwind-fuchsia-500: #d946ef;
    --palette-tailwind-fuchsia-600: #c026d3;
    --palette-tailwind-fuchsia-700: #a21caf;
    --palette-tailwind-fuchsia-800: #86198f;
    --palette-tailwind-fuchsia-900: #701a75;
    --palette-tailwind-fuchsia-950: #4a044e;
}

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

/* Palette-tailwind-indigo Palette: tailwind-indigo */
:root {
    --palette-tailwind-indigo-50:  #eef2ff;
    --palette-tailwind-indigo-100: #e0e7ff;
    --palette-tailwind-indigo-200: #c7d2fe;
    --palette-tailwind-indigo-300: #a5b4fc;
    --palette-tailwind-indigo-400: #818cf8;
    --palette-tailwind-indigo-500: #6366f1;
    --palette-tailwind-indigo-600: #4f46e5;
    --palette-tailwind-indigo-700: #4338ca;
    --palette-tailwind-indigo-800: #3730a3;
    --palette-tailwind-indigo-900: #312e81;
    --palette-tailwind-indigo-950: #1e1b4b;
}

/* Palette-tailwind-lime Palette: tailwind-lime */
:root {
    --palette-tailwind-lime-50:  #f7fee7;
    --palette-tailwind-lime-100: #ecfccb;
    --palette-tailwind-lime-200: #d9f99d;
    --palette-tailwind-lime-300: #bef264;
    --palette-tailwind-lime-400: #a3e635;
    --palette-tailwind-lime-500: #84cc16;
    --palette-tailwind-lime-600: #65a30d;
    --palette-tailwind-lime-700: #4d7c0f;
    --palette-tailwind-lime-800: #3f6212;
    --palette-tailwind-lime-900: #365314;
    --palette-tailwind-lime-950: #1a2e05;
}

/* Palette-tailwind-orange Palette: tailwind-orange */
:root {
    --palette-tailwind-orange-50:  #fff7ed;
    --palette-tailwind-orange-100: #ffedd5;
    --palette-tailwind-orange-200: #fed7aa;
    --palette-tailwind-orange-300: #fdba74;
    --palette-tailwind-orange-400: #fb923c;
    --palette-tailwind-orange-500: #f97316;
    --palette-tailwind-orange-600: #ea580c;
    --palette-tailwind-orange-700: #c2410c;
    --palette-tailwind-orange-800: #9a3412;
    --palette-tailwind-orange-900: #7c2d12;
    --palette-tailwind-orange-950: #431407;
}

/* Palette-tailwind-pink Palette: tailwind-pink */
:root {
    --palette-tailwind-pink-50:  #fdf2f8;
    --palette-tailwind-pink-100: #fce7f3;
    --palette-tailwind-pink-200: #fbcfe8;
    --palette-tailwind-pink-300: #f9a8d4;
    --palette-tailwind-pink-400: #f472b6;
    --palette-tailwind-pink-500: #ec4899;
    --palette-tailwind-pink-600: #db2777;
    --palette-tailwind-pink-700: #be185d;
    --palette-tailwind-pink-800: #9d174d;
    --palette-tailwind-pink-900: #831843;
    --palette-tailwind-pink-950: #500724;
}

/* Palette-tailwind-purple Palette: tailwind-purple */
:root {
    --palette-tailwind-purple-50:  #faf5ff;
    --palette-tailwind-purple-100: #f3e8ff;
    --palette-tailwind-purple-200: #e9d5ff;
    --palette-tailwind-purple-300: #d8b4fe;
    --palette-tailwind-purple-400: #c084fc;
    --palette-tailwind-purple-500: #a855f7;
    --palette-tailwind-purple-600: #9333ea;
    --palette-tailwind-purple-700: #7e22ce;
    --palette-tailwind-purple-800: #6b21a8;
    --palette-tailwind-purple-900: #581c87;
    --palette-tailwind-purple-950: #3b0764;
}

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

/* Palette-tailwind-rose Palette: tailwind-rose */
:root {
    --palette-tailwind-rose-50:  #fff1f2;
    --palette-tailwind-rose-100: #ffe4e6;
    --palette-tailwind-rose-200: #fecdd3;
    --palette-tailwind-rose-300: #fda4af;
    --palette-tailwind-rose-400: #fb7185;
    --palette-tailwind-rose-500: #f43f5e;
    --palette-tailwind-rose-600: #e11d48;
    --palette-tailwind-rose-700: #be123c;
    --palette-tailwind-rose-800: #9f1239;
    --palette-tailwind-rose-900: #881337;
    --palette-tailwind-rose-950: #4c0519;
}

/* Palette-tailwind-sky Palette: tailwind-sky */
:root {
    --palette-tailwind-sky-50:  #f0f9ff;
    --palette-tailwind-sky-100: #e0f2fe;
    --palette-tailwind-sky-200: #bae6fd;
    --palette-tailwind-sky-300: #7dd3fc;
    --palette-tailwind-sky-400: #38bdf8;
    --palette-tailwind-sky-500: #0ea5e9;
    --palette-tailwind-sky-600: #0284c7;
    --palette-tailwind-sky-700: #0369a1;
    --palette-tailwind-sky-800: #075985;
    --palette-tailwind-sky-900: #0c4a6e;
    --palette-tailwind-sky-950: #082f49;
}

/* Palette-tailwind-teal Palette: tailwind-teal */
:root {
    --palette-tailwind-teal-50:  #f0fdfa;
    --palette-tailwind-teal-100: #ccfbf1;
    --palette-tailwind-teal-200: #99f6e4;
    --palette-tailwind-teal-300: #5eead4;
    --palette-tailwind-teal-400: #2dd4bf;
    --palette-tailwind-teal-500: #14b8a6;
    --palette-tailwind-teal-600: #0d9488;
    --palette-tailwind-teal-700: #0f766e;
    --palette-tailwind-teal-800: #115e59;
    --palette-tailwind-teal-900: #134e4a;
    --palette-tailwind-teal-950: #042f2e;
}

/* Palette-tailwind-violet Palette: tailwind-violet */
:root {
    --palette-tailwind-violet-50:  #f5f3ff;
    --palette-tailwind-violet-100: #ede9fe;
    --palette-tailwind-violet-200: #ddd6fe;
    --palette-tailwind-violet-300: #c4b5fd;
    --palette-tailwind-violet-400: #a78bfa;
    --palette-tailwind-violet-500: #8b5cf6;
    --palette-tailwind-violet-600: #7c3aed;
    --palette-tailwind-violet-700: #6d28d9;
    --palette-tailwind-violet-800: #5b21b6;
    --palette-tailwind-violet-900: #4c1d95;
    --palette-tailwind-violet-950: #2e1065;
}

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

/* Palette-tailwind-gray Palette: tailwind-gray */
:root {
    --palette-tailwind-gray-50:  #f9fafb;
    --palette-tailwind-gray-100: #f3f4f6;
    --palette-tailwind-gray-200: #e5e7eb;
    --palette-tailwind-gray-300: #d1d5db;
    --palette-tailwind-gray-400: #9ca3af;
    --palette-tailwind-gray-500: #6b7280;
    --palette-tailwind-gray-600: #4b5563;
    --palette-tailwind-gray-700: #374151;
    --palette-tailwind-gray-800: #1f2937;
    --palette-tailwind-gray-900: #111827;
    --palette-tailwind-gray-950: #030712;
}

/* Palette-tailwind-neutral Palette: tailwind-neutral */
:root {
    --palette-tailwind-neutral-50:  #fafafa;
    --palette-tailwind-neutral-100: #f5f5f5;
    --palette-tailwind-neutral-200: #e5e5e5;
    --palette-tailwind-neutral-300: #d4d4d4;
    --palette-tailwind-neutral-400: #a3a3a3;
    --palette-tailwind-neutral-500: #737373;
    --palette-tailwind-neutral-600: #525252;
    --palette-tailwind-neutral-700: #404040;
    --palette-tailwind-neutral-800: #262626;
    --palette-tailwind-neutral-900: #171717;
    --palette-tailwind-neutral-950: #0a0a0a;
}

/* Palette-tailwind-slate Palette: tailwind-slate */
:root {
    --palette-tailwind-slate-50:  #f8fafc;
    --palette-tailwind-slate-100: #f1f5f9;
    --palette-tailwind-slate-200: #e2e8f0;
    --palette-tailwind-slate-300: #cbd5e1;
    --palette-tailwind-slate-400: #94a3b8;
    --palette-tailwind-slate-500: #64748b;
    --palette-tailwind-slate-600: #475569;
    --palette-tailwind-slate-700: #334155;
    --palette-tailwind-slate-800: #1e293b;
    --palette-tailwind-slate-900: #0f172a;
    --palette-tailwind-slate-950: #020617;
}

/* Palette-tailwind-stone Palette: tailwind-stone */
:root {
    --palette-tailwind-stone-50:  #fafaf9;
    --palette-tailwind-stone-100: #f5f5f4;
    --palette-tailwind-stone-200: #e7e5e4;
    --palette-tailwind-stone-300: #d6d3d1;
    --palette-tailwind-stone-400: #a8a29e;
    --palette-tailwind-stone-500: #78716c;
    --palette-tailwind-stone-600: #57534e;
    --palette-tailwind-stone-700: #44403c;
    --palette-tailwind-stone-800: #292524;
    --palette-tailwind-stone-900: #1c1917;
    --palette-tailwind-stone-950: #0c0a09;
}

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

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

:root {
            --logo-svg-display: block;
                --logo-svg-url: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
                --logo-svg-url-mobile: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
            --data-table-sort-asc-svg-display: block;
                --data-table-sort-asc-svg-url: url('/framework/images/icons/arrow-long-up-outline.svg');
                --data-table-sort-asc-svg-url-mobile: url('/framework/images/icons/arrow-long-up-outline.svg');
            --data-table-sort-desc-svg-display: block;
                --data-table-sort-desc-svg-url: url('/framework/images/icons/arrow-long-down-outline.svg');
                --data-table-sort-desc-svg-url-mobile: url('/framework/images/icons/arrow-long-down-outline.svg');
            --framework-log-service-refresh-svg-display: block;
                --framework-log-service-refresh-svg-url: url('/framework/images/icons/arrow-path-mini.svg');
                --framework-log-service-refresh-svg-url-mobile: url('/framework/images/icons/arrow-path-mini.svg');
            --framework-log-service-zoom-out-svg-display: block;
                --framework-log-service-zoom-out-svg-url: url('/framework/images/icons/minus-mini.svg');
                --framework-log-service-zoom-out-svg-url-mobile: url('/framework/images/icons/minus-mini.svg');
            --framework-log-service-zoom-in-svg-display: block;
                --framework-log-service-zoom-in-svg-url: url('/framework/images/icons/plus-mini.svg');
                --framework-log-service-zoom-in-svg-url-mobile: url('/framework/images/icons/plus-mini.svg');
            --framework-log-service-close-svg-display: block;
                --framework-log-service-close-svg-url: url('/framework/images/icons/x-mark-mini.svg');
                --framework-log-service-close-svg-url-mobile: url('/framework/images/icons/x-mark-mini.svg');
            --framework-log-service-copy-svg-display: block;
                --framework-log-service-copy-svg-url: url('/framework/images/icons/document-text-outline.svg');
                --framework-log-service-copy-svg-url-mobile: url('/framework/images/icons/document-text-outline.svg');
            --framework-log-service-globe-svg-display: block;
                --framework-log-service-globe-svg-url: url('/framework/images/icons/globe-americas-mini.svg');
                --framework-log-service-globe-svg-url-mobile: url('/framework/images/icons/globe-americas-mini.svg');
            --framework-log-service-entry-copy-svg-display: block;
                --framework-log-service-entry-copy-svg-url: url('/framework/images/icons/clipboard-mini.svg');
                --framework-log-service-entry-copy-svg-url-mobile: url('/framework/images/icons/clipboard-mini.svg');
            --framework-log-service-expand-svg-display: block;
                --framework-log-service-expand-svg-url: url('/framework/images/icons/eye-mini.svg');
                --framework-log-service-expand-svg-url-mobile: url('/framework/images/icons/eye-mini.svg');
            --framework-log-service-collapse-svg-display: block;
                --framework-log-service-collapse-svg-url: url('/framework/images/icons/eye-slash-mini.svg');
                --framework-log-service-collapse-svg-url-mobile: url('/framework/images/icons/eye-slash-mini.svg');
            --framework-log-service-logo-svg-display: block;
                --framework-log-service-logo-svg-url: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
                --framework-log-service-logo-svg-url-mobile: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
            --framework-log-service-launcher-svg-display: block;
                --framework-log-service-launcher-svg-url: url('/framework/images/icons/bug-ant-outline.svg');
                --framework-log-service-launcher-svg-url-mobile: url('/framework/images/icons/bug-ant-outline.svg');
            --pagination-prev-svg-display: block;
                --pagination-prev-svg-url: url('/framework/images/icons/chevron-left-mini.svg');
                --pagination-prev-svg-url-mobile: url('/framework/images/icons/chevron-left-mini.svg');
            --pagination-next-svg-display: block;
                --pagination-next-svg-url: url('/framework/images/icons/chevron-right-mini.svg');
                --pagination-next-svg-url-mobile: url('/framework/images/icons/chevron-right-mini.svg');
            --pagination-per-page-svg-display: block;
                --pagination-per-page-svg-url: url('/framework/images/icons/chevron-down-mini.svg');
                --pagination-per-page-svg-url-mobile: url('/framework/images/icons/chevron-down-mini.svg');
            --data-table-breakdown-closed-svg-display: block;
                --data-table-breakdown-closed-svg-url: url('/framework/images/icons/bars-arrow-down-mini.svg');
                --data-table-breakdown-closed-svg-url-mobile: url('/framework/images/icons/bars-arrow-down-mini.svg');
            --data-table-breakdown-open-svg-display: block;
                --data-table-breakdown-open-svg-url: url('/framework/images/icons/bars-arrow-up-mini.svg');
                --data-table-breakdown-open-svg-url-mobile: url('/framework/images/icons/bars-arrow-up-mini.svg');
            --sidebar-nav-collapse-svg-display: block;
                --sidebar-nav-collapse-svg-url: url('/framework/images/icons/chevron-double-left-mini.svg');
                --sidebar-nav-collapse-svg-url-mobile: url('/framework/images/icons/chevron-double-left-mini.svg');
            --sidebar-nav-expand-svg-display: block;
                --sidebar-nav-expand-svg-url: url('/framework/images/icons/chevron-double-right-mini.svg');
                --sidebar-nav-expand-svg-url-mobile: url('/framework/images/icons/chevron-double-right-mini.svg');
            --sidebar-nav-reports-svg-display: block;
                --sidebar-nav-reports-svg-url: url('/framework/images/icons/chart-bar-square-outline.svg');
                --sidebar-nav-reports-svg-url-mobile: url('/framework/images/icons/chart-bar-square-outline.svg');
            --sidebar-nav-tools-svg-display: block;
                --sidebar-nav-tools-svg-url: url('/framework/images/icons/wrench-screwdriver-outline.svg');
                --sidebar-nav-tools-svg-url-mobile: url('/framework/images/icons/wrench-screwdriver-outline.svg');
            --sidebar-nav-ab-testing-svg-display: block;
                --sidebar-nav-ab-testing-svg-url: url('/framework/images/icons/beaker-outline.svg');
                --sidebar-nav-ab-testing-svg-url-mobile: url('/framework/images/icons/beaker-outline.svg');
            --sidebar-nav-dating-svg-display: block;
                --sidebar-nav-dating-svg-url: url('/framework/images/icons/heart-outline.svg');
                --sidebar-nav-dating-svg-url-mobile: url('/framework/images/icons/heart-outline.svg');
            --sidebar-nav-admin-svg-display: block;
                --sidebar-nav-admin-svg-url: url('/framework/images/icons/shield-check-outline.svg');
                --sidebar-nav-admin-svg-url-mobile: url('/framework/images/icons/shield-check-outline.svg');
            --sidebar-nav-leads-svg-display: block;
                --sidebar-nav-leads-svg-url: url('/framework/images/icons/clipboard-outline.svg');
                --sidebar-nav-leads-svg-url-mobile: url('/framework/images/icons/clipboard-outline.svg');
            --sidebar-nav-company-svg-display: block;
                --sidebar-nav-company-svg-url: url('/framework/images/icons/user-group-outline.svg');
                --sidebar-nav-company-svg-url-mobile: url('/framework/images/icons/user-group-outline.svg');
            --sidebar-nav-aws-svg-display: block;
                --sidebar-nav-aws-svg-url: url('/framework/images/icons/cloud-outline.svg');
                --sidebar-nav-aws-svg-url-mobile: url('/framework/images/icons/cloud-outline.svg');
            --sidebar-nav-alerts-svg-display: block;
                --sidebar-nav-alerts-svg-url: url('/framework/images/icons/bell-outline.svg');
                --sidebar-nav-alerts-svg-url-mobile: url('/framework/images/icons/bell-outline.svg');
            --sidebar-nav-alerts-active-svg-display: block;
                --sidebar-nav-alerts-active-svg-url: url('/framework/images/icons/bell-alert-outline.svg');
                --sidebar-nav-alerts-active-svg-url-mobile: url('/framework/images/icons/bell-alert-outline.svg');
            --sidebar-nav-user-svg-display: block;
                --sidebar-nav-user-svg-url: url('/framework/images/icons/user-circle-outline.svg');
                --sidebar-nav-user-svg-url-mobile: url('/framework/images/icons/user-circle-outline.svg');
            --sidebar-nav-logout-svg-display: block;
                --sidebar-nav-logout-svg-url: url('/framework/images/icons/arrow-right-start-on-rectangle-outline.svg');
                --sidebar-nav-logout-svg-url-mobile: url('/framework/images/icons/arrow-right-start-on-rectangle-outline.svg');
            --sidebar-nav-dev-tools-svg-display: block;
                --sidebar-nav-dev-tools-svg-url: url('/framework/images/icons/bug-ant-outline.svg');
                --sidebar-nav-dev-tools-svg-url-mobile: url('/framework/images/icons/bug-ant-outline.svg');
            --sidebar-nav-section-closed-svg-display: block;
                --sidebar-nav-section-closed-svg-url: url('/framework/images/icons/plus-mini.svg');
                --sidebar-nav-section-closed-svg-url-mobile: url('/framework/images/icons/plus-mini.svg');
            --sidebar-nav-section-open-svg-display: block;
                --sidebar-nav-section-open-svg-url: url('/framework/images/icons/minus-mini.svg');
                --sidebar-nav-section-open-svg-url-mobile: url('/framework/images/icons/minus-mini.svg');
            --sidebar-nav-logo-svg-display: block;
                --sidebar-nav-logo-svg-url: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
                --sidebar-nav-logo-svg-url-mobile: url('/framework/images/logos/leadthink-logo-icon-primary-dark.svg');
            --group-by-bar-group-svg-display: block;
                --group-by-bar-group-svg-url: url('/framework/images/icons/queue-list-solid.svg');
                --group-by-bar-group-svg-url-mobile: url('/framework/images/icons/queue-list-solid.svg');
            --group-by-bar-breakdown-svg-display: block;
                --group-by-bar-breakdown-svg-url: url('/framework/images/icons/bars-arrow-down-mini.svg');
                --group-by-bar-breakdown-svg-url-mobile: url('/framework/images/icons/bars-arrow-down-mini.svg');
            --refresh-button-icon-svg-display: block;
                --refresh-button-icon-svg-url: url('/framework/images/icons/arrow-path-outline.svg');
                --refresh-button-icon-svg-url-mobile: url('/framework/images/icons/arrow-path-outline.svg');
            --date-range-picker-warning-svg-display: block;
                --date-range-picker-warning-svg-url: url('/framework/images/icons/exclamation-triangle-outline.svg');
                --date-range-picker-warning-svg-url-mobile: url('/framework/images/icons/exclamation-triangle-outline.svg');
            --date-range-picker-calendar-svg-display: block;
                --date-range-picker-calendar-svg-url: url('/framework/images/icons/calendar-days-outline.svg');
                --date-range-picker-calendar-svg-url-mobile: url('/framework/images/icons/calendar-days-outline.svg');
            --date-range-picker-chevron-down-svg-display: block;
                --date-range-picker-chevron-down-svg-url: url('/framework/images/icons/chevron-down-mini.svg');
                --date-range-picker-chevron-down-svg-url-mobile: url('/framework/images/icons/chevron-down-mini.svg');
            --date-range-picker-prev-svg-display: block;
                --date-range-picker-prev-svg-url: url('/framework/images/icons/chevron-left-mini.svg');
                --date-range-picker-prev-svg-url-mobile: url('/framework/images/icons/chevron-left-mini.svg');
            --date-range-picker-next-svg-display: block;
                --date-range-picker-next-svg-url: url('/framework/images/icons/chevron-right-mini.svg');
                --date-range-picker-next-svg-url-mobile: url('/framework/images/icons/chevron-right-mini.svg');
            --smart-filter-bar-search-svg-display: block;
                --smart-filter-bar-search-svg-url: url('/framework/images/icons/magnifying-glass-outline.svg');
                --smart-filter-bar-search-svg-url-mobile: url('/framework/images/icons/magnifying-glass-outline.svg');
            --smart-filter-bar-warning-svg-display: block;
                --smart-filter-bar-warning-svg-url: url('/framework/images/icons/exclamation-triangle-outline.svg');
                --smart-filter-bar-warning-svg-url-mobile: url('/framework/images/icons/exclamation-triangle-outline.svg');
            --smart-filter-bar-remove-svg-display: block;
                --smart-filter-bar-remove-svg-url: url('/framework/images/icons/x-mark-mini.svg');
                --smart-filter-bar-remove-svg-url-mobile: url('/framework/images/icons/x-mark-mini.svg');
            --smart-filter-bar-save-svg-display: block;
                --smart-filter-bar-save-svg-url: url('/framework/images/icons/check-outline.svg');
                --smart-filter-bar-save-svg-url-mobile: url('/framework/images/icons/check-outline.svg');
            --select-arrow-svg-display: block;
                --select-arrow-svg-url: url('/framework/images/icons/chevron-down-mini.svg');
                --select-arrow-svg-url-mobile: url('/framework/images/icons/chevron-down-mini.svg');
            --framework-config-sun-svg-display: block;
                --framework-config-sun-svg-url: url('/framework/images/icons/sun-outline.svg');
                --framework-config-sun-svg-url-mobile: url('/framework/images/icons/sun-outline.svg');
            --framework-config-moon-svg-display: block;
                --framework-config-moon-svg-url: url('/framework/images/icons/moon-outline.svg');
                --framework-config-moon-svg-url-mobile: url('/framework/images/icons/moon-outline.svg');
            --framework-config-dropper-svg-display: block;
                --framework-config-dropper-svg-url: url('/framework/images/icons/dropper-outline.svg');
                --framework-config-dropper-svg-url-mobile: url('/framework/images/icons/dropper-outline.svg');
            --framework-config-theme-svg-display: block;
                --framework-config-theme-svg-url: url('/framework/images/icons/swatch-outline.svg');
                --framework-config-theme-svg-url-mobile: url('/framework/images/icons/swatch-outline.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: 'Geist-Regular';
    src: url('/framework/fonts/geist/Geist-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Geist-Bold';
    src: url('/framework/fonts/geist/Geist-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'Geist-Black';
    src: url('/framework/fonts/geist/Geist-Black.ttf') format('truetype');
}
@font-face {
    font-family: 'GeistMono-Regular';
    src: url('/framework/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'GeistMono-Bold';
    src: url('/framework/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
}
@font-face {
    font-family: 'GeistMono-Black';
    src: url('/framework/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
}

:root {
    /* Font families */
    --font-color: 'neutral-950', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-body: 'Geist-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-headings: 'Geist-Black', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-paragraph: 'Geist-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-strong: 'Geist-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono-headings: 'GeistMono-Black', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono-paragraph: 'GeistMono-Regular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-mono-strong: 'GeistMono-Bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-button: 'Geist-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
============================================================ */

/* 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
============================================================ */

/* app-header-bar.css */
/**
 * App-header-bar component styles - the flat toolbar across the top of a report
 * / admin page: title on the left, a controls region on the right. A surface
 * stepped up from the page (neutral-50 on the neutral-100 page) with a single
 * bottom divider, so it reads as a bar rather than a floating card.
 *
 * Every rule is scoped under .app-header-bar so the component is self-contained
 * - .page-title / .header-controls cannot collide with a host page's classes.
 * Colours come from the --app-header-bar-* tokens (config -> StyleService).
 * Wired by AppHeaderBar::css(); markup in
 * /inc/framework/views/components/app-header-bar.php. The frame is structural
 * (no JS); the controls portal into #app-header-controls on init.
 *
 * The bar pins at the top of the content column for free - <main> is a
 * viewport-height, non-scrolling flex column, so its first child stays put -
 * and it resizes with the sidebar because <main> is flex:1 against the
 * sidebar's width. No positioning lives here.
 */

.app-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    /* Full-bleed: cancel <main>'s padding so the bar sits flush at the top
       and spans the content width, reading as a toolbar rather than a card.
       The gap below (main's gap) still separates it from the content. */
    height: var(--app-header-height);
    margin: calc(var(--app-padding, 12px) * -1) calc(var(--app-padding, 12px) * -1) 0;
    padding: 0 var(--app-padding, 12px);
    background: var(--app-header-bar-bg);
    border-bottom: 1px solid var(--app-header-bar-divider);
}

.app-header-bar .page-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--app-header-bar-text);
}

.app-header-bar .header-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Tablet and down: stack the title above full-width controls. */
@media (max-width: 768px) {
    .app-header-bar {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        padding: 12px 16px;
    }

    .app-header-bar .page-title {
        font-size: 18px;
    }

    .app-header-bar .header-controls {
        width: 100%;
        justify-content: space-between;
    }
}

/* body.css */
/**
 * Body-level styles for the LeadThink app. Sets up the outer page frame: grey
 * background, no default margin, viewport-locked height, and a flex row so the
 * sidebar(s) and main content sit side by side.
 *
 * Split out from the old layout/app.css so body and main own their own files
 * (consistent with how every other component is shaped). Auto-bundled by
 * StyleService along with everything else under leadthink-app/.
 */

body {
    /* Background and text color using variables */
    background: var(--body-bg-color);
    color: var(--body-color);
    margin: 0;
    height: 100vh;
    overflow: hidden;
    display: flex;
}

/* button.css */
/**
 * Button component - the flat base for every <button> in the app: primary
 * fill (primary-500), a 1px border, asymmetric-capable radius, and the hover /
 * active / focus / disabled states. No box-shadow - flat, matching the house
 * style.
 *
 * Styles the bare <button> element so any button is consistent by default;
 * page- or component-specific layout (width, margin, position) is added where
 * the button is used. Components that aren't visually primary buttons (the
 * sidebar nav rows and toggle) override these under their own scope. Colours
 * and metrics come from the --button-* tokens (config -> StyleService).
 */

/* 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 */
    border: var(--button-border-width) solid var(--button-border);

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

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

/* cell.css */
/**
 * Cell appearance - what a single cell looks like, on its own. Every cell
 * renders with a base `.cell`; header cells add `.header` (so `.cell.header`).
 * Scoping to the class, not to a .data-table-container wrapper, is what lets a
 * cell work inside a plain <table> - or a handful of cells with no table at
 * all. Owned by Cell: the header <th> is server-rendered by
 * Cell::renderHeader(), the body / totals / sort-icon templates are shipped by
 * Cell::render().
 *
 * Layout-level concerns - the sticky positioning of the header / totals / first
 * column - live in data-table.css; that's DataTable's structure, not the
 * cell's. Content classes (.cell-stacked, .url-link, .badge, .config-*) are
 * nested under .cell so they can't collide with a page's own .badge etc.
 * Colours reference the --cell-* variables from the leadthink-app config.
 */

/* ====================
   BASE CELL - body cells, and the base under header / totals cells
   ==================== */

.cell {
    padding: 12px 16px;
    color: var(--cell-text);
    word-wrap: break-word;
    background-color: transparent;
    /* Equal-width digits so columns of figures line up; no effect on letters. */
    font-variant-numeric: tabular-nums;
}

/* Alignment - body and totals cells (the header aligns via .th-content) */
.cell.align-left {
    text-align: left;
}

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

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

/* ====================
   HEADER CELLS
   ==================== */

.cell.header {
    padding: 0; /* padding lives on .th-content */
    color: var(--cell-header-text);
    background-color: var(--cell-header-bg);
    border-bottom: 2px solid var(--cell-header-border);
    /* Small, bold, uppercase column labels (AG Grid / Vercel style) */
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    white-space: nowrap;
}

.cell.header.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

/* Flex wrapper inside the header cell */
.cell.header .th-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    width: 100%;
}

.cell.header .th-label {
    flex: 1;
    text-align: left;
}

.cell.header.sortable:hover {
    background-color: var(--cell-header-bg-hover);
}

/* Sorted column highlighting */
.cell.header.sortable.sorted {
    background-color: var(--cell-sorted-bg);
    color: var(--cell-sorted-text);
}

/* ====================
   SORT ARROWS - side-by-side, aligned with the label
   ==================== */

.cell.header .sort-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 1;
    flex-shrink: 0;
}

/* All sort arrows are inline SVGs (Heroicons), sized here; they take colour via
   currentColor - the header text colour, or the sorted accent when the column
   is sorted (the th sets that colour). No filter needed. */
.cell.header .sort-icon svg {
    width: 12px;
    height: 12px;
    display: block;
}

/* Active column - single arrow at full opacity */
.cell.header .sort-icon.active {
    opacity: 1;
}

/* Hover hint: faint dual arrows on a sortable column that is not the active sort.
   Hidden at rest (space reserved, so no reflow), fades in on hover. */
.cell.header .sort-arrows {
    display: inline-flex;
    flex-direction: row;
    gap: 1px;
    line-height: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.cell.header.sortable:hover .sort-arrows {
    opacity: 0.45;
}

/* ====================
   STACKED CELL CONTENT - 1st child primary, 2nd secondary, 3rd tertiary
   ==================== */

.cell .cell-stacked {
    display: block;
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

.cell .cell-stacked > div:first-child {
    color: var(--cell-text);
}

.cell .cell-stacked > div:nth-child(2) {
    font-size: 12px;
    color: var(--cell-text-muted);
    margin-top: 2px;
}

.cell .cell-stacked > div:nth-child(3) {
    font-size: 11px;
    color: var(--cell-text-faint);
    margin-top: 1px;
}

/* ====================
   URL LINKS
   ==================== */

.cell .url-link {
    color: var(--cell-link);
    text-decoration: none;
    word-break: break-word;
    display: inline-block;
    max-width: 100%;
}

.cell .url-link:hover {
    text-decoration: underline;
}

/* ====================
   BADGES
   ==================== */

.cell .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;
}

.cell .badge-success {
    background-color: var(--cell-badge-success-bg);
    color: var(--cell-badge-success-text);
}

.cell .badge-secondary {
    background-color: var(--cell-badge-secondary-bg);
    color: var(--cell-badge-secondary-text);
}

/* ====================
   CONFIG CELLS
   ==================== */

.cell .config-exists {
    color: var(--cell-config-exists);
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
    white-space: nowrap;
}

.cell .config-exists:hover {
    color: var(--cell-config-exists-hover);
}

.cell .config-empty {
    color: var(--cell-config-empty);
}

/* ====================
   NEGATIVE VALUES - profit / margin cells, flagged by cell.js
   ==================== */

.cell .cell-negative {
    color: var(--cell-negative);
    font-weight: 700;
}

/* ====================
   TOTALS CELLS - the totals <tr> is .totals-row; its cells are .cell
   ==================== */

.totals-row {
    background-color: var(--cell-header-bg);
    font-weight: 600;
}

.totals-row .cell {
    border: none;
    white-space: nowrap;
}

/* data-table.css */
/**
 * DataTable layout + chrome. The container and scroll wrapper, the sticky
 * positioning (header top, totals bottom, first column left, the four
 * corners + z-index ladder), the sticky first-cell background repaints,
 * the loading / error / empty states, the footer, pagination, expand icon,
 * filler row, scrollbar, and the skeleton placeholder rows.
 *
 * Cell *appearance* lives in cell.css and the row backgrounds in row.css;
 * this file is layout + positioning only. One <table> sits in .table-wrapper
 * (the single scroll container) and all four corners pin via position:sticky
 * relative to it. Behavior in data-table.js. Auto-bundled by StyleService.
 * Desktop only.
 */

/* ====================
   CONTAINER - FILLS PARENT FLEX COLUMN
   ==================== */

.data-table-container {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    border: 1px solid var(--data-table-card-border);
    border-radius: 8px; /* the card edge; overflow:hidden clips the wrapper/footer corners to it */
}

/* ====================
   LOADING STATE - WITH LOGO
   ==================== */

.data-table-container .table-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--data-table-text-muted);
    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 */
}

/* The loading logo is now an inline SVG (the brand mark); fill the box. */
.data-table-container .loading-logo-large svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* 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: var(--data-table-error-text);
    flex: 1;
}

.data-table-container .error-message {
    font-size: 16px;
    margin-bottom: 16px;
}

.data-table-container .retry-button {
    padding: 10px 20px;
    background-color: var(--data-table-retry-bg);
    color: var(--data-table-retry-text);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
}

.data-table-container .retry-button:hover {
    background-color: var(--data-table-retry-bg-hover);
}

/* ====================
   EMPTY STATE
   ==================== */

.data-table-container .table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    color: var(--data-table-text-muted);
    text-align: center;
    flex: 1;
}

.data-table-container .table-empty p {
    margin: 8px 0;
    font-size: 14px;
}

/* ====================
   TABLE WRAPPER - SINGLE SCROLL CONTAINER
   One wrapper, overflow both axes. Everything sticky is relative to this.
   ==================== */

.data-table-container .table-wrapper {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-height: 0;
    overflow: auto;
    background: var(--data-table-bg);
    -webkit-overflow-scrolling: touch;
}

/* ====================
   TABLE - NATURAL WIDTH FROM MODEL COLUMN WIDTHS
   Table grows to sum of column widths; overflow scrolls horizontally via the
   wrapper. No stretching - narrow tables sit at natural width.
   ==================== */

.data-table-container .data-table {
    min-width: 100%;
    height: 100%;
    border-collapse: collapse;
    font-size: 14px;
    table-layout: auto; /* Columns size to content. Model widths are applied as
                           per-column min-width floors (Cell::renderHeader), so a
                           column never shrinks below its configured width but
                           grows to fit a long header or value. */
}

/* Filler row - absorbs leftover vertical space so the tfoot pins to the
   bottom of the wrapper when there are few rows. height:100% takes all the
   slack (data rows keep natural height); collapses to 0 when rows overflow.
   class filler-row (not data-row) so zebra / hover / click / breakdown all
   skip it. No border, no background, not a hover/click target. */
.data-table-container .data-table tbody tr.filler-row {
    height: 100%;
}

.data-table-container .data-table tbody tr.filler-row td {
    border: none;
    padding: 0;
    background: transparent;
}

/* Header-cell sticky base (the header's appearance lives in cell.css). */
.data-table-container .data-table th {
    position: sticky;
    top: 0;
    z-index: 10;
}

/* ====================
   STICKY FOOTER - TWO ROW STRUCTURE
   ==================== */

.data-table-container .data-table-footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    background: var(--data-table-bg);
    border-top: 2px solid var(--data-table-border);
    z-index: 20;
    display: flex;
    flex-direction: column; /* Stack rows vertically */
}

/* 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: var(--data-table-text);
    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;
}

/* ====================
   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 svg {
    width: 16px;
    height: 16px;
    display: block;
}

/* Two breakdown icons: the down (collapsed) icon shows by default; the up (open)
   icon swaps in when the row is expanded. */
.data-table-container .expand-icon .expand-icon-expanded {
    display: none;
}
.data-table-container .expand-icon.expanded .expand-icon-collapsed {
    display: none;
}
.data-table-container .expand-icon.expanded .expand-icon-expanded {
    display: block;
}

/* Hover effect */
.data-table-container .expand-icon:hover {
    opacity: 0.7;
}

/* ====================
   STICKY HEADER + STICKY TOTALS + STICKY FIRST COLUMN
   All four corners pin relative to the single #table-wrapper scroll
   container. Chrome 91+/Safari/Firefox support sticky on thead/tfoot/th
   directly, so no JS scroll-sync needed.
   z-index ladder: corner cells 101, header/footer rows 100, first column
   99, regular cells auto. Sticky cells detach from row flow, so each row
   state paints its own background on the sticky first cell. Right-edge
   border marks the first-column boundary while scrolling.
   ==================== */

/* Header row - sticky top. */
.data-table-container .data-table thead th {
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Totals row - sticky bottom. tfoot itself sticky too for Safari/iOS. */
.data-table-container .data-table tfoot {
    position: sticky;
    bottom: 0;
    z-index: 100;
}

.data-table-container .data-table tfoot tr.totals-row th {
    position: sticky;
    bottom: 0;
    background-color: var(--cell-header-bg);
    z-index: 100;
}

/* Header first cell - top-left corner (sticky both axes). Highest z. */
.data-table-container .data-table thead th:first-child {
    left: 0;
    z-index: 101;
    border-right: 1px solid var(--data-table-border);
}

/* Vertical dividers between header cells (prep for resizable columns). */
.data-table-container .data-table thead th {
    border-right: 1px solid var(--data-table-border);
}

.data-table-container .data-table thead th:last-child {
    border-right: none;
}

/* Totals first cell - bottom-left corner (sticky both axes). Highest z. */
.data-table-container .data-table tfoot tr.totals-row th:first-child {
    left: 0;
    z-index: 101;
    border-right: 1px solid var(--data-table-border);
}

/* Body first cell - sticky left for every row. */
.data-table-container .data-table tbody tr td:first-child {
    position: sticky !important;
    left: 0 !important;
    z-index: 99;
    background-color: var(--row-bg) !important;
    border-right: 1px solid var(--data-table-border);
}

/* Row state backgrounds on the sticky first cell - !important to beat the
   generic td { background-color: transparent } rule. */
.data-table-container .data-table tbody tr.row-zebra td:first-child {
    background-color: var(--row-bg-zebra) !important;
}

.data-table-container .data-table tbody tr:hover td:first-child {
    background-color: var(--row-bg-hover) !important;
}

/* Filler row first cell must not paint a sticky background or seam border. */
.data-table-container .data-table tbody tr.filler-row td:first-child {
    position: static !important;
    background: transparent !important;
    border-right: none !important;
}

/* Empty-state row: no data, but the full table still renders around it. The row
   fills the body height (like the filler) and the cell centers its message both
   ways, so the message sits in the middle of the table, not pinned to the top. */
.data-table-container .data-table tbody tr.empty-row {
    height: 100%;
}

.data-table-container .data-table tbody tr.empty-row td.empty-cell {
    /* The first-child rule forces display:flex (for breakdown icons), which
       drops the cell out of the table model and breaks colspan. Force it back to
       a table cell so the colspan spans every column and the message centers. */
    display: table-cell !important;
    position: static !important;
    background: transparent !important;
    border-right: none !important;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    padding: 40px 16px;
    color: var(--data-table-text-muted);
}

/* ====================
   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: var(--data-table-scrollbar-track);
    border-radius: 4px;
}

.data-table-container .table-wrapper::-webkit-scrollbar-thumb {
    background: var(--data-table-scrollbar-thumb);
    border-radius: 4px;
}

.data-table-container .table-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--data-table-scrollbar-thumb-hover);
}

/* ====================
   SKELETON - initial-load placeholder rows
   Pre-rendered in the tbody so they inherit the real column widths; the
   first data render wipes them. They borrow .cell for padding + alignment
   but never .row, so they carry no zebra or hover.
   ==================== */

.data-table-container .skeleton-row .skeleton-bar {
    display: block;
    width: 70%;
    height: 14px;
}

.data-table-container .skeleton-row .cell:first-child .skeleton-bar {
    width: 85%;
}

/* Totals skeleton (model exposes selectWithTotals): the first cell shows the
   real "Totals" label, the value cells get a right-aligned shimmer bar. The
   bar needs its own size here because the .skeleton-row rule above is scoped
   to body rows. */
.data-table-container .totals-row .skeleton-bar {
    display: block;
    width: 70%;
    height: 14px;
    margin-left: auto;
}

/* ====================
   FOOTER FIRST-LOAD SKELETON
   While .is-loading-first is on the container, show placeholder bars in the
   footer and hide the real summary + pagination, so the footer holds its
   height from the first paint and nothing shifts when the data lands.
   data-table.js removes the class once the first load finishes.
   ==================== */

.data-table-container .footer-skeleton {
    display: none;
    align-items: center;
    gap: 8px;
}

.data-table-container.is-loading-first .footer-skeleton {
    display: flex;
}

.data-table-container.is-loading-first .results-summary,
.data-table-container.is-loading-first .pagination {
    display: none;
}

.data-table-container .footer-skeleton-summary .skeleton-bar {
    display: block;
    width: 180px;
    height: 14px;
}

.data-table-container .footer-skeleton-pagination .skeleton-bar {
    display: block;
    width: 32px;
    height: 32px;
}

/* date-range-picker.css */
/**
 * Date-range-picker styles: the trigger button, the dropdown panel (preset
 * list + two linked month calendars), the month/year jump picker, and the
 * footer (editable date inputs + Cancel/Apply). Flat surfaces, thin neutral
 * borders, a primary accent for selection/range, and warning/failure tints
 * for the date warning + input validation.
 *
 * The base button.css colours every button primary on hover/press via
 * button:hover/:active:not([disabled]) at (0,2,1); the button rules here carry
 * :not([disabled]) to out-specify that and keep their own surfaces. Colours
 * come from the --date-range-picker-* tokens (config -> StyleService); icons
 * are inline SVG (injected via MediaService), recoloured by currentColor.
 *
 * Wired by DateRangePicker::css(). Markup lives in
 * /inc/framework/views/components/date-range-picker.php; behavior in
 * /inc/framework/js/modules/date-range-picker.js.
 */

/* ====================
CONTAINER & WARNING
==================== */

.date-range-picker {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    order: 1;  /* left of the refresh control in #app-header-controls */
}

/* Date warning icon - sits left of trigger */
.date-range-warning {
    display: none;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    cursor: help;
    color: var(--date-range-picker-warning-icon);
    border-radius: 4px;
    transition: background 0.2s;
}

.date-range-warning:hover {
    background: var(--date-range-picker-warning-bg);
}

.date-range-warning svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ====================
TRIGGER BUTTON
==================== */

.date-range-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--date-range-picker-surface);
    border: 1px solid var(--date-range-picker-border);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    color: var(--date-range-picker-text);
}

.date-range-trigger:hover:not([disabled]) {
    background: var(--date-range-picker-surface-hover);
    border-color: var(--date-range-picker-accent);
}

.date-range-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    color: var(--date-range-picker-icon);
}

.date-range-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.date-range-label {
    font-weight: 600;
    color: var(--date-range-picker-text);
}

.date-range-dates {
    color: var(--date-range-picker-text-muted);
}

.date-range-chevron {
    display: inline-flex;
    width: 12px;
    height: 12px;
    color: var(--date-range-picker-icon);
    transition: transform 0.2s;
}

.date-range-chevron svg {
    width: 100%;
    height: 100%;
    display: block;
}

.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: none;  /* shown as flex by date-range-picker.js */
    flex-direction: column;
    background: var(--date-range-picker-surface);
    border: 1px solid var(--date-range-picker-border-panel);
    border-radius: 8px;
    z-index: 1000;
    min-width: 700px;
    /* Prevent stray text cursors everywhere */
    user-select: none;
    -webkit-user-select: none;
}

.date-range-content {
    display: flex;
}

/* ====================
LEFT PANEL: PRESETS
==================== */

.date-range-presets {
    flex: 0 0 160px;
    padding: 12px 0;
    border-right: 1px solid var(--date-range-picker-border);
    max-height: 340px;
    overflow-y: auto;
    overflow-x: hidden;
}

.date-range-presets::-webkit-scrollbar {
    width: 6px;
}

.date-range-presets::-webkit-scrollbar-track {
    background: transparent;
}

.date-range-presets::-webkit-scrollbar-thumb {
    background: var(--date-range-picker-scrollbar);
    border-radius: 3px;
}

.date-range-presets::-webkit-scrollbar-thumb:hover {
    background: var(--date-range-picker-scrollbar-hover);
}

.preset-item {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.preset-item:hover {
    background: var(--date-range-picker-surface-hover);
}

.preset-item input[type="radio"] {
    margin: 0;
    margin-right: 8px;
    cursor: pointer;
}

.preset-item label {
    flex: 1;
    cursor: pointer;
    font-size: 14px;
    color: var(--date-range-picker-text);
}

.preset-item input[type="radio"]:checked + label {
    font-weight: 600;
    color: var(--date-range-picker-accent);
}

/* ====================
CALENDARS
==================== */

.date-range-calendar {
    flex: 1;
    padding: 16px;
    position: relative;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Clickable month/year header with chevron */
.calendar-month-year {
    font-size: 14px;
    font-weight: 600;
    color: var(--date-range-picker-text);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.calendar-month-year.clickable {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.calendar-month-year.clickable:hover {
    background: var(--date-range-picker-surface-hover);
    color: var(--date-range-picker-accent);
}

.calendar-month-year.clickable:hover .my-header-chevron {
    opacity: 1;
}

.my-header-text {
    pointer-events: none;
}

.my-header-chevron {
    display: inline-flex;
    width: 12px;
    height: 12px;
    opacity: 0.5;
    color: var(--date-range-picker-icon);
    transition: opacity 0.2s;
    pointer-events: none;
}

.my-header-chevron svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Spacer to replace removed inner nav arrows */
.calendar-nav-spacer {
    width: 28px;
    height: 28px;
}

.calendar-nav-btn {
    width: 28px;
    height: 28px;
    color: var(--date-range-picker-icon);
    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:not([disabled]) {
    background: var(--date-range-picker-surface-hover);
}

.calendar-nav-btn svg {
    width: 16px;
    height: 16px;
    display: block;
}

.calendar-grid {
    width: 100%;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 4px;
}

.calendar-weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--date-range-picker-text-muted);
    padding: 4px 0;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

/* ====================
CALENDAR DAY CELLS
==================== */

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: var(--date-range-picker-text);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}

.calendar-day:not(.empty):not(.future-disabled):hover {
    background: var(--date-range-picker-surface-hover);
}

.calendar-day.empty {
    cursor: default;
}

/* Today indicator */
.calendar-day.today {
    font-weight: 700;
    box-shadow: inset 0 0 0 1.5px var(--date-range-picker-accent);
}

.calendar-day.today.selected {
    box-shadow: none;
}

/* Future dates - disabled */
.calendar-day.future-disabled {
    color: var(--date-range-picker-text-disabled);
    cursor: not-allowed;
    opacity: 0.5;
}

/* Selected start/end markers */
.calendar-day.selected {
    background: var(--date-range-picker-accent);
    color: var(--date-range-picker-surface);
    font-weight: 600;
}

.calendar-day.selected:hover {
    background: var(--date-range-picker-accent-hover);
}

/* Single day selection */
.calendar-day.single-day {
    border-radius: 6px;
}

/* Range start */
.calendar-day.range-start:not(.single-day) {
    border-radius: 6px 0 0 6px;
}

/* Range end */
.calendar-day.range-end:not(.single-day) {
    border-radius: 0 6px 6px 0;
}

/* In confirmed range */
.calendar-day.in-range {
    background: var(--date-range-picker-range-bg);
    border-radius: 0;
}

/* Hover preview range */
.calendar-day.in-range-preview {
    background: var(--date-range-picker-range-bg);
    border-radius: 0;
    opacity: 0.7;
}

/* Hover end marker */
.calendar-day.hover-end {
    background: var(--date-range-picker-range-hover-bg);
    color: var(--date-range-picker-surface);
    font-weight: 600;
}

/* ====================
MONTH/YEAR JUMP PICKER
==================== */

.month-year-picker-container {
    display: none;  /* shown as block by date-range-picker.js */
    position: absolute;
    top: 40px;
    left: 16px;
    right: 16px;
    z-index: 10;
    background: var(--date-range-picker-surface);
    border: 1px solid var(--date-range-picker-border-panel);
    border-radius: 8px;
}

.my-picker {
    padding: 12px;
}

.my-picker-year-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.my-picker-year {
    font-size: 15px;
    font-weight: 600;
    color: var(--date-range-picker-text);
}

.my-picker-year-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--date-range-picker-border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    color: var(--date-range-picker-text-muted);
    transition: all 0.2s;
}

.my-picker-year-btn:hover:not([disabled]) {
    background: var(--date-range-picker-surface-hover);
    border-color: var(--date-range-picker-accent);
    color: var(--date-range-picker-accent);
}

.my-picker-months {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}

.my-picker-month {
    padding: 8px 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--date-range-picker-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.my-picker-month:hover:not(.disabled) {
    background: var(--date-range-picker-surface-hover);
    border-color: var(--date-range-picker-accent);
    color: var(--date-range-picker-accent);
}

.my-picker-month.active {
    background: var(--date-range-picker-accent);
    color: var(--date-range-picker-surface);
    font-weight: 600;
}

.my-picker-month.disabled {
    color: var(--date-range-picker-text-disabled);
    cursor: not-allowed;
    opacity: 0.5;
}

/* ====================
FOOTER
==================== */

.date-range-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid var(--date-range-picker-border);
}

/* Editable date inputs - allow text selection here */
.date-range-inputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.date-input-field {
    width: 110px;
    padding: 6px 10px;
    font-size: 13px;
    font-family: inherit;
    color: var(--date-range-picker-text);
    background: var(--date-range-picker-surface);
    border: 1px solid var(--date-range-picker-border);
    border-radius: 4px;
    outline: none;
    transition: border-color 0.2s;
    /* Re-enable text selection for inputs */
    user-select: text;
    -webkit-user-select: text;
}

.date-input-field:focus {
    border-color: var(--date-range-picker-accent);
}

.date-input-field.input-error {
    border-color: var(--date-range-picker-error);
}

.date-input-field::placeholder {
    color: var(--date-range-picker-placeholder);
}

.date-input-separator {
    color: var(--date-range-picker-text-muted);
    font-size: 14px;
}

/* Action buttons */
.date-range-actions {
    display: flex;
    gap: 8px;
}

.date-range-cancel-btn {
    padding: 8px 24px;
    background: var(--date-range-picker-surface);
    color: var(--date-range-picker-text-muted);
    border: 1px solid var(--date-range-picker-border);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.date-range-cancel-btn:hover:not([disabled]) {
    background: var(--date-range-picker-surface-hover);
    border-color: var(--date-range-picker-border-hover);
}

.date-range-apply-btn {
    padding: 8px 24px;
    background: var(--date-range-picker-accent);
    color: var(--date-range-picker-surface);
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.date-range-apply-btn:hover:not([disabled]) {
    background: var(--date-range-picker-accent-hover);
}

/* ====================
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 var(--date-range-picker-border);
        max-height: 200px;
    }

    .date-range-calendar {
        flex: none;
    }

    .date-range-footer {
        flex-direction: column;
        gap: 10px;
    }

    .date-range-inputs {
        width: 100%;
    }

    .date-input-field {
        flex: 1;
    }

    .date-range-actions {
        width: 100%;
    }

    .date-range-cancel-btn,
    .date-range-apply-btn {
        flex: 1;
    }
}

/* framework-config.css */
/* Theme control - the "Theme" row in the sidebar footer: a light/dark Sun-Moon
   toggle and a dropper that opens a popup of accent + surface swatches. Colours
   come from the sidebar-nav tokens so the row follows the theme; metrics fixed. */

.framework-config {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    position: relative;
    padding: 8px 16px;
    color: var(--sidebar-nav-text);
    font-size: 14px;
}

.framework-config-label {
    font-weight: 500;
    color: var(--sidebar-nav-text-strong);
}

.framework-config-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.framework-config-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.6;
    color: var(--sidebar-nav-text);
}

.framework-config-icon svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
}

.framework-config-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.framework-config-dropper {
    position: relative;
    z-index: 21;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--sidebar-nav-border);
    border-radius: 6px;
    background: var(--sidebar-nav-hover-bg);
    color: var(--sidebar-nav-text);
    cursor: pointer;
}

/* These are icon / swatch buttons, not primary buttons. The bare <button> rule
   (button.css) fills them with the accent on hover at specificity (0,2,1), which
   beats a plain .class:hover, so the neutral hovers below are scoped to win. */
.framework-config-controls .framework-config-dropper:hover,
.framework-config-controls .framework-config-dropper:active {
    background: var(--sidebar-nav-hover-bg);
    border-color: var(--sidebar-nav-text-faint);
    color: var(--sidebar-nav-text-strong);
}

.framework-config-dropper svg {
    display: block;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.framework-config-toggle {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--sidebar-nav-border);
    border-radius: 6px;
    background: var(--sidebar-nav-hover-bg);
}

.framework-config-seg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--sidebar-nav-text-muted);
    cursor: pointer;
}

.framework-config-seg svg {
    display: block;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
}

.framework-config-toggle .framework-config-seg.is-active {
    background: var(--sidebar-nav-bg);
    color: var(--sidebar-nav-active-text);
}

.framework-config-toggle .framework-config-seg:not(.is-active):hover,
.framework-config-toggle .framework-config-seg:not(.is-active):active {
    background: transparent;
    border-color: transparent;
    color: var(--sidebar-nav-text-strong);
}

/* Popup: a square panel that blooms up from the row, holding the accent and
   surface swatch grids. Flat - border + solid fill, no shadow. */
.framework-config-popup {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: calc(100% + 8px);
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--sidebar-nav-border);
    border-radius: 10px;
    background: var(--sidebar-nav-bg);
    transform: scale(0.96);
    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: transform 160ms ease, opacity 160ms ease, visibility 0s linear 160ms;
}

.framework-config-popup.is-open {
    transform: scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: transform 160ms ease, opacity 160ms ease, visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
    .framework-config-popup {
        transition: none;
    }
}

.framework-config-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.framework-config-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sidebar-nav-text-muted);
}

.framework-config-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

.framework-config-swatch {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid var(--sidebar-nav-border);
    border-radius: 5px;
    background: var(--swatch-color);
    cursor: pointer;
    outline: 2px solid transparent;
    outline-offset: 1px;
    transition: transform 120ms ease, outline-color 120ms ease;
}

.framework-config-grid .framework-config-swatch:hover,
.framework-config-grid .framework-config-swatch:active {
    background: var(--swatch-color);
    border-color: var(--sidebar-nav-border);
    color: inherit;
    transform: translateY(-1px);
}

.framework-config-swatch.is-active {
    outline-color: var(--sidebar-nav-text-strong);
}

/* Collapsed rail: drop to just the theme icon, centered, matching the nav items. */
body.sidebar-collapsed .framework-config {
    justify-content: center;
    padding: 12px 0;
}

body.sidebar-collapsed .framework-config-label,
body.sidebar-collapsed .framework-config-controls,
body.sidebar-collapsed .framework-config-popup {
    display: none;
}

body.sidebar-collapsed .framework-config-icon {
    margin: 0 auto;
}

/* group-by-bar.css */
/**
 * Group-by-bar styles: the "Group By" / "Breakdown By" chip dropdown buttons
 * and the option panels they open. group-by-bar.js moves the buttons into the
 * smart filter bar's extras slot at init, so this file styles only the buttons
 * and panels (the slot owns their inline layout); the panel is appended to
 * document.body and positioned by the JS, so it carries its own surface here.
 *
 * Self-contained - every rule is scoped under a .gb-* class, sets its own hover
 * colour so the global <button> hover can't leak in, and takes its colours from
 * the --group-by-bar-* tokens (config -> StyleService). The chip icons are
 * inline SVGs (injected via MediaService), recoloured by currentColor. Markup:
 * /inc/framework/views/components/group-by-bar.php.
 */

/* ====================
   DROPDOWN BUTTON (chip)
   ==================== */

.gb-dropdown {
    position: relative;
    display: inline-block;
}

.gb-dropdown-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--group-by-bar-bg);
    border: 1px solid var(--group-by-bar-border);
    border-radius: 6px;
    /* Match the filter input wrapper's min-height (smart-filter-bar.css) so the
       buttons line up with the filter pill when sitting inline in the bar. */
    padding: 8px 12px;
    min-height: 50px;
    font-size: 13px;
    font-family: inherit;
    color: var(--group-by-bar-text);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s;
    white-space: nowrap;
    line-height: 1.2;
}

/* The base button.css colours every button on hover/press via
   button:hover/:active:not([disabled]) - specificity (0,2,1), so it beats a
   bare .gb-dropdown-button:hover (0,2,0) and the chip would go primary (dark
   fill, white text). Match the :not([disabled]) so the chip lands at (0,3,0),
   out-specifies it, and keeps its own neutral colours on hover + press. */
.gb-dropdown-button:hover:not([disabled]),
.gb-dropdown-button:active:not([disabled]) {
    background: var(--group-by-bar-bg-hover);
    border-color: var(--group-by-bar-border-hover);
    color: var(--group-by-bar-text);
}

.gb-dropdown-button:focus {
    outline: none;
    border-color: var(--group-by-bar-border-hover);
}

/* Leading icon - inline SVG, recoloured by currentColor */
.gb-dropdown-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    color: var(--group-by-bar-text-muted);
}

.gb-dropdown-icon svg {
    width: 14px;
    height: 14px;
    display: block;
}

/* The "Group By:" / "Breakdown By:" prefix label */
.gb-dropdown-label {
    color: var(--group-by-bar-text-muted);
    font-weight: 500;
}

/* The currently-selected dimension name */
.gb-dropdown-value {
    color: var(--group-by-bar-text);
    font-weight: 600;
}

/* Chevron at the end of the button (text glyph) */
.gb-dropdown-chevron {
    margin-left: 4px;
    font-size: 10px;
    color: var(--group-by-bar-text-muted);
    line-height: 1;
}

/* ====================
   DROPDOWN PANEL (cloned from template, appended to document.body)
   ==================== */

.gb-dropdown-panel {
    position: absolute;
    background: var(--group-by-bar-bg);
    border: 1px solid var(--group-by-bar-border);
    border-radius: 8px;
    padding: 4px 0;
    z-index: 1000;
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
}

.gb-dropdown-options {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ====================
   OPTIONS
   ==================== */

.gb-dropdown-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 13px;
    color: var(--group-by-bar-text);
    transition: background-color 0.1s;
    user-select: none;
}

.gb-dropdown-option:hover:not(.disabled) {
    background: var(--group-by-bar-option-hover-bg);
}

.gb-dropdown-option.selected {
    background: var(--group-by-bar-option-selected-bg);
}

.gb-dropdown-option.selected:hover {
    background: var(--group-by-bar-option-selected-hover-bg);
}

.gb-dropdown-option.disabled {
    color: var(--group-by-bar-text-disabled);
    cursor: not-allowed;
}

/* Checkmark - only visible on the selected option (text glyph) */
.gb-dropdown-option-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    color: var(--group-by-bar-check);
    font-weight: bold;
    font-size: 12px;
    visibility: hidden;
    flex-shrink: 0;
}

.gb-dropdown-option.selected .gb-dropdown-option-check {
    visibility: visible;
}

.gb-dropdown-option-label {
    flex: 1;
}

/* log-viewer.css */
/**
 * Log Viewer component styles. The tabbed server-log display: tab nav, per-tab
 * content, server-info header, error entries (expandable + copyable, IDE-themed
 * content), per-tab pagination, and empty/error states.
 *
 * Merged from the old pages/server-log.css (tab layout) + components/
 * log-display-block.css (error entries / badges / content), normalized to the
 * palette variables the other components use. Bundled by StyleService; the view
 * links nothing. Behavior is in /inc/framework/js/modules/log-display.js.
 *
 * The old collapsible .log-server-block layout was dropped - the viewer is
 * fully tabbed now.
 */

/* ====================
   TAB NAVIGATION
   ==================== */

.log-tabs-nav {
    display: flex;
    gap: 4px;
    padding: 0 20px;
    background: var(--neutral-100);
    border-bottom: 2px solid var(--neutral-200);
    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: var(--neutral-600);
    font-size: 14px;
    font-weight: 500;
}

.log-tab:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--neutral-900);
}

.log-tab.active {
    background: var(--neutral-50);
    color: var(--primary-600);
    border-bottom-color: var(--primary-600);
}

.log-tab .tab-icon {
    width: 18px;
    height: 18px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.log-tab.active .tab-icon {
    opacity: 1;
}

.log-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--neutral-200);
    color: var(--neutral-600);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}

.log-tab.active .tab-badge {
    background: var(--primary-100);
    color: var(--primary-600);
}

.log-tab[data-log-type="framework"] .tab-name {
    color: var(--primary-600);
}

.log-tab[data-log-type="framework"].active {
    border-bottom-color: var(--primary-600);
}

/* ====================
   TAB CONTENT
   ==================== */

.log-tabs-content {
    position: relative;
    background: var(--neutral-50);
    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: var(--neutral-100);
    border-bottom: 1px solid var(--neutral-200);
}

.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: var(--neutral-900);
}

.tab-content-header .server-ip {
    font-size: 13px;
    color: var(--neutral-600);
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
}

.tab-content-header .entry-count {
    font-size: 14px;
    color: var(--neutral-600);
}

/* ====================
   LOG ENTRIES CONTAINER
   ==================== */

.log-entries-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--neutral-50);
}

.log-entries-container::-webkit-scrollbar {
    width: 8px;
}

.log-entries-container::-webkit-scrollbar-track {
    background: var(--neutral-100);
}

.log-entries-container::-webkit-scrollbar-thumb {
    background: var(--neutral-400);
    border-radius: 4px;
}

.log-entries-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 BADGES
   ==================== */

.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);
}

.error-level-trace {
    background: var(--neutral-200);
    color: var(--neutral-700);
}

.error-level-debug {
    background: var(--primary-100);
    color: var(--primary-900);
}

.error-level-info {
    background: var(--success-100);
    color: var(--success-900);
}

/* ====================
   COPY BUTTON
   ==================== */

.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;
}

/* ====================
   ERROR CONTENT (IDE THEME) - COLLAPSIBLE
   ==================== */

.error-content {
    background: #1e1e1e;
    padding: 16px 20px;
    max-height: 400px;
    overflow-y: auto;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.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;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.error-content code {
    font-family: inherit;
    color: inherit;
}

/* Syntax highlighting - IDE theme colors (literal: a dark code surface,
   independent of the app palette). */
.log-timestamp { color: #4ec9b0; font-weight: 600; }

.log-level {
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
}

.log-level-notice { color: #4fc1ff; background: rgba(79, 193, 255, 0.15); }
.log-level-warning { color: #ffd700; background: rgba(255, 215, 0, 0.15); }
.log-level-fatal,
.log-level-error { color: #f48771; background: rgba(244, 135, 113, 0.15); }

.log-filepath {
    color: #ce9178;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.log-linenum { color: #b5cea8; font-weight: 600; }
.log-stack { color: #9cdcfe; font-weight: 700; }
.log-function { color: #dcdcaa; font-weight: 600; }

/* Framework log content (inside the IDE-themed surface) */
.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;
}

/* ====================
   TAB PAGINATION
   ==================== */

.tab-pagination {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: var(--neutral-50);
    border-top: 1px solid var(--neutral-200);
    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: var(--neutral-600);
    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: var(--neutral-50);
    border: 1px solid var(--neutral-300);
    border-radius: 6px;
    color: var(--neutral-900);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tab-pagination .pagination-button:hover:not(:disabled) {
    background: var(--neutral-100);
    border-color: var(--primary-600);
}

.tab-pagination .pagination-button.active {
    background: var(--primary-600);
    border-color: var(--primary-600);
    color: var(--neutral-50);
}

.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: var(--neutral-600);
}

/* ====================
   EMPTY / ERROR 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: var(--neutral-600);
}

.log-empty {
    padding: 40px 20px;
    text-align: center;
}

.log-empty p {
    margin: 0;
    font-size: 14px;
    color: var(--neutral-500);
}

.log-error-message {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    margin: 20px;
    background: var(--warning-100);
    color: var(--warning-900);
    border: 1px solid var(--warning-200);
    border-radius: 8px;
}

.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;
    }

    .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;
    }

    .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;
    }
}

/* 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 - the page-number buttons, prev/next, ellipsis,
 * the per-page <select>, and the "Showing X-Y of Z" summary. Flat: thin
 * neutral borders, a primary-500 fill only on the active page, no shadows.
 *
 * Self-contained - every rule is scoped under a .pagination-* class so the
 * component looks the same in any host, and it sets its own hover text colour
 * so the global <button> hover (white text on the primary fill) can't leak in.
 * Colours come from the --pagination-* tokens (config -> StyleService). The
 * prev/next chevrons are inline SVGs (injected via MediaService), recoloured by
 * currentColor. Each class keeps its own responsive overrides beside it. Markup:
 * /inc/framework/views/components/pagination.php, cloned by
 * /inc/framework/js/modules/pagination.js; wired by Pagination::css().
 */

/* Hidden <template> holder - the JS clones these; nothing here renders. */
.pagination-templates {
    display: none;
}

/* ====================
   WRAPPER
   ==================== */

.pagination-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px;
    background: var(--pagination-bg);
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 768px) { /* tablet and down */
    .pagination-wrapper {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        padding: 12px 16px;
    }
}

/* Sticky variant (e.g. server-logs tabs) - flat top divider, no shadow */
.pagination-wrapper.sticky {
    position: sticky;
    bottom: 0;
    z-index: 10;
    border-top: 1px solid var(--pagination-border);
}

/* Alternative layout - summary on the right */
.pagination-wrapper.summary-right {
    flex-direction: row-reverse;
}

/* ====================
   SUMMARY
   ==================== */

.pagination-summary {
    font-size: 14px;
    color: var(--pagination-text-muted);
    white-space: nowrap;
}

@media (max-width: 768px) { /* tablet and down */
    .pagination-summary {
        font-size: 13px;
    }
}

.pagination-summary .summary-start,
.pagination-summary .summary-end,
.pagination-summary .summary-total {
    font-weight: 600;
    color: var(--pagination-text);
}

/* ====================
   PER-PAGE SELECTOR
   ==================== */

.per-page-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--pagination-text);
    white-space: nowrap;
    margin-right: 8px;
}

.per-page-selector label,
.per-page-label {
    color: var(--pagination-text);
    font-weight: 500;
    font-size: 14px;
}

/* Custom dropdown arrow - the native one is removed (appearance: none) and an
   inline SVG is overlaid in the wrapper, so the chevron comes from the media
   config and takes its colour from currentColor, like every other icon. */
.per-page-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.per-page-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--pagination-border);
    border-radius: 6px;
    background: var(--pagination-bg);
    font-size: 14px;
    font-weight: 500;
    color: var(--pagination-text);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    min-width: 75px;
    transition: all 0.2s ease;
    height: 36px;
}

.per-page-select-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: inline-flex;
    color: var(--pagination-text);
}

.per-page-select-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.per-page-select:hover {
    background-color: var(--pagination-bg-hover);
    border-color: var(--pagination-border-hover);
}

.per-page-select:focus {
    outline: none;
    border-color: var(--pagination-border-focus);
}

@media (max-width: 768px) { /* tablet and down */
    .per-page-select {
        height: 32px;
        padding: 6px 28px 6px 10px;
        font-size: 13px;
    }
}

/* ====================
   CONTROLS
   ==================== */

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media (max-width: 768px) { /* tablet and down */
    .pagination-controls {
        width: 100%;
        justify-content: center;
    }
}

/* ====================
   BUTTONS
   ==================== */

.pagination-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--pagination-bg);
    border: 1px solid var(--pagination-border);
    border-radius: 6px;
    color: var(--pagination-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 36px;
}

/* Re-assert colour so the global button:hover (white text) can't win here. */
.pagination-button:hover:not(:disabled) {
    background: var(--pagination-bg-hover);
    border-color: var(--pagination-border-hover);
    color: var(--pagination-text);
}

.pagination-button.active {
    background: var(--pagination-active-bg);
    border-color: var(--pagination-active-bg);
    color: var(--pagination-active-text);
}

.pagination-button:disabled {
    background: var(--pagination-bg-disabled);
    opacity: 0.5;
    cursor: not-allowed;
}

@media (max-width: 768px) { /* tablet and down */
    .pagination-button {
        padding: 6px 10px;
        font-size: 13px;
        min-width: 32px;
    }
}

@media (max-width: 640px) { /* phone */
    .pagination-button {
        padding: 6px 8px;
        font-size: 12px;
    }
}

/* ====================
   ICON (inline SVG, recoloured by currentColor - no filter)
   ==================== */

.pagination-icon {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.pagination-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

@media (max-width: 768px) { /* tablet and down */
    .pagination-icon svg {
        width: 14px;
        height: 14px;
    }
}

/* ====================
   ELLIPSIS
   ==================== */

.pagination-ellipsis {
    padding: 0 4px;
    color: var(--pagination-text-muted);
    font-size: 14px;
}

/* ====================
   PREV / NEXT
   ==================== */

.pagination-prev,
.pagination-next {
    font-weight: 600;
}

.pagination-prev .pagination-icon {
    margin-right: -2px;
}

.pagination-next .pagination-icon {
    margin-left: -2px;
}

@media (max-width: 640px) { /* phone - icon only, drop the label */
    .pagination-prev,
    .pagination-next {
        min-width: 32px;
        padding: 6px;
    }

    .pagination-prev .button-content,
    .pagination-next .button-content {
        display: none;
    }
}

/* refresh-button.css */
/**
 * Refresh-button styles: the "Updated X ago" timestamp paired with a small flat
 * icon button (36x36), wrapped in .refresh-control so the pair portals into the
 * header controls region as a unit. Hover accents the button border + icon to
 * primary; :active nudges the scale; .spinning rotates the icon while a refresh
 * is in flight.
 *
 * The base button.css colours every button primary on hover/press via
 * button:hover/:active:not([disabled]) at (0,2,1); the rules here carry
 * :not([disabled]) to out-specify that and keep the button's own neutral
 * surface. Colours come from the --refresh-button-* tokens (config ->
 * StyleService); the icon is an inline SVG (injected via MediaService),
 * recoloured by currentColor. order:2 keeps the control right of the date
 * picker in the controls region regardless of init order.
 *
 * Wired by RefreshButton::css(). Markup lives in
 * /inc/framework/views/components/refresh-button.php; the timestamp ticker in
 * /inc/framework/js/modules/refresh-button.js.
 */

.refresh-control {
    display: flex;
    align-items: center;
    gap: 12px;
    order: 2;
}

.last-updated-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 12px;
    color: var(--refresh-button-text-muted);
}

.last-updated-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.last-updated-time {
    font-size: 13px;
    font-weight: 500;
    color: var(--refresh-button-text);
}

.refresh-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--refresh-button-bg);
    border: 1px solid var(--refresh-button-border);
    border-radius: 6px;
    box-shadow: none;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s, transform 0.2s;
}

@media (max-width: 768px) {
    .refresh-button {
        width: 32px;
        height: 32px;
    }
}

/* :not([disabled]) so the button out-specifies button.css's button:hover /
   :active (0,2,1) and keeps its own neutral surface, not the primary fill. */
.refresh-button:hover:not([disabled]) {
    background: var(--refresh-button-bg-hover);
    border-color: var(--refresh-button-border-hover);
}

.refresh-button:active:not([disabled]) {
    background: var(--refresh-button-bg-hover);
    transform: scale(0.95);
}

.refresh-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.refresh-icon {
    width: 18px;
    height: 18px;
    display: block;
    color: var(--refresh-button-icon);
}

@media (max-width: 768px) {
    .refresh-icon {
        width: 16px;
        height: 16px;
    }
}

.refresh-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.refresh-button:hover:not([disabled]) .refresh-icon {
    color: var(--refresh-button-icon-hover);
}

.refresh-icon.spinning {
    animation: refresh-button-spin 1s linear infinite;
}

@keyframes refresh-button-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* row.css */
/**
 * Row appearance - what a <tr> looks like, on its own. Every row renders with a
 * base `.row`; the data row's stripe is `.row-zebra` and a breakdown child is
 * `.sub-row`. Scoping to the class, not to a .data-table-container wrapper,
 * lets a `.row` work inside a plain <table>. Owned by Row (the row templates
 * are shipped by Row::render()); the .row-zebra class is applied by
 * data-table.js, which knows each row's data-index.
 *
 * Sub-rows take their parent's shade: data-table.js copies the parent's
 * `.row-zebra` state onto each child, so an expanded block reads as one colour
 * and the children are set apart by indent + smaller muted text, not by a
 * competing background. The sticky first-cell repaints live in data-table.css.
 * Colours reference the --row-* variables from the leadthink-app config.
 */

.row {
    border-bottom: 1px solid var(--row-border);
    background-color: var(--row-bg);
    transition: background-color 0.2s;
}

/* Zebra striping */
.row.row-zebra {
    background-color: var(--row-bg-zebra);
}

/* Hover - orientation feedback, every row including sub-rows. Must follow
   .row-zebra so it wins on a striped row (equal specificity, last one wins). */
.row:hover {
    background-color: var(--row-bg-hover);
}

/* ====================
   BREAKDOWN SUB-ROWS - indent + muted text; background inherited from the
   parent's stripe state (.row / .row-zebra, copied on by data-table.js)
   ==================== */

.row.sub-row td {
    font-size: 13px;
    color: var(--row-sub-text);
}

.row.sub-row td:first-child {
    padding-left: 48px;
}

/* select.css */
/* Select component - a native <select> with the browser arrow removed and our
   own currentColor chevron overlaid, so the control inherits colour and theming
   like the rest of the form controls. It sizes to its widest option (native).
   Pairs with Select.php and the view at views/components/select.php. */

.select {
	position: relative;
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
}

.select .select-input {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	font: inherit;
	color: var(--select-text);
	background: var(--select-surface);
	border: 1px solid var(--select-border);
	border-radius: 6px;
	padding: 5px 30px 5px 11px;
	margin: 0;
	outline: none;
	cursor: pointer;
	box-sizing: border-box;
}
.select .select-input:hover:not(:disabled) { border-color: var(--select-border-hover); }
.select .select-input:focus { border-color: var(--select-accent); }
.select .select-input:disabled {
	color: var(--select-disabled-text);
	background: var(--select-disabled-bg);
	cursor: default;
}

/* Our arrow: a currentColor chevron pinned right, click-through so the native
   control still opens. Colour follows --select-arrow. */
.select .select-arrow {
	position: absolute;
	right: 9px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	color: var(--select-arrow);
	pointer-events: none;
}
.select .select-arrow svg { width: 16px; height: 16px; display: block; }

/* sidebar-nav.css */
/**
 * Sidebar-nav component styles - the app's persistent left navigation rail:
 * brand + collapse toggle in the header, expandable sections (icon, label,
 * +/- toggle, optional badge, and a submenu of links / subgroups / dividers), and a
 * footer. Flat throughout - thin neutral-200 lines do the separating, no
 * shadows or gradients.
 *
 * Width is one variable. --sidebar-width (set on body, inherited here) sizes
 * the rail; body.has-sidebar reads the same variable for its left margin, so
 * the content - and the app-header-bar inside it - tracks the rail width with
 * no JS measuring. body.sidebar-collapsed flips the variable to the narrow
 * value and the rail becomes an icons-only strip (labels / toggles / submenus
 * hidden). The toggle is the only JS; the resize is pure CSS.
 *
 * Mobile (<= 768px) keeps the overlay pattern: a narrow rail by default that
 * slides out to full width over a scrim when .mobile-open is set.
 *
 * Colours come from the --sidebar-nav-* tokens (config -> StyleService). Wired
 * by SidebarNav::css(); markup in
 * /inc/framework/views/components/sidebar-nav.php; behavior (toggle, section
 * expand, mobile, badge refresh) in /inc/framework/js/modules/sidebar-nav.js.
 */

/* ====================
   WIDTH VARIABLE + CONTENT OFFSET
   ==================== */

body {
    --sidebar-width: 240px;
}

body.sidebar-collapsed {
    --sidebar-width: 64px;
}

/* Push content clear of the fixed rail; rail width and this margin read the
   one variable, so the content (and the header bar in it) tracks the rail. */
body.has-sidebar {
    margin-left: var(--sidebar-width);
    transition: margin-left 0.2s ease;
}

/* ====================
   CONTAINER
   ==================== */

.sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--sidebar-nav-bg);
    border-right: 1px solid var(--sidebar-nav-border);
    display: flex;
    flex-direction: column;
    z-index: 1000;
    transition: width 0.2s ease;
}

.sidebar-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* ====================
   HEADER (brand + collapse toggle)
   ==================== */

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: var(--app-header-height);
    padding: 0 20px;
    border-bottom: 1px solid var(--sidebar-nav-border);
    flex-shrink: 0;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.brand-logo-icon {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.sidebar-nav .brand-logo-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.brand-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--sidebar-nav-text-strong);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapse toggle - swaps its icon by state (two icons, no rotation) */
.sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    padding: 0;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--sidebar-nav-toggle);
    cursor: pointer;
}

.sidebar-nav .sidebar-toggle:hover {
    background: var(--sidebar-nav-hover-bg);
}

.sidebar-toggle svg {
    width: 18px;
    height: 18px;
}

.sidebar-toggle .toggle-icon-expand {
    display: none;
}

/* ====================
   NAVIGATION ITEMS
   ==================== */

.sidebar-nav-items {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0;
}

.nav-section {
    margin-bottom: 2px;
}

.sidebar-nav .nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 16px;
    border: none;
    border-radius: 0;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    color: var(--sidebar-nav-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
}

.sidebar-nav .nav-item:hover {
    background: var(--sidebar-nav-hover-bg);
    color: var(--sidebar-nav-text-strong);
}

.sidebar-nav .nav-item.active {
    background: var(--sidebar-nav-active-bg);
    color: var(--sidebar-nav-active-text);
    font-weight: 600;
}

.sidebar-nav .nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sidebar-nav-active-text);
}

.nav-icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    opacity: 0.7;
}

.sidebar-nav .nav-icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

.sidebar-nav .nav-item:hover .nav-icon,
.sidebar-nav .nav-item.active .nav-icon {
    opacity: 1;
}

.nav-label {
    display: block;
    flex: 1;
    text-align: left;
}

.nav-arrow {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    opacity: 0.5;
}

.sidebar-nav .nav-arrow svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Section expand state - plus when collapsed, minus when expanded. */
.sidebar-nav .nav-arrow-collapsed {
    display: inline-flex;
}

.sidebar-nav .nav-arrow-expanded {
    display: none;
}

.sidebar-nav .nav-item.expanded .nav-arrow-collapsed {
    display: none;
}

.sidebar-nav .nav-item.expanded .nav-arrow-expanded {
    display: inline-flex;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--sidebar-nav-badge-bg);
    color: var(--sidebar-nav-badge-text);
    font-size: 11px;
    font-weight: 600;
    border-radius: 10px;
}

/* ====================
   SUBMENU
   ==================== */

.nav-submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.nav-submenu.expanded {
    max-height: 1000px;
}

.nav-subitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px 6px 28px;
    color: var(--sidebar-nav-text-muted);
    font-size: 13px;
    text-decoration: none;
    white-space: nowrap;
}

/* a:visited outranks .nav-subitem alone, so set the colour back explicitly. */
.nav-subitem:link,
.nav-subitem:visited {
    color: var(--sidebar-nav-text-muted);
}

.nav-subitem:hover {
    background: var(--sidebar-nav-hover-bg);
    color: var(--sidebar-nav-text-strong);
}

.nav-subitem.active,
.nav-subitem.active:link,
.nav-subitem.active:visited {
    background: var(--sidebar-nav-active-bg);
    color: var(--sidebar-nav-active-text);
    font-weight: 600;
    position: relative;
}

.nav-subitem.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--sidebar-nav-active-text);
}

.nav-subgroup {
    margin: 6px 0;
}

.nav-subgroup-label {
    display: block;
    padding: 8px 16px 4px 28px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sidebar-nav-text-faint);
}

.nav-divider {
    display: block;
    height: 1px;
    background: var(--sidebar-nav-border);
    margin: 8px 16px 8px 28px;
}

/* Version tag appended to a report's label (e.g. "Affiliate Report v2"). */
.nav-subitem .nav-v2 {
    margin-left: 6px;
    font-weight: 700;
}

/* ====================
   FOOTER
   ==================== */

.sidebar-footer {
    border-top: 1px solid var(--sidebar-nav-border);
    padding: 8px 0;
    flex-shrink: 0;
}

.nav-item-footer {
    padding: 8px 16px;
}

.nav-item-footer .nav-icon {
    opacity: 0.6;
}

.nav-item-footer:hover .nav-icon {
    opacity: 1;
}

/* ====================
   COLLAPSED (icons-only rail; desktop toggle)
   ==================== */

body.sidebar-collapsed .sidebar-header {
    justify-content: center;
    padding: 0;
}

body.sidebar-collapsed .sidebar-brand {
    display: none;
}

body.sidebar-collapsed .sidebar-toggle .toggle-icon-collapse {
    display: none;
}

body.sidebar-collapsed .sidebar-toggle .toggle-icon-expand {
    display: inline-flex;
}

body.sidebar-collapsed .nav-item,
body.sidebar-collapsed .nav-item-footer {
    justify-content: center;
    padding: 12px 0;
}

body.sidebar-collapsed .nav-icon {
    margin: 0 auto;
}

body.sidebar-collapsed .nav-label,
body.sidebar-collapsed .nav-arrow,
body.sidebar-collapsed .nav-badge,
body.sidebar-collapsed .nav-submenu,
body.sidebar-collapsed .nav-subgroup-label,
body.sidebar-collapsed .nav-divider {
    display: none;
}

/* The rail's empty stretch is a click target that expands it (see
   sidebar-nav.js), so show the pointer to read as clickable. */
body.sidebar-collapsed .sidebar-nav-items {
    cursor: pointer;
}

/* ====================
   OVERLAY (mobile scrim)
   ==================== */

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: color-mix(in srgb, var(--sidebar-nav-overlay-bg) 50%, transparent);
    z-index: 999;
    pointer-events: none;
}

.sidebar-overlay.active {
    display: block;
    pointer-events: auto;
}

/* ====================
   SCROLLBAR
   ==================== */

.sidebar-nav-items::-webkit-scrollbar {
    width: 6px;
}

.sidebar-nav-items::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav-items::-webkit-scrollbar-thumb {
    background: var(--sidebar-nav-scrollbar-thumb);
    border-radius: 3px;
}

.sidebar-nav-items::-webkit-scrollbar-thumb:hover {
    background: var(--sidebar-nav-scrollbar-thumb-hover);
}

/* ====================
   MOBILE (overlay rail; tablet and down)
   ==================== */

@media (max-width: 768px) {
    /* Rail by default; full width over the scrim when open. */
    body.has-sidebar {
        margin-left: 64px;
    }

    .sidebar-nav {
        width: 64px;
    }

    .sidebar-nav .sidebar-header {
        justify-content: center;
        padding: 0;
    }

    .sidebar-nav .sidebar-brand,
    .sidebar-nav .nav-label,
    .sidebar-nav .nav-arrow,
    .sidebar-nav .nav-badge,
    .sidebar-nav .nav-submenu,
    .sidebar-nav .nav-subgroup-label,
    .sidebar-nav .nav-divider {
        display: none;
    }

    .sidebar-nav .nav-item,
    .sidebar-nav .nav-item-footer {
        justify-content: center;
        padding: 12px 0;
    }

    .sidebar-nav .nav-icon {
        margin: 0 auto;
    }

    /* Rail shows the expand icon; open shows the collapse icon. */
    .sidebar-nav .sidebar-toggle .toggle-icon-collapse {
        display: none;
    }

    .sidebar-nav .sidebar-toggle .toggle-icon-expand {
        display: inline-flex;
    }

    /* Open: expand and reveal. */
    .sidebar-nav.mobile-open {
        width: 280px;
    }

    .sidebar-nav.mobile-open .sidebar-header {
        justify-content: space-between;
        padding: 0 20px;
    }

    .sidebar-nav.mobile-open .sidebar-brand {
        display: flex;
    }

    .sidebar-nav.mobile-open .nav-label,
    .sidebar-nav.mobile-open .nav-arrow,
    .sidebar-nav.mobile-open .nav-subgroup-label,
    .sidebar-nav.mobile-open .nav-divider {
        display: block;
    }

    .sidebar-nav.mobile-open .nav-badge {
        display: inline-flex;
    }

    .sidebar-nav.mobile-open .nav-submenu {
        display: block;
    }

    .sidebar-nav.mobile-open .nav-item,
    .sidebar-nav.mobile-open .nav-item-footer {
        justify-content: flex-start;
        padding: 8px 16px;
    }

    .sidebar-nav.mobile-open .nav-icon {
        margin: 0;
    }

    .sidebar-nav.mobile-open .sidebar-toggle .toggle-icon-collapse {
        display: inline-flex;
    }

    .sidebar-nav.mobile-open .sidebar-toggle .toggle-icon-expand {
        display: none;
    }
}

/* 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-viewer-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-viewer-header-content {
    flex: 1;
    padding-right: 16px;
}

.sidebar-viewer-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.sidebar-viewer-subtitle {
    font-size: 13px;
    color: #3b82f6;
    margin: 4px 0 0 0;
    display: block;
    text-decoration: none;
    word-break: break-all;
}

.sidebar-viewer-subtitle:hover {
    text-decoration: underline;
}

.sidebar-viewer-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-viewer-close:hover {
    background-color: #f3f4f6;
    color: #374151;
}

/* Sidebar Body */
.sidebar-viewer-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-viewer-body::-webkit-scrollbar {
    width: 6px;
}

.sidebar-viewer-body::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-viewer-body::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}

.sidebar-viewer-body::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar-viewer-panel {
        width: 100%;
        right: -100%;
    }

    .sidebar-viewer-header {
        padding: 20px;
    }

    .sidebar-viewer-body {
        padding: 20px;
    }

    .config-section {
        padding: 16px;
    }

    .palette-preview {
        padding: 8px;
    }

    .color-swatch {
        width: 32px;
        height: 32px;
    }
}

/* skeleton.css */
/**
 * Skeleton - the shared loading-placeholder primitive. Any element with the
 * .skeleton class becomes a shimmering grey block; a component arranges these
 * into its own loading shape (the data-table builds rows in data-table.css, a
 * card would stack a few lines in its own CSS). Colours come from the
 * --skeleton-* variables; the shimmer is a light band swept across the block
 * by the background-position animation.
 *
 * Honours prefers-reduced-motion: the sweep stops and the block sits flat.
 * Auto-bundled by StyleService.
 */

.skeleton {
    background-color: var(--skeleton-base);
    background-image: linear-gradient(
        90deg,
        var(--skeleton-base) 0%,
        var(--skeleton-highlight) 50%,
        var(--skeleton-base) 100%
    );
    background-size: 200% 100%;
    background-repeat: no-repeat;
    border-radius: 4px;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        background-image: none;
        animation: none;
    }
}

/* smart-filter-bar.css */
/*
 * Smart filter bar - the unified-chip filter UI. Styles the search icon and
 * input, the committed chips, the inline editor (operator / number / text /
 * multi-select), the search dropdown, and the checkbox pills, all on one
 * Field: value grammar.
 *
 * Pairs with the view at views/components/smart-filter-bar.php and the behavior
 * in js/modules/smart-filter-bar.js. Colours come from the smart-filter-bar
 * token block in config/css/styles/leadthink-app.php (primary = sky,
 * neutral = zinc); this file references only those tokens, never raw hex.
 * Flat throughout - separation is borders and surfaces, focus rides on
 * border-colour, no shadows. Everything is scoped under .smart-filter-bar; the
 * icon buttons carry an explicit colour and a :hover:not([disabled]) rule so
 * the global button styles can't repaint them. Suggestion and option pills
 * stack top to bottom as a list, never side by side.
 */

/* ---- bar shell ---- */
.smart-filter-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	position: relative;
	flex-wrap: wrap;
}

.filter-input-wrapper {
	flex: 1 1 320px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	padding: 8px 12px;
	background: var(--smart-filter-bar-surface);
	border: 1px solid var(--smart-filter-bar-border);
	border-radius: 12px;
}
.filter-input-wrapper:focus-within {
	border-color: var(--smart-filter-bar-accent);
}

.smart-filter-bar .filter-icon {
	display: inline-flex;
	align-items: center;
	color: var(--smart-filter-bar-text-muted);
	flex-shrink: 0;
}
.smart-filter-bar .filter-icon svg { width: 17px; height: 17px; display: block; }

.smart-filter-bar .filter-input {
	flex: 1 1 140px;
	min-width: 120px;
	border: none;
	outline: none;
	background: transparent;
	font: inherit;
	color: var(--smart-filter-bar-text);
	padding: 4px 0;
}
.smart-filter-bar .filter-input::placeholder { color: var(--smart-filter-bar-border-hover); }

/* The search field is a plain input at rest and becomes a Search: chip while
   focused, matching the chip grammar used by committed filters. */
.smart-filter-bar .search-chip {
	position: relative;
	display: flex;
	align-items: center;
	gap: 4px;
	flex: 1 1 160px;
	min-width: 140px;
	padding: 4px 8px;
	border: 1px solid transparent;
	border-radius: 9px;
	box-sizing: border-box;
}
/* Active: hug content from a sensible minimum and grow as the user types
   (width is driven in JS from the hidden sizer below). */
.smart-filter-bar .search-chip.active {
	flex: 0 1 auto;
	background: var(--smart-filter-bar-accent-bg);
	border-color: var(--smart-filter-bar-accent);
}
.smart-filter-bar .search-chip.active .filter-input { flex: 0 0 auto; min-width: 120px; border: 1px solid var(--smart-filter-bar-border-strong); border-radius: 6px; background: var(--smart-filter-bar-surface); padding: 4px 8px; box-sizing: border-box; }
.smart-filter-bar .search-sizer {
	position: absolute;
	left: 0;
	top: 0;
	visibility: hidden;
	white-space: pre;
	pointer-events: none;
	font: inherit;
}
.smart-filter-bar .search-label,
.smart-filter-bar .search-colon {
	display: none;
	font-size: 14px;
	color: var(--smart-filter-bar-text-muted);
}
.smart-filter-bar .search-chip.active .search-label,
.smart-filter-bar .search-chip.active .search-colon { display: inline; }
.smart-filter-bar .search-chip.active .search-colon { margin-right: 2px; }

.smart-filter-bar-extras {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* ---- committed chip: Field: value ---- */
.smart-filter-bar .chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 7px 7px 12px;
	border-radius: 9px;
	font-size: 14px;
	line-height: 1;
	background: var(--smart-filter-bar-accent-bg);
	border: 1px solid var(--smart-filter-bar-accent-pale);
	color: var(--smart-filter-bar-text);
	white-space: nowrap;
	max-width: 100%;
	cursor: pointer;
}
.smart-filter-bar .chip:hover { border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .chip-field { font-weight: 550; }
.smart-filter-bar .chip-colon { color: var(--smart-filter-bar-text-muted); margin-right: 3px; }
/* Value text truncates with an ellipsis only inside a committed chip, where
   the bar stays compact; dropdown pills render the full label, so the t-pill
   and s-pill emitters size identically with no cutting off. */
.smart-filter-bar .chip-value { font-weight: 450; }
.smart-filter-bar .chip .chip-value {
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 24ch;
}
.smart-filter-bar .chip-op { color: var(--smart-filter-bar-text-muted); font-weight: 500; margin-right: 3px; }

/* icon buttons carry explicit colour + a high-specificity hover so the global
   button rule (near-white text, dark hover fill) can't reach them */
.smart-filter-bar .chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 19px;
	height: 19px;
	padding: 0;
	margin-left: 2px;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--smart-filter-bar-text);
	cursor: pointer;
	flex-shrink: 0;
}
.smart-filter-bar .chip-remove svg { width: 13px; height: 13px; display: block; }
.smart-filter-bar .chip-remove:hover:not([disabled]) {
	background: color-mix(in srgb, var(--smart-filter-bar-text) 9%, transparent);
	color: var(--smart-filter-bar-text);
}

/* ---- inline editor (an open chip) ---- */
.smart-filter-bar .filter-editor {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 7px 5px 12px;
	border-radius: 9px;
	font-size: 14px;
	line-height: 1;
	background: var(--smart-filter-bar-accent-bg);
	border: 1.5px solid var(--smart-filter-bar-accent);
	color: var(--smart-filter-bar-text);
	position: relative;
	flex-wrap: wrap;
	max-width: 100%;
}
.smart-filter-bar .filter-editor .chip-field { font-weight: 550; }
.smart-filter-bar .filter-editor .chip-colon { color: var(--smart-filter-bar-text-muted); margin-right: 2px; }
.smart-filter-bar .editor-body { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.smart-filter-bar .editor-values { display: inline-flex; align-items: center; gap: 6px; }

.smart-filter-bar .editor-number { display: inline-flex; align-items: center; gap: 4px; }
.smart-filter-bar .editor-adorn { color: var(--smart-filter-bar-text-muted); font-weight: 500; }
.smart-filter-bar .editor-adorn:empty { display: none; }
.smart-filter-bar .editor-value {
	font: inherit;
	color: var(--smart-filter-bar-text);
	border: 1px solid var(--smart-filter-bar-border);
	border-radius: 6px;
	padding: 5px 8px;
	background: var(--smart-filter-bar-surface);
	outline: none;
	min-width: 54px;
	width: 110px;
}
.smart-filter-bar .editor-number .editor-value { width: 92px; text-align: right; }
.smart-filter-bar .editor-value:focus { border-color: var(--smart-filter-bar-accent); }

.smart-filter-bar .editor-multi { display: inline-flex; align-items: center; gap: 6px; }
.smart-filter-bar .editor-search-icon { display: inline-flex; color: var(--smart-filter-bar-text-muted); }
.smart-filter-bar .editor-search-icon svg { width: 15px; height: 15px; display: block; }
.smart-filter-bar .editor-search {
	font: inherit;
	color: var(--smart-filter-bar-text);
	border: 1px solid var(--smart-filter-bar-border);
	border-radius: 6px;
	padding: 5px 8px;
	background: var(--smart-filter-bar-surface);
	outline: none;
	width: 160px;
}
.smart-filter-bar .editor-search:focus { border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .editor-count { font-size: 13px; color: var(--smart-filter-bar-text-muted); }
.smart-filter-bar .editor-count.has { color: var(--smart-filter-bar-accent); font-weight: 600; }

/* scrollable checkbox-pill list under the editor row - stacked top to bottom */
.smart-filter-bar .editor-list {
	flex-basis: 100%;
	margin-top: 8px;
	max-height: 220px;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 6px;
	background: var(--smart-filter-bar-control-bg);
	border: 1px solid var(--smart-filter-bar-border);
	border-radius: 9px;
}
.smart-filter-bar .editor-list::-webkit-scrollbar { width: 10px; }
.smart-filter-bar .editor-list::-webkit-scrollbar-thumb {
	background: var(--smart-filter-bar-scrollbar);
	border-radius: 6px;
	border: 2px solid var(--smart-filter-bar-control-bg);
}
.smart-filter-bar .editor-list::-webkit-scrollbar-thumb:hover { background: var(--smart-filter-bar-scrollbar-hover); }

.smart-filter-bar .editor-save,
.smart-filter-bar .editor-cancel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 23px;
	height: 23px;
	padding: 0;
	border: none;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}
.smart-filter-bar .editor-save { color: var(--smart-filter-bar-accent); }
.smart-filter-bar .editor-cancel { color: var(--smart-filter-bar-text); }
.smart-filter-bar .editor-save svg,
.smart-filter-bar .editor-cancel svg { width: 15px; height: 15px; display: block; }
.smart-filter-bar .editor-save:hover:not([disabled]) { background: color-mix(in srgb, var(--smart-filter-bar-accent) 12%, transparent); color: var(--smart-filter-bar-accent); }
.smart-filter-bar .editor-cancel:hover:not([disabled]) { background: color-mix(in srgb, var(--smart-filter-bar-text) 9%, transparent); color: var(--smart-filter-bar-text); }

/* inline conflict message (the light-pink "not allowed" line) */
.smart-filter-bar .editor-error {
	display: none;
	flex-basis: 100%;
	margin-top: 7px;
	padding: 7px 10px;
	font-size: 13px;
	border-radius: 7px;
	background: var(--smart-filter-bar-invalid-bg);
	color: var(--smart-filter-bar-invalid-text);
	border: 1px solid var(--smart-filter-bar-invalid-border);
}

/* ---- pills shared: full-width rows so a pill-row / list reads top to bottom ---- */
.smart-filter-bar .cpill,
.smart-filter-bar .t-pill,
.smart-filter-bar .s-pill {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border-radius: 9px;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
	box-sizing: border-box;
	transition: border-color 0.1s ease, background-color 0.1s ease;
}
.smart-filter-bar .cpill .chip-field,
.smart-filter-bar .t-pill .chip-field,
.smart-filter-bar .s-pill .chip-field { font-weight: 550; }
.smart-filter-bar .cpill .chip-colon,
.smart-filter-bar .t-pill .chip-colon,
.smart-filter-bar .s-pill .chip-colon { color: var(--smart-filter-bar-text-muted); margin-right: 2px; }
.smart-filter-bar .cpill .chip-value,
.smart-filter-bar .s-pill .chip-value { font-weight: 450; }
.smart-filter-bar .t-pill,
.smart-filter-bar .s-pill { white-space: nowrap; }
.smart-filter-bar .search-clear {
	display: none;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 2px;
	padding: 0;
	border: none;
	border-radius: 5px;
	background: transparent;
	color: var(--smart-filter-bar-text-muted);
	cursor: pointer;
	flex-shrink: 0;
}
.smart-filter-bar .search-chip.active .search-clear { display: inline-flex; }
.smart-filter-bar .search-clear:hover:not([disabled]) { background: var(--smart-filter-bar-surface-hover); color: var(--smart-filter-bar-text); }
.smart-filter-bar .search-clear svg { width: 13px; height: 13px; display: block; }

/* checkbox pill (search matches + editor options) */
.smart-filter-bar .cpill {
	background: var(--smart-filter-bar-surface);
	border: 1px solid var(--smart-filter-bar-border-strong);
	color: var(--smart-filter-bar-text);
}
.smart-filter-bar .cpill:hover { border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .cpill.on { background: var(--smart-filter-bar-accent-bg); border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .cpill-box {
	width: 16px;
	height: 16px;
	border-radius: 5px;
	border: 1.5px solid var(--smart-filter-bar-border-strong);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--smart-filter-bar-surface);
}
.smart-filter-bar .cpill-box svg { width: 11px; height: 11px; display: none; }
.smart-filter-bar .cpill.on .cpill-box { background: var(--smart-filter-bar-accent); border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .cpill.on .cpill-box svg { display: block; }

/* empty field-template pill (search, no query) */
.smart-filter-bar .t-pill {
	background: var(--smart-filter-bar-surface);
	border: 1px solid var(--smart-filter-bar-border-strong);
	color: var(--smart-filter-bar-text);
}
.smart-filter-bar .t-pill:hover { border-color: var(--smart-filter-bar-accent); background: var(--smart-filter-bar-accent-bg); }
.smart-filter-bar .t-pill .t-ghost { color: var(--smart-filter-bar-text-muted); }

/* single-add match pill (search, typing) */
.smart-filter-bar .s-pill {
	background: var(--smart-filter-bar-surface);
	border: 1px solid var(--smart-filter-bar-border-strong);
	color: var(--smart-filter-bar-text);
}
.smart-filter-bar .s-pill:hover { border-color: var(--smart-filter-bar-accent); background: var(--smart-filter-bar-accent-bg); }
.smart-filter-bar .s-pill.added { background: var(--smart-filter-bar-accent-pale); border-color: var(--smart-filter-bar-accent); }
.smart-filter-bar .s-pill.added .chip-field,
.smart-filter-bar .s-pill.added .chip-value { color: var(--smart-filter-bar-accent); }

.smart-filter-bar .cpill mark,
.smart-filter-bar .s-pill mark {
	background: transparent;
	color: var(--smart-filter-bar-accent);
	font-weight: 700;
}

/* ---- search dropdown ---- */
.filter-suggestions {
	display: none;
	position: fixed;
	z-index: 9000;
	padding: 8px 10px;
	background: var(--smart-filter-bar-surface);
	border: 1px solid var(--smart-filter-bar-border);
	border-radius: 12px;
	max-height: 440px;
	overflow: auto;
}
.filter-suggestions .suggestion-group { margin-bottom: 4px; }
.filter-suggestions .suggestion-group-header {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--smart-filter-bar-text-muted);
	margin: 10px 2px 7px;
}
.filter-suggestions .suggestion-group:first-child .suggestion-group-header { margin-top: 2px; }
/* One pill per row, always: the dropdown reads as a single top-to-bottom list
   in every state, never a side-by-side grid. */
.filter-suggestions .pill-row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.search-add { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.smart-filter-bar .search-add-button {
	font: inherit;
	font-weight: 550;
	font-size: 14px;
	color: var(--smart-filter-bar-surface);
	background: var(--smart-filter-bar-accent);
	border: none;
	border-radius: 8px;
	padding: 9px 16px;
	cursor: pointer;
}
.smart-filter-bar .search-add-button[disabled] { background: var(--smart-filter-bar-border-strong); cursor: default; }
.search-add-hint { font-size: 13px; color: var(--smart-filter-bar-text-muted); }
.filter-suggestions .dropdown-msg { width: max-content; max-width: 100%; padding: 6px 6px 2px; font-size: 13px; color: var(--smart-filter-bar-text-muted); }
.filter-suggestions .pill-row + .dropdown-msg { margin-top: 8px; }
.filter-suggestions .dropdown-msg + .pill-row { margin-top: 8px; }

/* ---- clear all ---- */
.smart-filter-bar .clear-filters {
	display: none;
	font: inherit;
	font-size: 13px;
	color: var(--smart-filter-bar-text-muted);
	background: transparent;
	border: none;
	padding: 6px 8px;
	cursor: pointer;
	flex-shrink: 0;
}
.smart-filter-bar .clear-filters:hover:not([disabled]) { color: var(--smart-filter-bar-text); }

/* ---- incompatible-filter warning ---- */
.subscription-warning-icon {
	display: none;
	align-items: center;
	color: var(--smart-filter-bar-warning-icon);
	flex-shrink: 0;
}
.subscription-warning-icon svg { width: 18px; height: 18px; display: block; }

/* ---- chip tooltip (full value list / long value) ---- */
.chip-tooltip {
	position: absolute;
	z-index: 1001;
	padding: 8px 10px;
	background: var(--smart-filter-bar-tooltip-bg);
	color: var(--smart-filter-bar-surface);
	border-radius: 8px;
	font-size: 13px;
	max-width: 280px;
}
.chip-tooltip-item { padding: 2px 0; }
.chip-tooltip-arrow {
	position: absolute;
	width: 8px;
	height: 8px;
	background: var(--smart-filter-bar-tooltip-bg);
	transform: rotate(45deg);
}

/* ---- narrow screens: the bar wraps, the dropdown spans it ---- */
@media (max-width: 640px) {
	.filter-input-wrapper { flex-basis: 100%; } /* sm 640px and down */
	.filter-suggestions { max-height: 60vh; }
}


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

/* app.css */
/**
 * Main content area for the LeadThink app. Inside body (which is a flex row
 * holding the sidebar + main), <main> is the column that holds the page's
 * stacked components - PageHeaderBar, SmartFilterBar, DataTable, etc.
 *
 * Bare-bones on purpose: <main>'s only job is to stack components vertically
 * with consistent outer padding and inter-component gap. Anything more complex
 * (horizontal splits, tabs, grids) lives inside a component, not here. The
 * last child (typically the data table) grows to fill remaining space; that's
 * what makes the table fill the viewport without needing viewport math.
 *
 * The outer padding is published as the --app-padding custom property so a
 * full-bleed component - the page header bar - can cancel it with a negative
 * margin and sit flush against the top and sides.
 */

:root {
    /* Shared height for the app's chrome bars so the sidebar header and the
       page header bar line up - their bottom borders form one continuous line
       across the sidebar / content boundary. */
    --app-header-height: 64px;
}

main {
    --app-padding: 12px;

    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--app-padding);
    gap: var(--app-padding);
    height: 100vh;
    overflow: hidden;
}

main > *:last-child {
    flex: 1;
    min-height: 0;
}