/* Appearance: light/dark mode + accent tokens (hospital UI) */ html[data-accent="default"] { --app-primary: #696cff; --app-primary-rgb: 105, 108, 255; --app-primary-hover: #5f61e6; --app-primary-active: #595cd9; --app-primary-subtle: #e7e7ff; --app-primary-border: #c3c4ff; --app-primary-contrast: #fff; } html[data-accent="blue"] { --app-primary: #2563eb; --app-primary-rgb: 37, 99, 235; --app-primary-hover: #1d4ed8; --app-primary-active: #1e40af; --app-primary-subtle: #dbeafe; --app-primary-border: #93c5fd; --app-primary-contrast: #fff; } html[data-accent="indigo"] { --app-primary: #4f46e5; --app-primary-rgb: 79, 70, 229; --app-primary-hover: #4338ca; --app-primary-active: #3730a3; --app-primary-subtle: #e0e7ff; --app-primary-border: #a5b4fc; --app-primary-contrast: #fff; } html[data-accent="teal"] { --app-primary: #0f766e; --app-primary-rgb: 15, 118, 110; --app-primary-hover: #0d9488; --app-primary-active: #115e59; --app-primary-subtle: #ccfbf1; --app-primary-border: #5eead4; --app-primary-contrast: #fff; } html[data-accent="cyan"] { --app-primary: #0891b2; --app-primary-rgb: 8, 145, 178; --app-primary-hover: #0e7490; --app-primary-active: #155e75; --app-primary-subtle: #cffafe; --app-primary-border: #67e8f9; --app-primary-contrast: #fff; } html[data-accent="green"] { --app-primary: #16a34a; --app-primary-rgb: 22, 163, 74; --app-primary-hover: #15803d; --app-primary-active: #166534; --app-primary-subtle: #dcfce7; --app-primary-border: #86efac; --app-primary-contrast: #fff; } html[data-accent="amber"] { --app-primary: #d97706; --app-primary-rgb: 217, 119, 6; --app-primary-hover: #b45309; --app-primary-active: #92400e; --app-primary-subtle: #fef3c7; --app-primary-border: #fcd34d; --app-primary-contrast: #fff; } html[data-accent="orange"] { --app-primary: #ea580c; --app-primary-rgb: 234, 88, 12; --app-primary-hover: #c2410c; --app-primary-active: #9a3412; --app-primary-subtle: #ffedd5; --app-primary-border: #fdba74; --app-primary-contrast: #fff; } html[data-accent="rose"] { --app-primary: #e11d48; --app-primary-rgb: 225, 29, 72; --app-primary-hover: #be123c; --app-primary-active: #9f1239; --app-primary-subtle: #ffe4e6; --app-primary-border: #fda4af; --app-primary-contrast: #fff; } html[data-accent="gray"] { --app-primary: #64748b; --app-primary-rgb: 100, 116, 139; --app-primary-hover: #475569; --app-primary-active: #334155; --app-primary-subtle: #e2e8f0; --app-primary-border: #cbd5e1; --app-primary-contrast: #fff; } /* Custom accent: CSS vars are set by appearance.js on */ html[data-accent="custom"] { /* tokens come from inline --app-primary* on */ } :root { --app-primary: #696cff; --app-primary-rgb: 105, 108, 255; --app-primary-hover: #5f61e6; --app-primary-active: #595cd9; --app-primary-subtle: #e7e7ff; --app-primary-border: #c3c4ff; --app-primary-contrast: #fff; } /* Accent → Bootstrap + template primary overrides */ html[data-accent] { --bs-primary: var(--app-primary); --bs-primary-rgb: var(--app-primary-rgb); --bs-link-color: var(--app-primary); --bs-link-hover-color: var(--app-primary-hover); --bs-primary-bg-subtle: var(--app-primary-subtle); --bs-primary-border-subtle: var(--app-primary-border); } html[data-accent] .text-primary { color: var(--app-primary) !important; } html[data-accent] .bg-primary { background-color: var(--app-primary) !important; } html[data-accent] a.bg-primary:hover, html[data-accent] a.bg-primary:focus { background-color: var(--app-primary-hover) !important; } html[data-accent] .bg-label-primary { background-color: var(--app-primary-subtle) !important; color: var(--app-primary) !important; } html[data-accent] .border-primary, html[data-accent] html:not([dir=rtl]) .border-primary, html[data-accent] html[dir=rtl] .border-primary { border-color: var(--app-primary) !important; } html[data-accent] .btn-primary { background-color: var(--app-primary) !important; border-color: var(--app-primary) !important; color: var(--app-primary-contrast) !important; box-shadow: 0 0.125rem 0.25rem rgba(var(--app-primary-rgb), 0.4); } html[data-accent] .btn-primary:hover { background-color: var(--app-primary-hover) !important; border-color: var(--app-primary-hover) !important; } html[data-accent] .btn-check:checked + .btn-primary, html[data-accent] .btn-check:active + .btn-primary, html[data-accent] .btn-primary:active, html[data-accent] .btn-primary.active, html[data-accent] .show > .btn-primary.dropdown-toggle { background-color: var(--app-primary-active) !important; border-color: var(--app-primary-active) !important; } html[data-accent] .btn-outline-primary { color: var(--app-primary) !important; border-color: var(--app-primary) !important; } html[data-accent] .btn-outline-primary:hover, html[data-accent] .btn-check:checked + .btn-outline-primary, html[data-accent] .btn-outline-primary:active, html[data-accent] .btn-outline-primary.active { background-color: var(--app-primary) !important; border-color: var(--app-primary) !important; color: var(--app-primary-contrast) !important; } html[data-accent] .page-item.active .page-link, html[data-accent] .pagination li.active > a:not(.page-link) { border-color: var(--app-primary) !important; background-color: var(--app-primary) !important; box-shadow: 0 0.125rem 0.25rem rgba(var(--app-primary-rgb), 0.4); } html[data-accent] .progress-bar { background-color: var(--app-primary) !important; } /* Do not recolor all anchors — keeps dropdown/nav text neutral */ html[data-accent] a:not(.dropdown-item):not(.nav-link):not(.menu-link):not(.footer-link):not(.btn) { color: var(--app-primary); } html[data-accent] a:not(.dropdown-item):not(.nav-link):not(.menu-link):not(.footer-link):not(.btn):hover { color: var(--app-primary-hover); } html[data-accent] .dropdown-item, html[data-accent] .dropdown-item i, html[data-accent] .dropdown-menu .fw-medium, html[data-accent] .dropdown-menu .align-middle { color: #697a8d !important; } html[data-accent] .dropdown-item:hover, html[data-accent] .dropdown-item:focus { color: #566a7f !important; } html[data-accent] .form-check-input:checked { background-color: var(--app-primary); border-color: var(--app-primary); } html[data-accent] .form-control:focus, html[data-accent] .form-select:focus { border-color: var(--app-primary); box-shadow: 0 0 0.25rem 0.05rem rgba(var(--app-primary-rgb), 0.1); } html[data-accent] .dropdown-item:not(.disabled).active, html[data-accent] .dropdown-item:not(.disabled):active { background-color: rgba(var(--app-primary-rgb), 0.12); color: var(--app-primary) !important; } html[data-accent] .layout-wrapper:not(.layout-horizontal) .bg-menu-theme .menu-inner > .menu-item.active:before { background: var(--app-primary); } html[data-accent] .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before { background-color: var(--app-primary) !important; border: 1px solid var(--app-primary) !important; } html[data-accent] .bg-menu-theme .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle) { color: var(--app-primary) !important; } html[data-accent] .app-brand .layout-menu-toggle { background-color: var(--app-primary); } @media (max-width: 1199.98px) { html[data-accent] .app-brand .layout-menu-toggle { border-color: var(--app-primary) !important; } } /* Appearance picker UI */ .appearance-panel { padding: 0.5rem 1rem 0.85rem; min-width: 15rem; } .appearance-panel .appearance-label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: #a1acb8; margin-bottom: 0.4rem; } .appearance-mode-btns { display: flex; gap: 0.35rem; margin-bottom: 0.85rem; } .appearance-mode-btns .btn { flex: 1; font-size: 0.75rem; padding: 0.35rem 0.5rem; } .appearance-accent-swatches { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; max-width: 12.5rem; } .appearance-accent-btn { width: 1.45rem; height: 1.45rem; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: transform 0.15s ease, box-shadow 0.15s ease; } .appearance-accent-btn:hover { transform: scale(1.08); } .appearance-accent-btn.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--app-primary); } .appearance-accent-btn[data-accent-value="default"] { background: #696cff; } .appearance-accent-btn[data-accent-value="blue"] { background: #2563eb; } .appearance-accent-btn[data-accent-value="indigo"] { background: #4f46e5; } .appearance-accent-btn[data-accent-value="teal"] { background: #0f766e; } .appearance-accent-btn[data-accent-value="cyan"] { background: #0891b2; } .appearance-accent-btn[data-accent-value="green"] { background: #16a34a; } .appearance-accent-btn[data-accent-value="amber"] { background: #d97706; } .appearance-accent-btn[data-accent-value="orange"] { background: #ea580c; } .appearance-accent-btn[data-accent-value="rose"] { background: #e11d48; } .appearance-accent-btn[data-accent-value="gray"] { background: #64748b; } .appearance-custom-row { display: flex; align-items: center; gap: 0.55rem; } .appearance-custom-swatch { position: relative; width: 1.7rem; height: 1.7rem; border-radius: 50%; overflow: hidden; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); cursor: pointer; background: conic-gradient( from 0deg, #ef4444, #f59e0b, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444 ); margin: 0; } .appearance-custom-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--app-primary); } .appearance-custom-swatch input[type="color"] { position: absolute; inset: -0.35rem; width: calc(100% + 0.7rem); height: calc(100% + 0.7rem); border: 0; padding: 0; cursor: pointer; opacity: 0; } .appearance-custom-hint { font-size: 0.72rem; color: #a1acb8; } html.dark-style .appearance-custom-hint { color: var(--app-muted, #9d9d9d); } /* Logo readability on dark menu only (do not restyle login form logo layout) */ html.dark-style .layout-menu .app-brand-logo img, html.dark-style .layout-menu .app-brand img { background: #f5f7fb; border-radius: 0.55rem; padding: 0.35rem 0.45rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14), 0 2px 8px rgba(0, 0, 0, 0.35); } html.dark-style .layout-menu .app-brand { padding-top: 0.65rem; padding-bottom: 0.65rem; } /* ========== Dark mode (VS Dark–style contrast) ========== Hierarchy: canvas (darkest) → panel → elevated → input (lightest) Borders are intentional — surfaces must not blend into each other. */ html.dark-style, html[data-appearance-mode="dark"] { color-scheme: dark; } html.dark-style { /* Canvas / page */ --bs-body-bg: #1e1e1e; --bs-body-bg-rgb: 30, 30, 30; --bs-body-color: #cccccc; --bs-body-color-rgb: 204, 204, 204; --bs-emphasis-color: #f3f3f3; --bs-heading-color: #f3f3f3; --bs-secondary-color: rgba(204, 204, 204, 0.78); --bs-border-color: #555555; --bs-tertiary-bg: #252526; --bs-secondary-bg: #2d2d30; /* App surfaces */ --app-surface: #252526; /* sidebar, cards */ --app-surface-elevated: #2d2d30; /* headers, dropdowns, footers */ --app-surface-hover: #37373d; --app-input: #3c3c3c; /* form fields — clearly distinct */ --app-text: #cccccc; --app-heading: #f3f3f3; --app-muted: #9d9d9d; --app-border: #555555; --app-border-subtle: #3e3e42; /* Accent soft fills that stay readable on dark */ --app-primary-subtle: rgba(var(--app-primary-rgb), 0.18); --app-primary-border: rgba(var(--app-primary-rgb), 0.45); } html.dark-style body { background-color: var(--bs-body-bg) !important; color: var(--app-text) !important; } html.dark-style h1, html.dark-style h2, html.dark-style h3, html.dark-style h4, html.dark-style h5, html.dark-style h6, html.dark-style .h1, html.dark-style .h2, html.dark-style .h3, html.dark-style .h4, html.dark-style .h5, html.dark-style .h6 { color: var(--app-heading) !important; } html.dark-style .text-muted, html.dark-style .text-secondary { color: var(--app-muted) !important; } html.dark-style .layout-page, html.dark-style .content-wrapper { background-color: var(--bs-body-bg) !important; } html.dark-style .bg-navbar-theme, html.dark-style .layout-navbar { background-color: rgba(45, 45, 48, 0.96) !important; color: var(--app-text) !important; border-bottom: 1px solid var(--app-border-subtle); } html.dark-style .layout-navbar { backdrop-filter: saturate(160%) blur(8px); } html.dark-style .layout-navbar-fixed .layout-page:before { background: rgba(30, 30, 30, 0.72) !important; } html.dark-style .bg-navbar-theme .navbar-nav > .nav-link, html.dark-style .bg-navbar-theme .navbar-nav > .nav-item > .nav-link, html.dark-style .bg-navbar-theme .navbar-brand, html.dark-style .bg-navbar-theme .navbar-brand a { color: var(--app-text) !important; } html.dark-style .bg-menu-theme { background-color: var(--app-surface) !important; color: var(--app-text) !important; border-right: 1px solid var(--app-border-subtle); box-shadow: none; } html.dark-style .bg-menu-theme .menu-link, html.dark-style .bg-menu-theme .menu-text, html.dark-style .bg-menu-theme .menu-header { color: var(--app-text) !important; } html.dark-style .bg-menu-theme .menu-header { color: var(--app-muted) !important; letter-spacing: 0.04em; } html.dark-style .bg-menu-theme .menu-link:hover, html.dark-style .bg-menu-theme .menu-link:focus { background-color: var(--app-surface-hover) !important; color: var(--app-heading) !important; } html.dark-style .bg-menu-theme .menu-inner > .menu-item.active > .menu-link:not(.menu-toggle), html.dark-style .bg-menu-theme .menu-item.active > .menu-link { background-color: var(--app-surface-hover) !important; color: var(--app-heading) !important; } html.dark-style .bg-menu-theme .menu-sub { background-color: #1f1f1f !important; } html.dark-style .bg-menu-theme .menu-inner-shadow { background: linear-gradient(var(--app-surface) 41%, rgba(37, 37, 38, 0.15) 95%, transparent); } html.dark-style .bg-menu-theme .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before, html.dark-style .bg-menu-theme .menu-inner > .menu-item.open .menu-item.active > .menu-link::before { box-shadow: 0 0 0 2px var(--app-surface); } html.dark-style .bg-footer-theme, html.dark-style .content-footer { background-color: var(--app-surface) !important; color: var(--app-muted) !important; border-top: 1px solid var(--app-border); } html.dark-style .card, html.dark-style .modal-content, html.dark-style .dropdown-menu, html.dark-style .offcanvas, html.dark-style .toast, html.dark-style .accordion-item { background-color: var(--app-surface) !important; color: var(--app-text) !important; border: 1px solid var(--app-border) !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important; } html.dark-style .card-header, html.dark-style .card-footer, html.dark-style .modal-header, html.dark-style .modal-footer, html.dark-style .toast-header { background-color: var(--app-surface-elevated) !important; color: var(--app-heading) !important; border-color: var(--app-border) !important; } html.dark-style .card-body, html.dark-style .Searching-Box-padding { color: var(--app-text) !important; } html.dark-style .dropdown-item { color: var(--app-text) !important; } html.dark-style .dropdown-item i, html.dark-style .dropdown-menu .fw-medium, html.dark-style .dropdown-menu .align-middle { color: var(--app-text) !important; } html.dark-style .dropdown-item:hover, html.dark-style .dropdown-item:focus { background-color: var(--app-surface-hover) !important; color: var(--app-heading) !important; } html.dark-style .dropdown-divider, html.dark-style hr { border-color: var(--app-border) !important; } html.dark-style .table { --bs-table-bg: transparent; --bs-table-color: var(--app-text); --bs-table-border-color: var(--app-border-subtle); --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-hover-bg: rgba(255, 255, 255, 0.07); color: var(--app-text); } html.dark-style .table thead th, html.dark-style .table-light { background-color: var(--app-surface-elevated) !important; color: var(--app-heading) !important; border-color: var(--app-border) !important; } html.dark-style .form-control, html.dark-style .form-select, html.dark-style .input-group-text, html.dark-style .readonly-select { background-color: var(--app-input) !important; border: 1px solid var(--app-border) !important; color: var(--app-heading) !important; } html.dark-style .form-control:focus, html.dark-style .form-select:focus { background-color: #404040 !important; border-color: var(--app-primary) !important; color: var(--app-heading) !important; box-shadow: 0 0 0 0.15rem rgba(var(--app-primary-rgb), 0.25) !important; } html.dark-style .form-control::placeholder { color: #8a8a8a !important; opacity: 1; } html.dark-style .form-label, html.dark-style label.form-label { color: #c8c8c8 !important; } html.dark-style .form-control:disabled, html.dark-style .form-select:disabled, html.dark-style .readonly-select:disabled, html.dark-style .form-control[readonly] { background-color: #333333 !important; color: var(--app-muted) !important; border-color: var(--app-border-subtle) !important; } /* Select2 / jQuery UI when present */ html.dark-style .select2-container--default .select2-selection--single, html.dark-style .select2-container--default .select2-selection--multiple, html.dark-style .ui-widget-content { background-color: var(--app-input) !important; border-color: var(--app-border) !important; color: var(--app-heading) !important; } html.dark-style .select2-dropdown { background-color: var(--app-surface-elevated) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html.dark-style .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--app-surface-hover) !important; color: var(--app-heading) !important; } html.dark-style .smallAdd, html.dark-style .CardFontColor { color: var(--app-muted) !important; } html.dark-style .list-record-count { color: var(--app-muted) !important; } html.dark-style .list-group-item { background-color: var(--app-surface) !important; border-color: var(--app-border) !important; color: var(--app-text) !important; } html.dark-style .nav-tabs { border-color: var(--app-border); } html.dark-style .nav-tabs .nav-link { color: var(--app-text); } html.dark-style .nav-tabs .nav-link.active { background-color: var(--app-surface) !important; border-color: var(--app-border) var(--app-border) var(--app-surface) !important; color: var(--app-heading) !important; } html.dark-style .page-link { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-text); } html.dark-style .page-item.disabled .page-link { background-color: var(--app-surface); border-color: var(--app-border); color: var(--app-muted); } html.dark-style .bg-light, html.dark-style .bg-body, html.dark-style .small-box.bg-light { background-color: var(--app-surface-elevated) !important; color: var(--app-text) !important; } html.dark-style .text-dark { color: var(--app-heading) !important; } html.dark-style .border, html.dark-style .border-top, html.dark-style .border-bottom, html.dark-style .border-start, html.dark-style .border-end { border-color: var(--app-border) !important; } html.dark-style .shadow-sm, html.dark-style .card.shadow-none { box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25) !important; } html.dark-style .navbar-detached { box-shadow: 0 0 0.375rem 0.15rem rgba(0, 0, 0, 0.35); } html.dark-style .appearance-panel .appearance-label { color: var(--app-muted); } html.dark-style .appearance-accent-btn.is-active { box-shadow: 0 0 0 2px var(--app-surface), 0 0 0 4px var(--app-primary); } html.dark-style .btn-light { background-color: var(--app-surface-elevated) !important; border-color: var(--app-border) !important; color: var(--app-heading) !important; } html.dark-style .btn-outline-secondary { color: var(--app-heading) !important; border-color: #6e6e6e !important; background-color: transparent !important; } html.dark-style .btn-outline-secondary:hover { background-color: var(--app-surface-hover) !important; color: #fff !important; border-color: #8a8a8a !important; } html.dark-style .btn-secondary { background-color: #3e3e42 !important; border-color: #555555 !important; color: var(--app-heading) !important; } html.dark-style .alert { border-width: 1px; } html.dark-style .alert-success { background-color: #1e3a2f !important; border-color: #2e7d4f !important; color: #b6f0c8 !important; } html.dark-style .alert-danger { background-color: #3a1e1e !important; border-color: #a33b3b !important; color: #f0b6b6 !important; } html.dark-style .alert-info { background-color: #1e2a3a !important; border-color: #3b6ea3 !important; color: #b6d4f0 !important; } html.dark-style .alert-warning { background-color: #3a321e !important; border-color: #a38b3b !important; color: #f0e0b6 !important; } html.dark-style .badge.bg-label-primary, html.dark-style .bg-label-primary { background-color: var(--app-primary-subtle) !important; color: #c5c7ff !important; } html.dark-style .swal2-popup { background: var(--app-surface-elevated) !important; color: var(--app-text) !important; border: 1px solid var(--app-border); } html.dark-style .container-xxl, html.dark-style .container-p-y { color: var(--app-text); }