/* Timebinder Redesign Styles */ /* Timebinder brand tokens */ /* The --tb-* tokens are declared on :root. Widgets that relocate their markup to — the flatpickr calendar, Bootstrap tooltips/popovers — render outside every .tb-theme subtree, so a token declared only on .tb-theme is undefined for them. An unresolvable var() does not fall back to an earlier declaration: it voids the whole property at computed-value time, which is why a purple day cell rendered white. A bare `.tb-theme` selector is deliberately absent here: :root is an ancestor of every element, so a .tb-theme subtree inherits these tokens with the same computed values it used to get from its own declaration. The only rules that need to name .tb-theme are the ones that *override* an ancestor — [data-bs-theme=light|dark] .tb-theme, both still present. The --bs-* mappings below stay scoped to .tb-theme on purpose, so Bootstrap's app-wide palette (buttons, links, focus rings) is left untouched. */ :root, [data-bs-theme=light] .tb-theme { --tb-color-primary: #7C3AED; --tb-color-primary-rgb: 124, 58, 237; --tb-color-primary-text-emphasis: #4c1d95; --tb-color-primary-bg-subtle: #f5f3ff; --tb-color-primary-border-subtle: #c4b5fd; --tb-link-color: #7C3AED; --tb-link-color-rgb: 124, 58, 237; --tb-link-hover-color: #6D28D9; --tb-link-hover-color-rgb: 109, 40, 217; --tb-focus-ring-color: rgba(124, 58, 237, 0.25); --tb-color-primary-active: #6D28D9; --tb-color-primary-light: #f5f3ff; --tb-color-primary-inverse: #ffffff; --tb-primary: var(--tb-color-primary); --tb-primary-rgb: var(--tb-color-primary-rgb); --tb-primary-text-emphasis: var(--tb-color-primary-text-emphasis); --tb-primary-bg-subtle: var(--tb-color-primary-bg-subtle); --tb-primary-border-subtle: var(--tb-color-primary-border-subtle); --tb-primary-active: var(--tb-color-primary-active); --tb-primary-light: var(--tb-color-primary-light); --tb-primary-inverse: var(--tb-color-primary-inverse); } .tb-theme, [data-bs-theme=light] .tb-theme { --bs-primary: var(--tb-color-primary); --bs-primary-rgb: var(--tb-color-primary-rgb); --bs-primary-text-emphasis: var(--tb-color-primary-text-emphasis); --bs-primary-bg-subtle: var(--tb-color-primary-bg-subtle); --bs-primary-border-subtle: var(--tb-color-primary-border-subtle); --bs-link-color: var(--tb-link-color); --bs-link-color-rgb: var(--tb-link-color-rgb); --bs-link-hover-color: var(--tb-link-hover-color); --bs-link-hover-color-rgb: var(--tb-link-hover-color-rgb); --bs-focus-ring-color: var(--tb-focus-ring-color); --bs-primary-active: var(--tb-color-primary-active); --bs-primary-light: var(--tb-color-primary-light); --bs-primary-inverse: var(--tb-color-primary-inverse); } /* Dark overrides. [data-bs-theme=dark] matches the same element as the :root block above and comes later, so it wins for body-level widgets too. */ [data-bs-theme=dark], [data-bs-theme=dark] .tb-theme { --tb-color-primary: #8B5CF6; --tb-color-primary-rgb: 139, 92, 246; --tb-color-primary-text-emphasis: #ddd6fe; --tb-color-primary-bg-subtle: #2e1065; --tb-color-primary-border-subtle: #6d28d9; --tb-link-color: #a78bfa; --tb-link-color-rgb: 167, 139, 250; --tb-link-hover-color: #c4b5fd; --tb-link-hover-color-rgb: 196, 181, 253; --tb-focus-ring-color: rgba(139, 92, 246, 0.3); --tb-color-primary-active: #7C3AED; --tb-color-primary-light: #2e1065; --tb-color-primary-inverse: #ffffff; --tb-primary: var(--tb-color-primary); --tb-primary-rgb: var(--tb-color-primary-rgb); --tb-primary-text-emphasis: var(--tb-color-primary-text-emphasis); --tb-primary-bg-subtle: var(--tb-color-primary-bg-subtle); --tb-primary-border-subtle: var(--tb-color-primary-border-subtle); --tb-primary-active: var(--tb-color-primary-active); --tb-primary-light: var(--tb-color-primary-light); --tb-primary-inverse: var(--tb-color-primary-inverse); } [data-bs-theme=dark] .tb-theme { --bs-primary: var(--tb-color-primary); --bs-primary-rgb: var(--tb-color-primary-rgb); --bs-primary-text-emphasis: var(--tb-color-primary-text-emphasis); --bs-primary-bg-subtle: var(--tb-color-primary-bg-subtle); --bs-primary-border-subtle: var(--tb-color-primary-border-subtle); --bs-link-color: var(--tb-link-color); --bs-link-color-rgb: var(--tb-link-color-rgb); --bs-link-hover-color: var(--tb-link-hover-color); --bs-link-hover-color-rgb: var(--tb-link-hover-color-rgb); --bs-focus-ring-color: var(--tb-focus-ring-color); --bs-primary-active: var(--tb-color-primary-active); --bs-primary-light: var(--tb-color-primary-light); --bs-primary-inverse: var(--tb-color-primary-inverse); } :root, [data-bs-theme=light] { --tb-tooltip-bg: #3F4254; --tb-tooltip-color: #ffffff; } .tooltip, [data-bs-theme=light] .tooltip { --bs-tooltip-bg: var(--tb-tooltip-bg); --bs-tooltip-color: var(--tb-tooltip-color); --bs-tooltip-font-size: 14px; } .tooltip .tooltip-inner { white-space: pre-line; } .tb-tooltip-md { --bs-tooltip-max-width: 260px; } .tb-tooltip-fit { --bs-tooltip-max-width: 100%; } /* Full-viewport page content area (subtracts app header + page padding) */ .tb-page-content { height: calc(100vh - var(--bs-app-header-height, 74px) - 120px); }