/* ============================================================= Qrecruit Design System — CSS Variables & Base Styles Single Source of Truth — v1.0.0 Auto-applied via qrecruit-theme.css ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ---------------------------------------------------------------- CSS Custom Properties — Light (default) & Dark themes Switched via data-theme="dark" on ---------------------------------------------------------------- */ :root, [data-theme="light"] { /* Backgrounds — clean blue-tinted whites */ --bg-primary: #f0f7ff; --bg-secondary: #ffffff; --bg-tertiary: #e8f2ff; --bg-card: rgba(255, 255, 255, 0.96); --bg-card-hover: rgba(240, 247, 255, 1); --bg-input: rgba(232, 242, 255, 0.70); --bg-glass: rgba(37, 99, 235, 0.02); /* Borders */ --border-primary: rgba(37, 99, 235, 0.10); --border-secondary: rgba(37, 99, 235, 0.16); --border-active: rgba(37, 99, 235, 0.50); /* Text */ --text-primary: #0f172a; --text-secondary: #374151; --text-muted: #94a3b8; --text-inverse: #ffffff; /* Brand / Accent — lighter, cleaner sky-blue palette */ --accent-primary: #2563eb; --accent-primary-hover: #3b82f6; --accent-primary-glow: rgba(37, 99, 235, 0.14); --accent-secondary: #0ea5e9; --accent-gradient: linear-gradient(135deg, #2563eb, #3b82f6, #0ea5e9); --accent-gradient-subtle: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(14, 165, 233, 0.06)); /* Semantic States */ --success: #059669; --success-bg: rgba(5, 150, 105, 0.08); --warning: #d97706; --warning-bg: rgba(217, 119, 6, 0.08); --danger: #dc2626; --danger-bg: rgba(220, 38, 38, 0.08); --info: #0ea5e9; --info-bg: rgba(14, 165, 233, 0.08); /* Layout */ --sidebar-width: 260px; --header-height: 64px; --sidebar-bg: #ffffff; --header-bg: rgba(255, 255, 255, 0.90); --modal-overlay-bg: rgba(15, 23, 42, 0.30); --modal-shadow: 0 24px 48px rgba(37, 99, 235, 0.10), 0 0 0 1px rgba(37, 99, 235, 0.06); /* Shadows — softer, blue-tinted */ --shadow-sm: 0 1px 3px rgba(37, 99, 235, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 16px rgba(37, 99, 235, 0.10); --shadow-lg: 0 8px 32px rgba(37, 99, 235, 0.12); --shadow-glow: 0 0 24px rgba(37, 99, 235, 0.16); /* Border Radius */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } [data-theme="dark"] { /* Backgrounds — deep navy-blue, not pure black */ --bg-primary: #080f1e; --bg-secondary: #0d1629; --bg-tertiary: #131f38; --bg-card: rgba(13, 22, 41, 0.85); --bg-card-hover: rgba(19, 31, 56, 0.92); --bg-input: rgba(10, 18, 35, 0.70); --bg-glass: rgba(96, 165, 250, 0.04); /* Borders */ --border-primary: rgba(96, 165, 250, 0.10); --border-secondary: rgba(96, 165, 250, 0.18); --border-active: rgba(96, 165, 250, 0.55); /* Text */ --text-primary: #e2ecff; --text-secondary: #94afd4; --text-muted: #4a6080; --text-inverse: #080f1e; /* Brand / Accent — lighter blues for dark bg */ --accent-primary: #60a5fa; --accent-primary-hover: #93c5fd; --accent-primary-glow: rgba(96, 165, 250, 0.22); --accent-secondary: #38bdf8; --accent-gradient: linear-gradient(135deg, #3b82f6, #60a5fa, #38bdf8); --accent-gradient-subtle: linear-gradient(135deg, rgba(59, 130, 246, 0.12), rgba(56, 189, 248, 0.08)); /* Semantic States */ --success: #34d399; --success-bg: rgba(52, 211, 153, 0.12); --warning: #fbbf24; --warning-bg: rgba(251, 191, 36, 0.12); --danger: #f87171; --danger-bg: rgba(248, 113, 113, 0.12); --info: #38bdf8; --info-bg: rgba(56, 189, 248, 0.12); /* Layout */ --sidebar-bg: #0d1629; --header-bg: rgba(8, 15, 30, 0.90); --modal-overlay-bg: rgba(0, 0, 0, 0.70); --modal-shadow: 0 24px 48px rgba(0, 0, 0, 0.50), 0 0 0 1px rgba(96, 165, 250, 0.10); /* Shadows */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.40); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.50); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.60); --shadow-glow: 0 0 32px rgba(96, 165, 250, 0.20); --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; } /* ---------------------------------------------------------------- Base / Reset ---------------------------------------------------------------- */ html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color var(--transition-base), color var(--transition-base); } /* ---------------------------------------------------------------- Keyframe Animations ---------------------------------------------------------------- */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes modalSlideIn { from { opacity: 0; transform: scale(0.96) translateY(12px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 20px var(--accent-primary-glow); } 50% { box-shadow: 0 0 40px var(--accent-primary-glow); } } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.5); } } /* ---------------------------------------------------------------- Typography ---------------------------------------------------------------- */ h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); } h2 { font-size: 1.75rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); } h3 { font-size: 1.375rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); } h4 { font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--text-primary); } .page-title { font-size: 1.75rem; font-weight: 800; color: var(--text-primary); margin-bottom: 4px; } .page-subtitle { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 32px; } .gradient-text { background: var(--accent-gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ---------------------------------------------------------------- Theme Toggle — Navbar inline (next to notification bell) ---------------------------------------------------------------- */ .oh-navbar__theme-toggle { display: flex; align-items: center; gap: 2px; background: var(--bg-tertiary); border: 1px solid var(--border-primary); border-radius: var(--radius-full); padding: 3px; } .oh-navbar__theme-btn { width: 30px; height: 30px; border-radius: var(--radius-full); border: none; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--text-muted); transition: all var(--transition-fast); } .oh-navbar__theme-btn ion-icon { font-size: 1rem; pointer-events: none; } .oh-navbar__theme-btn.active { background: var(--accent-gradient); color: #fff; box-shadow: 0 0 10px var(--accent-primary-glow); } .oh-navbar__theme-btn:hover:not(.active) { background: var(--bg-card-hover); color: var(--text-primary); } /* ---------------------------------------------------------------- Dark mode overrides for existing Django HRMS classes Maps existing oh-* component classes to design system tokens ---------------------------------------------------------------- */ /* Body / Page background */ [data-theme="dark"] body, [data-theme="dark"] #main { background-color: var(--bg-primary); color: var(--text-primary); } /* Sidebar */ [data-theme="dark"] .oh-main-sidebar, [data-theme="dark"] #mainNav, [data-theme="dark"] .sidebar { background-color: var(--sidebar-bg) !important; border-right-color: var(--border-primary) !important; } /* Navbar / Header */ [data-theme="dark"] .oh-navbar, [data-theme="dark"] .navbar, [data-theme="dark"] header { background-color: var(--header-bg) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-primary) !important; } /* Cards */ [data-theme="dark"] .oh-card, [data-theme="dark"] .card, [data-theme="dark"] .oh-kanban__card { background: var(--bg-card) !important; border-color: var(--border-primary) !important; backdrop-filter: blur(16px); } /* Inputs */ [data-theme="dark"] .oh-input, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="password"], [data-theme="dark"] input[type="number"], [data-theme="dark"] input[type="search"], [data-theme="dark"] textarea, [data-theme="dark"] select { background: var(--bg-input) !important; color: var(--text-primary) !important; border-color: var(--border-primary) !important; } [data-theme="dark"] .oh-input:focus, [data-theme="dark"] input:focus, [data-theme="dark"] textarea:focus, [data-theme="dark"] select:focus { border-color: var(--border-active) !important; outline: none; box-shadow: 0 0 0 3px var(--accent-primary-glow) !important; } /* Labels */ [data-theme="dark"] .oh-label, [data-theme="dark"] label { color: var(--text-secondary) !important; } /* Buttons — primary */ [data-theme="dark"] .oh-btn--secondary, [data-theme="dark"] .oh-btn--primary { background: var(--accent-gradient) !important; color: #fff !important; border: none !important; box-shadow: var(--shadow-sm), 0 0 20px var(--accent-primary-glow); transition: all var(--transition-fast); } [data-theme="dark"] .oh-btn--secondary:hover, [data-theme="dark"] .oh-btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-md), 0 0 30px var(--accent-primary-glow); } /* Tables */ [data-theme="dark"] table thead, [data-theme="dark"] .oh-table thead, [data-theme="dark"] thead { background: var(--bg-tertiary) !important; } [data-theme="dark"] table th, [data-theme="dark"] .oh-table th, [data-theme="dark"] th { color: var(--text-muted) !important; border-bottom-color: var(--border-primary) !important; } [data-theme="dark"] table td, [data-theme="dark"] .oh-table td, [data-theme="dark"] td { color: var(--text-secondary) !important; border-bottom-color: var(--border-primary) !important; } [data-theme="dark"] tr:hover td { background: var(--bg-glass) !important; } /* Modals */ [data-theme="dark"] .oh-modal__dialog, [data-theme="dark"] .modal-content, [data-theme="dark"] .oh-modal .oh-modal__dialog { background: var(--bg-secondary) !important; border-color: var(--border-secondary) !important; box-shadow: var(--modal-shadow) !important; } [data-theme="dark"] .oh-modal__header, [data-theme="dark"] .modal-header { border-bottom-color: var(--border-primary) !important; } [data-theme="dark"] .oh-modal__footer, [data-theme="dark"] .modal-footer { border-top-color: var(--border-primary) !important; } /* Dropdowns */ [data-theme="dark"] .oh-dropdown__menu, [data-theme="dark"] .dropdown-menu { background: var(--bg-secondary) !important; border-color: var(--border-primary) !important; box-shadow: var(--shadow-lg) !important; } [data-theme="dark"] .oh-dropdown__item, [data-theme="dark"] .dropdown-item { color: var(--text-secondary) !important; } [data-theme="dark"] .oh-dropdown__item:hover, [data-theme="dark"] .dropdown-item:hover { background: var(--bg-glass) !important; color: var(--text-primary) !important; } /* Badges / Status pills */ [data-theme="dark"] .oh-badge--success, [data-theme="dark"] .badge-success { background: var(--success-bg) !important; color: var(--success) !important; } [data-theme="dark"] .oh-badge--warning, [data-theme="dark"] .badge-warning { background: var(--warning-bg) !important; color: var(--warning) !important; } [data-theme="dark"] .oh-badge--danger, [data-theme="dark"] .badge-danger { background: var(--danger-bg) !important; color: var(--danger) !important; } [data-theme="dark"] .oh-badge--info, [data-theme="dark"] .badge-info { background: var(--info-bg) !important; color: var(--info) !important; } /* Auth / Login card */ [data-theme="dark"] .oh-auth { background-color: var(--bg-primary) !important; } [data-theme="dark"] .oh-auth-card, [data-theme="dark"] .oh-onboarding-card { background: var(--bg-card) !important; border: 1px solid var(--border-primary) !important; backdrop-filter: blur(16px); border-radius: var(--radius-xl) !important; } /* Scrollbars (dark) */ [data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: var(--bg-secondary); } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-secondary); border-radius: var(--radius-full); } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* Text colour helpers */ [data-theme="dark"] .text-muted, [data-theme="dark"] .oh-text--muted { color: var(--text-muted) !important; } [data-theme="dark"] p, [data-theme="dark"] span:not([class*="badge"]):not([class*="status"]) { color: inherit; } /* Dividers / HR */ [data-theme="dark"] hr, [data-theme="dark"] .oh-divider { border-color: var(--border-primary) !important; } /* ================================================================ COLORFUL SIDEBAR ICONS Each module gets a unique colored bubble behind its icon. ================================================================ */ .oh-sidebar__icon-wrap { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: transform 150ms ease, box-shadow 150ms ease; } /* Invert icon image to white so gradient bg shows through */ .oh-sidebar__icon-wrap img, .oh-sidebar__icon-wrap svg { filter: brightness(0) invert(1); width: 18px; height: 18px; } .oh-sidebar__menu-link:hover .oh-sidebar__icon-wrap, .oh-sidebar__menu-link--active .oh-sidebar__icon-wrap { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.25); } /* Module colour map — blue-first, softer palette */ .oh-sidebar__icon-wrap--dashboard { background: linear-gradient(135deg, #2563eb, #0ea5e9); } .oh-sidebar__icon-wrap--employee { background: linear-gradient(135deg, #0ea5e9, #06b6d4); } .oh-sidebar__icon-wrap--recruitment { background: linear-gradient(135deg, #f59e0b, #f97316); } .oh-sidebar__icon-wrap--onboarding { background: linear-gradient(135deg, #10b981, #059669); } .oh-sidebar__icon-wrap--offboarding { background: linear-gradient(135deg, #f43f5e, #e11d48); } .oh-sidebar__icon-wrap--attendance { background: linear-gradient(135deg, #3b82f6, #2563eb); } .oh-sidebar__icon-wrap--leave { background: linear-gradient(135deg, #8b5cf6, #7c3aed); } .oh-sidebar__icon-wrap--payroll { background: linear-gradient(135deg, #22c55e, #16a34a); } .oh-sidebar__icon-wrap--asset { background: linear-gradient(135deg, #fb923c, #f97316); } .oh-sidebar__icon-wrap--helpdesk { background: linear-gradient(135deg, #ec4899, #db2777); } .oh-sidebar__icon-wrap--pms { background: linear-gradient(135deg, #f59e0b, #d97706); } .oh-sidebar__icon-wrap--project { background: linear-gradient(135deg, #14b8a6, #0f766e); } .oh-sidebar__icon-wrap--report { background: linear-gradient(135deg, #64748b, #475569); } .oh-sidebar__icon-wrap--configuration { background: linear-gradient(135deg, #6b7280, #4b5563); } /* ================================================================ COLORFUL DASHBOARD & GLOBAL CARDS ================================================================ */ /* ── Stat tiles on the dashboard ── */ .oh-card-dashboard { border-radius: 16px !important; border: 1px solid var(--border-primary) !important; backdrop-filter: blur(16px); transition: transform 200ms ease, box-shadow 200ms ease !important; overflow: hidden; position: relative; } .oh-card-dashboard::before { content: ''; position: absolute; inset: 0; opacity: 0.06; pointer-events: none; border-radius: inherit; } .oh-card-dashboard.tile:hover { transform: translateY(-3px) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.18) !important; } /* Success — teal/green */ .oh-card-dashboard--success { background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(5,150,105,0.10)) !important; border-color: rgba(16,185,129,0.30) !important; box-shadow: 0 4px 20px rgba(16,185,129,0.12) !important; } .oh-card-dashboard--success::before { background: linear-gradient(135deg, #10b981, #059669); } .oh-card-dashboard--success .oh-card-dashboard__title { color: #10b981 !important; } .oh-card-dashboard--success .oh-card-dashboard__count { color: #34d399 !important; } /* Warning — amber/orange */ .oh-card-dashboard--warning { background: linear-gradient(135deg, rgba(245,158,11,0.18), rgba(217,119,6,0.10)) !important; border-color: rgba(245,158,11,0.30) !important; box-shadow: 0 4px 20px rgba(245,158,11,0.12) !important; } .oh-card-dashboard--warning::before { background: linear-gradient(135deg, #f59e0b, #d97706); } .oh-card-dashboard--warning .oh-card-dashboard__title { color: #f59e0b !important; } .oh-card-dashboard--warning .oh-card-dashboard__count { color: #fbbf24 !important; } /* Danger / Error */ .oh-card-dashboard--danger { background: linear-gradient(135deg, rgba(239,68,68,0.18), rgba(220,38,38,0.10)) !important; border-color: rgba(239,68,68,0.30) !important; box-shadow: 0 4px 20px rgba(239,68,68,0.12) !important; } .oh-card-dashboard--danger .oh-card-dashboard__title { color: #ef4444 !important; } .oh-card-dashboard--danger .oh-card-dashboard__count { color: #f87171 !important; } /* Neutral — sky blue (primary brand, replaces indigo) */ .oh-card-dashboard--neutral { background: linear-gradient(135deg, rgba(37,99,235,0.14), rgba(14,165,233,0.08)) !important; border-color: rgba(37,99,235,0.22) !important; box-shadow: 0 4px 20px rgba(37,99,235,0.10) !important; } .oh-card-dashboard--neutral::before { background: linear-gradient(135deg, #2563eb, #0ea5e9); } .oh-card-dashboard--neutral .oh-card-dashboard__title { color: #2563eb !important; } .oh-card-dashboard--neutral .oh-card-dashboard__count { color: #3b82f6 !important; } /* Info — cyan/sky */ .oh-card-dashboard--info { background: linear-gradient(135deg, rgba(14,165,233,0.14), rgba(6,182,212,0.08)) !important; border-color: rgba(14,165,233,0.22) !important; box-shadow: 0 4px 20px rgba(14,165,233,0.10) !important; } .oh-card-dashboard--info .oh-card-dashboard__title { color: #0ea5e9 !important; } .oh-card-dashboard--info .oh-card-dashboard__count { color: #38bdf8 !important; } /* Transparent sidebar cards */ .oh-card-dashboard--transparent { background: var(--bg-card) !important; border: 1px solid var(--border-primary) !important; backdrop-filter: blur(16px) !important; } /* Count number styling */ .oh-card-dashboard__count { font-size: 2.5rem !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -0.02em; } /* Card title */ .oh-card-dashboard__title { font-size: 0.8125rem !important; font-weight: 600 !important; letter-spacing: 0.02em; text-transform: uppercase; } /* ── General .oh-card used across all modules ── */ .oh-card { border-radius: 16px !important; border: 1px solid var(--border-primary) !important; background: var(--bg-card) !important; backdrop-filter: blur(16px) !important; transition: transform 200ms ease, box-shadow 200ms ease !important; } .oh-card:hover { transform: translateY(-2px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important; border-color: var(--border-active) !important; } /* ── Kanban cards ── */ .oh-kanban__card { border-radius: 12px !important; border: 1px solid var(--border-primary) !important; background: var(--bg-card) !important; backdrop-filter: blur(12px) !important; transition: transform 150ms ease, box-shadow 150ms ease !important; } .oh-kanban__card:hover { transform: translateY(-2px) !important; border-color: var(--accent-primary) !important; box-shadow: 0 6px 20px rgba(99,102,241,0.15) !important; } /* ── Status tag / badge colour pop ── */ .oh-badge, [class*="oh-badge--"] { font-weight: 600 !important; border-radius: 9999px !important; padding: 3px 10px !important; font-size: 0.7rem !important; letter-spacing: 0.04em; } /* ── Announcement card accent line ── */ .announcement_title { border-left: 3px solid var(--accent-primary) !important; padding-left: 10px !important; border-radius: 0 8px 8px 0 !important; background: var(--accent-gradient-subtle) !important; } /* ── Table header accent ── */ .oh-table thead th, table thead th { background: linear-gradient(135deg, rgba(37,99,235,0.06), rgba(14,165,233,0.04)) !important; color: var(--text-muted) !important; font-weight: 700 !important; text-transform: uppercase; font-size: 0.7rem !important; letter-spacing: 0.06em !important; border-bottom: 2px solid var(--border-primary) !important; } /* ── Colorful icon pills inside cards ── */ .oh-card-dashboard__icon-wrap { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } .oh-card-dashboard__icon-wrap--success { background: linear-gradient(135deg, rgba(16,185,129,0.20), rgba(5,150,105,0.15)); color: #10b981; } .oh-card-dashboard__icon-wrap--warning { background: linear-gradient(135deg, rgba(245,158,11,0.20), rgba(217,119,6,0.15)); color: #f59e0b; } .oh-card-dashboard__icon-wrap--info { background: linear-gradient(135deg, rgba(59,130,246,0.20), rgba(6,182,212,0.15)); color: #3b82f6; } .oh-card-dashboard__icon-wrap--purple { background: linear-gradient(135deg, rgba(37,99,235,0.18), rgba(14,165,233,0.14)); color: #2563eb; } /* ================================================================ SIDEBAR & NAVBAR OVERRIDES — LIGHT MODE ---------------------------------------------------------------- All sidebar/navbar colour overrides live here. Edit these tokens to change the main site shell appearance. KEY VARIABLES (light mode): Sidebar bg: #ffffff Sidebar border: rgba(0,0,0,0.07) Active item bg: rgba(37,99,235,0.07) Active item text: #2563eb Hover bg: rgba(0,0,0,0.04) Company area bg: rgba(37,99,235,0.03) Navbar bg: #ffffff Navbar border: rgba(0,0,0,0.08) ================================================================ */ /* ── Sidebar shell ─────────────────────────────────────────────── */ #sidebar .oh-sidebar, .oh-sidebar { background-color: #ffffff !important; color: #374151 !important; border-right: 1px solid #e5e7eb !important; box-shadow: 1px 0 4px rgba(0, 0, 0, 0.05) !important; } /* ── Company / org header at top of sidebar ─────────────────────── */ #sidebar .oh-sidebar__company, .oh-sidebar__company { background: #f8fafc !important; border-bottom: 1px solid #e5e7eb !important; padding: 16px !important; } #sidebar .oh-sidebar__company-title, .oh-sidebar__company-title { color: #111827 !important; font-weight: 600 !important; } #sidebar .oh-sidebar__company-link, .oh-sidebar__company-link { color: #6b7280 !important; } #sidebar .oh-sidebar__company-link:hover, .oh-sidebar__company-link:hover { color: #2563eb !important; } /* ── Menu links ─────────────────────────────────────────────────── */ #sidebar .oh-sidebar__menu-link, .oh-sidebar__menu-link { color: #374151 !important; opacity: 1 !important; border-radius: 8px !important; margin: 1px 8px !important; padding: 9px 12px !important; transition: background 150ms ease, color 150ms ease !important; font-size: 0.875rem !important; font-weight: 500 !important; } #sidebar .oh-sidebar__menu-link:hover, .oh-sidebar__menu-link:hover { background-color: #f3f4f6 !important; color: #111827 !important; opacity: 1 !important; text-decoration: none !important; } #sidebar .oh-sidebar__menu-link:active, #sidebar .oh-sidebar__menu-link:focus, .oh-sidebar__menu-link:active, .oh-sidebar__menu-link:focus { color: #374151 !important; text-decoration: none !important; outline: none !important; } /* Active / selected item — very subtle */ #sidebar .oh-sidebar__menu-link--active, .oh-sidebar__menu-link--active { background-color: #eff6ff !important; color: #2563eb !important; font-weight: 600 !important; } #sidebar .oh-sidebar__menu-link--active:hover, .oh-sidebar__menu-link--active:hover { background-color: #dbeafe !important; color: #1d4ed8 !important; } /* ── Submenu (sub-items) ─────────────────────────────────────────── */ #sidebar .oh-sidebar__submenu, .oh-sidebar__submenu { background-color: #f9fafb !important; border-left: 2px solid #e5e7eb !important; margin: 0 8px 4px 16px !important; border-radius: 0 0 6px 6px !important; width: auto !important; } #sidebar .oh-sidebar__submenu-link, .oh-sidebar__submenu-link { color: #6b7280 !important; font-size: 0.8125rem !important; } #sidebar .oh-sidebar__submenu-link:hover, #sidebar .oh-sidebar__submenu-link:focus, .oh-sidebar__submenu-link:hover, .oh-sidebar__submenu-link:focus { color: #2563eb !important; text-decoration: none !important; } /* ── Navbar (top bar) ───────────────────────────────────────────── */ .oh-navbar { background-color: #ffffff !important; border-bottom: 1px solid #e5e7eb !important; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important; } /* Hamburger button bars — override white inline styles in light mode */ #sidebarHamburgerBtn span { background: #374151 !important; } /* Navbar text — page title, toggle link, breadcrumbs */ .oh-navbar__page-title, .oh-navbar__toggle-link { color: #111827 !important; } /* Breadcrumbs */ .oh-navbar__breadcrumb-link { color: #6b7280 !important; font-size: 0.8125rem !important; } .oh-navbar__breadcrumb-link:hover { color: #2563eb !important; text-decoration: none !important; } .oh-navbar__breadcrumb-link.active { color: #111827 !important; font-weight: 500 !important; } /* Navbar icons */ .oh-navbar__icon, .oh-navbar__action-icons-link { color: #374151 !important; } .oh-navbar__action-icons-link:hover .oh-navbar__icon { color: #2563eb !important; } /* ── Dark mode sidebar & navbar overrides ───────────────────────── */ [data-theme="dark"] #sidebar .oh-sidebar, [data-theme="dark"] .oh-sidebar { background-color: #111827 !important; color: #d1d5db !important; border-right: 1px solid rgba(255, 255, 255, 0.06) !important; box-shadow: 1px 0 8px rgba(0, 0, 0, 0.30) !important; } [data-theme="dark"] #sidebar .oh-sidebar__company, [data-theme="dark"] .oh-sidebar__company { background: rgba(255, 255, 255, 0.03) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .oh-sidebar__company-title { color: #f9fafb !important; } [data-theme="dark"] .oh-sidebar__company-link { color: #9ca3af !important; } [data-theme="dark"] .oh-sidebar__company-link:hover { color: #60a5fa !important; } [data-theme="dark"] #sidebar .oh-sidebar__menu-link, [data-theme="dark"] .oh-sidebar__menu-link { color: #d1d5db !important; opacity: 1 !important; } [data-theme="dark"] #sidebar .oh-sidebar__menu-link:hover, [data-theme="dark"] .oh-sidebar__menu-link:hover { background-color: rgba(255, 255, 255, 0.06) !important; color: #f9fafb !important; opacity: 1 !important; } [data-theme="dark"] #sidebar .oh-sidebar__menu-link--active, [data-theme="dark"] .oh-sidebar__menu-link--active { background-color: rgba(96, 165, 250, 0.12) !important; color: #60a5fa !important; } [data-theme="dark"] .oh-sidebar__submenu { background-color: rgba(255, 255, 255, 0.02) !important; border-left-color: rgba(255, 255, 255, 0.08) !important; } [data-theme="dark"] .oh-sidebar__submenu-link { color: #9ca3af !important; } [data-theme="dark"] .oh-sidebar__submenu-link:hover { color: #60a5fa !important; } [data-theme="dark"] .oh-navbar { background-color: var(--header-bg) !important; border-bottom-color: var(--border-primary) !important; box-shadow: 0 1px 8px rgba(0, 0, 0, 0.30) !important; backdrop-filter: blur(12px) !important; } [data-theme="dark"] #sidebarHamburgerBtn span { background: rgba(255, 255, 255, 0.80) !important; } [data-theme="dark"] .oh-navbar__page-title, [data-theme="dark"] .oh-navbar__toggle-link { color: var(--text-primary) !important; } [data-theme="dark"] .oh-navbar__breadcrumb-link { color: #9ca3af !important; } [data-theme="dark"] .oh-navbar__breadcrumb-link:hover { color: #60a5fa !important; } [data-theme="dark"] .oh-navbar__breadcrumb-link.active { color: #e2ecff !important; } [data-theme="dark"] .oh-navbar__icon, [data-theme="dark"] .oh-navbar__action-icons-link { color: #d1d5db !important; }