/* ============================================================================ MediprospectsHR — Design System Source of truth: /design-system/MASTER.md Loaded last; uses CSS variables to retheme existing .oh-* component classes. ============================================================================ */ :root { /* Color tokens */ --mhr-primary: #4F46E5; --mhr-primary-hover: #4338CA; --mhr-primary-soft: #EEF2FF; --mhr-accent: #10B981; --mhr-accent-hover: #059669; --mhr-accent-soft: #D1FAE5; --mhr-warning: #F59E0B; --mhr-warning-soft: #FEF3C7; --mhr-danger: #EF4444; --mhr-danger-hover: #DC2626; --mhr-danger-soft: #FEE2E2; --mhr-text: #0F172A; --mhr-text-muted: #475569; --mhr-text-subtle: #94A3B8; --mhr-border: #E2E8F0; --mhr-border-strong: #CBD5E1; --mhr-bg: #F8FAFC; --mhr-surface: #FFFFFF; --mhr-surface-alt: #F1F5F9; /* Typography */ --mhr-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mhr-font-xs: 12px; --mhr-font-sm: 14px; --mhr-font-base: 16px; --mhr-font-lg: 18px; --mhr-font-xl: 22px; --mhr-font-2xl: 28px; --mhr-font-3xl: 36px; /* Spacing (8px base) */ --mhr-space-1: 4px; --mhr-space-2: 8px; --mhr-space-3: 12px; --mhr-space-4: 16px; --mhr-space-5: 24px; --mhr-space-6: 32px; --mhr-space-7: 48px; --mhr-space-8: 64px; /* Radius */ --mhr-radius-sm: 6px; --mhr-radius-md: 10px; --mhr-radius-lg: 14px; --mhr-radius-xl: 20px; --mhr-radius-full: 9999px; /* Shadows */ --mhr-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04); --mhr-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --mhr-shadow-md: 0 4px 8px -2px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.04); --mhr-shadow-lg: 0 12px 24px -8px rgba(15, 23, 42, 0.12), 0 4px 8px -4px rgba(15, 23, 42, 0.06); --mhr-shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.25); /* Layout */ --mhr-sidebar-width: 240px; --mhr-sidebar-collapsed: 64px; --mhr-header-height: 56px; --mhr-content-max: 1440px; /* Motion */ --mhr-transition: 150ms ease; --mhr-transition-slow: 200ms ease; /* Theme-aware filters (overridden in dark) */ --mhr-icon-filter: brightness(0); --mhr-icon-filter-active: brightness(0) saturate(100%) invert(24%) sepia(95%) saturate(3196%) hue-rotate(245deg) brightness(91%) contrast(89%); /* Foreground-on-saturated-fill — hero panels, primary buttons, discount badges */ --mhr-on-primary: #ffffff; --mhr-on-accent: #ffffff; } /* ============================================================================ DARK MODE — applied when [data-theme="dark"] is on ============================================================================ */ html[data-theme="dark"] { --mhr-primary: #818CF8; /* indigo-400, lighter for dark bg */ --mhr-primary-hover: #A5B4FC; /* indigo-300 */ --mhr-primary-soft: rgba(129, 140, 248, 0.15); --mhr-accent: #34D399; /* emerald-400 */ --mhr-accent-hover: #6EE7B7; --mhr-accent-soft: rgba(52, 211, 153, 0.15); --mhr-warning: #FBBF24; --mhr-warning-soft: rgba(251, 191, 36, 0.15); --mhr-danger: #F87171; --mhr-danger-hover: #FCA5A5; --mhr-danger-soft: rgba(248, 113, 113, 0.15); --mhr-text: #F1F5F9; /* slate-100 */ --mhr-text-muted: #CBD5E1; /* slate-300 */ --mhr-text-subtle: #94A3B8; /* slate-400 */ --mhr-border: #1E293B; /* slate-800 */ --mhr-border-strong: #334155; /* slate-700 */ --mhr-bg: #0B1220; /* near slate-950 */ --mhr-surface: #111827; /* near slate-900 */ --mhr-surface-alt: #1E293B; /* slate-800 */ --mhr-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --mhr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --mhr-shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --mhr-shadow-lg: 0 12px 24px -8px rgba(0, 0, 0, 0.6), 0 4px 8px -4px rgba(0, 0, 0, 0.4); --mhr-shadow-focus: 0 0 0 3px rgba(129, 140, 248, 0.35); /* Icons: black filter would be invisible on dark surface — flip to white */ --mhr-icon-filter: brightness(0) invert(1); --mhr-icon-filter-active: brightness(0) saturate(100%) invert(64%) sepia(43%) saturate(1056%) hue-rotate(202deg) brightness(101%) contrast(96%); /* Slight tint on white text on dark gradient hero panels — softer than pure white */ --mhr-on-primary: rgba(255, 255, 255, 0.96); --mhr-on-accent: rgba(255, 255, 255, 0.96); } html[data-theme="dark"] body { background-color: var(--mhr-bg) !important; color: var(--mhr-text); color-scheme: dark; } html[data-theme="dark"] ::selection { background: rgba(129, 140, 248, 0.35); color: #F1F5F9; } /* Component-specific dark refinements Most components retheme automatically via --mhr-* variables. The rules below target spots that reach past CSS variables (compiled style.min.css with hardcoded white/light colors, inline styles, etc.). */ html[data-theme="dark"] .oh-wrapper-main, html[data-theme="dark"] #main, html[data-theme="dark"] #main-section { background-color: var(--mhr-bg) !important; color: var(--mhr-text); } /* Sidebar — was white in light mode; switch to dark surface */ html[data-theme="dark"] .oh-sidebar { background-color: var(--mhr-surface) !important; border-right-color: var(--mhr-border); } html[data-theme="dark"] .oh-sidebar__company { border-bottom-color: var(--mhr-border); } html[data-theme="dark"] .oh-sidebar__company-title { color: var(--mhr-text) !important; } html[data-theme="dark"] .oh-sidebar__company-link { color: var(--mhr-text-muted) !important; } html[data-theme="dark"] .oh-sidebar__menu-link:hover { background: var(--mhr-surface-alt) !important; color: var(--mhr-text) !important; } html[data-theme="dark"] .oh-sidebar__menu-link--active { background: var(--mhr-primary-soft) !important; color: var(--mhr-primary) !important; } html[data-theme="dark"] .oh-sidebar__submenu { border-left-color: var(--mhr-border); } /* Sidebar icons — switch black filter to white inversion */ html[data-theme="dark"] .oh-sidebar__menu-icon img, html[data-theme="dark"] .oh-sidebar__menu-icon ion-icon { filter: var(--mhr-icon-filter) !important; } html[data-theme="dark"] .oh-sidebar__menu-link--active .oh-sidebar__menu-icon img, html[data-theme="dark"] .oh-sidebar__menu-link--active .oh-sidebar__menu-icon ion-icon { filter: var(--mhr-icon-filter-active) !important; } /* Navbar */ html[data-theme="dark"] .oh-navbar { background-color: var(--mhr-surface) !important; border-bottom-color: var(--mhr-border); } html[data-theme="dark"] .oh-navbar__action-icons:hover, html[data-theme="dark"] .oh-navbar__notification-link:hover, html[data-theme="dark"] .oh-navbar__action-icons-link:hover, html[data-theme="dark"] .oh-navbar__user-info:hover, html[data-theme="dark"] .oh-navbar__toggle-link:hover { background-color: var(--mhr-surface-alt) !important; } html[data-theme="dark"] .oh-navbar__user-image, html[data-theme="dark"] .oh-navbar__user-photo { border-color: var(--mhr-border-strong); } /* Cards / surfaces */ html[data-theme="dark"] .oh-card, html[data-theme="dark"] .oh-card-dashboard, html[data-theme="dark"] .oh-dashboard__card, html[data-theme="dark"] .oh-titlebar, html[data-theme="dark"] .oh-wrapper-card, html[data-theme="dark"] .oh-inner-sidebar, html[data-theme="dark"] .oh-inner-sidebar-section, html[data-theme="dark"] .oh-card-tab { background-color: var(--mhr-surface) !important; border-color: var(--mhr-border) !important; color: var(--mhr-text); } /* Tables */ html[data-theme="dark"] .oh-table, html[data-theme="dark"] .oh-sticky-table, html[data-theme="dark"] table { background: var(--mhr-surface) !important; border-color: var(--mhr-border) !important; color: var(--mhr-text); } html[data-theme="dark"] .oh-table thead th, html[data-theme="dark"] .oh-sticky-table thead th, html[data-theme="dark"] table thead th { background-color: var(--mhr-surface-alt) !important; color: var(--mhr-text-muted) !important; border-bottom-color: var(--mhr-border) !important; } html[data-theme="dark"] .oh-table tbody td, html[data-theme="dark"] .oh-sticky-table tbody td, html[data-theme="dark"] table tbody td { color: var(--mhr-text); border-bottom-color: var(--mhr-border) !important; } html[data-theme="dark"] .oh-table tbody tr:hover td, html[data-theme="dark"] .oh-sticky-table tbody tr:hover td, html[data-theme="dark"] table tbody tr:hover td { background-color: var(--mhr-surface-alt) !important; } /* Inputs */ html[data-theme="dark"] .oh-input, html[data-theme="dark"] .oh-select, html[data-theme="dark"] .oh-textarea, html[data-theme="dark"] input.form-control, html[data-theme="dark"] select.form-control, html[data-theme="dark"] textarea.form-control, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="date"], html[data-theme="dark"] input[type="time"], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--mhr-surface) !important; color: var(--mhr-text) !important; border-color: var(--mhr-border-strong) !important; } html[data-theme="dark"] .oh-input:focus, html[data-theme="dark"] input.form-control:focus, html[data-theme="dark"] select.form-control:focus, html[data-theme="dark"] textarea.form-control:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: var(--mhr-primary) !important; box-shadow: var(--mhr-shadow-focus) !important; } html[data-theme="dark"] ::placeholder { color: var(--mhr-text-subtle) !important; } /* Modals */ html[data-theme="dark"] .oh-modal { background-color: rgba(0, 0, 0, 0.7) !important; } html[data-theme="dark"] .oh-modal__dialog { background-color: var(--mhr-surface) !important; border-color: var(--mhr-border) !important; color: var(--mhr-text); } html[data-theme="dark"] .oh-modal__dialog-header, html[data-theme="dark"] .oh-modal__dialog-footer { border-color: var(--mhr-border) !important; } /* Dropdowns / popovers — light AND dark theming */ .oh-dropdown__menu, .dropdown-menu { background-color: var(--mhr-surface) !important; border: 1px solid var(--mhr-border) !important; border-radius: var(--mhr-radius-md) !important; box-shadow: var(--mhr-shadow-md) !important; padding: 6px !important; color: var(--mhr-text); } .oh-dropdown__items { list-style: none; padding: 0; margin: 0; } .oh-dropdown__item { margin: 0; } .oh-dropdown__link, .dropdown-item { display: flex; align-items: center; gap: var(--mhr-space-2); padding: 8px 10px !important; font-size: var(--mhr-font-sm); color: var(--mhr-text) !important; border-radius: var(--mhr-radius-sm); text-decoration: none; transition: background-color var(--mhr-transition), color var(--mhr-transition); } .oh-dropdown__link:hover, .dropdown-item:hover { background-color: var(--mhr-surface-alt) !important; color: var(--mhr-text) !important; text-decoration: none; } .oh-dropdown__lang-icon { width: 20px; height: 20px; border-radius: 3px; object-fit: cover; flex-shrink: 0; } html[data-theme="dark"] .oh-dropdown, html[data-theme="dark"] .oh-dropdown__menu, html[data-theme="dark"] .dropdown-menu { background-color: var(--mhr-surface) !important; border-color: var(--mhr-border) !important; color: var(--mhr-text); } html[data-theme="dark"] .oh-dropdown__link, html[data-theme="dark"] .dropdown-item { color: var(--mhr-text) !important; } html[data-theme="dark"] .oh-dropdown__item:hover, html[data-theme="dark"] .oh-dropdown__link:hover, html[data-theme="dark"] .dropdown-item:hover { background-color: var(--mhr-surface-alt) !important; color: var(--mhr-text) !important; } /* Misc text */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6, html[data-theme="dark"] .oh-title, html[data-theme="dark"] .oh-titlebar__title, html[data-theme="dark"] .oh-profile__name, html[data-theme="dark"] .oh-card__title, html[data-theme="dark"] label, html[data-theme="dark"] .form-label { color: var(--mhr-text) !important; } html[data-theme="dark"] label, html[data-theme="dark"] .form-label, html[data-theme="dark"] .oh-input__label { color: var(--mhr-text-muted) !important; } /* Activity / notification sidebar */ html[data-theme="dark"] .oh-activity-sidebar { background-color: var(--mhr-surface) !important; border-color: var(--mhr-border) !important; color: var(--mhr-text); } /* ============================================================================ Sticky-table — was hardcoded #fff for headers + first column in compiled SCSS ============================================================================ */ .oh-sticky-table { border: 1px solid var(--mhr-border) !important; border-radius: var(--mhr-radius-lg) !important; background: var(--mhr-surface) !important; } /* All cells use surface background by default */ .oh-sticky-table__th, .oh-sticky-table__sd, .oh-sticky-table__td { background: var(--mhr-surface) !important; background-color: var(--mhr-surface) !important; color: var(--mhr-text) !important; border-color: var(--mhr-border) !important; } /* Table header — was background:#fff, now uses surface-alt with muted uppercase label */ .oh-sticky-table__th { background: var(--mhr-surface-alt) !important; background-color: var(--mhr-surface-alt) !important; color: var(--mhr-text-muted) !important; font-size: var(--mhr-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--mhr-border) !important; } /* First-column sticky cell — was background:#fff with hardcoded dark text */ .oh-sticky-table__sd { border-right: 1px solid var(--mhr-border) !important; } /* Drag-highlight rail — was hsl(185,68%,98%) light teal */ .oh-sticky-table__tbody--highlight { background: var(--mhr-primary-soft) !important; border: 1px dashed var(--mhr-primary) !important; } /* Row hover — already covered above for legacy hsl(0,0%,96%) light grey */ /* Header first cell border in compiled CSS */ .oh-sticky-table__thead div.oh-sticky-table__th:first-child, .oh-sticky-table__tfoot div.oh-sticky-table__th:first-child { border-right: 1px solid var(--mhr-border) !important; } /* ============================================================================ Empty state — was height: calc(100vh - 400px), text hsl(0,0%,45%) ============================================================================ */ .oh-empty { height: auto !important; min-height: 160px; padding: var(--mhr-space-5) var(--mhr-space-4); } .oh-empty__title { font-size: var(--mhr-font-lg) !important; color: var(--mhr-text) !important; margin-top: var(--mhr-space-3); } .oh-empty__subtitle, .oh-empty__message { color: var(--mhr-text-muted) !important; } /* Dark-mode empty-state SVG (was solid #cbd5e1 / dark fill, invisible on dark) */ .oh-empty img, .oh-empty svg, .oh-404__image { opacity: 0.65; max-width: 96px; height: auto; } html[data-theme="dark"] .oh-empty img, html[data-theme="dark"] .oh-404__image { filter: invert(1) opacity(0.4); } /* ============================================================================ Recruitment / pipeline — pink stage counter badges (legacy hot pink) ============================================================================ */ .oh-recruitment__stage-count, .oh-stage__count, .oh-pipeline__stage-count, .oh-card__count { background: var(--mhr-primary) !important; color: var(--mhr-on-primary) !important; } /* ============================================================================ Filter chips (compiled SCSS uses red/orange palette) ============================================================================ */ .oh-filter, .oh-filter-tag, .oh-filter__tag { background: var(--mhr-primary-soft) !important; color: var(--mhr-primary) !important; border-color: var(--mhr-primary) !important; } /* ============================================================================ Page-input pagination (Page X of Y with up/down arrows) ============================================================================ */ .oh-pagination input, input.oh-pagination__page-input { background: var(--mhr-surface) !important; border: 1px solid var(--mhr-border-strong) !important; color: var(--mhr-text) !important; } /* ============================================================================ Navbar polish — notification badge, check-in/out button, time runner Targets compiled hex colors that don't theme. ============================================================================ */ /* Kill the compiled `.oh-btn:hover` translateY shift + grey bg leak (anti-pattern, plus it conflicts with our outline hover styles). */ .oh-btn:hover { transform: none !important; } /* Outline button content — target ion-icon and text spans EXPLICITLY rather than via Shadow-DOM-inherit. ion-icon respects `color` only when set on the element itself, not always inherited from parent. */ .oh-btn--success-outline ion-icon, .oh-btn--success-outline .text-success, .oh-btn--success-outline .oh-navbar__clock-icon { color: var(--mhr-accent-hover) !important; } html[data-theme="dark"] .oh-btn--success-outline ion-icon, html[data-theme="dark"] .oh-btn--success-outline .text-success, html[data-theme="dark"] .oh-btn--success-outline .oh-navbar__clock-icon { color: var(--mhr-accent) !important; } .oh-btn--warning-outline ion-icon, .oh-btn--warning-outline .text-warning { color: #B45309 !important; } html[data-theme="dark"] .oh-btn--warning-outline ion-icon, html[data-theme="dark"] .oh-btn--warning-outline .text-warning { color: var(--mhr-warning) !important; } .oh-btn--danger-outline ion-icon, .oh-btn--danger-outline .text-danger { color: var(--mhr-danger-hover) !important; } html[data-theme="dark"] .oh-btn--danger-outline ion-icon, html[data-theme="dark"] .oh-btn--danger-outline .text-danger { color: var(--mhr-danger) !important; } /* Soft hover: keep outline + content color, just shift bg to a soft tint. Avoids the "fill-bg-and-make-content-vanish" trap. Stable per UX rules. */ .oh-btn--success-outline:hover, .oh-btn--success-outline:focus, .oh-btn--success-outline:focus-visible { background-color: var(--mhr-accent-soft) !important; border-color: var(--mhr-accent) !important; color: var(--mhr-accent-hover) !important; } html[data-theme="dark"] .oh-btn--success-outline:hover, html[data-theme="dark"] .oh-btn--success-outline:focus { color: var(--mhr-accent) !important; } .oh-btn--warning-outline:hover, .oh-btn--warning-outline:focus { background-color: var(--mhr-warning-soft) !important; border-color: var(--mhr-warning) !important; color: #B45309 !important; } html[data-theme="dark"] .oh-btn--warning-outline:hover, html[data-theme="dark"] .oh-btn--warning-outline:focus { color: var(--mhr-warning) !important; } .oh-btn--danger-outline:hover, .oh-btn--danger-outline:focus { background-color: var(--mhr-danger-soft) !important; border-color: var(--mhr-danger) !important; color: var(--mhr-danger-hover) !important; } html[data-theme="dark"] .oh-btn--danger-outline:hover, html[data-theme="dark"] .oh-btn--danger-outline:focus { color: var(--mhr-danger) !important; } .oh-btn--primary-outline:hover, .oh-btn--primary-outline:focus { background-color: var(--mhr-primary-soft) !important; border-color: var(--mhr-primary) !important; color: var(--mhr-primary) !important; } /* Active / focused / aria-expanded state on navbar dropdown icons creates a white "highlight box" via compiled :focus styles. Force surface-alt instead. */ .oh-navbar__action-icons:focus, .oh-navbar__action-icons:focus-within, .oh-navbar__action-icons.oh-active, .oh-navbar__action-icons[aria-expanded="true"], .oh-navbar__notification-link:focus, .oh-navbar__notification-link:focus-within { background-color: var(--mhr-surface-alt) !important; outline: none !important; } /* Notification beacon badge — was hardcoded pink hsl(325,100%,63%) */ .oh-navbar__notification-beacon { background-color: var(--mhr-danger) !important; color: var(--mhr-on-primary) !important; font-weight: 600; min-width: 18px; height: 18px; font-size: 11px !important; } /* Navbar check-in / check-out — use solid PRIMARY (indigo) fill, not emerald outline. Solid white-on-indigo stays legible in every state and avoids the "green icon disappears into green bg on hover" trap. */ #attendance-activity-container .oh-btn--success-outline, #attendance-activity-container .oh-btn--warning-outline, .oh-navbar .oh-btn--success-outline, .oh-navbar .oh-btn--warning-outline { background-color: var(--mhr-primary) !important; border: 1px solid var(--mhr-primary) !important; color: var(--mhr-on-primary) !important; } #attendance-activity-container .oh-btn--success-outline:hover, #attendance-activity-container .oh-btn--warning-outline:hover, .oh-navbar .oh-btn--success-outline:hover, .oh-navbar .oh-btn--warning-outline:hover { background-color: var(--mhr-primary-hover) !important; border-color: var(--mhr-primary-hover) !important; color: var(--mhr-on-primary) !important; } #attendance-activity-container ion-icon, #attendance-activity-container .text-success, #attendance-activity-container .text-warning, #attendance-activity-container .oh-navbar__clock-icon, #attendance-activity-container .time-runner, #attendance-activity-container .at-work-seconds, #attendance-activity-container .hr-Check-In-out-text, .oh-navbar .oh-btn--success-outline ion-icon, .oh-navbar .oh-btn--warning-outline ion-icon, .oh-navbar .oh-btn--success-outline .text-success, .oh-navbar .oh-btn--warning-outline .text-warning { color: var(--mhr-on-primary) !important; } /* Outline button defaults for everywhere ELSE (forms, list actions etc.) */ .oh-btn--success-outline { background-color: transparent !important; border: 1px solid var(--mhr-accent) !important; color: var(--mhr-accent-hover) !important; } html[data-theme="dark"] .oh-btn--success-outline { color: var(--mhr-accent) !important; } .oh-btn--warning-outline { background-color: transparent !important; border: 1px solid var(--mhr-warning) !important; color: #B45309 !important; } html[data-theme="dark"] .oh-btn--warning-outline { color: var(--mhr-warning) !important; } .oh-btn--danger-outline { background-color: transparent !important; border: 1px solid var(--mhr-danger) !important; color: var(--mhr-danger-hover) !important; } html[data-theme="dark"] .oh-btn--danger-outline { color: var(--mhr-danger) !important; } .oh-btn--danger-outline:hover, .oh-btn--danger-outline:focus { background-color: var(--mhr-danger) !important; color: var(--mhr-on-primary) !important; } .oh-btn--primary-outline { background-color: transparent !important; border: 1px solid var(--mhr-primary) !important; color: var(--mhr-primary) !important; } .oh-btn--primary-outline:hover, .oh-btn--primary-outline:focus { background-color: var(--mhr-primary) !important; color: var(--mhr-on-primary) !important; } /* Time runner div inside check-in/out button inherits button color (good) */ .time-runner { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Bootstrap text-success / text-warning / text-danger / text-success — token-ize */ .text-success { color: var(--mhr-accent-hover) !important; } html[data-theme="dark"] .text-success { color: var(--mhr-accent) !important; } .text-warning { color: #B45309 !important; } html[data-theme="dark"] .text-warning { color: var(--mhr-warning) !important; } .text-danger { color: var(--mhr-danger-hover) !important; } html[data-theme="dark"] .text-danger { color: var(--mhr-danger) !important; } .text-primary { color: var(--mhr-primary) !important; } .text-muted { color: var(--mhr-text-muted) !important; } /* ============================================================================ Phase A — screenshot bug patches These target legacy class hooks that hardcoded $text-color etc. in compiled SCSS. ============================================================================ */ /* Names/values that legacy code marked as `oh-text--dark` should pick up the theme */ .oh-text--dark, .oh-profile .oh-text--dark, .oh-profile__name.oh-text--dark, span.oh-profile__name.oh-text--dark { color: var(--mhr-text) !important; } html[data-theme="dark"] .oh-text--dark, html[data-theme="dark"] .oh-profile .oh-text--dark, html[data-theme="dark"] .oh-profile__name.oh-text--dark, html[data-theme="dark"] span.oh-profile__name.oh-text--dark { color: var(--mhr-text) !important; } /* oh-profile__name fallback (some templates omit oh-text--dark) */ .oh-profile__name, .oh-sticky-table__tr .oh-profile__name { color: var(--mhr-text); } /* Sticky-table hover — was hsl(0,0%,96%) light grey, breaks dark mode */ .oh-sticky-table__tr:hover { background-color: var(--mhr-surface-alt) !important; } html[data-theme="dark"] .oh-sticky-table__tr:hover { background-color: var(--mhr-surface-alt) !important; } /* Pagination text — was using $text-color compiled hex */ .oh-pagination__page, .oh-pagination__count, .oh-pagination__nav, .oh-pagination a { color: var(--mhr-text-muted) !important; } html[data-theme="dark"] .oh-pagination__page, html[data-theme="dark"] .oh-pagination__count, html[data-theme="dark"] .oh-pagination__nav, html[data-theme="dark"] .oh-pagination a { color: var(--mhr-text-muted) !important; } /* Empty-state — original used `height: calc(100vh - 400px)` which ate the screen */ .oh-empty, .oh-empty-content, .oh-empty__container { height: auto !important; min-height: 160px; padding: var(--mhr-space-5) var(--mhr-space-4); color: var(--mhr-text-subtle); } .oh-empty svg, .oh-empty-content svg { stroke: var(--mhr-text-subtle); color: var(--mhr-text-subtle); } /* "Expected working" / generic recruitment tag — was inheriting dark text */ .oh-recuritment_tag, .oh-recruitment_tag { background: var(--mhr-warning-soft) !important; color: #B45309 !important; padding: 2px 8px; border-radius: var(--mhr-radius-full); font-size: var(--mhr-font-xs) !important; font-weight: 500; } html[data-theme="dark"] .oh-recuritment_tag, html[data-theme="dark"] .oh-recruitment_tag { background: var(--mhr-warning-soft) !important; color: #FCD34D !important; } /* Approve / reject icon buttons in dashboard tile rows — kill `w-100` chunkiness */ .oh-card-dashboard .oh-btn--success.w-100, .oh-card-dashboard .oh-btn--danger.w-100, .oh-sticky-table .oh-btn--success.w-100, .oh-sticky-table .oh-btn--danger.w-100 { width: auto !important; min-width: 36px; height: 32px; padding: 0 10px !important; font-size: var(--mhr-font-xs); } /* Kanban card title (legacy hardcoded HSL orange) */ .oh-kanban-card__title { border: 1px solid var(--mhr-border) !important; background-color: var(--mhr-warning-soft) !important; color: var(--mhr-text); } /* Close icon (X) in tile / chart headers */ .chart_close_button, .oh-chart-close, .oh-tile__close { color: var(--mhr-text-muted); transition: color var(--mhr-transition); cursor: pointer; } .chart_close_button:hover, .oh-chart-close:hover, .oh-tile__close:hover { color: var(--mhr-text); } /* ============================================================================ Phase D — module polish (UI/UX Pro Max patterns) - Recruitment: Sales Intelligence Dashboard (kanban, deal cards, status borders) - Payroll: Financial Dashboard (sticky headers, currency, profit/loss color) - Attendance: status colors mapped to tokens - Leave: status indicators ============================================================================ */ /* Attendance / work-record legacy status colors — were #ed4c4c, #c65d0f, etc. */ .oh-status--present, .oh-status--checked-in, .oh-status-tag--present { background: var(--mhr-accent-soft) !important; color: var(--mhr-accent-hover) !important; } html[data-theme="dark"] .oh-status--present, html[data-theme="dark"] .oh-status--checked-in, html[data-theme="dark"] .oh-status-tag--present { color: var(--mhr-accent) !important; } .oh-status--absent, .oh-status--missed, .oh-status-tag--absent, .oh-status-tag--missed { background: var(--mhr-danger-soft) !important; color: var(--mhr-danger-hover) !important; } .oh-status--late, .oh-status--pending, .oh-status-tag--late, .oh-status-tag--pending { background: var(--mhr-warning-soft) !important; color: #B45309 !important; } html[data-theme="dark"] .oh-status--late, html[data-theme="dark"] .oh-status--pending, html[data-theme="dark"] .oh-status-tag--late, html[data-theme="dark"] .oh-status-tag--pending { color: #FCD34D !important; } .oh-status--leave, .oh-status-tag--leave { background: var(--mhr-primary-soft) !important; color: var(--mhr-primary) !important; } .oh-status--neutral, .oh-status-tag--neutral, .oh-status--inactive { background: var(--mhr-surface-alt) !important; color: var(--mhr-text-muted) !important; } /* Recruitment kanban deal cards (Sales Intelligence Dashboard pattern) */ .oh-kanban-card, .oh-board__card { background: var(--mhr-surface) !important; border: 1px solid var(--mhr-border) !important; border-left: 3px solid var(--mhr-primary) !important; border-radius: var(--mhr-radius-md) !important; padding: var(--mhr-space-3) !important; box-shadow: var(--mhr-shadow-xs) !important; margin-bottom: var(--mhr-space-2); transition: border-color var(--mhr-transition), box-shadow var(--mhr-transition); } .oh-kanban-card:hover, .oh-board__card:hover { border-color: var(--mhr-border-strong) !important; border-left-color: var(--mhr-primary) !important; box-shadow: var(--mhr-shadow-sm) !important; } .oh-kanban-card--won { border-left-color: var(--mhr-accent) !important; } .oh-kanban-card--lost { border-left-color: var(--mhr-danger) !important; } .oh-kanban-card--blocked { border-left-color: var(--mhr-warning) !important; } .oh-kanban-column, .oh-board__column { background: var(--mhr-bg) !important; border: 1px solid var(--mhr-border) !important; border-radius: var(--mhr-radius-md) !important; padding: var(--mhr-space-3) !important; } .oh-kanban-column__header, .oh-board__column-header { font-size: var(--mhr-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mhr-text-muted) !important; margin-bottom: var(--mhr-space-3); display: flex; justify-content: space-between; align-items: center; } /* Payroll / financial — sticky table headers, currency-style alignment */ .oh-payroll-table th, .oh-financial-table th, table.payroll th, table.financial th { background: var(--mhr-surface-alt) !important; color: var(--mhr-text-muted) !important; font-size: var(--mhr-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: var(--mhr-space-3) var(--mhr-space-4); position: sticky; top: 0; z-index: 1; } .oh-currency, .oh-amount, td.currency, td.amount { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; text-align: right; } .oh-currency--positive, .oh-amount--positive { color: var(--mhr-accent-hover); font-weight: 500; } html[data-theme="dark"] .oh-currency--positive, html[data-theme="dark"] .oh-amount--positive { color: var(--mhr-accent); } .oh-currency--negative, .oh-amount--negative { color: var(--mhr-danger-hover); font-weight: 500; } /* Profile sections (employee individual view) */ .oh-profile-info, .oh-tabs__content, .oh-tab__content { background: var(--mhr-surface) !important; color: var(--mhr-text); } .oh-profile-info__title, .oh-profile-info__subtitle { color: var(--mhr-text); } .oh-profile-info__subtitle { color: var(--mhr-text-muted) !important; } /* Tabs */ .oh-tabs__tab { color: var(--mhr-text-muted); border-bottom: 2px solid transparent; transition: color var(--mhr-transition), border-color var(--mhr-transition); } .oh-tabs__tab:hover { color: var(--mhr-text); } .oh-tabs__tab--active { color: var(--mhr-primary) !important; border-bottom-color: var(--mhr-primary) !important; font-weight: 600; } /* Search bars */ .oh-search-bar input, .oh-search input { background: var(--mhr-surface) !important; border: 1px solid var(--mhr-border-strong) !important; color: var(--mhr-text) !important; } .oh-search-bar input::placeholder, .oh-search input::placeholder { color: var(--mhr-text-subtle); } /* Theme toggle button states */ html:not([data-theme="dark"]) .mhr-theme-toggle__icon--moon { display: inline-flex; } html:not([data-theme="dark"]) .mhr-theme-toggle__icon--sun { display: none; } html[data-theme="dark"] .mhr-theme-toggle__icon--moon { display: none; } html[data-theme="dark"] .mhr-theme-toggle__icon--sun { display: inline-flex; } .mhr-theme-toggle { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--mhr-radius-md); background: transparent; border: none; color: var(--mhr-text-muted); cursor: pointer; transition: background-color var(--mhr-transition), color var(--mhr-transition); } .mhr-theme-toggle:hover { background-color: var(--mhr-surface-alt); color: var(--mhr-text); } .mhr-theme-toggle ion-icon { font-size: 22px; } /* ============================================================================ Base body / typography ============================================================================ */ body { font-family: var(--mhr-font) !important; font-size: var(--mhr-font-base); line-height: 1.6; color: var(--mhr-text); background-color: var(--mhr-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6, .oh-title, .oh-titlebar__title, .oh-profile__name, .oh-card__title { font-family: var(--mhr-font) !important; color: var(--mhr-text); font-weight: 600; letter-spacing: -0.01em; } a { color: var(--mhr-primary); transition: color var(--mhr-transition); } a:hover { color: var(--mhr-primary-hover); } ::selection { background: var(--mhr-primary-soft); color: var(--mhr-primary-hover); } /* Focus ring — visible on every interactive element */ :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--mhr-shadow-focus); border-radius: var(--mhr-radius-sm); } /* ============================================================================ App shell ============================================================================ */ .oh-wrapper-main { background-color: var(--mhr-bg); } #main-section { padding: var(--mhr-space-5); max-width: var(--mhr-content-max); margin: 0 auto; } @media (max-width: 768px) { #main-section { padding: var(--mhr-space-4); } } /* ============================================================================ Sidebar ============================================================================ */ .oh-sidebar { background-color: var(--mhr-surface) !important; border-right: 1px solid var(--mhr-border); width: var(--mhr-sidebar-width); padding: var(--mhr-space-3) var(--mhr-space-2); } .oh-sidebar__company { padding: var(--mhr-space-3) var(--mhr-space-3) var(--mhr-space-4) !important; border-bottom: 1px solid var(--mhr-border); margin-bottom: var(--mhr-space-3); } .oh-sidebar__company-title { font-size: var(--mhr-font-sm) !important; font-weight: 600; color: var(--mhr-text); } .oh-sidebar__company-link { font-size: var(--mhr-font-xs) !important; color: var(--mhr-text-muted) !important; } .oh-sidebar__menu-items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .oh-sidebar__menu-item { margin: 0; } .oh-sidebar__menu-link { display: flex !important; align-items: center; gap: var(--mhr-space-3); padding: 10px var(--mhr-space-3) !important; border-radius: var(--mhr-radius-md) !important; font-size: var(--mhr-font-sm); font-weight: 500; color: var(--mhr-text-muted) !important; text-decoration: none; transition: background-color var(--mhr-transition), color var(--mhr-transition); position: relative; /* Kill old gradient backgrounds (compiled style.min.css uses `background:` shorthand) */ background: transparent !important; } .oh-sidebar__menu-link:hover { background: var(--mhr-surface-alt) !important; color: var(--mhr-text) !important; } .oh-sidebar__menu-link--active, .oh-sidebar__menu-link.oh-sidebar__menu-link--active { background: var(--mhr-primary-soft) !important; background-image: none !important; color: var(--mhr-primary) !important; font-weight: 600; } .oh-sidebar__menu-link--active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: var(--mhr-radius-full); background-color: var(--mhr-primary); } .oh-sidebar__menu-icon { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; } .oh-sidebar__menu-icon img, .oh-sidebar__menu-icon ion-icon { width: 20px !important; height: 20px !important; flex-shrink: 0; /* Override inline `filter: brightness(0) invert(1)` from sidebar.html. Filter is theme-aware: black for light mode, white for dark mode. */ filter: var(--mhr-icon-filter) !important; opacity: 0.55; transition: opacity var(--mhr-transition), filter var(--mhr-transition); } .oh-sidebar__menu-link:hover .oh-sidebar__menu-icon img, .oh-sidebar__menu-link:hover .oh-sidebar__menu-icon ion-icon { opacity: 0.85; } .oh-sidebar__menu-link--active .oh-sidebar__menu-icon img, .oh-sidebar__menu-link--active .oh-sidebar__menu-icon ion-icon { opacity: 1; filter: var(--mhr-icon-filter-active) !important; } .oh-sidebar__submenu { margin: var(--mhr-space-1) 0 var(--mhr-space-2) 32px; padding-left: var(--mhr-space-3); border-left: 1px solid var(--mhr-border); } .oh-sidebar__submenu-link { display: block; padding: 6px var(--mhr-space-3); font-size: 13px; color: var(--mhr-text-muted) !important; border-radius: var(--mhr-radius-sm); text-decoration: none; transition: background-color var(--mhr-transition), color var(--mhr-transition); } .oh-sidebar__submenu-link:hover { background-color: var(--mhr-surface-alt); color: var(--mhr-text) !important; } .oh-sidebar__submenu-link.oh-sidebar__submenu-link--active { color: var(--mhr-primary) !important; font-weight: 600; background-color: var(--mhr-primary-soft); } .oh-sidebar__submenu-items_re li::before { color: var(--mhr-accent) !important; } /* ============================================================================ Navbar ============================================================================ */ .oh-navbar { height: var(--mhr-header-height); background-color: var(--mhr-surface) !important; border-bottom: 1px solid var(--mhr-border); box-shadow: none !important; padding: 0 var(--mhr-space-5); position: sticky; top: 0; z-index: 50; } .oh-navbar__wrapper { height: 100%; display: flex; align-items: center; justify-content: space-between; max-width: var(--mhr-content-max); margin: 0 auto; width: 100%; } .oh-navbar__systray { display: flex; align-items: center; gap: var(--mhr-space-2); } .oh-navbar__action-icons, .oh-navbar__notification-link, .oh-navbar__action-icons-link { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--mhr-radius-md); color: var(--mhr-text-muted) !important; transition: background-color var(--mhr-transition), color var(--mhr-transition); /* Compiled SCSS adds left+right 1px borders that look like pill outlines on dark bg */ border-left: none !important; border-right: none !important; padding: 0 !important; } .oh-navbar__action-icons:hover, .oh-navbar__notification-link:hover, .oh-navbar__action-icons-link:hover { background-color: var(--mhr-surface-alt); color: var(--mhr-text) !important; } .oh-navbar__icon { font-size: 22px !important; } .oh-navbar__user-info { padding: var(--mhr-space-2) var(--mhr-space-3); border-radius: var(--mhr-radius-md); transition: background-color var(--mhr-transition); } .oh-navbar__user-info:hover { background-color: var(--mhr-surface-alt); } .oh-navbar__user-image, .oh-navbar__user-photo { border-radius: var(--mhr-radius-full); border: 2px solid var(--mhr-border); } .oh-navbar__toggle-link { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--mhr-radius-md); cursor: pointer; transition: background-color var(--mhr-transition); } .oh-navbar__toggle-link:hover { background-color: var(--mhr-surface-alt); } /* ============================================================================ Buttons ============================================================================ */ .oh-btn { font-family: var(--mhr-font) !important; font-size: var(--mhr-font-sm); font-weight: 500; padding: 10px 18px; border-radius: var(--mhr-radius-md); border: 1px solid transparent; cursor: pointer; transition: background-color var(--mhr-transition), border-color var(--mhr-transition), color var(--mhr-transition), box-shadow var(--mhr-transition); display: inline-flex; align-items: center; gap: var(--mhr-space-2); line-height: 1.4; } .oh-btn:disabled { opacity: 0.6; cursor: not-allowed; } .oh-btn--primary, .oh-btn--secondary { background-color: var(--mhr-primary) !important; color: #fff !important; border-color: var(--mhr-primary) !important; } .oh-btn--primary:hover, .oh-btn--secondary:hover { background-color: var(--mhr-primary-hover) !important; border-color: var(--mhr-primary-hover) !important; } .oh-btn--success { background-color: var(--mhr-accent) !important; color: #fff !important; border-color: var(--mhr-accent) !important; } .oh-btn--success:hover { background-color: var(--mhr-accent-hover) !important; border-color: var(--mhr-accent-hover) !important; } .oh-btn--danger { background-color: var(--mhr-danger) !important; color: #fff !important; border-color: var(--mhr-danger) !important; } .oh-btn--danger:hover { background-color: var(--mhr-danger-hover) !important; border-color: var(--mhr-danger-hover) !important; } .oh-btn--warning { background-color: var(--mhr-warning) !important; color: #fff !important; border-color: var(--mhr-warning) !important; } .oh-btn--light, .oh-btn--outline { background-color: var(--mhr-surface) !important; color: var(--mhr-text) !important; border-color: var(--mhr-border-strong) !important; } .oh-btn--light:hover, .oh-btn--outline:hover { background-color: var(--mhr-surface-alt) !important; border-color: var(--mhr-border-strong) !important; } .oh-btn--shadow { box-shadow: var(--mhr-shadow-sm); } /* ============================================================================ Cards ============================================================================ */ .oh-card, .oh-card-dashboard, .oh-dashboard__card { background-color: var(--mhr-surface) !important; border: 1px solid var(--mhr-border) !important; border-radius: var(--mhr-radius-lg) !important; box-shadow: var(--mhr-shadow-xs) !important; } .oh-card__title, .oh-titlebar__title { font-size: var(--mhr-font-lg); font-weight: 600; color: var(--mhr-text); } /* ============================================================================ Tables ============================================================================ */ .oh-table, .oh-sticky-table { border-collapse: separate; border-spacing: 0; width: 100%; background: var(--mhr-surface); border-radius: var(--mhr-radius-lg); overflow: hidden; border: 1px solid var(--mhr-border); } .oh-table thead th, .oh-sticky-table thead th { background-color: var(--mhr-surface-alt) !important; color: var(--mhr-text-muted) !important; font-size: var(--mhr-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: var(--mhr-space-3) var(--mhr-space-4); text-align: left; border-bottom: 1px solid var(--mhr-border); position: sticky; top: 0; } .oh-table tbody td, .oh-sticky-table tbody td { padding: var(--mhr-space-3) var(--mhr-space-4); font-size: var(--mhr-font-sm); color: var(--mhr-text); border-bottom: 1px solid var(--mhr-border); vertical-align: middle; } .oh-table tbody tr:hover td, .oh-sticky-table tbody tr:hover td { background-color: var(--mhr-surface-alt); } .oh-table tbody tr:last-child td, .oh-sticky-table tbody tr:last-child td { border-bottom: none; } /* ============================================================================ Inputs ============================================================================ */ .oh-input, .oh-select, .oh-textarea, input.form-control, select.form-control, textarea.form-control { font-family: var(--mhr-font) !important; font-size: var(--mhr-font-sm) !important; padding: 10px 12px !important; border: 1px solid var(--mhr-border-strong) !important; border-radius: var(--mhr-radius-sm) !important; background-color: var(--mhr-surface) !important; color: var(--mhr-text) !important; transition: border-color var(--mhr-transition), box-shadow var(--mhr-transition); width: 100%; } .oh-input:focus, .oh-select:focus, .oh-textarea:focus, input.form-control:focus, select.form-control:focus, textarea.form-control:focus { border-color: var(--mhr-primary) !important; box-shadow: var(--mhr-shadow-focus) !important; outline: none; } .oh-input::placeholder, .oh-textarea::placeholder, input.form-control::placeholder, textarea.form-control::placeholder { color: var(--mhr-text-subtle); } .oh-input__label, label, .form-label { font-size: 13px !important; font-weight: 500 !important; color: var(--mhr-text-muted) !important; margin-bottom: 6px !important; display: inline-block; } /* ============================================================================ Badges / chips / tags ============================================================================ */ .oh-badge, .oh-tag, .badge { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; font-size: var(--mhr-font-xs) !important; font-weight: 500; border-radius: var(--mhr-radius-full); line-height: 1; letter-spacing: 0.01em; border: none; } .oh-badge--primary, .oh-tag--primary { background-color: var(--mhr-primary-soft) !important; color: var(--mhr-primary) !important; } .oh-badge--success, .oh-tag--success, .oh-badge--accent { background-color: var(--mhr-accent-soft) !important; color: var(--mhr-accent-hover) !important; } .oh-badge--warning, .oh-tag--warning { background-color: var(--mhr-warning-soft) !important; color: #B45309 !important; } .oh-badge--danger, .oh-tag--danger { background-color: var(--mhr-danger-soft) !important; color: var(--mhr-danger-hover) !important; } /* ============================================================================ Modals ============================================================================ */ .oh-modal__dialog { border-radius: var(--mhr-radius-xl) !important; border: 1px solid var(--mhr-border); box-shadow: var(--mhr-shadow-lg) !important; } .oh-modal__dialog-header { border-bottom: 1px solid var(--mhr-border); padding: var(--mhr-space-4) var(--mhr-space-5); } .oh-modal__dialog-title { font-size: var(--mhr-font-lg); font-weight: 600; color: var(--mhr-text); } .oh-modal__dialog-body { padding: var(--mhr-space-5); } .oh-modal__dialog-footer { border-top: 1px solid var(--mhr-border); padding: var(--mhr-space-4) var(--mhr-space-5); display: flex; gap: var(--mhr-space-3); justify-content: flex-end; } /* ============================================================================ Alerts ============================================================================ */ .oh-alert { border-radius: var(--mhr-radius-md); padding: var(--mhr-space-3) var(--mhr-space-4); font-size: var(--mhr-font-sm); border: 1px solid transparent; } .oh-alert.success { background-color: var(--mhr-accent-soft); color: var(--mhr-accent-hover); border-color: var(--mhr-accent); } .oh-alert.error, .oh-alert.danger { background-color: var(--mhr-danger-soft); color: var(--mhr-danger-hover); border-color: var(--mhr-danger); } .oh-alert.warning { background-color: var(--mhr-warning-soft); color: #B45309; border-color: var(--mhr-warning); } .oh-alert.info { background-color: var(--mhr-primary-soft); color: var(--mhr-primary-hover); border-color: var(--mhr-primary); } /* ============================================================================ Profile / avatars ============================================================================ */ /* `.oh-profile` is the row CONTAINER, not the avatar — don't put a border on it. The actual circle is `.oh-profile__image` / `.oh-profile__avatar`. */ .oh-profile__avatar, .oh-profile__image, .oh-avatar { border-radius: var(--mhr-radius-full); } /* ============================================================================ Phase E — module polish add-ons - Attendance work-record cell colors (legend + grid) - Live indicator (Real-Time Monitoring pattern) - Status dots reused for Leave / OKR legends ============================================================================ */ /* Status dots — replace inline `style="background-color: red/yellowgreen/orange/grey"` */ .oh-dot--status-requested { background-color: var(--mhr-warning) !important; } .oh-dot--status-approved { background-color: var(--mhr-accent) !important; } .oh-dot--status-rejected { background-color: var(--mhr-danger) !important; } .oh-dot--status-cancelled { background-color: var(--mhr-text-subtle) !important; } .oh-dot--status-pending { background-color: var(--mhr-warning) !important; } /* Work-record grid cells (attendance): legacy hex -> tokens */ .oh-work-cell--present { background-color: var(--mhr-accent) !important; color: var(--mhr-on-accent) !important; } .oh-work-cell--absent { background-color: var(--mhr-text-muted) !important; color: var(--mhr-on-accent) !important; } .oh-work-cell--leave { background-color: var(--mhr-primary) !important; color: var(--mhr-on-primary) !important; } .oh-work-cell--half { background-color: var(--mhr-warning-soft) !important; color: var(--mhr-text) !important; } .oh-work-cell--conflict { background-color: var(--mhr-danger) !important; color: var(--mhr-on-accent) !important; } .oh-work-cell--leave-but-attended { background-color: var(--mhr-warning) !important; color: var(--mhr-text) !important; } .oh-work-dot--present { background-color: var(--mhr-accent) !important; } .oh-work-dot--absent { background-color: var(--mhr-text-muted) !important; } .oh-work-dot--leave { background-color: var(--mhr-primary) !important; } .oh-work-dot--half { background-color: var(--mhr-warning) !important; } .oh-work-dot--conflict { background-color: var(--mhr-danger) !important; } .oh-work-dot--leave-but-attended { background-color: var(--mhr-warning-soft) !important; border: 1px solid var(--mhr-warning); } /* Penalties pill (was inline rgb(229,79,56) box) */ .oh-penalty-pill { background-color: var(--mhr-danger-soft); border: 1px solid var(--mhr-danger); color: var(--mhr-danger-hover); border-radius: var(--mhr-radius-full); padding: 6px 12px; font-weight: 600; display: inline-block; } html[data-theme="dark"] .oh-penalty-pill { color: var(--mhr-danger); } /* Live indicator (Real-Time Monitoring style) — for attendance dashboard "live" badges */ .oh-live-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: var(--mhr-font-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mhr-text-muted); } .oh-live-indicator::before { content: ""; width: 8px; height: 8px; border-radius: var(--mhr-radius-full); background: var(--mhr-accent); box-shadow: 0 0 0 0 var(--mhr-accent); animation: oh-live-pulse 2s ease-out infinite; } @keyframes oh-live-pulse { 0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); } 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } } html[data-theme="dark"] .oh-live-indicator::before { animation-name: oh-live-pulse-dark; } @keyframes oh-live-pulse-dark { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } /* Form selects in dashboard headers — were `style="color:#5e5c5c"` */ .oh-select.oh-select--inline { background: var(--mhr-surface) !important; color: var(--mhr-text) !important; border: 1px solid var(--mhr-border-strong) !important; border-radius: var(--mhr-radius-sm) !important; } /* OKR / PMS list item — soft border-left accent */ .oh-okr-row, .oh-feedback-row { background: var(--mhr-surface); border: 1px solid var(--mhr-border); border-left: 3px solid var(--mhr-primary); border-radius: var(--mhr-radius-md); padding: var(--mhr-space-3) var(--mhr-space-4); margin-bottom: var(--mhr-space-2); transition: border-color var(--mhr-transition), box-shadow var(--mhr-transition); } .oh-okr-row:hover, .oh-feedback-row:hover { border-color: var(--mhr-border-strong); box-shadow: var(--mhr-shadow-sm); } .oh-okr-row--at-risk { border-left-color: var(--mhr-warning); } .oh-okr-row--off-track { border-left-color: var(--mhr-danger); } .oh-okr-row--complete { border-left-color: var(--mhr-accent); } /* ============================================================================ Quick filter chips — status-legend strip used on list pages (Recruitment / candidate / allowance / contract / etc.) ============================================================================ */ .oh-quick-filters{ display: flex; flex-direction: row-reverse; flex-wrap: wrap; gap: var(--mhr-space-3); align-items: center; margin-bottom: var(--mhr-space-3); } .oh-quick-filter{ cursor: pointer; display: inline-flex; align-items: center; gap: var(--mhr-space-2); color: var(--mhr-text-muted); font-size: var(--mhr-font-sm); padding: var(--mhr-space-1) var(--mhr-space-3); border-radius: var(--mhr-radius-full); transition: background-color var(--mhr-transition), color var(--mhr-transition); } .oh-quick-filter:hover{ background-color: var(--mhr-surface-alt); color: var(--mhr-text); } .oh-quick-filter__dot{ width: 8px; height: 8px; border-radius: var(--mhr-radius-full); display: inline-block; flex-shrink: 0; } /* ============================================================================ TOP AREA REDESIGN — navbar polish + hero refinement - Hide redundant navbar clock-in (the hero one is the primary action) - Tighter hero card so it doesn't waste vertical space - Cleaner navbar action-icon spacing ============================================================================ */ .oh-navbar #attendance-activity-container, .oh-navbar__systray #attendance-activity-container { display: none !important; } .oh-navbar__systray { gap: 4px !important; padding-right: var(--mhr-space-2); } .mhr-portal-hero { padding: var(--mhr-space-4) var(--mhr-space-5) !important; } .mhr-portal-greeting h1 { font-size: var(--mhr-font-xl) !important; margin-bottom: 4px !important; } /* Shift tile fix: was rendering "Shift" label + clock icon stacked in 44px box */ .mhr-shift-day { width: 44px; height: 44px; background: var(--mhr-primary-soft); border-radius: var(--mhr-radius-md); display: flex !important; align-items: center; justify-content: center; color: var(--mhr-primary); flex-shrink: 0; } .mhr-shift-day svg { width: 22px; height: 22px; } .mhr-shift-day--accent { background: var(--mhr-accent-soft); color: var(--mhr-accent-hover); } html[data-theme="dark"] .mhr-shift-day--accent { color: var(--mhr-accent); } /* Mail-icon action cell — make obvious that it's clickable */ .oh-sticky-table__td[data-toggle="oh-modal-toggle"], .oh-sticky-table__td[hx-get] { cursor: pointer; color: var(--mhr-text-muted); transition: background-color var(--mhr-transition), color var(--mhr-transition); } .oh-sticky-table__td[data-toggle="oh-modal-toggle"]:hover, .oh-sticky-table__td[hx-get]:hover { background-color: var(--mhr-primary-soft) !important; color: var(--mhr-primary) !important; } /* jQuery UI tooltip ($('document').tooltip() applies to every [title]) */ .ui-tooltip { background: var(--mhr-text) !important; color: var(--mhr-on-primary) !important; border: none !important; border-radius: var(--mhr-radius-sm) !important; font-size: var(--mhr-font-xs) !important; padding: 6px 10px !important; box-shadow: var(--mhr-shadow-md) !important; max-width: 240px; z-index: 9999; } /* ============================================================================ Centralized component classes (verifier flagged these as inline-only) ============================================================================ */ .oh-empty-block { text-align: center; padding: var(--mhr-space-5) var(--mhr-space-4); color: var(--mhr-text-subtle); font-size: var(--mhr-font-sm); background: var(--mhr-surface); border: 1px dashed var(--mhr-border); border-radius: var(--mhr-radius-md); } .oh-empty-block svg, .oh-empty-block img { display: block; margin: 0 auto var(--mhr-space-2); opacity: 0.6; max-width: 80px; } /* Row status indicator — 3px left rail per status (Sales Intelligence pattern) */ .row-status, [class*="row-status--"] { position: relative; } .row-status::before, [class*="row-status--"]::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; border-radius: 0 var(--mhr-radius-sm) var(--mhr-radius-sm) 0; } .row-status--red::before, .row-status--rejected::before { background: var(--mhr-danger); } .row-status--green::before, .row-status--approved::before { background: var(--mhr-accent); } .row-status--orange::before, .row-status--pending::before, .row-status--yellow::before { background: var(--mhr-warning); } .row-status--blue::before, .row-status--info::before { background: var(--mhr-primary); } .row-status--gray::before, .row-status--neutral::before { background: var(--mhr-text-subtle); } .row-status--cyan::before { background: #06B6D4; } /* ============================================================================ Recruitment — Pipeline (kanban) page /recruitment/pipeline/ uses .oh-kanban__section / .oh-kanban__card. The legacy SCSS hardcodes white / hsl(213, 22%, 84%) which breaks dark mode and looks washed-out in light mode. Token-driven overrides below. ============================================================================ */ .oh-kanban { border-top: 1px solid var(--mhr-border) !important; background: var(--mhr-bg); padding: var(--mhr-space-3) var(--mhr-space-2); gap: var(--mhr-space-3); } .oh-kanban__section { background: var(--mhr-surface-alt); border: 1px solid var(--mhr-border); border-radius: var(--mhr-radius-md); padding: var(--mhr-space-2); width: 280px; margin-right: var(--mhr-space-3) !important; } .oh-kanban__section-head, .oh-kanban__section-head--white { background-color: var(--mhr-surface-alt) !important; border-bottom: 1px solid var(--mhr-border); color: var(--mhr-text); border-top-left-radius: var(--mhr-radius-md); border-top-right-radius: var(--mhr-radius-md); padding: var(--mhr-space-3) !important; } .oh-kanban__section-title { color: var(--mhr-text) !important; font-size: var(--mhr-font-sm) !important; font-weight: 600 !important; letter-spacing: 0.02em; } .oh-kanban__section-head input.oh-tabs__movable-title { color: var(--mhr-text) !important; font-size: var(--mhr-font-sm) !important; background: transparent !important; } .oh-kanban__section-head .oh-badge { background: var(--mhr-primary-soft) !important; color: var(--mhr-primary) !important; border: none !important; } .oh-kanban__section-body { background: transparent; padding: var(--mhr-space-2) 0 0; } /* Cards inside a stage column */ .oh-kanban__card { background: var(--mhr-surface) !important; border: 1px solid var(--mhr-border) !important; border-bottom: 1px solid var(--mhr-border) !important; border-radius: var(--mhr-radius-md) !important; margin-bottom: var(--mhr-space-2); box-shadow: var(--mhr-shadow-xs); transition: border-color var(--mhr-transition), box-shadow var(--mhr-transition), transform var(--mhr-transition); } .oh-kanban__card:last-child { border-bottom: 1px solid var(--mhr-border) !important; } .oh-kanban__card:hover { border-color: var(--mhr-border-strong) !important; box-shadow: var(--mhr-shadow-sm) !important; } .oh-kanban__card:focus-visible { outline: 2px solid var(--mhr-primary); outline-offset: 2px; } .oh-kanban__card-head, .oh-kanban__card-footer { padding: var(--mhr-space-3) !important; color: var(--mhr-text); } .oh-kanban__card-footer { border-top: 1px solid var(--mhr-border); } .oh-kanban__card-footer-text, .oh-kanban__card-footer .oh-text--light { color: var(--mhr-text-muted) !important; font-size: var(--mhr-font-xs); } .oh-kanban__card .oh-profile__name, .oh-kanban__card .oh-text--dark { color: var(--mhr-text) !important; font-weight: 600; } /* Avatar fallback inside cards */ .oh-kanban__card .oh-profile__avatar img { border: 1px solid var(--mhr-border); background: var(--mhr-surface-alt); } /* "+ Stage" add column */ .oh-kanban__add-section { background: var(--mhr-surface) !important; border: 1px dashed var(--mhr-border-strong) !important; color: var(--mhr-text-muted) !important; border-radius: var(--mhr-radius-md); transition: border-color var(--mhr-transition), color var(--mhr-transition), background-color var(--mhr-transition); } .oh-kanban__add-section:hover { border-color: var(--mhr-primary) !important; color: var(--mhr-primary) !important; background: var(--mhr-primary-soft) !important; } /* Drag-drop placeholder while sorting */ .oh-kanban .ui-sortable-placeholder, .oh-kanban__card--highlight { background: var(--mhr-primary-soft) !important; border: 1px dashed var(--mhr-primary) !important; border-radius: var(--mhr-radius-md); visibility: visible !important; } .oh-kanban__section--highlight { background: var(--mhr-primary-soft) !important; border: 1px dashed var(--mhr-primary) !important; border-radius: var(--mhr-radius-md); } /* Tabs container at top of pipeline (recruitment titles) */ .oh-tabs { border: 1px solid var(--mhr-border) !important; border-radius: var(--mhr-radius-md); background: var(--mhr-surface); overflow: hidden; } .oh-tabs__tablist { background: var(--mhr-surface-alt); border-bottom: 1px solid var(--mhr-border); } .oh-tabs__tab, .oh-tabs__new-tab-config { color: var(--mhr-text-muted) !important; border-bottom: 1px solid var(--mhr-border) !important; background: transparent; transition: background-color var(--mhr-transition), color var(--mhr-transition); } .oh-tabs__tab:hover, .oh-tabs__new-tab-config:hover { background: var(--mhr-surface) !important; color: var(--mhr-text) !important; } .oh-tabs__tab--active, .oh-tabs__tablist .oh-tabs__tab--active { background: var(--mhr-surface) !important; color: var(--mhr-primary) !important; border-left: 1px solid var(--mhr-border) !important; border-right: 1px solid var(--mhr-border) !important; border-bottom: 2px solid var(--mhr-primary) !important; font-weight: 600; } .oh-tabs__tab--active:hover { color: var(--mhr-primary) !important; background: var(--mhr-surface) !important; } .oh-tabs__content, .oh-tabs__content--active { background: var(--mhr-surface) !important; color: var(--mhr-text); } /* Pipeline quick filters (Open / Closed dots) */ #quickFilters span { color: var(--mhr-text-muted); font-size: var(--mhr-font-sm); } #quickFilters .oh-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--mhr-radius-full); } .mhr-pipeline-quick-filters { padding: var(--mhr-space-2) var(--mhr-space-4); } .mhr-quick-filter { cursor: pointer; margin-left: var(--mhr-space-3); display: inline-flex; align-items: center; padding: 4px 10px; border-radius: var(--mhr-radius-full); transition: background-color var(--mhr-transition); } .mhr-quick-filter:hover { background: var(--mhr-surface-alt); color: var(--mhr-text); } .mhr-quick-filter__dot--closed { background-color: var(--mhr-danger) !important; } .mhr-quick-filter__dot--open { background-color: var(--mhr-accent) !important; } /* Pipeline helper classes (replace inline styles) */ .mhr-clickable { cursor: pointer; } .mhr-clickable:focus-visible { outline: 2px solid var(--mhr-primary); outline-offset: 2px; } .mhr-stage-title-input { width: auto; min-width: 220px; max-width: 600px; border: none; background: transparent; font-size: var(--mhr-font-sm); font-weight: 600; color: var(--mhr-text); padding: 4px 6px; border-radius: var(--mhr-radius-sm); } .mhr-stage-title-input:not([readonly]):focus { background: var(--mhr-surface); outline: 2px solid var(--mhr-primary); } .mhr-kanban-action-btn { width: 28px !important; height: 28px !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: var(--mhr-radius-sm); color: var(--mhr-text-muted); } .mhr-kanban-action-btn:hover { background: var(--mhr-surface-alt); color: var(--mhr-text); } /* Stage column where current user is a stage manager */ .oh-kanban__section-head--mine { background: var(--mhr-warning-soft) !important; border-bottom-color: var(--mhr-warning) !important; } /* Closed recruitment tab */ .oh-tabs__tab--closed { text-decoration: line-through; opacity: 0.7; } .oh-tabs__tab--mine { background: var(--mhr-warning-soft) !important; padding-right: 0; } .oh-tabs__tab--mine.oh-tabs__tab--active { background: var(--mhr-surface) !important; } /* Rejected candidate card — left status rail using design tokens */ .oh-kanban__card--rejected { border-left: 3px solid var(--mhr-danger) !important; } /* Candidate card (card view in pipeline) helpers */ .mhr-candidate-card { position: relative; color: inherit; text-decoration: none; overflow: hidden; } .mhr-candidate-card--closed { background: var(--mhr-surface-alt) !important; opacity: 0.85; } .mhr-candidate-card__link { color: inherit; text-decoration: none; display: flex; } .mhr-converted-banner { position: absolute; top: 20px; right: -40px; transform: rotate(37deg); background-color: var(--mhr-accent); color: var(--mhr-on-primary); padding: 5px 60px; font-size: var(--mhr-font-xs); font-weight: 700; z-index: 2; clip-path: polygon(29% 0, 80% 0, 91% 96%, 0 150%); text-align: center; } html[data-theme="dark"] .mhr-converted-banner { background-color: var(--mhr-accent-hover); } .mhr-empty-state__image { width: 150px; height: 150px; display: block; margin: 0 auto; } /* ============================================================================ Recruitment — Open Recruitments (public job listing) page /recruitment/open-recruitments hardcodes red/orange (#e54f38) + white bg. These overrides keep the marketing layout but route every color through the design tokens so dark mode works. ============================================================================ */ body:has(.oh-job__page-container) { background: var(--mhr-bg); color: var(--mhr-text); } .oh-job__page-container { max-width: 1100px; padding: 0 var(--mhr-space-4); } .oh-onboarding-card__title, .oh-onboarding-card__title--h1 { color: var(--mhr-text) !important; } .oh-onboarding__content { color: var(--mhr-text-muted) !important; } .oh-jobs__container--list { padding-top: var(--mhr-space-5) !important; gap: var(--mhr-space-4) !important; } /* Each open recruitment card */ .oh-joblist_card { background: var(--mhr-surface) !important; border: 1px solid var(--mhr-border) !important; border-radius: var(--mhr-radius-lg) !important; padding: var(--mhr-space-4) !important; box-shadow: var(--mhr-shadow-xs); transition: border-color var(--mhr-transition), box-shadow var(--mhr-transition), transform var(--mhr-transition); } .oh-joblist_card:hover { border-color: var(--mhr-border-strong) !important; box-shadow: var(--mhr-shadow-md); } .oh-recruitment-company { background: var(--mhr-surface-alt); border: 1px solid var(--mhr-border); box-shadow: none !important; border-radius: var(--mhr-radius-md); } .oh-recuritment_company-name { color: var(--mhr-text) !important; } .oh-job_post--posteddate { color: var(--mhr-text-muted) !important; } .oh-job__post { color: var(--mhr-text) !important; } .oh-recuritment_application, .oh-recuritment_application-count { color: var(--mhr-text-muted) !important; } .oh-recuritment_application-count { color: var(--mhr-text) !important; font-weight: 600; } .oh-recuritment__progress-bar { background-color: var(--mhr-surface-alt) !important; border: 1px solid var(--mhr-border); height: 6px; } .oh-progress-bar__state { background-color: var(--mhr-primary) !important; height: 100% !important; transition: width var(--mhr-transition); } /* "Apply Now" tag inside card header */ .oh-joblist__header .oh-recuritment_tag { background: var(--mhr-accent-soft) !important; } .oh-joblist__header .oh-recuritment_tag a, .oh-joblist__header .oh-recuritment_tag a:hover { color: var(--mhr-accent-hover) !important; text-decoration: none; } html[data-theme="dark"] .oh-joblist__header .oh-recuritment_tag a, html[data-theme="dark"] .oh-joblist__header .oh-recuritment_tag a:hover { color: var(--mhr-accent) !important; } /* Inline job-position pills inside card body */ .oh-joblist_card .oh-recuritment_tag { background: var(--mhr-primary-soft) !important; color: var(--mhr-primary) !important; margin-right: var(--mhr-space-2); margin-bottom: var(--mhr-space-2); } html[data-theme="dark"] .oh-joblist_card .oh-recuritment_tag { color: var(--mhr-primary) !important; } /* Apply / Details button */ .oh-apply_btn, .oh-btn.oh-apply_btn { background: var(--mhr-primary) !important; color: var(--mhr-on-primary) !important; border: 1px solid var(--mhr-primary) !important; border-radius: var(--mhr-radius-md); padding: 8px 18px; font-weight: 500; transition: background-color var(--mhr-transition), border-color var(--mhr-transition); } .oh-apply_btn:hover, .oh-apply_btn:focus, .oh-apply_btn:active, .oh-btn.oh-apply_btn:hover { background: var(--mhr-primary-hover) !important; border-color: var(--mhr-primary-hover) !important; color: var(--mhr-on-primary) !important; outline: none; text-decoration: none; } .oh-apply_btn:focus-visible { box-shadow: var(--mhr-shadow-focus); } /* "Back" arrow icon at top of open-recruitments page */ .oh-job__page-container ~ * a ion-icon, .oh-onboarding ion-icon { color: var(--mhr-text-muted); } /* Helpers used by the open-recruitments template */ .mhr-back-link { font-size: 1.5rem; cursor: pointer; color: var(--mhr-text-muted); display: inline-flex; align-items: center; } .mhr-back-link a { color: inherit; display: inline-flex; padding: 6px 8px; border-radius: var(--mhr-radius-sm); transition: background-color var(--mhr-transition), color var(--mhr-transition); } .mhr-back-link a:hover { background: var(--mhr-surface-alt); color: var(--mhr-primary); } .mhr-recruitment-meta { color: var(--mhr-text-muted); font-size: var(--mhr-font-sm); line-height: 1.5; } .mhr-job-detail-scroll { height: 100vh; overflow: auto; } /* Job-detail side panel (modal) */ .oh-job-selected_detail { background: var(--mhr-surface) !important; border-left: 1px solid var(--mhr-border); box-shadow: var(--mhr-shadow-lg); } .oh-job__post_description, .oh-job__description-list .oh-job__description-list_item { color: var(--mhr-text) !important; } .oh-job__description-list .oh-job__description-list_item::before { background-color: var(--mhr-primary) !important; } /* ============================================================================ Dashboard tile scrollability Fixes "Attendance To Validate", "Offline Employees", "Not Out Yet" tiles so users can scroll through long lists instead of seeing only first rows. ============================================================================ */ #attendanceValidateCardBody, #notInYetIdCardBody, #notoutYetIdCardBody, #OTApproveBody, #onBreakEmployeesCard { overflow-y: auto !important; overflow-x: auto; } /* Inner sticky-table wrappers inside dashboard tile bodies should not constrain height — let the parent body handle scrolling. */ #attendanceValidateCardBody > .oh-sticky-table, #notInYetIdCardBody > .oh-sticky-table, #notoutYetIdCardBody > .oh-sticky-table { height: auto !important; max-height: none !important; border: none !important; } /* Generic helper any dashboard tile body can opt into. */ .mhr-tile-scroll { overflow-y: auto !important; max-height: 400px; } /* ============================================================================ Bootstrap utility overrides for dark-mode safety ============================================================================ */ .bg-light { background-color: var(--mhr-surface-alt) !important; color: var(--mhr-text) !important; } .bg-dark { background-color: var(--mhr-text) !important; color: var(--mhr-surface) !important; } .text-dark { color: var(--mhr-text) !important; } .text-light { color: var(--mhr-text-muted) !important; } .text-white { color: var(--mhr-surface) !important; } .text-black { color: var(--mhr-text) !important; } /* ============================================================================ FAQ tag chips — legibility on user-defined tag colors ============================================================================ */ .oh-faq__tag { color: #fff !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); border: 1px solid rgba(0, 0, 0, 0.08); font-weight: 600; padding: 4px 10px; border-radius: 999px; font-size: 0.75rem; letter-spacing: 0.01em; } html[data-theme="dark"] .oh-faq__tag { border-color: rgba(255, 255, 255, 0.12); } /* ============================================================================ Pipeline list view — dark-mode polish ============================================================================ */ .oh-tabs__movable { background: var(--mhr-surface); border: 1px solid var(--mhr-border); border-radius: var(--mhr-radius-lg); margin-bottom: var(--mhr-space-4); overflow: hidden; } .pipeline-header { background: var(--mhr-surface-alt) !important; color: var(--mhr-text); padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid var(--mhr-border); } .pipeline-header .oh-tabs__movable-title, .pipeline-header input.oh-tabs__movable-title { color: var(--mhr-text) !important; background: transparent !important; } .oh-tabs__movable-body { background: var(--mhr-surface); padding: 8px 0; } /* Stage count badge — replace harsh pink with brand primary */ .oh-badge.oh-badge--secondary, .oh-tabs__input-badge-container .oh-badge { background: var(--mhr-primary) !important; color: var(--mhr-on-primary) !important; border: none !important; } /* Sticky table — fix the white "Stage Bulk Update" column in dark mode */ .oh-sticky-table, .oh-sticky-table__table { background: var(--mhr-surface); color: var(--mhr-text); } .oh-sticky-table__thead, .oh-sticky-table__thead .oh-sticky-table__tr, .oh-sticky-table__thead .oh-sticky-table__th, .oh-sticky-table__thead .oh-table-config__th { background: var(--mhr-surface-alt) !important; color: var(--mhr-text) !important; border-color: var(--mhr-border) !important; } .oh-sticky-table__tbody .oh-sticky-table__tr { background: var(--mhr-surface); border-bottom: 1px solid var(--mhr-border); } .oh-sticky-table__tbody .oh-sticky-table__tr:hover { background: var(--mhr-surface-alt); } .oh-sticky-table__sd, .oh-sticky-table__td, .oh-table-config__td { background: inherit !important; color: var(--mhr-text); border-color: var(--mhr-border); } .oh-sticky-table .oh-select, .oh-sticky-table select.oh-select { background: var(--mhr-surface) !important; color: var(--mhr-text) !important; border: 1px solid var(--mhr-border) !important; } /* Pagination input — was white, now token-aware */ .oh-pagination, .oh-pagination__nav { color: var(--mhr-text); } .oh-pagination__page, .oh-pagination__label { color: var(--mhr-text-muted); } .oh-pagination__input { background: var(--mhr-surface) !important; color: var(--mhr-text) !important; border: 1px solid var(--mhr-border) !important; } .oh-pagination__link { color: var(--mhr-primary); } /* Recruitment nav toolbar — search, view toggle, filter chip */ .oh-search, .oh-search input, .oh-input--search, input.oh-input--search, .oh-input.oh-input--small { background: var(--mhr-surface) !important; color: var(--mhr-text) !important; border: 1px solid var(--mhr-border) !important; } .oh-search input::placeholder, .oh-input--search::placeholder, .oh-input.oh-input--small::placeholder { color: var(--mhr-text-subtle) !important; } .oh-view-toggle, .oh-tabs__view-toggle { background: var(--mhr-surface); border: 1px solid var(--mhr-border); border-radius: var(--mhr-radius-md); } .oh-view-toggle .active, .oh-tabs__view-toggle .active, .oh-view-toggle__option--active { background: var(--mhr-primary) !important; color: var(--mhr-on-primary) !important; } /* Active filter chips — softer than the harsh red */ .oh-active-filter, .oh-filter-chip, .filter-tag { background: var(--mhr-primary-soft) !important; color: var(--mhr-primary) !important; border: 1px solid var(--mhr-border) !important; border-radius: var(--mhr-radius-full); padding: 4px 12px; font-size: 0.85rem; display: inline-flex; align-items: center; gap: 6px; } /* ============================================================================ Dashboard chart canvas — kill stark-white empty state in dark mode ============================================================================ */ .oh-card-dashboard__body canvas, .dashboardChart canvas { background: transparent !important; max-width: 100%; height: auto; } html[data-theme="dark"] .oh-card-dashboard__body canvas, html[data-theme="dark"] .dashboardChart canvas { background: transparent !important; filter: brightness(0.95); } /* ============================================================================ Reduced motion ============================================================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }