/**
 * Maps Phoenix (theme.min.css) shell to C360 navy/teal.
 * Load after: theme.min.css, user.min.css, c360-tokens.css, c360-shell.css
 */
html:has(body.broker-c360-ui) {
  overscroll-behavior-y: none;
}

body.broker-c360-ui {
  font-family: var(--fb);
  color: var(--ch);
  background: var(--bg);
  --phoenix-font-sans-serif: var(--fs);
  --phoenix-body-font-family: var(--fb);
  -webkit-font-smoothing: antialiased;
  /* Avoid rubber-band chaining to the document when inner panels handle scroll */
  overscroll-behavior-y: none;

  /* AA SuperBroker / Cardinal teal — authoritative primary; BrandingConfig colours are ignored. */
  --phoenix-primary: var(--t, #5cbdb4);
  --phoenix-primary-rgb: 92, 189, 180;
  --phoenix-primary-text-emphasis: var(--t, #5cbdb4);
  --phoenix-primary-bg-subtle: var(--tlt, #eaf8f7);
  --phoenix-primary-dark: var(--t2, #3a9b92);
  --phoenix-primary-dark-rgb: 58, 155, 146;
  --phoenix-primary-darker: var(--t2, #3a9b92);
  --phoenix-primary-darker-rgb: 58, 155, 146;
  --phoenix-primary-light: #7cccc4;
  --phoenix-primary-light-rgb: 124, 204, 196;
  --phoenix-primary-lighter: var(--tlt, #eaf8f7);
  --phoenix-primary-lighter-rgb: 234, 248, 247;

  --navy: #1a252e;
  --phoenix-navbar-vertical-width: var(--sb-w);
  --phoenix-navbar-vertical-bg-color: #1a252e;
  --phoenix-navbar-vertical-border-color: rgba(255, 255, 255, 0.07);
  --phoenix-navbar-vertical-label-color: rgba(255, 255, 255, 0.45);
  --phoenix-navbar-vertical-link-color: rgba(255, 255, 255, 0.62);
  --phoenix-navbar-vertical-link-hover-color: #fff;
  --phoenix-navbar-vertical-link-hover-bg: rgba(255, 255, 255, 0.06);
  --phoenix-navbar-vertical-link-active-color: #fff;
  --phoenix-navbar-vertical-dropdown-indicator-color: rgba(255, 255, 255, 0.45);
  --phoenix-navbar-vertical-hr-color: rgba(255, 255, 255, 0.08);
  --phoenix-navbar-vertical-collapsed-menu-bg: var(--navy2);

  --phoenix-navbar-top-bg-color: #1a252e;
  --phoenix-navbar-top-border-color: rgba(255, 255, 255, 0.08);
  --phoenix-navbar-top-link-color: rgba(255, 255, 255, 0.88);
  --phoenix-navbar-top-menu-bg-color: var(--navy2);
  --phoenix-navbar-top-link-hover-color: #fff;
  --phoenix-navbar-top-link-hover-bg: rgba(255, 255, 255, 0.08);
  --phoenix-navbar-top-link-active-color: var(--t);
  --phoenix-navbar-top-dropdown-color: rgba(255, 255, 255, 0.92);
  --phoenix-navbar-top-dropdown-hover-bg: rgba(255, 255, 255, 0.06);
  --phoenix-navbar-top-height: 3rem;
}

.broker-c360-ui .navbar-vertical .navbar-vertical-label {
  color: rgba(255, 255, 255, 0.45) !important;
}

.broker-c360-ui .navbar-vertical .nav-link.dropdown-indicator .nav-link-text,
.broker-c360-ui .navbar-vertical .nav-header-text {
  font-family: var(--fb);
}

.broker-c360-ui .navbar-vertical .nav-link:not(.dropdown-indicator):hover,
.broker-c360-ui .navbar-vertical .nav-sub-item:hover {
  box-shadow: inset 3px 0 0 var(--t);
}

.broker-c360-ui .navbar-vertical .nav-link.nav-header-active,
.broker-c360-ui .navbar-vertical .nav-sub-item.active {
  background: rgba(92, 189, 180, 0.14) !important;
  box-shadow: inset 3px 0 0 var(--t);
}

.broker-c360-ui .navbar-vertical .badge {
  font-family: var(--fs);
}

/* Choices.js — override Phoenix primary blue highlight; soft teal wash system-wide */
body.broker-c360-ui .choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
body.broker-c360-ui .choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
body.broker-c360-ui .choices .choices__list--dropdown .choices__item--selectable:hover,
body.broker-c360-ui .choices .choices__list[aria-expanded] .choices__item--selectable:hover {
  background-color: var(--tlt, #eaf8f7) !important;
  color: var(--navy, #1a252e) !important;
}

body.broker-c360-ui .choices .choices__list--dropdown .choices__item--selectable.is-selected,
body.broker-c360-ui .choices .choices__list[aria-expanded] .choices__item--selectable.is-selected {
  background-color: var(--tp, rgba(92, 189, 180, 0.12)) !important;
  color: var(--t2, #3a9b92) !important;
}

/* Scope to real top navbar only — #so overlay also uses .navbar-top-search-box */
.broker-c360-ui .navbar-top .search-input,
.broker-c360-ui .navbar-top input.form-control.search-input,
.broker-c360-ui .navbar-top .navbar-top-search-box .form-control {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  color: #fff !important;
}

.broker-c360-ui .navbar-top .search-input::placeholder,
.broker-c360-ui .navbar-top .navbar-top-search-box .form-control::placeholder {
  color: rgba(255, 255, 255, 0.42);
}

.broker-c360-ui .navbar-top .btn-subtle-secondary {
  color: rgba(255, 255, 255, 0.75);
}

.broker-c360-ui .navbar-top .btn-subtle-secondary:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

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

.broker-c360-ui .speech-bubble {
  font-family: var(--fb);
}

/* C360 topbar: dropdowns / custom menus must not be clipped by the Phoenix navbar row */
.broker-c360-ui .navbar-top,
.broker-c360-ui .navbar-top .navbar-collapse,
.broker-c360-ui .navbar-top .navbar-collapse > .d-flex {
  overflow: visible !important;
}

/*
 * Phoenix reserves ~15.875rem on .navbar-logo for brand + search (vertical layout).
 * C360 top bar only has the hamburger here — reset width so the search strip starts top-left.
 */
.broker-c360-ui .navbar-top .navbar-logo {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto;
}

/* Pull search row closer to the viewport edge. Background colours: c360-theme-modes.css */
body.broker-c360-ui .navbar-top {
  padding-left: 0.5rem;
  padding-right: 1rem;
}

body.broker-c360-ui.mixed-mode .navbar-vertical,
body.broker-c360-ui.dark-mode .navbar-vertical {
  background-color: var(--navy) !important;
}

body.broker-c360-ui.dark-mode .navbar-vertical {
  background-color: #161b22 !important;
}

/* POPIA marketing-consent checkbox (LD-05) - portal teal box and black label instead of the
   Phoenix theme's green. Covers every client-creation screen plus Convert to client. */
body.broker-c360-ui :is(#chkMarketing, #cvtlm-marketing, #wbCcMarketing, #wbCcCompanyMarketing).form-check-input {
    border-color: var(--t, #5cbdb4) !important;
}
body.broker-c360-ui :is(#chkMarketing, #cvtlm-marketing, #wbCcMarketing, #wbCcCompanyMarketing).form-check-input:checked {
    background-color: var(--t, #5cbdb4) !important;
    border-color: var(--t, #5cbdb4) !important;
}
body.broker-c360-ui :is(#chkMarketing, #cvtlm-marketing, #wbCcMarketing, #wbCcCompanyMarketing).form-check-input:focus {
    border-color: var(--t, #5cbdb4) !important;
    box-shadow: 0 0 0 3px var(--tp, rgba(92, 189, 180, 0.25)) !important;
}
body.broker-c360-ui :is(label[for="chkMarketing"], label[for="cvtlm-marketing"], label[for="wbCcMarketing"], label[for="wbCcCompanyMarketing"]),
body.broker-c360-ui :is(#chkMarketing, #cvtlm-marketing, #wbCcMarketing, #wbCcCompanyMarketing):checked ~ .form-check-label {
    color: #000 !important;
}