/* Map active theme tokens into BackFrame --bf-* variables.
   Must use :root (same specificity as backframe.css) and load AFTER it. */

:root {
  --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-green: var(--ok);
  --bf-green-soft: var(--ok-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: #d32f2f;
  --bf-danger-soft: #fdecea;
  --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.05);
  --bf-shadow-lg: 0 16px 48px rgba(var(--runtime-tint-rgb, var(--tint-rgb)), 0.14);
  --bf-body-bg:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(var(--glow-mid), 0.32), transparent 55%),
    radial-gradient(ellipse 70% 50% at 100% 10%, rgba(var(--runtime-accent-rgb, var(--accent-rgb)), 0.28), transparent 50%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(var(--glow-mid), 0.22), transparent 45%),
    linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 40%, var(--accent-soft) 100%);

  --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));
}

body {
  background: var(--bf-body-bg);
  color: var(--bf-ink);
}

/* Login hero follows theme primary */
.login-visual {
  background:
    radial-gradient(ellipse 70% 55% at 20% 20%, rgba(var(--runtime-accent-rgb, var(--accent-rgb)), 0.35), transparent 55%),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(var(--glow-mid), 0.25), transparent 50%),
    linear-gradient(
      145deg,
      var(--runtime-primary, var(--brand-blue)) 0%,
      var(--runtime-mid, var(--brand-blue-mid)) 55%,
      var(--runtime-primary, var(--brand-blue)) 100%
    ) !important;
}

.login-foot strong {
  color: var(--runtime-accent, var(--brand-magenta));
}

.brand-mark {
  box-shadow: 0 8px 24px rgba(var(--runtime-accent-rgb, var(--accent-rgb)), 0.25);
}

/* Buttons — win over backframe defaults */
.btn-primary,
.btn-accent,
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;
}

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

.btn-info,
button.btn-info,
a.btn-info {
  background: var(--runtime-primary, var(--brand-blue)) !important;
  border-color: var(--runtime-primary, var(--brand-blue)) !important;
  color: #fff !important;
}

.btn-info:hover,
button.btn-info:hover,
a.btn-info:hover {
  background: var(--runtime-mid, var(--brand-blue-mid)) !important;
  border-color: var(--runtime-mid, var(--brand-blue-mid)) !important;
  color: #fff !important;
}

.btn-outline:hover {
  border-color: color-mix(in srgb, var(--runtime-accent, var(--brand-magenta)) 45%, #ffffff) !important;
  color: var(--brand-red) !important;
  background: var(--accent-soft) !important;
}

a:not(.btn):hover {
  color: var(--runtime-accent, var(--brand-magenta));
}

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

/* Shell chrome */
.topnav {
  background: var(--runtime-primary, var(--brand-blue)) !important;
}

.rail-btn:hover {
  color: var(--runtime-primary, var(--brand-blue));
}

.rail-btn.active {
  background: var(--accent-soft) !important;
  color: var(--runtime-accent, var(--brand-magenta)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--runtime-accent, var(--brand-magenta)) 40%, #ffffff) !important;
}

.rail-btn .tip {
  background: var(--runtime-primary, var(--brand-blue)) !important;
}

.menu-link.active {
  background: var(--accent-soft) !important;
  color: var(--brand-red) !important;
}

.menu-link:hover {
  background: var(--surface);
}

.role-chip.active,
.role-chip:hover {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--runtime-accent, var(--brand-magenta)) 40%, #ffffff);
  color: var(--brand-red);
}

.avatar {
  background: linear-gradient(
    135deg,
    var(--runtime-accent, var(--brand-magenta)),
    var(--runtime-primary, var(--brand-blue))
  ) !important;
}

/* Tabs / status chips that hardcode brand tones */
.tab.active,
.tabs .tab.active {
  color: var(--runtime-primary, var(--brand-blue));
  border-bottom-color: var(--runtime-accent, var(--brand-magenta));
}

.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;
}

.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;
  border-color: 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;
  box-shadow: 0 0 0 3px rgba(var(--runtime-accent-rgb, var(--accent-rgb)), 0.12) !important;
}

/* Purchase / Production entry screens — follow global theme instead of fixed teal */
.pe-screen {
  --pe-teal: var(--runtime-accent, var(--brand-magenta));
  --pe-teal-dark: var(--brand-red);
  --pe-teal-soft: var(--accent-soft);
  --pe-teal-line: color-mix(in srgb, var(--runtime-accent, var(--brand-magenta)) 35%, #ffffff);
  --pe-teal-mid: var(--runtime-accent, var(--brand-magenta));
  --pe-ink: var(--runtime-primary, var(--brand-blue));
}

.purchase-flow-banner {
  --flow-accent: var(--runtime-accent, var(--brand-magenta));
  --flow-accent-dark: var(--brand-red);
  --flow-accent-mid: var(--runtime-accent, var(--brand-magenta));
  --flow-soft: var(--accent-soft);
  --flow-line: color-mix(in srgb, var(--runtime-accent, var(--brand-magenta)) 35%, #ffffff);
  --flow-ink: var(--brand-red);
  --flow-glow: rgba(var(--runtime-accent-rgb, var(--accent-rgb)), 0.14);
  --flow-bg-top: color-mix(in srgb, var(--accent-soft) 80%, #ffffff);
}

.purchase-flow-banner--pe {
  --flow-accent: var(--runtime-accent, var(--brand-magenta));
  --flow-accent-dark: var(--brand-red);
  --flow-accent-mid: var(--runtime-accent, var(--brand-magenta));
  --flow-soft: var(--accent-soft);
  --flow-line: color-mix(in srgb, var(--runtime-accent, var(--brand-magenta)) 35%, #ffffff);
  --flow-ink: var(--runtime-primary, var(--brand-blue));
  --flow-glow: rgba(var(--runtime-accent-rgb, var(--accent-rgb)), 0.14);
  --flow-bg-top: color-mix(in srgb, var(--accent-soft) 80%, #ffffff);
}

.purchase-flow-banner--grn {
  --flow-accent: var(--runtime-primary, var(--brand-blue));
  --flow-accent-dark: var(--runtime-mid, var(--brand-blue-mid));
  --flow-accent-mid: var(--brand-blue-bright);
  --flow-soft: var(--info-soft);
  --flow-line: color-mix(in srgb, var(--runtime-primary, var(--brand-blue)) 28%, #ffffff);
  --flow-ink: var(--runtime-primary, var(--brand-blue));
  --flow-glow: rgba(var(--runtime-tint-rgb, var(--tint-rgb)), 0.14);
  --flow-bg-top: color-mix(in srgb, var(--info-soft) 80%, #ffffff);
}

/* Theme picker / overflow */
.theme-menu,
.user-menu,
.topnav,
.topnav-right {
  overflow: visible !important;
}