/** * App theme palettes — override :root tokens per theme. * Set on from Administration → Theme settings. */ /* ── Teal (HealthKits default) ───────────────────────────────────────── */ html[data-hkits-theme="teal"], html:not([data-hkits-theme]) { --hkits-accent-rgb: 13, 148, 136; --hkits-accent: #0D9488; --hkits-accent-hover: #0F766E; --hkits-accent-light: #14B8A6; --hkits-primary: #0D9488; --hkits-primary-dark: #0F766E; --hkits-primary-soft: rgba(13, 148, 136, 0.15); --hkits-primary-focus: rgba(13, 148, 136, 0.32); --hkits-sidebar-border: rgba(13, 148, 136, 0.22); --hkits-sidebar-shadow: 4px 0 20px rgba(13, 148, 136, 0.12), 2px 0 8px rgba(13, 148, 136, 0.08); --hkits-sidebar-item-bg: #CCFBF1; --hkits-sidebar-item-hover: #99F6E4; --hkits-sidebar-item-text: #115E59; --hkits-sidebar-submenu-bg: #E6FFFA; --hkits-sidebar-item-border: rgba(13, 148, 136, 0.28); --hkits-pale-blue: #CCFBF1; --hkits-pale-blue-mid: #99F6E4; --hkits-pale-blue-light: #E6FFFA; --hkits-pale-blue-soft: #F0FDFA; --hkits-topnav-bg: #ffffff; --hkits-page-bar-bg: linear-gradient(90deg, #F0FDFA 0%, #ffffff 100%); --hkits-btn-primary-bg: #0D9488; --hkits-btn-primary-border: #0F766E; --hkits-panel-primary: #0D9488; } /* ── KitSofts blue ───────────────────────────────────────────────────── */ html[data-hkits-theme="kitsofts-blue"] { --hkits-accent-rgb: 21, 101, 192; --hkits-accent: #1565c0; --hkits-accent-hover: #0d47a1; --hkits-accent-light: #42a5f5; --hkits-primary: #1565c0; --hkits-primary-dark: #0d47a1; --hkits-primary-soft: rgba(21, 101, 192, 0.14); --hkits-primary-focus: rgba(21, 101, 192, 0.32); --hkits-sidebar-border: rgba(21, 101, 192, 0.22); --hkits-sidebar-shadow: 4px 0 20px rgba(21, 101, 192, 0.12), 2px 0 8px rgba(21, 101, 192, 0.08); --hkits-sidebar-item-bg: #e3f2fd; --hkits-sidebar-item-hover: #bbdefb; --hkits-sidebar-item-text: #0d47a1; --hkits-sidebar-submenu-bg: #f5f9ff; --hkits-sidebar-item-border: rgba(21, 101, 192, 0.28); --hkits-pale-blue: #e3f2fd; --hkits-pale-blue-mid: #bbdefb; --hkits-pale-blue-light: #e8f4fd; --hkits-pale-blue-soft: #f5f9ff; --hkits-topnav-bg: #ffffff; --hkits-page-bar-bg: linear-gradient(90deg, #e3f2fd 0%, #ffffff 100%); --hkits-btn-primary-bg: #1565c0; --hkits-btn-primary-border: #0d47a1; --hkits-panel-primary: #1565c0; } /* ── Light Blue (eMedical) ───────────────────────────────────────────── */ html[data-hkits-theme="emedical"] { --hkits-accent-rgb: 51, 122, 183; --hkits-accent: #337ab7; --hkits-accent-hover: #286090; --hkits-accent-light: #5bc0de; --hkits-primary: #337ab7; --hkits-primary-dark: #286090; --hkits-primary-soft: rgba(51, 122, 183, 0.14); --hkits-primary-focus: rgba(51, 122, 183, 0.32); --hkits-sidebar-border: rgba(51, 122, 183, 0.2); --hkits-sidebar-shadow: 4px 0 16px rgba(40, 96, 144, 0.1); --hkits-sidebar-item-bg: #eef3f8; --hkits-sidebar-item-hover: #dce8f3; --hkits-sidebar-item-text: #2c5282; --hkits-sidebar-submenu-bg: #f4f7fa; --hkits-sidebar-item-border: rgba(51, 122, 183, 0.22); --hkits-pale-blue: #eef3f8; --hkits-pale-blue-mid: #dce8f3; --hkits-pale-blue-light: #f4f7fa; --hkits-pale-blue-soft: #f8fafc; --hkits-topnav-bg: #f5f5f5; --hkits-page-bar-bg: linear-gradient(90deg, #eef3f8 0%, #f5f5f5 100%); --hkits-btn-primary-bg: #337ab7; --hkits-btn-primary-border: #286090; --hkits-panel-primary: #337ab7; } /* ── Blue Green (healthcare legacy) — navy + growing green ─────────────── */ html[data-hkits-theme="healthcare"] { --hkits-accent-rgb: 21, 72, 144; --hkits-accent: #154890; --hkits-accent-hover: #0f3a6e; --hkits-accent-light: #B9DCFF; --hkits-primary: #154890; --hkits-primary-dark: #0f3a6e; --hkits-primary-soft: rgba(21, 72, 144, 0.14); --hkits-primary-focus: rgba(21, 72, 144, 0.32); --hkits-accent-green: #22c55e; --hkits-accent-green-hover: #16a34a; --hkits-accent-green-light: #4ade80; --hkits-sidebar-bg: #deedf3; --hkits-sidebar-border: rgba(34, 197, 94, 0.35); --hkits-sidebar-shadow: 4px 0 18px rgba(22, 163, 74, 0.16); --hkits-sidebar-item-bg: #deedf3; --hkits-sidebar-item-hover: #bbf7d0; --hkits-sidebar-item-text: #0f3a6e; --hkits-sidebar-submenu-bg: #eef7fa; --hkits-sidebar-item-border: rgba(34, 197, 94, 0.45); --hkits-pale-blue: #CEE8EA; --hkits-pale-blue-mid: #B9DCFF; --hkits-pale-blue-light: #deedf3; --hkits-pale-blue-soft: #eef7fa; --hkits-topnav-bg: #154890; --hkits-page-bar-bg: linear-gradient(90deg, #154890 0%, #16a34a 55%, #22c55e 100%); --hkits-btn-primary-bg: #16a34a; --hkits-btn-primary-border: #15803d; --hkits-panel-primary: #154890; --hkits-link: #0f3a6e; --hkits-link-hover: #16a34a; } html[data-hkits-theme="healthcare"] .hkits-topnav.navbar-default { border-bottom-color: #22c55e; } html[data-hkits-theme="healthcare"] .hkits-topnav .navbar-brand, html[data-hkits-theme="healthcare"] .hkits-topnav .hkits-facility-brand, html[data-hkits-theme="healthcare"] .hkits-topnav .notify, html[data-hkits-theme="healthcare"] .hkits-topnav .user-greeting-text, html[data-hkits-theme="healthcare"] .hkits-topnav .dropdown-toggle { color: #fff !important; } html[data-hkits-theme="healthcare"] .hkits-topnav .icon-bar { background-color: #fff; } html[data-hkits-theme="healthcare"] .hkits-menu-head.active { border-left-color: #4ade80; background: #16a34a !important; border-color: #15803d !important; } html[data-hkits-theme="healthcare"] .hkits-menu-head:not(.active) { border-left-color: #22c55e; } html[data-hkits-theme="healthcare"] .hkits-menu-head:not(.active):hover { background: #c8f5d8 !important; color: #15803d !important; } html[data-hkits-theme="healthcare"] .hkits-submenu { border-left-color: #22c55e; } html[data-hkits-theme="healthcare"] .hkits-submenu a.active { color: #15803d; font-weight: 700; background: #dcfce7 !important; } html[data-hkits-theme="healthcare"] .hkits-submenu li a:hover { color: #16a34a !important; background: #dcfce7 !important; } /* ── Dark Purple (Keche ERP — variables only) ──────────────────────────── */ html[data-hkits-theme="keche"] { --hkits-accent-rgb: 67, 97, 238; --hkits-accent: #4361ee; --hkits-accent-hover: #3a56d4; --hkits-accent-light: #4895ef; --hkits-accent-secondary: #7209b7; --hkits-primary: #4361ee; --hkits-primary-dark: #3a56d4; --hkits-primary-soft: rgba(67, 97, 238, 0.12); --hkits-primary-focus: rgba(67, 97, 238, 0.28); --hkits-bg: #f8fafc; --hkits-surface: #ffffff; --hkits-text: #1e293b; --hkits-text-muted: #64748b; --hkits-border: rgba(0, 0, 0, 0.1); --hkits-border-light: rgba(0, 0, 0, 0.05); --hkits-sidebar-bg: #ffffff; --hkits-sidebar-border: rgba(0, 0, 0, 0.08); --hkits-sidebar-shadow: 4px 0 24px rgba(0, 0, 0, 0.06); --hkits-sidebar-item-bg: #f8fafc; --hkits-sidebar-item-hover: rgba(67, 97, 238, 0.08); --hkits-sidebar-item-text: #64748b; --hkits-sidebar-submenu-bg: #ffffff; --hkits-sidebar-item-border: rgba(67, 97, 238, 0.12); --hkits-pale-blue: #eef0fe; --hkits-pale-blue-mid: #dde3ff; --hkits-pale-blue-light: #f4f6ff; --hkits-pale-blue-soft: #f8fafc; --hkits-topnav-bg: #ffffff; --hkits-topnav-text: #1e293b; --hkits-page-bar-bg: linear-gradient(90deg, #eef0fe 0%, #f8fafc 100%); --hkits-btn-primary-bg: #4361ee; --hkits-btn-primary-border: #3a56d4; --hkits-panel-primary: #4361ee; --hkits-link: #4361ee; --hkits-link-hover: #7209b7; --hkits-keche-gradient: linear-gradient(135deg, #4361ee 0%, #7209b7 100%); } /* ── White theme — pale blue workspace, grey/white typography ──────────── */ html[data-hkits-theme="white"] { --hkits-accent-rgb: 14, 165, 233; --hkits-accent: #0ea5e9; --hkits-accent-hover: #0284c7; --hkits-accent-light: #7dd3fc; --hkits-accent-secondary: #38bdf8; --hkits-primary: #0ea5e9; --hkits-primary-dark: #374151; --hkits-primary-soft: rgba(14, 165, 233, 0.12); --hkits-primary-focus: rgba(14, 165, 233, 0.28); --hkits-bg: #f8fcff; --hkits-surface: #ffffff; --hkits-text: #4b5563; --hkits-text-muted: #6b7280; --hkits-border: #bae6fd; --hkits-border-light: #e0f2fe; --hkits-sidebar-bg: #f0f9ff; --hkits-sidebar-border: rgba(14, 165, 233, 0.18); --hkits-sidebar-shadow: 4px 0 18px rgba(14, 165, 233, 0.08); --hkits-sidebar-item-bg: #e0f2fe; --hkits-sidebar-item-hover: #bae6fd; --hkits-sidebar-item-text: #4b5563; --hkits-sidebar-submenu-bg: #f0f9ff; --hkits-sidebar-item-border: rgba(14, 165, 233, 0.22); --hkits-pale-blue: #e0f2fe; --hkits-pale-blue-mid: #bae6fd; --hkits-pale-blue-light: #f0f9ff; --hkits-pale-blue-soft: #f8fcff; --hkits-pale-cream: #f0f9ff; --hkits-pale-cream-dark: #e0f2fe; --hkits-pale-cream-border: #bae6fd; --hkits-topnav-bg: #f0f9ff; --hkits-topnav-text: #4b5563; --hkits-page-bar-bg: linear-gradient(90deg, #e0f2fe 0%, #f8fcff 100%); --hkits-btn-primary-bg: #0ea5e9; --hkits-btn-primary-border: #0284c7; --hkits-panel-primary: #38bdf8; --hkits-link: #4b5563; --hkits-link-hover: #374151; } html[data-hkits-theme="white"] body.hkits-app { background: #f8fcff; color: #4b5563; } html[data-hkits-theme="white"] .hkits-topnav.navbar-default { background: #f0f9ff !important; border-bottom-color: #bae6fd !important; box-shadow: 0 1px 4px rgba(14, 165, 233, 0.08); } html[data-hkits-theme="white"] .hkits-topnav .navbar-brand, html[data-hkits-theme="white"] .hkits-topnav .hkits-facility-brand, html[data-hkits-theme="white"] .hkits-topnav .notify, html[data-hkits-theme="white"] .hkits-topnav .user-greeting-text, html[data-hkits-theme="white"] .hkits-topnav .dropdown-toggle { color: #4b5563 !important; } html[data-hkits-theme="white"] .hkits-topnav .icon-bar { background-color: #4b5563; } html[data-hkits-theme="white"] .hkits-sidebar { background: #f0f9ff !important; border-right-color: #bae6fd !important; } html[data-hkits-theme="white"] .hkits-menu-head:not(.active) { border-left-color: #7dd3fc; background: #e0f2fe; color: #4b5563; } html[data-hkits-theme="white"] .hkits-menu-head.active { border-left-color: #38bdf8; color: #ffffff !important; } html[data-hkits-theme="white"] .hkits-menu-head.active .fa-fw, html[data-hkits-theme="white"] .hkits-menu-head.active:hover, html[data-hkits-theme="white"] .hkits-menu-head.active:focus { color: #ffffff !important; } html[data-hkits-theme="white"] .hkits-submenu { border-left-color: #7dd3fc; background: #f0f9ff !important; } html[data-hkits-theme="white"] .hkits-submenu li a { color: #4b5563; } html[data-hkits-theme="white"] .hkits-submenu li a:hover, html[data-hkits-theme="white"] .hkits-submenu li a:hover .hkits-submenu-icon { color: #374151; } html[data-hkits-theme="white"] .hkits-submenu li a.active, html[data-hkits-theme="white"] .hkits-submenu li a.active .hkits-submenu-icon { color: #4b5563; } html[data-hkits-theme="white"] a { color: #4b5563; } html[data-hkits-theme="white"] a:hover { color: #374151; } html[data-hkits-theme="white"] .hkits-page-bar { background: var(--hkits-page-bar-bg) !important; color: #4b5563; border-bottom-color: #bae6fd; } html[data-hkits-theme="white"] .nav-tabs > li.active > a, html[data-hkits-theme="white"] .nav-tabs > li.active > a:hover, html[data-hkits-theme="white"] .hkits-file-tabs > li.active > a, html[data-hkits-theme="white"] .hkits-file-tabs > li.active > a:hover { border-top-color: #38bdf8; color: #4b5563; } html[data-hkits-theme="white"] .hkits-submenu li a .hkits-submenu-icon, html[data-hkits-theme="white"] .hkits-menu-head:not(.active) .fa-fw { color: #4b5563; } html[data-hkits-theme="white"] .panel-default, html[data-hkits-theme="white"] .hkits-dash-v2 .panel-body, html[data-hkits-theme="white"] body.hkits-app .hkits-main-inner, html[data-hkits-theme="white"] body.hkits-app .panel-body { background: #ffffff !important; color: #4b5563; } html[data-hkits-theme="white"] .panel-default > .panel-heading, html[data-hkits-theme="white"] .hkits-dash-v2 .panel-default > .panel-heading, html[data-hkits-theme="white"] .hkits-dash-card-head { background: #dbeafe !important; border-color: #bae6fd !important; color: #4b5563 !important; } html[data-hkits-theme="white"] .panel-default > .panel-heading .fa, html[data-hkits-theme="white"] .hkits-dash-v2 .panel-default > .panel-heading .fa { color: #4b5563 !important; } /* White theme — light blue table headers, grey text */ html[data-hkits-theme="white"] body.hkits-app .table:not(.hkits-dash-table) > thead > tr > th, html[data-hkits-theme="white"] body.hkits-app .hkits-items-table thead th, html[data-hkits-theme="white"] body.hkits-app .hkits-dash-v2 .hkits-dash-table > thead > tr:not(:first-child) > th, html[data-hkits-theme="white"] body.hkits-app .hkits-cw-records-table thead th, html[data-hkits-theme="white"] body.hkits-app .hkits-pharmacy-workspace .hkits-ph-ws-table th { background: #bae6fd !important; color: #4b5563 !important; border-color: #7dd3fc !important; } html[data-hkits-theme="white"] body.hkits-app .hkits-dash-v2 .hkits-dash-table > thead > tr:first-child > th, html[data-hkits-theme="white"] body.hkits-app .hkits-pharm-form .hkits-pharm-items-table thead th { background: #7dd3fc !important; color: #4b5563 !important; border-color: #38bdf8 !important; } html[data-hkits-theme="white"] body.hkits-app .table > tbody > tr > td, html[data-hkits-theme="white"] body.hkits-app .hkits-dash-v2 .hkits-dash-table tbody td { background: #f8fcff !important; color: #4b5563 !important; border-color: #dbeafe !important; } html[data-hkits-theme="white"] body.hkits-app .table-striped > tbody > tr:nth-of-type(odd) > td, html[data-hkits-theme="white"] body.hkits-app .hkits-dash-v2 .hkits-dash-table tbody tr:nth-of-type(odd) > td { background: #f0f9ff !important; } html[data-hkits-theme="white"] body.hkits-app .table-hover > tbody > tr:hover > td, html[data-hkits-theme="white"] body.hkits-app .hkits-dash-v2 .hkits-dash-table tbody tr:hover > td { background: #e0f2fe !important; } html[data-hkits-theme="white"] body.hkits-app .hkits-filter-panel .hkits-filter-body { background: #f0f9ff !important; color: #4b5563; } html[data-hkits-theme="white"] body.hkits-app input.form-control, html[data-hkits-theme="white"] body.hkits-app textarea.form-control, html[data-hkits-theme="white"] body.hkits-app select.form-control, html[data-hkits-theme="white"] body.hkits-app select:not(.btn):not([multiple]) { background-color: #ffffff !important; border-color: #bae6fd !important; color: #4b5563 !important; } html[data-hkits-theme="white"] body.hkits-app label, html[data-hkits-theme="white"] body.hkits-app .control-label, html[data-hkits-theme="white"] body.hkits-app .help-block { color: #4b5563; } html[data-hkits-theme="white"] body.hkits-app .hkits-stat-value, html[data-hkits-theme="white"] body.hkits-app .hkits-stat-change, html[data-hkits-theme="white"] body.hkits-app .hkits-top-rev-name, html[data-hkits-theme="white"] body.hkits-app .hkits-income-dept-name, html[data-hkits-theme="white"] body.hkits-app .hkits-income-dept-amt, html[data-hkits-theme="white"] body.hkits-app .hkits-pcard-name, html[data-hkits-theme="white"] body.hkits-app .hkits-pcard-meta .pull-right, html[data-hkits-theme="white"] body.hkits-app .hkits-dash-table .list-name, html[data-hkits-theme="white"] body.hkits-app .hkits-dash-col-toggle, html[data-hkits-theme="white"] body.hkits-app .hkits-dash-collapse-child td, html[data-hkits-theme="white"] body.hkits-app .hkits-empty-state, html[data-hkits-theme="white"] body.hkits-app .text-primary { color: #4b5563 !important; } html[data-hkits-theme="white"] body.hkits-app .hkits-stat-label, html[data-hkits-theme="white"] body.hkits-app .hkits-top-rev-head, html[data-hkits-theme="white"] body.hkits-app .hkits-top-rev-rank, html[data-hkits-theme="white"] body.hkits-app .hkits-top-rev-amt { color: #6b7280 !important; } html[data-hkits-theme="white"] body.hkits-app .btn-primary, html[data-hkits-theme="white"] body.hkits-app .btn-primary:hover, html[data-hkits-theme="white"] body.hkits-app .btn-primary:focus { color: #ffffff !important; } /* ── Dark theme (variables — full overrides in hkits-theme-dark.css) ─── */ html[data-hkits-theme="dark"] { --hkits-accent-rgb: 56, 189, 248; --hkits-accent: #38bdf8; --hkits-accent-hover: #0ea5e9; --hkits-accent-light: #7dd3fc; --hkits-accent-secondary: #818cf8; --hkits-primary: #38bdf8; --hkits-primary-dark: #0284c7; --hkits-primary-soft: rgba(56, 189, 248, 0.18); --hkits-primary-focus: rgba(56, 189, 248, 0.35); --hkits-bg: #0b1220; --hkits-surface: #1e293b; --hkits-text: #ffffff; --hkits-text-muted: #cbd5e1; --hkits-border: #334155; --hkits-border-light: #475569; --hkits-sidebar-bg: #0b1220; --hkits-sidebar-border: rgba(56, 189, 248, 0.2); --hkits-sidebar-shadow: 4px 0 24px rgba(0, 0, 0, 0.35); --hkits-sidebar-item-bg: #1e293b; --hkits-sidebar-item-hover: #334155; --hkits-sidebar-item-text: #f1f5f9; --hkits-sidebar-submenu-bg: #172033; --hkits-sidebar-item-border: rgba(71, 85, 105, 0.6); --hkits-pale-blue: #1e293b; --hkits-pale-blue-mid: #334155; --hkits-pale-blue-light: #172033; --hkits-pale-blue-soft: #0b1220; --hkits-pale-cream: #1e293b; --hkits-pale-cream-dark: #334155; --hkits-pale-cream-border: #475569; --hkits-topnav-bg: #0b1220; --hkits-topnav-text: #ffffff; --hkits-page-bar-bg: linear-gradient(90deg, #1e293b 0%, #0b1220 100%); --hkits-btn-primary-bg: #0284c7; --hkits-btn-primary-border: #0369a1; --hkits-panel-primary: #0284c7; --hkits-link: #bae6fd; --hkits-link-hover: #ffffff; } /* ── Orange theme ────────────────────────────────────────────────────── */ html[data-hkits-theme="orange"] { --hkits-accent-rgb: 234, 88, 12; --hkits-accent: #ea580c; --hkits-accent-hover: #c2410c; --hkits-accent-light: #fb923c; --hkits-accent-secondary: #f97316; --hkits-primary: #ea580c; --hkits-primary-dark: #c2410c; --hkits-primary-soft: rgba(234, 88, 12, 0.15); --hkits-primary-focus: rgba(234, 88, 12, 0.32); --hkits-sidebar-bg: #fff7ed; --hkits-sidebar-border: rgba(234, 88, 12, 0.22); --hkits-sidebar-shadow: 4px 0 20px rgba(234, 88, 12, 0.1); --hkits-sidebar-item-bg: #ffedd5; --hkits-sidebar-item-hover: #fed7aa; --hkits-sidebar-item-text: #9a3412; --hkits-sidebar-submenu-bg: #fff7ed; --hkits-sidebar-item-border: rgba(234, 88, 12, 0.28); --hkits-pale-blue: #ffedd5; --hkits-pale-blue-mid: #fed7aa; --hkits-pale-blue-light: #fff7ed; --hkits-pale-blue-soft: #fffbf5; --hkits-topnav-bg: #ea580c; --hkits-topnav-text: #ffffff; --hkits-page-bar-bg: linear-gradient(90deg, #ffedd5 0%, #fffbf5 100%); --hkits-btn-primary-bg: #ea580c; --hkits-btn-primary-border: #c2410c; --hkits-panel-primary: #ea580c; --hkits-link: #c2410c; --hkits-link-hover: #ea580c; } /* ── Purple theme ────────────────────────────────────────────────────── */ html[data-hkits-theme="purple"] { --hkits-accent-rgb: 124, 58, 237; --hkits-accent: #7c3aed; --hkits-accent-hover: #6d28d9; --hkits-accent-light: #a78bfa; --hkits-accent-secondary: #a855f7; --hkits-primary: #7c3aed; --hkits-primary-dark: #6d28d9; --hkits-primary-soft: rgba(124, 58, 237, 0.15); --hkits-primary-focus: rgba(124, 58, 237, 0.32); --hkits-sidebar-bg: #faf5ff; --hkits-sidebar-border: rgba(124, 58, 237, 0.22); --hkits-sidebar-shadow: 4px 0 20px rgba(124, 58, 237, 0.1); --hkits-sidebar-item-bg: #ede9fe; --hkits-sidebar-item-hover: #ddd6fe; --hkits-sidebar-item-text: #5b21b6; --hkits-sidebar-submenu-bg: #f5f3ff; --hkits-sidebar-item-border: rgba(124, 58, 237, 0.28); --hkits-pale-blue: #ede9fe; --hkits-pale-blue-mid: #ddd6fe; --hkits-pale-blue-light: #f5f3ff; --hkits-pale-blue-soft: #faf5ff; --hkits-topnav-bg: #7c3aed; --hkits-topnav-text: #ffffff; --hkits-page-bar-bg: linear-gradient(90deg, #ede9fe 0%, #faf5ff 100%); --hkits-btn-primary-bg: #7c3aed; --hkits-btn-primary-border: #6d28d9; --hkits-panel-primary: #7c3aed; --hkits-link: #6d28d9; --hkits-link-hover: #7c3aed; } /* ── Pink theme ──────────────────────────────────────────────────────── */ html[data-hkits-theme="pink"] { --hkits-accent-rgb: 219, 39, 119; --hkits-accent: #db2777; --hkits-accent-hover: #be185d; --hkits-accent-light: #f472b6; --hkits-accent-secondary: #ec4899; --hkits-primary: #db2777; --hkits-primary-dark: #be185d; --hkits-primary-soft: rgba(219, 39, 119, 0.15); --hkits-primary-focus: rgba(219, 39, 119, 0.32); --hkits-sidebar-bg: #fdf2f8; --hkits-sidebar-border: rgba(219, 39, 119, 0.22); --hkits-sidebar-shadow: 4px 0 20px rgba(219, 39, 119, 0.1); --hkits-sidebar-item-bg: #fce7f3; --hkits-sidebar-item-hover: #fbcfe8; --hkits-sidebar-item-text: #9d174d; --hkits-sidebar-submenu-bg: #fdf2f8; --hkits-sidebar-item-border: rgba(219, 39, 119, 0.28); --hkits-pale-blue: #fce7f3; --hkits-pale-blue-mid: #fbcfe8; --hkits-pale-blue-light: #fdf2f8; --hkits-pale-blue-soft: #fff5fa; --hkits-topnav-bg: #db2777; --hkits-topnav-text: #ffffff; --hkits-page-bar-bg: linear-gradient(90deg, #fce7f3 0%, #fff5fa 100%); --hkits-btn-primary-bg: #db2777; --hkits-btn-primary-border: #be185d; --hkits-panel-primary: #db2777; --hkits-link: #be185d; --hkits-link-hover: #db2777; } /* ── Red theme ───────────────────────────────────────────────────────── */ html[data-hkits-theme="red"] { --hkits-accent-rgb: 220, 38, 38; --hkits-accent: #dc2626; --hkits-accent-hover: #b91c1c; --hkits-accent-light: #f87171; --hkits-accent-secondary: #ef4444; --hkits-primary: #dc2626; --hkits-primary-dark: #b91c1c; --hkits-primary-soft: rgba(220, 38, 38, 0.15); --hkits-primary-focus: rgba(220, 38, 38, 0.32); --hkits-sidebar-bg: #fef2f2; --hkits-sidebar-border: rgba(220, 38, 38, 0.22); --hkits-sidebar-shadow: 4px 0 20px rgba(220, 38, 38, 0.1); --hkits-sidebar-item-bg: #fee2e2; --hkits-sidebar-item-hover: #fecaca; --hkits-sidebar-item-text: #991b1b; --hkits-sidebar-submenu-bg: #fef2f2; --hkits-sidebar-item-border: rgba(220, 38, 38, 0.28); --hkits-pale-blue: #fee2e2; --hkits-pale-blue-mid: #fecaca; --hkits-pale-blue-light: #fef2f2; --hkits-pale-blue-soft: #fff5f5; --hkits-topnav-bg: #dc2626; --hkits-topnav-text: #ffffff; --hkits-page-bar-bg: linear-gradient(90deg, #fee2e2 0%, #fff5f5 100%); --hkits-btn-primary-bg: #dc2626; --hkits-btn-primary-border: #b91c1c; --hkits-panel-primary: #dc2626; --hkits-link: #b91c1c; --hkits-link-hover: #dc2626; } /* Accent topnav themes — orange, purple, pink, red */ html[data-hkits-theme="orange"] .hkits-topnav.navbar-default, html[data-hkits-theme="purple"] .hkits-topnav.navbar-default, html[data-hkits-theme="pink"] .hkits-topnav.navbar-default, html[data-hkits-theme="red"] .hkits-topnav.navbar-default { background: var(--hkits-topnav-bg); border-bottom-color: var(--hkits-primary-dark); } html[data-hkits-theme="orange"] .hkits-topnav .navbar-brand, html[data-hkits-theme="orange"] .hkits-topnav .hkits-facility-brand, html[data-hkits-theme="orange"] .hkits-topnav .notify, html[data-hkits-theme="orange"] .hkits-topnav .user-greeting-text, html[data-hkits-theme="orange"] .hkits-topnav .dropdown-toggle, html[data-hkits-theme="purple"] .hkits-topnav .navbar-brand, html[data-hkits-theme="purple"] .hkits-topnav .hkits-facility-brand, html[data-hkits-theme="purple"] .hkits-topnav .notify, html[data-hkits-theme="purple"] .hkits-topnav .user-greeting-text, html[data-hkits-theme="purple"] .hkits-topnav .dropdown-toggle, html[data-hkits-theme="pink"] .hkits-topnav .navbar-brand, html[data-hkits-theme="pink"] .hkits-topnav .hkits-facility-brand, html[data-hkits-theme="pink"] .hkits-topnav .notify, html[data-hkits-theme="pink"] .hkits-topnav .user-greeting-text, html[data-hkits-theme="pink"] .hkits-topnav .dropdown-toggle, html[data-hkits-theme="red"] .hkits-topnav .navbar-brand, html[data-hkits-theme="red"] .hkits-topnav .hkits-facility-brand, html[data-hkits-theme="red"] .hkits-topnav .notify, html[data-hkits-theme="red"] .hkits-topnav .user-greeting-text, html[data-hkits-theme="red"] .hkits-topnav .dropdown-toggle { color: #fff !important; } html[data-hkits-theme="orange"] .hkits-topnav .icon-bar, html[data-hkits-theme="purple"] .hkits-topnav .icon-bar, html[data-hkits-theme="pink"] .hkits-topnav .icon-bar, html[data-hkits-theme="red"] .hkits-topnav .icon-bar { background-color: #fff; } html[data-hkits-theme="orange"] .hkits-sidebar, html[data-hkits-theme="purple"] .hkits-sidebar, html[data-hkits-theme="pink"] .hkits-sidebar, html[data-hkits-theme="red"] .hkits-sidebar { background: var(--hkits-sidebar-bg); } html[data-hkits-theme="orange"] .hkits-menu-head:not(.active), html[data-hkits-theme="orange"] .hkits-menu-head.active, html[data-hkits-theme="purple"] .hkits-menu-head:not(.active), html[data-hkits-theme="purple"] .hkits-menu-head.active, html[data-hkits-theme="pink"] .hkits-menu-head:not(.active), html[data-hkits-theme="pink"] .hkits-menu-head.active, html[data-hkits-theme="red"] .hkits-menu-head:not(.active), html[data-hkits-theme="red"] .hkits-menu-head.active { border-left-color: var(--hkits-accent-secondary); } html[data-hkits-theme="orange"] .hkits-submenu, html[data-hkits-theme="purple"] .hkits-submenu, html[data-hkits-theme="pink"] .hkits-submenu, html[data-hkits-theme="red"] .hkits-submenu { border-left-color: var(--hkits-accent); } html[data-hkits-theme="orange"] a, html[data-hkits-theme="purple"] a, html[data-hkits-theme="pink"] a, html[data-hkits-theme="red"] a { color: var(--hkits-link); } html[data-hkits-theme="orange"] a:hover, html[data-hkits-theme="purple"] a:hover, html[data-hkits-theme="pink"] a:hover, html[data-hkits-theme="red"] a:hover { color: var(--hkits-link-hover); } html[data-hkits-theme="orange"] .nav-tabs > li.active > a, html[data-hkits-theme="orange"] .nav-tabs > li.active > a:hover, html[data-hkits-theme="orange"] .hkits-file-tabs > li.active > a, html[data-hkits-theme="orange"] .hkits-file-tabs > li.active > a:hover, html[data-hkits-theme="purple"] .nav-tabs > li.active > a, html[data-hkits-theme="purple"] .nav-tabs > li.active > a:hover, html[data-hkits-theme="purple"] .hkits-file-tabs > li.active > a, html[data-hkits-theme="purple"] .hkits-file-tabs > li.active > a:hover, html[data-hkits-theme="pink"] .nav-tabs > li.active > a, html[data-hkits-theme="pink"] .nav-tabs > li.active > a:hover, html[data-hkits-theme="pink"] .hkits-file-tabs > li.active > a, html[data-hkits-theme="pink"] .hkits-file-tabs > li.active > a:hover, html[data-hkits-theme="red"] .nav-tabs > li.active > a, html[data-hkits-theme="red"] .nav-tabs > li.active > a:hover, html[data-hkits-theme="red"] .hkits-file-tabs > li.active > a, html[data-hkits-theme="red"] .hkits-file-tabs > li.active > a:hover { border-top-color: var(--hkits-accent); } html[data-hkits-theme="orange"] .hkits-submenu li a .hkits-submenu-icon, html[data-hkits-theme="purple"] .hkits-submenu li a .hkits-submenu-icon, html[data-hkits-theme="pink"] .hkits-submenu li a .hkits-submenu-icon, html[data-hkits-theme="red"] .hkits-submenu li a .hkits-submenu-icon, html[data-hkits-theme="orange"] .hkits-menu-head:not(.active) .fa-fw, html[data-hkits-theme="purple"] .hkits-menu-head:not(.active) .fa-fw, html[data-hkits-theme="pink"] .hkits-menu-head:not(.active) .fa-fw, html[data-hkits-theme="red"] .hkits-menu-head:not(.active) .fa-fw { color: var(--hkits-accent); } /* Bootstrap + shared components follow active theme */ html[data-hkits-theme] .btn-primary, html[data-hkits-theme] .hkits-btn-primary { background-color: var(--hkits-btn-primary-bg); border-color: var(--hkits-btn-primary-border); } html[data-hkits-theme] .btn-primary:hover, html[data-hkits-theme] .btn-primary:focus, html[data-hkits-theme] .hkits-btn-primary:hover { background-color: var(--hkits-accent-hover); border-color: var(--hkits-accent-hover); } html[data-hkits-theme] .panel-primary > .panel-heading { background-color: var(--hkits-panel-primary); border-color: var(--hkits-accent-hover); color: #fff; } html[data-hkits-theme] .panel-primary { border-color: var(--hkits-accent-hover); } html[data-hkits-theme] .hkits-topnav.navbar-default { background: var(--hkits-topnav-bg, var(--hkits-surface)); } html[data-hkits-theme] .hkits-page-bar { background: var(--hkits-page-bar-bg, var(--hkits-pale-blue-soft)); } html[data-hkits-theme="healthcare"] .hkits-page-bar { background: linear-gradient(90deg, #154890 0%, #15803d 100%) !important; color: #fff; border-bottom-color: #22c55e; } html[data-hkits-theme="healthcare"] .hkits-dash-stat-card .hkits-stat-icon { background: linear-gradient(135deg, #154890 0%, #22c55e 100%) !important; } html[data-hkits-theme] .hkits-ipd-sidebar-nav li.active, html[data-hkits-theme] .hkits-dash-stat-card .hkits-stat-icon { background: var(--hkits-accent) !important; } html[data-hkits-theme] .hkits-file-tabs > li.active > a, html[data-hkits-theme] .hkits-file-tabs > li.active > a:hover { border-top-color: var(--hkits-accent); color: var(--hkits-accent-hover); } html[data-hkits-theme] .nav-tabs > li.active > a, html[data-hkits-theme] .nav-tabs > li.active > a:hover { border-top: 3px solid var(--hkits-accent); } html[data-hkits-theme] a { color: var(--hkits-accent); } html[data-hkits-theme] a:hover { color: var(--hkits-accent-hover); } /* White theme — grey typography (override shared accent link/tab rules above) */ html[data-hkits-theme="white"] a { color: #4b5563; } html[data-hkits-theme="white"] a:hover { color: #374151; } html[data-hkits-theme="white"] .nav-tabs > li.active > a, html[data-hkits-theme="white"] .nav-tabs > li.active > a:hover, html[data-hkits-theme="white"] .hkits-file-tabs > li.active > a, html[data-hkits-theme="white"] .hkits-file-tabs > li.active > a:hover { color: #4b5563 !important; } html[data-hkits-theme="white"] .hkits-submenu li a:hover, html[data-hkits-theme="white"] .hkits-submenu li a:hover .hkits-submenu-icon, html[data-hkits-theme="white"] .hkits-submenu li a.active .hkits-submenu-icon { color: #374151; } /* Blue Green — link/tab colors (override shared accent rules above) */ html[data-hkits-theme="healthcare"] a { color: var(--hkits-link, #0f3a6e); } html[data-hkits-theme="healthcare"] a:hover { color: var(--hkits-link-hover, #16a34a); } html[data-hkits-theme="healthcare"] .hkits-sidebar { background: var(--hkits-sidebar-bg); } html[data-hkits-theme="healthcare"] .nav-tabs > li.active > a, html[data-hkits-theme="healthcare"] .nav-tabs > li.active > a:hover, html[data-hkits-theme="healthcare"] .hkits-file-tabs > li.active > a, html[data-hkits-theme="healthcare"] .hkits-file-tabs > li.active > a:hover { border-top-color: #22c55e; color: #15803d !important; } html[data-hkits-theme="healthcare"] .hkits-submenu li a .hkits-submenu-icon { color: #22c55e; } html[data-hkits-theme="healthcare"] .hkits-menu-head:not(.active) .fa-fw { color: #16a34a; } html[data-hkits-theme="healthcare"] .btn-primary, html[data-hkits-theme="healthcare"] .hkits-btn-primary { background-color: #16a34a !important; border-color: #15803d !important; } html[data-hkits-theme="healthcare"] .btn-primary:hover, html[data-hkits-theme="healthcare"] .btn-primary:focus, html[data-hkits-theme="healthcare"] .hkits-btn-primary:hover { background-color: #15803d !important; border-color: #166534 !important; } /* Dark Purple — link/tab colors (override shared accent rules above) */ html[data-hkits-theme="keche"] a { color: #4361ee; } html[data-hkits-theme="keche"] a:hover { color: #7209b7; } html[data-hkits-theme="keche"] .nav-tabs > li.active > a, html[data-hkits-theme="keche"] .nav-tabs > li.active > a:hover, html[data-hkits-theme="keche"] .hkits-file-tabs > li.active > a, html[data-hkits-theme="keche"] .hkits-file-tabs > li.active > a:hover { color: #4361ee !important; border-top-color: #7209b7 !important; } /* Theme settings preview cards */ .hkits-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 10px; } .hkits-theme-card { border: 2px solid var(--hkits-border); border-radius: 8px; overflow: hidden; cursor: pointer; transition: box-shadow 0.2s, border-color 0.2s; background: #fff; } .hkits-theme-card:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); } .hkits-theme-card.is-active { border-color: var(--hkits-accent); box-shadow: 0 0 0 3px var(--hkits-primary-soft); } .hkits-theme-card-preview { height: 72px; display: flex; } .hkits-theme-card-preview .bar { width: 28%; min-width: 48px; } .hkits-theme-card-preview .main { flex: 1; padding: 8px; } .hkits-theme-card-preview .chip { display: inline-block; height: 10px; width: 48px; border-radius: 4px; margin-bottom: 6px; margin-right: 4px; } .hkits-theme-card-preview .chip-secondary { width: 28px; } /* Custom theme editor */ .hkits-theme-custom-panel { display: none; margin-top: 24px; padding: 20px; border: 1px solid var(--hkits-border); border-radius: 10px; background: var(--hkits-pale-blue-soft, #f8fafc); } .hkits-theme-custom-panel.is-visible { display: block; } .hkits-theme-custom-title { margin: 0 0 8px; font-size: 16px; font-weight: 600; } .hkits-theme-custom-grid { margin-top: 12px; } .hkits-theme-color-field { margin-bottom: 16px; } .hkits-theme-color-field label { display: block; font-weight: 600; margin-bottom: 6px; } .hkits-theme-color-input-wrap { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .hkits-theme-color-picker { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--hkits-border); border-radius: 6px; cursor: pointer; background: #fff; } .hkits-theme-color-hex { flex: 1; font-family: monospace; text-transform: uppercase; } .hkits-theme-custom-preview-ui { margin-top: 10px; border: 1px solid var(--hkits-border); border-radius: 8px; overflow: hidden; background: #fff; } .hkits-theme-custom-preview-ui .preview-topnav { padding: 10px 14px; font-weight: 600; font-size: 13px; } .hkits-theme-custom-preview-ui .preview-body { display: flex; min-height: 100px; } .hkits-theme-custom-preview-ui .preview-sidebar { width: 38%; padding: 10px; } .hkits-theme-custom-preview-ui .preview-menu { padding: 8px 10px; margin-bottom: 6px; border-radius: 6px; font-size: 12px; border-left: 3px solid transparent; } .hkits-theme-custom-preview-ui .preview-menu.is-active { color: #fff; } .hkits-theme-custom-preview-ui .preview-content { flex: 1; padding: 14px; display: flex; align-items: center; gap: 12px; } .hkits-theme-custom-preview-ui .preview-btn { display: inline-block; padding: 6px 14px; border-radius: 4px; color: #fff; font-size: 12px; font-weight: 600; } .hkits-theme-custom-preview-ui .preview-link { font-size: 13px; font-weight: 600; text-decoration: underline; } /* Custom theme — variables injected inline; structural rules */ html[data-hkits-theme="custom"] .hkits-menu-head:not(.active) .fa-fw { color: var(--hkits-accent); } .hkits-theme-card-preview .line { height: 6px; background: rgba(0, 0, 0, 0.08); border-radius: 3px; margin-bottom: 4px; } .hkits-theme-card-body { padding: 10px 12px; border-top: 1px solid var(--hkits-border-light); } .hkits-theme-card-body strong { display: block; margin-bottom: 2px; } .hkits-theme-card-body small { color: var(--hkits-text-muted); }