/* ========================================================================== 
   Portal Theme Final Layer
   --------------------------------------------------------------------------
   This is the last portal color authority. It is loaded from base.html after
   section CSS and after the active theme variables are injected.

   Palette ownership stays in THEME_CHOICES / --portal-* variables. This file
   maps and enforces those variables across common app surfaces so section CSS
   cannot keep hard-coded colors as the final paint layer.
   ========================================================================== */

@import url('./portal_theme_contract.css?v=20260512a');

html[data-bs-theme],
html[data-bs-theme] body {
  color-scheme: var(--portal-color-scheme, normal);

  --app-bg: var(--portal-body-bg) !important;
  --app-fg: var(--portal-body-color) !important;
  --app-muted: var(--portal-muted-color) !important;
  --app-border: var(--portal-border-color) !important;
  --app-panel: var(--portal-surface-bg) !important;
  --app-soft-bg: var(--portal-surface-alt-bg, var(--portal-surface-bg)) !important;
  --app-chip: var(--portal-card-muted-bg, var(--portal-surface-alt-bg, var(--portal-surface-bg))) !important;
  --app-accent: var(--portal-accent) !important;
  --app-accent-2: var(--portal-accent-strong, var(--portal-accent)) !important;
  --app-shadow: var(--portal-surface-shadow, none) !important;

  --uh-background: var(--portal-body-bg) !important;
  --uh-surface: var(--portal-surface-bg) !important;
  --uh-surface-soft: var(--portal-surface-alt-bg, var(--portal-surface-bg)) !important;
  --uh-surface-strong: var(--portal-card-bg, var(--portal-surface-bg)) !important;
  --uh-border: var(--portal-border-color) !important;
  --uh-border-soft: var(--portal-surface-border, var(--portal-border-color)) !important;
  --uh-border-strong: var(--portal-surface-outline, var(--portal-border-color)) !important;
  --uh-text-primary: var(--portal-body-color) !important;
  --uh-text-muted: var(--portal-muted-color) !important;
  --uh-accent: var(--portal-accent) !important;
  --uh-accent-rgb: var(--bs-primary-rgb) !important;
  --uh-accent-soft: var(--portal-accent-soft, color-mix(in srgb, var(--portal-accent) 12%, transparent)) !important;

  --hub-surface: var(--portal-surface-bg) !important;
  --hub-surface-soft: var(--portal-surface-alt-bg, var(--portal-surface-bg)) !important;
  --hub-surface-strong: var(--portal-card-bg, var(--portal-surface-bg)) !important;
  --hub-text: var(--portal-body-color) !important;
  --hub-text-muted: var(--portal-muted-color) !important;
  --hub-border: var(--portal-border-color) !important;
  --hub-border-soft: var(--portal-surface-border, var(--portal-border-color)) !important;
  --hub-border-strong: var(--portal-surface-outline, var(--portal-border-color)) !important;
  --hub-accent: var(--portal-accent) !important;
  --hub-accent-rgb: var(--bs-primary-rgb) !important;
  --hub-accent-soft: var(--portal-accent-soft, color-mix(in srgb, var(--portal-accent) 12%, transparent)) !important;
  --hub-accent-border: color-mix(in srgb, var(--portal-accent) 36%, var(--portal-border-color)) !important;

  --brand-red: var(--portal-accent) !important;
  --brand-red-rgb: var(--bs-primary-rgb) !important;
  --brand-red-dark: var(--portal-accent-strong, var(--portal-accent)) !important;
  --brand-red-soft: var(--portal-accent-soft, color-mix(in srgb, var(--portal-accent) 12%, transparent)) !important;
  --brand-ink: var(--portal-body-color) !important;
  --brand-muted: var(--portal-muted-color) !important;

  --token-surface-bg: var(--portal-body-bg) !important;
  --token-surface-fg: var(--portal-body-color) !important;
  --token-surface-muted: var(--portal-muted-color) !important;
  --token-surface-border: var(--portal-border-color) !important;
  --token-surface-panel: var(--portal-surface-bg) !important;
  --token-surface-soft: var(--portal-surface-alt-bg, var(--portal-surface-bg)) !important;
  --token-color-primary: var(--portal-accent) !important;
  --token-color-primary-soft: var(--portal-accent-strong, var(--portal-accent)) !important;
  --token-color-on-primary: var(--portal-on-accent, var(--portal-button-primary-text)) !important;
  --token-color-on-accent: var(--portal-on-accent, var(--portal-button-primary-text)) !important;
  --token-focus-ring: color-mix(in srgb, var(--portal-accent) 28%, transparent) !important;
  --token-focus-ring-shadow: 0 0 0 .18rem color-mix(in srgb, var(--portal-accent) 28%, transparent) !important;

  --bs-body-bg: var(--portal-body-bg) !important;
  --bs-body-color: var(--portal-body-color) !important;
  --bs-secondary-color: var(--portal-muted-color) !important;
  --bs-secondary-bg: var(--portal-surface-alt-bg, var(--portal-surface-bg)) !important;
  --bs-tertiary-bg: var(--portal-surface-bg) !important;
  --bs-border-color: var(--portal-border-color) !important;
  --bs-border-color-translucent: var(--portal-surface-border, var(--portal-border-color)) !important;
  --bs-primary: var(--portal-accent) !important;
  --bs-link-color: var(--portal-accent) !important;
  --bs-link-hover-color: var(--portal-accent-strong, var(--portal-accent)) !important;
  --bs-card-bg: var(--portal-surface-bg) !important;
  --bs-card-color: var(--portal-body-color) !important;
  --bs-card-border-color: var(--portal-border-color) !important;
  --bs-modal-bg: var(--portal-surface-bg) !important;
  --bs-dropdown-bg: var(--portal-surface-bg) !important;
  --bs-dropdown-color: var(--portal-body-color) !important;
  --bs-dropdown-link-color: var(--portal-body-color) !important;
  --bs-dropdown-link-hover-color: var(--portal-body-color) !important;
  --bs-dropdown-link-hover-bg: var(--portal-surface-alt-bg, var(--portal-surface-bg)) !important;

  --nav-contract-surface: var(--portal-nav-bg, var(--portal-surface-bg)) !important;
  --nav-contract-text: var(--portal-nav-color, var(--portal-body-color)) !important;
  --nav-contract-muted: var(--portal-muted-color) !important;
  --nav-contract-border: var(--portal-nav-border, var(--portal-border-color)) !important;
  --nav-contract-bottom-edge: var(--portal-nav-border, var(--portal-border-color)) !important;
  --nav-contract-item-separator: var(--portal-nav-separator, var(--portal-border-color)) !important;
  --nav-contract-dropdown-hover-bg: var(--portal-nav-hover-bg, var(--portal-surface-alt-bg, var(--portal-surface-bg))) !important;
}

html[data-bs-theme] body {
  background: var(--portal-body-bg) !important;
  color: var(--portal-body-color) !important;
  font-family: var(--token-font-sans, Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif) !important;
}

html[data-bs-theme] :where(#main-content, main.portal-main, .portal-wrapper) {
  background: var(--portal-body-bg) !important;
  background-image: none !important;
  color: var(--portal-body-color) !important;
}

html[data-bs-theme] #main-content :where(
  .card,
  .panel,
  .portal-card,
  .portal-panel,
  .dashboard-card,
  .module-card,
  .summary-card,
  .metric-card,
  .kpi-card,
  .report-card,
  .admin-card,
  .section-card,
  .client-card,
  .vendor-card,
  .billing-card,
  .ownership-card,
  .project-card,
  .pm-card,
  .table-responsive,
  .portal-table-shell,
  .table-shell,
  .data-table-shell,
  .grid-shell,
  .list-group-item,
  .accordion-item,
  .dropdown-menu,
  .modal-content,
  .offcanvas,
  .toast,
  .empty-state,
  .portal-empty-state,
  .loading-state,
  .portal-loading,
  .blank-state,
  .clients-hub-profile-card,
  .clients-hub-panel,
  .clients-hub-tile,
  .clients-hub-selector-form,
  .clients-hub-search-form input,
  .clients-hub-expandable,
  .vhq-widget,
  .vhq-card,
  .pbk-card,
  .pbk-ah-card,
  .pbk-req-card,
  .pbk-touch-card,
  .wo-rail-card,
  .wo-view-card,
  .wo-results-card,
  .training-hub-kpi,
  .training-hub-overview,
  .training-hub-app-card,
  .cmcs-card,
  .pika-shell,
  .control-tower-panel,
  .ct-widget-panel,
  .ai-chat-panel
) {
  background: var(--portal-surface-bg) !important;
  background-image: none !important;
  border-color: var(--portal-border-color) !important;
  box-shadow: var(--portal-surface-shadow, none) !important;
  color: var(--portal-body-color) !important;
}

html[data-bs-theme] #main-content :where(
  .card-header,
  .card-footer,
  .panel-header,
  .panel-footer,
  .modal-header,
  .modal-footer,
  .table-toolbar,
  .filter-bar,
  .filters-bar,
  .toolbar,
  thead,
  .table-light,
  .clients-hub-cmd-bar,
  .clients-hub-profile-card-head,
  .clients-hub-panel-head,
  .vhq-cmd-bar,
  .vhq-widget-head,
  .pbk-cmd-bar,
  .pbk-sidebar-head,
  .wo-table-wrap thead th,
  .training-hub-command,
  .chat-header,
  .chat-composer
) {
  background: var(--portal-surface-alt-bg, var(--portal-surface-bg)) !important;
  background-image: none !important;
  border-color: var(--portal-border-color) !important;
  box-shadow: none !important;
  color: var(--portal-body-color) !important;
}

html[data-bs-theme] #main-content :where(
  .form-control,
  .form-select,
  .form-check-input,
  .input-group-text,
  textarea,
  select,
  input[type="text"],
  input[type="search"],
  input[type="email"],
  input[type="number"],
  input[type="date"],
  input[type="datetime-local"],
  input[type="password"]
) {
  background: var(--portal-surface-alt-bg, var(--portal-surface-bg)) !important;
  background-image: none !important;
  border-color: var(--portal-border-color) !important;
  box-shadow: none !important;
  color: var(--portal-body-color) !important;
}

html[data-bs-theme] #main-content :where(
  .form-control,
  .form-select,
  .form-check-input,
  textarea,
  select,
  input
):focus {
  border-color: var(--portal-accent) !important;
  box-shadow: var(--token-focus-ring-shadow) !important;
  outline: 0 !important;
}

html[data-bs-theme] #main-content :where(.form-control, textarea, input)::placeholder {
  color: var(--portal-muted-color) !important;
  opacity: 1 !important;
}

html[data-bs-theme] #main-content :where(
  a:not(.btn):not(.nav-link):not(.dropdown-item),
  .link-primary
) {
  color: var(--portal-accent) !important;
}

html[data-bs-theme] #main-content :where(
  a:not(.btn):not(.nav-link):not(.dropdown-item),
  .link-primary
):hover {
  color: var(--portal-accent-strong, var(--portal-accent)) !important;
}

html[data-bs-theme] #main-content :where(
  .btn-primary,
  .theme-option.btn-primary,
  .btn-brand,
  .chat-send
) {
  background: var(--portal-accent) !important;
  background-image: none !important;
  border-color: var(--portal-accent-strong, var(--portal-accent)) !important;
  box-shadow: none !important;
  color: var(--portal-on-accent, var(--portal-button-primary-text)) !important;
}

html[data-bs-theme] #main-content :where(
  .btn-outline-primary,
  .btn-outline-secondary,
  .btn-secondary,
  .btn-light,
  .btn-ghost,
  .page-link,
  .chip,
  .filter-chip,
  .badge-soft,
  .clients-hub-module-tab,
  .vhq-module-tab,
  .training-hub-tab,
  .chat-tab,
  .pbk-cat-btn,
  .pbk-action-btn,
  .wo-toggle
) {
  background: transparent !important;
  background-image: none !important;
  border-color: var(--portal-border-color) !important;
  box-shadow: none !important;
  color: var(--portal-body-color) !important;
}

html[data-bs-theme] #main-content :where(
  .btn-outline-primary:hover,
  .btn-outline-secondary:hover,
  .btn-secondary:hover,
  .btn-light:hover,
  .btn-ghost:hover,
  .page-link:hover,
  .chip:hover,
  .filter-chip:hover,
  .clients-hub-module-tab:hover,
  .vhq-module-tab:hover,
  .training-hub-tab:hover,
  .chat-tab:hover,
  .pbk-cat-btn:hover,
  .wo-toggle:hover
) {
  background: var(--portal-accent-soft, color-mix(in srgb, var(--portal-accent) 10%, transparent)) !important;
  border-color: var(--portal-accent) !important;
  color: var(--portal-accent) !important;
}

html[data-bs-theme] #main-content :where(
  a.active,
  button.active,
  .is-active,
  [role="tab"][aria-selected="true"],
  .nav-pills .nav-link.active,
  .nav-tabs .nav-link.active,
  .clients-hub-module-tab.is-active,
  .clients-hub-module-tab[aria-selected="true"],
  .vhq-module-tab.is-active,
  .control-tower-menu-btn.active,
  .control-tower-menu-btn[aria-selected="true"],
  .chat-tab.active,
  .training-hub-tab.active,
  .pbk-cat-btn.is-active,
  .pbk-dropdown-item.active
) {
  background: var(--portal-accent-soft, color-mix(in srgb, var(--portal-accent) 10%, transparent)) !important;
  border-color: var(--portal-accent) !important;
  border-bottom-color: var(--portal-accent) !important;
  box-shadow: inset 0 -3px 0 var(--portal-accent) !important;
  color: var(--portal-accent) !important;
}

html[data-bs-theme] #main-content :where(
  a.active i,
  button.active i,
  .is-active i,
  [role="tab"][aria-selected="true"] i,
  .clients-hub-module-tab.is-active i,
  .clients-hub-module-tab[aria-selected="true"] i
) {
  color: var(--portal-accent) !important;
}

html[data-bs-theme] #main-content :where(
  .text-muted,
  .text-body-secondary,
  .muted,
  small,
  .eyebrow,
  .kicker,
  .meta,
  .card-subtitle,
  .form-text,
  .portal-muted,
  .clients-hub-profile-empty,
  .clients-hub-profile-card-count,
  .vhq-text-muted
) {
  color: var(--portal-muted-color) !important;
}

html[data-bs-theme] #main-content :where(.table, table) {
  --bs-table-bg: transparent !important;
  --bs-table-color: var(--portal-body-color) !important;
  --bs-table-border-color: var(--portal-border-color) !important;
  --bs-table-striped-bg: var(--portal-surface-alt-bg, var(--portal-surface-bg)) !important;
  --bs-table-striped-color: var(--portal-body-color) !important;
  --bs-table-hover-bg: var(--portal-accent-soft, color-mix(in srgb, var(--portal-accent) 8%, transparent)) !important;
  --bs-table-hover-color: var(--portal-body-color) !important;
  background: transparent !important;
  color: var(--portal-body-color) !important;
  border-color: var(--portal-border-color) !important;
}

html[data-bs-theme] #main-content :where(
  .table th,
  .table td,
  table th,
  table td,
  .border,
  .border-top,
  .border-bottom,
  .border-start,
  .border-end,
  hr,
  .vr
) {
  border-color: var(--portal-border-color) !important;
}

html[data-bs-theme] body nav.navbar.app-navbar.navbar,
html[data-bs-theme] body .app-navbar {
  background: var(--portal-nav-bg, var(--portal-surface-bg)) !important;
  background-image: none !important;
  border-color: var(--portal-nav-border, var(--portal-border-color)) !important;
  color: var(--portal-nav-color, var(--portal-body-color)) !important;
}

html[data-bs-theme] body .app-navbar :where(.nav-link.active, .nav-link[aria-current="page"], .dropdown-item.active) {
  color: var(--portal-accent) !important;
}