/* =================================================================== DARK MODE – html.dark-mode overrides Toggle class is set on via JS; preference stored in localStorage. =================================================================== */ /* ── CSS variables ────────────────────────────────────────────────── */ :root { --dm-bg: #0f172a; --dm-bg-2: #1e293b; --dm-bg-3: #263244; --dm-border: #334155; --dm-text: #d1d8e1; --dm-text-muted: #94a3b8; --dm-link: #d1d8e1; --dm-link-hover: #93c5fd; --dm-input-bg: #1e293b; --dm-input-border: #334155; --dm-accent: #316eb3; } /* ── Base ─────────────────────────────────────────────────────────── */ html.dark-mode, html.dark-mode body { background-color: var(--dm-bg); color: var(--dm-text); } html.dark-mode #wrapper { background-color: var(--dm-bg); } html.dark-mode .main-content { background-color: var(--dm-bg); color: var(--dm-text); } /* ── Preloaders ───────────────────────────────────────────────────── */ html.dark-mode #preloader { background: rgba(15, 23, 42, 0.97) !important; } html.dark-mode #early-preloader { background: rgba(15, 23, 42, 0.97) !important; } /* ── Header ───────────────────────────────────────────────────────── */ html.dark-mode #header { background-color: var(--dm-bg-2) !important; border-bottom: 1px solid var(--dm-border); } html.dark-mode .header-top { background-color: var(--dm-bg-3) !important; } html.dark-mode .menuzord, html.dark-mode .header-nav-wrapper { background-color: var(--dm-bg-2) !important; } html.dark-mode .menuzord-menu > li > a { color: var(--dm-text) !important; } html.dark-mode .menuzord-menu > li:hover > a, html.dark-mode .menuzord-menu > li.active > a { color: var(--dm-link) !important; } html.dark-mode .menuzord-menu ul.dropdown { background-color: var(--dm-bg-2) !important; border: 1px solid var(--dm-border); box-shadow: 0 4px 16px rgba(0, 0, 0, .5); } html.dark-mode .menuzord-menu ul.dropdown li a { color: var(--dm-text) !important; } html.dark-mode .menuzord-menu ul.dropdown li:hover > a { background-color: var(--dm-bg-3) !important; color: var(--dm-link) !important; } html.dark-mode .menuzord-brand img { filter: brightness(0.9); } /* ── Footer ───────────────────────────────────────────────────────── */ html.dark-mode #footer, html.dark-mode #footer .container-fluid { background-color: var(--dm-bg-2) !important; border-top: 1px solid var(--dm-border); } html.dark-mode #footer .widget.dark { background-color: var(--dm-bg-2) !important; color: var(--dm-text-muted); } html.dark-mode #footer .list.list-border li { border-color: var(--dm-border) !important; color: var(--dm-text-muted); } html.dark-mode #footer a, html.dark-mode #footer .post-title a { color: var(--dm-link) !important; } html.dark-mode #footer a:hover { color: var(--dm-link-hover) !important; } html.dark-mode #footer p, html.dark-mode #footer .font-12 { color: var(--dm-text-muted) !important; } html.dark-mode #footer .widget-title { color: var(--dm-text) !important; } /* ── Bootstrap: Panels ────────────────────────────────────────────── */ html.dark-mode .panel { background-color: var(--dm-bg-2); border-color: var(--dm-border); } html.dark-mode .panel-heading, html.dark-mode .panel-default > .panel-heading { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .panel-body { color: var(--dm-text); } html.dark-mode .panel-footer { background-color: var(--dm-bg-3); border-color: var(--dm-border); } html.dark-mode .panel-title { color: var(--dm-text); } /* ── Bootstrap: Tables ────────────────────────────────────────────── */ html.dark-mode .table { color: var(--dm-text); } html.dark-mode .table > thead > tr > th, html.dark-mode .table > tbody > tr > th, html.dark-mode .table > tfoot > tr > th, html.dark-mode .table > thead > tr > td, html.dark-mode .table > tbody > tr > td, html.dark-mode .table > tfoot > tr > td { border-color: var(--dm-border); color: var(--dm-text); background-color: var(--dm-bg-2); } html.dark-mode .table > thead > tr > th { background-color: var(--dm-bg-3); } html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.03); } html.dark-mode .table-hover > tbody > tr:hover > td, html.dark-mode .table-hover > tbody > tr:hover > th { background-color: rgba(255, 255, 255, 0.06); } html.dark-mode .table-bordered { border-color: var(--dm-border); } html.dark-mode .thead-bg th, html.dark-mode .thead-bg { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; } /* ── Bootstrap: Forms ─────────────────────────────────────────────── */ html.dark-mode .eu-card .eu-static { background-color: var(--dm-bg-3) !important; border-color: var(--dm-input-border); color: var(--dm-text-muted) !important; } html.dark-mode .form-control, html.dark-mode .filter_ISO_9999 { background-color: var(--dm-input-bg); border-color: var(--dm-input-border); color: var(--dm-text); } html.dark-mode .add_text_to_val { border-top: 1px solid var(--dm-border); border-left: 1px solid var(--dm-border); } html.dark-mode .form-control:focus { background-color: var(--dm-input-bg); border-color: var(--dm-accent); color: var(--dm-text); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); } html.dark-mode .form-control:disabled, html.dark-mode .form-control[readonly] { background-color: var(--dm-bg-3); color: var(--dm-text-muted); } html.dark-mode .input-group-addon { background-color: var(--dm-bg-3); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode label, html.dark-mode .control-label { color: var(--dm-text); } html.dark-mode .help-block { color: var(--dm-text-muted); } html.dark-mode select.form-control option { background-color: var(--dm-bg-2); color: var(--dm-text); } html.dark-mode textarea.form-control { background-color: var(--dm-input-bg); color: var(--dm-text); } /* ── Bootstrap: Buttons ───────────────────────────────────────────── */ html.dark-mode .btn-default { background-color: var(--dm-bg-3); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode .btn-default:hover, html.dark-mode .btn-default:focus { background-color: var(--dm-bg-2); border-color: var(--dm-accent); color: var(--dm-text); } /* ── Bootstrap: Modals ────────────────────────────────────────────── */ html.dark-mode .modal-content { background-color: var(--dm-bg-2); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode .modal-header { background-color: var(--dm-bg-3); border-color: var(--dm-border); } html.dark-mode .modal-footer { background-color: var(--dm-bg-3); border-color: var(--dm-border); } html.dark-mode .modal-title { color: var(--dm-text); } html.dark-mode .modal-header .close { color: var(--dm-text-muted); opacity: 0.6; } html.dark-mode .modal-header .close:hover { opacity: 1; color: var(--dm-text); } /* ── Bootstrap: Alerts ────────────────────────────────────────────── */ html.dark-mode .alert-info { background-color: rgba(37, 99, 235, 0.15); border-color: rgba(37, 99, 235, 0.35); color: #93c5fd; } html.dark-mode .alert-success { background-color: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.35); color: #86efac; } html.dark-mode .alert-warning { background-color: rgba(234, 179, 8, 0.15); border-color: rgba(234, 179, 8, 0.35); color: #dfc53b; } html.dark-mode .alert-danger { background-color: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.35); color: #fca5a5; } /* ── Bootstrap: Dropdowns ─────────────────────────────────────────── */ html.dark-mode .dropdown-menu { background-color: var(--dm-bg-2); border-color: var(--dm-border); box-shadow: 0 4px 16px rgba(0, 0, 0, .4); } html.dark-mode .dropdown-menu > li > a { color: var(--dm-text); } html.dark-mode .dropdown-menu > li > a:hover, html.dark-mode .dropdown-menu > li > a:focus { background-color: var(--dm-bg-3); color: var(--dm-link); } html.dark-mode .dropdown-menu .divider { background-color: var(--dm-border); } /* ── Bootstrap: List Groups ───────────────────────────────────────── */ html.dark-mode .list-group-item { background-color: var(--dm-bg-2); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode a.list-group-item:hover, html.dark-mode a.list-group-item:focus { background-color: var(--dm-bg-3); color: var(--dm-link); } html.dark-mode .list-group-item.active, html.dark-mode .list-group-item.active:hover { background-color: var(--dm-accent); border-color: var(--dm-accent); color: #fff; } /* ── Bootstrap: Nav / Tabs ────────────────────────────────────────── */ html.dark-mode .nav-tabs { border-color: var(--dm-border); } html.dark-mode .nav-tabs > li > a { color: var(--dm-text-muted); border-color: transparent; } html.dark-mode .nav-tabs > li > a:hover { background-color: var(--dm-bg-3); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode .nav-tabs > li.active > a, html.dark-mode .nav-tabs > li.active > a:hover, html.dark-mode .nav-tabs > li.active > a:focus { background-color: var(--dm-bg-2); border-color: var(--dm-border); border-bottom-color: var(--dm-bg-2); color: var(--dm-text); } html.dark-mode .tab-content { background-color: var(--dm-bg-2); border-color: var(--dm-border); } html.dark-mode .nav-pills > li > a { color: var(--dm-text-muted); } html.dark-mode .nav-pills > li.active > a, html.dark-mode .nav-pills > li.active > a:hover { background-color: var(--dm-accent); color: #fff; } /* ── Bootstrap: Wells ─────────────────────────────────────────────── */ html.dark-mode .well { background-color: var(--dm-bg-2); border-color: var(--dm-border); color: var(--dm-text); } /* ── Bootstrap: Breadcrumb ────────────────────────────────────────── */ html.dark-mode .breadcrumb { background-color: var(--dm-bg-1); color: var(--dm-text-muted); } html.dark-mode .breadcrumb > li + li::before { color: var(--dm-text-muted); } html.dark-mode .breadcrumb > .active { color: var(--dm-text-muted); } /* ── Bootstrap: Pagination ────────────────────────────────────────── */ html.dark-mode .pagination > li > a, html.dark-mode .pagination > li > span { background-color: var(--dm-bg-2); border-color: var(--dm-border); color: var(--dm-link); } html.dark-mode .pagination > li > a:hover, html.dark-mode .pagination > li > span:hover { background-color: var(--dm-bg-3); border-color: var(--dm-border); color: var(--dm-link-hover); } html.dark-mode .pagination > .active > a, html.dark-mode .pagination > .active > span { background-color: var(--dm-accent); border-color: var(--dm-accent); color: #fff; } html.dark-mode .pagination > .disabled > a, html.dark-mode .pagination > .disabled > span { background-color: var(--dm-bg-3); border-color: var(--dm-border); color: var(--dm-text-muted); } /* ── pagination-sm (episodes / encounters) ───────────────────────── */ html.dark-mode #episodes-pagination .pagination-sm li > a, html.dark-mode #encounters-pagination .pagination-sm li > a { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-link) !important; } html.dark-mode #episodes-pagination .pagination-sm li > a:hover, html.dark-mode #encounters-pagination .pagination-sm li > a:hover { background-color: var(--dm-bg-3) !important; color: var(--dm-link-hover) !important; } html.dark-mode #episodes-pagination .pagination-sm li.active > a, html.dark-mode #encounters-pagination .pagination-sm li.active > a { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } html.dark-mode #episodes-pagination .pagination-sm li.disabled > a, html.dark-mode #encounters-pagination .pagination-sm li.disabled > a { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text-muted) !important; } /* ── Links ────────────────────────────────────────────────────────── */ html.dark-mode a { color: var(--dm-link); } html.dark-mode a:hover, html.dark-mode a:focus { color: var(--dm-link-hover); } /* ── Select2 / Krajee ─────────────────────────────────────────────── */ html.dark-mode .select2-container--krajee .select2-selection { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; } html.dark-mode .select2-container--krajee .select2-selection--single .select2-selection__rendered { color: var(--dm-text) !important; } html.dark-mode .select2-container--krajee .select2-selection--multiple .select2-selection__choice { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .select2-container--krajee .select2-dropdown { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); } html.dark-mode .select2-container--krajee .select2-search--dropdown .select2-search__field { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .select2-container--krajee .select2-results__option { color: var(--dm-text) !important; background-color: var(--dm-bg-2) !important; } html.dark-mode .select2-container--krajee .select2-results__option--highlighted { background-color: var(--dm-accent) !important; color: #fff !important; } html.dark-mode .select2-container--krajee .select2-results__option[aria-selected=true] { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; } /* ── jQuery UI Datepicker ─────────────────────────────────────────── */ html.dark-mode .ui-datepicker { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .ui-datepicker .ui-datepicker-header { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .ui-datepicker .ui-state-default { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .ui-datepicker .ui-state-hover, html.dark-mode .ui-datepicker .ui-state-active, html.dark-mode .ui-datepicker .ui-state-highlight { background: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } html.dark-mode .ui-datepicker select.ui-datepicker-month, html.dark-mode .ui-datepicker select.ui-datepicker-year { background-color: var(--dm-input-bg); border-color: var(--dm-border); color: var(--dm-text); } html.dark-mode .ui-datepicker-calendar thead th { color: var(--dm-text-muted); } html.dark-mode .ui-timepicker-div { background-color: var(--dm-bg-2) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode .ui-timepicker-div .ui-slider { background-color: var(--dm-bg-3) !important; } /* ── Medical info blocks ──────────────────────────────────────────── */ html.dark-mode .medical-info-block { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text); } /* ── Search / diagnoses box ───────────────────────────────────────── */ html.dark-mode .search_box, html.dark-mode .diagnoses_box { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; } html.dark-mode .search_box .title { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } /* ── jstree ───────────────────────────────────────────────────────── */ html.dark-mode .jstree-container-ul { background-color: var(--dm-bg-2); } html.dark-mode .jstree-default .jstree-anchor { color: var(--dm-text) !important; } html.dark-mode .jstree-default .jstree-clicked { background: var(--dm-accent) !important; color: #fff !important; } html.dark-mode .jstree-default .jstree-hovered { background: var(--dm-bg-3) !important; color: var(--dm-text) !important; } /* ── Sidebar / side panel ─────────────────────────────────────────── */ html.dark-mode #side-panel, html.dark-mode .side-panel-content { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; } /* ── Inner-header (page title bar) ───────────────────────────────── */ html.dark-mode .inner-header { background-color: var(--dm-bg-1) !important; } html.dark-mode .inner-header .title, html.dark-mode .inner-header .page-title { color: var(--dm-text) !important; } /* ── hr & separators ─────────────────────────────────────────────── */ html.dark-mode hr { border-color: var(--dm-border); } /* ── Text utilities ───────────────────────────────────────────────── */ html.dark-mode .text-muted, html.dark-mode small { color: var(--dm-text-muted) !important; } /* ── Scrollbar (Webkit) ───────────────────────────────────────────── */ html.dark-mode ::-webkit-scrollbar { width: 8px; height: 8px; } html.dark-mode ::-webkit-scrollbar-track { background: var(--dm-bg); } html.dark-mode ::-webkit-scrollbar-thumb { background: var(--dm-border); border-radius: 4px; } html.dark-mode ::-webkit-scrollbar-thumb:hover { background: #4b5563; } /* ── Hero wave ────────────────────────────────────────────────────── */ html.dark-mode .ksh-hero__wave svg path { fill: #1e293b; } /* ── Dark-mode toggle button (footer) ────────────────────────────── */ .dark-mode-toggle-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; padding: 0; margin-right: 10px; vertical-align: middle; line-height: 1; opacity: 0.7; transition: opacity .2s, transform .35s ease; border: 1px solid #2563ab; padding: 2px; border-radius: 20px; } .dark-mode-toggle-btn:hover { opacity: 1; transform: rotate(22deg) scale(1.15); } .dark-mode-toggle-btn .material-symbols-outlined { font-size: 12px; color: #2563ab; font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 18; line-height: 1; } html.dark-mode .dark-mode-toggle-btn .material-symbols-outlined { color: #fde68a; } html.dark-mode .tile-card { background-color: var(--dm-bg-2) !important; } html.dark-mode .tile-card .material-symbols-outlined { color: var(--dm-accent) !important; } html.dark-mode .tile-section-desc { color: var(--dm-text) !important; } html.dark-mode .tile-section-title { color: var(--dm-accent) !important; } html.dark-mode #patient-search-bar { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text) !important; } html.dark-mode .user-info-value { color: var(--dm-text) !important; } html.dark-mode .dropdown-user > li > a.user-action-link, html.dark-mode .web_patient_info { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; } html.dark-mode .dropdown-support > li.ds-phones { background-color: var(--dm-bg-2) !important; color: var(--dm-text) !important; } html.dark-mode .ds-phones-grid > a { background-color: var(--dm-bg-3) !important; } html.dark-mode #psd-left { background-color: var(--dm-bg-2) !important; border-right: 1px solid var(--dm-border) !important; } html.dark-mode #psd-right { background-color: var(--dm-bg-3) !important; } html.dark-mode .psd-hist-name, html.dark-mode .selector_childs_from_episode_child, html.dark-mode .patient-hdr-name, html.dark-mode .ep-card__name { color: var(--dm-text) !important; } html.dark-mode .ksh-adv-list li, html.dark-mode .ksh-feature-card p, html.dark-mode .ksh-patient-feature span, html.dark-mode .srq-info-card__val { color: var(--dm-text) !important; } html.dark-mode .ksh-section-title, html.dark-mode h1, html.dark-mode h2, html.dark-mode h3, html.dark-mode div.h3, html.dark-mode h4, html.dark-mode .selector_childs h4.active, html.dark-mode h5 { color: var(--dm-accent) !important; } html.dark-mode .ksh-quick-actions a { background-color: var(--dm-bg-3) !important; border: 2px solid var(--dm-border); } html.dark-mode .ksh-tabs{ background-color: var(--dm-bg-2) !important; border-color: var(--dm-border); } html.dark-mode .ksh-tab{ background-color: var(--dm-bg-3) !important; border-color: var(--dm-border); color: var(--dm-text) !important; } html.dark-mode .ksh-tab--active { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } html.dark-mode .ksh-btn--primary { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } html.dark-mode .ksh-btn--primary:hover { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; opacity: 0.8; } html.dark-mode .cls-3{fill:#e2e2e2 !important;} html.dark-mode #preloader {background:rgba(15,23,42,.97)} html.dark-mode #preloader .pl-label{color:#94a3b8} /* dm-bg-2 */ html.dark-mode .search_box_list, html.dark-mode .srq-info-bar, html.dark-mode #episodes-list-panel, html.dark-mode .patient-hdr-card, html.dark-mode .enc-section-title, html.dark-mode .enc-entity-label, html.dark-mode #psd-res-items .psd-res-item, html.dark-mode .eu-card, html.dark-mode .srh-filter-bar, html.dark-mode .block-style-prep, html.dark-mode .drugs-filters, html.dark-mode .block-style-theme-border, html.dark-mode .tile-legal-info { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .ksh-audience, html.dark-mode .enc-entity-row { background-color: var(--dm-bg-2) !important; color: var(--dm-text) !important; } /* dm-bg-3 */ html.dark-mode .ksh-advantages, html.dark-mode .ksh-feature-card, html.dark-mode .ksh-patient-feature, html.dark-mode .selector_childs h4.active, html.dark-mode .ep-card, html.dark-mode .ep-card__hdr, html.dark-mode .ep-accordion-body, html.dark-mode .am-agree-block, html.dark-mode .sr-filter-bar, html.dark-mode .sr-empty, html.dark-mode .add_paper_referral, html.dark-mode .srh-empty { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode .vaccination_protocol, html.dark-mode .specimen_container, html.dark-mode .enc-entity-row { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* enc-entity-row inner table rows */ html.dark-mode .enc-entity-row table td { background-color: var(--dm-bg-2) !important; border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .enc-entity-row table td:first-child { background-color: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } html.dark-mode .enc-entity-row table tr:hover td { background-color: #2a3a52 !important; } html.dark-mode .enc-entity-row table tr:hover td:first-child { background-color: #2f4060 !important; } /* enc-detail-table hover */ html.dark-mode .enc-detail-table tr:hover td { background-color: #2a3a52 !important; } html.dark-mode .enc-detail-table tr:hover td:first-child { background-color: #2f4060 !important; } html.dark-mode .episode-row--active.ep-card, html.dark-mode .ep-accordion-body, html.dark-mode #patient-search-dropdown { border-color: var(--dm-accent) !important; } html.dark-mode .enc-modern-table, html.dark-mode .sr-table, html.dark-mode .srh-table { border-color: var(--dm-border) !important; box-shadow: 0 1px 6px rgba(0,0,0,0.35) !important; } html.dark-mode .enc-modern-table thead tr { background: var(--dm-bg-3) !important; } html.dark-mode .enc-modern-table thead th { color: var(--dm-text-muted) !important; border-bottom-color: var(--dm-border) !important; border-top-color: transparent !important; } /* rounded top corners — клip thead по border-radius таблиці */ html.dark-mode .enc-modern-table thead th:first-child { border-top-left-radius: 9px; } html.dark-mode .enc-modern-table thead th:last-child { border-top-right-radius: 9px; } /* rounded bottom corners */ html.dark-mode .enc-modern-table tbody tr:last-child td:first-child { border-bottom-left-radius: 9px; } html.dark-mode .enc-modern-table tbody tr:last-child td:last-child { border-bottom-right-radius: 9px; } html.dark-mode .ep-list-header { border-bottom: 2px solid var(--dm-border) !important; } html.dark-mode .ep-accord-extra-toggle, html.dark-mode .ep-extra-card, html.dark-mode .ep-extra-svc-block { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .enc-modern-table tbody tr.bg-success, html.dark-mode .enc-modern-table tbody tr.bg-success:hover { background-color: #1e3b3b !important; color: var(--dm-text) !important; } html.dark-mode .enc-modern-table tbody tr td, html.dark-mode .sr-table td, html.dark-mode .srh-table td, html.dark-mode .psd-col-title { color: var(--dm-text) !important; border-bottom: 1px solid var(--dm-border) !important; } html.dark-mode #psd-form-area { border-bottom: 1px solid var(--dm-border) !important; } html.dark-mode .enc-modern-table tbody tr, html.dark-mode .sr-table tbody tr, html.dark-mode .srh-table tbody tr { background-color: var(--dm-bg-2) !important; color: var(--dm-text) !important; } html.dark-mode .enc-modern-table tbody tr:hover > td, html.dark-mode .sr-table tbody tr:hover > td, html.dark-mode .srh-table tbody tr:hover > td { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; } html.dark-mode .select2-container--krajee .select2-results__group { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; text-shadow: none; } html.dark-mode .select2-container--krajee .select2-selection--single .select2-selection__arrow { border-left: 1px solid var(--dm-border); } html.dark-mode .select2-container--krajee .select2-selection--single .select2-selection__clear { color: var(--dm-text-muted) !important; background-color: transparent !important; } html.dark-mode .btn-danger { background-color: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.35) !important; color: #fca5a5 !important; } html.dark-mode .btn-warning { background-color: rgba(234, 179, 8, 0.15) !important; border-color: rgba(234, 179, 8, 0.35) !important; color: #dfc53b !important; } html.dark-mode .btn-success { background-color: rgba(34, 197, 94, 0.15) !important; border-color: rgba(34, 197, 94, 0.35) !important; color: #86efac !important; } html.dark-mode .btn-info { background-color: rgba(37, 99, 235, 0.15) !important; border-color: rgba(37, 99, 235, 0.35) !important; color: #93c5fd !important; } html.dark-mode .eu-btn-cancel { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode code { background-color: var(--dm-bg-3) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .custom-popup { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .custom-popup span{ color: var(--dm-text) !important; } html.dark-mode .custom-popup.top .custom-popup-arrow, html.dark-mode #nav-pinned-bar, html.dark-mode .btn-group .dropdown-menu > li + li { border-top-color: var(--dm-border) !important; } html.dark-mode #service-jstree-search input, html.dark-mode { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text) !important; } html.dark-mode .tree-header { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode .ep-extra-card, html.dark-mode .ep-extra-svc-block { border: 1px solid var(--dm-border) !important; } html.dark-mode .psd-hist-item { border-bottom: 1px solid var(--dm-border) !important; } /* ── ep-detail-table ──────────────────────────────────────────────── */ html.dark-mode .ep-detail-table, html.dark-mode .enc-detail-table, html.dark-mode .ep-accord-actions { border-color: var(--dm-border) !important; } html.dark-mode .ep-detail-table td, html.dark-mode .enc-detail-table td { border-bottom-color: var(--dm-border) !important; color: var(--dm-text) !important; background-color: var(--dm-bg-2); } html.dark-mode .ep-detail-table td:first-child, html.dark-mode .enc-detail-table td:first-child { background-color: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } /* status row accents — keep the coloured left border, darken row bg */ html.dark-mode .ep-detail-table tr.ep-row--closed td { background-color: rgba(40, 167, 69, 0.06) !important; } html.dark-mode .ep-detail-table tr.ep-row--error td { background-color: rgba(220, 53, 69, 0.06) !important; } /* ep-badge (episode status) */ html.dark-mode .ep-badge--active { background: rgba(255,193,7,.18) !important; color: #dfc53b !important; } html.dark-mode .ep-badge--closed { background: rgba(40,167,69,.15) !important; color: #86efac !important; } html.dark-mode .ep-badge--entered_in_error { background: rgba(220,53,69,.15) !important; color: #fca5a5 !important; } /* enc-status-badge (encounter) */ html.dark-mode .enc-status-badge--finished { background: rgba(34,197,94,.15) !important; color: #86efac !important; } html.dark-mode .enc-status-badge--active { background: rgba(234,179,8,.18) !important; color: #dfc53b !important; } html.dark-mode .enc-status-badge--recalled { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; } html.dark-mode .enc-status-badge--other { background: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } /* enc-badge (srh-table badge) */ html.dark-mode .enc-badge--finished { background: rgba(34,197,94,.15) !important; color: #86efac !important; } html.dark-mode .enc-badge--active { background: rgba(234,179,8,.18) !important; color: #dfc53b !important; } html.dark-mode .enc-badge--recalled, html.dark-mode .enc-badge--entered_in_error { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; } html.dark-mode .enc-badge--urgent { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; } html.dark-mode .enc-badge--routine { background: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } html.dark-mode .enc-badge--forced { background: rgba(234,179,8,.18) !important; color: #dfc53b !important; } /* enc-row--error inside srh-table */ html.dark-mode .srh-table tbody tr.enc-row--error { background-color: rgba(239,68,68,.1) !important; } html.dark-mode .srh-table tbody tr.enc-row--error:hover { background-color: rgba(239,68,68,.18) !important; } /* ── sr-table / srh-table ─────────────────────────────────────────── */ html.dark-mode .sr-table thead, html.dark-mode .srh-table thead { background-color: var(--dm-bg-3) !important; } html.dark-mode .sr-table th, html.dark-mode .srh-table th { color: var(--dm-text) !important; border-bottom-color: var(--dm-border) !important; } /* Error rows */ html.dark-mode .sr-table tbody tr.sr-row--error, html.dark-mode .srh-table tbody tr.srh-row--error { background-color: rgba(239, 68, 68, 0.1) !important; } html.dark-mode .sr-table tbody tr.sr-row--error:hover, html.dark-mode .srh-table tbody tr.srh-row--error:hover { background-color: rgba(239, 68, 68, 0.18) !important; } /* Completed rows */ html.dark-mode .sr-table tbody tr.sr-row--completed, html.dark-mode .srh-table tbody tr.srh-row--completed { background-color: rgba(34, 197, 94, 0.08) !important; } html.dark-mode .sr-table tbody tr.sr-row--completed:hover, html.dark-mode .srh-table tbody tr.srh-row--completed:hover { background-color: rgba(34, 197, 94, 0.14) !important; } /* Requisition link */ html.dark-mode .sr-requisition, html.dark-mode .srh-requisition { color: var(--dm-link) !important; } html.dark-mode .sr-requisition:hover, html.dark-mode .srh-requisition:hover { color: var(--dm-link-hover) !important; } /* Date / service / category text */ html.dark-mode .sr-date-label, html.dark-mode .srh-date, html.dark-mode .srh-birth { color: var(--dm-text-muted) !important; } html.dark-mode .sr-date-val, html.dark-mode #psd-res-items .psd-res-item .psd-res-name { color: var(--dm-text) !important; } html.dark-mode .sr-service-name, html.dark-mode .srh-service-name { color: var(--dm-text) !important; } html.dark-mode .sr-category, html.dark-mode .srh-category { color: var(--dm-text-muted) !important; } html.dark-mode .srh-employee { color: var(--dm-text-muted) !important; } html.dark-mode .srh-patient-link { color: var(--dm-link) !important; } html.dark-mode .srh-patient-link:hover { color: var(--dm-link-hover) !important; } html.dark-mode .srh-count { color: var(--dm-text-muted) !important; } /* Status badges */ html.dark-mode .sr-status--active, html.dark-mode .sr-status--in_progress, html.dark-mode .srh-badge--in_progress { background: rgba(234, 179, 8, 0.18) !important; color: #dfc53b !important; } html.dark-mode .sr-status--completed, html.dark-mode .srh-badge--active, html.dark-mode .srh-badge--completed { background: rgba(34, 197, 94, 0.15) !important; color: #86efac !important; } html.dark-mode .sr-status--entered_in_error, html.dark-mode .sr-status--recalled, html.dark-mode .srh-badge--recalled, html.dark-mode .srh-badge--entered_in_error { background: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; } html.dark-mode .sr-status--new, html.dark-mode .srh-badge--new { background: rgba(37, 99, 235, 0.2) !important; color: #93c5fd !important; } html.dark-mode .sr-status--in_queue, html.dark-mode .srh-badge--in_queue { background: rgba(234, 179, 8, 0.12) !important; color: #fcd34d !important; } html.dark-mode .srh-badge--default { background: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } /* Priority badges */ html.dark-mode .sr-priority--urgent { background: rgba(239, 68, 68, 0.15) !important; color: #fca5a5 !important; } html.dark-mode .sr-priority--routine, html.dark-mode .sr-priority--default { background: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } /* ── encounters-view-cancel: item blocks ─────────────────────────── */ html.dark-mode .encounters_list_item { background-color: var(--dm-bg-2); border-color: var(--dm-border) !important; color: var(--dm-text); } html.dark-mode .encounters_list_item_label, html.dark-mode .ep-name, html.dark-mode .ep-org, html.dark-mode .ap-resource-label, html.dark-mode .cp-requisition { color: var(--dm-text); } html.dark-mode .encounters_list_item_label_h5 { color: var(--dm-text); } html.dark-mode .encounters_list_item_label_checkbox { accent-color: var(--dm-accent); } html.dark-mode .ep-type-tag { background-color: var(--dm-bg-3) !important; color: var(--dm-text) !important; } /* ── Bootstrap contextual table rows ────────────────────────────── */ html.dark-mode tr.bg-danger, html.dark-mode tr.bg-danger > td, html.dark-mode td.bg-danger { background-color: rgba(239, 68, 68, 0.15) !important; color: var(--dm-text) !important; } html.dark-mode tr.bg-success, html.dark-mode tr.bg-success > td, html.dark-mode td.bg-success { background-color: rgba(34, 197, 94, 0.1) !important; color: var(--dm-text) !important; } html.dark-mode tr.bg-warning, html.dark-mode tr.bg-warning > td, html.dark-mode td.bg-warning { background-color: rgba(234, 179, 8, 0.15) !important; color: var(--dm-text) !important; } /* hover — перебиваємо !important на td через специфічніший селектор */ html.dark-mode .table tbody tr:hover > td.bg-danger, html.dark-mode .table tbody tr.bg-danger:hover > td { background-color: #311e2e !important; } html.dark-mode .table tbody tr:hover > td.bg-success, html.dark-mode .table tbody tr.bg-success:hover > td { background-color: #182f36 !important; } html.dark-mode .table tbody tr:hover > td.bg-warning, html.dark-mode .table tbody tr.bg-warning:hover > td { background-color: #37352b !important; } /* ── form-control-line (cancel form input) ───────────────────────── */ html.dark-mode .form-control-line { background-color: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; color: var(--dm-text) !important; } html.dark-mode .form-control-line:focus { background-color: var(--dm-input-bg) !important; border-color: var(--dm-accent) !important; color: var(--dm-text) !important; outline: none; box-shadow: 0 0 0 2px rgba(49,110,179,.3); } /* ── immunizations detail rows ──────────────────────────────────── */ html.dark-mode .imm-muted { color: var(--dm-text-muted) !important; } html.dark-mode .imm-detail-cell { background: var(--dm-bg-2) !important; border-top-color: var(--dm-border) !important; } html.dark-mode .imm-detail-label { color: var(--dm-text-muted) !important; } html.dark-mode .imm-protocol-item { background: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; } html.dark-mode .imm-protocol-title { color: var(--dm-text-muted) !important; } /* ── tree-preloader (service tree CSS spinner) ───────────────────── */ html.dark-mode .tree-preloader__ring { border-color: rgba(147,197,253,.12); border-top-color: #93c5fd; } html.dark-mode #ui-datepicker-div .ui-datepicker-title select.ui-datepicker-month, html.dark-mode #ui-datepicker-div .ui-datepicker-title select.ui-datepicker-year { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ── history-tabs ──────────────────────────────────────────────────── */ html.dark-mode .history-filters { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; border-left-color: var(--dm-accent) !important; box-shadow: none !important; } html.dark-mode .history-filters h4 { color: var(--dm-text) !important; } html.dark-mode .entity-card { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; box-shadow: none !important; } html.dark-mode .entity-header { background: var(--dm-bg-3) !important; border-bottom-color: var(--dm-border) !important; border-left-color: var(--dm-accent) !important; color: var(--dm-text) !important; } html.dark-mode .entity-header:hover { background: #2a3a52 !important; } html.dark-mode .entity-header h4 { color: var(--dm-text) !important; } html.dark-mode .entity-header h4 .fa { color: var(--dm-link-hover) !important; } html.dark-mode .entity-table thead { background: var(--dm-bg-3) !important; } html.dark-mode .entity-table th { color: var(--dm-text-muted) !important; border-bottom-color: var(--dm-border) !important; } html.dark-mode .entity-table td { color: var(--dm-text) !important; border-bottom-color: var(--dm-border) !important; } html.dark-mode .entity-table tr:hover { background: var(--dm-bg-3) !important; } html.dark-mode .patient-link, html.dark-mode .record-link { color: var(--dm-link-hover) !important; } html.dark-mode .patient-link:hover, html.dark-mode .record-link:hover { color: #bfdbfe !important; } html.dark-mode .date-time { color: var(--dm-text-muted) !important; } html.dark-mode .no-data { color: var(--dm-text-muted) !important; } html.dark-mode .loading-spinner { color: var(--dm-link-hover) !important; } html.dark-mode .load-more-btn { background: var(--dm-bg-3) !important; color: var(--dm-text) !important; border-color: var(--dm-border) !important; } html.dark-mode .load-more-btn:hover { background: #2a3a52 !important; border-color: var(--dm-accent) !important; } html.dark-mode .load-more-btn:disabled { background: var(--dm-bg-2) !important; color: var(--dm-text-muted) !important; border-color: var(--dm-border) !important; } html.dark-mode .hist-no-results { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; border-left-color: var(--dm-accent) !important; color: var(--dm-text-muted) !important; } /* status-badge dark overrides */ html.dark-mode .status-active, html.dark-mode .status-preliminary, html.dark-mode .status-in_progress { background: rgba(234,179,8,.18) !important; color: #dfc53b !important; } html.dark-mode .status-closed, html.dark-mode .status-finished, html.dark-mode .status-final, html.dark-mode .status-amended, html.dark-mode .status-completed { background: rgba(34,197,94,.15) !important; color: #86efac !important; } html.dark-mode .status-scheduled, html.dark-mode .status-new { background: rgba(37,99,235,.2) !important; color: #93c5fd !important; } html.dark-mode .status-entered_in_error, html.dark-mode .status-recalled, html.dark-mode .status-terminated, html.dark-mode .status-cancelled { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; } html.dark-mode .table-bordered tr:hover > td, html.dark-mode .table-bordered tr:hover > th { background-color: var(--dm-bg-3) !important; } html.dark-mode .border-1px { border: 1px solid var(--dm-border) !important; } /* ── select-division-kep: active division card ───────────────────────────── */ html.dark-mode .division-active-card { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important; } html.dark-mode .division-active-card__label { color: var(--dm-text-muted) !important; } html.dark-mode .division-active-card__name { color: var(--dm-text) !important; } /* ── login-password ──────────────────────────────────────────────── */ html.dark-mode .lp-card { background: var(--dm-bg-2) !important; box-shadow: 0 12px 32px rgba(0,0,0,0.35) !important; } html.dark-mode .lp-card__title { color: var(--dm-text) !important; } html.dark-mode .lp-card__subtitle { color: var(--dm-text-muted) !important; } html.dark-mode .lp-control-label { color: var(--dm-text-muted) !important; } html.dark-mode .lp-input, html.dark-mode .lp-input-left, html.dark-mode .lp-input-password { background: var(--dm-input-bg) !important; color: var(--dm-text) !important; border-color: var(--dm-input-border) !important; } html.dark-mode .lp-input[readonly], html.dark-mode .lp-input-left[readonly] { background: var(--dm-bg-3) !important; } html.dark-mode .lp-input::placeholder, html.dark-mode .lp-input-left::placeholder, html.dark-mode .lp-input-password::placeholder { color: var(--dm-text-muted) !important; opacity: 1; } html.dark-mode .lp-icon-btn { background: var(--dm-input-bg) !important; border-color: var(--dm-input-border) !important; } html.dark-mode .lp-icon-btn:hover, html.dark-mode .lp-icon-btn:focus { background: var(--dm-bg-3) !important; } html.dark-mode .lp-icon-btn .fa { color: var(--dm-text-muted) !important; } html.dark-mode .btn.lp-btn-submit { background: linear-gradient(135deg, #1a5cb8, #2563ab) !important; } html.dark-mode .btn.lp-btn-submit:hover, html.dark-mode .btn.lp-btn-submit:focus { background: linear-gradient(135deg, #2563ab, #3b82f6) !important; } html.dark-mode .lp-forgot-link { color: var(--dm-link-hover) !important; } html.dark-mode .lp-info-block { background: var(--dm-bg-2) !important; } html.dark-mode .lp-info-block--accent { border-left-color: var(--dm-accent) !important; } html.dark-mode .lp-info-icon--blue { background: rgba(49,110,179,0.2) !important; color: var(--dm-link-hover) !important; } html.dark-mode .lp-info-icon--cyan { background: rgba(74,96,122,0.25) !important; color: var(--dm-text-muted) !important; } html.dark-mode .lp-info-block__title { color: var(--dm-text) !important; } html.dark-mode .lp-info-block__text { color: var(--dm-text-muted) !important; } html.dark-mode .lp-step__num { background: rgba(49,110,179,0.2) !important; color: var(--dm-link-hover) !important; } html.dark-mode .lp-step__text { color: var(--dm-text-muted) !important; } html.dark-mode .lp-legal { color: var(--dm-text-muted) !important; } html.dark-mode .division-active-card__addr { color: var(--dm-text-muted) !important; } html.dark-mode .division-active-card__sep { color: var(--dm-border) !important; } html.dark-mode .division-active-card__inline-meta { color: var(--dm-text-muted) !important; } html.dark-mode .btn-toggle-divisions { background: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .btn-toggle-divisions:hover { background: #2a3a52 !important; } /* ── select-division-kep: division list ──────────────────────────────────── */ html.dark-mode .div-list { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; box-shadow: none !important; } html.dark-mode .div-row { background: var(--dm-bg-2) !important; border-bottom-color: var(--dm-border) !important; } html.dark-mode .div-row:hover { background: var(--dm-bg-3) !important; } html.dark-mode .div-row--active { background: rgba(43,95,173,0.18) !important; } html.dark-mode .div-row--active:hover { background: rgba(43,95,173,0.26) !important; } html.dark-mode .div-row__num { background: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } html.dark-mode .div-row--active .div-row__num { background: var(--dm-accent) !important; color: #fff !important; } html.dark-mode .div-row__name { color: var(--dm-text) !important; } html.dark-mode .div-row__addr { color: var(--dm-text-muted) !important; } html.dark-mode .div-row__badge { background: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } html.dark-mode .div-row__badge--spec { background: rgba(37,99,235,0.18) !important; color: #93c5fd !important; } html.dark-mode .div-row__badge--time { background: rgba(34,197,94,0.12) !important; color: #86efac !important; } html.dark-mode .div-row__date { color: var(--dm-text-muted) !important; } /* ── select-division-kep: 2FA block ─────────────────────────────────────── */ html.dark-mode .twofa-block { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; } html.dark-mode .twofa-block__title { color: var(--dm-text) !important; } html.dark-mode .twofa-block__desc { color: var(--dm-text-muted) !important; } html.dark-mode .btn-2fa-kep { background: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } html.dark-mode .btn-2fa-email { background: var(--dm-bg-3) !important; border-color: var(--dm-accent) !important; color: var(--dm-link-hover) !important; } html.dark-mode .twofa-skip-notice { border-top-color: var(--dm-border) !important; } html.dark-mode .twofa-skip-notice p { color: var(--dm-text-muted) !important; } html.dark-mode .twofa-report-link { color: var(--dm-text-muted) !important; } html.dark-mode .twofa-logout-link { color: var(--dm-text-muted) !important; } /* ── select-division-kep: email 2FA modal ────────────────────────────────── */ html.dark-mode .code-input-wrap input { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .code-input-wrap input:focus { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 3px rgba(49,110,179,0.3) !important; } /* ── #modal_sign (eusign КЕП modal) ─────────────────────────────────────── */ html.dark-mode #modal_sign .modal-body { background-color: var(--dm-bg-2) !important; color: var(--dm-text) !important; } html.dark-mode #modal_sign label, html.dark-mode #modal_sign h1, html.dark-mode #modal_sign h5, html.dark-mode #modal_sign h6 { color: var(--dm-text) !important; } html.dark-mode #modal_sign .TextField, html.dark-mode #modal_sign input[type="text"], html.dark-mode #modal_sign input[type="password"] { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode #modal_sign .TextField:disabled, html.dark-mode #modal_sign input[type="text"]:disabled, html.dark-mode #modal_sign input[type="password"]:disabled { background-color: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } html.dark-mode #modal_sign .Select, html.dark-mode #modal_sign select { background-color: var(--dm-input-bg) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode #modal_sign .SplitLine { border-color: var(--dm-border) !important; background-color: var(--dm-border) !important; } html.dark-mode #modal_sign .InfoBlock { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; } html.dark-mode #modal_sign .typeLink { color: var(--dm-text) !important; } html.dark-mode #modal_sign #statusLabel { color: var(--dm-text-muted) !important; } html.dark-mode #modal_sign #dimmerViewMessageLabel { color: var(--dm-text) !important; } /* blockUI overlay that eusign uses */ html.dark-mode .blockOverlay { background: rgba(15, 23, 42, 0.75) !important; } html.dark-mode #modal_sign .Arrow { border: solid #b3b3b3; border-width: 0 3px 3px 0; } html.dark-mode .bdp-recent { background-color: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html.dark-mode .bdp-recent-item { background-color: var(--dm-bg-3) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } /* ── Autofill / browser autocomplete ─────────────────────────────────────── */ html.dark-mode input:-webkit-autofill, html.dark-mode input:-webkit-autofill:hover, html.dark-mode input:-webkit-autofill:focus, html.dark-mode input:-webkit-autofill:active, html.dark-mode textarea:-webkit-autofill, html.dark-mode textarea:-webkit-autofill:hover, html.dark-mode textarea:-webkit-autofill:focus, html.dark-mode select:-webkit-autofill, html.dark-mode select:-webkit-autofill:hover, html.dark-mode select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--dm-input-bg) inset !important; box-shadow: 0 0 0 1000px var(--dm-input-bg) inset !important; -webkit-text-fill-color: var(--dm-text) !important; caret-color: var(--dm-text) !important; border-color: var(--dm-border) !important; transition: background-color 9999s ease-in-out 0s; } html.dark-mode .mc-badge--final, html.dark-mode .cp-badge--active { background: #b7ddca; color: #065f46; } html.dark-mode .mc-badge--preliminary, html.dark-mode .cp-badge--new { background: #e3dab2; color: #92400e; } html.dark-mode .mc-badge--entered_in_error, html.dark-mode .cp-badge--terminated { background: #dbc4c4; color: #991b1b; } html.dark-mode .cp-badge--completed { background: #b7ddca; color: #065f46; } html.dark-mode .btn-login-icon { background-color: var(--dm-bg-3) !important; } /* -- lp error state dark mode ----------------------------------------------- */ html.dark-mode .lp-card .has-error .lp-input, html.dark-mode .lp-card .has-error .lp-input-left, html.dark-mode .lp-card .has-error .lp-input-password, html.dark-mode .lp-card .has-error .lp-icon-btn { background: rgba(185,28,28,0.15) !important; } html.dark-mode .lp-card .has-error .lp-control-label { color: #fca5a5 !important; } html.dark-mode .lp-card .has-error .help-block { color: #fca5a5 !important; } /* -- lp error state dark mode ----------------------------------------------- */ html.dark-mode .lp-card .has-error .lp-input, html.dark-mode .lp-card .has-error .lp-input-left, html.dark-mode .lp-card .has-error .lp-input-password, html.dark-mode .lp-card .has-error .lp-icon-btn { background: rgba(185,28,28,0.15) !important; } html.dark-mode .lp-card .has-error .lp-control-label { color: #fca5a5 !important; } html.dark-mode .lp-card .has-error .help-block { color: #fca5a5 !important; } /* -- Active vs readonly distinction (dark mode) ------------------------------ */ html.dark-mode .lp-input, html.dark-mode .lp-input-password { background: var(--dm-input-bg) !important; border: 1.5px solid var(--dm-input-border) !important; } html.dark-mode .lp-input-password { border-right: none !important; } html.dark-mode #lp-toggle-password { background: var(--dm-input-bg) !important; border: 1.5px solid var(--dm-input-border) !important; border-left: none !important; } html.dark-mode #lp-toggle-password:hover, html.dark-mode #lp-toggle-password:focus { background: var(--dm-bg-3) !important; } html.dark-mode .lp-input-left { background: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } /* -- Active vs readonly distinction (dark mode) ------------------------------ */ html.dark-mode .lp-input, html.dark-mode .lp-input-password { background: var(--dm-input-bg) !important; border: 1.5px solid var(--dm-input-border) !important; } html.dark-mode .lp-input-password { border-right: none !important; } html.dark-mode #lp-toggle-password { background: var(--dm-input-bg) !important; border: 1.5px solid var(--dm-input-border) !important; border-left: none !important; } html.dark-mode #lp-toggle-password:hover, html.dark-mode #lp-toggle-password:focus { background: var(--dm-bg-3) !important; } html.dark-mode .lp-input-left { background: var(--dm-bg-3) !important; color: var(--dm-text-muted) !important; } html.dark-mode .role-card { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; box-shadow: none !important; } html.dark-mode .role-card__org { color: var(--dm-text-muted) !important; } /* ── sc-* selector modal ─────────────────────────────────────────── */ html.dark-mode .sc-wrap { border-color: #334155; } html.dark-mode .sc-col { border-right-color: #334155; } html.dark-mode .sc-col--selected { background: #1e293b; } html.dark-mode .sc-col-head { background: #1e293b; border-bottom-color: #334155; color: #94a3b8; } html.dark-mode .sc-ep-item { border-bottom-color: #1e293b; color: #cbd5e1; } html.dark-mode .sc-ep-item:hover { background: #1e3a5f; } html.dark-mode .sc-ep-item.active { background: var(--dm-bg-3); color: #fff; } html.dark-mode .sc-ep-date { color: #64748b; } html.dark-mode .sc-ep-badge--active { background: rgba(22,163,74,.2); color: #86efac; } html.dark-mode .sc-ep-badge--closed { background: rgba(37,99,171,.25); color: #93c5fd; } html.dark-mode .sc-ep-badge--error { background: rgba(220,38,38,.2); color: #fca5a5; } html.dark-mode .sc-ep-pager, html.dark-mode .sc-item-pager { background: #1e293b; border-top-color: #334155; color: #94a3b8; } html.dark-mode .sc-ep-pager button, html.dark-mode .sc-item-pager button { background: #253550; border-color: #334155; color: #94a3b8; } html.dark-mode .sc-ep-pager button:hover, html.dark-mode .sc-item-pager button:hover { background: #1e3a5f; border-color: #3b82f6; color: #93c5fd; } html.dark-mode .sc-ep-sections { border-bottom-color: #334155; } html.dark-mode .sc-ep-section { background: #1a2236; color: #94a3b8; border-bottom-color: #334155; } html.dark-mode .sc-ep-section:hover { background: #1e3a5f; color: #93c5fd; } html.dark-mode .sc-ep-section.active { background: var(--dm-bg-3); color: #fff; } html.dark-mode .sc-item-filter { background: #1e293b; border-bottom-color: #334155; } html.dark-mode .sc-item-filter input { background: #253550; border-color: #334155; color: #cbd5e1; } html.dark-mode .sc-item-filter input:focus { border-color: #3b82f6; } html.dark-mode .sc-type-filter { background: #253550; border-color: #334155; color: #cbd5e1; } html.dark-mode .sc-item { border-bottom-color: #1e293b; color: #cbd5e1; } html.dark-mode .sc-item:hover { background: #1e3a5f; } html.dark-mode .sc-item.selected { background: rgba(22,163,74,.1); } html.dark-mode .sc-item-type { background: rgba(37,99,171,.3); color: #93c5fd; } html.dark-mode .sc-item-type--mkf { background: rgba(133,77,14,.3); color: #fcd34d; border-color: rgba(253,230,138,.25); } html.dark-mode .sc-item-type--episode { background: rgba(124,58,237,.25); color: #c4b5fd; } html.dark-mode .sc-item-type--condition { background: rgba(7,89,133,.25); color: #7dd3fc; } html.dark-mode .sc-item-type--observation{ background: rgba(30,64,175,.25); color: #93c5fd; } html.dark-mode .sc-item-type--allergy { background: rgba(154,52,18,.25); color: #fdba74; } html.dark-mode .sc-item-type--immunization{ background: rgba(22,101,52,.25); color: #86efac; } html.dark-mode .sc-item-type--impression { background: rgba(17,94,89,.25); color: #5eead4; } html.dark-mode .sc-item-type--specimen { background: rgba(146,64,14,.25); color: #fde68a; } html.dark-mode .sc-item-type--device { background: rgba(51,65,85,.3); color: #94a3b8; border-color: #334155; } html.dark-mode .sc-item-type--procedure { background: rgba(91,33,182,.25); color: #c4b5fd; } html.dark-mode .sc-item-type--referral { background: rgba(6,95,70,.25); color: #6ee7b7; } html.dark-mode .sc-item-type--recipe { background: rgba(7,89,133,.25); color: #7dd3fc; } html.dark-mode .sc-sel-item { border-bottom-color: #1e293b; color: #cbd5e1; } html.dark-mode .sc-sel-item:hover { background: rgba(220,38,38,.1); } html.dark-mode .sc-col-body { scrollbar-color: #334155 #1e293b; } html.dark-mode .sc-empty { color: #475569; } /* ─── Datalist Polyfill — dark mode ─────────────────────────────────────── */ html.dark-mode .dl-toggle { color: #64748b; } html.dark-mode .dl-toggle:hover { color: #93c5fd; } html.dark-mode .dl-dropdown { background: #1e2a3a; border-color: #334155; box-shadow: 0 4px 16px rgba(0,0,0,.4); } html.dark-mode .dl-hint { color: #64748b; border-bottom-color: #2d3f55; } html.dark-mode .dl-group { color: #60a5fa; background: #162032; border-bottom-color: #2d3f55; } html.dark-mode .dl-item { color: #cbd5e1; border-bottom-color: #243347; } html.dark-mode .dl-item:hover { background: rgba(96,165,250,.1); color: #e2e8f0; } html.dark-mode .dl-item--custom { color: #6ee7b7; } html.dark-mode .dl-item__remove { color: #475569; } html.dark-mode .dl-item__remove:hover { color: #f87171; } html.dark-mode .enc-cancel-card { background: var(--dm-bg-2) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; }