@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap'); /* 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: #3DD88A; --theme-primary: #284D64; --theme-background: #ffffff; --theme-foreground: #284D64; --theme-navbar-bg: #284D64; --theme-sidebar-bg: #ffffff; --theme-button-primary: #3DD88A; --theme-logout-bg: #E62E17; --accent-brand-h: 149.81; --accent-brand-s: 66.52%; --accent-brand-l: 54.31%; --background: 112.5 23.53% 98%; --foreground: 203 42.86% 27.45%; --surface: 0 0% 100%; --secondary: 112 20% 95%; --accent: 149 34% 92%; --border: 203 24% 84%; --ring: 149.81 66.52% 54.31%; --sidebar-bg: 112.5 23.53% 98%; --sidebar-accent: 149 34% 92%; --destructive: 6.67 81.82% 49.61%; --warning: 34.78 81.82% 49.61%; --success: 149.81 66.52% 54.31%; --color-primary: #284D64; --color-primary-dark: #203d50; --color-primary-light: #3d637d; --color-secondary: #3DD88A; --color-secondary-dark: #28bf72; --color-secondary-light: #6fe4a6; --color-text-primary: #284D64; --color-text-secondary: #5d7281; --color-text-light: #83939d; --color-bg-light: #EBF2EA; --color-bg-dark: #284D64; --color-success: #3DD88A; --color-error: #E62E17; --color-warning: #E68F17; --color-logout: #E62E17; --focus-ring-brand: rgba(61, 216, 138, 0.24); --focus-ring-strong: rgba(40, 77, 100, 0.22); --button-primary-bg: var(--keo-gradient); --button-primary-hover: linear-gradient(135deg, #1f4155 0%, #34c67e 100%); --button-primary-text: #ffffff; --button-primary-shadow: 0 14px 28px rgba(40, 77, 100, 0.2); --button-secondary-bg: rgba(40, 77, 100, 0.08); --button-secondary-hover: rgba(40, 77, 100, 0.14); --button-secondary-text: #284D64; --button-outline-border: rgba(40, 77, 100, 0.22); --button-outline-hover: rgba(61, 216, 138, 0.08); --button-ghost-hover: rgba(40, 77, 100, 0.08); --button-danger-bg: #E62E17; --button-danger-hover: #cf2914; --button-danger-text: #ffffff; --button-brand-bg: #3DD88A; --button-brand-hover: #33c47d; --button-brand-text: #16384a; --button-brand-outline-bg: rgba(61, 216, 138, 0.1); --button-brand-outline-border: rgba(61, 216, 138, 0.32); --button-brand-outline-text: #238356; --card-bg: #ffffff; --card-border: rgba(40, 77, 100, 0.14); --card-shadow: 0 16px 30px rgba(40, 77, 100, 0.08); --page-header-border: rgba(40, 77, 100, 0.12); --page-header-icon: #284D64; --data-card-bg: #ffffff; --data-card-border: rgba(40, 77, 100, 0.14); --data-card-shadow: 0 12px 22px rgba(40, 77, 100, 0.08); --data-card-label: #5d7281; --data-card-value: #284D64; --calculator-brand: #3DD88A; --calculator-brand-strong: #284D64; --calculator-brand-hover: #33c47d; --calculator-brand-contrast: #ffffff; --calculator-surface: #ffffff; --calculator-surface-soft: #EBF2EA; --calculator-surface-muted: #f4f8f3; --calculator-panel: #ffffff; --calculator-panel-soft: #f7faf7; --calculator-panel-elevated: #ffffff; --calculator-panel-border: rgba(40, 77, 100, 0.12); --calculator-panel-border-strong: rgba(40, 77, 100, 0.18); --calculator-text: #49606f; --calculator-text-strong: #284D64; --calculator-text-muted: #6b7f8d; --calculator-shadow: 0 22px 40px rgba(40, 77, 100, 0.1); --calculator-soft-shadow: 0 12px 24px rgba(40, 77, 100, 0.09); --calculator-table-shell-bg: #ffffff; --calculator-table-header-bg: #284D64; --calculator-table-header-text: #ffffff; --calculator-table-cell-bg: #ffffff; --calculator-table-cell-bg-alt: #f6faf7; --calculator-table-border: rgba(40, 77, 100, 0.1); --calculator-table-hover: rgba(61, 216, 138, 0.08); --calculator-table-text: #284D64; --calculator-table-shadow: 0 16px 26px rgba(40, 77, 100, 0.08); --calculator-input-bg: #ffffff; --calculator-input-border: rgba(40, 77, 100, 0.18); --calculator-input-border-hover: rgba(40, 77, 100, 0.28); --calculator-input-focus: rgba(61, 216, 138, 0.18); --calculator-input-text: #284D64; --calculator-input-placeholder: #8ca0aa; --calculator-danger: #E62E17; --calculator-danger-soft: #fff1ef; --calculator-success: #3DD88A; --calculator-success-soft: #edf9f2; --calculator-warning: #E68F17; --calculator-warning-soft: #fff6e8; --calculator-risk-bg: linear-gradient(135deg, #fff2f0 0%, #ffffff 100%); --calculator-risk-border: rgba(230, 46, 23, 0.22); --calculator-risk-text: #a62b1b; --calculator-safe-bg: linear-gradient(135deg, #edf9f2 0%, #ffffff 100%); --calculator-safe-border: rgba(61, 216, 138, 0.2); --calculator-safe-text: #284D64; --calculator-highlight-bg: rgba(61, 216, 138, 0.12); --calculator-highlight-border: rgba(61, 216, 138, 0.36); --calculator-loader: #3DD88A; --calculator-status-info-gradient: linear-gradient(135deg, rgba(40, 77, 100, 0.08) 0%, #ffffff 100%); --calculator-status-info-border: #284D64; --calculator-status-success-gradient: linear-gradient(135deg, rgba(61, 216, 138, 0.12) 0%, #ffffff 100%); --calculator-status-success-border: #3DD88A; --calculator-status-warning-gradient: linear-gradient(135deg, rgba(230, 143, 23, 0.16) 0%, #ffffff 100%); --calculator-status-warning-border: #E68F17; /* Calculator headings for keo-legacy: Roboto + brand green */ --calculator-title-color: #3DD88A; --calculator-title-font-family: 'Roboto', sans-serif; } :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: #284D64 !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: #E62E17 !important; color: white !important; border-radius: 20px !important; padding: 8px 16px !important; } /* Loading colors for keo-legacy theme */ [data-theme="keo-legacy"] { --loader-color: #3DD88A !important; --mantine-color-orange-filled: #3DD88A !important; --mantine-color-orange-6: #3DD88A !important; --mantine-color-orange-7: #33c47d !important; --mantine-primary-color-filled: #3DD88A !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: #3DD88A !important; fill: #3DD88A !important; stroke: #3DD88A !important; } [data-theme="keo-legacy"] .mantine-Loader-root, [data-theme="keo-legacy"] [class*="mantine-Loader"] { color: #3DD88A !important; --loader-color: #3DD88A !important; --mantine-color-orange-filled: #3DD88A !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: #3DD88A !important; fill: #3DD88A !important; stroke: #3DD88A !important; } /* Sidebar loading spinner for keo-legacy */ [data-theme="keo-legacy"] .sidebar__nav-link--loading::after { border-color: #3DD88A !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: #284D64 !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: #3DD88A !important; color: #16384a !important; } [data-theme="keo-legacy"] .custom-button-accent-brand:hover:not(:disabled) { background-color: #33c47d !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 rgba(61, 216, 138, 0.32) !important; background-color: rgba(61, 216, 138, 0.08) !important; color: #238356 !important; } [data-theme="keo-legacy"] .custom-button-accent-brand-outline:hover:not(:disabled) { background-color: rgba(61, 216, 138, 0.14) !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: rgba(61, 216, 138, 0.1) !important; color: #284D64 !important; } /* MultiSelect values for keo-legacy */ [data-theme="keo-legacy"] .mantine-MultiSelect-value { background-color: rgba(61, 216, 138, 0.12) !important; color: #284D64 !important; } [data-theme="keo-legacy"] .mantine-MultiSelect-valueRemove { color: #284D64 !important; } /* Slider for keo-legacy */ [data-theme="keo-legacy"] .custom-slider-ui .mantine-Slider-bar { background-color: #3DD88A !important; } [data-theme="keo-legacy"] .custom-slider-ui .mantine-Slider-thumb { background-color: #284D64 !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: #3DD88A !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: #3DD88A !important; } [data-theme="keo-legacy"] .custom-radio-group svg { fill: #3DD88A !important; stroke: #3DD88A !important; color: #3DD88A !important; } /* Checkbox for keo-legacy */ [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-input { border-color: #3DD88A !important; } [data-theme="keo-legacy"] .custom-checkbox .mantine-Checkbox-input:checked { background-color: #3DD88A !important; border-color: #3DD88A !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: #284D64 !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); }