/*
 * TREKK360 brand compatibility layer
 *
 * Load after Bootstrap, trekk-styles.css, and page-level styles. Runtime
 * branding is emitted as resolved --portal-* semantic tokens. The --brand-*
 * declarations below are compatibility aliases for components not yet moved
 * to named semantic roles; they are not a distributor theme contract.
 */
:root {
  --brand-primary: #8a2432;
  --brand-primary-hover: #741e2b;
  --brand-primary-active: #5f1823;
  --brand-primary-rgb: 138, 36, 50;
  --brand-on-primary: #ffffff;
  --brand-on-primary-rgb: 255, 255, 255;
  --brand-primary-tint: #c59097;
  --brand-link: #8a2432;
  --brand-link-hover: #741e2b;
  --brand-link-dark: #d6b4b9;
  --brand-accent: #595959;
  --brand-accent-hover: #474747;
  --brand-accent-active: #363636;
  --brand-accent-rgb: 89, 89, 89;
  --brand-on-accent: #ffffff;
  --brand-on-accent-rgb: 255, 255, 255;
  --brand-accent-tint: #a7a7a7;
  --brand-accent-link: #595959;
  --brand-accent-link-dark: #a7a7a7;

  --brand-page: #f7f8fa;
  --brand-surface: #ffffff;
  --brand-surface-subtle: #f1f3f5;
  --brand-surface-raised: #ffffff;
  --brand-text: #20262f;
  --brand-text-muted: #59636e;
  --brand-border: #d9dee5;
  --brand-divider: #e7eaee;
  --brand-focus: rgba(var(--brand-primary-rgb), .34);

  --brand-success: #18794e;
  --brand-success-rgb: 24, 121, 78;
  --brand-success-hover: #12613e;
  --brand-success-active: #0d4c31;
  --brand-on-success: #ffffff;
  --brand-warning: #9a6700;
  --brand-warning-rgb: 154, 103, 0;
  --brand-warning-hover: #7c5300;
  --brand-warning-active: #604000;
  --brand-on-warning: #ffffff;
  --brand-danger: #b42337;
  --brand-danger-rgb: 180, 35, 55;
  --brand-danger-hover: #941d2e;
  --brand-danger-active: #751725;
  --brand-on-danger: #ffffff;
  --brand-info: #1769aa;
  --brand-info-rgb: 23, 105, 170;
  --brand-info-hover: #125488;
  --brand-info-active: #0e416a;
  --brand-on-info: #ffffff;
  --brand-neutral: #52606d;
  --brand-neutral-rgb: 82, 96, 109;
  --brand-on-neutral: #ffffff;

  --brand-chrome: var(--brand-primary);
  --brand-chrome-text: var(--brand-on-primary);
  --brand-chrome-text-rgb: var(--brand-on-primary-rgb);
  --brand-chrome-border: rgba(var(--brand-on-primary-rgb), .68);
  --brand-radius-sm: 6px;
  --brand-radius-md: 8px;
  --brand-shadow: 0 2px 10px rgba(25, 35, 45, .08);

  /*
   * Portal semantic contract. Runtime theme documents may override these
   * values after this stylesheet; components below must only consume the
   * portal aliases rather than a TREKK identity literal or Bootstrap family.
   */
  --portal-page: var(--brand-page);
  --portal-surface: var(--brand-surface);
  --portal-surface-raised: var(--brand-surface-raised);
  --portal-surface-subtle: var(--brand-surface-subtle);
  --portal-surface-overlay: var(--brand-surface);
  --portal-text: var(--brand-text);
  --portal-text-muted: var(--brand-text-muted);
  --portal-text-identifier: var(--brand-link);
  --portal-text-technical: var(--brand-text);
  --portal-icon: var(--brand-text);
  --portal-icon-muted: var(--brand-text-muted);
  --portal-icon-interactive: var(--brand-link);
  --portal-icon-available: var(--brand-success);
  --portal-icon-unavailable: var(--brand-text-muted);
  --portal-border: var(--brand-border);
  --portal-border-subtle: var(--brand-divider);
  --portal-focus: var(--brand-focus);
  --portal-topbar-bg: var(--brand-chrome);
  --portal-topbar-text: var(--brand-chrome-text);
  --portal-topbar-border: var(--brand-chrome-border);
  --portal-sidebar-bg: var(--brand-chrome);
  --portal-sidebar-text: var(--brand-chrome-text);
  --portal-sidebar-muted: rgba(var(--brand-chrome-text-rgb), .62);
  --portal-sidebar-hover-bg: rgba(var(--brand-chrome-text-rgb), .12);
  --portal-sidebar-selected-bg: rgba(var(--brand-chrome-text-rgb), .20);
  --portal-sidebar-border: var(--brand-chrome-border);
  --portal-footer-bg: var(--brand-chrome);
  --portal-footer-text: var(--brand-chrome-text);
  --portal-footer-border: var(--brand-chrome-border);

  --portal-action-primary-bg: var(--brand-primary);
  --portal-action-primary-text: var(--brand-on-primary);
  --portal-action-primary-border: var(--brand-primary);
  --portal-action-primary-hover-bg: var(--brand-primary-hover);
  --portal-action-primary-hover-text: var(--brand-on-primary);
  --portal-action-primary-hover-border: var(--brand-primary-hover);
  --portal-action-primary-active-bg: var(--brand-primary-active);
  --portal-action-primary-active-text: var(--brand-on-primary);
  --portal-action-primary-active-border: var(--brand-primary-active);
  --portal-action-secondary-bg: var(--brand-accent);
  --portal-action-secondary-text: var(--brand-on-accent);
  --portal-action-secondary-border: var(--brand-accent);
  --portal-action-secondary-hover-bg: var(--brand-accent-hover);
  --portal-action-secondary-hover-text: var(--brand-on-accent);
  --portal-action-secondary-hover-border: var(--brand-accent-hover);
  --portal-action-secondary-active-bg: var(--brand-accent-active);
  --portal-action-secondary-active-text: var(--brand-on-accent);
  --portal-action-secondary-active-border: var(--brand-accent-active);
  --portal-action-tertiary-bg: transparent;
  --portal-action-tertiary-text: var(--brand-link);
  --portal-action-tertiary-border: var(--brand-border);
  --portal-action-tertiary-hover-bg: var(--brand-surface-subtle);
  --portal-action-tertiary-hover-text: var(--brand-link-hover);
  --portal-action-tertiary-hover-border: var(--brand-primary);
  --portal-action-tertiary-active-bg: var(--brand-surface-raised);
  --portal-action-tertiary-active-text: var(--brand-link-hover);
  --portal-action-tertiary-active-border: var(--brand-primary-active);
  --portal-action-destructive-bg: var(--brand-danger);
  --portal-action-destructive-text: var(--brand-on-danger);
  --portal-action-destructive-border: var(--brand-danger);
  --portal-action-destructive-hover-bg: var(--brand-danger-hover);
  --portal-action-destructive-hover-text: var(--brand-on-danger);
  --portal-action-destructive-hover-border: var(--brand-danger-hover);
  --portal-action-destructive-active-bg: var(--brand-danger-active);
  --portal-action-destructive-active-text: var(--brand-on-danger);
  --portal-action-destructive-active-border: var(--brand-danger-active);

  --portal-input-bg: var(--brand-surface);
  --portal-input-text: var(--brand-text);
  --portal-input-border: var(--brand-border);
  --portal-input-focus-border: var(--brand-primary);
  --portal-table-bg: transparent;
  --portal-table-header-bg: var(--brand-surface-subtle);
  --portal-table-text: var(--brand-text);
  --portal-table-border: var(--brand-divider);
  --portal-table-hover-bg: rgba(var(--brand-primary-rgb), .07);

  --portal-status-neutral-bg: var(--brand-neutral);
  --portal-status-neutral-text: var(--brand-on-neutral);
  --portal-status-neutral-border: var(--brand-neutral);
  --portal-status-neutral-icon: var(--brand-on-neutral);
  --portal-status-information-bg: var(--brand-info);
  --portal-status-information-text: var(--brand-on-info);
  --portal-status-information-border: var(--brand-info);
  --portal-status-information-icon: var(--brand-on-info);
  --portal-status-processing-bg: var(--brand-info);
  --portal-status-processing-text: var(--brand-on-info);
  --portal-status-processing-border: var(--brand-info);
  --portal-status-processing-icon: var(--brand-on-info);
  --portal-status-success-bg: var(--brand-success);
  --portal-status-success-text: var(--brand-on-success);
  --portal-status-success-border: var(--brand-success);
  --portal-status-success-icon: var(--brand-on-success);
  --portal-status-warning-bg: var(--brand-warning);
  --portal-status-warning-text: var(--brand-on-warning);
  --portal-status-warning-border: var(--brand-warning);
  --portal-status-warning-icon: var(--brand-on-warning);
  --portal-status-danger-bg: var(--brand-danger);
  --portal-status-danger-text: var(--brand-on-danger);
  --portal-status-danger-border: var(--brand-danger);
  --portal-status-danger-icon: var(--brand-on-danger);
  --portal-status-inactive-bg: var(--brand-surface-subtle);
  --portal-status-inactive-text: var(--brand-text-muted);
  --portal-status-inactive-border: var(--brand-border);
  --portal-status-inactive-icon: var(--brand-text-muted);

  /* Existing TREKK names become semantic aliases for compatibility. */
  --trekk-maroon: var(--brand-primary);
  --trekk-maroon-dark: var(--brand-primary-hover);
  --trekk-maroon-light: var(--brand-primary-hover);
  --trekk-accent: var(--brand-accent);
  --trekk-bg-light: var(--brand-page);
  --trekk-bg-medium: var(--brand-surface-subtle);
  --trekk-bg-card: var(--brand-surface);
  --trekk-text-dark: var(--brand-text);
  --trekk-text-medium: var(--brand-text-muted);
  --trekk-border: var(--brand-border);
  --trekk-divider: var(--brand-divider);
  --trekk-success: var(--brand-success);
  --trekk-warning: var(--brand-warning);
  --trekk-danger: var(--brand-danger);

  /* Bootstrap 5 bridges. */
  --bs-primary: var(--brand-primary);
  --bs-primary-rgb: var(--brand-primary-rgb);
  --bs-secondary: var(--brand-accent);
  --bs-secondary-rgb: var(--brand-accent-rgb);
  --bs-success: var(--brand-success);
  --bs-success-rgb: var(--brand-success-rgb);
  --bs-info: var(--brand-info);
  --bs-info-rgb: var(--brand-info-rgb);
  --bs-warning: var(--brand-warning);
  --bs-warning-rgb: var(--brand-warning-rgb);
  --bs-danger: var(--brand-danger);
  --bs-danger-rgb: var(--brand-danger-rgb);
  --bs-link-color: var(--brand-link);
  --bs-link-color-rgb: var(--brand-primary-rgb);
  --bs-link-hover-color: var(--brand-link-hover);
  --bs-link-hover-color-rgb: var(--brand-primary-rgb);
  --bs-border-color: var(--brand-border);
  --bs-body-bg: var(--brand-page);
  --bs-body-color: var(--brand-text);
  --bs-secondary-color: var(--brand-text-muted);
  --bs-secondary-bg: var(--brand-surface-subtle);
  --bs-tertiary-color: var(--brand-text-muted);
  --bs-tertiary-bg: var(--brand-surface-subtle);
  --bs-emphasis-color: var(--brand-text);
  --bs-gradient: none;
}

[data-theme="dark"] {
  --brand-page: #0f141a;
  --brand-surface: #171d24;
  --brand-surface-subtle: #202832;
  --brand-surface-raised: #1d252e;
  --brand-text: #edf2f7;
  --brand-text-muted: #aebac7;
  --brand-border: #34404c;
  --brand-divider: #28323d;
  --brand-focus: rgba(var(--brand-primary-rgb), .62);
  --brand-link: var(--brand-link-dark);
  --brand-link-hover: var(--brand-primary-tint);
  --brand-accent-link: var(--brand-accent-link-dark);
  --brand-chrome: #0f141a;
  --brand-chrome-text: #edf2f7;
  --brand-chrome-text-rgb: 237, 242, 247;
  --brand-chrome-border: rgba(237, 242, 247, .68);
  --brand-success: #42b883;
  --brand-success-rgb: 66, 184, 131;
  --brand-success-hover: #369b6e;
  --brand-success-active: #2b7e5a;
  --brand-on-success: #061b12;
  --brand-warning: #f2b84b;
  --brand-warning-rgb: 242, 184, 75;
  --brand-warning-hover: #d89e31;
  --brand-warning-active: #b98227;
  --brand-on-warning: #231900;
  --brand-danger: #f07a86;
  --brand-danger-rgb: 240, 122, 134;
  --brand-danger-hover: #d65f6c;
  --brand-danger-active: #b94b58;
  --brand-on-danger: #26070b;
  --brand-info: #69b6ec;
  --brand-info-rgb: 105, 182, 236;
  --brand-info-hover: #4d9ed7;
  --brand-info-active: #3982b5;
  --brand-on-info: #061522;
  --brand-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  --bs-body-bg: var(--brand-page);
  --bs-body-color: var(--brand-text);
}

.brand-logo-dark { display: none; }
[data-theme="dark"] .brand-logo-light { display: none; }
[data-theme="dark"] .brand-logo-dark { display: block; }
.trekk-logo-text {
  color: var(--portal-topbar-text);
  font-size: 1.1rem;
  font-weight: 700;
}

/* These rules intentionally target UI components only; media/canvas/maps are untouched. */
body.trekk-shell,
body.trekk-shell .trekk-main {
  background-color: var(--brand-page);
  color: var(--brand-text);
}

/* Compatibility bridge for legacy shared selectors while component templates migrate. */
body.trekk-shell {
  --trekk-bg-light: var(--portal-page);
  --trekk-bg-medium: var(--portal-surface-subtle);
  --trekk-bg-card: var(--portal-surface);
  --trekk-text-dark: var(--portal-text);
  --trekk-text-medium: var(--portal-text-muted);
  --trekk-border: var(--portal-border);
  --trekk-divider: var(--portal-border-subtle);
  --trekk-card-header-bg: var(--portal-surface-subtle);
  --trekk-card-header-text: var(--portal-text);
  --sidebar-bg: var(--portal-sidebar-bg);
  --sidebar-text: var(--portal-sidebar-text);
  --sidebar-text-muted: var(--portal-sidebar-muted);
  --sidebar-hover-bg: var(--portal-sidebar-hover-bg);
  --sidebar-active-bg: var(--portal-sidebar-selected-bg);
  --sidebar-border: var(--portal-sidebar-border);
}

body.trekk-shell :is(.trekk-hero-section, .trekk-header) {
  background: var(--portal-topbar-bg);
  background-image: none;
  border-color: var(--portal-topbar-border);
  color: var(--portal-topbar-text);
}

body.trekk-shell .trekk-sidebar {
  background: var(--portal-sidebar-bg);
  background-image: none;
  border-color: var(--portal-sidebar-border);
  color: var(--portal-sidebar-text);
}

body.trekk-shell .trekk-footer {
  background: var(--portal-footer-bg);
  background-image: none;
  border-color: var(--portal-footer-border);
  color: var(--portal-footer-text);
}

body.trekk-shell .trekk-sidebar-link,
body.trekk-shell .trekk-sidebar-section-title {
  color: var(--portal-sidebar-text);
}

body.trekk-shell .trekk-footer a {
  color: var(--portal-footer-text);
}

body.trekk-shell :is(.trekk-hero-section, .trekk-header) :is(a, button) {
  color: var(--portal-topbar-text);
}

body.trekk-shell :is(.trekk-hero-section, .trekk-header) :is(i, svg) {
  color: inherit;
  fill: currentColor;
}

body.trekk-shell .trekk-sidebar :is(i, svg) {
  color: var(--portal-sidebar-text);
  fill: currentColor;
}

body.trekk-shell .trekk-footer :is(i, svg) {
  color: var(--portal-footer-text);
  fill: currentColor;
}

body.trekk-shell :is(.trekk-hero-section, .trekk-header) .btn-outline-light {
  --bs-btn-color: var(--portal-topbar-text);
  --bs-btn-border-color: var(--portal-topbar-border);
  --bs-btn-hover-color: var(--portal-topbar-hover-foreground);
  --bs-btn-hover-bg: var(--portal-topbar-hover-background);
  --bs-btn-hover-border-color: var(--portal-topbar-hover-background);
  --bs-btn-active-color: var(--portal-topbar-active-foreground);
  --bs-btn-active-bg: var(--portal-topbar-active-background);
  --bs-btn-active-border-color: var(--portal-topbar-active-background);
  background-color: transparent;
  background-image: none;
  border-color: var(--portal-topbar-border);
  color: var(--portal-topbar-text);
}

body.trekk-shell :is(.trekk-hero-section, .trekk-header) .btn-outline-light:hover {
  background-color: var(--portal-topbar-hover-background);
  background-image: none;
  border-color: var(--portal-topbar-hover-background);
  color: var(--portal-topbar-hover-foreground);
}

body.trekk-shell :is(.trekk-hero-section, .trekk-header) .btn-outline-light:is(:active, .active, .show) {
  background-color: var(--portal-topbar-active-background);
  background-image: none;
  border-color: var(--portal-topbar-active-background);
  color: var(--portal-topbar-active-foreground);
}

body.trekk-shell :is(.trekk-hero-section, .trekk-header) .btn-outline-light:focus-visible {
  box-shadow: 0 0 0 .2rem var(--portal-focus);
  outline: 2px solid var(--portal-topbar-control-border);
  outline-offset: 2px;
}

body.trekk-shell :is(.trekk-hero-section, .trekk-header) .btn-outline-light:focus:not(:focus-visible) {
  box-shadow: none;
  outline: 0;
}

body.trekk-shell .trekk-sidebar-link:hover {
  background: var(--portal-sidebar-hover-bg);
  color: var(--portal-sidebar-text);
}

body.trekk-shell .trekk-sidebar-link.active {
  background: var(--portal-sidebar-selected-bg);
  border-left-color: var(--portal-sidebar-border);
  color: var(--portal-sidebar-text);
}

body.trekk-shell .card,
body.trekk-shell .trekk-card,
body.trekk-shell .trekk-smart-card,
body.trekk-shell .trekk-sidebar-card,
body.trekk-shell .overview-hero,
body.trekk-shell .overview-panel,
body.trekk-shell .project-overview-card,
body.trekk-shell .overview-empty-state,
body.trekk-shell .dashboard-scope-summary,
body.trekk-shell .upload-form-container {
  background-color: var(--portal-surface-card);
  background-image: none;
  border-color: var(--portal-border-default);
  color: var(--portal-text);
  box-shadow: var(--brand-shadow);
}

body.trekk-shell .card-header,
body.trekk-shell .trekk-card-header,
body.trekk-shell .modal-header.trekk-modal-header {
  background: var(--portal-surface-subtle);
  background-image: none;
  border-color: var(--portal-border-divider);
  color: var(--portal-text);
}

/* Solid, predictable buttons.  No gradients, transforms, or color leaks. */
.btn.btn-primary,
.btn.btn-trekk,
.btn.btn-trekk-primary,
.btn-trekk,
.btn-trekk-primary,
.btn-auth-primary {
  background: var(--portal-action-primary-bg) !important;
  background-image: none !important;
  border-color: var(--portal-action-primary-border) !important;
  color: var(--portal-action-primary-text) !important;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus-visible,
.btn.btn-trekk:hover,
.btn.btn-trekk-primary:hover,
.btn-trekk:hover,
.btn-trekk-primary:hover,
.btn-auth-primary:hover,
.btn-auth-primary:focus-visible {
  background: var(--portal-action-primary-hover-bg) !important;
  background-image: none !important;
  border-color: var(--portal-action-primary-hover-border) !important;
  color: var(--portal-action-primary-hover-text) !important;
}

.btn.btn-primary:active,
.btn.btn-trekk:active,
.btn.btn-trekk-primary:active,
.btn-trekk:active,
.btn-trekk-primary:active,
.btn-auth-primary:active {
  background: var(--portal-action-primary-active-bg) !important;
  border-color: var(--portal-action-primary-active-border) !important;
  color: var(--portal-action-primary-active-text) !important;
}

.btn.btn-trekk-secondary,
.btn-trekk-secondary,
.btn-secondary {
  background: var(--portal-action-secondary-bg) !important;
  background-image: none !important;
  border-color: var(--portal-action-secondary-border) !important;
  color: var(--portal-action-secondary-text) !important;
}

.btn.btn-trekk-secondary:hover,
.btn-trekk-secondary:hover,
.btn-secondary:hover {
  background: var(--portal-action-secondary-hover-bg) !important;
  border-color: var(--portal-action-secondary-hover-border) !important;
  color: var(--portal-action-secondary-hover-text) !important;
}

.btn.btn-trekk-outline,
.btn-trekk-outline,
.btn-auth-secondary {
  background: var(--portal-action-tertiary-bg) !important;
  background-image: none !important;
  border-color: var(--portal-action-tertiary-border) !important;
  color: var(--portal-action-tertiary-text) !important;
}

.btn.btn-trekk-outline:hover,
.btn-trekk-outline:hover,
.btn-auth-secondary:hover,
.btn-auth-secondary:focus-visible {
  background: var(--portal-action-tertiary-hover-bg) !important;
  border-color: var(--portal-action-tertiary-hover-border) !important;
  color: var(--portal-action-tertiary-hover-text) !important;
}

.btn:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid var(--portal-focus) !important;
  outline-offset: 2px;
  box-shadow: none !important;
}

/* Forms, navigation, and common Bootstrap surfaces. */
body.distributor-branded .form-control,
body.distributor-branded .form-select,
body.distributor-branded .input-group-text {
  background-color: var(--portal-input-background);
  border-color: var(--portal-input-border);
  color: var(--portal-input-foreground);
}
body.distributor-branded .form-control:focus,
body.distributor-branded .form-select:focus,
body.distributor-branded .form-check-input:focus {
  border-color: var(--portal-input-focus);
  box-shadow: 0 0 0 .2rem var(--portal-focus);
}
body.distributor-branded .form-check-input:checked {
  background-color: var(--portal-input-checkbox-selected-background);
  border-color: var(--portal-input-checkbox-selected-background);
}
body.distributor-branded .dropdown-menu,
body.distributor-branded .list-group-item,
body.distributor-branded .accordion-item,
body.distributor-branded .modal-content,
body.distributor-branded .toast {
  background-color: var(--brand-surface);
  border-color: var(--brand-border);
  color: var(--brand-text);
}
body.distributor-branded .dropdown-item:hover,
body.distributor-branded .dropdown-item:focus,
body.distributor-branded .list-group-item-action:hover {
  background-color: var(--brand-surface-subtle);
  color: var(--brand-text);
}
body.trekk-shell .trekk-main .nav-link,
body.trekk-shell .trekk-main .page-link,
body.trekk-shell .trekk-main .alert-link,
body.trekk-shell .trekk-main .portal-link,
body.trekk-shell .trekk-main a.link-primary {
  color: var(--brand-link);
}
body.trekk-shell .trekk-main .nav-link:hover,
body.trekk-shell .trekk-main .page-link:hover,
body.trekk-shell .trekk-main .alert-link:hover,
body.trekk-shell .trekk-main .portal-link:hover,
body.trekk-shell .trekk-main a.link-primary:hover {
  color: var(--brand-link-hover);
}

/* Shared, opt-in section navigation component. */
body.trekk-shell .trekk-main .portal-section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-family: inherit;
}
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--portal-text-secondary);
  font-family: inherit;
  font-weight: 600;
  padding: .5rem .875rem;
}
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link:hover {
  background-color: var(--portal-surface-subtle);
  border-color: var(--portal-border-subtle);
  color: var(--portal-text-link-hover);
}
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link.active,
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .show > .nav-link,
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link[aria-current="page"] {
  background: var(--portal-action-primary-bg) !important;
  background-image: none !important;
  border-color: var(--portal-action-primary-border) !important;
  color: var(--portal-action-primary-text) !important;
}
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link.active:hover,
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .show > .nav-link:hover,
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link[aria-current="page"]:hover {
  background: var(--portal-action-primary-hover-bg) !important;
  border-color: var(--portal-action-primary-hover-border) !important;
  color: var(--portal-action-primary-hover-text) !important;
}
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link.active:active,
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .show > .nav-link:active,
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link[aria-current="page"]:active {
  background: var(--portal-action-primary-active-bg) !important;
  border-color: var(--portal-action-primary-active-border) !important;
  color: var(--portal-action-primary-active-text) !important;
}
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link:focus-visible {
  box-shadow: none !important;
  outline: 3px solid var(--portal-focus) !important;
  outline-offset: 2px;
}
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link.disabled,
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link:disabled,
body.trekk-shell .trekk-main .nav-pills.portal-section-tabs .nav-link[aria-disabled="true"] {
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  color: var(--portal-text-disabled) !important;
  cursor: not-allowed;
  pointer-events: none;
}
body.distributor-branded .page-item.active .page-link {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--brand-on-primary);
}
body.distributor-branded .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--brand-text);
  --bs-table-border-color: var(--brand-divider);
}
body.distributor-branded .table thead,
body.distributor-branded .table-light {
  --bs-table-bg: var(--brand-surface-subtle);
  --bs-table-color: var(--brand-text);
}
body.distributor-branded .progress {
  background-color: var(--brand-surface-subtle);
}
body.distributor-branded .progress-bar {
  background-color: var(--brand-primary);
  background-image: none;
}

/* Report controls, download bars, and card status accents. */
body.trekk-shell #report-range-group .report-range-btn.report-range-btn-active,
body.trekk-shell .report-range-btn.report-range-btn-active {
  background: var(--brand-primary) !important;
  background-image: none !important;
  border-color: var(--brand-primary) !important;
  color: var(--brand-on-primary) !important;
}
body.trekk-shell .download-progress-bar {
  background: var(--brand-primary) !important;
  background-image: none !important;
}
body.trekk-shell .project-status-processing { border-top-color: var(--brand-info); }
body.trekk-shell .project-status-complete { border-top-color: var(--brand-success); }
body.trekk-shell .project-status-issue { border-top-color: var(--brand-danger); }
body.trekk-shell .project-status-awaiting,
body.trekk-shell .project-status-empty { border-top-color: var(--brand-text-muted); }

/* Legacy auth/modal selectors still used by older pages. */
.modal-header.trekk-modal-header,
.btn-auth-primary,
.btn-auth-primary:hover,
.btn-auth-primary:focus {
  background-image: none !important;
}

/* --------------------------------------------------------------------------
   Bootstrap contract

   Bootstrap's component classes compile their own colors, so root variables
   alone are not enough.  This bridge deliberately covers the contextual
   families developers use when adding normal portal features.
   -------------------------------------------------------------------------- */
.btn {
  background-image: none !important;
  transform: none !important;
  box-shadow: none;
}

.btn.btn-outline-primary {
  --bs-btn-color: var(--brand-link);
  --bs-btn-border-color: var(--brand-link);
  --bs-btn-hover-color: var(--brand-on-primary);
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-active-color: var(--brand-on-primary);
  --bs-btn-active-bg: var(--brand-primary-active);
  --bs-btn-active-border-color: var(--brand-primary-active);
  --bs-btn-disabled-color: var(--brand-text-muted);
  --bs-btn-disabled-border-color: var(--brand-border);
  background-image: none !important;
}

.btn.btn-outline-secondary {
  --bs-btn-color: var(--brand-accent-link);
  --bs-btn-border-color: var(--brand-accent-link);
  --bs-btn-hover-color: var(--brand-on-accent);
  --bs-btn-hover-bg: var(--brand-accent);
  --bs-btn-hover-border-color: var(--brand-accent);
  --bs-btn-active-color: var(--brand-on-accent);
  --bs-btn-active-bg: var(--brand-accent-active);
  --bs-btn-active-border-color: var(--brand-accent-active);
  background-image: none !important;
}

.btn-success,
.btn-outline-success { --context-color: var(--brand-success); --context-hover: var(--brand-success-hover); --context-active: var(--brand-success-active); --context-on: var(--brand-on-success); }
.btn-warning,
.btn-outline-warning { --context-color: var(--brand-warning); --context-hover: var(--brand-warning-hover); --context-active: var(--brand-warning-active); --context-on: var(--brand-on-warning); }
.btn-danger,
.btn-outline-danger { --context-color: var(--brand-danger); --context-hover: var(--brand-danger-hover); --context-active: var(--brand-danger-active); --context-on: var(--brand-on-danger); }
.btn-info,
.btn-outline-info { --context-color: var(--brand-info); --context-hover: var(--brand-info-hover); --context-active: var(--brand-info-active); --context-on: var(--brand-on-info); }

:is(.btn-success, .btn-warning, .btn-danger, .btn-info) {
  --bs-btn-color: var(--context-on);
  --bs-btn-bg: var(--context-color);
  --bs-btn-border-color: var(--context-color);
  --bs-btn-hover-color: var(--context-on);
  --bs-btn-hover-bg: var(--context-hover);
  --bs-btn-hover-border-color: var(--context-hover);
  --bs-btn-active-color: var(--context-on);
  --bs-btn-active-bg: var(--context-active);
  --bs-btn-active-border-color: var(--context-active);
  background-image: none !important;
}

:is(.btn-outline-success, .btn-outline-warning, .btn-outline-danger, .btn-outline-info) {
  --bs-btn-color: var(--context-color);
  --bs-btn-border-color: var(--context-color);
  --bs-btn-hover-color: var(--context-on);
  --bs-btn-hover-bg: var(--context-color);
  --bs-btn-hover-border-color: var(--context-color);
  --bs-btn-active-color: var(--context-on);
  --bs-btn-active-bg: var(--context-color);
  --bs-btn-active-border-color: var(--context-color);
  background-image: none !important;
}

.btn-light {
  --bs-btn-color: var(--brand-text);
  --bs-btn-bg: var(--brand-surface-subtle);
  --bs-btn-border-color: var(--brand-border);
  --bs-btn-hover-color: var(--brand-text);
  --bs-btn-hover-bg: var(--brand-surface);
  --bs-btn-hover-border-color: var(--brand-primary);
}

.btn-dark {
  --bs-btn-color: var(--brand-page);
  --bs-btn-bg: var(--brand-text);
  --bs-btn-border-color: var(--brand-text);
  --bs-btn-hover-color: var(--brand-page);
  --bs-btn-hover-bg: var(--brand-text-muted);
  --bs-btn-hover-border-color: var(--brand-text-muted);
}

.btn-link {
  --bs-btn-color: var(--brand-link);
  --bs-btn-hover-color: var(--brand-link-hover);
  text-decoration-color: rgba(var(--brand-primary-rgb), .38);
}

.btn:disabled,
.btn.disabled {
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Bootstrap color utilities and badges. */
.text-primary,
.link-primary { color: var(--brand-link) !important; }
.text-secondary,
.link-secondary { color: var(--brand-accent-link) !important; }
.text-success,
.link-success { color: var(--portal-status-success-icon) !important; }
.text-warning,
.link-warning { color: var(--portal-status-warning-icon) !important; }
.text-danger,
.link-danger { color: var(--portal-status-danger-icon) !important; }
.text-info,
.link-info { color: var(--portal-status-information-icon) !important; }

.bg-primary,
.text-bg-primary { background-color: var(--brand-primary) !important; background-image: none !important; color: var(--brand-on-primary) !important; }
.bg-secondary,
.text-bg-secondary { background-color: var(--brand-accent) !important; background-image: none !important; color: var(--brand-on-accent) !important; }
.bg-success,
.text-bg-success { background-color: var(--brand-success) !important; background-image: none !important; color: var(--brand-on-success) !important; }
.bg-warning,
.text-bg-warning { background-color: var(--brand-warning) !important; background-image: none !important; color: var(--brand-on-warning) !important; }
.bg-danger,
.text-bg-danger { background-color: var(--brand-danger) !important; background-image: none !important; color: var(--brand-on-danger) !important; }
.bg-info,
.text-bg-info { background-color: var(--brand-info) !important; background-image: none !important; color: var(--brand-on-info) !important; }

.border-primary { border-color: var(--brand-primary) !important; }
.border-secondary { border-color: var(--brand-accent) !important; }
.border-success { border-color: var(--brand-success) !important; }
.border-warning { border-color: var(--brand-warning) !important; }
.border-danger { border-color: var(--brand-danger) !important; }
.border-info { border-color: var(--brand-info) !important; }

.badge.bg-primary,
.badge.text-bg-primary { color: var(--brand-on-primary) !important; }
.badge.bg-secondary,
.badge.text-bg-secondary { color: var(--brand-on-accent) !important; }

/* Flat, semantic alerts. */
.alert {
  background-image: none !important;
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
}
.alert-primary,
.alert-info { background: var(--portal-status-information-bg) !important; border-color: var(--portal-status-information-border); color: var(--portal-status-information-text) !important; }
.alert-secondary { background: var(--portal-status-neutral-bg) !important; border-color: var(--portal-status-neutral-border); color: var(--portal-status-neutral-text) !important; }
.alert-success { background: var(--portal-status-success-bg) !important; border-color: var(--portal-status-success-border); color: var(--portal-status-success-text) !important; }
.alert-warning { background: var(--portal-status-warning-bg) !important; border-color: var(--portal-status-warning-border); color: var(--portal-status-warning-text) !important; }
.alert-danger { background: var(--portal-status-danger-bg) !important; border-color: var(--portal-status-danger-border); color: var(--portal-status-danger-text) !important; }
.alert .alert-link { color: inherit !important; }

/* Forms, validation, and selection controls. */
body.trekk-shell :is(.form-control, .form-select, .input-group-text) {
  background-color: var(--portal-input-background);
  border-color: var(--portal-input-border);
  color: var(--portal-input-foreground);
}
body.trekk-shell :is(.form-control, .form-select)::placeholder { color: var(--portal-input-placeholder); opacity: 1; }
body.trekk-shell :is(.form-control, .form-select):focus {
  background-color: var(--portal-input-background);
  border-color: var(--portal-input-focus);
  color: var(--portal-input-foreground);
  box-shadow: 0 0 0 .2rem var(--portal-focus);
}
body.trekk-shell .form-check-input:checked {
  background-color: var(--portal-input-checkbox-selected-background);
  border-color: var(--portal-input-checkbox-selected-background);
}
body.trekk-shell .form-check-input:focus { border-color: var(--portal-input-focus); box-shadow: 0 0 0 .2rem var(--portal-focus); }
body.trekk-shell .form-range::-webkit-slider-thumb { background-color: var(--portal-input-checkbox-selected-background); }
body.trekk-shell .form-range::-moz-range-thumb { background-color: var(--portal-input-checkbox-selected-background); }
body.trekk-shell .is-valid,
body.trekk-shell .was-validated :valid { border-color: var(--portal-input-validation-success) !important; }
body.trekk-shell .is-invalid,
body.trekk-shell .was-validated :invalid { border-color: var(--portal-input-validation-error) !important; }
body.trekk-shell .valid-feedback { color: var(--portal-input-validation-success); }
body.trekk-shell .invalid-feedback { color: var(--portal-input-validation-error); }

/* Navigation and interactive collection states. */
body.trekk-shell .nav-pills .nav-link.active,
body.trekk-shell .nav-pills .show > .nav-link,
body.trekk-shell .dropdown-item.active,
body.trekk-shell .dropdown-item:active,
body.trekk-shell .list-group-item.active {
  background: var(--portal-action-primary-bg) !important;
  background-image: none !important;
  border-color: var(--portal-action-primary-border) !important;
  color: var(--portal-action-primary-text) !important;
}
body.trekk-shell .nav-tabs .nav-link.active,
body.trekk-shell .nav-tabs .nav-item.show .nav-link {
  background-color: var(--portal-surface-card);
  border-color: var(--portal-border-default) var(--portal-border-default) var(--portal-border-active);
  border-bottom-width: 3px;
  color: var(--portal-text-link);
}
body.trekk-shell .page-link {
  background-color: var(--portal-surface-card);
  border-color: var(--portal-border-default);
  color: var(--portal-text-link);
}
body.trekk-shell .page-link:hover { background-color: var(--portal-surface-subtle); border-color: var(--portal-border-active); }
body.trekk-shell .page-item.active .page-link {
  background-color: var(--portal-action-primary-bg);
  border-color: var(--portal-action-primary-border);
  color: var(--portal-action-primary-text);
}
body.trekk-shell .accordion-button:not(.collapsed) {
  background: var(--portal-surface-subtle);
  color: var(--portal-text-link);
  box-shadow: inset 0 calc(-1 * var(--bs-border-width)) 0 var(--portal-border-divider);
}
body.trekk-shell .accordion-button:focus { border-color: var(--portal-border-focus); box-shadow: 0 0 0 .2rem var(--portal-focus); }

/* Tables and contextual rows. */
body.trekk-shell .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--brand-text);
  --bs-table-border-color: var(--brand-divider);
  --bs-table-striped-bg: rgba(var(--brand-primary-rgb), .035);
  --bs-table-striped-color: var(--brand-text);
  --bs-table-hover-bg: rgba(var(--brand-primary-rgb), .07);
  --bs-table-hover-color: var(--brand-text);
}
body.trekk-shell :is(.table-primary, .table-secondary, .table-light) {
  --bs-table-bg: var(--brand-surface-subtle);
  --bs-table-color: var(--brand-text);
  --bs-table-border-color: var(--brand-border);
}
body.trekk-shell .table-success { --bs-table-bg: rgba(var(--brand-success-rgb), .12); --bs-table-color: var(--brand-text); }
body.trekk-shell .table-warning { --bs-table-bg: rgba(var(--brand-warning-rgb), .13); --bs-table-color: var(--brand-text); }
body.trekk-shell .table-danger { --bs-table-bg: rgba(var(--brand-danger-rgb), .12); --bs-table-color: var(--brand-text); }
body.trekk-shell .table-info { --bs-table-bg: rgba(var(--brand-info-rgb), .12); --bs-table-color: var(--brand-text); }

.list-group-item-primary { background-color: rgba(var(--brand-primary-rgb), .1); color: var(--brand-link); }
.list-group-item-secondary { background-color: rgba(var(--brand-accent-rgb), .1); color: var(--brand-text); }
.list-group-item-success { background-color: rgba(var(--brand-success-rgb), .12); color: var(--brand-success); }
.list-group-item-warning { background-color: rgba(var(--brand-warning-rgb), .13); color: var(--brand-warning); }
.list-group-item-danger { background-color: rgba(var(--brand-danger-rgb), .12); color: var(--brand-danger); }
.list-group-item-info { background-color: rgba(var(--brand-info-rgb), .12); color: var(--brand-info); }

/* Progress, loaders, and overlays. */
body.trekk-shell .progress { background: var(--brand-surface-subtle); }
body.trekk-shell .progress-bar {
  background: var(--portal-status-processing-bg) !important;
  background-image: none !important;
  color: var(--portal-status-processing-text);
}
body.trekk-shell .progress-bar.bg-success { background-color: var(--portal-status-success-bg) !important; color: var(--portal-status-success-text); }
body.trekk-shell .progress-bar.bg-danger { background-color: var(--portal-status-danger-bg) !important; color: var(--portal-status-danger-text); }
body.trekk-shell .spinner-border.text-primary,
body.trekk-shell .spinner-grow.text-primary { color: var(--brand-primary) !important; }

.bg-light,
.text-bg-light { background-color: var(--brand-surface-subtle) !important; color: var(--brand-text) !important; }
.bg-dark,
.text-bg-dark { background-color: var(--brand-text) !important; color: var(--brand-page) !important; }
.border-light { border-color: var(--brand-divider) !important; }
.border-dark { border-color: var(--brand-text-muted) !important; }
body.trekk-shell .table-active { --bs-table-bg-state: rgba(var(--brand-primary-rgb), .09); }

.btn-outline-dark {
  --bs-btn-color: var(--brand-text);
  --bs-btn-border-color: var(--brand-text-muted);
  --bs-btn-hover-color: var(--brand-page);
  --bs-btn-hover-bg: var(--brand-text);
  --bs-btn-hover-border-color: var(--brand-text);
}

.btn-outline-light {
  --bs-btn-color: var(--brand-text);
  --bs-btn-border-color: var(--brand-border);
  --bs-btn-hover-color: var(--brand-text);
  --bs-btn-hover-bg: var(--brand-surface-subtle);
  --bs-btn-hover-border-color: var(--brand-primary);
}

/* Known portal surfaces that historically bypassed shared tokens. */
body.trekk-shell :is(
  .uploads-filters,
  .family-drawer-header,
  .viewer-actions-drawer-header,
  .trekk-smart-card .card-header,
  .trekk-sidebar-card .card-header,
  .download-progress-bar,
  .drop-zone,
  .modal-header.trekk-modal-header
) {
  background-image: none !important;
}
body.trekk-shell :is(.uploads-filters, .family-drawer-header, .viewer-actions-drawer-header) {
  background: var(--brand-surface-subtle) !important;
  border-color: var(--brand-border) !important;
}
body.trekk-shell :is(.family-drawer, .viewer-actions-drawer) {
  background: var(--brand-surface) !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-text) !important;
}
body.trekk-shell :is(.family-meta-card, .family-summary-card, .artifact-group, .family-drawer-selection,
                     .viewer-actions-meta-card, .viewer-actions-summary-card, .viewer-actions-section,
                     .viewer-actions-status-card) {
  background: var(--brand-surface) !important;
  border-color: var(--brand-border) !important;
  color: var(--brand-text) !important;
}
body.trekk-shell :is(.family-drawer-eyebrow, .viewer-actions-drawer-eyebrow) { color: var(--brand-link) !important; }
body.trekk-shell .group-row { background-color: rgba(var(--brand-primary-rgb), .055) !important; }
body.trekk-shell .file_family-row { background-color: var(--brand-surface) !important; }

body.trekk-shell #report-range-group .report-range-btn,
body.trekk-shell .report-download-btn {
  background: var(--portal-action-tertiary-bg) !important;
  border-color: var(--portal-action-tertiary-border) !important;
  color: var(--portal-action-tertiary-text) !important;
}
body.trekk-shell #report-range-group .report-range-btn:hover,
body.trekk-shell .report-download-btn:hover {
  background: var(--portal-action-tertiary-hover-bg) !important;
  border-color: var(--portal-action-tertiary-hover-border) !important;
  color: var(--portal-action-tertiary-hover-text) !important;
}
body.trekk-shell .modal-header.trekk-modal-header {
  background: var(--portal-surface-subtle) !important;
  border-color: var(--portal-border-divider) !important;
  color: var(--portal-text) !important;
}
body.trekk-shell .modal-header.trekk-modal-header :is(.modal-title, .text-muted) {
  color: var(--portal-text) !important;
}
body.trekk-shell :is(.dashboard-card, .trekk-smart-card) {
  border-color: var(--portal-border-default);
}
body.trekk-shell :is(.dashboard-card, .trekk-smart-card) > .card-header {
  background: var(--portal-surface-subtle) !important;
  border-color: var(--portal-border-divider) !important;
  color: var(--portal-text) !important;
}

/* Semantic components. Keep Bootstrap class names for layout only. */
body.trekk-shell .btn.portal-action--primary,
body.trekk-shell .btn.portal-action--secondary,
body.trekk-shell .btn.portal-action--tertiary,
body.trekk-shell .btn.portal-action--destructive {
  background-image: none;
  box-shadow: none;
}
body.trekk-shell .btn.portal-action--primary {
  background-color: var(--portal-action-primary-bg);
  border-color: var(--portal-action-primary-border);
  color: var(--portal-action-primary-text);
}
body.trekk-shell .btn.portal-action--primary:hover {
  background-color: var(--portal-action-primary-hover-bg);
  border-color: var(--portal-action-primary-hover-border);
  color: var(--portal-action-primary-hover-text);
}
body.trekk-shell .btn.portal-action--primary:active,
body.trekk-shell .btn.portal-action--primary.active {
  background-color: var(--portal-action-primary-active-bg);
  border-color: var(--portal-action-primary-active-border);
  color: var(--portal-action-primary-active-text);
}
body.trekk-shell .btn.portal-action--secondary {
  background-color: var(--portal-action-secondary-bg);
  border-color: var(--portal-action-secondary-border);
  color: var(--portal-action-secondary-text);
}
body.trekk-shell .btn.portal-action--secondary:hover {
  background-color: var(--portal-action-secondary-hover-bg);
  border-color: var(--portal-action-secondary-hover-border);
  color: var(--portal-action-secondary-hover-text);
}
body.trekk-shell .btn.portal-action--secondary:active,
body.trekk-shell .btn.portal-action--secondary.active {
  background-color: var(--portal-action-secondary-active-bg);
  border-color: var(--portal-action-secondary-active-border);
  color: var(--portal-action-secondary-active-text);
}
body.trekk-shell .btn.portal-action--tertiary {
  background-color: var(--portal-action-tertiary-bg);
  border-color: var(--portal-action-tertiary-border);
  color: var(--portal-action-tertiary-text);
}
body.trekk-shell .btn.portal-action--tertiary:hover {
  background-color: var(--portal-action-tertiary-hover-bg);
  border-color: var(--portal-action-tertiary-hover-border);
  color: var(--portal-action-tertiary-hover-text);
}
body.trekk-shell .btn.portal-action--tertiary:active,
body.trekk-shell .btn.portal-action--tertiary.active {
  background-color: var(--portal-action-tertiary-active-bg);
  border-color: var(--portal-action-tertiary-active-border);
  color: var(--portal-action-tertiary-active-text);
}
body.trekk-shell .btn.portal-action--destructive {
  background-color: var(--portal-action-destructive-bg);
  border-color: var(--portal-action-destructive-border);
  color: var(--portal-action-destructive-text);
}
body.trekk-shell .btn.portal-action--destructive:hover {
  background-color: var(--portal-action-destructive-hover-bg);
  border-color: var(--portal-action-destructive-hover-border);
  color: var(--portal-action-destructive-hover-text);
}
body.trekk-shell .btn.portal-action--destructive:active,
body.trekk-shell .btn.portal-action--destructive.active {
  background-color: var(--portal-action-destructive-active-bg);
  border-color: var(--portal-action-destructive-active-border);
  color: var(--portal-action-destructive-active-text);
}
body.trekk-shell :is(.portal-action--primary, .portal-action--secondary, .portal-action--tertiary, .portal-action--destructive):focus-visible {
  box-shadow: 0 0 0 .2rem var(--portal-focus);
  outline: 2px solid transparent;
}
body.trekk-shell .btn.portal-action--primary:disabled { background: var(--portal-action-primary-disabled-bg); border-color: var(--portal-action-primary-disabled-border); color: var(--portal-action-primary-disabled-text); }
body.trekk-shell .btn.portal-action--secondary:disabled { background: var(--portal-action-secondary-disabled-bg); border-color: var(--portal-action-secondary-disabled-border); color: var(--portal-action-secondary-disabled-text); }
body.trekk-shell .btn.portal-action--tertiary:disabled { background: var(--portal-action-tertiary-disabled-bg); border-color: var(--portal-action-tertiary-disabled-border); color: var(--portal-action-tertiary-disabled-text); }
body.trekk-shell .btn.portal-action--destructive:disabled { background: var(--portal-action-destructive-disabled-bg); border-color: var(--portal-action-destructive-disabled-border); color: var(--portal-action-destructive-disabled-text); }

.portal-surface--raised { background: var(--portal-surface-raised); border-color: var(--portal-border); color: var(--portal-text); }

body.trekk-shell :is(.form-control, .form-select) {
  background-color: var(--portal-input-bg);
  border-color: var(--portal-input-border);
  color: var(--portal-input-text);
}
body.trekk-shell .form-control::placeholder { color: var(--portal-input-placeholder); opacity: 1; }
body.trekk-shell :is(.form-control, .form-select):hover:not(:disabled) { border-color: var(--portal-input-hover-border); }
body.trekk-shell :is(.form-control, .form-select):focus {
  background-color: var(--portal-input-bg);
  border-color: var(--portal-input-focus-border);
  box-shadow: 0 0 0 .2rem var(--portal-focus);
  color: var(--portal-input-text);
}
body.trekk-shell :is(.form-control, .form-select):disabled {
  background-color: var(--portal-input-disabled-background);
  color: var(--portal-input-disabled-foreground);
}
body.trekk-shell .form-check-input:checked {
  background-color: var(--portal-input-checkbox-selected-background);
  border-color: var(--portal-input-checkbox-selected-background);
}
body.trekk-shell .form-check-input:focus { box-shadow: 0 0 0 .2rem var(--portal-focus); }
body.trekk-shell .is-valid { border-color: var(--portal-input-validation-success); }
body.trekk-shell .is-invalid { border-color: var(--portal-input-validation-error); }

body.trekk-shell .table {
  --bs-table-bg: var(--portal-table-bg);
  --bs-table-color: var(--portal-table-text);
  --bs-table-border-color: var(--portal-table-border);
  --bs-table-hover-bg: var(--portal-table-hover-background);
  --bs-table-hover-color: var(--portal-table-hover-foreground);
  color: var(--portal-table-text);
}
body.trekk-shell .table > thead > tr > * {
  background-color: var(--portal-table-header-bg);
  border-color: var(--portal-table-header-border);
  color: var(--portal-table-header-text);
}
body.trekk-shell .table > thead > tr > * .portal-identifier-link,
body.trekk-shell .table > thead > tr > * .portal-identifier-link:hover,
body.trekk-shell .table > thead > tr > * .portal-identifier-link:focus {
  color: var(--portal-table-header-text);
}
body.trekk-shell .table > tbody > tr:nth-of-type(even) > * { background-color: var(--portal-table-alternate-background); }

body.trekk-shell :is(.dropdown-menu, .popover, .modal-content, .offcanvas, .toast) {
  background-color: var(--portal-surface-overlay);
  border-color: var(--portal-border);
  color: var(--portal-text);
}
body.trekk-shell :is(.dropdown-item, .popover-body) { color: var(--portal-text); }
body.trekk-shell .dropdown-item:hover { background-color: var(--portal-surface-subtle); color: var(--portal-text); }

.portal-status {
  background-color: var(--portal-status-neutral-bg);
  border: 1px solid var(--portal-status-neutral-border);
  color: var(--portal-status-neutral-text);
}
.portal-status--information { background-color: var(--portal-status-information-bg); border-color: var(--portal-status-information-border); color: var(--portal-status-information-text); }
.portal-status--processing { background-color: var(--portal-status-processing-bg); border-color: var(--portal-status-processing-border); color: var(--portal-status-processing-text); }
.portal-status--success { background-color: var(--portal-status-success-bg); border-color: var(--portal-status-success-border); color: var(--portal-status-success-text); }
.portal-status--warning { background-color: var(--portal-status-warning-bg); border-color: var(--portal-status-warning-border); color: var(--portal-status-warning-text); }
.portal-status--danger { background-color: var(--portal-status-danger-bg); border-color: var(--portal-status-danger-border); color: var(--portal-status-danger-text); }
.portal-status--inactive { background-color: var(--portal-status-inactive-bg); border-color: var(--portal-status-inactive-border); color: var(--portal-status-inactive-text); }
body.trekk-shell .progress-bar.portal-progress--information { background-color: var(--portal-status-information-bg) !important; color: var(--portal-status-information-text); }
body.trekk-shell .progress-bar.portal-progress--processing { background-color: var(--portal-status-processing-bg) !important; color: var(--portal-status-processing-text); }
body.trekk-shell .progress-bar.portal-progress--success { background-color: var(--portal-status-success-bg) !important; color: var(--portal-status-success-text); }
body.trekk-shell .progress-bar.portal-progress--warning { background-color: var(--portal-status-warning-bg) !important; color: var(--portal-status-warning-text); }
body.trekk-shell .progress-bar.portal-progress--danger { background-color: var(--portal-status-danger-bg) !important; color: var(--portal-status-danger-text); }
.portal-status-row--information > * { background-color: var(--portal-status-information-bg) !important; color: var(--portal-status-information-text); }
.portal-status-row--processing > * { background-color: var(--portal-table-processing-background) !important; }
.portal-status-row--success > * { background-color: var(--portal-status-success-bg) !important; color: var(--portal-status-success-text); }
.portal-status-row--warning > * { background-color: var(--portal-status-warning-bg) !important; color: var(--portal-status-warning-text); }
.portal-status-row--danger > * { background-color: var(--portal-status-danger-bg) !important; color: var(--portal-status-danger-text); }
.portal-status-row--inactive > * { background-color: var(--portal-surface-subtle) !important; }
.portal-status-text--information { color: var(--portal-status-information-text) !important; }
.portal-status-text--processing { color: var(--portal-status-processing-text) !important; }
.portal-status-text--success { color: var(--portal-status-success-text) !important; }
.portal-status-text--warning { color: var(--portal-status-warning-text) !important; }
.portal-status-text--danger { color: var(--portal-status-danger-text) !important; }
.portal-status-text--inactive { color: var(--portal-status-inactive-text) !important; }
.portal-emphasis--information { color: var(--portal-status-information-icon) !important; }
.portal-emphasis--processing { color: var(--portal-status-processing-icon) !important; }
.portal-emphasis--success { color: var(--portal-status-success-icon) !important; }
.portal-emphasis--warning { color: var(--portal-status-warning-icon) !important; }
.portal-emphasis--danger { color: var(--portal-status-danger-icon) !important; }
.portal-emphasis--neutral,
.portal-emphasis--inactive { color: var(--portal-text-muted) !important; }
.sewerai-ortho-message {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sewerai-ortho-message--danger,
.sewerai-ortho-row-error {
  background-color: var(--portal-status-danger-bg);
  border: 1px solid var(--portal-status-danger-border);
  border-radius: var(--brand-radius-sm);
  color: var(--portal-status-danger-text) !important;
  padding: .45rem .6rem;
}
.sewerai-ortho-message--success {
  background-color: var(--portal-status-success-bg);
  border: 1px solid var(--portal-status-success-border);
  border-radius: var(--brand-radius-sm);
  color: var(--portal-status-success-text) !important;
  padding: .45rem .6rem;
}
.sewerai-ortho-row-error {
  display: block;
  margin-top: .35rem;
  max-width: 24rem;
  white-space: normal;
  overflow-wrap: anywhere;
}
.sewerai-ortho-actions {
  flex-wrap: wrap;
}
.portal-identifier-link { color: var(--portal-text-identifier); }
.portal-identifier-link:hover,
.portal-identifier-link:focus { color: var(--portal-text-link-hover); }
.portal-technical-text { color: var(--portal-text-technical); }
.portal-icon--interactive { color: var(--portal-icon-interactive) !important; }
.portal-output-icon--available { color: var(--portal-icon-available); }
.portal-output-icon--unavailable { color: var(--portal-icon-unavailable); opacity: .45; }

body.trekk-shell .dashboard-stat-card,
body.trekk-shell .project-overview-card,
body.trekk-shell .overview-panel,
body.trekk-shell .overview-step,
body.trekk-shell .overview-empty-state {
  background-color: var(--portal-surface-raised);
  border-color: var(--portal-border);
  color: var(--portal-text);
}
body.trekk-shell .dashboard-card .card-header,
body.trekk-shell .card-header {
  background-color: var(--portal-surface-subtle);
  border-color: var(--portal-border-subtle);
  color: var(--portal-text);
}
body.trekk-shell .viewer-actions-drawer {
  background: var(--portal-surface-overlay) !important;
  border-color: var(--portal-border) !important;
  color: var(--portal-text) !important;
}
body.trekk-shell .viewer-actions-drawer-header {
  background: var(--portal-surface-subtle) !important;
  border-color: var(--portal-border-subtle) !important;
}
body.trekk-shell :is(.viewer-actions-meta-card, .viewer-actions-summary-card, .viewer-actions-section, .viewer-actions-status-card) {
  background: var(--portal-surface-raised) !important;
  border-color: var(--portal-border) !important;
  color: var(--portal-text) !important;
}
body.trekk-shell .viewer-actions-drawer-eyebrow { color: var(--portal-text-identifier) !important; }

/* UI chrome is intentionally flat; these selectors never target media/canvas/map imagery. */
body.trekk-shell :is(.card-header, .modal-header, .alert, .btn, .drop-zone, .progress-bar,
                     .report-range-btn-active, .download-progress-bar, .trekk-header) {
  background-image: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .form-control,
  .form-select,
  .drop-zone { transition: none !important; }
}

/* --------------------------------------------------------------------------
   Brand settings UI and live contract preview
   -------------------------------------------------------------------------- */
.brand-settings-page {
  margin-inline: auto;
  max-width: 1540px;
}

.brand-settings-heading {
  align-items: flex-start;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
}

.brand-settings-heading > div:first-child { max-width: 900px; }

.brand-settings-eyebrow {
  color: var(--brand-link);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .11em;
  margin-bottom: .35rem;
  text-transform: uppercase;
}

.brand-version-badge {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-md);
  box-shadow: var(--brand-shadow);
  display: flex;
  flex: 0 0 auto;
  gap: .7rem;
  padding: .65rem .8rem;
}

.brand-version-badge span {
  color: var(--brand-text-muted);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.brand-version-badge strong {
  align-items: center;
  background: var(--brand-primary);
  border-radius: 999px;
  color: var(--brand-on-primary);
  display: inline-flex;
  height: 1.8rem;
  justify-content: center;
  min-width: 1.8rem;
  padding-inline: .45rem;
}

.brand-settings-section {
  border: 1px solid var(--brand-border) !important;
  border-radius: 12px;
  overflow: hidden;
}

.brand-settings-section-heading {
  align-items: flex-start;
  display: flex;
  gap: .85rem;
}

.brand-settings-section-icon {
  align-items: center;
  background: rgba(var(--brand-primary-rgb), .1);
  border: 1px solid rgba(var(--brand-primary-rgb), .18);
  border-radius: var(--brand-radius-md);
  color: var(--brand-link);
  display: inline-flex;
  flex: 0 0 2.25rem;
  height: 2.25rem;
  justify-content: center;
}

.brand-color-control {
  align-items: center;
  display: flex;
  gap: .75rem;
}

.brand-color-control .form-control-color {
  border-radius: var(--brand-radius-sm);
  flex: 0 0 4.5rem;
  height: 2.6rem;
  padding: .25rem;
  width: 4.5rem;
}

.brand-color-control code {
  background: var(--brand-surface-subtle);
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius-sm);
  color: var(--brand-text);
  font-size: .82rem;
  padding: .45rem .6rem;
}

.brand-asset-row {
  border-top: 1px solid var(--brand-divider);
  padding-block: 1rem;
}

.brand-asset-row:last-of-type { padding-bottom: 0; }

.brand-asset-label {
  align-items: center;
  display: flex;
  gap: .6rem;
  justify-content: space-between;
  margin-bottom: .55rem;
}

.brand-settings-savebar {
  align-items: center;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 12px;
  bottom: 1rem;
  box-shadow: 0 8px 28px rgba(17, 24, 39, .12);
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: .85rem 1rem;
  position: sticky;
  z-index: 10;
}

.brand-preview-panel {
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  box-shadow: var(--brand-shadow);
  overflow: hidden;
  position: sticky;
  top: calc(var(--header-height, 76px) + 1rem);
}

.brand-preview-panel-heading {
  align-items: center;
  border-bottom: 1px solid var(--brand-divider);
  display: flex;
  justify-content: space-between;
  padding: 1rem 1.1rem;
}

.brand-preview-panel-heading .brand-settings-eyebrow { margin-bottom: .15rem; }

.brand-preview-heading-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: flex-end;
}

.brand-preview-theme-toggle {
  background: var(--brand-surface-subtle);
  border: 1px solid var(--brand-border);
  border-radius: 7px;
  display: inline-flex;
  padding: .15rem;
}

.brand-preview-theme-toggle button {
  background: transparent;
  border: 0;
  border-radius: 5px;
  color: var(--brand-text-muted);
  font-size: .68rem;
  font-weight: 700;
  padding: .3rem .45rem;
}

.brand-preview-theme-toggle button[aria-pressed="true"] {
  background: var(--brand-primary);
  color: var(--brand-on-primary);
}

.brand-preview-theme-toggle button:focus-visible {
  box-shadow: var(--brand-focus);
  outline: 2px solid transparent;
}

.brand-preview-browser {
  background: var(--portal-surface-subtle);
  padding: 1rem;
}

.brand-preview-browserbar {
  align-items: center;
  background: var(--portal-surface-sunken);
  border: 1px solid var(--portal-border);
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  color: var(--portal-text-muted);
  display: flex;
  gap: .35rem;
  min-height: 2rem;
  padding: .35rem .55rem;
}

.brand-preview-browserbar > span {
  background: var(--portal-icon-muted);
  border-radius: 50%;
  height: .48rem;
  width: .48rem;
}

.brand-preview-browserbar > div {
  background: var(--portal-input-bg);
  border: 1px solid var(--portal-input-border);
  border-radius: 5px;
  font-size: .65rem;
  margin-left: .25rem;
  overflow: hidden;
  padding: .2rem .45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 62%;
}

.brand-preview-app {
  background: var(--portal-page);
  border: 1px solid var(--portal-border);
  border-radius: 0 0 10px 10px;
  color: var(--portal-text);
  overflow: hidden;
}

.brand-preview-header {
  align-items: center;
  background: var(--portal-topbar-bg);
  border-bottom: 1px solid var(--portal-topbar-border);
  color: var(--portal-topbar-text);
  display: flex;
  justify-content: space-between;
  min-height: 3.15rem;
  padding: .7rem .85rem;
}

.brand-preview-header-action {
  align-items: center;
  border: 1px solid currentColor;
  border-radius: 5px;
  display: inline-flex;
  height: 1.8rem;
  justify-content: center;
  width: 1.8rem;
}

.brand-preview-body {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  min-height: 20rem;
}

.brand-preview-nav {
  background: var(--portal-sidebar-bg);
  color: var(--portal-sidebar-text);
  display: flex;
  flex-direction: column;
  font-size: .67rem;
  gap: .3rem;
  padding: .75rem .5rem;
}

.brand-preview-nav span {
  border-left: 3px solid transparent;
  border-radius: 4px;
  padding: .45rem .35rem;
}

.brand-preview-nav span.active {
  background: var(--portal-sidebar-selected-bg);
  border-left-color: var(--portal-sidebar-selected-icon);
  color: var(--portal-sidebar-selected-text);
}

.brand-preview-content {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: .85rem;
}

.brand-preview-card,
.brand-preview-form-row {
  background: var(--portal-surface-raised);
  border: 1px solid var(--portal-border);
  border-radius: 7px;
  padding: .75rem;
}

.brand-preview-kicker {
  color: var(--portal-text-identifier);
  font-size: .57rem;
  font-weight: 800;
  letter-spacing: .08em;
  margin-bottom: .2rem;
  text-transform: uppercase;
}

.brand-preview-card > p {
  color: var(--portal-text-muted);
  font-size: .67rem;
  line-height: 1.35;
  margin: .25rem 0 .65rem;
}

.brand-preview-form-row {
  align-items: center;
  display: flex;
  font-size: .64rem;
  gap: .55rem;
  justify-content: space-between;
}

.brand-preview-input {
  background: var(--portal-input-bg);
  border: 2px solid var(--portal-input-focus-border);
  border-radius: 5px;
  color: var(--portal-input-text);
  box-shadow: 0 0 0 .16rem var(--portal-focus);
  padding: .32rem .45rem;
  width: 62%;
}

.brand-preview-statuses {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.brand-preview-statuses span {
  border-radius: 999px;
  font-size: .57rem;
  font-weight: 800;
  padding: .25rem .45rem;
}

.brand-preview-table-wrap {
  background: var(--portal-table-bg);
  border: 1px solid var(--portal-table-border);
  border-radius: 7px;
  font-size: .62rem;
  overflow: hidden;
}

.brand-preview-notes {
  display: grid;
  gap: .65rem;
  padding: 1rem 1.1rem 1.1rem;
}

.brand-preview-notes > div {
  align-items: flex-start;
  color: var(--brand-text-muted);
  display: flex;
  font-size: .78rem;
  gap: .6rem;
}

.brand-preview-notes i {
  color: var(--brand-link);
  margin-top: .12rem;
  width: 1rem;
}


.theme-token-groups .accordion-item,
.theme-token-groups .accordion-button {
  background: var(--portal-surface-raised);
  border-color: var(--portal-border);
  color: var(--portal-text);
}

.theme-token-control {
  background: var(--portal-surface-subtle);
  border: 1px solid var(--portal-border-subtle);
  border-radius: 8px;
  min-height: 100%;
  padding: .85rem;
}

.theme-token-control.is-explicit { border-color: var(--portal-border-active); }
.theme-token-input-row { align-items: center; display: flex; gap: .45rem; }
.theme-token-input-row .theme-token-text { min-width: 0; }
.theme-token-picker,
.theme-token-effective { flex: 0 0 3rem; height: 2.35rem; padding: .2rem; width: 3rem; }
.theme-token-effective { opacity: 1; }
.theme-token-effective-value {
  background: var(--portal-input-bg);
  border: 1px solid var(--portal-input-border);
  border-radius: var(--brand-radius-sm);
  color: var(--portal-input-text);
  flex: 0 0 auto;
  min-width: 3.75rem;
  padding: .45rem .55rem;
  text-align: center;
}

@media (max-width: 1399.98px) {
  .brand-preview-panel { position: static; }
  .brand-preview-browser { max-width: 720px; }
}

@media (max-width: 575.98px) {
  .brand-settings-heading,
  .brand-settings-savebar { align-items: stretch; flex-direction: column; }
  .brand-version-badge { align-self: flex-start; }
  .brand-preview-body { grid-template-columns: 5.6rem minmax(0, 1fr); }
  .brand-preview-content { padding: .55rem; }
  .brand-settings-savebar .btn { width: 100%; }
}