/**
 * ============================================================================
 * KEYSTONEX ENTERPRISE UI — 4-LAYER MODULAR DESIGN SYSTEM
 * Synchronized with KeystoneX Accounting App (keystonex.local)
 * ============================================================================
 */

:root,
html:not(.dark),
[data-bs-theme="light"] {
    /* 1. Brand Core */
    --kx-brand-primary: #4fa2b5;
    --kx-brand-primary-rgb: 79, 162, 181;
    --kx-brand-primary-hover: #3b8496;
    --kx-brand-primary-subtle: rgba(79, 162, 181, 0.12);
    --kx-brand-primary-border: rgba(79, 162, 181, 0.28);
    --kx-brand-primary-glow: 0 4px 12px rgba(79, 162, 181, 0.25);

    /* Bootstrap Variable Sync */
    --bs-primary: var(--kx-brand-primary);
    --bs-primary-rgb: var(--kx-brand-primary-rgb);
    --bs-link-color: var(--kx-brand-primary);
    --bs-link-hover-color: var(--kx-brand-primary-hover);

    /* 2. Extended Semantic Palette (Light Mode — High Contrast) */
    --kx-purple: #7c3aed;
    --kx-purple-rgb: 124, 58, 237;
    --kx-indigo: #4f46e5;
    --kx-indigo-rgb: 79, 70, 229;
    --kx-teal: #0d9488;
    --kx-teal-rgb: 13, 148, 136;
    --kx-orange: #ea580c;
    --kx-orange-rgb: 234, 88, 12;
    --kx-info: #0284c7;
    --kx-info-rgb: 2, 132, 199;
    --kx-warning: #b45309;
    --kx-warning-rgb: 180, 83, 9;
    --kx-success: #15803d;
    --kx-success-rgb: 21, 128, 61;
    --kx-danger: #dc2626;
    --kx-danger-rgb: 220, 38, 38;
    --kx-secondary: #475569;
    --kx-secondary-rgb: 71, 85, 105;

    /* 3. Surface & Canvas Hierarchy (Light Mode) */
    --kx-bg-canvas: #dedfe0;
    --kx-bg-surface: #ffffff;
    --kx-bg-elevated: #f8f9fb;
    --kx-bg-input: #f3f5f8;
    --kx-border-color: #e2e3e5;
    --kx-border-subtle: rgba(0, 0, 0, 0.06);
    --kx-text-main: #212529;
    --kx-text-primary: #212529;
    --kx-text-muted: #64748b;

    /* 4. Typography & Geometry */
    --kx-font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --kx-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    --kx-radius-sm: 0.375rem;
    --kx-radius-md: 0.5rem;
    --kx-radius-lg: 0.75rem;
    --kx-radius-xl: 1rem;
    --kx-radius-pill: 50rem;

    /* 5. Component Sizing Standards */
    --kx-sidebar-width: 268px;
    --kx-navbar-height: 64px;
    --kx-field-height: 36px;
    --kx-btn-pill-height: 36px;
    --kx-btn-pill-font-size: 0.8125rem;
    --kx-btn-group-gap: 0.5rem;
    --kx-badge-height: 26px;
    --kx-action-icon-size: 32px;
    --kx-action-icon-gap: 0.375rem;
    --kx-search-height-sm: 36px;
    --kx-search-height-md: 36px;
    --kx-search-radius: 0.5rem;
    --kx-tab-gap: 0.45rem;
    --kx-tab-height: 36px;
    --kx-tab-radius: 8px;
    --kx-tab-track-bg: rgba(15, 23, 42, 0.04);
    --kx-tab-hover-bg: rgba(var(--bs-primary-rgb), 0.10);
    --kx-tab-hover-text: var(--kx-brand-primary);
    --kx-row-hover-bg: rgba(var(--bs-primary-rgb), 0.06);
    --kx-thead-bg: #eef6f8;
    --kx-thead-text: var(--kx-brand-primary);
    --kx-thead-border: #cde4ea;
    --kx-thead-font-size: 0.75rem;
    --kx-thead-transform: uppercase;

    /* 6. Elevation Shadows */
    --kx-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --kx-shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.06);
    --kx-shadow-md: 0 6px 16px rgba(15, 23, 42, 0.08);
    --kx-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
}

html.dark,
[data-bs-theme="dark"] {
    /* 1. Brand Core (Dark Mode) */
    --kx-brand-primary-subtle: rgba(var(--bs-primary-rgb), 0.18);
    --kx-brand-primary-border: rgba(var(--bs-primary-rgb), 0.38);

    /* 2. Extended Semantic Palette (Dark Mode — Luminous Pastel Legibility) */
    --kx-purple: #c084fc;
    --kx-purple-rgb: 192, 132, 252;
    --kx-indigo: #818cf8;
    --kx-indigo-rgb: 129, 140, 248;
    --kx-teal: #2dd4bf;
    --kx-teal-rgb: 45, 212, 191;
    --kx-orange: #fb923c;
    --kx-orange-rgb: 251, 146, 60;
    --kx-info: #38bdf8;
    --kx-info-rgb: 56, 189, 248;
    --kx-warning: #fbbf24;
    --kx-warning-rgb: 251, 191, 36;
    --kx-success: #4ade80;
    --kx-success-rgb: 74, 222, 128;
    --kx-danger: #f87171;
    --kx-danger-rgb: 248, 113, 113;
    --kx-secondary: #94a3b8;
    --kx-secondary-rgb: 148, 163, 184;

    /* 3. Surface & Canvas Hierarchy (Dark Mode) */
    --kx-bg-canvas: #121416;
    --kx-bg-surface: #212529;
    --kx-bg-elevated: #2b3035;
    --kx-bg-input: #2b3035;
    --kx-border-color: #343a40;
    --kx-border-subtle: rgba(255, 255, 255, 0.08);
    --kx-text-main: #f1f5f9;
    --kx-text-primary: #f1f5f9;
    --kx-text-muted: #94a3b8;

    /* 4. Dark Mode Shadows & Interactive Tokens */
    --kx-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.25);
    --kx-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
    --kx-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.45);
    --kx-shadow-lg: 0 16px 36px rgba(0, 0, 0, 0.55);
    --kx-tab-track-bg: rgba(255, 255, 255, 0.05);
    --kx-tab-hover-bg: rgba(var(--bs-primary-rgb), 0.18);
    --kx-tab-hover-text: #6ec2d5;
    --kx-row-hover-bg: rgba(var(--bs-primary-rgb), 0.14);
    --kx-thead-bg: #162936;
    --kx-thead-text: #6ec2d5;
    --kx-thead-border: #244558;
}

/* ============================================================================
   GLOBAL TYPOGRAPHY, SURFACES & HEADING RULES (_reset.css)
   ============================================================================ */
body {
    font-family: var(--kx-font-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.kx-app-body {
    background-color: var(--kx-bg-canvas) !important;
    color: var(--kx-text-main) !important;
}

code, pre, .font-mono, .font-monospace {
    font-family: var(--kx-font-mono) !important;
    font-variant-ligatures: none;
}

code {
    color: var(--kx-brand-primary);
}

.text-primary,
.kx-field.text-primary {
    color: var(--kx-brand-primary) !important;
}

/* Global Heading Color Rule (Primary Brand Color as in keystonex.local) */
.kx-app-body main h1:not(.text-white):not(.kx-heading-neutral),
.kx-app-body main h2:not(.text-white):not(.kx-heading-neutral),
.kx-app-body main h3:not(.text-white):not(.kx-heading-neutral),
.kx-app-body main h4:not(.text-white):not(.kx-heading-neutral),
.kx-app-body main h5:not(.text-white):not(.kx-heading-neutral),
.kx-app-body main h6:not(.text-white):not(.kx-heading-neutral),
.kx-heading-primary {
    font-family: var(--kx-font-sans);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--kx-brand-primary) !important;
}

.kx-app-body main h6.text-body,
.kx-app-body main h5.text-body,
.kx-app-body main h4.text-body,
.kx-app-body main h3.text-body,
.kx-app-body main .kx-heading-body {
    color: var(--kx-text-main) !important;
}

/* App Surface Normalization for Dark Mode Cards & Containers */
.kx-surface-card {
    background-color: var(--kx-bg-surface) !important;
    border: 1px solid var(--kx-border-color) !important;
    border-radius: var(--kx-radius-lg, 12px);
    box-shadow: var(--kx-shadow-sm);
}

html.dark .kx-app-body .bg-white.dark\:bg-gray-800,
html.dark .kx-app-body .dark\:bg-gray-800,
html.dark .kx-surface-card {
    background-color: var(--kx-bg-surface) !important;
    border-color: var(--kx-border-color) !important;
}

html:not(.dark) .kx-surface-card {
    background-color: var(--kx-bg-surface) !important;
    border-color: var(--kx-border-color) !important;
}

html.dark .kx-app-body .dark\:bg-gray-900\/40,
html.dark .kx-app-body .dark\:bg-gray-900\/50,
html.dark .kx-app-body .dark\:bg-gray-700\/50 {
    background-color: var(--kx-bg-elevated) !important;
}

/* ============================================================================
   SIDEBAR NAVIGATION (layout/_sidebar.css)
   ============================================================================ */
.kx-sidebar {
    width: var(--kx-sidebar-width, 268px);
    background-color: var(--kx-bg-surface) !important;
    border-right: 1px solid var(--kx-border-color) !important;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s ease;
}

.kx-sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.58rem 0.85rem;
    margin-bottom: 0.2rem;
    border-radius: var(--kx-radius-md, 0.5rem);
    color: var(--kx-text-main);
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: all 0.18s ease;
}

.kx-sidebar-link i,
.kx-sidebar-link svg {
    font-size: 1.05rem;
    color: var(--kx-text-muted);
    transition: color 0.18s ease, transform 0.18s ease;
    flex-shrink: 0;
}

.kx-sidebar-link:hover {
    background-color: var(--kx-brand-primary-subtle) !important;
    color: var(--kx-brand-primary) !important;
    transform: translateX(2px);
}

.kx-sidebar-link:hover i,
.kx-sidebar-link:hover svg {
    color: var(--kx-brand-primary) !important;
}

.kx-sidebar-link.active-link {
    background-color: var(--kx-brand-primary) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: var(--kx-brand-primary-glow) !important;
}

.kx-sidebar-link.active-link i,
.kx-sidebar-link.active-link svg {
    color: #ffffff !important;
}

.kx-sidebar-section-label {
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--kx-text-muted);
    padding: 0.75rem 0.85rem 0.35rem;
}

/* ============================================================================
   TOPBAR, WEATHER PILL & GLOBAL SEARCH (layout/_navbar.css)
   ============================================================================ */
.kx-topbar {
    min-height: var(--kx-navbar-height, 64px);
    background-color: var(--kx-bg-surface) !important;
    border-bottom: 1px solid var(--kx-border-color) !important;
    box-shadow: var(--kx-shadow-xs);
}

/* Glossy Weather Pill (Matches keystonex.local) */
:where(.weather-pill) {
    display: inline-flex;
}

.weather-pill {
    align-items: center;
    height: var(--kx-field-height, 36px);
    padding: 0 0.9rem;
    border-radius: var(--kx-radius-pill, 50rem);
    font-size: 0.8125rem;
    background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
    border: 1px solid #cbd5e1;
    color: #1e293b;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.9), 0 2px 5px rgba(15, 23, 42, 0.05);
    transition: all 0.2s ease;
    user-select: none;
    white-space: nowrap;
}

.weather-pill:hover {
    border-color: var(--kx-brand-primary);
    box-shadow: 0 3px 8px rgba(var(--bs-primary-rgb), 0.14);
}

.weather-pill .weather-divider {
    width: 1px;
    height: 14px;
    background-color: #cbd5e1;
    margin: 0 0.6rem;
}

html.dark .weather-pill,
[data-bs-theme="dark"] .weather-pill {
    background: linear-gradient(135deg, #2b3035 0%, #1e2226 100%);
    border-color: #495057;
    color: #f8f9fa;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.08), 0 2px 6px rgba(0, 0, 0, 0.35);
}

html.dark .weather-pill .weather-divider,
[data-bs-theme="dark"] .weather-pill .weather-divider {
    background-color: #495057;
}

/* Standardized Search Input Group (.custom-search-group) */
.custom-search-group {
    display: flex;
    align-items: center;
    background-color: var(--kx-bg-input);
    border: 1px solid var(--kx-border-color);
    border-radius: var(--kx-search-radius, 0.5rem) !important;
    padding: 0 0.65rem;
    height: var(--kx-field-height, 36px) !important;
    min-height: var(--kx-field-height, 36px) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.custom-search-group:focus-within {
    background-color: var(--kx-bg-surface);
    border-color: var(--kx-brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.16) !important;
}

.custom-search-group input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 0.8125rem;
    color: var(--kx-text-main);
    width: 100%;
    height: 100% !important;
    padding: 0 0.5rem !important;
}

.custom-search-group .search-icon {
    color: var(--kx-text-muted);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.custom-search-group:focus-within .search-icon {
    color: var(--kx-brand-primary);
}

/* ============================================================================
   UNIVERSAL FUNCTION BUTTON PILLS & CIRCULAR ACTION ICONS (components/_buttons.css)
   ============================================================================ */
:where(.cc-header-pill) {
    display: inline-flex;
}

.cc-header-pill {
    background-color: var(--kx-bg-surface);
    border: 1px solid var(--kx-border-color) !important;
    color: var(--kx-text-main);
    height: var(--kx-btn-pill-height, var(--kx-field-height, 36px)) !important;
    min-height: var(--kx-btn-pill-height, var(--kx-field-height, 36px)) !important;
    padding: 0 1rem !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    font-size: var(--kx-btn-pill-font-size, 0.8125rem) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border-radius: var(--kx-radius-pill, 50rem) !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.kx-surface-card .cc-header-pill:not(.primary):not(.btn-primary):not([class*="btn-outline-"]) {
    background-color: var(--kx-bg-elevated);
    border: 1px solid var(--kx-border-hover) !important;
}

.cc-header-pill:hover {
    transform: translateY(-1px);
    border-color: var(--kx-brand-primary) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14) !important;
}

.kx-surface-card .cc-header-pill:not(.primary):not(.btn-primary):not([class*="btn-outline-"]):hover {
    background-color: rgba(var(--bs-primary-rgb), 0.12);
    border-color: var(--kx-brand-primary) !important;
}

.cc-header-pill:active {
    transform: translateY(0);
}

.kx-btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--kx-btn-group-gap, 0.5rem) !important;
}

/* Primary Filled Button */
.btn-primary,
.cc-header-pill.btn-primary,
.cc-header-pill.primary {
    background-color: var(--kx-brand-primary) !important;
    border: 1px solid var(--kx-brand-primary) !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.cc-header-pill.btn-primary:hover,
.cc-header-pill.primary:hover {
    background-color: var(--kx-brand-primary-hover) !important;
    border-color: var(--kx-brand-primary-hover) !important;
    color: #ffffff !important;
}

/* Semantic Outline & Action Button Variants (Light & Dark Mode Adaptive) */
.btn-outline-primary,
.btn-action-primary {
    color: var(--kx-brand-primary) !important;
    border: 1px solid rgba(var(--bs-primary-rgb), 0.45) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.08) !important;
}
.btn-outline-primary:hover,
.btn-action-primary:hover {
    background-color: var(--kx-brand-primary) !important;
    border-color: var(--kx-brand-primary) !important;
    color: #ffffff !important;
}

.btn-outline-purple,
.btn-action-purple {
    color: var(--kx-purple) !important;
    border: 1px solid rgba(var(--kx-purple-rgb), 0.45) !important;
    background-color: rgba(var(--kx-purple-rgb), 0.08) !important;
}
.btn-outline-purple:hover,
.btn-action-purple:hover {
    background-color: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
}

.btn-outline-indigo,
.btn-action-indigo {
    color: var(--kx-indigo) !important;
    border: 1px solid rgba(var(--kx-indigo-rgb), 0.45) !important;
    background-color: rgba(var(--kx-indigo-rgb), 0.08) !important;
}
.btn-outline-indigo:hover,
.btn-action-indigo:hover {
    background-color: #4f46e5 !important;
    border-color: #4f46e5 !important;
    color: #ffffff !important;
}

.btn-outline-teal,
.btn-action-teal {
    color: var(--kx-teal) !important;
    border: 1px solid rgba(var(--kx-teal-rgb), 0.45) !important;
    background-color: rgba(var(--kx-teal-rgb), 0.08) !important;
}
.btn-outline-teal:hover,
.btn-action-teal:hover {
    background-color: #0d9488 !important;
    border-color: #0d9488 !important;
    color: #ffffff !important;
}

.btn-outline-orange,
.btn-action-orange {
    color: var(--kx-orange) !important;
    border: 1px solid rgba(var(--kx-orange-rgb), 0.45) !important;
    background-color: rgba(var(--kx-orange-rgb), 0.08) !important;
}
.btn-outline-orange:hover,
.btn-action-orange:hover {
    background-color: #ea580c !important;
    border-color: #ea580c !important;
    color: #ffffff !important;
}

.btn-outline-info,
.btn-action-info {
    color: var(--kx-info) !important;
    border: 1px solid rgba(var(--kx-info-rgb), 0.45) !important;
    background-color: rgba(var(--kx-info-rgb), 0.08) !important;
}
.btn-outline-info:hover,
.btn-action-info:hover {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

.btn-outline-warning,
.btn-action-warning {
    color: var(--kx-warning) !important;
    border: 1px solid rgba(var(--kx-warning-rgb), 0.45) !important;
    background-color: rgba(var(--kx-warning-rgb), 0.08) !important;
}
.btn-outline-warning:hover,
.btn-action-warning:hover {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

.btn-outline-success,
.btn-action-success {
    color: var(--kx-success) !important;
    border: 1px solid rgba(var(--kx-success-rgb), 0.45) !important;
    background-color: rgba(var(--kx-success-rgb), 0.08) !important;
}
.btn-outline-success:hover,
.btn-action-success:hover {
    background-color: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

.btn-outline-danger,
.btn-action-danger {
    color: var(--kx-danger) !important;
    border: 1px solid rgba(var(--kx-danger-rgb), 0.45) !important;
    background-color: rgba(var(--kx-danger-rgb), 0.08) !important;
}
.btn-outline-danger:hover,
.btn-action-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

.btn-outline-secondary,
.btn-action-secondary {
    color: var(--kx-secondary) !important;
    border: 1px solid rgba(var(--kx-secondary-rgb), 0.40) !important;
    background-color: rgba(var(--kx-secondary-rgb), 0.08) !important;
}
.btn-outline-secondary:hover,
.btn-action-secondary:hover {
    background-color: #475569 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

/* Universal Circular Action Icon Buttons (.btn-action-icon) */
.btn-action-icon {
    width: var(--kx-action-icon-size, 32px) !important;
    height: var(--kx-action-icon-size, 32px) !important;
    min-width: var(--kx-action-icon-size, 32px) !important;
    min-height: var(--kx-action-icon-size, 32px) !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    flex-shrink: 0;
}

.btn-action-icon i {
    font-size: 0.85rem;
    line-height: 1;
}

.btn-action-icon svg {
    width: 15px;
    height: 15px;
}

.btn-action-icon:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12) !important;
}

.kx-action-group {
    display: inline-flex;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: var(--kx-action-icon-gap, 0.375rem) !important;
}

/* ============================================================================
   UNIFORM 26PX STATUS & METADATA BADGES (components/_badges.css)
   ============================================================================ */
.stage-badge-preview,
.kx-badge {
    height: var(--kx-badge-height, 26px) !important;
    padding: 0 0.75rem !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    letter-spacing: 0.01em !important;
    border-radius: var(--kx-radius-pill, 50rem) !important;
    white-space: nowrap !important;
    border: 1px solid currentColor !important;
}

.kx-badge--primary,
.kx-badge-primary {
    background-color: rgba(var(--bs-primary-rgb), 0.14) !important;
    color: var(--kx-brand-primary) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.35) !important;
}
.kx-badge--success,
.kx-badge-success {
    background-color: rgba(var(--kx-success-rgb), 0.14) !important;
    color: var(--kx-success) !important;
    border-color: rgba(var(--kx-success-rgb), 0.35) !important;
}
.kx-badge--warning,
.kx-badge-warning {
    background-color: rgba(var(--kx-warning-rgb), 0.14) !important;
    color: var(--kx-warning) !important;
    border-color: rgba(var(--kx-warning-rgb), 0.35) !important;
}
.kx-badge--danger,
.kx-badge-danger {
    background-color: rgba(var(--kx-danger-rgb), 0.14) !important;
    color: var(--kx-danger) !important;
    border-color: rgba(var(--kx-danger-rgb), 0.35) !important;
}
.kx-badge--info,
.kx-badge-info {
    background-color: rgba(var(--kx-info-rgb), 0.14) !important;
    color: var(--kx-info) !important;
    border-color: rgba(var(--kx-info-rgb), 0.35) !important;
}
.kx-badge--purple,
.kx-badge-purple {
    background-color: rgba(var(--kx-purple-rgb), 0.14) !important;
    color: var(--kx-purple) !important;
    border-color: rgba(var(--kx-purple-rgb), 0.35) !important;
}
.kx-badge--indigo,
.kx-badge-indigo {
    background-color: rgba(var(--kx-indigo-rgb), 0.14) !important;
    color: var(--kx-indigo) !important;
    border-color: rgba(var(--kx-indigo-rgb), 0.35) !important;
}
.kx-badge--teal,
.kx-badge-teal {
    background-color: rgba(var(--kx-teal-rgb), 0.14) !important;
    color: var(--kx-teal) !important;
    border-color: rgba(var(--kx-teal-rgb), 0.35) !important;
}
.kx-badge--orange,
.kx-badge-orange {
    background-color: rgba(var(--kx-orange-rgb), 0.14) !important;
    color: var(--kx-orange) !important;
    border-color: rgba(var(--kx-orange-rgb), 0.35) !important;
}
.kx-badge--secondary,
.kx-badge-secondary,
.kx-badge--neutral,
.kx-badge-neutral {
    background-color: rgba(var(--kx-secondary-rgb), 0.14) !important;
    color: var(--kx-secondary) !important;
    border-color: rgba(var(--kx-secondary-rgb), 0.35) !important;
}

/* ============================================================================
   COMMAND NAVIGATION PILLS & VIEW-MODE SWITCHER (components/_tabs.css)
   ============================================================================ */
.command-nav-pills,
.kx-tab-track {
    background-color: var(--kx-tab-track-bg, rgba(15, 23, 42, 0.04)) !important;
    padding: 0.35rem !important;
    border-radius: 12px !important;
    border: 1px solid var(--kx-border-color) !important;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--kx-tab-gap, 0.375rem) !important;
    max-width: 100%;
}

@media (min-width: 768px) {
    .kx-tab-track {
        flex-wrap: nowrap !important;
    }
}

.command-nav-pills .nav-link,
.kx-tab-track .kx-tab-btn {
    color: var(--kx-text-muted) !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    height: var(--kx-tab-height, 36px) !important;
    padding: 0 0.95rem !important;
    border-radius: var(--kx-tab-radius, 8px) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: inline-flex;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    border: 1px solid transparent !important;
    background: transparent;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none !important;
}

.command-nav-pills .nav-link:hover:not(.active),
.kx-tab-track .kx-tab-btn:hover:not(.active) {
    color: var(--kx-tab-hover-text, var(--kx-brand-primary)) !important;
    background-color: var(--kx-tab-hover-bg, rgba(var(--bs-primary-rgb), 0.10)) !important;
    border-color: rgba(var(--bs-primary-rgb), 0.22) !important;
    transform: translateY(-1px);
}

.command-nav-pills .nav-link.active,
.kx-tab-track .kx-tab-btn.active {
    background-color: var(--kx-brand-primary) !important;
    color: #ffffff !important;
    border-color: var(--kx-brand-primary) !important;
    box-shadow: 0 2px 8px rgba(var(--bs-primary-rgb), 0.30) !important;
}

.command-nav-pills .nav-link.active i,
.command-nav-pills .nav-link.active svg,
.kx-tab-track .kx-tab-btn.active i,
.kx-tab-track .kx-tab-btn.active svg {
    color: #ffffff !important;
}

/* ============================================================================
   TABLES, DATATABLES & PRIMARY-TINTED HEADERS (components/_tables.css)
   ============================================================================ */
table.dataTable,
table.data-table,
.table-kx,
.kx-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

/* Apply Design Studio Table Header Tokens Globally */
.kx-app-body table thead th,
table.dataTable thead th,
table.data-table thead th,
.table-kx thead th,
.theme-thead th,
.kx-table thead th {
    background-color: var(--kx-thead-bg, #eef6f8) !important;
    color: var(--kx-thead-text, var(--kx-brand-primary)) !important;
    border-bottom: 2px solid var(--kx-thead-border, #cde4ea) !important;
    font-size: var(--kx-thead-font-size, 0.75rem) !important;
    text-transform: var(--kx-thead-transform, uppercase) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    padding: 0.75rem 0.75rem !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* Apply Design Studio Row Hover & Cell Border Tokens Globally */
.kx-app-body table tbody tr,
table.dataTable tbody tr,
table.data-table tbody tr,
.table-kx tbody tr,
.kx-table tbody tr {
    transition: background-color 0.15s ease;
}

.kx-app-body table tbody td,
table.dataTable tbody td,
table.data-table tbody td,
.table-kx tbody td,
.kx-table tbody td {
    border-bottom: 1px solid var(--kx-border-color) !important;
    color: var(--kx-text-main);
    vertical-align: middle;
    transition: background-color 0.15s ease;
}

.kx-app-body table tbody tr:last-child td,
table.dataTable tbody tr:last-child td,
table.data-table tbody tr:last-child td,
.table-kx tbody tr:last-child td,
.kx-table tbody tr:last-child td {
    border-bottom: none !important;
}

.kx-app-body table tbody tr:hover,
.kx-app-body table tbody tr:hover > td,
table.dataTable tbody tr:hover > td,
table.data-table tbody tr:hover > td,
.table-kx tbody tr:hover > td,
.kx-table tbody tr:hover > td {
    background-color: var(--kx-row-hover-bg, rgba(var(--bs-primary-rgb), 0.06)) !important;
}

table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    user-select: none;
}

/* DataTables Wrapper & Pagination Controls (KeystoneX Style) */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--kx-text-muted) !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_length select {
    height: var(--kx-field-height, 36px) !important;
    min-height: var(--kx-field-height, 36px) !important;
    border-radius: var(--kx-radius-md, 0.5rem) !important;
    border: 1px solid var(--kx-border-color) !important;
    background-color: var(--kx-bg-input) !important;
    color: var(--kx-text-main) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    padding: 0 2rem 0 0.75rem !important;
    cursor: pointer;
    outline: none !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.dataTables_wrapper .dataTables_length select:focus {
    background-color: var(--kx-bg-surface) !important;
    border-color: var(--kx-brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.16) !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_filter input {
    height: var(--kx-field-height, 36px) !important;
    min-height: var(--kx-field-height, 36px) !important;
    min-width: 240px;
    border-radius: var(--kx-search-radius, 0.5rem) !important;
    border: 1px solid var(--kx-border-color) !important;
    background-color: var(--kx-bg-input) !important;
    color: var(--kx-text-main) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding: 0 0.85rem !important;
    transition: all 0.2s ease;
}

.dataTables_wrapper .dataTables_filter input::placeholder {
    color: var(--kx-text-muted) !important;
    opacity: 0.75 !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    background-color: var(--kx-bg-surface) !important;
    border-color: var(--kx-brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.16) !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_info {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--kx-text-muted) !important;
    padding-top: 0.5rem !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 0.5rem !important;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.dataTables_wrapper .dataTables_paginate span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 32px !important;
    height: 32px !important;
    border-radius: var(--kx-radius-md, 0.5rem) !important;
    padding: 0 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    border: 1px solid var(--kx-border-color) !important;
    background: var(--kx-bg-surface) !important;
    color: var(--kx-text-main) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: var(--kx-brand-primary-subtle) !important;
    color: var(--kx-brand-primary) !important;
    border-color: var(--kx-brand-primary-border) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--kx-brand-primary) !important;
    color: #ffffff !important;
    border-color: var(--kx-brand-primary) !important;
    box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), 0.28) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    background: var(--kx-bg-elevated) !important;
    color: var(--kx-text-muted) !important;
    border-color: var(--kx-border-color) !important;
    box-shadow: none !important;
}

/* ============================================================================
   CARDS, KPI CARDS & ICON BOXES (components/_cards.css)
   ============================================================================ */
[x-cloak],
[hidden],
[style*="display: none"],
[style*="display:none"] {
    display: none !important;
}

.kpi-card {
    background-color: var(--kx-bg-surface);
    border: 1px solid var(--kx-border-color);
    border-radius: var(--kx-radius-lg, 0.75rem);
    box-shadow: var(--kx-shadow-sm);
    padding: 1.15rem 1.25rem;
    overflow: hidden;
    min-width: 0;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}

.kpi-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--kx-shadow-md);
}

.icon-box {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}

/* ============================================================================
   UNIFIED 36PX FORM CONTROLS, SELECTS, FILE INPUTS & TEXTAREAS (components/_forms.css)
   ============================================================================ */
:where(.kx-field, .kx-select, .form-control-kx, .form-select-kx, .kx-textarea) {
    width: 100%;
    display: block;
}

.kx-field,
.kx-select,
.form-control-kx,
.form-select-kx {
    height: var(--kx-field-height, 36px) !important;
    min-height: var(--kx-field-height, 36px) !important;
    border-radius: var(--kx-radius-md, 0.5rem) !important;
    border: 1px solid var(--kx-border-color) !important;
    background-color: var(--kx-bg-input) !important;
    color: var(--kx-text-main) !important;
    font-size: 0.8125rem !important;
    padding: 0 0.85rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* Preserve left/right padding when inputs have prefix or suffix icons */
.kx-field.pl-9,
.kx-field.pl-10,
.kx-field.kx-has-icon-left,
.form-control-kx.pl-9,
.form-control-kx.pl-10 {
    padding-left: 2.5rem !important;
}

.kx-field.pr-10,
.kx-field.kx-has-icon-right,
.form-control-kx.pr-10 {
    padding-right: 2.5rem !important;
}

.kx-textarea {
    width: 100%;
    display: block;
    border-radius: var(--kx-radius-md, 0.5rem) !important;
    border: 1px solid var(--kx-border-color) !important;
    background-color: var(--kx-bg-input) !important;
    color: var(--kx-text-main) !important;
    font-size: 0.8125rem !important;
    line-height: 1.6 !important;
    padding: 0.75rem 0.9rem !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.kx-field::placeholder,
.form-control-kx::placeholder,
.kx-textarea::placeholder,
textarea::placeholder {
    color: var(--kx-text-muted) !important;
    opacity: 0.75 !important;
    font-weight: 400;
}

select.kx-field,
select.kx-select,
.kx-select,
.form-select-kx {
    padding-left: 0.75rem !important;
    padding-right: 2.25rem !important;
    background-color: var(--kx-bg-input) !important;
    color: var(--kx-text-main) !important;
    background-position: right 0.65rem center !important;
    text-overflow: ellipsis;
    cursor: pointer;
}

select.kx-field option,
select.kx-select option,
.kx-select option,
.form-select-kx option {
    background-color: var(--kx-bg-surface) !important;
    color: var(--kx-text-main) !important;
}

/* Unified File Upload Inputs (Light & Dark Mode Safe) */
input[type="file"].kx-field {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.2rem 0.5rem !important;
    line-height: 1.2 !important;
    color: var(--kx-text-muted) !important;
    background-color: var(--kx-bg-input) !important;
    border: 1px solid var(--kx-border-color) !important;
}

input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
    background-color: var(--kx-brand-primary) !important;
    color: #ffffff !important;
    border: 1px solid var(--kx-brand-primary) !important;
    border-radius: 6px !important;
    padding: 0.28rem 0.75rem !important;
    margin-right: 0.65rem !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

input[type="file"]::file-selector-button:hover,
input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--kx-brand-primary-hover) !important;
}

input[type="file"].kx-file-emerald::file-selector-button,
input[type="file"].kx-file-emerald::-webkit-file-upload-button {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

input[type="file"].kx-file-emerald::file-selector-button:hover,
input[type="file"].kx-file-emerald::-webkit-file-upload-button:hover {
    background-color: #059669 !important;
}

.kx-field:focus,
.kx-select:focus,
.form-control-kx:focus,
.form-select-kx:focus,
.kx-textarea:focus {
    background-color: var(--kx-bg-surface) !important;
    border-color: var(--kx-brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.16) !important;
    outline: none !important;
}

/* Brand Studio Security Captcha Card */
.kx-captcha-card {
    background-color: var(--kx-bg-elevated) !important;
    border: 1px solid var(--kx-border-color) !important;
    border-radius: var(--kx-radius-lg, 0.75rem) !important;
    padding: 1rem 1.15rem !important;
}

.captcha-image {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: var(--kx-field-height, 36px) !important;
    padding: 0 0.5rem !important;
    background-color: #f8fafc !important;
    border: 1px solid var(--kx-border-color) !important;
    border-radius: var(--kx-radius-md, 0.5rem) !important;
    overflow: hidden;
    flex-shrink: 0;
}

.captcha-image img {
    height: 32px !important;
    width: auto !important;
    display: block !important;
    object-fit: contain;
}