/* HMS appearance themes — set on */
:root,
[data-theme="teal"] {
--sidebar-bg-start: #0c1222;
--sidebar-bg-end: #0f3d38;
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-text: #e2e8f0;
--sidebar-text-muted: #94a3b8;
--sidebar-hover: rgba(255, 255, 255, 0.08);
--sidebar-icon-bg: rgba(255, 255, 255, 0.1);
--sidebar-accent: #14b8a6;
--sidebar-accent-soft: rgba(20, 184, 166, 0.18);
--sidebar-active-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 55%, #2dd4bf 100%);
--sidebar-glow: rgba(20, 184, 166, 0.35);
--app-accent: #0d9488;
--gradient-primary: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #2dd4bf 100%);
}
[data-theme="blue"] {
--sidebar-bg-start: #0b1224;
--sidebar-bg-end: #1e3a8a;
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-text: #e2e8f0;
--sidebar-text-muted: #94a3b8;
--sidebar-hover: rgba(255, 255, 255, 0.08);
--sidebar-icon-bg: rgba(255, 255, 255, 0.1);
--sidebar-accent: #60a5fa;
--sidebar-accent-soft: rgba(96, 165, 250, 0.2);
--sidebar-active-gradient: linear-gradient(135deg, #2563eb 0%, #3b82f6 55%, #60a5fa 100%);
--sidebar-glow: rgba(59, 130, 246, 0.35);
--app-accent: #2563eb;
--gradient-primary: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #60a5fa 100%);
}
[data-theme="purple"] {
--sidebar-bg-start: #120a1f;
--sidebar-bg-end: #4c1d95;
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-text: #ede9fe;
--sidebar-text-muted: #c4b5fd;
--sidebar-hover: rgba(255, 255, 255, 0.08);
--sidebar-icon-bg: rgba(255, 255, 255, 0.1);
--sidebar-accent: #a78bfa;
--sidebar-accent-soft: rgba(167, 139, 250, 0.2);
--sidebar-active-gradient: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 55%, #a78bfa 100%);
--sidebar-glow: rgba(139, 92, 246, 0.35);
--app-accent: #7c3aed;
--gradient-primary: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
}
[data-theme="emerald"] {
--sidebar-bg-start: #071510;
--sidebar-bg-end: #14532d;
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-text: #ecfdf5;
--sidebar-text-muted: #86efac;
--sidebar-hover: rgba(255, 255, 255, 0.08);
--sidebar-icon-bg: rgba(255, 255, 255, 0.1);
--sidebar-accent: #34d399;
--sidebar-accent-soft: rgba(52, 211, 153, 0.2);
--sidebar-active-gradient: linear-gradient(135deg, #047857 0%, #10b981 55%, #34d399 100%);
--sidebar-glow: rgba(16, 185, 129, 0.35);
--app-accent: #059669;
--gradient-primary: linear-gradient(135deg, #047857 0%, #10b981 50%, #34d399 100%);
}
[data-theme="rose"] {
--sidebar-bg-start: #1a0a12;
--sidebar-bg-end: #9f1239;
--sidebar-border: rgba(255, 255, 255, 0.08);
--sidebar-text: #ffe4e6;
--sidebar-text-muted: #fda4af;
--sidebar-hover: rgba(255, 255, 255, 0.08);
--sidebar-icon-bg: rgba(255, 255, 255, 0.1);
--sidebar-accent: #fb7185;
--sidebar-accent-soft: rgba(251, 113, 133, 0.2);
--sidebar-active-gradient: linear-gradient(135deg, #be123c 0%, #e11d48 55%, #fb7185 100%);
--sidebar-glow: rgba(225, 29, 72, 0.35);
--app-accent: #e11d48;
--gradient-primary: linear-gradient(135deg, #be123c 0%, #e11d48 50%, #fb7185 100%);
}
[data-theme="midnight"] {
--sidebar-bg-start: #020617;
--sidebar-bg-end: #0f172a;
--sidebar-border: rgba(255, 255, 255, 0.06);
--sidebar-text: #f1f5f9;
--sidebar-text-muted: #64748b;
--sidebar-hover: rgba(255, 255, 255, 0.06);
--sidebar-icon-bg: rgba(255, 255, 255, 0.06);
--sidebar-accent: #38bdf8;
--sidebar-accent-soft: rgba(56, 189, 248, 0.15);
--sidebar-active-gradient: linear-gradient(135deg, #0369a1 0%, #0ea5e9 55%, #38bdf8 100%);
--sidebar-glow: rgba(14, 165, 233, 0.3);
--app-accent: #0284c7;
--gradient-primary: linear-gradient(135deg, #0369a1 0%, #0ea5e9 50%, #38bdf8 100%);
}
[data-theme="light"] {
--sidebar-bg-start: #ffffff;
--sidebar-bg-end: #f1f5f9;
--sidebar-border: #e2e8f0;
--sidebar-text: #0f172a;
--sidebar-text-muted: #64748b;
--sidebar-hover: rgba(15, 23, 42, 0.05);
--sidebar-icon-bg: rgba(15, 23, 42, 0.06);
--sidebar-accent: #0d9488;
--sidebar-accent-soft: rgba(13, 148, 136, 0.12);
--sidebar-active-gradient: linear-gradient(135deg, #0d9488 0%, #14b8a6 55%, #2dd4bf 100%);
--sidebar-glow: rgba(13, 148, 136, 0.25);
--app-accent: #0d9488;
--gradient-primary: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #2dd4bf 100%);
}
[data-theme="light"] .app-sidebar,
[data-theme="light"] .sidebar-toggle,
[data-theme="light"] .nav-submenu-toggle {
color: #0f172a;
}
[data-theme="light"] .sidebar-toggle {
background: rgba(15, 23, 42, 0.06);
}
[data-theme="light"] .role-panel {
background: rgba(255, 255, 255, 0.85);
border-color: #e2e8f0;
}
[data-theme="light"] .side-nav a,
[data-theme="light"] .nav-item {
color: #334155;
}
[data-theme="light"] .side-nav a:hover,
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .nav-submenu-toggle:hover {
color: #0f172a;
background: rgba(15, 23, 42, 0.05);
}
[data-theme="light"] .side-nav a.active,
[data-theme="light"] .nav-item.active {
color: #fff;
}
[data-theme="light"] .theme-swatch.is-active {
box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--app-accent);
}