/* Reference theme for authenticated workspaces. CSS only: no route, role, or state changes. */
body:has(#root :is(.main-content, .auth-page-row)) {
  --ref-ink: #171b18;
  --ref-muted: #5f6a63;
  --ref-blue: #2854eb;
  --ref-teal: #4c94a6;
  --ref-lemon: #efeb53;
  --ref-olive: #1c1e10;
  --ref-glass: rgb(255 255 255 / 24%);
  --ref-field: rgb(255 255 255 / 38%);
  --ref-border: rgb(65 83 72 / 16%);
  --ref-popover: #f2f6ed;
  --ref-soft: rgb(213 225 215 / 38%);
  --ref-outline: rgb(255 255 255 / 48%);
  color: var(--ref-ink);
  background: linear-gradient(115deg, #c2d8ed, #d7e5df 60%, #e8edcf) !important;
}
#root div:has(> .main-content) {
  display: flow-root;
  min-height: 100vh;
  color: var(--ref-ink);
  background:
    radial-gradient(ellipse at 92% 12%, #eff2cd 0, transparent 48%),
    radial-gradient(ellipse at 15% 48%, #bfd6ed 0, transparent 52%),
    linear-gradient(115deg, #c2d8ed 0%, #d7e5df 60%, #e8edcf 100%);
  font-family: "Inter", "Poppins", sans-serif;
}
#root .main-content { margin-top: 0; min-height: 100vh; color: var(--ref-ink); }
#root .main-content > .container-fluid { padding: 1.5rem 2rem !important; }
#root .main-content :is(.inner-page-title2, .inner-page-title) {
  color: var(--ref-ink);
  font-weight: 500;
  letter-spacing: -.045em;
}
#root .main-content .inner-page-title2 { font-size: clamp(1.65rem, 2.4vw, 2.4rem); margin-bottom: 1.5rem; }
#root .main-content :is(.text-muted, .text-secondary):not(.badge):not(.btn):not(.text-danger):not(.text-warning):not(.text-success):not(.invalid-feedback):not(.valid-feedback) { color: var(--ref-muted) !important; }
#root .main-content :is(.card-title, .modal-title, .accordion-header) { color: var(--ref-ink); }

/* Shared chrome: retain the rail's geometry, expansion and semantic icons. */
#root .main-content .navbar-main {
  background: rgb(245 249 239 / 32%) !important;
  border: 1px solid var(--ref-outline) !important;
  border-radius: 999px;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(16px) saturate(120%);
  backdrop-filter: blur(16px) saturate(120%);
  min-height: 62px;
}
#root .main-content .navbar-main .nav-item { color: var(--ref-ink); font-size: .8rem; }
#root .main-content .navbar-main .font-24 { font-size: 1.3rem; }
#root .main-content .navbar-main .rounded-circle { outline: 4px solid rgb(255 255 255 / 50%); }
#root .main-content .navbar-main .dropdown-menu:not(.show) { display: none; }
#root .main-content footer.footer {
  position: static;
  width: auto !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--ref-muted);
  margin-top: 1.5rem;
}

/* Glass surfaces: no clipping or containment that could trap menus or sticky cells. */
#root .main-content :is(.card, .multisteps-form__panel, .accordion-item) {
  color: var(--ref-ink);
  background: var(--ref-glass) !important;
  border: 1px solid var(--ref-outline) !important;
  border-radius: 24px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%), 0 6px 24px rgb(50 74 68 / 3%) !important;
}
#root .main-content :is(.card-header, .card-footer, .card-body.bg-white, .multisteps-form__panel.bg-white) {
  background: transparent !important;
  color: var(--ref-ink);
  border-color: var(--ref-border);
}
#root .main-content .card > .card-header { border-radius: 24px 24px 0 0; }
#root .main-content .card > .card-header :is(h4, h5, h6) { color: var(--ref-ink); font-weight: 500; }
#root .main-content .accordion-button { background: var(--ref-glass); color: var(--ref-ink); box-shadow: none; }
#root .main-content .accordion-button:not(.collapsed) { background: var(--ref-soft); color: var(--ref-ink); }

/* Buttons retain destructive, warning and status variants. */
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas, .swal2-popup) .btn {
  border-radius: 999px !important;
  box-shadow: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 500;
}
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) :is(.btn-primary, .btn.bg-gradient-primary, .btn.bg-primary) {
  background: var(--ref-olive) !important;
  border-color: var(--ref-olive) !important;
  color: #f5f5eb !important;
}
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) :is(.btn-primary, .btn.bg-gradient-primary, .btn.bg-primary):hover:not(:disabled) {
  background: #343823 !important;
  border-color: #343823 !important;
}
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) :is(.btn-outline-primary, .btn.bg-gradient-dark) {
  background: var(--ref-field) !important;
  color: var(--ref-ink) !important;
  border: 1px solid var(--ref-border) !important;
}
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) :is(.btn-outline-primary, .btn.bg-gradient-dark):hover:not(:disabled) { background: var(--ref-soft) !important; }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) .btn-link { color: var(--ref-blue); }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) .btn:disabled { opacity: .5; }

/* Form states and native control affordances remain intact. */
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) :is(.form-control, .form-select, .dataTable-selector, .dataTable-input) {
  background-color: var(--ref-field) !important;
  color: var(--ref-ink);
  box-shadow: none !important;
  border-radius: 14px;
}
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) :is(.form-control, .form-select, .dataTable-selector, .dataTable-input):not(.is-invalid):not(.is-valid):not([aria-invalid="true"]) { border-color: var(--ref-border); }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) :is(.form-control, .form-select):focus:not(.is-invalid):not([aria-invalid="true"]) {
  border-color: var(--ref-blue);
  outline: 2px solid rgb(40 84 235 / 22%);
  outline-offset: 1px;
}
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) :is(.form-control, .form-select):disabled { background-color: var(--ref-soft) !important; color: var(--ref-muted); }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) :is(input, textarea)::placeholder { color: var(--ref-muted) !important; opacity: .85; }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) option { background: var(--ref-popover); color: var(--ref-ink); }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) :is(.form-label, .form-check-label) { color: var(--ref-ink); }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) .input-group-text { background: var(--ref-soft); border-color: var(--ref-border); color: var(--ref-muted); box-shadow: none; }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) .form-check-input:checked { background-color: var(--ref-blue); border-color: var(--ref-blue); }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) div[class*="css-"][class$="-control"] { background: var(--ref-field); border-color: var(--ref-border); border-radius: 14px; box-shadow: none; }

/* Table structure, widths, sorting, pinned columns and overflow remain owned by each page. */
#root .main-content :is(.table, .dataTable-table) {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ref-ink);
  --bs-table-border-color: var(--ref-border);
  --bs-table-striped-bg: rgb(255 255 255 / 12%);
  --bs-table-hover-bg: rgb(255 255 255 / 30%);
  color: var(--ref-ink);
  border-color: var(--ref-border);
}
#root .main-content :is(.table, .dataTable-table) thead th {
  background-color: rgb(224 232 220 / 65%) !important;
  color: var(--ref-muted);
  border-color: var(--ref-border);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}
#root .main-content :is(.table, .dataTable-table) tbody td { border-color: var(--ref-border); }
#root .main-content :is(.table, .dataTable-table) tbody td:not(.text-danger):not(.text-warning):not(.text-success) { color: var(--ref-ink); }
#root .main-content :is(.dataTable-top, .dataTable-bottom, .paginate-dropdown) { color: var(--ref-muted); }
#root .main-content :is(.pagination .page-link, .dataTable-pagination a) {
  background: var(--ref-field);
  border-color: var(--ref-border);
  border-radius: 999px;
  color: var(--ref-ink);
  box-shadow: none;
}
#root .main-content :is(.page-item.active .page-link, .dataTable-pagination .active a) { background: var(--ref-olive); border-color: var(--ref-olive); color: #f5f5eb; }
#root .main-content .page-item.disabled .page-link { color: var(--ref-muted); background: var(--ref-soft); }

/* Selected tabs use the same dark pill as the reference navigation. */
#root .main-content :is(.nav-tabs, .nav-pills) { border-color: var(--ref-border); }
#root .main-content :is(.nav-tabs, .nav-pills) > .nav-item > .nav-link {
  border-radius: 999px;
  border-color: transparent;
  box-shadow: none;
  color: var(--ref-muted);
  background: transparent;
}
#root .main-content :is(.nav-tabs, .nav-pills) > .nav-item > .nav-link.active { background: var(--ref-olive); color: #f5f5eb; border-color: transparent; }
#root .main-content .multisteps-form__progress-btn { color: var(--ref-muted); }
#root .main-content .multisteps-form__progress-btn.js-active { color: var(--ref-blue); }
#root .main-content .multisteps-form__progress-btn.completed::before { background: var(--ref-teal); border-color: var(--ref-teal); }

/* Floating surfaces stay opaque enough to read over underlying content. */
body:has(#root :is(.main-content, .auth-page-row)) :is(.modal-content, .offcanvas, .swal2-popup) {
  color: var(--ref-ink);
  background: var(--ref-popover) !important;
  border: 1px solid var(--ref-outline) !important;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgb(28 30 16 / 20%) !important;
}
body:has(#root :is(.main-content, .auth-page-row)) :is(.modal-header, .modal-footer, .offcanvas-header) { border-color: var(--ref-border); }
body:has(#root :is(.main-content, .auth-page-row)) :is(.modal-title, .swal2-title) { color: var(--ref-ink); font-weight: 500; }
body:has(#root :is(.main-content, .auth-page-row)) :is(.dropdown-menu, .react-datepicker, .rs-picker-popup, .rs-picker-menu, div[class*="css-"][class$="-menu"]) {
  background: var(--ref-popover) !important;
  color: var(--ref-ink);
  border: 1px solid var(--ref-border) !important;
  border-radius: 18px;
  box-shadow: 0 12px 30px rgb(28 30 16 / 12%) !important;
}
body:has(#root :is(.main-content, .auth-page-row)) .dropdown-item { color: var(--ref-ink); }
body:has(#root :is(.main-content, .auth-page-row)) .dropdown-item:is(:hover, :focus) { background: var(--ref-soft); }
body:has(#root :is(.main-content, .auth-page-row)) .dropdown-item.active { background: #2854eb; color: #fff; }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas, .swal2-popup) :is(button, a, input, select, textarea, [role="tab"]):focus-visible { outline: 3px solid var(--ref-blue); outline-offset: 3px; }

/* Explicit app dark mode retains the same hierarchy and accent palette. */
html.dark body:has(#root :is(.main-content, .auth-page-row)) {
  --ref-ink: #edf3ed;
  --ref-muted: #b4c2b7;
  --ref-blue: #9ab2ff;
  --ref-glass: rgb(39 51 44 / 65%);
  --ref-field: rgb(27 37 31 / 76%);
  --ref-border: rgb(200 219 198 / 20%);
  --ref-popover: #27332c;
  --ref-soft: rgb(64 80 63 / 50%);
  --ref-outline: rgb(200 219 198 / 14%);
  background: #19252d !important;
}
html.dark #root div:has(> .main-content) { background: linear-gradient(115deg, #19252d, #222b23 65%, #303321); }
html.dark #root .main-content .navbar-main { background: rgb(32 41 34 / 65%) !important; }
html.dark #root .main-content :is(.table, .dataTable-table) thead th { background-color: #303e33 !important; }
@media (max-width: 767px) {
  #root .main-content > .container-fluid { padding: 1rem !important; }
  #root .main-content .inner-page-title2 { margin-bottom: 1rem; }
  #root .main-content .navbar-main { border-radius: 24px; margin-inline: .75rem !important; }
  #root .main-content .navbar-main .nav-item { font-size: .68rem; }
  #root .main-content .navbar-main .nav-item > span { max-width: 150px; overflow-wrap: anywhere; }
  #root .main-content :is(.card, .multisteps-form__panel) { border-radius: 20px; }
}
@media (forced-colors: active) {
  #root .main-content :is(.card, .form-control, .form-select, .btn),
  body:has(#root :is(.main-content, .auth-page-row)) :is(.modal-content, .offcanvas) { border: 1px solid CanvasText !important; }
}

/* Match ordinary headings without flattening white-on-accent metric treatments. */
#root .main-content :is(h1, h2, h3, h4, h5, h6):not([class*="text-"]):not(.goal-overview__kpi-hero *):not(.sales-kpi-card *):not(.mfr-kpi *):not(.text-white *):not(.bg-primary *):not(.bg-dark *):not(.bg-danger *):not(.bg-success *) { color: var(--ref-ink); }
#root .main-content .multisteps-form__progress-btn.completed::after { background: var(--ref-teal); border-color: var(--ref-teal); }
body:has(#root :is(.main-content, .auth-page-row)) .react-select__control {
  background: var(--ref-field) !important;
  border-color: var(--ref-border) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
body:has(#root :is(.main-content, .auth-page-row)) .react-select__control--is-focused { border-color: var(--ref-blue) !important; outline: 2px solid rgb(40 84 235 / 22%); }
body:has(#root :is(.main-content, .auth-page-row)) .react-select__control--is-disabled { background: var(--ref-soft) !important; }
body:has(#root :is(.main-content, .auth-page-row)) :is(.react-select__single-value, .react-select__input-container, .react-select__input) { color: var(--ref-ink) !important; }
body:has(#root :is(.main-content, .auth-page-row)) .react-select__placeholder { color: var(--ref-muted) !important; }
body:has(#root :is(.main-content, .auth-page-row)) .react-select__option { background: var(--ref-popover); color: var(--ref-ink); }
body:has(#root :is(.main-content, .auth-page-row)) .react-select__option--is-focused { background: var(--ref-soft); }
body:has(#root :is(.main-content, .auth-page-row)) .react-select__option--is-selected { background: #2854eb; color: #fff; }
body:has(#root :is(.main-content, .auth-page-row)) .react-select__option--is-disabled { color: var(--ref-muted); opacity: .55; }

/* Empty Bootstrap close controls need their native glyph; text/icon variants keep their content. */
body:has(#root :is(.main-content, .auth-page-row)) :is(.modal-content, .offcanvas) .btn-close:empty {
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 3 10 10M13 3 3 13' fill='none' stroke='%23171b18' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat !important;
  min-width: 32px;
  min-height: 32px;
  box-shadow: none !important;
}
html.dark body:has(#root :is(.main-content, .auth-page-row)) :is(.modal-content, .offcanvas) .btn-close:empty { filter: invert(1); }
#root .main-content .thead-light { box-shadow: none !important; }
@media (max-width: 767px) {
  /* Date/filter headers wrap instead of pushing action buttons off screen. */
  #root .main-content .card-body .d-flex.justify-content-between:has(> .drop_hover),
  #root .main-content .d-flex.justify-content-between:has(> .d-flex .react-datepicker-wrapper) {
    flex-wrap: wrap;
    gap: .75rem;
  }
  #root .main-content .card-body .d-flex.justify-content-between:has(> .drop_hover) > .d-flex,
  #root .main-content .d-flex.justify-content-between > .d-flex:has(.react-datepicker-wrapper) {
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    flex-basis: 100%;
  }
  #root .main-content .d-flex:has(> .react-datepicker-wrapper) { max-width: 100%; }
  #root .main-content .d-flex:has(> .react-datepicker-wrapper) ~ .col-12 { max-width: 100%; }
  #root .main-content .card-body .d-flex:has(> .ws-no) { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  #root .main-content .d-flex.justify-content-between:has(> .search-area) { flex-wrap: wrap; gap: .75rem; }
  #root .main-content .d-flex.justify-content-between > .search-area { width: 100%; max-width: 100%; }
  #root .main-content .d-flex.justify-content-between:has(> .search-area) .w-110px { flex: 0 0 110px; }
}

/* Sign-in and recovery share the workspace palette; authentication logic stays untouched. */
#root main:has(.auth-page-row) { min-height: 100vh; margin-top: 0 !important; padding-block: 1.5rem; color: var(--ref-ink); }
#root .auth-page-row .card { background: var(--ref-glass); border: 1px solid var(--ref-outline) !important; border-radius: 28px; box-shadow: none !important; }
#root .auth-page-row .card-header { background: transparent; }
#root .auth-page-row :is(h5, .text-sm, .form-check) { color: var(--ref-ink); }
#root .auth-page-row .text-dark { color: var(--ref-ink) !important; }
#root .auth-page-row .log-img .card { background: rgb(255 255 255 / 14%); }
#root .auth-page-row .log-img img { border-radius: 22px; }
body:has(#root :is(.main-content, .auth-page-row)) :is(.main-content, .auth-page-row, .modal-content, .offcanvas) .form-check-input:checked:is([type="checkbox"], [type="radio"]) {
  background-color: #2854eb;
  background-image: linear-gradient(#2854eb, #2854eb);
  border-color: #2854eb;
}

/* Record-specific details. Shared controls and page surfaces live in ReferenceTheme.css. */

/* Profile, product type and facility portrait frames preserve the original image geometry. */
#root .main-content .no-img > .shadow,
#root .main-content .badge.b > .shadow {
  background: var(--ref-glass, rgb(255 255 255 / 24%));
  border: 1px solid var(--ref-border, rgb(23 27 24 / 12%));
  border-radius: 24px;
  box-shadow: none !important;
  padding: 8px !important;
}

#root .main-content .no-img > .shadow > img,
#root .main-content .badge.b > .shadow > img {
  border-radius: 18px !important;
}

#root .main-content .no-img.cursor-pointer:hover > .shadow {
  border-color: var(--ref-teal, #4c94a6);
}

/* Facility/distributor identity cards and their email/phone actions. */
#root .main-content .border.text-center:has(> .badge.b) {
  background: var(--ref-glass, rgb(255 255 255 / 24%));
  border-color: var(--ref-border, rgb(23 27 24 / 12%)) !important;
  border-radius: 28px !important;
  padding: 24px !important;
}

#root .main-content .border.text-center:has(> .badge.b) > h5 {
  color: var(--ref-ink, #171b18);
  font-weight: 600;
  letter-spacing: -0.025em;
}

#root .main-content .border.text-center:has(> .badge.b) > .d-flex {
  margin-top: 16px !important;
}

#root .main-content .border.text-center:has(> .badge.b) a[href^="mailto:"],
#root .main-content .border.text-center:has(> .badge.b) a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  min-height: 42px;
  border: 1px solid var(--ref-border, rgb(23 27 24 / 12%));
  border-radius: 50%;
  background: rgb(23 27 24 / 5%);
  color: var(--ref-ink, #171b18);
  font-size: 15px;
}

#root .main-content .border.text-center:has(> .badge.b) a:hover {
  background: var(--ref-lemon, #efeb53);
  color: #171b18;
}

#root .main-content .border.text-center:has(> .badge.b) a:focus-visible {
  outline: 2px solid var(--ref-blue, #2854eb);
  outline-offset: 3px;
}

/* The provider player card uses a separate nested analytics navigation. */
#root .main-content .card-body:has(#provider) .nav-tabs[role="tablist"] {
  gap: 6px;
  border: 0;
  background: rgb(23 27 24 / 4%);
  border-radius: 24px;
  padding: 6px !important;
}

#root .main-content .card-body:has(#provider) .nav-tabs [role="tab"] {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ref-muted, #5f6a63);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  margin-bottom: 0;
}

#root .main-content .card-body:has(#provider) .nav-tabs [role="tab"].active {
  background: #1c1e10;
  color: #fff;
  box-shadow: none;
}

#root .main-content .card-body:has(#provider) .nav-tabs [role="tab"]:focus-visible {
  outline: 2px solid var(--ref-blue, #2854eb);
  outline-offset: 2px;
}

/* Module/role editors use bespoke panels in addition to the shared form controls. */
#root .main-content .cust-form {
  background: var(--ref-glass, rgb(255 255 255 / 24%));
  border: 1px solid var(--ref-border, rgb(23 27 24 / 12%));
  border-radius: 24px !important;
  box-shadow: none !important;
}

#root .main-content .form-heading {
  color: var(--ref-ink, #171b18);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

#root .main-content #setPermissionForm .accordion-item {
  border: 1px solid var(--ref-border, rgb(23 27 24 / 12%));
  border-radius: 18px;
  background: transparent;
}

#root .main-content #setPermissionForm .accordion-button {
  background: var(--ref-glass, rgb(255 255 255 / 24%));
  border-radius: 18px !important;
  color: var(--ref-ink, #171b18);
  box-shadow: none !important;
}

#root .main-content #setPermissionForm .accordion-button[aria-expanded="true"] {
  background: rgb(76 148 166 / 15%);
}

#root .main-content #setPermissionForm .role-top-check-area {
  color: var(--ref-muted, #5f6a63);
}

#root .main-content #setPermissionForm .accordion-body > .row.border {
  border-color: var(--ref-border, rgb(23 27 24 / 12%)) !important;
  border-radius: 14px !important;
}

/* Settings logo previews retain actual asset colors. */
#root .main-content .card-body:has(#website_mail) .img-thumbnail {
  background: var(--ref-glass, rgb(255 255 255 / 24%));
  border: 1px solid var(--ref-border, rgb(23 27 24 / 12%));
  border-radius: 18px;
  padding: 10px;
}

/* The team filter previously required a desktop-sized width even on phones. */
@media (max-width: 575.98px) {
  #root .main-content .team-dropdown {
    min-width: 0;
    width: 100%;
    margin-right: 0;
    margin-top: 0;
  }

  #root .main-content .card-body:has(#provider) .nav-tabs [role="tab"] {
    padding: 9px 12px;
  }
}

/* Three provider metrics already share this summary row; retain their original content. */
#root .main-content .card-body:has(#provider) .tab-content .row.text-center > .col {
  background: var(--ref-glass, rgb(255 255 255 / 24%));
  border: 1px solid var(--ref-border, rgb(23 27 24 / 12%));
  border-radius: 22px;
  padding: 20px 12px;
  min-width: 150px;
}

#root .main-content .card-body:has(#provider) .tab-content .row.text-center {
  gap: 10px;
  margin-inline: 0;
}

#root .main-content .card-body:has(#provider) .tab-content .row.text-center > .col:first-child {
  background: #2854eb;
}

#root .main-content .card-body:has(#provider) .tab-content .row.text-center > .col:first-child > h4 {
  color: #fff !important;
}

#root .main-content .card-body:has(#provider) .tab-content .row.text-center > .col:last-child {
  background: var(--ref-lemon, #efeb53);
  color: #171b18;
}

#root .main-content .card-body:has(#provider) .tab-content .row.text-center > .col:last-child > h4 {
  color: #171b18 !important;
}

#root .main-content .card-body:has(#provider) .tab-content .row.text-center > .col > h4 {
  overflow-wrap: anywhere;
  font-size: clamp(20px, 2vw, 28px);
  font-weight: 600 !important;
  letter-spacing: -0.03em;
}

#root .main-content .card-body:has(#provider) .tab-content .row.text-center > .col > h4.text-muted {
  font-size: 13px;
  font-weight: 400 !important;
  letter-spacing: 0;
  margin-bottom: 0;
}

/* Live People & access workspace (UserTypeDefaults-20260924-v1). */
#root .main-content .ua-root {
  --ua-ink: var(--ref-ink, #171b18);
  --ua-muted: var(--ref-muted, #5f6a63);
  --ua-line: var(--ref-border, rgb(23 27 24 / 12%));
  --ua-blue: var(--ref-blue, #2854eb);
  min-width: 0;
  max-width: 100%;
  color: var(--ua-ink);
}

#root .main-content .ua-root :is(h1, h2, h3) {
  color: var(--ua-ink);
  font-weight: 500;
  letter-spacing: -0.035em;
}

#root .main-content .ua-header {
  flex-wrap: wrap;
}

#root .main-content .ua-header > div,
#root .main-content .ua-editor-head > div,
#root .main-content .ua-editor-grid > section {
  min-width: 0;
}

#root .main-content .ua-root :is(.ua-eyebrow, .ua-label, .ua-count, .ua-type-meta),
#root .main-content .ua-filters label,
#root .main-content .ua-person small {
  color: var(--ua-muted);
}

#root .main-content .ua-help {
  color: var(--ua-muted) !important;
}

#root .main-content .ua-root :is(.ua-scope, .ua-stats > div, .ua-directory, .ua-editor, .ua-empty, .ua-inheritance) {
  background: var(--ref-glass, rgb(255 255 255 / 24%));
  border-color: var(--ua-line);
  border-radius: 24px;
  box-shadow: none;
}

#root .main-content .ua-root :is(.ua-notice, .ua-editor-footer) {
  background: var(--ref-soft, rgb(213 225 215 / 38%));
  border-color: var(--ua-line);
  color: var(--ua-muted);
}

#root .main-content .ua-root :is(.ua-scope-icon, .ua-avatar, .ua-person .ua-you, .ua-tenant-type) {
  background: var(--ref-soft, rgb(213 225 215 / 38%));
  color: var(--ua-ink);
  border-color: var(--ua-line);
}

#root .main-content .ua-scope-icon {
  flex-shrink: 0;
  border-radius: 50%;
}

#root .main-content .ua-scope > div {
  min-width: 0;
  flex: 1;
}

#root .main-content .ua-scope select {
  min-width: 0 !important;
  max-width: 100%;
}

#root .main-content .ua-root :is(input[type="search"], select),
#root .main-content .ua-identity input {
  border-color: var(--ua-line);
  border-radius: 14px;
  background: var(--ref-field, rgb(255 255 255 / 38%));
  color: var(--ua-ink);
  box-shadow: none;
  min-width: 0;
}

#root .main-content .ua-root :is(input, select):disabled {
  background: var(--ref-soft, rgb(213 225 215 / 38%));
  color: var(--ua-muted);
}

#root .main-content .ua-root option {
  background: var(--ref-popover, #f2f6ed);
  color: var(--ua-ink);
}

#root .main-content .ua-root input::placeholder {
  color: var(--ua-muted);
}

#root .main-content .ua-root :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: #2854eb;
}

#root .main-content .ua-button:not(.ua-danger) {
  background: var(--ref-field, rgb(255 255 255 / 38%));
  color: var(--ua-ink);
  border-color: var(--ua-line);
  border-radius: 999px;
  box-shadow: none;
  font-weight: 500;
}

#root .main-content .ua-button:not(.ua-danger):hover:not(:disabled) {
  background: var(--ref-soft, rgb(213 225 215 / 38%));
  border-color: var(--ref-teal, #4c94a6);
}

#root .main-content .ua-button.ua-primary {
  background: #1c1e10;
  border-color: #1c1e10;
  color: #fff;
}

#root .main-content .ua-button.ua-primary:hover:not(:disabled) {
  background: #343823;
  border-color: #343823;
  color: #fff;
}

#root .main-content .ua-root .ua-link {
  color: var(--ua-blue);
}

#root .main-content .ua-root :focus-visible {
  outline: 3px solid var(--ua-blue);
  outline-offset: 3px;
}

#root .main-content .ua-root th {
  background: var(--ref-soft, rgb(213 225 215 / 38%));
  border-color: var(--ua-line);
  color: var(--ua-muted);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

#root .main-content .ua-root td {
  color: var(--ua-ink);
  border-color: var(--ua-line);
}

#root .main-content .ua-person strong {
  color: var(--ua-ink);
}

#root .main-content .ua-root :is(.ua-pagination, .ua-editor-grid > section + section) {
  border-color: var(--ua-line);
  color: var(--ua-muted);
}

#root .main-content .ua-root :is(.ua-choice-list, .ua-module) {
  border-color: var(--ua-line);
  border-radius: 16px;
  color: var(--ua-ink);
}

#root .main-content .ua-root .ua-check {
  color: var(--ua-ink);
}

#root .main-content .ua-root .ua-module.is-selected {
  background: rgb(76 148 166 / 15%);
  border-color: var(--ref-teal, #4c94a6);
  color: var(--ua-ink);
}

#root .main-content .ua-root .ua-module small {
  color: var(--ua-muted);
}

#root .main-content .ua-root fieldset:disabled .ua-module.is-selected {
  background: var(--ref-soft, rgb(213 225 215 / 38%));
  border-color: var(--ua-line);
  color: var(--ua-muted);
}

#root .main-content .ua-tabs {
  flex-wrap: wrap;
  gap: 6px;
  border: 0;
}

#root .main-content .ua-tabs button {
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ua-muted);
  font-weight: 500;
}

#root .main-content .ua-tabs button[aria-selected="true"] {
  background: #1c1e10;
  color: #fff;
  border-color: #1c1e10;
}

#root .main-content .ua-tabs button span {
  background: var(--ref-soft, rgb(213 225 215 / 38%));
  color: var(--ua-ink);
}

#root .main-content .ua-tabs button[aria-selected="true"] span {
  background: rgb(255 255 255 / 16%);
  color: #fff;
}

/* Keep the live error/warning/success, active/suspended and inheritance badges semantic. */
@media (max-width: 700px) {
  #root .main-content .ua-root .ua-scope {
    flex-wrap: wrap;
  }

  #root .main-content .ua-root .ua-scope > div {
    flex: 1 1 calc(100% - 54px);
    max-width: calc(100% - 50px);
  }

  #root .main-content .ua-root :is(.ua-header, .ua-editor-head, .ua-section-title, .ua-editor-footer, .ua-editor-footer > div) {
    flex-wrap: wrap;
  }

  #root .main-content .ua-root :is(.ua-header > div, .ua-editor-head > div, .ua-filters label, .ua-identity-grid > *, .ua-module) {
    min-width: 0;
    max-width: 100%;
  }

  #root .main-content .ua-root :is(.ua-header p, .ua-scope strong, .ua-module, td) {
    overflow-wrap: anywhere;
  }

  #root .main-content .ua-root .ua-editor-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #root .main-content .ua-root .ua-modules {
    grid-template-columns: minmax(0, 1fr);
  }

  #root .main-content .ua-root td[data-label]::before {
    color: var(--ua-muted);
    flex-shrink: 0;
  }

  #root .main-content .ua-root .ua-tenant-type {
    margin-left: 50px;
    max-width: calc(100% - 50px);
    overflow-wrap: anywhere;
  }

  #root .main-content .ua-root .ua-pagination > div {
    flex-wrap: wrap;
  }
}

/* Operational workspaces: visual treatment only. Status colors, event colors,
   sticky positions, drag/drop geometry, and visibility remain owned by each page. */
#root .main-content {
  --operations-ink: #171b18;
  --operations-muted: #5f6a63;
  --operations-line: rgb(80 103 87 / 17%);
  --operations-glass: rgb(255 255 255 / 24%);
  --operations-soft: rgb(255 255 255 / 18%);
  --operations-menu: #f0f3e9;
  --operations-accent: #2854eb;
}

/* Goals retain their metric colors and status badges; these are surface tokens. */
#root .main-content :is(.goal-overview, .sales-goal-manager) {
  --goal-text: var(--operations-ink);
  --goal-muted: var(--operations-muted);
  --goal-surface: var(--operations-glass);
  --goal-soft: var(--operations-soft);
  --goal-border: var(--operations-line);
  --goal-track: rgb(95 106 99 / 12%);
}

#root .main-content :is(.goal-overview__panel, .sales-goal-manager__plan-list,
  .sales-goal-manager__editor, .sales-goal-manager__metric) {
  background: var(--operations-glass);
  border-color: var(--operations-line);
  border-radius: 26px;
  box-shadow: none;
}

#root .main-content :is(.goal-overview__filter-bar, .goal-overview__drilldown,
  .goal-overview__chart--portfolio, .goal-overview__hierarchy-node,
  .goal-overview__metric-visual, .sales-goal-manager__selected-insights,
  .sales-goal-manager__creator, .sales-goal-manager__insight-kpis > div) {
  background: var(--operations-soft);
  border-color: var(--operations-line);
  border-radius: 20px;
  box-shadow: none;
}

#root .main-content .goal-overview__kpi-hero {
  background: linear-gradient(125deg, #1c1e10, #28382c);
  border-radius: 26px;
  box-shadow: none;
}

#root .main-content :is(.goal-overview__hero h1, .goal-overview__panel h3,
  .sales-goal-manager__insight-heading h4) {
  color: var(--operations-ink);
  font-weight: 600;
  letter-spacing: -0.035em;
}

#root .main-content .sales-goal-manager__insight-kpis dd {
  color: var(--operations-ink);
}

#root .main-content :is(.goal-overview__goal-row,
  .sales-goal-manager__plan-button, .sales-goal-manager__scope-choice) {
  background: var(--operations-glass);
  border-color: var(--operations-line);
  border-radius: 16px;
  color: var(--operations-ink);
  box-shadow: none;
}

#root .main-content :is(.goal-overview__goal-row[aria-current="true"],
  .sales-goal-manager__plan-button[aria-current="true"],
  .sales-goal-manager__scope-choice[aria-pressed="true"]) {
  background: #efeb53;
  border-color: #d4d044;
  color: #171b18;
  box-shadow: none;
}

#root .main-content :is(.goal-overview__goal-row[aria-current="true"] small,
  .sales-goal-manager__plan-button[aria-current="true"] .text-muted) {
  color: #4e552a !important;
}

#root .main-content :is(.goal-overview__goal-row, .sales-goal-manager__plan-button,
  .sales-goal-manager__scope-choice):hover:not(:disabled):not([aria-current="true"]):not([aria-pressed="true"]) {
  border-color: #4c94a6;
  background: rgb(76 148 166 / 10%);
}

#root .main-content :is(.goal-overview, .sales-goal-manager)
  :is(button, select, summary):focus-visible {
  outline: 3px solid #2854eb;
  outline-offset: 3px;
}

/* Calendar grid and controls, deliberately excluding event and category colors. */
#root .main-content :is(.rbc-month-view, .rbc-time-view, .rbc-agenda-view) {
  background: var(--operations-glass);
  border-color: var(--operations-line);
  border-radius: 20px;
}

#root .main-content :is(.rbc-header, .rbc-day-bg + .rbc-day-bg,
  .rbc-month-row + .rbc-month-row, .rbc-time-content,
  .rbc-timeslot-group, .rbc-time-header-content) {
  border-color: var(--operations-line);
}

#root .main-content .rbc-off-range-bg {
  background: rgb(95 106 99 / 6%);
}

#root .main-content .rbc-toolbar {
  color: var(--operations-ink);
}

#root .main-content .rbc-toolbar button {
  background: var(--operations-glass);
  border-color: var(--operations-line);
  color: var(--operations-ink);
  box-shadow: none;
}

#root .main-content .rbc-toolbar button:hover:not(:disabled) {
  background: rgb(76 148 166 / 14%);
  color: var(--operations-ink);
}

#root .main-content .rbc-toolbar button.rbc-active,
#root .main-content .rbc-toolbar button.rbc-active:is(:hover, :focus) {
  background: #1c1e10 !important;
  border-color: #1c1e10;
  color: #fff;
  box-shadow: none;
}

#root .main-content .rbc-current .rbc-button-link {
  background: #2854eb;
  color: #fff;
}

#root .main-content .left-panel:has(.calendar-section) {
  background: var(--operations-glass);
  border-color: var(--operations-line);
  border-radius: 24px;
  color: var(--operations-ink);
}

#root .main-content .left-panel .create-button {
  background: #1c1e10;
  border-color: #1c1e10 !important;
  border-radius: 999px !important;
  color: #fff;
  box-shadow: none !important;
}

#root .main-content .left-panel .create-button:hover:not(:disabled) {
  background: #343c29;
}

/* Existing cart positioning and badge colors continue to identify its state. */
#root .main-content .hangingBox {
  background: #1c1e10 !important;
  border-color: rgb(255 255 255 / 24%) !important;
  border-radius: 22px;
  color: #fff;
  box-shadow: 0 8px 24px rgb(28 30 16 / 12%) !important;
}

#root .main-content .case-workspace-action-cell {
  background-color: var(--operations-menu) !important;
}

#root .main-content :is(.cw-row-icon, .cw-inline-clone button) {
  border-color: var(--operations-line) !important;
  border-radius: 12px;
  color: var(--operations-ink) !important;
  box-shadow: none;
}

#root .main-content :is(.cw-row-icon, .cw-inline-clone button):hover:not(:disabled) {
  background: rgb(40 84 235 / 9%) !important;
  color: #2854eb !important;
}

/* Case workspace is mounted in a portal. Only its unique classes are targeted. */
body:has(#root .main-content) .case-workspace {
  --cw-text: #171b18;
  --cw-muted: #5f6a63;
  --cw-line: rgb(80 103 87 / 17%);
  --cw-accent: #2854eb;
  --cw-tint: rgb(76 148 166 / 10%);
  --cw-menu: #f0f3e9;
  --cw-surface: rgb(255 255 255 / 24%);
}

body:has(#root .main-content) .case-workspace-dialog .modal-content {
  border-radius: 28px;
  border-color: rgb(255 255 255 / 48%);
}

body:has(#root .main-content) .case-workspace-tabs .nav-link.active:after {
  background: #2854eb;
}

body:has(#root .main-content) :is(.cw-document, .case-workspace-snapshot) {
  background: var(--cw-surface, rgb(255 255 255 / 24%));
  border-radius: 20px;
}

body:has(#root .main-content) .cw-document-menu {
  background: var(--cw-menu, #f0f3e9);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgb(28 30 16 / 12%);
}

body:has(#root .main-content) .cw-next-step {
  border-left-color: #4c94a6;
  border-radius: 16px;
}

body:has(#root .main-content) .cw-case-id {
  color: #2854eb;
}

body:has(#root .main-content) .case-workspace :is(button, a, [tabindex]):focus-visible {
  outline: 3px solid #2854eb;
  outline-offset: 3px;
}

/* Explicit app dark mode keeps operational detail legible. */
:is(.dark, .dark-version) #root .main-content,
#root :is(.dark, .dark-version) .main-content {
  --operations-ink: #edf3ec;
  --operations-muted: #b4c0b5;
  --operations-line: rgb(196 215 196 / 20%);
  --operations-glass: rgb(255 255 255 / 5%);
  --operations-soft: rgb(255 255 255 / 3%);
  --operations-menu: #26312a;
}

html:is(.dark, .dark-version) body:has(#root .main-content) .case-workspace,
body:is(.dark, .dark-version):has(#root .main-content) .case-workspace,
body:has(#root :is(.dark, .dark-version) .main-content) .case-workspace {
  --cw-text: #edf3ec;
  --cw-muted: #b4c0b5;
  --cw-line: rgb(196 215 196 / 20%);
  --cw-accent: #92b1ff;
  --cw-tint: rgb(76 148 166 / 14%);
  --cw-menu: #26312a;
  --cw-surface: rgb(255 255 255 / 5%);
}

html:is(.dark, .dark-version) body:has(#root .main-content) .cw-case-id,
body:is(.dark, .dark-version):has(#root .main-content) .cw-case-id,
body:has(#root :is(.dark, .dark-version) .main-content) .cw-case-id {
  color: #92b1ff;
}

/* Relationships and reporting ship their own embedded styles. Use their exact
   component classes, preserving chart series, geography states and error colors. */
#root .main-content .rr {
  --rr-bg: var(--ref-glass);
  --rr-soft: var(--ref-soft);
  --rr-border: var(--ref-border);
  --rr-text: var(--ref-ink);
  --rr-muted: var(--ref-muted);
  --rr-accent: var(--ref-blue);
  background: var(--ref-glass);
  border-color: var(--ref-outline);
  border-radius: 28px;
  box-shadow: none;
}
#root .main-content .vs-workspace {
  --vs-ink: var(--ref-ink);
  --vs-muted: var(--ref-muted);
  --vs-line: var(--ref-border);
}
#root .main-content .si {
  --si-ink: var(--ref-ink);
  --si-muted: var(--ref-muted);
  --si-line: var(--ref-border);
}
#root .main-content .vg {
  --vg-ink: var(--ref-ink);
  --vg-muted: var(--ref-muted);
  --vg-line: var(--ref-border);
}
#root .main-content .sro { color: var(--ref-ink); }

#root .main-content :is(.rr-card, .vs-filter-panel, .vs-chart-panel,
  .vs-inspector, .vs-focus-panel, .si-panel, .vg, .vg-city-directory,
  .sro-detail, .sro-totals) {
  background: var(--ref-glass);
  border-color: var(--ref-border);
  border-radius: 24px;
  box-shadow: none;
}
#root .main-content :is(.vs-kpi, .si-kpi):not(.vs-kpi-primary):not(.si-kpi-primary) {
  background: var(--ref-glass);
  border-color: var(--ref-border);
  border-radius: 24px;
  box-shadow: none;
}
#root .main-content :is(.vs-kpi-primary, .si-kpi-primary, .vs-period-bar) {
  background: #1c1e10;
  border-color: #1c1e10;
  border-radius: 24px;
  color: #fff;
  box-shadow: none;
}
#root .main-content .si-kpi:not(.si-kpi-primary) > strong { color: var(--ref-ink); }
#root .main-content .si-kpi:not(.si-kpi-primary) > span,
#root .main-content .si-kpi:not(.si-kpi-primary) small { color: var(--ref-muted); }

/* Action/selection surfaces, separate from positive/negative report semantics. */
#root .main-content .rr .rr-primary,
#root .main-content .vs-workspace .vs-run {
  background: #1c1e10 !important;
  border-color: #1c1e10 !important;
  border-radius: 999px;
  color: #fff !important;
  box-shadow: none;
}
#root .main-content .rr .rr-primary:hover:not(:disabled),
#root .main-content .vs-workspace .vs-run:hover:not(:disabled) {
  background: #343823 !important;
  border-color: #343823 !important;
}
#root .main-content .rr .rr-tabs button {
  background: var(--ref-glass);
  border-color: var(--ref-border);
  border-radius: 20px;
  color: var(--ref-ink);
  box-shadow: none;
}
#root .main-content .rr :is(.rr-tabs, .rr-switch) .active {
  background: #1c1e10;
  border-color: #1c1e10;
  color: #fff;
  box-shadow: none;
}
#root .main-content .rr .rr-tabs .active small { color: #d8e2cc; }
#root .main-content .vs-workspace .vs-perspective {
  background: var(--ref-glass);
  border-color: var(--ref-border);
  border-radius: 20px;
  box-shadow: none;
}
#root .main-content .vs-workspace .vs-perspective.is-active,
#root .main-content .vs-workspace .vs-perspective.is-active:hover {
  background: #efeb53;
  border-color: #d4d044;
  color: #171b18;
  box-shadow: none;
}
#root .main-content .vs-workspace .vs-perspective.is-active small { color: #4e552a; }
#root .main-content :is(.si-toggle, .vs-view-toggle, .vg-mode) {
  background: var(--ref-soft);
  border-color: var(--ref-border);
  border-radius: 999px;
}
#root .main-content :is(.si .si-toggle, .vs-workspace .vs-view-toggle, .vg .vg-mode) button {
  color: var(--ref-muted) !important;
  border-radius: 999px !important;
}
#root .main-content :is(.si .si-toggle, .vs-workspace .vs-view-toggle, .vg .vg-mode) button[aria-pressed="true"] {
  background: #1c1e10 !important;
  color: #fff !important;
  box-shadow: none;
}
#root .main-content .vs-period-presets button[aria-pressed="true"] {
  background: #efeb53 !important;
  border-color: #efeb53 !important;
  color: #171b18 !important;
}

/* Plain form and filter surfaces; disabled/error states retain their own cues. */
#root .main-content .rr .rr-field :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]),
#root .main-content .vs-workspace :is(input:not([type="checkbox"]):not([type="radio"]), select),
#root .main-content .sro .sro-members-header input,
#root .main-content .vg-city-search input {
  background: var(--ref-field) !important;
  color: var(--ref-ink) !important;
  border-radius: 14px !important;
}
#root .main-content :is(.vs-multi-filter summary, .vs-trust,
  .si-trend-readout, .si-panel-note, .si-perspective-context,
  .vs-place-breakdown, .vg-map-toolbar, .vg-legend, .vg-search,
  .vg-city-note, .sro-practice-note) {
  background: var(--ref-soft);
  border-color: var(--ref-border);
  color: var(--ref-muted);
}
#root .main-content :is(.vs-welcome, .vs-loading, .si-mix-unavailable, .vg-no-map) {
  background: var(--ref-glass);
  border-color: var(--ref-border);
  color: var(--ref-muted);
}
#root .main-content .vs-multi-popover {
  background: var(--ref-popover);
  border-color: var(--ref-border);
  border-radius: 18px;
  box-shadow: 0 12px 30px rgb(28 30 16 / 12%);
}
#root .main-content .si-table-wrap thead th {
  background: var(--ref-soft);
  border-color: var(--ref-border);
  color: var(--ref-muted);
}

/* Geography colors encode membership. Only neutral atlas surfaces are changed. */
#root .main-content .vg-canvas { background: var(--ref-soft); }
#root .main-content .vg-area-card:not(.is-selected):not(.is-partial):not(.is-excluded) {
  background: var(--ref-glass);
  border-color: var(--ref-border);
  border-radius: 18px;
}
#root .main-content .sro .sro-member:not(.is-excluded) {
  background: var(--ref-glass) !important;
  border-color: var(--ref-border) !important;
  border-radius: 18px !important;
  color: var(--ref-ink) !important;
}
#root .main-content .sro .sro-member:not(.is-excluded):is(:hover, [aria-pressed="true"]) {
  background: var(--ref-soft) !important;
  border-color: var(--ref-blue) !important;
}
#root .main-content .sro .sro-filters > button {
  background: var(--ref-glass) !important;
  border-color: var(--ref-border) !important;
  color: var(--ref-muted) !important;
}
#root .main-content .sro .sro-filters > button[aria-pressed="true"] {
  background: #1c1e10 !important;
  border-color: #1c1e10 !important;
  color: #fff !important;
}
#root .main-content .sro :is(.sro-header p, .sro-members-header p,
  .sro-member:not(.is-excluded) .sro-member-copy small,
  .sro-member:not(.is-excluded) .sro-member-copy > span,
  .sro-detail-grid p, .sro-detail-grid small, .sro-footnote, .sro-empty) {
  color: var(--ref-muted);
}
#root .main-content .sro :is(.sro-totals strong,
  .sro-member:not(.is-excluded) .sro-member-copy strong) { color: var(--ref-ink); }
#root .main-content .sro h4 { color: var(--ref-ink) !important; }

/* Native city dialog: an opaque reading surface, preserving its top-layer behavior. */
body:has(#root .main-content) .vg-city-popup {
  background: var(--ref-popover);
  color: var(--ref-ink);
  border-color: var(--ref-border);
  border-radius: 28px;
  box-shadow: 0 24px 70px rgb(28 30 16 / 22%);
}
body:has(#root .main-content) :is(.vg-city-popup-bar, .vg-city-popup-footer) {
  background: var(--ref-soft);
  color: var(--ref-ink);
  border-color: var(--ref-border);
}
body:has(#root .main-content) .vg-city-popup :is(h2, h3, h4) { color: var(--ref-ink); }
body:has(#root .main-content) .vg-city-popup .vg-city-popup-footer button {
  background: #1c1e10 !important;
  color: #fff !important;
  border-radius: 999px !important;
}
body:has(#root .main-content) .vg-city-popup .vg-city-popup-bar button {
  color: var(--ref-ink) !important;
}
body:has(#root .main-content) .vg-city-popup .vg-city-search input {
  background: var(--ref-field);
  color: var(--ref-ink);
  border-color: var(--ref-border);
  border-radius: 14px;
}
body:has(#root .main-content) .vg-city-popup .vg-city-list li:not(.is-selected) strong {
  color: var(--ref-ink);
}
body:has(#root .main-content) .vg-city-popup .vg-city-list li:not(.is-selected) small {
  color: var(--ref-muted);
}
#root .main-content :is(.rr, .vs-workspace, .si, .vg, .sro)
  :is(button, a, input, select, textarea, summary):focus-visible,
body:has(#root .main-content) .vg-city-popup :is(button, input):focus-visible {
  outline: 3px solid var(--ref-blue);
  outline-offset: 3px;
}