/*
Dark theme for the SMS portal.

Loaded after styles.css by both layouts. Every rule here is scoped to
[data-bs-theme="dark"], which only templates/shared/theme_head sets (Dark, or
Auto on a device in dark mode), so the light theme is exactly styles.css and
nothing else. t/theme.t fails on an unscoped selector.

Bootstrap 5.3 themes its own components (cards, forms, tables, modals,
dropdowns, alerts, list groups) from that attribute. What is here is the
portal's own CSS, which hard-codes light colours, plus the few Bootstrap
utilities that stay light on purpose (bg-white, bg-light, text-bg-light) or
read too faint on a dark page (outline buttons, text-primary/danger/success).

Colours come from Bootstrap's dark variables wherever one fits:
  --bs-body-bg #212529 (page)       --bs-tertiary-bg #2b3035 (panels, bars)
  --bs-secondary-bg #343a40 (chips) --bs-border-color(-translucent) (lines)
  --bs-body-color / --bs-emphasis-color / --bs-secondary-color (text)
  --bs-*-text-emphasis, --bs-*-bg-subtle, --bs-*-border-subtle (states)
The portal blue rgb(41,41,236) is too dark to read on these, so it is lifted
to --portal-accent below. Text pairs were checked for WCAG AA (4.5:1).

Selectors repeat the styles.css selector they override (with the attribute in
front), so they always out-rank it, including inside its media queries.
Only colours, backgrounds, borders' colours and shadows change: never a size,
padding, margin or border width, so every page keeps its light geometry --
the phone conversation view included.
*/

[data-bs-theme="dark"] {
    --portal-accent: #a8a8ff;            /* rgb(41,41,236) lifted: 6.2:1 on --bs-tertiary-bg */
    --portal-accent-rgb: 168, 168, 255;
    --portal-tint-rgb: 110, 110, 255;    /* background tint behind accent text */
    --portal-danger-text: #ee9aa2;       /* danger text on a red tint: 5.5:1 */
}

/* ------------------------------------------------------------------ */
/* Bootstrap pieces that stay light in its dark mode                   */
[data-bs-theme="dark"] .bg-white {
    background-color: var(--bs-body-bg) !important;
}

[data-bs-theme="dark"] .bg-light {
    background-color: var(--bs-tertiary-bg) !important;
}

[data-bs-theme="dark"] .text-bg-light {
    color: var(--bs-body-color) !important;
    background-color: var(--bs-secondary-bg) !important;
}

/* "Removed" (admin users): #212529 would vanish into the page */
[data-bs-theme="dark"] .text-bg-dark {
    color: #fff !important;
    background-color: var(--bs-gray-700) !important;
}

/* styles.css pins .text-muted to Bootstrap 4's #6c757d: 3.3:1 here */
[data-bs-theme="dark"] .text-muted {
    color: var(--bs-secondary-color) !important;
}

[data-bs-theme="dark"] .text-primary {
    color: var(--bs-primary-text-emphasis) !important;
}

[data-bs-theme="dark"] .text-danger {
    color: var(--bs-danger-text-emphasis) !important;
}

[data-bs-theme="dark"] .text-success {
    color: var(--bs-success-text-emphasis) !important;
}

[data-bs-theme="dark"] .list-group-item-action {
    color: var(--bs-body-color);
}

/* Outline buttons: Bootstrap keeps the light-page text colours (about
   3.4:1 on #212529). Lifted text and border, disabled included (still
   faded by Bootstrap's opacity); hover/active stay Bootstrap's filled button. */
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--bs-primary-text-emphasis);
    --bs-btn-border-color: var(--bs-primary-text-emphasis);
    --bs-btn-disabled-color: var(--bs-primary-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--bs-gray-500);
    --bs-btn-border-color: var(--bs-gray-600);
    --bs-btn-disabled-color: var(--bs-gray-500);
    --bs-btn-disabled-border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: var(--bs-danger-text-emphasis);
    --bs-btn-border-color: var(--bs-danger-text-emphasis);
    --bs-btn-disabled-color: var(--bs-danger-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-danger-text-emphasis);
}

[data-bs-theme="dark"] .btn-outline-success {
    --bs-btn-color: var(--bs-success-text-emphasis);
    --bs-btn-border-color: var(--bs-success-text-emphasis);
    --bs-btn-disabled-color: var(--bs-success-text-emphasis);
    --bs-btn-disabled-border-color: var(--bs-success-text-emphasis);
}

/* ------------------------------------------------------------------ */
/* Message bubbles: the same grey and green as the light theme (like   */
/* iMessage, whose bubbles keep their colour in dark mode); only the   */
/* text around them changes.                                           */
[data-bs-theme="dark"] .sms-status {
    color: var(--portal-accent);
}

[data-bs-theme="dark"] .smsdate {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .phonebookmatch {
    color: var(--bs-body-color);
}

/* ------------------------------------------------------------------ */
/* Dashboard                                                           */
[data-bs-theme="dark"] .dashboard-wrap .dashboard-stat,
[data-bs-theme="dark"] .dashboard-wrap .dashboard-admin-card {
    border-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .dashboard-wrap .stat-label,
[data-bs-theme="dark"] .dashboard-wrap .dashboard-admin-card .card-header h5 {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .dashboard-wrap .list-group-item {
    border-bottom-color: var(--bs-border-color-translucent);
}

/* ------------------------------------------------------------------ */
/* Top bar, sidebar, phone menu                                        */
/* The top bar is already dark; it keeps its gradient.                 */
[data-bs-theme="dark"] .app-sidebar {
    background: var(--bs-tertiary-bg);
    border-right-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .app-sidebar-section-label {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .app-sidebar-nav .nav-link {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .app-sidebar-nav .nav-link i {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .app-sidebar-nav .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .app-sidebar-nav .nav-link.is-current {
    background: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

[data-bs-theme="dark"] .app-sidebar-nav .nav-link.is-current i {
    color: var(--portal-accent);
}

/* Theme switch (shared/theme_toggle), sidebar and phone menu: outlined on
   the page colour, the chosen one filled grey with white text (4.7:1). */
[data-bs-theme="dark"] .theme-toggle-group .btn {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-body-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-color: var(--bs-emphasis-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-hover-border-color: var(--bs-border-color);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-gray-600);
    --bs-btn-active-border-color: var(--bs-gray-600);
}

[data-bs-theme="dark"][data-portal-theme="dark"] .theme-toggle-group .btn[data-theme-choice="dark"],
[data-bs-theme="dark"][data-portal-theme="auto"] .theme-toggle-group .btn[data-theme-choice="auto"] {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--bs-gray-600);
    --bs-btn-border-color: var(--bs-gray-600);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-gray-600);
    --bs-btn-hover-border-color: var(--bs-gray-600);
}

/* ------------------------------------------------------------------ */
/* Page headings and list pages                                        */
[data-bs-theme="dark"] .list-page .page-title,
[data-bs-theme="dark"] .send-page .page-title,
[data-bs-theme="dark"] .entry-page .page-title,
[data-bs-theme="dark"] .message-page .page-title,
[data-bs-theme="dark"] .list-page .app-panel-title {
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .list-page .page-subtitle,
[data-bs-theme="dark"] .send-page .page-subtitle,
[data-bs-theme="dark"] .entry-page .page-subtitle,
[data-bs-theme="dark"] .message-page .page-subtitle,
[data-bs-theme="dark"] .list-page .page-summary,
[data-bs-theme="dark"] .list-page .app-panel-copy,
[data-bs-theme="dark"] .list-page .app-empty-state,
[data-bs-theme="dark"] .list-page .app-link-muted,
[data-bs-theme="dark"] .message-back-link {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .list-page .app-panel,
[data-bs-theme="dark"] .list-page .app-table-wrap,
[data-bs-theme="dark"] .send-panel,
[data-bs-theme="dark"] .entry-panel,
[data-bs-theme="dark"] .message-panel {
    border-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .list-page .app-data-table thead th {
    border-bottom-color: var(--bs-border-color-translucent);
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .list-page .app-data-table tbody td,
[data-bs-theme="dark"] .list-page .app-data-table tbody th {
    border-top-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .list-page .app-data-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Conversation list header and filters (shared/conv_list_head,
   conv_list_filter): the three-dots menu, the search magnifier, the chips.
   The filled "All" pill keeps Bootstrap blue (restated: the plain chip rule
   above it would out-rank it); a toggle chip that is on is a blue tint. */
[data-bs-theme="dark"] .list-more-menu .dropdown-item .bi,
[data-bs-theme="dark"] .list-search-go,
[data-bs-theme="dark"] .list-status {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .list-chips .nav-link,
[data-bs-theme="dark"] .list-chips .list-chip {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .list-chips .nav-link:hover,
[data-bs-theme="dark"] .list-chips .list-chip:hover {
    background: var(--bs-secondary-bg);
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .list-chips .nav-link.active {
    background: rgb(13, 110, 253);
    border-color: rgb(13, 110, 253);
    color: #fff;
}

[data-bs-theme="dark"] .list-chips .btn-check:checked + .list-chip {
    background: rgba(13, 110, 253, 0.2);
    border-color: var(--bs-primary-text-emphasis);
    color: var(--bs-primary-text-emphasis);   /* 5.2:1 on the tint */
}

[data-bs-theme="dark"] .list-chip-sep {
    background: var(--bs-border-color);
}

/* Conversation list action badges (portal colours). The light theme's
   #007bff and #dc3545 carry white text at 4.0:1 and 4.5:1; here they take
   Bootstrap 4's own darker hover shades (5.8:1, 5.6:1) and hover darker
   still. Secondary (4.7:1) keeps its colour. */
[data-bs-theme="dark"] .conv-action-primary { background-color: #0062cc; color: #fff; }
[data-bs-theme="dark"] .conv-action-danger { background-color: #c82333; color: #fff; }
[data-bs-theme="dark"] a.conv-action-primary:hover,
[data-bs-theme="dark"] a.conv-action-primary:focus { background-color: #004fa3; color: #fff; }
[data-bs-theme="dark"] a.conv-action-danger:hover,
[data-bs-theme="dark"] a.conv-action-danger:focus { background-color: #a71d2a; color: #fff; }

/* "Awaiting reply" keeps its yellow with dark text (9.5:1). */

/* ------------------------------------------------------------------ */
/* New message (templates/sendSMSForm): the To bar is the panel colour */
/* like the conversation header; the chosen group is a tinted chip.    */
[data-bs-theme="dark"] .new-message-to {
    background: var(--bs-tertiary-bg);
    border-bottom-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .new-message-to:focus-within {
    box-shadow: inset 0 -2px 0 rgba(var(--portal-accent-rgb), 0.55);
}

[data-bs-theme="dark"] .new-message-to-label,
[data-bs-theme="dark"] .new-message-hint,
[data-bs-theme="dark"] .new-message-note {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .new-message-to-input,
[data-bs-theme="dark"] .new-message-note strong {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .new-message-chip {
    background: rgba(var(--portal-tint-rgb), 0.16);
    color: var(--portal-accent);   /* 5.1:1 on the tint */
}

[data-bs-theme="dark"] .new-message-chip-clear:hover,
[data-bs-theme="dark"] .new-message-chip-clear:focus {
    background: rgba(var(--portal-tint-rgb), 0.28);
}

[data-bs-theme="dark"] .new-message-group {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .new-message-group:focus-within {
    border-color: rgba(var(--portal-accent-rgb), 0.55);
    box-shadow: 0 0 0 0.16rem rgba(var(--portal-accent-rgb), 0.2);
}

/* ------------------------------------------------------------------ */
/* Send SMS and entry forms                                            */
[data-bs-theme="dark"] .send-label,
[data-bs-theme="dark"] .entry-label {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .send-panel .form-control,
[data-bs-theme="dark"] .entry-panel .form-control {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .send-panel .form-control:focus,
[data-bs-theme="dark"] .entry-panel .form-control:focus,
[data-bs-theme="dark"] .message-compose-input:focus {
    border-color: rgba(var(--portal-accent-rgb), 0.55);
    box-shadow: 0 0 0 0.16rem rgba(var(--portal-accent-rgb), 0.2);
}

[data-bs-theme="dark"] .to-suggest {
    box-shadow: 0 0.35rem 1rem rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .to-suggest-phone {
    color: var(--bs-secondary-color);
}

/* ------------------------------------------------------------------ */
/* Conversation view: frame, header, transcript, compose               */
/* The frame (header, meta row, compose) is the raised panel colour;   */
/* the transcript inside it is the page colour, so the bubbles sit on  */
/* the darkest surface, as on a phone's own messaging app.             */
[data-bs-theme="dark"] .message-panel-header,
[data-bs-theme="dark"] .message-panel-meta,
[data-bs-theme="dark"] .message-panel-compose,
[data-bs-theme="dark"] .message-panel-screen {
    background: var(--bs-tertiary-bg);
}

[data-bs-theme="dark"] .message-panel-header,
[data-bs-theme="dark"] .message-panel-meta {
    border-bottom-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .message-panel-compose {
    border-top-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .message-panel-label,
[data-bs-theme="dark"] .message-panel-via,
[data-bs-theme="dark"] .message-panel-meta-line,
[data-bs-theme="dark"] .message-loading,
[data-bs-theme="dark"] .message-panel-label-row > .conv-presence {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .message-panel-contact a,
[data-bs-theme="dark"] .message-panel-via a,
[data-bs-theme="dark"] .message-panel-meta-line a {
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .message-panel-name,
[data-bs-theme="dark"] .compose-notice {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .message-refresh-button {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .message-refresh-button:hover {
    color: var(--bs-emphasis-color);
    background: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .message-panel-screen .scroll-box {
    background: var(--bs-body-bg);
    border-color: var(--bs-border-color-translucent);
    box-shadow: none;
}

[data-bs-theme="dark"] .message-panel-screen .smsin,
[data-bs-theme="dark"] .message-panel-screen .smsout {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .message-panel-screen .mmspreview {
    background: var(--bs-secondary-bg);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* "Add to Phonebook" in the header (portal blue, lifted) */
[data-bs-theme="dark"] .message-panel-add-contact {
    color: var(--portal-accent);
}

[data-bs-theme="dark"] .message-compose-input {
    border-color: var(--bs-border-color);
}

/* Reaction badge on a bubble's corner */
[data-bs-theme="dark"] .sms-reactions {
    background: var(--bs-secondary-bg);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Header action badges (portal colours): tinted chips with lifted text. */
[data-bs-theme="dark"] .message-panel-actions .message-action-primary.message-action-badge,
[data-bs-theme="dark"] .page-help .message-action-primary.message-action-badge {
    background: rgba(var(--portal-tint-rgb), 0.14);
    border-color: rgba(var(--portal-tint-rgb), 0.4);
    color: var(--portal-accent);
}

[data-bs-theme="dark"] .message-panel-actions .message-action-primary.message-action-badge:hover {
    background: rgba(var(--portal-tint-rgb), 0.24);
    color: #c8c8ff;
}

[data-bs-theme="dark"] .message-panel-actions .message-action-danger.message-action-badge,
[data-bs-theme="dark"] .page-help .message-action-danger.message-action-badge {
    background: rgba(220, 53, 69, 0.16);
    border-color: rgba(220, 53, 69, 0.45);
    color: var(--portal-danger-text);
}

[data-bs-theme="dark"] .message-panel-actions .message-action-danger.message-action-badge:hover {
    background: rgba(220, 53, 69, 0.24);
    color: #f5c2c7;
}

[data-bs-theme="dark"] .message-panel-actions .message-action-delete,
[data-bs-theme="dark"] .page-help .message-action-delete,
[data-bs-theme="dark"] .badge-delete {
    background: var(--bs-body-bg);
    border-color: rgba(220, 53, 69, 0.6);
    color: var(--portal-danger-text);
}

[data-bs-theme="dark"] .message-panel-actions .message-action-delete:hover,
[data-bs-theme="dark"] .badge-delete:hover,
[data-bs-theme="dark"] .badge-delete:focus {
    background: rgba(220, 53, 69, 0.12);
    color: #f5c2c7;
}

/* ------------------------------------------------------------------ */
/* Team notes: amber on dark instead of pale yellow, still never      */
/* mistaken for a bubble or the compose box.                          */
[data-bs-theme="dark"] .message-panel-actions .conv-notes-toggle.message-action-badge,
[data-bs-theme="dark"] .conv-notes-badge {
    background: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
}

[data-bs-theme="dark"] .message-panel-actions .conv-notes-toggle.message-action-badge:hover {
    background: rgba(255, 193, 7, 0.22);
    color: var(--bs-warning-text-emphasis);
}

[data-bs-theme="dark"] .conv-notes-panel,
[data-bs-theme="dark"] .conv-notes-modal .modal-content {
    background: var(--bs-warning-bg-subtle);
}

[data-bs-theme="dark"] .conv-notes-panel {
    border-bottom-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .conv-notes-card-head,
[data-bs-theme="dark"] .conv-notes-warn {
    color: var(--bs-warning-text-emphasis);
}

[data-bs-theme="dark"] .conv-notes-input,
[data-bs-theme="dark"] .conv-notes-input:focus {
    background: var(--bs-body-bg);
    border-color: var(--bs-warning-border-subtle);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .conv-notes-input:focus {
    border-color: rgb(214, 170, 40);
}

[data-bs-theme="dark"] .conv-notes-add {
    background: rgba(255, 193, 7, 0.18);
    border-color: var(--bs-warning-border-subtle);
    color: var(--bs-warning-text-emphasis);
}

[data-bs-theme="dark"] .conv-notes-add:hover {
    background: rgba(255, 193, 7, 0.28);
    color: var(--bs-warning-text-emphasis);
}

[data-bs-theme="dark"] .conv-note {
    background: rgba(255, 193, 7, 0.08);
    border-color: rgba(255, 193, 7, 0.25);
}

[data-bs-theme="dark"] .conv-note-meta,
[data-bs-theme="dark"] .conv-notes-empty {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .conv-note-meta strong,
[data-bs-theme="dark"] .conv-note-body {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .conv-note-del {
    color: var(--portal-danger-text);
}

/* "Teammate just replied" guard above the compose box */
[data-bs-theme="dark"] .conv-reply-guard {
    color: var(--bs-warning-text-emphasis);
    background: var(--bs-warning-bg-subtle);
    border-color: var(--bs-warning-border-subtle);
}

[data-bs-theme="dark"] .conv-reply-guard--confirm {
    border-color: rgb(230, 162, 60);
}

/* ------------------------------------------------------------------ */
/* Conversation assignment: header tag, list badges, picker sheet     */
[data-bs-theme="dark"] .conv-assign-tag {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] button.conv-assign-tag:hover {
    border-color: rgba(var(--portal-accent-rgb), 0.55);
    color: var(--portal-accent);
}

[data-bs-theme="dark"] .conv-assign-badge,
[data-bs-theme="dark"] .conv-assign-done {
    border-color: var(--bs-border-color);
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .conv-assign-tag.is-done,
[data-bs-theme="dark"] .conv-assign-done {
    color: var(--bs-success-text-emphasis);
    border-color: rgba(117, 183, 152, 0.45);
}

[data-bs-theme="dark"] .conv-assign-sheet .modal-content {
    border-color: var(--bs-border-color-translucent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .conv-assign-sheet .conv-assign-option {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .conv-assign-sheet .conv-assign-option:hover,
[data-bs-theme="dark"] .conv-assign-sheet .conv-assign-option:focus {
    background-color: rgba(255, 255, 255, 0.06);
}

[data-bs-theme="dark"] .conv-assign-sheet .conv-assign-option.active,
[data-bs-theme="dark"] .conv-assign-sheet .conv-assign-option.active:hover,
[data-bs-theme="dark"] .conv-assign-sheet .conv-assign-option.active:focus {
    color: var(--bs-emphasis-color);
    background-color: rgba(var(--portal-tint-rgb), 0.16);
}

[data-bs-theme="dark"] .conv-assign-sheet .conv-assign-option.active .bi-check2 {
    color: var(--portal-accent);
}

/* ------------------------------------------------------------------ */
/* Quick Texts (desktop compose)                                       */
[data-bs-theme="dark"] .quick-texts-btn {
    border-color: var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .quick-texts-btn:hover,
[data-bs-theme="dark"] .quick-texts-btn[aria-expanded="true"] {
    color: var(--portal-accent);
    border-color: rgba(var(--portal-accent-rgb), 0.55);
}

[data-bs-theme="dark"] .quick-texts-btn:focus {
    box-shadow: 0 0 0 0.16rem rgba(var(--portal-accent-rgb), 0.2);
}

[data-bs-theme="dark"] .quick-texts-menu {
    background: var(--bs-tertiary-bg);
    border-color: var(--bs-border-color-translucent);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .quick-texts-head,
[data-bs-theme="dark"] .quick-texts-prev,
[data-bs-theme="dark"] .quick-texts-note {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .quick-texts-item {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .quick-texts-item.active,
[data-bs-theme="dark"] .quick-texts-item:hover {
    background: rgba(var(--portal-tint-rgb), 0.16);
}

[data-bs-theme="dark"] .quick-texts-name {
    color: var(--bs-emphasis-color);
}

/* ------------------------------------------------------------------ */
/* Sign-in pages: the card is the raised surface on the page colour    */
[data-bs-theme="dark"] .login-wrap {
    background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .login-card {
    --bs-card-bg: var(--bs-tertiary-bg);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .login-brand .login-icon {
    color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] .login-brand h1 {
    color: var(--bs-emphasis-color);
}

[data-bs-theme="dark"] .login-brand p {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .login-body .mb-3 label {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .login-body .form-control {
    border-color: var(--bs-border-color);
}

/* ------------------------------------------------------------------ */
/* Admin pages (.admin-edit cards, section pills) and health cards     */
[data-bs-theme="dark"] .admin-edit .card {
    border-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .admin-edit .card-header {
    background-color: var(--bs-tertiary-bg);
    border-bottom-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .admin-edit .table th,
[data-bs-theme="dark"] .admin-edit .admin-edit-figure-label,
[data-bs-theme="dark"] .health-card h3 {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .admin-edit .push-device-list,
[data-bs-theme="dark"] .admin-edit .push-device-list li + li {
    border-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .admin-edit .card.border-danger .card-header {
    background-color: var(--bs-danger-bg-subtle);
    border-bottom-color: var(--bs-danger-border-subtle);
}

[data-bs-theme="dark"] .admin-edit .admin-nav .nav-link {
    color: var(--bs-body-color);
    border-color: var(--bs-border-color);
    background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .admin-edit .admin-nav .nav-link.active {
    color: #fff;
    background-color: rgb(41, 41, 236);
    border-color: transparent;
}

/* ------------------------------------------------------------------ */
/* Compact data tables (Delivery Reports, admin lists)                 */
[data-bs-theme="dark"] .app-data-table--compact td.dt-muted,
[data-bs-theme="dark"] .app-data-table--compact a.dt-status--ok,
[data-bs-theme="dark"] .mdr-status-detail__extra {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .app-data-table--compact a.dt-status--warn {
    color: var(--bs-warning-text-emphasis);
}

[data-bs-theme="dark"] .app-data-table--compact a.dt-status--bad,
[data-bs-theme="dark"] .mdr-status-detail__body--error {
    color: var(--bs-danger-text-emphasis);
}

[data-bs-theme="dark"] .app-data-table--compact tbody tr.mdr-status-detail > td {
    background-color: var(--bs-tertiary-bg);
}

/* ------------------------------------------------------------------ */
/* Usage page (/manage/usage): tiles, grey labels and quiet rows, the  */
/* day bars' track, and the phone card rows. The bars' own blues stay. */
[data-bs-theme="dark"] .usage-page .usage-stat {
    border-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .usage-page .usage-stat-label,
[data-bs-theme="dark"] .usage-page .usage-stat-sub,
[data-bs-theme="dark"] .usage-page .usage-number-label,
[data-bs-theme="dark"] .usage-page .usage-day-date,
[data-bs-theme="dark"] .usage-page .usage-table tr.usage-silent td {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .usage-page .usage-bar {
    background-color: var(--bs-secondary-bg);
}

@media (max-width: 575.98px) {
    [data-bs-theme="dark"] .usage-page .usage-table.usage-table tr {
        border-bottom-color: var(--bs-border-color-translucent);
    }

    [data-bs-theme="dark"] .usage-page .usage-table.usage-table td[data-label]::before {
        color: var(--bs-secondary-color);
    }
}

/* ------------------------------------------------------------------ */
/* In-page help panels (templates/help/)                               */
[data-bs-theme="dark"] .page-help,
[data-bs-theme="dark"] .page-help .help-lead {
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .page-help .help-sub,
[data-bs-theme="dark"] .page-help .help-label {
    color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .page-help .help-card {
    border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .page-help .help-card--optout {
    border-top-color: #0d6efd;
}

[data-bs-theme="dark"] .page-help .help-card--block {
    border-top-color: #c0392b;
}

[data-bs-theme="dark"] .page-help .help-flow-end {
    background: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .page-help .help-tip {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning-text-emphasis);
}

[data-bs-theme="dark"] .page-help .help-item {
    border-top-color: var(--bs-border-color-translucent);
}

[data-bs-theme="dark"] .page-help .help-icon {
    background: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
}

[data-bs-theme="dark"] .page-help .help-icon--red {
    background: var(--bs-danger-bg-subtle);
    color: var(--bs-danger-text-emphasis);
}