/* Site-wide theme system: Bootstrap's native light/dark mode plus an accent-color layer. Toggle with data-bs-theme="light|dark" and data-theme-color="blue|green|purple" on . */ :root, [data-theme-color="blue"] { --accent-color: #2563A8; --accent-dark: #173D63; --accent-shadow: rgba(37, 99, 168, 0.28); --accent-rgb: 37, 99, 168; --sidebar-bg: #0b1630; } [data-theme-color="green"] { --accent-color: #1E8A5F; --accent-dark: #12523A; --accent-shadow: rgba(30, 138, 95, 0.28); --accent-rgb: 30, 138, 95; --sidebar-bg: #0b1f1a; } [data-theme-color="purple"] { --accent-color: #6D4AAE; --accent-dark: #3E2A66; --accent-shadow: rgba(109, 74, 174, 0.28); --accent-rgb: 109, 74, 174; --sidebar-bg: #1a1330; } [data-bs-theme="dark"] { --bs-body-bg: #12161c; --bs-body-color: #dee2e6; } /* Page backdrop behind the dashboard shell — kept separate from --bs-body-bg so cards/topbar (which use --bs-body-bg) still read as distinct surfaces against it. */ :root { --app-page-bg: #eef2f6; } [data-bs-theme="dark"] { --app-page-bg: #0b1220; } .btn-brand { background-color: var(--accent-color); border-color: var(--accent-color); color: #fff; } .btn-brand:hover, .btn-brand:focus { background-color: var(--accent-color); border-color: var(--accent-color); filter: brightness(1.08); color: #fff; } .text-brand { color: var(--accent-color) !important; } /* Theme switcher dropdown (topbar + login page) */ .theme-menu { min-width: 230px; } .theme-menu .grp-label { font-size: 11px; font-weight: 700; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .4px; margin: 4px 2px 8px; } .theme-menu .mode-seg { display: flex; gap: 6px; } .theme-menu .mode-btn { flex: 1; border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); color: var(--bs-body-color); border-radius: .5rem; padding: 8px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; } .theme-menu .mode-btn:hover { background: var(--bs-secondary-bg); } .theme-menu .mode-btn.on { border-color: var(--accent-color); background: rgba(var(--accent-rgb), .1); color: var(--accent-color); } .theme-menu .swatches { display: flex; gap: 8px; } .theme-menu .color-sw { flex: 1; border: 2px solid var(--bs-border-color); border-radius: .625rem; padding: 8px 4px; background: var(--bs-body-bg); text-align: center; } .theme-menu .color-sw:hover { border-color: var(--bs-border-color-translucent, var(--bs-border-color)); } .theme-menu .color-sw.on { border-color: var(--accent-color); } /* accent-color indicator dot on the topbar palette button */ .theme-btn { position: relative; } .theme-btn .cur-dot { position: absolute; bottom: 7px; inset-inline-end: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); border: 2px solid var(--bs-body-bg); } /* slightly more polished dropdowns app-wide (topbar menus) */ .app-topbar .dropdown-menu { border-radius: .75rem; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); border-color: var(--bs-border-color); } .theme-menu .color-sw .dot { width: 22px; height: 22px; border-radius: 50%; display: block; margin: 0 auto 6px; } .theme-menu .color-sw .dot[data-color="blue"] { background-color: #2563A8; } .theme-menu .color-sw .dot[data-color="green"] { background-color: #1E8A5F; } .theme-menu .color-sw .dot[data-color="purple"] { background-color: #6D4AAE; } .theme-menu .color-sw .nm { font-size: 11px; font-weight: 600; color: var(--bs-body-color); }