/**
 * C360 journey theme modes (Option A): body.dark-mode | body.mixed-mode | light (neither).
 * Source behaviour + palette: docs/C360_Cloud_Complete Initial Journey v4.html
 * Load after: c360-topnav.css, c360-sidebar.css, c360-chrome-bars.css
 */

/* ── Dark mode: design tokens (content + chrome follow vars) ───────────── */
/* Include html[data-bs-theme="dark"] so tokens match Phoenix/Bootstrap when body.dark-mode was missing */
body.broker-c360-ui.dark-mode,
html[data-bs-theme="dark"] body.broker-c360-ui {
  --ch: #e6edf3;
  --ch2: #8b949e;
  --ch3: #6e7681;
  --bg: #0d1117;
  --surface: #161b22;
  --border: rgba(240, 246, 252, 0.1);
  --border2: rgba(240, 246, 252, 0.06);
  --tlt: rgba(92, 189, 180, 0.12);
}

body.broker-c360-ui.dark-mode .navbar-top {
  background-color: #0d1117 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.broker-c360-ui.dark-mode .c360-topbar {
  background: #0d1117;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

body.broker-c360-ui.dark-mode #sidebar.sidebar {
  background: #161b22;
  border-right: 1px solid #30363d;
  box-shadow: 2px 0 14px rgba(0, 0, 0, 0.35);
}

body.broker-c360-ui.dark-mode #sidebar .sb-brand {
  border-bottom-color: #30363d;
}

body.broker-c360-ui.dark-mode #sidebar .sb-nav {
  background-color: #161b22;
}

body.broker-c360-ui.dark-mode #sidebar .sb-bottom {
  border-top-color: #30363d;
}

body.broker-c360-ui.dark-mode .c360-top-nav-area {
  background: var(--surface);
  border-bottom-color: var(--border);
}

body.broker-c360-ui.dark-mode .c360-tn-row {
  background: var(--surface);
  border-bottom: 2px solid var(--border);
}

body.broker-c360-ui.dark-mode .c360-tn-row .tn-item {
  color: var(--ch2);
}

body.broker-c360-ui.dark-mode .c360-tn-row .tn-item.on {
  color: var(--t);
}

body.broker-c360-ui.dark-mode .c360-tn-sep {
  background: var(--border);
}

body.broker-c360-ui.dark-mode .nav-back-bar {
  background: #0d1117;
  border-bottom-color: var(--border);
}

body.broker-c360-ui.dark-mode .actbar {
  background: var(--surface);
  border-bottom-color: var(--border);
}

body.broker-c360-ui.dark-mode .so-box,
body.broker-c360-ui.dark-mode .qa-box,
body.broker-c360-ui.dark-mode .np,
html[data-bs-theme="dark"] body.broker-c360-ui .so-box,
html[data-bs-theme="dark"] body.broker-c360-ui .qa-box,
html[data-bs-theme="dark"] body.broker-c360-ui .np {
  background: var(--surface);
  border-color: var(--border);
}

body.broker-c360-ui.dark-mode .so,
html[data-bs-theme="dark"] body.broker-c360-ui .so {
  background: rgba(0, 0, 0, 0.65);
}

body.broker-c360-ui.dark-mode .qam {
  background: rgba(0, 0, 0, 0.55);
}

body.broker-c360-ui.dark-mode #compose-ov .c360-compose-card {
  background: var(--surface);
}

body.broker-c360-ui.dark-mode #compose-ov .c360-compose-body {
  color: var(--ch2);
}

/* Dropdown panels (theme menu, action-bar menus) — base c360-topnav uses background:#fff */
body.broker-c360-ui.dark-mode .ab-dd-menu {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

body.broker-c360-ui.dark-mode .ab-dd-item {
  color: var(--ch);
}

body.broker-c360-ui.dark-mode .ab-dd-item:hover {
  background: var(--tlt);
  color: var(--t);
}

body.broker-c360-ui.dark-mode #dd-theme .ab-dd-menu > div[style*="height:1px"] {
  background: var(--border) !important;
}

body.broker-c360-ui.dark-mode .c360-topbar .tb-icon .bdg {
  border-color: #0d1117;
}

/* Full-screen search overlay (#so) — journey input + chips / rows */
body.broker-c360-ui.dark-mode #so .so-box {
  background: var(--surface);
}

body.broker-c360-ui.dark-mode #so .so-inp {
  background: #0d1117 !important;
  border-bottom-color: var(--border) !important;
  color: var(--ch) !important;
}

body.broker-c360-ui.dark-mode #so .so-inp::placeholder {
  color: var(--ch3);
  opacity: 1;
}

body.broker-c360-ui.dark-mode #so .c360-so-close-x {
  color: var(--ch2);
}

body.broker-c360-ui.dark-mode #so .c360-so-close-x:hover {
  color: var(--ch);
  background: rgba(92, 189, 180, 0.1);
}

body.broker-c360-ui.dark-mode #so .so-chip {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ch);
}

body.broker-c360-ui.dark-mode #so .so-chip:hover {
  border-color: var(--t);
  color: var(--t);
}

/*
 * Journey v4: .dark-mode .so-row:hover { background: var(--tlt) }
 * index.css uses .recently-searched-item:hover / .recently-worked-item:hover with
 * var(--phoenix-secondary-lighter) !important — reads as white on dark; override here.
 */
body.broker-c360-ui.dark-mode #so .so-row:hover,
body.broker-c360-ui.dark-mode #so .recently-searched-item:hover,
body.broker-c360-ui.dark-mode #so .recently-worked-item:hover {
  background: var(--tlt) !important;
}

/* Chips: Journey hover is border + teal text only (no pale wash) */
body.broker-c360-ui.dark-mode #so .so-chip.recently-searched-item:hover {
  background: var(--surface) !important;
}

body.broker-c360-ui.dark-mode #so .recently-searched-item:active,
body.broker-c360-ui.dark-mode #so .recently-worked-item:active {
  background: rgba(92, 189, 180, 0.15) !important;
}

body.broker-c360-ui.dark-mode #so .so-foot {
  border-top-color: var(--border);
}

/* Same as above when Bootstrap/Phoenix dark is on <html> — fixes white search modal if body.dark-mode rules did not apply */
html[data-bs-theme="dark"] body.broker-c360-ui #so .so-box {
  background: var(--surface);
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .so-inp {
  background: #0d1117 !important;
  border-bottom-color: var(--border) !important;
  color: var(--ch) !important;
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .so-inp::placeholder {
  color: var(--ch3);
  opacity: 1;
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .c360-so-close-x {
  color: var(--ch2);
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .c360-so-close-x:hover {
  color: var(--ch);
  background: rgba(92, 189, 180, 0.1);
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .so-chip {
  background: var(--surface);
  border-color: var(--border);
  color: var(--ch);
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .so-chip:hover {
  border-color: var(--t);
  color: var(--t);
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .so-row:hover,
html[data-bs-theme="dark"] body.broker-c360-ui #so .recently-searched-item:hover,
html[data-bs-theme="dark"] body.broker-c360-ui #so .recently-worked-item:hover {
  background: var(--tlt) !important;
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .so-chip.recently-searched-item:hover {
  background: var(--surface) !important;
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .recently-searched-item:active,
html[data-bs-theme="dark"] body.broker-c360-ui #so .recently-worked-item:active {
  background: rgba(92, 189, 180, 0.15) !important;
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .so-foot {
  border-top-color: var(--border);
  color: var(--ch3);
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .dropdown-menu.c360-so-dropdown {
  background-color: var(--surface) !important;
  color: var(--ch);
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .accordion-button {
  background-color: transparent !important;
  color: var(--ch) !important;
  box-shadow: none;
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .accordion-button:not(.collapsed) {
  color: var(--ch) !important;
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .form-floating > .form-control {
  background-color: #0d1117 !important;
  border-color: var(--border) !important;
  color: var(--ch) !important;
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .btn-outline-secondary {
  color: var(--ch2);
  border-color: var(--border);
}

html[data-bs-theme="dark"] body.broker-c360-ui #so .btn-outline-secondary:hover {
  color: var(--ch);
  background: var(--tlt);
  border-color: var(--t);
}

/*
 * Light + Classic (mixed): Journey default `.so-row:hover { background: var(--tlt) }`
 * (docs/C360_Cloud_Complete Initial Journey v4.html — --tlt #EAF8F7).
 * index.css uses var(--phoenix-secondary-lighter) !important on .recently-* — replace inside #so only.
 */
body.broker-c360-ui:not(.dark-mode) #so .so-row:hover,
body.broker-c360-ui:not(.dark-mode) #so .recently-searched-item:hover,
body.broker-c360-ui:not(.dark-mode) #so .recently-worked-item:hover {
  background: var(--tlt) !important;
}

body.broker-c360-ui:not(.dark-mode) #so .so-chip.recently-searched-item:hover {
  background: var(--surface) !important;
}

body.broker-c360-ui:not(.dark-mode) #so .recently-searched-item:active,
body.broker-c360-ui:not(.dark-mode) #so .recently-worked-item:active {
  background: var(--tp) !important;
}

/*
 * Dark mode — routed main content (#content-container): tables + titles
 * Journey reference: .dark-mode .tbl … (docs/C360_Cloud_Complete Initial Journey v4.html)
 * Typography uses var(--navy) for headings; override so text is not black on dark --bg.
 */
body.broker-c360-ui.dark-mode #content-container h1,
body.broker-c360-ui.dark-mode #content-container .h1,
body.broker-c360-ui.dark-mode #content-container h2,
body.broker-c360-ui.dark-mode #content-container .h2,
body.broker-c360-ui.dark-mode #content-container h3,
body.broker-c360-ui.dark-mode #content-container .h3,
body.broker-c360-ui.dark-mode #content-container h4,
body.broker-c360-ui.dark-mode #content-container .h4,
body.broker-c360-ui.dark-mode #content-container h5,
body.broker-c360-ui.dark-mode #content-container .h5,
body.broker-c360-ui.dark-mode #content-container h6,
body.broker-c360-ui.dark-mode #content-container .h6 {
  color: var(--ch);
}

/* Same as light mode: modal chrome headings follow .modal-header color */
body.broker-c360-ui.dark-mode #content-container .modal .modal-header :is(h1, h2, h3, h4, h5, h6),
body.broker-c360-ui.dark-mode .c360-journey-info-modal .modal-header :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

body.broker-c360-ui.dark-mode #content-container .c360-type-page-title,
body.broker-c360-ui.dark-mode #content-container .c360-type-card-title,
body.broker-c360-ui.dark-mode #content-container .c360-type-metric-lg {
  color: var(--ch);
}

body.broker-c360-ui.dark-mode #content-container .text-body,
body.broker-c360-ui.dark-mode #content-container .text-body-emphasis {
  color: var(--ch) !important;
}

body.broker-c360-ui.dark-mode #content-container .text-body-secondary {
  color: var(--ch2) !important;
}

/* Bootstrap 5 / Phoenix tables — force dark surface + light text */
body.broker-c360-ui.dark-mode #content-container .table {
  --bs-table-color: var(--ch);
  --bs-table-bg: var(--surface);
  --bs-table-border-color: var(--border);
  --bs-table-striped-bg: rgba(92, 189, 180, 0.05);
  --bs-table-striped-color: var(--ch);
  --bs-table-active-bg: rgba(92, 189, 180, 0.1);
  --bs-table-active-color: var(--ch);
  --bs-table-hover-bg: rgba(92, 189, 180, 0.06);
  --bs-table-hover-color: var(--ch);
  color: var(--ch);
  border-color: var(--border);
}

body.broker-c360-ui.dark-mode #content-container .table > :not(caption) > * > * {
  color: var(--ch);
  border-bottom-color: var(--border);
  box-shadow: none;
}

body.broker-c360-ui.dark-mode #content-container .table thead th,
body.broker-c360-ui.dark-mode #content-container .table thead td {
  background-color: var(--surface) !important;
  color: var(--ch2) !important;
  border-bottom-color: var(--border) !important;
}

body.broker-c360-ui.dark-mode #content-container .table tbody td,
body.broker-c360-ui.dark-mode #content-container .table tbody th {
  background-color: transparent;
  color: var(--ch);
  border-color: var(--border);
}

body.broker-c360-ui.dark-mode #content-container .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(92, 189, 180, 0.04);
  color: var(--ch);
}

body.broker-c360-ui.dark-mode #content-container .table-hover > tbody > tr:hover > * {
  background-color: rgba(92, 189, 180, 0.06);
  color: var(--ch);
}

body.broker-c360-ui.dark-mode #content-container .table-light {
  --bs-table-bg: var(--surface);
  --bs-table-color: var(--ch2);
  color: var(--ch2);
}

body.broker-c360-ui.dark-mode #content-container .table-responsive {
  border-color: var(--border);
}

/* Journey-style .tbl (modules that use class tbl) */
body.broker-c360-ui.dark-mode #content-container .tbl thead th {
  background: var(--surface);
  color: var(--ch2);
  border-bottom-color: var(--border);
}

body.broker-c360-ui.dark-mode #content-container .tbl tbody tr {
  border-bottom-color: var(--border);
}

body.broker-c360-ui.dark-mode #content-container .tbl tbody tr:hover {
  background: rgba(92, 189, 180, 0.06);
}

body.broker-c360-ui.dark-mode #content-container .tbl td {
  color: var(--ch);
  border-bottom-color: var(--border2);
}

body.broker-c360-ui.dark-mode #content-container .tbl-link {
  color: var(--t);
}

body.broker-c360-ui.dark-mode #content-container .tbl-pager {
  color: var(--ch3);
  border-top-color: var(--border);
}

/* Cards / panels wrapping tables */
body.broker-c360-ui.dark-mode #content-container .card {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--ch);
}

body.broker-c360-ui.dark-mode #content-container .card-header,
body.broker-c360-ui.dark-mode #content-container .card-footer {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--ch);
}

body.broker-c360-ui.dark-mode #content-container .bg-white {
  background-color: var(--surface) !important;
}

/*
 * Phoenix theme utilities (.bg-body-emphasis etc.) use rgba(var(--phoenix-*-bg-rgb)) !important
 * and stay light unless overridden — e.g. Business Performance Reports (#businessIntelligenceTable).
 */
body.broker-c360-ui.dark-mode #content-container .bg-body {
  background-color: var(--bg) !important;
  color: var(--ch);
}

body.broker-c360-ui.dark-mode #content-container .bg-body-secondary,
body.broker-c360-ui.dark-mode #content-container .bg-body-emphasis,
body.broker-c360-ui.dark-mode #content-container .bg-body-tertiary,
body.broker-c360-ui.dark-mode #content-container .bg-body-quaternary,
body.broker-c360-ui.dark-mode #content-container .bg-body-highlight {
  background-color: var(--surface) !important;
  color: var(--ch);
}

/* JSON table module */
body.broker-c360-ui.dark-mode #content-container .json-tbl {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--ch);
}

body.broker-c360-ui.dark-mode #content-container .json-tbl-header {
  background: rgba(92, 189, 180, 0.12);
  color: var(--ch2);
  border-color: var(--border);
}

body.broker-c360-ui.dark-mode #content-container .json-tbl-row {
  border-color: var(--border);
}

body.broker-c360-ui.dark-mode #content-container .json-tbl-row td,
body.broker-c360-ui.dark-mode #content-container .json-tbl-row th {
  color: var(--ch);
  border-color: var(--border);
}

/* Page table utility (index.css) */
body.broker-c360-ui.dark-mode #content-container .page-table,
body.broker-c360-ui.dark-mode #content-container .page-table-header {
  background: var(--surface);
  color: var(--ch);
  border-color: var(--border);
}

/*
 * Form controls in routed content — journey: .dark-mode input,select,textarea
 * Table toolbar search / filters use .form-control, .search-input, etc.
 */
body.broker-c360-ui.dark-mode #content-container {
  --bs-body-bg: #0d1117;
  --bs-secondary-bg: #161b22;
  --bs-tertiary-bg: #21262d;
  --bs-border-color: rgba(240, 246, 252, 0.12);
  --bs-body-color: var(--ch);
}

body.broker-c360-ui.dark-mode #content-container .form-control,
body.broker-c360-ui.dark-mode #content-container .form-select,
body.broker-c360-ui.dark-mode #content-container textarea {
  background-color: #0d1117 !important;
  border-color: var(--border) !important;
  color: var(--ch) !important;
}

body.broker-c360-ui.dark-mode #content-container .form-control::placeholder,
body.broker-c360-ui.dark-mode #content-container textarea::placeholder {
  color: var(--ch3);
}

body.broker-c360-ui.dark-mode #content-container .form-control:focus,
body.broker-c360-ui.dark-mode #content-container .form-select:focus,
body.broker-c360-ui.dark-mode #content-container textarea:focus {
  background-color: #0d1117 !important;
  border-color: var(--t) !important;
  color: var(--ch) !important;
  box-shadow: 0 0 0 0.2rem rgba(92, 189, 180, 0.2);
}

body.broker-c360-ui.dark-mode #content-container .form-control:disabled,
body.broker-c360-ui.dark-mode #content-container .form-select:disabled,
body.broker-c360-ui.dark-mode #content-container textarea:disabled {
  background-color: var(--surface) !important;
  color: var(--ch3) !important;
  opacity: 0.9;
}

body.broker-c360-ui.dark-mode #content-container .form-control-plaintext {
  color: var(--ch) !important;
}

body.broker-c360-ui.dark-mode #content-container .form-control-color {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

body.broker-c360-ui.dark-mode #content-container .input-group-text {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ch2) !important;
}

body.broker-c360-ui.dark-mode #content-container .form-floating > label {
  color: var(--ch3);
}

body.broker-c360-ui.dark-mode #content-container .form-floating > .form-control:focus ~ label,
body.broker-c360-ui.dark-mode #content-container .form-floating > .form-control:not(:placeholder-shown) ~ label,
body.broker-c360-ui.dark-mode #content-container .form-floating > .form-select ~ label {
  color: var(--ch2);
}

/* Search / filter inputs (class names used on table toolbars) */
body.broker-c360-ui.dark-mode #content-container input[type='search'],
body.broker-c360-ui.dark-mode #content-container input.search-input,
body.broker-c360-ui.dark-mode #content-container .search-input,
body.broker-c360-ui.dark-mode #content-container .fuzzy-search {
  background-color: #0d1117 !important;
  border-color: var(--border) !important;
  color: var(--ch) !important;
}

body.broker-c360-ui.dark-mode #content-container input[type='search']::placeholder,
body.broker-c360-ui.dark-mode #content-container input.search-input::placeholder,
body.broker-c360-ui.dark-mode #content-container .search-input::placeholder {
  color: var(--ch3);
}

body.broker-c360-ui.dark-mode #content-container .form-check-input {
  background-color: #0d1117;
  border-color: var(--border);
}

body.broker-c360-ui.dark-mode #content-container .form-check-input:checked {
  background-color: var(--t);
  border-color: var(--t);
}

/* JSON table inline inputs (override phoenix / module defaults) */
body.broker-c360-ui.dark-mode #content-container .json-tbl .form-control,
body.broker-c360-ui.dark-mode #content-container .json-tbl-input {
  background-color: #0d1117 !important;
  border-color: var(--border) !important;
  color: var(--ch) !important;
}

/* ── Mixed mode (Classic): dark navy chrome + light content tokens ─────── */
body.broker-c360-ui.mixed-mode .navbar-top {
  background-color: var(--navy) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.broker-c360-ui.mixed-mode .c360-topbar {
  background: var(--navy);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

body.broker-c360-ui.mixed-mode .c360-topbar .theme-toggle {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.6);
}

body.broker-c360-ui.mixed-mode .c360-topbar .theme-toggle:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.12);
}

body.broker-c360-ui.mixed-mode .c360-topbar .tb-search input::placeholder {
  color: rgba(255, 255, 255, 0.62);
  opacity: 1;
}

body.broker-c360-ui.mixed-mode #so .so-inp::placeholder {
  color: var(--ch2);
  opacity: 1;
}

/* ── Light panels: journey default — white top strip + light sidebar ───── */
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .navbar-top {
  background-color: #fff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-search input {
  background: var(--bg);
  border-color: var(--border);
  color: var(--ch);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-search input::placeholder {
  color: var(--ch2);
  opacity: 1;
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-search input:focus {
  border-color: var(--t);
  background: #fff;
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #so .so-inp::placeholder {
  color: var(--ch2);
  opacity: 1;
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-search-ico {
  color: var(--ch3);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-icon {
  color: var(--ch2);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-icon:hover,
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-icon:focus-visible {
  color: var(--t);
  background: var(--tlt);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-icon .bdg {
  border-color: #fff;
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .view-toggle {
  background: var(--bg);
  border-color: var(--border);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .vt-btn {
  color: var(--ch2);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .vt-btn.on {
  background: var(--t);
  color: #fff;
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-aside-toggle {
  background: var(--t);
  color: #fff;
  border: none;
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-aside-toggle.off {
  background: var(--bg);
  color: var(--ch2);
  border: 1.5px solid var(--border);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .tb-aside-toggle:hover {
  filter: brightness(1.05);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .theme-toggle {
  border-color: var(--border);
  background: var(--bg);
  color: var(--ch);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar .theme-toggle:hover {
  border-color: var(--t);
  background: var(--tlt);
  color: var(--t);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar a.tb-icon {
  color: var(--ch2);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar a.tb-icon:hover,
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-topbar a.tb-icon:focus-visible {
  color: var(--t);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar.sidebar {
  background: #fff;
  border-right: 1px solid var(--border);
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.06);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-brand {
  border-bottom-color: var(--border);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .sb-brand-name {
  color: var(--navy);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-brand-sub {
  color: var(--ch3);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .sb-toggle {
  background: var(--t);
  color: #fff;
  box-shadow: 0 2px 8px rgba(92, 189, 180, 0.3);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .sb-toggle:hover {
  background: var(--t2);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar.sidebar.collapsed .sb-toggle {
  background: var(--t);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-nav {
  background-color: #fff;
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-item {
  color: var(--ch2);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-item:hover,
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-item:focus-visible {
  background: var(--tlt);
  color: var(--t);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-nav .sb-item.on,
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-nav .sb-item.on:hover,
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-nav .sb-item.on:focus-visible {
  background: var(--tlt);
  color: var(--t);
  border-left-color: var(--t);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-nav .sb-item svg {
  color: var(--ch3);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-nav .sb-item.on svg {
  color: var(--t);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-nav .sb-item:hover svg,
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-nav .sb-item:focus-visible svg {
  color: var(--t);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-bottom {
  border-top-color: var(--border);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-bottom .sb-item {
  color: var(--ch2);
}

/* Footer profile icon: base sidebar uses white rgba on `svg` — must override for light rail */
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-bottom .sb-item svg {
  color: var(--ch3);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-bottom .sb-item:hover svg,
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) #sidebar .sb-bottom .sb-item:focus-visible svg {
  color: var(--t);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-top-nav-area {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-tn-row .tn-item {
  color: var(--ch2);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .c360-tn-row .tn-item.on {
  color: var(--t);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .navbar-top .search-input,
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .navbar-top input.form-control.search-input,
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .navbar-top-search-box .form-control {
  background: var(--bg) !important;
  border-color: var(--border) !important;
  color: var(--ch) !important;
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .navbar-top .search-input::placeholder,
body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .navbar-top-search-box .form-control::placeholder {
  color: var(--ch3);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .navbar-top .btn-subtle-secondary {
  color: var(--ch2);
}

body.broker-c360-ui:not(.dark-mode):not(.mixed-mode) .navbar-top .btn-subtle-secondary:hover {
  color: var(--t);
  background: var(--tlt);
}