/* ─────────────────────────────────────────────────────────────
   egON – components-bs5.css
   Bootstrap 5.3 theming layer. Loaded (gated) IN PLACE OF
   components.css when Bootstrap 5 is active.

   Load order (gated): bootstrap-5.3.8.min.css → colors_and_type.css
   → components-bs5.css → mandant.css (last, per-mandant CI).

   Unlike the BS3 layer, BS5 is CSS-variable themeable, so this file
   mostly *wires* the redesign tokens into BS5's runtime --bs-* vars
   and re-points the handful of component-local vars BS5 compiles to
   hex. No !important; wins over Bootstrap by source order.

   §0  brand inputs + derivations  (verbatim from components.css)
   §1  root tier   — --ci-* → --bs-*
   §2  component tier — re-point compiled-hex --bs-*-* locals
   §3  brand overrides not reachable via a var + BS3-forms shim
   ───────────────────────────────────────────────────────────── */

/* ═══ §0 · brand inputs + derivations (identical to components.css) ═══ */
:root {
  --ci-prim: #007EB1;
  --ci-sek:  #4D17AB;

  --ci-font:    "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --ci-logo:    none; /* egON default; set per install in mandant.css */
  --ci-logo-h:  28px;

  --ci-tint:  #FFFFFF;
  --ci-shade: #000000;

  --ci-prim-eff: var(--ci-prim);
  --ci-sek-eff:  var(--ci-sek);
}

:root {
  --bg-interactive:         var(--ci-prim-eff);
  --bg-interactive-hover:   color-mix(in oklab, var(--ci-prim-eff) 82%, var(--ci-shade));
  --bg-interactive-pressed: color-mix(in oklab, var(--ci-prim-eff) 70%, var(--ci-shade));
  --border-interactive:     var(--ci-prim-eff);
  --fg-interactive:         var(--ci-prim-eff);
  --fg-interactive-hover:   color-mix(in oklab, var(--ci-prim-eff) 80%, var(--ci-shade));

  --bg-highlight:       color-mix(in oklab, var(--ci-prim-eff) 10%, var(--ci-tint));
  --bg-highlight-hover: color-mix(in oklab, var(--ci-prim-eff) 20%, var(--ci-tint));
  --ci-prim-tint:       color-mix(in oklab, var(--ci-prim-eff) 12%, var(--ci-tint));
  --ci-prim-tint-loud:  color-mix(in oklab, var(--ci-prim-eff) 26%, var(--ci-tint));

  --fg-on-color:  oklch(from var(--ci-prim-eff) clamp(0, (l - 0.62) * -1000, 1) 0 0);
  --fg-on-brand2: oklch(from var(--ci-sek-eff)  clamp(0, (l - 0.62) * -1000, 1) 0 0);

  --shadow-focus-ring: 0 0 0 3px color-mix(in srgb, var(--ci-prim-eff) 55%, transparent);

  --brand-2:       var(--ci-sek-eff);
  --brand-2-tint:  color-mix(in oklab, var(--ci-sek-eff) 10%, var(--ci-tint));
  --brand-2-hover: color-mix(in oklab, var(--ci-sek-eff) 85%, var(--ci-shade));

  --nav-fg:        color-mix(in srgb, var(--fg-on-brand2) 88%, transparent);
  --nav-fg-active: var(--fg-on-brand2);
  --nav-hover-bg:  color-mix(in srgb, var(--fg-on-brand2) 12%, transparent);
  --nav-active-bg: color-mix(in srgb, var(--fg-on-brand2) 18%, transparent);

  --chart-1: var(--ci-prim-eff);
  --chart-2: var(--ci-sek-eff);
  --chart-3: color-mix(in oklab, var(--ci-prim-eff) 55%, var(--ci-sek-eff));
  --chart-4: color-mix(in oklab, var(--ci-prim-eff) 40%, var(--ci-tint));
  --chart-5: color-mix(in oklab, var(--ci-sek-eff) 40%, var(--ci-tint));
  --chart-track: var(--bg-subtle-hover);

  --border-row: var(--border-base);
}

/* dark: flip only the mix bases — matches BS5-native data-bs-theme AND legacy data-theme */
[data-bs-theme="dark"], [data-theme="dark"] {
  --ci-tint:  #18181A;
  --ci-shade: #FFFFFF;
  --ci-prim-eff: color-mix(in oklab, var(--ci-prim) 74%, #FFFFFF);
  --ci-sek-eff:  color-mix(in oklab, var(--ci-sek)  82%, #FFFFFF);
}

@supports not (color: oklch(from #000 l c h)) {
  :root { --fg-on-color: #FFFFFF; --fg-on-brand2: #FFFFFF; }
}

/* ═══ §1 · root tier — map tokens onto BS5's runtime theme vars ═══ */
:root {
  --bs-primary:          var(--ci-prim-eff);
  --bs-primary-rgb:      var(--ci-prim-rgb);
  --bs-link-color:       var(--fg-interactive);
  --bs-link-color-rgb:   var(--ci-prim-rgb);
  --bs-link-hover-color: var(--fg-interactive-hover);

  --bs-body-bg:        var(--bg-subtle);
  --bs-body-color:     var(--fg-base);
  --bs-emphasis-color: var(--fg-base);
  --bs-secondary-color:var(--fg-subtle);
  --bs-tertiary-color: var(--fg-muted);
  --bs-secondary-bg:   var(--bg-subtle);
  --bs-tertiary-bg:    var(--bg-component);
  --bs-border-color:   var(--border-base);

  --bs-danger:     var(--fg-error);
  --bs-danger-rgb: var(--fg-error-rgb);

  --bs-body-font-family: var(--ci-font, var(--font-sans));
  --bs-font-sans-serif:  var(--ci-font, var(--font-sans));
  --bs-font-monospace:   var(--font-mono);
  --bs-body-font-size:   var(--txt-medium);

  --bs-border-radius:      var(--radius-md);
  --bs-border-radius-sm:   var(--radius-sm);
  --bs-border-radius-lg:   var(--radius-lg);
  --bs-border-radius-pill: var(--radius-full);
}

/* ═══ §2 · component tier — re-point compiled-hex --bs-*-* locals ═══ */
.btn-primary {
  --bs-btn-bg: var(--bg-interactive);
  --bs-btn-border-color: var(--bg-interactive);
  --bs-btn-color: var(--fg-on-color);
  --bs-btn-hover-bg: var(--bg-interactive-hover);
  --bs-btn-hover-border-color: var(--bg-interactive-hover);
  --bs-btn-hover-color: var(--fg-on-color);
  --bs-btn-active-bg: var(--bg-interactive-pressed);
  --bs-btn-active-border-color: var(--bg-interactive-pressed);
  --bs-btn-active-color: var(--fg-on-color);
  --bs-btn-disabled-bg: var(--bg-disabled);
  --bs-btn-disabled-border-color: var(--bg-disabled);
  --bs-btn-disabled-color: var(--fg-disabled);
  --bs-btn-focus-shadow-rgb: var(--ci-prim-rgb);
}
.btn-danger {
  --bs-btn-bg: var(--button-danger);
  --bs-btn-border-color: var(--button-danger);
  --bs-btn-color: var(--fg-on-inverted);
  --bs-btn-hover-bg: var(--button-danger-hover);
  --bs-btn-hover-border-color: var(--button-danger-hover);
  --bs-btn-active-bg: var(--button-danger-pressed);
}
.card {
  --bs-card-bg: var(--bg-base);
  --bs-card-border-color: var(--border-base);
  --bs-card-border-radius: var(--radius-lg);
  --bs-card-cap-bg: transparent;
  --bs-card-box-shadow: var(--shadow-card-rest);
}
.dropdown-menu {
  --bs-dropdown-bg: var(--bg-base);
  --bs-dropdown-border-color: var(--border-base);
  --bs-dropdown-border-radius: var(--radius-lg);
  --bs-dropdown-link-hover-bg: var(--bg-subtle-hover);
  --bs-dropdown-link-active-bg: var(--bg-highlight);
  --bs-dropdown-link-active-color: var(--fg-interactive);
  box-shadow: var(--shadow-flyout);
}
.list-group {
  --bs-list-group-bg: var(--bg-base);
  --bs-list-group-border-color: var(--border-base);
  --bs-list-group-border-radius: var(--radius-lg);
  --bs-list-group-active-bg: var(--bg-interactive);
  --bs-list-group-active-border-color: var(--bg-interactive);
}
.pagination {
  --bs-pagination-color: var(--fg-interactive);
  --bs-pagination-active-bg: var(--bg-interactive);
  --bs-pagination-active-border-color: var(--bg-interactive);
  --bs-pagination-focus-color: var(--fg-interactive-hover);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--bg-interactive); }
.progress  { --bs-progress-bg: var(--chart-track); --bs-progress-bar-bg: var(--chart-1); }
.table {
  --bs-table-color: var(--fg-base);
  --bs-table-border-color: var(--border-row);
  --bs-table-striped-bg: var(--bg-subtle);
  --bs-table-hover-bg: var(--bg-subtle-hover);
}
.nav-tabs {
  --bs-nav-tabs-link-active-color: var(--fg-interactive);
  --bs-nav-tabs-border-color: var(--border-base);
}
.modal { --bs-modal-bg: var(--bg-base); --bs-modal-border-color: var(--border-base); --bs-modal-border-radius: var(--radius-lg); }
.modal-content { box-shadow: var(--shadow-modal); }

/* ═══ §3 · brand overrides not reachable via a var + BS3-forms shim ═══ */
/* focus ring (BS5 compiles the focus shadow from $primary as fixed rgba) */
.btn:focus, .btn:focus-visible,
.form-control:focus, .form-select:focus {
  box-shadow: var(--shadow-focus-ring);
  border-color: var(--border-interactive);
}
/* info alert follows the brand highlight rather than BS blue */
.alert-info {
  --bs-alert-bg: var(--bg-highlight);
  --bs-alert-border-color: var(--ci-prim-tint-loud);
  --bs-alert-color: var(--fg-base);
}

/* BS3-forms compat shim — the retained formValidation plugin toggles
   .has-error / .help-block (BS3 classes); style them under BS5 so the
   order forms keep showing validation state without a rewrite. */
.has-error .form-control,
.has-error .form-select { border-color: var(--fg-error); }
.has-error .form-control:focus,
.has-error .form-select:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fg-error) 40%, transparent); border-color: var(--fg-error); }
.has-error .form-label,
.has-error label,
.has-error .help-block { color: var(--fg-error); }
.help-block { display: block; margin-top: 4px; font-size: var(--txt-xsmall); line-height: var(--lh-xsmall); color: var(--fg-subtle); }

/* BS5 also dropped the .has-success / .has-warning validation states the app
   still emits (e.g. reselleraccount). Mirror the .has-error shim with the
   green/amber tokens so the accent returns. */
.has-success .form-control,
.has-success .form-select { border-color: var(--tag-green-fg, #15803D); }
.has-success .form-label,
.has-success label,
.has-success .help-block { color: var(--tag-green-fg, #15803D); }
.has-warning .form-control,
.has-warning .form-select { border-color: var(--tag-orange-fg, #C2410C); }
.has-warning .form-label,
.has-warning label,
.has-warning .help-block { color: var(--tag-orange-fg, #C2410C); }