/* * AWT Phone — theme variants * * Light variants (sky / lake / eggplant) tweak --bs-primary so accent colors * (buttons, active sidebar item, highlighted links) match the picked palette. * * Dark + high-contrast variants pair with [data-bs-theme="dark"] on * and override surface colors. high-contrast pushes contrast even further. */ /* ------- Global text contrast (light mode) ------- * Vuexy core.css defaults to very light body/muted text (#6d6b77 / #acaab1) * which fails AA contrast on white surfaces. Darken across the app while * leaving dark theme alone. */ :root:not([data-bs-theme="dark"]) { --bs-body-color: #2f2b3d; --bs-body-color-rgb: 47, 43, 61; --bs-secondary-color: #5d5a6f; --bs-secondary-color-rgb: 93, 90, 111; --bs-tertiary-color: rgba(47, 43, 61, 0.55); --bs-tertiary-color-rgb: 47, 43, 61; --bs-heading-color: #1f1c2c; } /* Bootstrap's .text-muted resolves to --bs-secondary-color above; also cover utility classes & small.text-muted used in tenant settings rows. */ :root:not([data-bs-theme="dark"]) .text-muted, :root:not([data-bs-theme="dark"]) small.text-muted { color: var(--bs-secondary-color) !important; } /* ------- Light variants ------- */ html.awt-theme-sky { --bs-primary: #25b9d6; --bs-primary-rgb: 37, 185, 214; --tal-sidebar-active-fg: #1f9bb4; --tal-sidebar-active-bg: rgba(37, 185, 214, 0.18); --tal-sidebar-hover-bg: rgba(37, 185, 214, 0.10); } html.awt-theme-lake { --bs-primary: #696cff; --bs-primary-rgb: 105, 108, 255; --tal-sidebar-active-fg: #696cff; --tal-sidebar-active-bg: rgba(105, 108, 255, 0.18); --tal-sidebar-hover-bg: rgba(105, 108, 255, 0.12); } html.awt-theme-eggplant { --bs-primary: #6f4ea8; --bs-primary-rgb: 111, 78, 168; --tal-sidebar-active-fg: #6f4ea8; --tal-sidebar-active-bg: rgba(111, 78, 168, 0.18); --tal-sidebar-hover-bg: rgba(111, 78, 168, 0.12); } /* ------- Dark variant ------- */ /* * Modern slate dark. Targets every concrete surface used by the agent * shell + settings tabs because a generic body/card override doesn't * reach `tal-content`, `awt-settings-content`, `awt-settings-rail`, * `tal-page-header`, etc. — those have hard-coded backgrounds in * tenant-agent-layout.css and tenant-settings.css. */ html.awt-theme-dark, html[data-bs-theme="dark"][data-awt-theme="dark"] { --bs-body-bg: #0b1220; --bs-body-color: #e2e8f0; --bs-secondary-bg: #1e293b; --bs-tertiary-bg: #111827; --bs-border-color: rgba(148, 163, 184, 0.18); --bs-primary: #60a5fa; --bs-primary-rgb: 96, 165, 250; --bs-secondary-color: #94a3b8; } /* Agent shell vars are scoped to .tenant-agent-layout in tenant-agent-layout.css. Re-define them at the same scope so the cascade actually picks them up. */ html.awt-theme-dark .tenant-agent-layout, html[data-bs-theme="dark"][data-awt-theme="dark"] .tenant-agent-layout { --tal-navbar-bg: #050b18; --tal-navbar-fg: #e2e8f0; --tal-content-bg: #0b1220; --tal-sidebar-bg: #050b18; --tal-sidebar-fg: #cbd5e1; --tal-sidebar-fg-muted: rgba(203, 213, 225, 0.55); --tal-sidebar-border: rgba(148, 163, 184, 0.14); --tal-sidebar-hover-bg: rgba(96, 165, 250, 0.14); --tal-sidebar-active-bg: rgba(96, 165, 250, 0.22); --tal-sidebar-active-fg: #93c5fd; } /* Top navbar: dark surface + light text for the search input + icons */ html.awt-theme-dark .tenant-agent-layout .tal-navbar { background-color: #050b18 !important; color: #e2e8f0; border-bottom: 1px solid rgba(148, 163, 184, 0.14); } html.awt-theme-dark .tenant-agent-layout .tal-navbar input, html.awt-theme-dark .tenant-agent-layout .tal-navbar .form-control { background: rgba(255, 255, 255, 0.06) !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; } html.awt-theme-dark .tenant-agent-layout .tal-navbar input::placeholder { color: rgba(226, 232, 240, 0.55); } html.awt-theme-dark .tenant-agent-layout .tal-navbar .btn, html.awt-theme-dark .tenant-agent-layout .tal-navbar a, html.awt-theme-dark .tenant-agent-layout .tal-navbar i { color: #e2e8f0; } /* Search-icon and any white-on-primary chips inside navbar */ html.awt-theme-dark .tenant-agent-layout .tal-navbar [class*="bg-white"] { background: rgba(255, 255, 255, 0.08) !important; color: #e2e8f0 !important; } /* Navbar action buttons (bell, phone, plus, avatar): * the light theme uses solid white circles on the primary navbar; in dark mode * those look out of place — switch them to a subtle elevated dark surface with * light icons that match the rest of the navbar. */ html.awt-theme-dark .tenant-agent-layout .tal-navbar-circle { background: rgba(255, 255, 255, 0.08) !important; color: #e2e8f0 !important; border: 1px solid rgba(255, 255, 255, 0.08); } html.awt-theme-dark .tenant-agent-layout .tal-navbar-circle:hover:not(:disabled):not([aria-disabled="true"]) { background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; } html.awt-theme-dark .tenant-agent-layout .tal-navbar-circle:disabled, html.awt-theme-dark .tenant-agent-layout .tal-navbar-circle[aria-disabled="true"] { color: rgba(226, 232, 240, 0.55) !important; } html.awt-theme-dark .tenant-agent-layout .tal-navbar-bell { color: #e2e8f0 !important; } html.awt-theme-dark .tenant-agent-layout .tal-navbar-bell:hover { background: rgba(255, 255, 255, 0.16); color: #ffffff !important; } html.awt-theme-dark .tenant-agent-layout .tal-navbar-avatar { background: rgba(255, 255, 255, 0.10); color: #e2e8f0; } html.awt-theme-dark body, html.awt-theme-dark .tenant-agent-layout { background-color: var(--bs-body-bg); color: var(--bs-body-color); } /* Agent shell surfaces */ html.awt-theme-dark .tal-content, html.awt-theme-dark .tal-content-inner, html.awt-theme-dark .tal-page, html.awt-theme-dark .tal-page-body { background-color: transparent !important; color: var(--bs-body-color); } html.awt-theme-dark .tal-page-header, html.awt-theme-dark.tal-page-settings .tal-page-header { background: var(--bs-secondary-bg) !important; color: var(--bs-body-color); border-color: var(--bs-border-color); } html.awt-theme-dark .tal-page-title, html.awt-theme-dark .tal-page-title h2, html.awt-theme-dark h1, html.awt-theme-dark h2, html.awt-theme-dark h3, html.awt-theme-dark h4, html.awt-theme-dark h5, html.awt-theme-dark h6 { color: var(--bs-body-color); } /* Settings rail (left "Settings" sidebar inside the page) */ html.awt-theme-dark .awt-settings-rail { background: var(--bs-secondary-bg); border-right: 1px solid var(--bs-border-color); } html.awt-theme-dark .awt-settings-rail .nav-link, html.awt-theme-dark .awt-settings-rail .admin-toggle { color: var(--bs-body-color); } html.awt-theme-dark .awt-settings-rail .nav-link:hover, html.awt-theme-dark .awt-settings-rail .admin-toggle:hover { background: rgba(96, 165, 250, 0.10); color: #93c5fd; } html.awt-theme-dark .awt-settings-rail .nav-link.active { background: rgba(96, 165, 250, 0.18); color: #93c5fd; } html.awt-theme-dark .awt-settings-header-rail, html.awt-theme-dark .awt-settings-header-content { background: var(--bs-secondary-bg) !important; color: var(--bs-body-color); border-color: var(--bs-border-color); } html.awt-theme-dark .awt-settings-header-content .tal-page-title, html.awt-theme-dark .awt-settings-header-content h1, html.awt-theme-dark .awt-settings-header-content h2 { color: var(--bs-body-color); } /* Settings content panel + section cards */ html.awt-theme-dark .awt-settings-content, html.awt-theme-dark .awt-settings-section, html.awt-theme-dark .awt-settings-section .card-body, html.awt-theme-dark .awt-settings-card { background: var(--bs-secondary-bg) !important; color: var(--bs-body-color); } html.awt-theme-dark .awt-settings-card .row-divider { border-color: var(--bs-border-color) !important; } html.awt-theme-dark .awt-settings-card .text-body, html.awt-theme-dark .awt-settings-nav-row .text-body { color: var(--bs-body-color) !important; } /* Generic Bootstrap surfaces */ html.awt-theme-dark .card, html.awt-theme-dark .modal-content, html.awt-theme-dark .dropdown-menu, html.awt-theme-dark .list-group-item, html.awt-theme-dark .accordion-item, html.awt-theme-dark .accordion-button { background-color: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color) !important; } html.awt-theme-dark .card-header, html.awt-theme-dark .card-footer { background-color: rgba(255, 255, 255, 0.03); border-color: var(--bs-border-color); color: var(--bs-body-color); } html.awt-theme-dark .bg-white, html.awt-theme-dark .bg-light, html.awt-theme-dark .bg-body, html.awt-theme-dark .bg-secondary-subtle, html.awt-theme-dark .bg-tertiary-bg { background-color: var(--bs-secondary-bg) !important; color: var(--bs-body-color) !important; } /* Dropdowns + items */ html.awt-theme-dark .dropdown-item { color: var(--bs-body-color); } html.awt-theme-dark .dropdown-item:hover, html.awt-theme-dark .dropdown-item:focus { background-color: rgba(96, 165, 250, 0.14); color: #ffffff; } /* Form controls — covers both Bootstrap (.form-control) and bare textarea/input. */ html.awt-theme-dark .form-control, html.awt-theme-dark .form-select, html.awt-theme-dark .input-group-text, html.awt-theme-dark textarea, html.awt-theme-dark input[type="text"]:not(.tal-search-input):not(.rc-form-input):not([class*="rc-"]):not(.awt-dialer-display input):not(.btn-close), html.awt-theme-dark input[type="email"], html.awt-theme-dark input[type="password"], html.awt-theme-dark input[type="search"]:not(.rc-contacts-search-input):not(.rc-call-search-input):not(.rc-fav-search-input):not(.tal-search-input):not(.rc-video-search-input), html.awt-theme-dark input[type="number"], html.awt-theme-dark input[type="tel"], html.awt-theme-dark input[type="url"] { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border-color: var(--bs-border-color) !important; } html.awt-theme-dark .form-control::placeholder, html.awt-theme-dark textarea::placeholder { color: rgba(226, 232, 240, 0.45); } html.awt-theme-dark .form-control:focus, html.awt-theme-dark .form-select:focus { border-color: #60a5fa; box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.18); } html.awt-theme-dark .form-label, html.awt-theme-dark .form-check-label { color: var(--bs-body-color); } /* Tables */ html.awt-theme-dark .table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); color: var(--bs-body-color); } html.awt-theme-dark .table> :not(caption)>*>* { background-color: transparent; color: var(--bs-body-color); border-bottom-color: var(--bs-border-color); } html.awt-theme-dark .table thead { background: rgba(255, 255, 255, 0.03); color: var(--bs-body-color); } /* Text helpers */ html.awt-theme-dark .text-muted, html.awt-theme-dark .text-secondary, html.awt-theme-dark small.text-muted { color: rgba(226, 232, 240, 0.62) !important; } html.awt-theme-dark .text-body, html.awt-theme-dark .text-dark { color: var(--bs-body-color) !important; } /* Borders */ html.awt-theme-dark .border, html.awt-theme-dark .border-bottom, html.awt-theme-dark .border-top, html.awt-theme-dark .border-end, html.awt-theme-dark .border-start { border-color: var(--bs-border-color) !important; } /* Buttons */ html.awt-theme-dark .btn-light { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } html.awt-theme-dark .btn-outline-secondary { color: var(--bs-body-color); border-color: var(--bs-border-color); } html.awt-theme-dark .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.05); color: #ffffff; } /* Section eyebrow (settings panels) */ html.awt-theme-dark .section-eyebrow, html.awt-theme-dark h6.section-eyebrow { color: rgba(226, 232, 240, 0.7) !important; } /* Reorder list (customize-tabs page) */ html.awt-theme-dark .awt-tab-reorder-item { background: var(--bs-tertiary-bg) !important; color: var(--bs-body-color); } html.awt-theme-dark .awt-tab-reorder-item:hover { background: rgba(96, 165, 250, 0.10) !important; } /* Modals + offcanvas */ html.awt-theme-dark .modal-header, html.awt-theme-dark .modal-footer, html.awt-theme-dark .offcanvas-header, html.awt-theme-dark .offcanvas { background-color: var(--bs-secondary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } /* Bootstrap's .btn-close uses a black SVG which is invisible on dark surfaces. */ html.awt-theme-dark .btn-close { filter: invert(1) grayscale(100%) brightness(2); } /* Form checkboxes/switches need a visible track + border on dark. */ html.awt-theme-dark .form-check-input { background-color: var(--bs-tertiary-bg); border-color: var(--bs-border-color); } html.awt-theme-dark .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } /* Text content / links readable on dark. `.awt-chip` is exempt for the same reason `.btn` is: a status chip CARRIES ITS STATE IN ITS COLOUR (green on, red off, red alert), and this rule out- specifies the chip's own colour — so every chip that is a link rather than a span turned the same light blue and the state was gone. That is not hypothetical: the "active" chips are links, so on dark they were blue rather than green. See _agent-status-chips.blade.php. */ html.awt-theme-dark a:not(.btn):not(.nav-link):not(.dropdown-item):not(.tal-sidebar-link):not(.awt-chip):not(.rc-call-edit) { color: #93c5fd; } /* ------- Operator phone tab (.rc-phone surfaces) ------- * operator-phone.css hard-codes #fff / #f1f3f5 / #495057 etc. across the * dialer, keypad, HUD pane and lists. Override the concrete classes so the * phone tab renders correctly in dark mode. */ html.awt-theme-dark .rc-phone, html.awt-theme-dark .rc-phone-left, html.awt-theme-dark .rc-phone-right, html.awt-theme-dark .rc-right-header, html.awt-theme-dark .rc-call-toolbar, html.awt-theme-dark .rc-call-searchbar, html.awt-theme-dark .rc-fav-search, html.awt-theme-dark .rc-call-editbar { background: var(--bs-secondary-bg) !important; color: var(--bs-body-color); border-color: var(--bs-border-color) !important; } html.awt-theme-dark .rc-phone-left { border-right: 1px solid var(--bs-border-color); } html.awt-theme-dark .rc-phone-left-header h5 { color: var(--bs-body-color); } html.awt-theme-dark .rc-icon-btn, html.awt-theme-dark .rc-right-actions .rc-icon-btn { color: var(--bs-body-color); background: transparent; } html.awt-theme-dark .rc-icon-btn:hover, html.awt-theme-dark .rc-right-actions .rc-icon-btn:hover, html.awt-theme-dark .rc-phone-left-header .rc-icon-btn:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /* Tabs row: Keypad / Calls / Voicemail / Notes */ html.awt-theme-dark .rc-phone-tabs.nav-tabs .nav-link { color: rgba(226, 232, 240, 0.7); background: transparent; } html.awt-theme-dark .rc-phone-tabs.nav-tabs .nav-link:hover { color: var(--bs-primary); } html.awt-theme-dark .rc-phone-tabs.nav-tabs .nav-link.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); background: transparent; } /* The More chevron sits BESIDE the strip rather than inside it (so its dropdown isn't clipped by the strip's scroll container), so it no longer matches the selectors above. Same colours, stated for its own class. */ html.awt-theme-dark .rc-phone-tabs-more-toggle { color: rgba(226, 232, 240, 0.7); background: transparent; } html.awt-theme-dark .rc-phone-tabs-more-toggle:hover, html.awt-theme-dark .rc-phone-tabs-more-toggle:focus { color: var(--bs-primary); } /* Caller ID line + dial display */ html.awt-theme-dark .rc-callerid-line { color: rgba(226, 232, 240, 0.7); } html.awt-theme-dark .rc-callerid-line .rc-callerid-select { color: var(--bs-primary); background-image: url("data:image/svg+xml;utf8,"); } html.awt-theme-dark .rc-dial-display { border-bottom-color: var(--bs-border-color); } html.awt-theme-dark .rc-dial-display input { color: var(--bs-body-color); } html.awt-theme-dark .rc-dial-display input::placeholder { color: rgba(226, 232, 240, 0.4); } /* Keypad keys */ html.awt-theme-dark .rc-keypad .rc-key { color: var(--bs-body-color); } html.awt-theme-dark .rc-keypad .rc-key:hover { background: rgba(255, 255, 255, 0.06); } html.awt-theme-dark .rc-keypad .rc-key:active { background: rgba(255, 255, 255, 0.12); } html.awt-theme-dark .rc-keypad .rc-key small { color: rgba(226, 232, 240, 0.55); } /* Action row (Notes off / Clear side buttons) */ html.awt-theme-dark .rc-action-row .rc-side-btn { background: var(--bs-tertiary-bg); border-color: var(--bs-border-color); color: var(--bs-body-color); } html.awt-theme-dark .rc-action-row .rc-side-btn:hover:not([disabled]) { background: rgba(255, 255, 255, 0.08); } html.awt-theme-dark .rc-action-row .rc-side-btn small { color: rgba(226, 232, 240, 0.6); } /* Right pane: Team/Favorites pill tabs + empty state. The strip itself is transparent in both themes — only the active pill is a surface (see operator-phone.css); a track behind two small buttons reads as a control bar that is mostly empty. */ html.awt-theme-dark .rc-right-tabs.nav-tabs { background: transparent; } html.awt-theme-dark .rc-right-tabs.nav-tabs .nav-link { color: rgba(226, 232, 240, 0.7); background: transparent; } html.awt-theme-dark .rc-right-tabs.nav-tabs .nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } html.awt-theme-dark .rc-right-tabs.nav-tabs .nav-link.active { background: rgba(255, 255, 255, 0.14); color: #ffffff; } html.awt-theme-dark .rc-right-empty, html.awt-theme-dark .rc-right-summary { color: var(--bs-body-color); } html.awt-theme-dark .rc-right-empty p, html.awt-theme-dark .rc-right-summary p { color: rgba(226, 232, 240, 0.6); } html.awt-theme-dark .rc-right-empty .rc-illu { background: radial-gradient(circle at 22% 60%, rgba(96, 165, 250, 0.22) 0 32%, transparent 33%), radial-gradient(circle at 50% 60%, rgba(96, 165, 250, 0.22) 0 28%, transparent 29%), radial-gradient(circle at 78% 60%, rgba(96, 165, 250, 0.22) 0 30%, transparent 31%), linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.02) 100%); } /* Empty-state headings (Notes/Voicemail/Recordings/Video placeholders) */ html.awt-theme-dark .rc-static-empty h6 { color: var(--bs-body-color); } html.awt-theme-dark .rc-static-empty p { color: var(--bs-secondary-color); } /* AI notes + transcript shown in the call detail pane (Calls tab) */ html.awt-theme-dark .rc-call-detail-ai { background: rgba(255, 255, 255, 0.03); border-color: var(--bs-border-color); } html.awt-theme-dark .rc-ai-tabs { background: var(--bs-tertiary-bg); } html.awt-theme-dark .rc-ai-tab { color: var(--bs-secondary-color); } html.awt-theme-dark .rc-ai-tab.active { background: var(--bs-secondary-bg); color: var(--bs-primary); } html.awt-theme-dark .rc-ai-panel { color: var(--bs-body-color); } html.awt-theme-dark .rc-ai-empty, html.awt-theme-dark .rc-ai-section-title { color: var(--bs-secondary-color); } html.awt-theme-dark .rc-ai-tr-row { border-bottom-color: var(--bs-border-color); } html.awt-theme-dark .rc-ai-tr-row.is-caller .rc-ai-tr-who { color: var(--bs-secondary-color); } /* Calls / favorites lists separators */ html.awt-theme-dark .rc-call-searchbar, html.awt-theme-dark .rc-fav-search, html.awt-theme-dark .rc-call-toolbar { border-bottom: 1px solid var(--bs-border-color); } /* Calls list rows (Phone → Calls tab) */ html.awt-theme-dark .rc-call-item { border-bottom: none; color: var(--bs-body-color); } html.awt-theme-dark .rc-call-item:hover { background: rgba(255, 255, 255, 0.06) !important; box-shadow: none; } html.awt-theme-dark .rc-call-item.active { background: rgba(96, 165, 250, 0.18) !important; box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.28); } html.awt-theme-dark .rc-call-action:hover { box-shadow: 0 3px 8px rgba(96, 165, 250, 0.25); } html.awt-theme-dark .rc-call-num { color: var(--bs-body-color); } html.awt-theme-dark .rc-call-sub { color: rgba(226, 232, 240, 0.6); } html.awt-theme-dark .rc-call-meta { color: rgba(226, 232, 240, 0.45); } /* Calls toolbar (search + ALL/MISSED/Edit) */ html.awt-theme-dark .rc-call-filters .filter-pill { color: rgba(226, 232, 240, 0.55); } html.awt-theme-dark .rc-call-filters .filter-pill.active { color: var(--bs-primary); } html.awt-theme-dark .rc-call-filter-more-toggle { color: rgba(226, 232, 240, 0.7); } html.awt-theme-dark .rc-call-filter-more-toggle:hover { color: var(--bs-primary); } /* Combined filter control (the active filter's name + chevron). Carries the accent, like the .filter-pill.active it replaced. */ html.awt-theme-dark .rc-call-filter-pick, html.awt-theme-dark .rc-call-filter-pick:hover { color: var(--bs-primary); } /* Neutral pill, matching the light theme's intent: an ACTION, not the accent that marks the currently-selected filter beside it. */ html.awt-theme-dark .rc-call-edit { color: rgba(226, 232, 240, 0.75); background-color: rgba(148, 163, 184, 0.14); border-color: rgba(148, 163, 184, 0.28); } html.awt-theme-dark .rc-call-edit:hover { color: #e2e8f0; background-color: rgba(148, 163, 184, 0.24); border-color: rgba(148, 163, 184, 0.45); } html.awt-theme-dark .rc-call-edit-disabled, html.awt-theme-dark .rc-call-edit-disabled:hover { color: rgba(226, 232, 240, 0.35); background-color: transparent; border-color: rgba(148, 163, 184, 0.18); } /* Edit-mode bar (master checkbox + actions) */ html.awt-theme-dark .rc-call-editbar { background: var(--bs-secondary-bg); border-bottom-color: var(--bs-border-color); color: var(--bs-body-color); } html.awt-theme-dark .rc-call-editbar-count { color: var(--bs-body-color); } html.awt-theme-dark .rc-call-editbar-btn, html.awt-theme-dark .rc-call-editbar-close { color: rgba(226, 232, 240, 0.7); } html.awt-theme-dark .rc-call-editbar-btn:not(:disabled):hover, html.awt-theme-dark .rc-call-editbar-close:hover { color: var(--bs-primary); } html.awt-theme-dark .rc-call-editbar-close { border-left-color: var(--bs-border-color); } html.awt-theme-dark .rc-call-search-input, html.awt-theme-dark .rc-fav-search-input { color: var(--bs-body-color); background: transparent; } html.awt-theme-dark .rc-call-search-input::placeholder, html.awt-theme-dark .rc-fav-search-input::placeholder, html.awt-theme-dark .rc-call-searchbar .rc-call-search-icon, html.awt-theme-dark .rc-fav-search-icon { color: rgba(226, 232, 240, 0.45); } html.awt-theme-dark .rc-fav-item { border-bottom-color: var(--bs-border-color); } html.awt-theme-dark .rc-fav-item:hover { background: rgba(255, 255, 255, 0.04); } /* HUD settings modal (Bootstrap modal already handled, but custom inner) */ html.awt-theme-dark .rc-hud-content, html.awt-theme-dark .rc-hud-modal .modal-content-inner { background: var(--bs-secondary-bg); color: var(--bs-body-color); } /* ------- Operator contacts tab (.rc-contacts surfaces) ------- * tenant-contacts.css hard-codes #fff / #f8f9fa / #f1f3f5 / #212529 etc. * Override concrete classes so the contacts tab renders correctly in dark. */ html.awt-theme-dark .rc-contacts, html.awt-theme-dark .rc-contacts-list-pane, html.awt-theme-dark .rc-contacts-detail-pane, html.awt-theme-dark .rc-contacts-searchbar, html.awt-theme-dark .rc-teams-toolbar { background: var(--bs-secondary-bg) !important; color: var(--bs-body-color); } html.awt-theme-dark .rc-contacts-list-pane { border-right: 1px solid var(--bs-border-color); } html.awt-theme-dark .rc-contacts-searchbar, html.awt-theme-dark .rc-teams-toolbar { border-bottom: 1px solid var(--bs-border-color); } html.awt-theme-dark .rc-contacts-search-input, html.awt-theme-dark .rc-teams-searchbar input { color: var(--bs-body-color); background: transparent; } html.awt-theme-dark .rc-contacts-search-input::placeholder, html.awt-theme-dark .rc-teams-searchbar input::placeholder, html.awt-theme-dark .rc-contacts-searchbar .rc-contacts-search-icon { color: rgba(226, 232, 240, 0.45); } /* Tabs row: All / Company / Guests / Personal / Blocked */ html.awt-theme-dark .rc-contacts-tabs.nav-tabs .nav-link { color: rgba(226, 232, 240, 0.7); background: transparent; } html.awt-theme-dark .rc-contacts-tabs.nav-tabs .nav-link:hover { color: var(--bs-primary); } html.awt-theme-dark .rc-contacts-tabs.nav-tabs .nav-link.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); background: transparent; } html.awt-theme-dark .rc-contacts-tabs-arrow { color: rgba(226, 232, 240, 0.7); } html.awt-theme-dark .rc-contacts-tabs-arrow:hover { color: var(--bs-primary); } /* Favorites + section labels + list separators */ html.awt-theme-dark .rc-contacts-favorites { border-top: 1px solid var(--bs-border-color); border-bottom: 1px solid var(--bs-border-color); } html.awt-theme-dark .rc-contacts-favorites .rc-contacts-fav-empty, html.awt-theme-dark .rc-contacts-section-label { color: rgba(226, 232, 240, 0.55); } /* Contact list rows */ html.awt-theme-dark .rc-contact-item { border-bottom: 1px solid var(--bs-border-color); } html.awt-theme-dark .rc-contact-item:hover, html.awt-theme-dark .rc-contacts-fav-row:hover, html.awt-theme-dark .rc-team-item:hover { background: rgba(255, 255, 255, 0.06) !important; } html.awt-theme-dark .rc-contact-item.active { background: rgba(96, 165, 250, 0.18) !important; } html.awt-theme-dark .rc-contact-name, html.awt-theme-dark .rc-contacts-fav-row .rc-fav-name, html.awt-theme-dark .rc-team-name { color: var(--bs-body-color); } html.awt-theme-dark .rc-contact-sub, html.awt-theme-dark .rc-contacts-fav-row .rc-fav-meta, html.awt-theme-dark .rc-contacts-fav-row .rc-fav-sub, html.awt-theme-dark .rc-team-sub, html.awt-theme-dark .rc-team-lock { color: rgba(226, 232, 240, 0.6); } html.awt-theme-dark .rc-contacts-fav-row:hover { border-color: var(--bs-border-color); } html.awt-theme-dark .rc-contact-meta { color: rgba(226, 232, 240, 0.45); } html.awt-theme-dark .rc-team-item { border-bottom: 1px solid var(--bs-border-color); } /* Teams pills/toolbar */ html.awt-theme-dark .rc-teams-pill { color: rgba(226, 232, 240, 0.55); } html.awt-theme-dark .rc-teams-pill.active { color: var(--bs-primary); } html.awt-theme-dark .rc-teams-more-toggle { color: rgba(226, 232, 240, 0.7); } html.awt-theme-dark .rc-teams-more-toggle:hover { color: var(--bs-primary); } /* Add (+) dropdown + invite submenu — already covered by generic * .dropdown-menu rule but those use #f1f3f5 hover from this file. */ html.awt-theme-dark .rc-contacts-add-menu, html.awt-theme-dark .rc-contacts-add-submenu-menu { background: var(--bs-secondary-bg) !important; border-color: var(--bs-border-color) !important; color: var(--bs-body-color); } html.awt-theme-dark .rc-contacts-add-menu .dropdown-item:hover, html.awt-theme-dark .rc-contacts-add-submenu-menu .dropdown-item:hover, html.awt-theme-dark .rc-contacts-add-submenu-wrap:hover>.rc-contacts-add-submenu { background: rgba(255, 255, 255, 0.08) !important; color: #ffffff !important; } /* Right detail pane */ html.awt-theme-dark .rc-detail-fav { color: rgba(226, 232, 240, 0.7); } html.awt-theme-dark .rc-detail-action-btn { background: var(--bs-tertiary-bg); color: var(--bs-body-color); } html.awt-theme-dark .rc-detail-action-btn:hover { background: rgba(255, 255, 255, 0.08); } /* Only the new label needs a dark colour; the button above is unchanged. */ html.awt-theme-dark .rc-detail-action-label { color: rgba(226, 232, 240, 0.7); } html.awt-theme-dark .rc-info-card { border-color: var(--bs-border-color); background: rgba(255, 255, 255, 0.02); } html.awt-theme-dark .rc-info-card .rc-info-label { color: rgba(226, 232, 240, 0.6); } html.awt-theme-dark .rc-empty-state { color: rgba(226, 232, 240, 0.55); } /* ------- "Create team" + "Invite by email" modals (rc-create-team-*, rc-form-*) ------- * tenant-contacts.css hard-codes #212529, #f1f3f5, #1f7fb3 etc. */ html.awt-theme-dark .rc-create-team-content, html.awt-theme-dark .rc-invite-email-content { background: var(--bs-secondary-bg) !important; color: var(--bs-body-color); } html.awt-theme-dark .rc-create-team-header .modal-title, html.awt-theme-dark .rc-invite-email-header .modal-title { color: var(--bs-body-color); } /* Form fields (used in Create team + Invite by email + reused elsewhere) */ html.awt-theme-dark .rc-form-label { color: rgba(226, 232, 240, 0.7); } html.awt-theme-dark .rc-form-floating:focus-within .rc-form-label { color: var(--bs-primary); } html.awt-theme-dark .rc-form-input { color: var(--bs-body-color); background: transparent !important; border-bottom-color: var(--bs-border-color) !important; } html.awt-theme-dark .rc-form-input::placeholder { color: rgba(226, 232, 240, 0.45); } html.awt-theme-dark .rc-form-input:focus { border-bottom-color: var(--bs-primary) !important; box-shadow: inset 0 -1px 0 0 var(--bs-primary) !important; } html.awt-theme-dark .rc-form-textarea { background: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; border: 1px solid var(--bs-border-color); } html.awt-theme-dark .rc-form-textarea:focus { box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3); } html.awt-theme-dark .rc-form-help { color: rgba(226, 232, 240, 0.6); } html.awt-theme-dark .rc-form-row { border-bottom-color: var(--bs-border-color); } html.awt-theme-dark .rc-form-row-label { color: var(--bs-body-color); } html.awt-theme-dark .rc-form-row-label i { color: rgba(226, 232, 240, 0.5); } html.awt-theme-dark .rc-form-select { background-color: var(--bs-tertiary-bg) !important; color: var(--bs-body-color) !important; background-image: url("data:image/svg+xml;utf8,"); } /* Team toggle rows (one per "Allow members to ..." switch) */ html.awt-theme-dark .rc-team-toggle { border-bottom-color: var(--bs-border-color); color: var(--bs-body-color); } /* iOS-style switch */ html.awt-theme-dark .rc-switch-slider { background: rgba(255, 255, 255, 0.18); } html.awt-theme-dark .rc-switch input:checked+.rc-switch-slider { background: var(--bs-primary); } /* Footer buttons */ html.awt-theme-dark .rc-team-cancel { color: var(--bs-primary); } html.awt-theme-dark .rc-team-cancel:hover { color: #93c5fd; } html.awt-theme-dark .rc-team-create { background: var(--bs-primary); color: #0f172a; } html.awt-theme-dark .rc-team-create:hover:not(:disabled) { background: #93c5fd; } html.awt-theme-dark .rc-team-create:disabled { background: rgba(255, 255, 255, 0.10); color: rgba(226, 232, 240, 0.4); } /* Invite-email modal body description */ html.awt-theme-dark .rc-invite-email-desc { color: rgba(226, 232, 240, 0.75); } /* ------- Global dialer modal (awt-dialer-*) ------- * Inline