/* ============================================================= DARK MODE OVERRIDES — works with theme-default.css Applied when has class="dark-mode" ============================================================= */ /* ── CSS Variables ─────────────────────────────────────────── */ html.dark-style { --dm-bg-body: #1a1a2e; --dm-bg-card: #16213e; --dm-bg-menu: #0f3460; --dm-bg-navbar: #16213e; --dm-bg-footer: #16213e; --dm-bg-input: #1e2a45; --dm-text-primary: #e0e0e0; --dm-text-muted: #9ba7b4; --dm-text-heading: #ffffff; --dm-border: rgba(255, 255, 255, 0.08); --dm-hover-bg: rgba(255, 255, 255, 0.06); --dm-shadow: rgba(0, 0, 0, 0.5); --dm-accent: #D2042D; --dm-accent-soft: rgba(210, 4, 45, 0.18); } /* ── Body & Layout ─────────────────────────────────────────── */ html.dark-style body, html.dark-style .bg-body { background-color: var(--dm-bg-body) !important; color: var(--dm-text-primary) !important; } html.dark-style .layout-page, html.dark-style .content-wrapper { background-color: var(--dm-bg-body) !important; } html.dark-style .layout-navbar-fixed .layout-page:before { background: rgba(26, 26, 46, 0.7) !important; } /* Prevent DataTables row repaint flash in dark mode */ html.dark-style table.dataTable tbody tr, html.dark-style table.dataTable tbody td { background-color: #16213e !important; color: #e0e0e0 !important; } html.dark-style table.dataTable tbody tr:nth-child(odd) td { background-color: rgba(255, 255, 255, 0.025) !important; } html.dark-style table.dataTable.table-striped > tbody > tr.odd > * { box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.025) !important; } /* Kill Bootstrap table-striped CSS variable override in dark mode */ html.dark-style .table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255, 255, 255, 0.025); color: #e0e0e0; } /* Prevent the highlighted last-viewed row from flashing white */ html.dark-style tr[style*="background-color: #FFF3CD"] { background-color: rgba(255, 243, 205, 0.12) !important; } /* ── Cards ─────────────────────────────────────────────────── */ html.dark-style .stat-card { background: #2b2e3c; /* dark card */ box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4); } html.dark-style .stat-card__label { color: #aab3c5; } html.dark-style .stat-card__value { color: #e4e6ef; } html.dark-style .card { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 0.125rem 0.5rem var(--dm-shadow) !important; } html.dark-style .card-header, html.dark-style .card-footer { background-color: rgba(255, 255, 255, 0.03) !important; border-color: var(--dm-border) !important; } html.dark-style .card .alert-primary hr { background-color: var(--dm-accent) !important; } html.dark-style .card-comment { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 0.125rem 0.5rem var(--dm-shadow) !important; } /* ── Navbar ─────────────────────────────────────────────────── */ html.dark-style .bg-navbar-theme, html.dark-style .layout-navbar { background-color: var(--dm-bg-navbar) !important; color: var(--dm-text-muted) !important; box-shadow: 0 1px 0 var(--dm-border) !important; -webkit-backdrop-filter: none; backdrop-filter: none; } html.dark-style .bg-navbar-theme .navbar-brand, html.dark-style .bg-navbar-theme .navbar-brand a { color: var(--dm-text-heading) !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-nav > .nav > .nav-item > .nav-link { color: var(--dm-text-muted) !important; } html.dark-style .bg-navbar-theme .navbar-nav > .nav-link:hover, html.dark-style .bg-navbar-theme .navbar-nav > .nav-item > .nav-link:hover { color: var(--dm-text-heading) !important; } html.dark-style .bg-navbar-theme .navbar-nav .show > .nav-link, html.dark-style .bg-navbar-theme .navbar-nav .active > .nav-link, html.dark-style .bg-navbar-theme .navbar-nav .nav-link.active { color: var(--dm-text-heading) !important; } html.dark-style .navbar-detached { box-shadow: 0 0 0.375rem 0.25rem rgba(0, 0, 0, 0.3) !important; } html.dark-style .bg-navbar-theme .search-input-wrapper .search-input, html.dark-style .bg-navbar-theme .search-input-wrapper .search-toggler { background-color: var(--dm-bg-navbar) !important; color: var(--dm-text-muted) !important; } /* ── Sidebar / Menu ─────────────────────────────────────────── */ html.dark-style .bg-menu-theme, html.dark-style .layout-menu { background-color: var(--dm-bg-menu) !important; color: var(--dm-text-muted) !important; } html.dark-style .bg-menu-theme .menu-link, html.dark-style .bg-menu-theme .menu-horizontal-prev, html.dark-style .bg-menu-theme .menu-horizontal-next { color: #b0bec5 !important; } html.dark-style .bg-menu-theme .menu-link:hover, html.dark-style .bg-menu-theme .menu-link:focus { color: #ffffff !important; background-color: var(--dm-hover-bg) !important; } html.dark-style input:-webkit-autofill, html.dark-style input:-webkit-autofill:hover, html.dark-style input:-webkit-autofill:focus, html.dark-style textarea:-webkit-autofill, html.dark-style select:-webkit-autofill { -webkit-text-fill-color: #fff !important; transition: background-color 9999s ease-in-out 0s; box-shadow: 0 0 0px 1000px var(--dm-bg-card) inset !important; caret-color: #fff; } html.dark-style .bg-menu-theme .menu-text { color: var(--dm-text-heading) !important; } html.dark-style .bg-menu-theme .menu-header { color: rgba(255, 255, 255, 0.35) !important; } html.dark-style .bg-menu-theme .menu-header:before { background-color: rgba(255, 255, 255, 0.15) !important; } html.dark-style .bg-menu-theme hr, html.dark-style .bg-menu-theme .menu-divider { border-color: var(--dm-border) !important; } html.dark-style .bg-menu-theme .menu-inner > .menu-item.active > .menu-link { color: #ffffff !important; background-color: var(--dm-accent-soft) !important; } html.dark-style .bg-menu-theme .menu-inner > .menu-item.active:before { background: var(--dm-accent) !important; } html.dark-style .bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon { color: var(--dm-accent) !important; } html.dark-style .bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before { background-color: var(--dm-accent) !important; border-color: var(--dm-bg-menu) !important; } html.dark-style html:not(.layout-menu-collapsed) .bg-menu-theme .menu-inner .menu-item.open > .menu-link, html.dark-style .bg-menu-theme .menu-inner .menu-item .menu-link:not(.active):hover { background-color: var(--dm-hover-bg) !important; } html.dark-style .bg-menu-theme.menu-vertical { box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.4) !important; } html.dark-style .bg-menu-theme .menu-inner-shadow { background: linear-gradient(var(--dm-bg-menu) 41%, rgba(15, 52, 96, 0.11) 95%, rgba(15, 52, 96, 0)) !important; } html.dark-style .highlighted-row { background-color: rgba(210, 4, 45, 0.25) !important; } /* Menu toggle button */ html.dark-style .app-brand .layout-menu-toggle { background-color: var(--dm-accent) !important; border-color: var(--dm-bg-menu) !important; } /* ── Footer ─────────────────────────────────────────────────── */ html.dark-style .bg-footer-theme { background-color: var(--dm-bg-footer) !important; color: var(--dm-text-muted) !important; border-top: 1px solid var(--dm-border) !important; } html.dark-style .bg-footer-theme .footer-link { color: var(--dm-text-muted) !important; } html.dark-style .bg-footer-theme .footer-link:hover { color: var(--dm-text-heading) !important; } html.dark-style .bg-footer-theme .footer-text { color: var(--dm-text-primary) !important; } html.dark-style .layout-footer-fixed .content-footer { box-shadow: 0 0 0.375rem 0.25rem rgba(0, 0, 0, 0.3) !important; } /* ── Typography & Links ─────────────────────────────────────── */ 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(--dm-text-heading) !important; } html.dark-style p, html.dark-style span:not([class*="badge"]):not([class*="btn"]):not([class*="text-"]) { color: var(--dm-text-primary); } html.dark-style a { color: #e05a7a; } html.dark-style a:hover { color: #ff8fa3; } html.dark-style .text-muted, html.dark-style .text-body-secondary { color: var(--dm-text-muted) !important; } html.dark-style .text-body { color: var(--dm-text-primary) !important; } /* ── Tables ─────────────────────────────────────────────────── */ html.dark-style .table { color: var(--dm-text-primary); border-color: var(--dm-border); } html.dark-style .table th, html.dark-style .table td { border-color: var(--dm-border) !important; } html.dark-style .table thead th { background-color: rgba(255, 255, 255, 0.04); color: var(--dm-text-heading); } html.dark-style .table-hover tbody tr:hover td, html.dark-style .table-hover tbody tr:hover th { background-color: var(--dm-hover-bg); color: var(--dm-text-primary); } html.dark-style .table-striped tbody tr:nth-of-type(odd) td { background-color: rgba(255, 255, 255, 0.025); } html.dark-style .table-primary { --bs-table-bg: rgba(210, 4, 45, 0.12); --bs-table-striped-bg: rgba(210, 4, 45, 0.08); --bs-table-striped-color: #e0e0e0; --bs-table-hover-bg: rgba(210, 4, 45, 0.16); --bs-table-hover-color: #ffffff; color: #e0e0e0; border-color: rgba(210, 4, 45, 0.2); } /* ── Forms ──────────────────────────────────────────────────── */ html.dark-style .form-control, html.dark-style .form-select { background-color: var(--dm-bg-input) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--dm-text-primary) !important; } html.dark-style .form-control:focus, html.dark-style .form-select:focus { border-color: var(--dm-accent) !important; box-shadow: 0 0 0 0.2rem rgba(210, 4, 45, 0.2) !important; background-color: var(--dm-bg-input) !important; } html.dark-style .form-control::placeholder { color: rgba(155, 167, 180, 0.6) !important; } html.dark-style .input-group-text { background-color: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.12) !important; color: var(--dm-text-muted) !important; } html.dark-style .input-group:focus-within .form-control, html.dark-style .input-group:focus-within .input-group-text { border-color: var(--dm-accent) !important; } html.dark-style .form-label { color: var(--dm-text-primary) !important; } html.dark-style .form-floating > .form-control:focus ~ label, html.dark-style .form-floating > .form-control:not(:placeholder-shown) ~ label, html.dark-style .form-floating > .form-select ~ label { color: var(--dm-accent) !important; } html.dark-style .form-check-input { background-color: var(--dm-bg-input) !important; border-color: rgba(255, 255, 255, 0.2) !important; } html.dark-style .form-check-input:checked { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; } html.dark-style .custom-option { border-color: var(--dm-border) !important; background-color: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; } html.dark-style .custom-option.checked { border-color: var(--dm-accent) !important; } /* ── Dropdowns ──────────────────────────────────────────────── */ html.dark-style .dropdown-menu { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4) !important; } html.dark-style .dropdown-item { color: var(--dm-text-primary) !important; } html.dark-style .dropdown-item:hover, html.dark-style .dropdown-item:focus { background-color: var(--dm-hover-bg) !important; color: var(--dm-text-heading) !important; } html.dark-style .dropdown-item:not(.disabled).active, html.dark-style .dropdown-item:not(.disabled):active { background-color: var(--dm-accent-soft) !important; color: #ffffff !important; } html.dark-style .dropdown-divider { border-color: var(--dm-border) !important; } html.dark-style .dropdown-header { color: var(--dm-text-muted) !important; } /* ── Modals ─────────────────────────────────────────────────── */ html.dark-style .modal-content { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html.dark-style .modal-header, html.dark-style .modal-footer { border-color: var(--dm-border) !important; } html.dark-style .modal-title { color: var(--dm-text-heading) !important; } html.dark-style .btn-close { filter: invert(1) !important; } /* ── Alerts ─────────────────────────────────────────────────── */ html.dark-style .alert { border-color: var(--dm-border) !important; } html.dark-style .alert-primary { background-color: var(--dm-accent-soft) !important; border-color: rgba(210, 4, 45, 0.3) !important; color: #ff8fa3 !important; } /* ── Badges ─────────────────────────────────────────────────── */ html.dark-style .badge.bg-label-primary { background-color: var(--dm-accent-soft) !important; color: #ff8fa3 !important; } /* ── List Groups ────────────────────────────────────────────── */ html.dark-style .list-group-item { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html.dark-style .list-group-item.active, html.dark-style .list-group-item.active:hover { background-color: var(--dm-accent) !important; border-color: var(--dm-accent) !important; color: #fff !important; } html.dark-style .list-group-item:hover { background-color: var(--dm-hover-bg) !important; } /* ── Nav & Pills ────────────────────────────────────────────── */ html.dark-style .nav-tabs { border-color: var(--dm-border) !important; } html.dark-style .nav-tabs .nav-link { color: var(--dm-text-muted) !important; } html.dark-style .nav-tabs .nav-link:hover { color: var(--dm-text-heading) !important; border-color: var(--dm-border) !important; } html.dark-style .nav-tabs .nav-link.active, html.dark-style .nav-tabs .nav-item.show .nav-link { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) var(--dm-border) var(--dm-bg-card) !important; color: var(--dm-text-heading) !important; } html.dark-style .nav-pills .nav-link { color: var(--dm-text-muted) !important; } html.dark-style .nav-pills .nav-link.active { background-color: var(--dm-accent) !important; color: #fff !important; } /* ── Pagination ─────────────────────────────────────────────── */ html.dark-style .page-link { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html.dark-style .page-link:hover { background-color: var(--dm-hover-bg) !important; color: var(--dm-text-heading) !important; } html.dark-style .page-item.disabled .page-link { background-color: rgba(255, 255, 255, 0.03) !important; color: var(--dm-text-muted) !important; } /* ── Toasts & Notifications ─────────────────────────────────── */ html.dark-style .toast { background-color: var(--dm-bg-card) !important; border-color: var(--dm-border) !important; color: var(--dm-text-primary) !important; } html.dark-style .toast-header { background-color: rgba(255, 255, 255, 0.04) !important; border-color: var(--dm-border) !important; color: var(--dm-text-heading) !important; } html.dark-style .dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span { background-color: var(--dm-accent) !important; } /* ── Dividers ───────────────────────────────────────────────── */ html.dark-style hr { border-color: var(--dm-border) !important; } html.dark-style .divider.divider-primary .divider-text:before, html.dark-style .divider.divider-primary .divider-text:after { border-color: var(--dm-accent) !important; } /* ── Misc ───────────────────────────────────────────────────── */ html.dark-style .border-primary { border-color: var(--dm-accent) !important; } html.dark-style .border { border-color: var(--dm-border) !important; } html.dark-style .bg-light { background-color: rgba(255, 255, 255, 0.05) !important; } html.dark-style .bg-white { background-color: var(--dm-bg-card) !important; } html.dark-style .shadow, html.dark-style .shadow-sm { box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.4) !important; } html.dark-style code { background-color: rgba(255, 255, 255, 0.08); color: #ff8fa3; } html.dark-style pre { background-color: rgba(0, 0, 0, 0.3) !important; color: #c8d3dc !important; border: 1px solid var(--dm-border); } /* ── Scrollbar Theming ──────────────────────────────────────── */ html.dark-style ::-webkit-scrollbar { width: 6px; height: 6px; } html.dark-style ::-webkit-scrollbar-track { background: var(--dm-bg-body); } html.dark-style ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; } html.dark-style ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.28); } /* ── Dark Mode Toggle Switch ────────────────────────────────── */ .dark-mode-toggle { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; user-select: none; } .dark-mode-toggle .toggle-icon { font-size: 1rem; transition: opacity 0.2s; } .dm-switch { position: relative; display: inline-block; width: 2.5rem; height: 1.35rem; flex-shrink: 0; } .dm-switch input { opacity: 0; width: 0; height: 0; position: absolute; } .dm-slider { position: absolute; inset: 0; background-color: #cdd1d8; border-radius: 1rem; transition: background-color 0.25s ease; cursor: pointer; } .dm-slider::before { content: ""; position: absolute; height: 1rem; width: 1rem; left: 0.175rem; bottom: 0.175rem; background-color: #fff; border-radius: 50%; transition: transform 0.25s ease; box-shadow: 0 1px 3px rgba(0,0,0,0.25); } .dm-switch input:checked + .dm-slider { background-color: #D2042D; } .dm-switch input:checked + .dm-slider::before { transform: translateX(1.15rem); } .dm-switch input:focus + .dm-slider { box-shadow: 0 0 0 0.15rem rgba(210, 4, 45, 0.25); } /* ===== DISPOSITION → EQUIPMENT STYLE (DARK) ===== */ html.dark-style .disposition-dropdown-wrapper .dropdown-toggle, html.dark-style .tele-disposition-wrapper .dropdown-toggle { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; border-radius: 6px; min-height: 38px; color: var(--dm-text-primary) !important; } html.dark-style .disposition-dropdown-wrapper .dropdown-menu, html.dark-style .tele-disposition-wrapper .dropdown-menu { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; border-radius: 8px; box-shadow: 0 0.25rem 0.75rem var(--dm-shadow) !important; } html.dark-style .disposition-dropdown-wrapper .form-check, html.dark-style .tele-disposition-wrapper .form-check { display: flex; gap: 6px; padding: 4px 0; } html.dark-style .disposition-dropdown-wrapper .form-check-label, html.dark-style .tele-disposition-wrapper .form-check-label { color: var(--dm-text-primary); } html.dark-style .disposition-dropdown-wrapper .form-check:hover, html.dark-style .tele-disposition-wrapper .form-check:hover { background-color: rgba(105, 108, 255, 0.15); border-radius: 6px; padding-left: 4px; } /* inputs same as equipment */ html.dark-style .disposition-dropdown-wrapper input, html.dark-style .tele-disposition-wrapper input { background-color: #2c2c3e; border-color: var(--dm-border); } html.dark-style .disposition-dropdown-wrapper input:checked, html.dark-style .tele-disposition-wrapper input:checked { background-color: #696cff; border-color: #696cff; } html.dark-style .disposition-display { background: var(--dm-bg-card); border: 1px solid var(--dm-border); color: var(--dm-text-primary); } html.dark-style .broker-disposition-display { background: var(--dm-bg-card); border: 1px solid var(--dm-border); color: var(--dm-text-primary); } html.dark-style .disposition-tag { background: rgba(105,108,255,0.15); border: 1px solid rgba(105,108,255,0.4); } html.dark-style .disposition-dropdown { background: var(--dm-bg-card); border: 1px solid var(--dm-border); } html.dark-style .disposition-dropdown .text-end { background: var(--dm-bg-card); border-top: 1px solid var(--dm-border); } html.dark-style .disposition-list label:hover { background-color: rgba(105,108,255,0.15); } /* ===== BROKER DISPOSITION (DARK) ===== */ html.dark-style .broker-disposition-display { background: var(--dm-bg-card); border: 1px solid var(--dm-border); color: var(--dm-text-primary); } /* TAGS */ html.dark-style .broker-disposition-tag { background: rgba(105,108,255,0.15); border: 1px solid rgba(105,108,255,0.4); color: var(--dm-text-primary); } /* DROPDOWN */ html.dark-style .disposition-container .disposition-dropdown { background: var(--dm-bg-card); border: 1px solid var(--dm-border); } /* FOOTER */ html.dark-style .disposition-container .disposition-dropdown .text-end { background: var(--dm-bg-card); border-top: 1px solid var(--dm-border); } /* HOVER */ html.dark-style .disposition-list label:hover { background-color: rgba(105,108,255,0.15); } /* CHECKBOX */ html.dark-style .disposition-container input:checked { background-color: #696cff; border-color: #696cff; } /* ===== EQUIPMENT DROPDOWN (DARK MODE) ===== */ html.dark-style .equipment-container .equipment-display { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; color: var(--dm-text-primary) !important; } html.dark-style .equipment-container .equipment-display.empty { color: #aaa; } html.dark-style .equipment-container .equipment-tag { background: rgba(105, 108, 255, 0.15); border: 1px solid rgba(105, 108, 255, 0.4); color: var(--dm-text-primary); } html.dark-style .equipment-container { background: var(--dm-bg-card) !important; border: 1px solid var(--dm-border) !important; } html.dark-style .equipment-dropdown { background: var(--dm-bg-card); border: 1px solid var(--dm-border); } html.dark-style .equipment-dropdown .text-end { background: var(--dm-bg-card); border-top: 1px solid var(--dm-border); } html.dark-style .equipment-container .equip-list label { color: var(--dm-text-primary); } html.dark-style .equipment-container .equip-list label:hover { background-color: rgba(105, 108, 255, 0.15); border-radius: 6px; padding-left: 4px; } html.dark-style .equipment-container .equip-list input[type="checkbox"] { background-color: #2c2c3e; border-color: var(--dm-border); } html.dark-style .equipment-container .equip-list input[type="checkbox"]:checked { background-color: #696cff; border-color: #696cff; } /* ══════════════════════════════════════════════ Broker Detail Modal — Dark Mode ══════════════════════════════════════════════ */ html.dark-style .broker-detail-avatar { background-color: #696cff; color: #fff; } html.dark-style .broker-detail-name { color: #cfd3ec; } html.dark-style .broker-detail-company { color: #7983bb; } html.dark-style .broker-detail-stat-card { background-color: rgba(105, 108, 255, 0.12); border-color: rgba(105, 108, 255, 0.25); } html.dark-style .broker-detail-stat-card .stat-label { color: #7983bb; } html.dark-style .broker-detail-stat-card .stat-value { color: #9396f5; } html.dark-style .broker-detail-stat-card .stat-icon { color: #9396f5; } html.dark-style .broker-detail-section-label { color: #7983bb; } html.dark-style .broker-detail-field-label { color: #7983bb; } html.dark-style .broker-detail-field-value { color: #cfd3ec; } html.dark-style .broker-detail-contact-row { color: #cfd3ec; } html.dark-style .broker-detail-contact-row i { color: #7983bb; } html.dark-style .broker-detail-tag.tag-equipment { background-color: rgba(105, 108, 255, 0.15); color: #9396f5; border-color: rgba(105, 108, 255, 0.3); } html.dark-style .broker-detail-tag.tag-state { background-color: rgba(3, 195, 236, 0.12); color: #03c3ec; border-color: rgba(3, 195, 236, 0.25); } html.dark-style .broker-detail-notes { background-color: rgba(255, 255, 255, 0.04); color: #7983bb; } html.dark-style .broker-detail-divider { border-color: rgba(255, 255, 255, 0.08); } /* ======================================== Dark Mode — Unread Filter Bar ======================================== */ /* Active "All Leads" pill (btn-secondary in dark) */ html.dark-style .unread-filter-bar .btn-secondary { background-color: var(--dm-bg-body, #3a3f4b); border-color: var(--dm-border, #4a5060); color: #fff; } html.dark-style .unread-filter-bar .btn-secondary:hover { background-color: var(--dm-bg-card, #2f3340); border-color: var(--dm-border, #4a5060); color: #fff; } /* Outline "All Leads" pill (btn-outline-secondary in dark) */ html.dark-style .unread-filter-bar .btn-outline-secondary { border-color: var(--dm-border, #4a5060); color: var(--dm-text-muted, #9ea5b5); } html.dark-style .unread-filter-bar .btn-outline-secondary:hover { background-color: var(--dm-bg-body, #3a3f4b); color: #fff; } /* Active "Unread Comments" pill (btn-danger in dark) */ html.dark-style .unread-filter-bar .btn-danger { background-color: #c0392b; border-color: #c0392b; color: #fff; } /* Outline "Unread Comments" pill (btn-outline-danger in dark) */ html.dark-style .unread-filter-bar .btn-outline-danger { border-color: #e74c3c; color: #e74c3c; } html.dark-style .unread-filter-bar .btn-outline-danger:hover { background-color: #c0392b; border-color: #c0392b; color: #fff; } /* Filter label in dark */ html.dark-style .unread-filter-bar .filter-label { color: var(--dm-text-muted, #9ea5b5); } /* Active "All Leads" — solid dark pill */ .unread-filter-bar .btn-dark { background-color: #2d3748; border-color: #2d3748; color: #fff; } .unread-filter-bar .btn-dark:hover { background-color: #1a202c; border-color: #1a202c; color: #fff; } html.dark-style .unread-filter-bar .btn-dark { background-color: var(--dm-bg-body, #3a3f4b); border-color: var(--dm-border, #4a5060); color: #fff; } html.dark-style .unread-filter-bar .btn-dark:hover { background-color: var(--dm-bg-card, #2f3340); border-color: var(--dm-border, #4a5060); color: #fff; } /* Inactive "All Leads" outline in dark */ html.dark-style .unread-filter-bar .btn-outline-secondary { border-color: var(--dm-border, #4a5060); color: var(--dm-text-muted, #9ea5b5); } html.dark-style .unread-filter-bar .btn-outline-secondary:hover { background-color: var(--dm-bg-body, #3a3f4b); color: #fff; } /* ===== Quick Nav Cards — Dark Mode ===== */ html.dark-style .section-title { color: var(--dm-text-muted) !important; } html.dark-style .nav-card { background: var(--dm-bg-card) !important; color: var(--dm-text-primary) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, .35) !important; border: 1px solid var(--dm-border); } html.dark-style .nav-card:hover { color: var(--dm-text-heading) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .5) !important; background: var(--dm-bg-menu) !important; } html.dark-style .nav-card__label { color: var(--dm-text-primary) !important; } html.dark-style .nav-card:hover .nav-card__label { color: var(--dm-text-heading) !important; }