/** * ASMS theme layer — same idea as Topgrade New School. * Tokens are injected on by theme-loader + theme-manager. * This file maps Bootstrap / ASMS chrome to those tokens so inner pages follow. */ html.dark { color-scheme: dark; } html:not(.dark) { color-scheme: light; } html { --bs-primary: var(--color-primary, #0066cc); --bs-primary-rgb: var(--color-primary-rgb, 0, 102, 204); --bs-link-color: var(--color-primary, #0066cc); --bs-link-hover-color: var(--color-primary-dark, #0a3d91); --bs-focus-ring-color: color-mix(in srgb, var(--color-primary, #0066cc) 25%, transparent); --primary-color: var(--color-primary, #0066cc); --primary-blue: var(--color-primary, #0066cc); } :focus-visible { outline-color: color-mix(in srgb, var(--color-primary, #2563eb) 55%, transparent); } .sidebar, .sidebar-container { background: linear-gradient(to bottom, var(--color-primary, #0066cc), var(--color-primary-dark, #0a3d91)) !important; border-right: 0 !important; color: #fff; } .sidebar a, .sidebar-span { color: rgba(255, 255, 255, 0.88); } .sidebar .text-muted, .sidebar-container .text-muted, .sidebar-container h6 { color: rgba(255, 255, 255, 0.55) !important; } .sidebar-brand-title, .sidebar-container h1 { color: #fff !important; } .sidebar a.active, .sidebar a:hover, .active-menu { background: rgba(255, 255, 255, 0.22) !important; color: #fff !important; } .navbar-custom { background: var(--color-surface, #fff) !important; border-bottom-color: var(--color-border, #dee2e6) !important; } .profile-nav-link { color: var(--color-primary-dark, #1F4F81) !important; } .page-header { color: var(--color-primary, #3366CC) !important; } .page-sub-header { color: var(--color-primary-dark, #1F4F81) !important; } .page-add-btn { background-color: var(--color-primary, #3366CC) !important; border-color: var(--color-primary, #3366CC) !important; color: #fff !important; } .content { background: var(--color-bg, #f5f7fa) !important; color: var(--color-text-primary, #1e293b); } .btn-primary { background-color: var(--color-primary, #1F4F81) !important; border-color: var(--color-primary, #1F4F81) !important; color: #fff !important; } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-primary-dark, #0A3D91) !important; border-color: var(--color-primary-dark, #0A3D91) !important; color: #fff !important; } .btn-outline-primary { color: var(--color-primary, #1F4F81) !important; border-color: var(--color-primary, #1F4F81) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--color-primary, #1F4F81) !important; border-color: var(--color-primary, #1F4F81) !important; color: #fff !important; } .bg-primary { background-color: var(--color-primary, #0066cc) !important; } .border-primary { border-color: var(--color-primary, #0066cc) !important; } .text-primary { color: var(--color-primary, #1F4F81) !important; } .form-control:focus, .form-select:focus { border-color: var(--color-primary, #0d6efd) !important; box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--color-primary, #0d6efd) 25%, transparent) !important; } .form-check-input:checked { background-color: var(--color-primary, #0066cc) !important; border-color: var(--color-primary, #0066cc) !important; } .nav-pills .nav-link.active, .nav-tabs .nav-link.active { background-color: var(--color-primary, #0066cc) !important; border-color: var(--color-primary, #0066cc) !important; color: #fff !important; } .page-item.active .page-link { background-color: var(--color-primary, #0d6efd) !important; border-color: var(--color-primary, #0d6efd) !important; } .page-link { color: var(--color-primary, #0d6efd); } .page-link:hover { color: var(--color-primary-dark, #0a58ca); } .card { background-color: var(--color-surface, #ffffff); color: var(--color-text-primary, #212529); } .sidebar-brand-title, .sidebar-container h1 { color: #fff !important; } html.dark .content, [data-bs-theme="dark"] .content { background: var(--color-bg, #121720) !important; color: var(--color-text-primary, #e2e8f0); } html.dark .navbar-custom, [data-bs-theme="dark"] .navbar-custom, html.dark .card, [data-bs-theme="dark"] .card { background-color: var(--color-surface, #1e1e1e) !important; color: var(--color-text-primary, #e2e8f0); } html.dark .profile-nav-link, [data-bs-theme="dark"] .profile-nav-link, html.dark .navbar-custom a, [data-bs-theme="dark"] .navbar-custom a { color: var(--color-text-primary, #e2e8f0) !important; } html.dark .text-primary, [data-bs-theme="dark"] .text-primary { color: var(--color-primary, #4dabf7) !important; } html.dark .page-header, [data-bs-theme="dark"] .page-header { color: var(--color-primary, #4dabf7) !important; } html.dark .page-sub-header, [data-bs-theme="dark"] .page-sub-header { color: var(--color-text-secondary, #a0aec0) !important; }