:root {
    --tb-white: #ffffff;
    --tb-black: oklch(15.69% 0 0);
    --tb-neutral-25: oklch(99.1% 0 0);
    --tb-neutral-50: oklch(98.5% 0.001319 106.4);
    --tb-neutral-100: oklch(95.3% 0.001074 17.2);
    --tb-neutral-200: oklch(92.3% 0.002563 48.7);
    --tb-neutral-300: oklch(86.9% 0.006042 59.6);
    --tb-neutral-600: oklch(40.39% 0.013 43.33);
    --tb-neutral-700: oklch(37.4% 0.008678 67.6);
    --tb-neutral-800: oklch(26.8% 0.006287 34.3);
    --tb-neutral-900: oklch(21.6% 0.006126 56);

    --tb-yellow-400: oklch(84.6% 0.169907 88.3);
    --tb-yellow-500: oklch(77.8% 0.159466 81.1);
    --tb-yellow-600: oklch(67.1% 0.142491 72.4);
    --tb-yellow-700: oklch(54.2% 0.122911 61.5);
    --tb-yellow-800: oklch(47% 0.10497 58.6);
    --tb-yellow-900: oklch(41.4% 0.091956 53.5);
    --tb-blue-300: oklch(78.5% 0.13 238.66);
    --tb-blue-400: oklch(71.37% 0.153 238.66);
    --tb-green-300: oklch(82.5% 0.14 145);
    --tb-green-400: oklch(75% 0.16 145);
    --tb-red-300: oklch(78% 0.14 25);
    --tb-red-400: oklch(70% 0.17 25);
    --tb-destructive: oklch(57.6% 0.209273 29.4);

    /* Status badge colors */
    --tb-status-scheduled-bg: #5b21b6;
    --tb-status-scheduled-text: #f3e8ff;
    --tb-status-in-progress-bg: #0e7490;
    --tb-status-in-progress-text: #cffafe;
    --tb-status-completed-bg: #166534;
    --tb-status-completed-text: #d9f99d;
    --tb-status-stopped-bg: #9a3412;
    --tb-status-stopped-text: #fed7aa;

    --tb-selection-bg: var(--tb-yellow-400);
    --tb-selection-bg-hex: #FACC15;
    --tb-selection-text: var(--tb-black);
    --tb-selection-text-hex: #1D2327;
    --tb-scrollbar-track: var(--tb-surface-subtle, #f1f2f7);
    --tb-scrollbar-thumb: var(--tb-border-subtle, #d0d5dd);

    --tb-primary-cta-bg: var(--tb-yellow-400);
    --tb-primary-cta-bg-hover: var(--tb-yellow-500);
    --tb-primary-cta-text: var(--tb-black);
    --tb-primary-cta-border: transparent;
    --tb-primary-cta-shadow: 0px 1px 2px oklch(0% 0 0 / 0.08), 0px 1px 1px oklch(0% 0 0 / 0.12);

    --tb-bg-color: var(--tb-white);
    --tb-text-color: var(--tb-black);
    --tb-surface-main: var(--tb-white);
    --tb-surface-subtle: var(--tb-neutral-100);
    --tb-surface-elevated: var(--tb-neutral-100);
    --tb-border-subtle: var(--tb-neutral-300);
    --tb-text-strong: var(--tb-black);
    --tb-text-critical: var(--tb-destructive);
    --color-black: var(--tb-black);

    --tb-shadow-panel: 0px 10px 15px -3px oklch(0% 0 0 / 0.1), 0px 4px 6px -4px oklch(0% 0 0 / 0.1);
    --tb-shadow-panel-hover: 0px 20px 25px -5px oklch(0% 0 0 / 0.1), 0px 8px 10px -6px oklch(0% 0 0 / 0.1);

    --tb-sidebar-bg: var(--tb-neutral-50);
    --tb-sidebar-border: var(--tb-neutral-200);
    --tb-sidebar-text: var(--tb-black);
    --tb-sidebar-icon-muted: var(--tb-neutral-300);
    --tb-sidebar-hover-bg: var(--tb-neutral-100);
    --tb-sidebar-hover-text: var(--tb-black);
    --tb-sidebar-active-bg: var(--tb-neutral-200);
    --tb-sidebar-active-text: var(--tb-black);
    --tb-sidebar-active-indicator: var(--tb-yellow-400);
    --tb-sidebar-footer-text: var(--tb-neutral-300);
    --tb-sidebar-footer-link: var(--tb-neutral-300);
    --tb-sidebar-footer-link-hover: var(--tb-yellow-400);
}


.theme-dark {
    --tb-bg-color: var(--tb-black);
    --tb-text-color: var(--tb-white);
    --tb-surface-main: var(--tb-neutral-900);
    --tb-surface-subtle: var(--tb-neutral-800);
    --tb-surface-elevated: var(--tb-neutral-700);
    --tb-border-subtle: var(--tb-neutral-700);
    --tb-text-strong: var(--tb-white);
    --tb-text-critical: var(--tb-destructive);
    --color-black: var(--tb-white);

    --tb-shadow-panel: 0px 12px 24px -4px oklch(0% 0 0 / 0.35), 0px 4px 10px -2px oklch(0% 0 0 / 0.25);
    --tb-shadow-panel-hover: 0px 16px 32px -4px oklch(0% 0 0 / 0.45), 0px 6px 16px -2px oklch(0% 0 0 / 0.3);

    --tb-sidebar-bg: var(--tb-neutral-800);
    --tb-sidebar-border: var(--tb-neutral-700);
    --tb-sidebar-text: var(--tb-white);
    --tb-sidebar-icon-muted: var(--tb-neutral-600);
    --tb-sidebar-hover-bg: var(--tb-neutral-700);
    --tb-sidebar-hover-text: var(--tb-white);
    --tb-sidebar-active-bg: var(--tb-neutral-700);
    --tb-sidebar-active-text: var(--tb-white);
    --tb-sidebar-active-indicator: var(--tb-blue-400);
    --tb-sidebar-footer-text: var(--tb-neutral-600);
    --tb-sidebar-footer-link: var(--tb-neutral-600);
    --tb-sidebar-footer-link-hover: var(--tb-blue-400);
    --tb-selection-bg: var(--tb-yellow-400);
    --tb-selection-bg-hex: #FACC15;
    --tb-selection-text: var(--tb-black);
    --tb-selection-text-hex: #1D2327;
    --tb-scrollbar-track: var(--tb-neutral-800);
    --tb-scrollbar-thumb: var(--tb-neutral-600);

    --tb-primary-cta-bg: var(--tb-yellow-400);
    --tb-primary-cta-bg-hover: var(--tb-yellow-500);
    --tb-primary-cta-text: var(--tb-black);
    --tb-primary-cta-border: transparent;
    --tb-primary-cta-shadow: 0px 1px 2px oklch(0% 0 0 / 0.35), 0px 1px 1px oklch(0% 0 0 / 0.28);
}


.new-nav-wrapper {
    --tb-sidebar-bg: var(--tb-white);
    --tb-sidebar-border: var(--tb-neutral-200);
    --tb-sidebar-text: var(--tb-neutral-700);
    --tb-sidebar-icon-muted: var(--tb-neutral-300);
    --tb-sidebar-hover-bg: var(--tb-neutral-100);
    --tb-sidebar-hover-text: var(--tb-neutral-800);
    --tb-sidebar-active-bg: var(--tb-neutral-200);
    --tb-sidebar-active-text: var(--tb-neutral-800);
    --tb-sidebar-active-indicator: var(--tb-yellow-400);
    --tb-sidebar-footer-text: var(--tb-neutral-600);
    --tb-sidebar-footer-link: var(--tb-neutral-600);
    --tb-sidebar-footer-link-hover: var(--tb-yellow-400);
    --tb-wordmark-color: #100b0b;
}

.theme-dark .new-nav-wrapper {
    --tb-sidebar-bg: var(--tb-neutral-900);
    --tb-sidebar-border: var(--tb-neutral-800);
    --tb-sidebar-text: var(--tb-neutral-100);
    --tb-sidebar-icon-muted: var(--tb-neutral-600);
    --tb-sidebar-hover-bg: var(--tb-neutral-800);
    --tb-sidebar-hover-text: var(--tb-white);
    --tb-sidebar-active-bg: var(--tb-neutral-700);
    --tb-sidebar-active-text: var(--tb-white);
    --tb-sidebar-active-indicator: var(--tb-blue-400);
    --tb-sidebar-footer-text: var(--tb-neutral-600);
    --tb-sidebar-footer-link: var(--tb-neutral-600);
    --tb-sidebar-footer-link-hover: var(--tb-blue-400);
    --tb-wordmark-color: var(--tb-white);
}
body {
    background-color: var(--tb-bg-color);
    color: var(--tb-text-color);
    scrollbar-width: thin;
    scrollbar-color: var(--tb-border-subtle, #cccccc) var(--tb-surface-subtle, #f1f2f7);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--tb-sidebar-active-indicator, var(--tb-border-subtle, #d0d5dd));
}

html {
    background-color: var(--tb-bg-color);
    color: var(--tb-text-color);
    font-family: inherit;
    color-scheme: light;
}

html.theme-dark,
html.theme-dark body {
    color-scheme: dark;
}

body {
    background-color: var(--tb-bg-color);
    color: var(--tb-text-color);
    min-height: 100vh;
    display: block!important;
}
body.theme-dark, body.ts-dark-mmode {
    background-color: var(--tb-neutral-900)!important;
    background: var(--tb-neutral-900)!important;
}

::selection {
    background-color: var(--tb-selection-bg, #FACC15);
    color: var(--tb-selection-text, #1D2327);
}

::-moz-selection {
    background-color: var(--tb-selection-bg, #FACC15);
    color: var(--tb-selection-text, #1D2327);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--tb-scrollbar-track);
}

::-webkit-scrollbar-thumb {
    background-color: var(--tb-scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid var(--tb-scrollbar-track);
}

::-webkit-scrollbar-thumb:hover {
    background-color: var(--tb-sidebar-active-indicator, var(--tb-scrollbar-thumb));
}

/* Dark mode Bootstrap dropdown overrides */
.theme-dark .btn-default,
.theme-dark .btn-default:focus {
    background-color: var(--tb-neutral-700) !important;
    border-color: var(--tb-neutral-600) !important;
    color: var(--tb-white) !important;
}

.theme-dark .btn-default:hover {
    background-color: var(--tb-neutral-600) !important;
    border-color: var(--tb-neutral-600) !important;
    color: var(--tb-white) !important;
}

.theme-dark .dropdown-menu {
    background-color: var(--tb-surface-elevated) !important;
    border-color: var(--tb-border-subtle) !important;
    box-shadow: var(--tb-shadow-panel) !important;
}

.theme-dark .dropdown-menu > li > a {
    color: var(--tb-text-color) !important;
    background-color: transparent !important;
}

.theme-dark .dropdown-menu > li > a:hover,
.theme-dark .dropdown-menu > li > a:focus {
    background-color: var(--tb-neutral-600) !important;
    color: var(--tb-white) !important;
}

.theme-dark .dropdown-menu .divider {
    background-color: var(--tb-border-subtle) !important;
}