/* Night theme for the CRM shell. Light mode is unchanged.
   The sidebar logo plate stays white so the light logo keeps contrast. */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--navy);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--silver); }
.theme-toggle-corner {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 50;
  background: #fff;
  color: var(--navy);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1726;
  --bg-alt: #152033;
  --card: #1a2740;
  --text: #e8eef6;
  --muted: #9aafc4;
  --border: #2c4060;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.28);
  --danger-soft: rgba(248, 113, 113, 0.18);
  --warn-soft: rgba(251, 146, 60, 0.18);
  --ok-soft: rgba(74, 222, 128, 0.18);
  --info-soft: rgba(96, 165, 250, 0.18);
  --accent-light: rgba(248, 113, 113, 0.16);
  --accent-soft: rgba(200, 50, 50, 0.28);
  --silver: #9aafc4;
  --silver-light: #c5d0dc;
}

html[data-theme="dark"] .theme-toggle {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

/* Navy is the brand button color. These rules only lighten text that used it as ink. */
html[data-theme="dark"] :is(
  .topbar-left h1,
  .btn-outline,
  .card h2,
  .card h3,
  .assignee-chip,
  .cc-snap-row .n,
  .pipeline-group:hover,
  .pipeline-group.is-active,
  .pipeline-group.is-active .pipeline-group-count,
  .pipeline-card a,
  .pipeline-more,
  .login-box h1,
  .role-switcher select,
  .wo-section-head h3,
  .wo-card-top,
  .profile-meta .v,
  .checkout-total-row strong,
  .profile-kpi .value,
  .profile-call-strip .v,
  .profile-action-bar .v,
  .profile-more-details summary,
  .profile-footer,
  .cal-month-label,
  .cal-day-num,
  .cc-period-btn:hover,
  .avatar,
  .flash,
  .wo-kind.order,
  .safer-section-title,
  .safer-kv .v,
  .safer-check.on,
  .safer-check .box
) {
  color: var(--text);
}

html[data-theme="dark"] .kpi-card .kpi-icon { color: var(--text); }
html[data-theme="dark"] .kpi-card.danger .kpi-icon { color: #fca5a5; }
html[data-theme="dark"] .kpi-card.warn .kpi-icon { color: #fdba74; }
html[data-theme="dark"] .kpi-card.ok .kpi-icon { color: #86efac; }
html[data-theme="dark"] .kpi-card.info .kpi-icon { color: #93c5fd; }
html[data-theme="dark"] .kpi-card .value { color: var(--text); }
html[data-theme="dark"] .kpi-card.danger .value { color: #fca5a5; }
html[data-theme="dark"] .kpi-card.warn .value { color: #fdba74; }
html[data-theme="dark"] .kpi-card.ok .value { color: #86efac; }
html[data-theme="dark"] .kpi-card.info .value { color: #93c5fd; }

html[data-theme="dark"] .btn { background: #24344d; color: var(--text); }
html[data-theme="dark"] .btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: #3d6a99;
}
html[data-theme="dark"] .btn-primary:hover { background: var(--navy-2); }
html[data-theme="dark"] .btn-accent,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .btn-danger { color: #fff; }
html[data-theme="dark"] .btn-outline {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .btn-ghost { background: transparent; color: var(--muted); }

html[data-theme="dark"] :is(
  .bell,
  .search-global,
  .form-group input,
  .form-group select,
  .form-group textarea,
  .pipeline-rep-form select,
  .pipeline-group.is-active,
  .pipeline-card,
  .pipeline-more,
  .role-switcher select,
  .wo-card,
  .login-box,
  .profile-alert-item.selectable:hover,
  .stax-field,
  .safer-check .box,
  .cal-day,
  .cc-period-toggle,
  .cc-period-btn
) {
  background: var(--card);
  color: var(--text);
}

html[data-theme="dark"] :is(
  .pipeline-col,
  .pipeline-col h4,
  .stax-card-block,
  .cal-day.empty,
  .cal-event,
  .cc-period-btn:hover,
  table.data tr:hover td,
  a.search-hit:hover,
  .profile-disp-email
) {
  background: var(--bg-alt);
}

html[data-theme="dark"] :is(
  .pipeline-groups,
  .pipeline-assignee,
  .avatar,
  .filter-list .count,
  .pipeline-group-count,
  .wo-section-head .count,
  .wo-kind.order,
  .safer-check.on .box,
  .flash
) {
  background: #24344d;
  color: var(--text);
}

html[data-theme="dark"] .form-group input,
html[data-theme="dark"] .form-group select,
html[data-theme="dark"] .form-group textarea,
html[data-theme="dark"] .crm-stax-form .form-group input {
  background: #121c2e;
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .search-global input { color: var(--text); }

html[data-theme="dark"] table.data td,
html[data-theme="dark"] .assignee-chip,
html[data-theme="dark"] .filter-list a {
  border-bottom-color: var(--border);
}

html[data-theme="dark"] .pipeline-more:hover { background: #24344d; }
html[data-theme="dark"] a.kpi-card:hover { border-color: var(--silver); }

html[data-theme="dark"] .filter-list .count.danger,
html[data-theme="dark"] .task-list .pri.danger { color: #fca5a5; }
html[data-theme="dark"] .filter-list .count.warn,
html[data-theme="dark"] .task-list .pri.warn { color: #fdba74; }
html[data-theme="dark"] .filter-list .count.info,
html[data-theme="dark"] .task-list .pri.info,
html[data-theme="dark"] .task-list .pri.ok { color: #93c5fd; }
html[data-theme="dark"] .filter-list .count.ok { color: #86efac; }

html[data-theme="dark"] .flash { border-color: var(--border); }
html[data-theme="dark"] .flash.error,
html[data-theme="dark"] .error-box,
html[data-theme="dark"] .stax-error {
  background: rgba(248, 113, 113, 0.16);
  color: #fecaca;
  border-color: #7f1d1d;
}
html[data-theme="dark"] .flash.warn { background: rgba(248, 113, 113, 0.12); color: #fecaca; border-color: #7f1d1d; }

html[data-theme="dark"] .score-badge,
html[data-theme="dark"] .profile-kpi .score-inline,
html[data-theme="dark"] .profile-action-bar .score-inline,
html[data-theme="dark"] .stax-success {
  background: rgba(74, 222, 128, 0.16);
  border-color: #14532d;
  color: #bbf7d0;
}
html[data-theme="dark"] .score-badge.mid,
html[data-theme="dark"] .score-badge.low,
html[data-theme="dark"] .profile-kpi .score-inline.mid,
html[data-theme="dark"] .profile-kpi .score-inline.low,
html[data-theme="dark"] .profile-action-bar .score-inline.mid,
html[data-theme="dark"] .profile-action-bar .score-inline.low {
  background: rgba(248, 113, 113, 0.16);
  border-color: #7f1d1d;
  color: #fecaca;
}

html[data-theme="dark"] .tabs a.active,
html[data-theme="dark"] .tabs a:hover { color: #fecaca; }

html[data-theme="dark"] .wo-kind.quote { background: rgba(248, 113, 113, 0.16); color: #fecaca; }
html[data-theme="dark"] .wo-kind.agent { background: rgba(96, 165, 250, 0.18); color: #bfdbfe; }
html[data-theme="dark"] .wo-need,
html[data-theme="dark"] .wo-meta,
html[data-theme="dark"] .wo-items,
html[data-theme="dark"] .wo-section-secondary .wo-section-head h3,
html[data-theme="dark"] .role-check,
html[data-theme="dark"] .safer-kv .k,
html[data-theme="dark"] .checkout-totals .checkout-total-row.muted,
html[data-theme="dark"] .checkout-totals .checkout-total-row.muted strong { color: var(--muted); }

html[data-theme="dark"] .safer-section-title { background: rgba(96, 165, 250, 0.18); }
html[data-theme="dark"] .safer-kv .v.safer-warn { color: #fdba74; }
html[data-theme="dark"] .safer-check { color: var(--muted); }
html[data-theme="dark"] .safer-check .box { border-color: var(--silver); }
html[data-theme="dark"] .safer-check.on .box { border-color: var(--text); background: #24344d; }

html[data-theme="dark"] .cal-dow { background: var(--bg-alt); color: var(--muted); }
html[data-theme="dark"] .cal-event.overdue { background: rgba(248, 113, 113, 0.16); color: #fecaca; }
html[data-theme="dark"] .cal-event.due_soon,
html[data-theme="dark"] .cal-event.due-soon { background: rgba(251, 146, 60, 0.16); color: #fed7aa; }
html[data-theme="dark"] .cal-event.upcoming { background: rgba(96, 165, 250, 0.16); color: #bfdbfe; }
html[data-theme="dark"] .cc-period-btn.is-active { background: var(--navy); color: #fff; }

html[data-theme="dark"] .profile-alerts { background: rgba(248, 113, 113, 0.12); }
html[data-theme="dark"] .profile-alerts-title,
html[data-theme="dark"] .profile-alerts-hint,
html[data-theme="dark"] .profile-alert-item,
html[data-theme="dark"] .profile-alerts-all { color: #fecaca; }
html[data-theme="dark"] .profile-alert-item.selectable:hover { border-color: #7f1d1d; }

/* Logo stays on a white plate in both the sidebar and the login card. */
html[data-theme="dark"] .sidebar-brand,
html[data-theme="dark"] .sidebar-brand img.brand-logo {
  background: #ffffff !important;
  color: #1a3a5c;
}
html[data-theme="dark"] .sidebar-brand .sub { color: #1a3a5c; }
html[data-theme="dark"] .login-box img.brand-logo {
  background: #ffffff;
  border-radius: 12px;
  padding: 10px 12px;
}

/* Command center chips and money tiles stay light in the page stylesheet.
   Light theme text then sits on white and cannot be read. */
html[data-theme="dark"] .cc-filters-top .filter-list a,
html[data-theme="dark"] a.kpi-combo-item {
  background: #121c2e;
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .cc-filters-top .filter-list a:hover,
html[data-theme="dark"] a.kpi-combo-item:hover {
  background: #24344d;
  border-color: var(--silver);
}
html[data-theme="dark"] .kpi-combo-item .l { color: var(--muted); }
html[data-theme="dark"] .kpi-combo-item .n { color: var(--text); }
html[data-theme="dark"] .kpi-combo-item.ok .n { color: #4ade80; }
html[data-theme="dark"] .kpi-combo-item.warn .n { color: #fdba74; }
html[data-theme="dark"] .kpi-combo-item.danger .n { color: #fca5a5; }
html[data-theme="dark"] .cc-filters-top .filter-list .count {
  background: #24344d;
  color: var(--text);
}
html[data-theme="dark"] .kpi-card .cc-period-toggle,
html[data-theme="dark"] .kpi-card .cc-period-btn {
  background: #121c2e;
  color: var(--text);
}
html[data-theme="dark"] .kpi-card .cc-period-btn.is-active {
  background: var(--navy);
  color: #fff;
}
html[data-theme="dark"] .cc-mini-cal .cal-day,
html[data-theme="dark"] .cc-mini-cal .cal-day.empty {
  background: #121c2e !important;
  color: var(--text);
}
html[data-theme="dark"] .cc-note { color: var(--muted); }

/* Pages that ship their own white cards, chips, and tables. */
html[data-theme="dark"] :is(
  a.cs-kpi-card,
  .cs-kpi-card,
  .cs-cats a,
  .cs-filing,
  .cs-latest,
  .cs-find,
  .cs-book,
  .cs-book-banner,
  .cs-qhead,
  .cs-qrow,
  .cs-qrow[open],
  .cs-status-list,
  .cs-book-meta span,
  .rpt-nav,
  .rpt-toolbar,
  .rpt-card,
  a.rpt-kpi,
  .rpt-kpi,
  .rpt-payout-bar,
  .comm-day-chip,
  .rpt-iframe-wrap,
  .rpt-iframe-loading,
  .campaign-page .table-wrap,
  .campaign-page .card,
  .campaign-page .stat-card,
  .campaign-page .template-card,
  .campaign-page .campaign-card,
  .campaign-page .test-form,
  .campaign-page .merge-fields,
  .campaign-page .merge-tag,
  .campaign-page .filter-pill,
  .campaign-page .filter-tag,
  .campaign-page .quick-link,
  .campaign-page .today-bar,
  .campaign-page .progress-section,
  .campaign-page .filter-tabs,
  .campaign-page .dns-box,
  .staff-delete-modal,
  .pay-result-dialog,
  .stax-limit-banner,
  .carrier-results .modal,
  .carrier-results .service-tab,
  .carrier-results .pagination a,
  .carrier-results .col-toggle,
  .carrier-lookup .service-tab,
  .profile-facts,
  .profile-stat,
  .profile-rep-editor,
  .profile-edit-contact,
  .profile-edit-contact .channel-row,
  .profile-motus,
  .locked-val,
  .stat-card,
  .filter-panel,
  .month-card
) {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] :is(
  .cs-kpi-card .n,
  .cs-svc-name,
  .cs-note,
  .cs-orphan h3,
  .cs-book h3,
  .cs-filing-head,
  .cs-copy-row .cs-copy-val,
  .cs-grid .cs-static,
  .cs-latest p,
  .cs-muted,
  .rpt-kpi .n,
  .rpt-card h2,
  .rpt-card h3,
  .rpt-link,
  .rpt-nav-summary,
  .rpt-dl dd,
  .rpt-hint,
  .nd-form h3,
  .nd-check,
  .offer-qty .svc-qty label,
  .staff-delete-modal h3,
  .staff-delete-modal p,
  .staff-delete-modal label,
  .pay-result-dialog h3,
  .pay-result-dialog p,
  .user-cell strong,
  .profile-stat .n,
  .profile-stat .v
) {
  color: var(--text);
}

html[data-theme="dark"] :is(
  .cs-grid input,
  .cs-grid select,
  .cs-grid textarea,
  .cs-add-svc select,
  .cs-find-row input,
  .cs-note-add textarea,
  .cs-copy-btn,
  .offer-qty .svc-qty input,
  .team-actions input,
  .inline-edit input,
  .inline-edit select,
  .comm-week-form input,
  .rpt-toolbar input,
  .rpt-toolbar select,
  .profile-rep-editor select,
  .profile-motus .cs-grid input,
  .profile-motus .cs-grid textarea,
  .note-composer-actions select,
  #profile-services .svc-qty input,
  #profile-services .svc-note,
  .campaign-page input,
  .campaign-page select,
  .campaign-page textarea,
  .campaign-page .test-form input,
  .carrier-results .modal input,
  .carrier-results .modal select,
  .filter-group select,
  .filter-group input,
  .staff-delete-modal input
) {
  background: #121c2e;
  color: var(--text);
  border-color: var(--border);
}

html[data-theme="dark"] .cs-cats a.active,
html[data-theme="dark"] .cc-period-btn.is-active,
html[data-theme="dark"] .rpt-link.is-active,
html[data-theme="dark"] .carrier-lookup .service-tab.active,
html[data-theme="dark"] .carrier-results .service-tab.active,
html[data-theme="dark"] .campaign-page .template-card.selected,
html[data-theme="dark"] .carrier-results .pagination .current {
  background: var(--navy);
  color: #fff;
  border-color: #3d6a99;
}

html[data-theme="dark"] .rpt-link:hover,
html[data-theme="dark"] .cs-cats a:hover,
html[data-theme="dark"] a.cs-kpi-card:hover,
html[data-theme="dark"] .comm-day-chip:has(input:checked) {
  background: #24344d;
  color: var(--text);
}

html[data-theme="dark"] .rpt-kpi.ok .n { color: #86efac; }
html[data-theme="dark"] .rpt-kpi.warn .n { color: #fdba74; }
html[data-theme="dark"] .rpt-kpi.danger .n,
html[data-theme="dark"] .rpt-gap { color: #fca5a5; }

html[data-theme="dark"] .page thead th,
html[data-theme="dark"] .rpt-table thead th,
html[data-theme="dark"] .comm-table thead th.comm-name,
html[data-theme="dark"] .comm-table tfoot td.comm-name,
html[data-theme="dark"] .rpt-table tfoot td,
html[data-theme="dark"] .cs-qhead {
  background: var(--bg-alt);
  color: var(--muted);
  border-color: var(--border);
}
html[data-theme="dark"] .page tbody tr,
html[data-theme="dark"] .campaign-page table.data tbody tr,
html[data-theme="dark"] .comm-table th.comm-name,
html[data-theme="dark"] .comm-table td.comm-name {
  background: transparent;
  color: var(--text);
}
html[data-theme="dark"] .page tbody tr:hover,
html[data-theme="dark"] .campaign-page tbody tr:hover {
  background: var(--bg-alt);
}
html[data-theme="dark"] .comm-table td.comm-name,
html[data-theme="dark"] .comm-table th.comm-name {
  background: var(--card);
}
html[data-theme="dark"] .comm-rev { color: #e8eef4; }
html[data-theme="dark"] .comm-earn,
html[data-theme="dark"] .comm-split .is-comm { color: #86efac; }
html[data-theme="dark"] .comm-kpi-cap { color: var(--text); }
html[data-theme="dark"] .comm-view-btn {
  background: var(--card);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .comm-view-btn.is-active { background: var(--navy); color: #fff; }
html[data-theme="dark"] :is(
  .comm-table th.is-today,
  .comm-table td.is-today,
  .rpt-table th.is-today,
  .rpt-table td.is-today,
  .carrier-results table.data tr.selected td
) {
  background: rgba(96, 165, 250, 0.16);
  color: var(--text);
}
html[data-theme="dark"] .page [style*="background:#fff"],
html[data-theme="dark"] .page [style*="background: #fff"],
html[data-theme="dark"] .page [style*="background:#ffffff"],
html[data-theme="dark"] .page [style*="background:#f8fafc"],
html[data-theme="dark"] .page [style*="background:#f4f7fb"] {
  background: #121c2e !important;
  color: var(--text);
}

html[data-theme="dark"] #profile-services .svc-note.svc-note-warn,
html[data-theme="dark"] .staff-notice {
  background: #3a1c1c;
  border-color: #c83232;
  color: #fecaca;
}

/* Cart bar is already a dark strip; keep its white action button. */
html[data-theme="dark"] .crm-cart-bar .btn-primary {
  background: #fff;
  color: var(--navy);
  border-color: transparent;
}

/* Status chips keep their light-mode pastels on the dark page. */
html[data-theme="dark"] .pill.overdue,
html[data-theme="dark"] .pill.danger { background: #fee2e2; color: #991b1b; }
html[data-theme="dark"] .pill.due-soon,
html[data-theme="dark"] .pill.warn { background: #ffedd5; color: #9a3412; }
html[data-theme="dark"] .pill.in-progress,
html[data-theme="dark"] .pill.info { background: #dbeafe; color: #1d4ed8; }
html[data-theme="dark"] .pill.complete,
html[data-theme="dark"] .pill.ok { background: #dcfce7; color: #166534; }

html[data-theme="dark"] .pill.cs-tone-new,
html[data-theme="dark"] .cs-status-btn.cs-tone-new,
html[data-theme="dark"] .cs-status-opt.cs-tone-new { background: #e8eef5; color: #15324f; border-color: #d3deea; }
html[data-theme="dark"] .pill.cs-tone-contacted,
html[data-theme="dark"] .cs-status-btn.cs-tone-contacted,
html[data-theme="dark"] .cs-status-opt.cs-tone-contacted { background: #dbeafe; color: #1e40af; border-color: #bfdbfe; }
html[data-theme="dark"] .pill.cs-tone-in_progress,
html[data-theme="dark"] .cs-status-btn.cs-tone-in_progress,
html[data-theme="dark"] .cs-status-opt.cs-tone-in_progress { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
html[data-theme="dark"] .pill.cs-tone-appointment,
html[data-theme="dark"] .cs-status-btn.cs-tone-appointment,
html[data-theme="dark"] .cs-status-opt.cs-tone-appointment { background: #fee2e2; color: #991b1b; border-color: #fecaca; }
html[data-theme="dark"] .pill.cs-tone-completed,
html[data-theme="dark"] .cs-status-btn.cs-tone-completed,
html[data-theme="dark"] .cs-status-opt.cs-tone-completed { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
html[data-theme="dark"] .pill.cs-tone-follow_up_needed,
html[data-theme="dark"] .cs-status-btn.cs-tone-follow_up_needed,
html[data-theme="dark"] .cs-status-opt.cs-tone-follow_up_needed { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
html[data-theme="dark"] .pill.cs-tone-closed,
html[data-theme="dark"] .cs-status-btn.cs-tone-closed,
html[data-theme="dark"] .cs-status-opt.cs-tone-closed { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }
html[data-theme="dark"] .pill.cs-tone-waiting_on_customer,
html[data-theme="dark"] .cs-status-btn.cs-tone-waiting_on_customer,
html[data-theme="dark"] .cs-status-opt.cs-tone-waiting_on_customer { background: #ffedd5; color: #9a3412; border-color: #fed7aa; }
html[data-theme="dark"] .pill.cs-tone-waiting_third_party,
html[data-theme="dark"] .cs-status-btn.cs-tone-waiting_third_party,
html[data-theme="dark"] .cs-status-opt.cs-tone-waiting_third_party { background: #ccfbf1; color: #0f766e; border-color: #99f6e4; }
html[data-theme="dark"] .pill.cs-tone-escalated,
html[data-theme="dark"] .cs-status-btn.cs-tone-escalated,
html[data-theme="dark"] .cs-status-opt.cs-tone-escalated { background: #fce7f3; color: #9d174d; border-color: #fbcfe8; }

html[data-theme="dark"] .rpt-pill { background: #e8edf4; color: #1a3a5c; }
html[data-theme="dark"] .rpt-pill.new,
html[data-theme="dark"] .rpt-pill.info { background: #e8f1fb; color: #1a3a5c; }
html[data-theme="dark"] .rpt-pill.reviewing { background: #eef2f7; color: #475569; }
html[data-theme="dark"] .rpt-pill.interview,
html[data-theme="dark"] .rpt-pill.warn { background: #fff7ed; color: #b45309; }
html[data-theme="dark"] .rpt-pill.hired,
html[data-theme="dark"] .rpt-pill.ok { background: #ecfdf3; color: #1a7a4c; }
html[data-theme="dark"] .rpt-pill.declined,
html[data-theme="dark"] .rpt-pill.danger { background: #fef2f2; color: #c83232; }

html[data-theme="dark"] .role-badge { background: #e8edf4; color: #1a3a5c; }
html[data-theme="dark"] .role-badge.admin,
html[data-theme="dark"] .role-badge.executive { background: #fef2f2; color: #a82828; }
html[data-theme="dark"] .role-badge.customer_service,
html[data-theme="dark"] .role-badge.customer_service_manager { background: #e8f1fb; color: #1a3a5c; }
html[data-theme="dark"] .role-badge.campaign_manager { background: #eef2f7; color: #475569; }

html[data-theme="dark"] #profile-services tr.svc-group td,
html[data-theme="dark"] #profile-services tr.svc-group .svc-label {
  color: #f8fafc !important;
  border-top-color: var(--border);
}
html[data-theme="dark"] #profile-services tr.svc-group-fmcsa td { background: #15233a !important; }
html[data-theme="dark"] #profile-services tr.svc-group-authority td { background: #241838 !important; }
html[data-theme="dark"] #profile-services tr.svc-group-drug td { background: #0c3344 !important; }
html[data-theme="dark"] #profile-services tr.svc-group-training td { background: #3f3512 !important; }
html[data-theme="dark"] #profile-services tr.svc-group-safety td { background: #123324 !important; }
html[data-theme="dark"] #profile-services tr.svc-group-business td { background: #243044 !important; }
html[data-theme="dark"] #profile-services tr.svc-group-other td { background: #1a2330 !important; }

/* Urgent queue rows keep a light pink fill in the page stylesheet.
   That sheet loads after this file, so the dark fill and the chip
   colors need !important or the row goes back to pale text on pink. */
html[data-theme="dark"] .cs-qrow.is-urgent > summary,
html[data-theme="dark"] .cs-qrow.is-urgent[open] > summary {
  background: #3d1c24 !important;
  color: #fff7f7 !important;
}
html[data-theme="dark"] .cs-qrow.is-urgent .cs-svc-name,
html[data-theme="dark"] .cs-qrow.is-urgent > summary a,
html[data-theme="dark"] .cs-qrow.is-urgent > summary strong {
  color: #fff7f7 !important;
}
html[data-theme="dark"] .cs-qrow.is-urgent > summary .cs-muted {
  color: #f3c6cc !important;
}
html[data-theme="dark"] .cs-qrow.is-urgent .cs-spanish {
  color: #fda4af !important;
}
html[data-theme="dark"] .cs-qrow.is-urgent .pill.danger {
  background: #991b1b !important;
  color: #fff !important;
}
html[data-theme="dark"] .cs-qrow.is-urgent .pill.info {
  background: #1e3a5f !important;
  color: #e0f2fe !important;
  box-shadow: inset 0 0 0 1px #60a5fa;
}

/* Customer profile hardcodes navy ink. Those surfaces are dark in this theme. */
html[data-theme="dark"] .profile-facts .v,
html[data-theme="dark"] .profile-facts .profile-tz,
html[data-theme="dark"] .profile-line .v,
html[data-theme="dark"] .profile-person,
html[data-theme="dark"] .profile-hero a:not(.btn):not(.pill),
html[data-theme="dark"] .profile-address,
html[data-theme="dark"] .profile-rep-edit,
html[data-theme="dark"] .usdot-pending-note,
html[data-theme="dark"] .usdot-suggestion,
html[data-theme="dark"] .profile-edit-contact > summary,
html[data-theme="dark"] .profile-edit-contact .channel-row .channel-val,
html[data-theme="dark"] .profile-motus-head,
html[data-theme="dark"] #profile-services .svc-qty label,
html[data-theme="dark"] .note-composer textarea {
  color: var(--text);
}
html[data-theme="dark"] .profile-facts .v.urgent {
  color: #fecaca !important;
  background: #3d1c24;
  border-color: #7f1d1d;
}
html[data-theme="dark"] .usdot-attach input,
html[data-theme="dark"] .note-composer textarea,
html[data-theme="dark"] textarea.letter-body,
html[data-theme="dark"] select.letter-sign-as {
  background: #121c2e;
  color: #f8fafc;
  border-color: var(--border);
}
/* Profile page styles hardcode navy ink and load after this file.
   Letter text, notes, and the letter composer were staying navy on dark. */
html[data-theme="dark"] #profile-activity td,
html[data-theme="dark"] #profile-activity td.note-body,
html[data-theme="dark"] .profile-note,
html[data-theme="dark"] .note-composer textarea,
html[data-theme="dark"] textarea.letter-body,
html[data-theme="dark"] .profile-poc .poc-val,
html[data-theme="dark"] .lang-switch-label {
  color: #f8fafc !important;
}
html[data-theme="dark"] .note-composer textarea,
html[data-theme="dark"] textarea.letter-body,
html[data-theme="dark"] select.letter-sign-as {
  background: #121c2e !important;
  color: #f8fafc !important;
  border-color: var(--border) !important;
  color-scheme: dark;
}
html[data-theme="dark"] iframe.letter-preview {
  background: #f4f7fb !important;
  color-scheme: light;
}