/* InvSmart theme bridge — map global themes into page tokens */

html {
  /* Core backframe tokens follow active data-theme / runtime brand vars */
  --bf-navy: var(--runtime-primary, var(--brand-blue));
  --bf-navy-2: var(--runtime-mid, var(--brand-blue-mid));
  --bf-orange: var(--runtime-accent, var(--brand-magenta));
  --bf-orange-dark: var(--brand-red);
  --bf-orange-soft: var(--accent-soft);
  --bf-blue: var(--brand-blue-bright);
  --bf-blue-soft: var(--info-soft);
  --bf-ink: var(--ink);
  --bf-ink-soft: var(--ink-soft);
  --bf-muted: var(--ink-mute);
  --bf-line: color-mix(in srgb, var(--runtime-primary, var(--brand-blue)) 12%, #ffffff);
  --bf-line-strong: color-mix(in srgb, var(--runtime-primary, var(--brand-blue)) 22%, #ffffff);
  --bf-surface: #ffffff;
  --bf-canvas: var(--surface);
  --bf-rail: var(--surface);
  --bf-danger: var(--brand-red);
  --bf-danger-soft: var(--accent-soft);
  --bf-warn: var(--warn);
  --bf-warn-soft: var(--warn-soft);
  --bf-shadow: 0 1px 2px rgba(var(--runtime-tint-rgb, var(--tint-rgb)), 0.04), 0 8px 24px rgba(var(--runtime-tint-rgb, var(--tint-rgb)), 0.06);
  --bf-shadow-lg: 0 16px 48px rgba(var(--runtime-tint-rgb, var(--tint-rgb)), 0.14);
  --bf-body-bg: var(--surface);

  --bf-brand: var(--runtime-accent, var(--brand-magenta));
  --bf-brand-dark: var(--brand-red);
  --bf-brand-soft: var(--accent-soft);
  --bf-accent: var(--runtime-accent, var(--brand-magenta));
  --bf-accent-soft: var(--accent-soft);
  --bf-charcoal: var(--runtime-primary, var(--brand-blue));
  --bf-charcoal-soft: var(--runtime-mid, var(--brand-blue-mid));
  --bf-info: var(--runtime-mid, var(--brand-blue-mid));
  --bf-info-soft: var(--info-soft);
  --bf-success: var(--ok);
  --bf-success-soft: var(--ok-soft);
  --bf-sidebar: var(--runtime-primary, var(--brand-blue));
  --bf-sidebar-active: var(--runtime-accent, var(--brand-magenta));

  --theme-primary: var(--runtime-primary, var(--brand-blue));
  --theme-primary-mid: var(--runtime-mid, var(--brand-blue-mid));
  --theme-primary-bright: var(--brand-blue-bright);
  --theme-accent: var(--runtime-accent, var(--brand-magenta));
  --theme-accent-dark: var(--brand-red);
  --theme-surface: var(--surface);
  --theme-surface-2: var(--surface-2);
  --theme-ink: var(--ink);
  --theme-ink-soft: var(--ink-soft);
  --theme-ink-mute: var(--ink-mute);
  --theme-line: var(--line);
  --theme-tint-rgb: var(--runtime-tint-rgb, var(--tint-rgb));
  --theme-accent-rgb: var(--runtime-accent-rgb, var(--accent-rgb));
}

/* Shell / content surfaces follow theme */
body {
  background: var(--surface);
  color: var(--ink);
}

.shell {
  background: var(--shell, #ffffff);
}

.sidebar {
  background: linear-gradient(
    180deg,
    var(--runtime-primary, var(--sidebar-0)) 0%,
    var(--runtime-mid, var(--sidebar-1)) 55%,
    var(--sidebar-2) 100%
  ) !important;
}

.content-host {
  background: var(--surface);
  color: var(--ink);
}

.product-name {
  color: var(--runtime-primary, var(--brand-blue)) !important;
}

.product-tag {
  color: var(--runtime-accent, var(--brand-magenta)) !important;
}

.primary-btn,
.btn-primary,
button.btn-primary,
a.btn-primary {
  background: var(--runtime-accent, var(--brand-magenta)) !important;
  border-color: var(--runtime-accent, var(--brand-magenta)) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(var(--runtime-accent-rgb, var(--accent-rgb)), 0.28) !important;
}

.btn-primary:hover,
.primary-btn:hover,
button.btn-primary:hover,
a.btn-primary:hover {
  background: var(--brand-red) !important;
  border-color: var(--brand-red) !important;
}

.btn-outline-primary,
a.btn-outline-primary {
  color: var(--runtime-primary, var(--brand-blue)) !important;
  border-color: var(--runtime-primary, var(--brand-blue)) !important;
}

.text-primary,
.link-primary {
  color: var(--runtime-primary, var(--brand-blue)) !important;
}

.text-accent,
.app-footer .text-warning,
.text-warning {
  color: var(--runtime-accent, var(--brand-magenta)) !important;
}

.app-footer {
  border-top-color: color-mix(in srgb, var(--runtime-primary, var(--brand-blue)) 14%, transparent);
  color: var(--ink-mute);
}

.fy-pill {
  border-color: color-mix(in srgb, var(--runtime-primary, var(--brand-blue)) 16%, #ffffff);
  background: color-mix(in srgb, #ffffff 82%, var(--surface));
  color: var(--ink);
}

.top-menu {
  background: color-mix(in srgb, var(--runtime-primary, var(--brand-blue)) 8%, var(--surface));
  border-bottom-color: color-mix(in srgb, var(--runtime-primary, var(--brand-blue)) 14%, var(--line));
}

.top-menu-link:hover {
  background: var(--info-soft);
  color: var(--runtime-primary, var(--brand-blue));
}

.top-menu .top-menu-link.is-active,
.top-menu .top-menu-link.is-active:hover {
  background: var(--runtime-accent, var(--brand-magenta)) !important;
  border-color: var(--runtime-accent, var(--brand-magenta)) !important;
  color: #fff !important;
  box-shadow: none;
}

.page-card,
.card,
.panel,
.table-panel,
.bf-card,
.form-card {
  border-color: color-mix(in srgb, var(--runtime-primary, var(--brand-blue)) 12%, #ffffff);
}

.nav-tabs .nav-link.active,
.page-tabs .active {
  color: var(--runtime-primary, var(--brand-blue)) !important;
  border-bottom-color: var(--runtime-accent, var(--brand-magenta)) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[aria-selected=true] {
  background: var(--runtime-accent, var(--brand-magenta)) !important;
  color: #fff !important;
}

table.dataTable thead th,
table.dataTable thead td {
  color: var(--ink) !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current .page-link {
  background: var(--runtime-accent, var(--brand-magenta)) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px rgba(var(--runtime-accent-rgb, var(--accent-rgb)), 0.22) !important;
}

.form-control:focus,
.form-select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--runtime-accent, var(--brand-magenta)) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(var(--runtime-accent-rgb, var(--accent-rgb)), 0.12) !important;
}

/* Keep Figma left-menu active style: magenta circle on icon only */
.nav-item.is-active {
  background: transparent !important;
  box-shadow: none !important;
  color: #fff !important;
}

.nav-item.is-active .nav-icon {
  background: var(--runtime-accent, var(--brand-magenta)) !important;
  color: #fff !important;
  transform: scale(1.04);
  box-shadow: 0 4px 12px rgba(var(--runtime-accent-rgb, var(--accent-rgb)), 0.45);
}

.topbar,
.topbar-actions,
.theme-menu,
.user-menu {
  overflow: visible !important;
}