/* ================================================================ HWC VoIP Console – Dark Mode Applied when is set. RULE: Brand blues (navbar, rail) stay UNCHANGED. Only content backgrounds go dark, text inverts to light. ================================================================ */ [data-theme="dark"] { color-scheme: dark; } /* ── Base colors ── */ [data-theme="dark"] body { background-color: #0a1628; color: #dee2e6; background-image: radial-gradient(ellipse 80% 60% at 70% 30%, rgba(0,87,184,0.18) 0%, transparent 70%); background-attachment: fixed; } /* ── Navbar and rail keep their original blue colors in dark mode ── */ /* (No overrides — they stay as the default --hwc-blue-dark and --hwc-blue) */ /* ── Content area bg ── */ [data-theme="dark"] .hwc-content { background-color: transparent; } /* ── Cards, modals, dropdowns, offcanvas ── */ [data-theme="dark"] .card, [data-theme="dark"] .modal-content, [data-theme="dark"] .dropdown-menu, [data-theme="dark"] .offcanvas { background-color: rgba(15, 25, 45, 0.85); border-color: rgba(255,255,255,0.08); color: #dee2e6; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } [data-theme="dark"] .dropdown-item { color: #dee2e6; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: #2c3034; color: #fff; } [data-theme="dark"] .card-header { background-color: #2c3034; border-color: #343a40; } /* ── Tables ── */ [data-theme="dark"] .table { --bs-table-bg: rgba(10, 22, 40, 0.6); --bs-table-color: #dee2e6; --bs-table-border-color: rgba(255,255,255,0.08); --bs-table-striped-bg: rgba(15, 30, 55, 0.5); --bs-table-hover-bg: rgba(0, 87, 184, 0.15); color: #dee2e6; border-color: rgba(255,255,255,0.08); } [data-theme="dark"] .table thead th, [data-theme="dark"] .table-light th, [data-theme="dark"] .table-light td { background-color: #2c3034 !important; border-color: #343a40; color: #adb5bd; } [data-theme="dark"] .table td, [data-theme="dark"] .table th { border-color: #343a40; color: #dee2e6; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #2c3034; color: #dee2e6; } [data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: #323539; color: #dee2e6; } /* Click-row tables — ensure text is readable */ [data-theme="dark"] .click-row td, [data-theme="dark"] .click-row td a { color: #dee2e6; } [data-theme="dark"] .click-row:hover { background-color: rgba(108, 166, 255, 0.08) !important; } [data-theme="dark"] .click-row td a { text-decoration: none; } /* ── Forms ── */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #2c3034; border-color: #495057; color: #dee2e6; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #343a40; border-color: #258cfb; color: #fff; box-shadow: 0 0 0 0.1rem #1a1d21, 0 0 0 0.25rem #258cfb; } [data-theme="dark"] .form-control::placeholder { color: #6c757d; } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background-color: #212529; color: #8a9199; } [data-theme="dark"] .form-check-input { background-color: #2c3034; border-color: #495057; } [data-theme="dark"] .form-check-input:checked { background-color: #258cfb; border-color: #258cfb; } [data-theme="dark"] .form-check-label { color: #dee2e6; } [data-theme="dark"] .input-group-text { background-color: #343a40; border-color: #495057; color: #dee2e6; } [data-theme="dark"] label, [data-theme="dark"] .form-label { color: #dee2e6; } [data-theme="dark"] .form-text { color: #8a9199 !important; } /* ── Alerts ── */ [data-theme="dark"] .alert-success { background-color: #1a3a2a; border-color: #2d6a4f; color: #95d5b2; } [data-theme="dark"] .alert-danger { background-color: #3a1a1a; border-color: #6a2d2d; color: #d5959a; } [data-theme="dark"] .alert-warning { background-color: #3a351a; border-color: #6a5f2d; color: #d5cb95; } [data-theme="dark"] .alert-info { background-color: #1a2e3a; border-color: #2d536a; color: #95c0d5; } [data-theme="dark"] .alert-info a { color: #6ea8fe; } /* ── Badges ── */ [data-theme="dark"] .badge.bg-light { background-color: #343a40 !important; color: #dee2e6 !important; } [data-theme="dark"] .badge.bg-secondary { background-color: #495057 !important; } /* ── Buttons ── */ [data-theme="dark"] .btn-outline-secondary { color: #adb5bd; border-color: #495057; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #495057; color: #fff; } [data-theme="dark"] .btn-outline-primary { color: #6ea8fe; border-color: #6ea8fe; } [data-theme="dark"] .btn-outline-primary:hover { background-color: #258cfb; color: #fff; } [data-theme="dark"] .btn-light { background-color: #343a40; border-color: #495057; color: #dee2e6; } [data-theme="dark"] .btn-light:hover { background-color: #495057; color: #fff; } [data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } /* ── Pagination ── */ [data-theme="dark"] .page-link { background-color: #212529; border-color: #343a40; color: #258cfb; } [data-theme="dark"] .page-link:hover { background-color: #2c3034; color: #4da3fb; } [data-theme="dark"] .page-item.active .page-link { background-color: #258cfb; border-color: #258cfb; } [data-theme="dark"] .page-item.disabled .page-link { background-color: #1a1d21; border-color: #343a40; color: #6c757d; } /* ── Breadcrumbs ── */ [data-theme="dark"] .breadcrumb { background-color: #212529; } [data-theme="dark"] .breadcrumb-item a { color: #258cfb; } [data-theme="dark"] .breadcrumb-item.active { color: #adb5bd; } /* ── Links ── */ [data-theme="dark"] a { color: #6ea8fe; } [data-theme="dark"] a:hover { color: #9ec5fe; } /* Keep rail/nav links white — don't apply dark link color */ [data-theme="dark"] .hwc-rail a, [data-theme="dark"] .hwc-navbar a { color: inherit; } /* ── Nav tabs & pills ── */ [data-theme="dark"] .nav-tabs { border-color: #343a40; } [data-theme="dark"] .nav-tabs .nav-link { color: #adb5bd; } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: #212529; border-color: #343a40 #343a40 #212529; color: #fff; } [data-theme="dark"] .nav-tabs .nav-link:hover:not(.active) { border-color: #495057 #495057 #343a40; color: #dee2e6; } /* ── List groups ── */ [data-theme="dark"] .list-group-item { background-color: #212529; border-color: #343a40; color: #dee2e6; } [data-theme="dark"] .list-group-item.active { background-color: #258cfb; border-color: #258cfb; } /* ── Footer ── */ [data-theme="dark"] footer.footer { background-color: #212529 !important; border-color: #343a40 !important; color: #6c757d; } /* ── Misc Bootstrap utilities ── */ [data-theme="dark"] .bg-white { background-color: #212529 !important; } [data-theme="dark"] .bg-light { background-color: #2c3034 !important; } [data-theme="dark"] .text-muted { color: #8a9199 !important; } [data-theme="dark"] .text-dark { color: #dee2e6 !important; } [data-theme="dark"] .text-body { color: #dee2e6 !important; } [data-theme="dark"] .border { border-color: #343a40 !important; } [data-theme="dark"] .border-top { border-color: #343a40 !important; } [data-theme="dark"] .border-bottom { border-color: #343a40 !important; } [data-theme="dark"] hr { border-color: #343a40; opacity: .5; } /* ── Headings ── */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 { color: #f8f9fa; } /* ── Paragraphs and general text ── */ [data-theme="dark"] p, [data-theme="dark"] span:not(.badge), [data-theme="dark"] li, [data-theme="dark"] div:not(.hwc-rail):not(.hwc-navbar) { color: inherit; } /* ── Code blocks ── */ [data-theme="dark"] pre, [data-theme="dark"] code { background-color: #2c3034; color: #e9ecef; } /* ── Accordion ── */ [data-theme="dark"] .accordion-item { background-color: #212529; border-color: #343a40; } [data-theme="dark"] .accordion-button { background-color: #2c3034; color: #dee2e6; } [data-theme="dark"] .accordion-button:not(.collapsed) { background-color: #2c5f9e; color: #fff; } [data-theme="dark"] .accordion-button::after { filter: invert(1); } /* ── Theme toggle button ── */ .theme-toggle { background: none; border: none; color: #fff; font-size: 1.125rem; padding: .25rem .5rem; cursor: pointer; opacity: .85; transition: opacity .15s; } .theme-toggle:hover { opacity: 1; } /* ── Validation summary in dark ── */ [data-theme="dark"] .validation-summary-errors { color: #d5959a; } [data-theme="dark"] .field-validation-error { color: #d5959a; } /* ── Toasts ── */ [data-theme="dark"] .toast { background-color: #2c3034; border-color: #343a40; color: #dee2e6; } /* ── Tenant picker in navbar (keep readable) ── */ [data-theme="dark"] .hwc-navbar .form-select { background-color: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.25); color: #fff; } [data-theme="dark"] .hwc-navbar .form-select option { background-color: #212529; color: #dee2e6; } /* ── Bordered containers in forms ── */ [data-theme="dark"] .border.rounded { border-color: #495057 !important; background-color: #212529; } /* ── fw-semibold links in tables (user email etc) ── */ [data-theme="dark"] td .fw-semibold, [data-theme="dark"] td .fw-semibold a, [data-theme="dark"] td a.text-decoration-none { color: #6ea8fe !important; } /* ── Compact body sections ── */ [data-theme="dark"] .compact-body { color: #dee2e6; } /* ── Scrollbar styling for dark ── */ [data-theme="dark"] ::-webkit-scrollbar { width: 8px; height: 8px; } [data-theme="dark"] ::-webkit-scrollbar-track { background: #1a1d21; } [data-theme="dark"] ::-webkit-scrollbar-thumb { background: #495057; border-radius: 4px; } [data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #6c757d; } /* ── Device icons on Extensions page ── */ [data-theme="dark"] .device-icon-desk { background: rgba(13, 110, 253, 0.2); color: #6ea8fe; } [data-theme="dark"] .device-icon-mobile { background: rgba(25, 135, 84, 0.2); color: #75b798; } [data-theme="dark"] .contact-uri { color: #adb5bd; } /* ── Status dots — ensure bright on dark bg ── */ [data-theme="dark"] .status-dot.bg-success { background-color: #198754 !important; box-shadow: 0 0 4px rgba(25, 135, 84, 0.5); } [data-theme="dark"] .status-dot.bg-danger { background-color: #dc3545 !important; box-shadow: 0 0 4px rgba(220, 53, 69, 0.5); } /* ── Bootstrap Icons in content area ── */ [data-theme="dark"] .hwc-content .bi, [data-theme="dark"] .hwc-content [class^="bi-"], [data-theme="dark"] .hwc-content [class*=" bi-"] { color: #dee2e6; } /* ── Device sub-table borders ── */ [data-theme="dark"] .device-table td { border-color: #343a40; }