/* Theme font: KLab = Sora, KEO = Poppins. data-theme is on so this applies before any other CSS. */ :root[data-theme="k-labs"] { --font-family: 'Sora', sans-serif; --theme-accent-brand: hsl(23, 90%, 54%); --theme-primary: hsl(0, 0%, 0%); --theme-background: hsl(0, 0%, 100%); --theme-foreground: hsl(0, 0%, 0%); --theme-navbar-bg: rgba(255, 255, 255, 0.7); --theme-sidebar-bg: rgba(255, 255, 255, 0.98); --theme-button-primary: hsl(23, 90%, 54%); --theme-logout-bg: transparent; } :root[data-theme="k-labs"] body { font-family: 'Sora', sans-serif !important; } :root[data-theme="keo-legacy"] { --font-family: 'Poppins', sans-serif; --theme-accent-brand: hsl(210, 80%, 15%); --theme-primary: hsl(210, 80%, 15%); --theme-background: hsl(0, 0%, 100%); --theme-foreground: hsl(210, 80%, 15%); --theme-navbar-bg: rgb(9, 31, 52); --theme-sidebar-bg: white; --theme-button-primary: hsl(210, 80%, 15%); --theme-logout-bg: red; } :root[data-theme="keo-legacy"] body { font-family: 'Poppins', sans-serif !important; } .theme-navbar[data-theme="k-labs"] { backdrop-filter: blur(16px) saturate(180%); -webkit-backdrop-filter: blur(16px) saturate(180%); border: 1px solid rgba(0, 0, 0, 0.2); } .theme-navbar[data-theme="keo-legacy"] { background-color: rgb(9, 31, 52) !important; backdrop-filter: none; -webkit-backdrop-filter: none; } .theme-button-primary[data-theme="k-labs"] { background-color: var(--theme-button-primary); color: white; border: none; } .theme-button-primary[data-theme="keo-legacy"] { background-color: var(--theme-button-primary); color: white; border: 2px transparent solid; } .theme-logout-button[data-theme="keo-legacy"] { background: red !important; color: white !important; border-radius: 20px !important; padding: 8px 16px !important; } /* Loading colors for keo-legacy theme */ [data-theme="keo-legacy"] { --loader-color: hsl(210, 80%, 15%) !important; --mantine-color-orange-filled: hsl(210, 80%, 15%) !important; --mantine-color-orange-6: hsl(210, 80%, 15%) !important; --mantine-color-orange-7: hsl(210, 80%, 20%) !important; --mantine-primary-color-filled: hsl(210, 80%, 15%) !important; } /* Only apply to loading overlay SVGs, not all SVGs */ [data-theme="keo-legacy"] .custom-loading-overlay svg, [data-theme="keo-legacy"] .custom-loading-overlay-container svg, [data-theme="keo-legacy"] .custom-loading-overlay svg *, [data-theme="keo-legacy"] .custom-loading-overlay-container svg * { color: hsl(210, 80%, 15%) !important; fill: hsl(210, 80%, 15%) !important; stroke: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .mantine-Loader-root, [data-theme="keo-legacy"] [class*="mantine-Loader"] { color: hsl(210, 80%, 15%) !important; --loader-color: hsl(210, 80%, 15%) !important; --mantine-color-orange-filled: hsl(210, 80%, 15%) !important; } /* Only Mantine Loader SVGs, not chart SVGs */ [data-theme="keo-legacy"] .mantine-Loader-root svg, [data-theme="keo-legacy"] [class*="mantine-Loader"] svg { color: hsl(210, 80%, 15%) !important; fill: hsl(210, 80%, 15%) !important; stroke: hsl(210, 80%, 15%) !important; } /* Sidebar loading spinner for keo-legacy */ [data-theme="keo-legacy"] .sidebar__nav-link--loading::after { border-color: hsl(210, 80%, 15%) !important; border-top-color: transparent !important; } /* Pagination active state for keo-legacy */ [data-theme="keo-legacy"] .custom-pagination .mantine-Pagination-control[data-active] { background-color: hsl(210, 80%, 15%) !important; color: white !important; } /* Button accent-brand variant for keo-legacy - use red for primary actions */ [data-theme="keo-legacy"] .custom-button-accent-brand, [data-theme="keo-legacy"] button.custom-button-accent-brand, [data-theme="keo-legacy"] a.custom-button-accent-brand { background-color: #dc3545 !important; color: white !important; } [data-theme="keo-legacy"] .custom-button-accent-brand:hover:not(:disabled) { background-color: #c82333 !important; opacity: 1 !important; } /* Button accent-brand-outline variant for keo-legacy */ [data-theme="keo-legacy"] .custom-button-accent-brand-outline, [data-theme="keo-legacy"] button.custom-button-accent-brand-outline, [data-theme="keo-legacy"] a.custom-button-accent-brand-outline { border: 1px solid #dc3545 !important; background-color: transparent !important; color: #dc3545 !important; } [data-theme="keo-legacy"] .custom-button-accent-brand-outline:hover:not(:disabled) { background-color: rgba(220, 53, 69, 0.1) !important; } /* Select dropdown items for keo-legacy */ [data-theme="keo-legacy"] .mantine-Select-item[data-selected], [data-theme="keo-legacy"] .mantine-Select-item[data-hovered] { background-color: hsla(210, 80%, 15%, 0.1) !important; color: hsl(210, 80%, 15%) !important; } /* MultiSelect values for keo-legacy */ [data-theme="keo-legacy"] .mantine-MultiSelect-value { background-color: hsla(210, 80%, 15%, 0.1) !important; color: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .mantine-MultiSelect-valueRemove { color: hsl(210, 80%, 15%) !important; } /* Slider for keo-legacy */ [data-theme="keo-legacy"] .custom-slider-ui .mantine-Slider-bar { background-color: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .custom-slider-ui .mantine-Slider-thumb { background-color: hsl(210, 80%, 15%) !important; } /* Switch for keo-legacy */ [data-theme="keo-legacy"] .custom-switch-brand[data-checked="true"] .mantine-Switch-track, [data-theme="keo-legacy"] .custom-switch-brand input[type="checkbox"]:checked ~ .mantine-Switch-track { background-color: hsl(210, 80%, 15%) !important; } /* Radio buttons for keo-legacy */ [data-theme="keo-legacy"] .custom-radio-group input[type="radio"], [data-theme="keo-legacy"] .custom-radio-group input[type="radio"]:checked { border-color: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .custom-radio-group svg { fill: hsl(210, 80%, 15%) !important; stroke: hsl(210, 80%, 15%) !important; color: hsl(210, 80%, 15%) !important; } /* Checkbox for keo-legacy */ [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-input { border-color: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-input:checked { background-color: hsl(210, 80%, 15%) !important; border-color: hsl(210, 80%, 15%) !important; } [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-icon svg { fill: white !important; } /* Links in data entry table for keo-legacy */ [data-theme="keo-legacy"] .data-entry-files-table__link, [data-theme="keo-legacy"] .data-entry-files-table__link:hover, [data-theme="keo-legacy"] .data-entry-files-table__link i { color: hsl(210, 80%, 15%) !important; } /* Burger button color for keo-legacy - white on dark blue navbar */ [data-theme="keo-legacy"] .header__burger-btn, [data-theme="keo-legacy"] .header__burger-btn .mantine-Burger-root, [data-theme="keo-legacy"] #sidebar-toggle-burger { color: white !important; } [data-theme="keo-legacy"] .mantine-Burger-burger, [data-theme="keo-legacy"] .mantine-Burger-burger::before, [data-theme="keo-legacy"] .mantine-Burger-burger::after { background-color: white !important; } /* Hover states for burger in keo-legacy */ [data-theme="keo-legacy"] #sidebar-toggle:hover { background-color: rgba(255, 255, 255, 0.1) !important; } [data-theme="keo-legacy"] #sidebar-toggle:active { background-color: rgba(255, 255, 255, 0.15) !important; } /* ── Language Selector — Shared (both themes) ── */ /* Pill-shaped trigger */ .language-selector .mantine-Select-input { border-radius: 999px !important; height: 36px !important; min-height: 36px !important; padding-left: 36px !important; padding-right: 28px !important; font-size: 13px !important; font-weight: 500 !important; cursor: pointer !important; transition: background-color 0.15s ease, border-color 0.15s ease !important; } /* Globe icon inside input */ .language-selector .mantine-Select-section[data-position="left"] { width: 36px !important; pointer-events: none !important; } .language-selector .mantine-Select-section[data-position="left"] svg { width: 16px !important; height: 16px !important; } /* Chevron */ .language-selector .mantine-Select-section[data-position="right"] svg { width: 14px !important; height: 14px !important; opacity: 0.6; } /* Dropdown panel — portaled at body level, targeted via classNames prop */ .lang-dropdown { border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08) !important; border: 1px solid hsl(var(--border)) !important; padding: 4px !important; margin-top: 4px !important; overflow: hidden !important; background: white !important; } /* Dropdown option items — radio-circle style */ .lang-option { border-radius: 8px !important; padding: 8px 12px 8px 36px !important; font-size: 14px !important; font-weight: 400 !important; position: relative !important; transition: background-color 0.1s ease !important; color: hsl(var(--foreground)) !important; } /* Radio circle (empty) — pseudo-element */ .lang-option::before { content: '' !important; position: absolute !important; left: 10px !important; top: 50% !important; transform: translateY(-50%) !important; width: 16px !important; height: 16px !important; border-radius: 50% !important; border: 2px solid hsl(var(--border)) !important; background: transparent !important; box-sizing: border-box !important; } /* Radio circle (filled) — selected option */ .lang-option[data-checked]::before, .lang-option[data-combobox-selected]::before { border-color: hsl(var(--accent-brand)) !important; background: hsl(var(--accent-brand)) !important; box-shadow: inset 0 0 0 3px white !important; } /* Hover state */ .lang-option:hover { background-color: hsl(var(--accent) / 0.5) !important; } /* ── Language Dropdown — k-labs: glassmorphism panel ── */ [data-theme="k-labs"] .lang-dropdown { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(16px) saturate(180%) !important; -webkit-backdrop-filter: blur(16px) saturate(180%) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04) !important; } /* ── Language Selector — k-labs: transparent, glassmorphism-aligned ── */ [data-theme="k-labs"] .language-selector .mantine-Select-input { background-color: transparent; border: 1px solid rgba(0, 0, 0, 0.08); color: hsl(var(--foreground)); } [data-theme="k-labs"] .language-selector .mantine-Select-input:hover { background-color: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.15); } [data-theme="k-labs"] .language-selector .mantine-Select-input:focus, [data-theme="k-labs"] .language-selector .mantine-Select-input[aria-expanded="true"] { background-color: rgba(0, 0, 0, 0.04); border-color: hsl(var(--accent-brand) / 0.4); box-shadow: 0 0 0 2px hsl(var(--accent-brand) / 0.1); } [data-theme="k-labs"] .language-selector .mantine-Select-section[data-position="left"] svg { color: hsl(var(--foreground) / 0.6); } [data-theme="k-labs"] .language-selector .mantine-Select-input:hover ~ .mantine-Select-section[data-position="left"] svg, [data-theme="k-labs"] .language-selector:hover .mantine-Select-section[data-position="left"] svg { color: hsl(var(--foreground) / 0.85); } [data-theme="k-labs"] .language-selector .mantine-Select-section[data-position="right"] svg { color: hsl(var(--foreground) / 0.35); } /* ── Language Selector — keo-legacy: dark navy navbar ── */ [data-theme="keo-legacy"] .language-selector .mantine-Select-input { background-color: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.25); color: white; } [data-theme="keo-legacy"] .language-selector .mantine-Select-input:hover { background-color: rgba(255, 255, 255, 0.2); } [data-theme="keo-legacy"] .language-selector .mantine-Select-section[data-position="left"] svg { color: white; } [data-theme="keo-legacy"] .language-selector .mantine-Select-section[data-position="right"] svg { color: rgba(255, 255, 255, 0.7); }