/*
 * Syndicator.ai brand theme (white-label token migration).
 *
 * Overrides the --dwi-* token contract (themes/tokens.css) for
 * <html data-brand="syndicator"> and bridges the Metronic/Bootstrap
 * --bs-/--kt- primary variables onto those tokens, so BOTH the new .dwi-*
 * components and the legacy bundle components follow the brand primary.
 *
 * RUNTIME COLORS: the core token block + bridge + dark block below carry the
 * brand hex only as a STATIC FALLBACK. On real app pages the layout injects an
 * inline <style> (Brand::dynamicThemeCss(), gated by theme.dynamic_colors) that
 * redefines these same tokens from config/brands/syndicator.ai.php colors.* —
 * so editing the brand config recolors the whole app on the next page load, no
 * rebuild. Every rule further down references the tokens via var(), so it
 * follows whichever definition wins (injected config value, else this fallback).
 *
 * data-brand is 'syndicator' (no dot) — CSS attribute selectors cannot use an
 * unquoted dotted value, and the legacy marketing layouts already map
 * syndicator.ai → 'syndicator'. The brand KEY / platform_slug stays
 * 'syndicator.ai' (config/brands/syndicator.ai.php).
 *
 * Success stays green / danger red: the recolored bundle already carries the
 * standard green (#50CD89), so positive metrics read green and negatives red.
 *
 * Load order (layout.html): plugins.bundle.css -> <brand>/style.bundle.css ->
 * themes/tokens.css -> THIS FILE -> theme-syndicator-components.css ->
 * inline Brand::dynamicThemeCss() (wins).
 */

[data-brand=syndicator] {
  /* Brand primary family — STATIC FALLBACK (config injection overrides). */
  --dwi-color-primary: #4070F0;
  --dwi-color-primary-rgb: 64, 112, 240;
  --dwi-color-primary-strong: #2F5AD9;
  --dwi-color-primary-press: #2648B0;
  --dwi-color-primary-soft: rgba(64, 112, 240, 0.10);
  --dwi-color-accent: #4070F0;
  --dwi-color-accent-rgb: 64, 112, 240;

  /* Typography — match DealWorthIt exactly. The white-label app rides the same
     IBM Plex family and rem-based sizing as DealWorthIt; only the brand color
     family differs. Mirrors theme-dealworthit.css so the two brands render
     identical type. The font itself is loaded by the layouts for every
     token-themed brand (IBM Plex link, gated on $brand_theme_css). */
  --dwi-font-sans: 'IBM Plex Sans', -apple-system, system-ui, sans-serif;
  --dwi-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Bridge the Metronic/Bootstrap primary variables onto the brand tokens.
   html[data-brand=...] (specificity 0,1,1) outranks the bundle's :root/.class
   variable definitions and loads after them, so the legacy UI follows the brand primary.
   Only the primary/accent family is bridged — neutrals keep the bundle values.
   (Parallels the DealWorthIt bridge in themes/tokens.css.) */
html[data-brand=syndicator] {
  --bs-primary: var(--dwi-color-accent);
  --bs-primary-rgb: var(--dwi-color-accent-rgb);
  --kt-primary: var(--dwi-color-primary);
  --kt-primary-rgb: var(--dwi-color-primary-rgb);
  --kt-primary-active: var(--dwi-color-primary-strong);
  --kt-primary-light: var(--dwi-color-primary-soft);

  /* Typography bridge — re-point the body/bundle font chain onto the brand
     tokens so both the new .dwi-* components (body{font-family:var(--app-font-sans)})
     and legacy bundle components (--bs-font-sans-serif consumers) render IBM Plex,
     matching DealWorthIt. html[data-brand=...] (specificity 0,1,1) out-ranks the
     common_styles.css :root { --app-font-sans:'Inter' } fallback that loads after
     this file. Parallels the DealWorthIt bridge in themes/tokens.css. */
  --app-font-sans: var(--dwi-font-sans);
  --bs-font-sans-serif: var(--dwi-font-sans);
  --bs-font-monospace: var(--dwi-font-mono);

  /* Accordion active-state chevron. The bundle bakes this as a --kt-* custom
     property holding an inline SVG with a hardcoded Metronic-blue fill; SVG
     data-URIs can't use var(), and the generator skips --custom-property
     definitions, so re-declare it with the brand fill (STATIC FALLBACK — the
     config injection re-declares it from colors.primary). */
  --kt-accordion-button-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%234070f0'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Markets page — themes/theme-dealworthit-markets.css defines a local emerald
   accent palette (--mk-emerald*) on .dwi-markets. Re-point just that primary
   family to the brand color for Syndicator.ai; the page's semantic --mk-red /
   --mk-amber stay put. Higher specificity than the markets file's own
   .dwi-markets rule, and scoped to this brand, so DealWorthIt's exact values are
   untouched. .mk-modal is included because the Add-market modal renders at
   document root (OUTSIDE .dwi-markets) and re-declares its own --mk-emerald* on
   .mk-modal, so the .dwi-markets re-point alone can't reach the modal's icon +
   Save button. */
[data-brand=syndicator] .dwi-markets,
[data-brand=syndicator] .mk-modal {
  --mk-emerald:       var(--dwi-color-primary);
  --mk-emerald-dark:  var(--dwi-color-primary-strong);
  --mk-emerald-press: var(--dwi-color-primary-press);
  --mk-emerald-tint:  rgba(var(--dwi-color-primary-rgb), 0.09);
  --mk-emerald-line:  rgba(var(--dwi-color-primary-rgb), 0.22);
}
/* The modal's input focus ring is a hardcoded emerald rgba (not a token), so
   token re-pointing can't reach it — brand-tint it directly. */
[data-brand=syndicator] .mk-modal .mk-field .form-control:focus,
[data-brand=syndicator] .mk-modal .mk-field .form-select:focus {
  box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.12);
}

/* ────────────────────────────────────────────────────────────────────────
   Feature-page accent palettes. Several feature skins define their own local
   emerald ramp (--tm-green, --miv2-green, --dwin-emerald, --emerald …) instead
   of the shared tokens. Re-point each to the brand primary, scoped to this brand
   (and, for the :root-level notify palette, via html[...] to out-specify it),
   so DealWorthIt's values are untouched. Success/"ok" status chips are kept
   green below — a brand-colored "Accepted" would lose the positive signal.
   ──────────────────────────────────────────────────────────────────────── */

/* Team (theme-dealworthit-team.css) */
[data-brand=syndicator] .dwi-team,
[data-brand=syndicator] .tm-modal {
  --tm-green:       var(--dwi-color-primary);
  --tm-green-dark:  var(--dwi-color-primary-strong);
  --tm-green-press: var(--dwi-color-primary-press);
  --tm-green-soft:  rgba(var(--dwi-color-primary-rgb), 0.09);
  --tm-green-faint: rgba(var(--dwi-color-primary-rgb), 0.05);
  --tm-green-tint:  rgba(var(--dwi-color-primary-rgb), 0.09);
  --tm-green-line:  rgba(var(--dwi-color-primary-rgb), 0.22);
}
/* Keep the green "ok" status chip green (Accepted / Active), not brand color. */
[data-brand=syndicator] .dwi-team .tm-badge.green {
  color: #0E6E59;
  background: rgba(14, 110, 89, 0.10);
}

/* Market Insights (market_insights.css) */
[data-brand=syndicator] .mi-v2,
[data-brand=syndicator] .mi-apply-modal {
  --miv2-green:           var(--dwi-color-primary);
  --miv2-green-dark:      var(--dwi-color-primary-strong);
  --miv2-green-soft-text: var(--dwi-color-primary);
  --miv2-green-soft-bg:   rgba(var(--dwi-color-primary-rgb), 0.08);
  --miv2-green-faint:     rgba(var(--dwi-color-primary-rgb), 0.05);
  --miv2-green-line:      rgba(var(--dwi-color-primary-rgb), 0.22);
}

/* Notifications + confirm dialogs (theme-dealworthit-notify.css). Its palette
   sits on :root, so out-specify with html[...]. .s-success keeps its own green. */
html[data-brand=syndicator] {
  --dwin-emerald:      var(--dwi-color-primary);
  --dwin-emerald-tint: rgba(var(--dwi-color-primary-rgb), 0.09);
  --dwin-emerald-line: rgba(var(--dwi-color-primary-rgb), 0.22);
}

/* T12 review (theme-dealworthit-t12-review.css) */
[data-brand=syndicator] .t12r {
  --emerald:        var(--dwi-color-primary);
  --emerald-700:    var(--dwi-color-primary-strong);
  --emerald-tint:   rgba(var(--dwi-color-primary-rgb), 0.09);
  --emerald-tint-2: rgba(var(--dwi-color-primary-rgb), 0.05);
}

/* Deal-assumptions / property-settings modal (inline --ps-green palette, a
   distinct #15795f green). */
[data-brand=syndicator] #kt_modal_property_settings {
  --ps-green:      var(--dwi-color-primary);
  --ps-green-dark: var(--dwi-color-primary-strong);
  --ps-green-soft: rgba(var(--dwi-color-primary-rgb), 0.09);
}

/* ────────────────────────────────────────────────────────────────────────
   Positive metric VALUES stay green (green = good / red = bad). The re-pointed
   feature palettes above turn --miv2-green / --emerald the brand color so page
   CHROME (pills, buttons, fills, card accents) follows the brand — but a handful
   of selectors use those same tokens to color a NUMERIC value / trend delta whose
   sibling --*--neg / --*--down stays red. Re-pointing only the green half would
   read a positive number in the brand color next to a red negative, inverting
   the financial signal. Point just those value selectors at the semantic
   --dwi-color-positive (not re-pointed for this brand → #0E6E59, matching the
   green these surfaces show on DealWorthIt in both light and dark). The
   [data-brand] prefix raises specificity above each base rule, so this wins
   regardless of load order; negatives already stay red via --miv2-red / --red.
   ──────────────────────────────────────────────────────────────────────── */
[data-brand=syndicator] .mi-v2 .mi-v2-kpi-value--upside,
[data-brand=syndicator] .mi-v2 .mi-v2-kpi-trend--up,
[data-brand=syndicator] .mi-v2 .mi-v2-table tbody td.t-delta,
[data-brand=syndicator] .mi-v2 .mi-v2-mini-trend--up,
[data-brand=syndicator] .mi-v2 .mi-v2-yoy--up,
[data-brand=syndicator] .mi-v2 .mi-v2-decision-val--green,
[data-brand=syndicator] .mi-v2 .mi-v2-emp-v--pos,
[data-brand=syndicator] .mi-v2 .mi-v2-td-v--pos,
[data-brand=syndicator] .mi-v2 .mi-v2-impact-row .v--suggest,
[data-brand=syndicator] .mi-v2 .mi-v2-glance-v--pos,
[data-brand=syndicator] .t12r .iss-metric .v.pos {
  color: var(--dwi-color-positive);
}

/* ────────────────────────────────────────────────────────────────────────
   Primary CTAs styled with Bootstrap's .btn-success (the app's convention —
   Continue underwriting, Add note, Upload, Send invite, Convert, Generate …).
   The bundle compiles these green; for a branded app that clashes, so recolor
   the success BUTTON classes to the brand primary. Deliberately NOT
   .text-success / .bg-success / .badge-*success, which stay green for genuine
   success/positive signals. Scoped to this brand + !important to beat the
   bundle's compiled literals; DealWorthIt (never [data-brand=syndicator]) is
   untouched.
   ──────────────────────────────────────────────────────────────────────── */
html[data-brand=syndicator] .btn-success {
  color: #fff !important;
  background-color: var(--dwi-color-primary) !important;
  border-color: var(--dwi-color-primary) !important;
}
html[data-brand=syndicator] .btn-success:hover,
html[data-brand=syndicator] .btn-success:focus,
html[data-brand=syndicator] .btn-success:active,
html[data-brand=syndicator] .btn-success.active,
html[data-brand=syndicator] .btn-success:disabled,
html[data-brand=syndicator] .show > .btn-success.dropdown-toggle {
  color: #fff !important;
  background-color: var(--dwi-color-primary-strong) !important;
  border-color: var(--dwi-color-primary-strong) !important;
}
/* Soft variant: light brand fill + brand label/icon; solid brand on hover. */
html[data-brand=syndicator] .btn-light-success,
html[data-brand=syndicator] .btn-light-success i {
  color: var(--dwi-color-primary) !important;
}
html[data-brand=syndicator] .btn-light-success {
  background-color: var(--dwi-color-primary-soft) !important;
  border-color: transparent !important;
}
html[data-brand=syndicator] .btn-light-success:hover,
html[data-brand=syndicator] .btn-light-success:focus,
html[data-brand=syndicator] .btn-light-success:active,
html[data-brand=syndicator] .btn-light-success:hover i {
  color: #fff !important;
  background-color: var(--dwi-color-primary) !important;
  border-color: var(--dwi-color-primary) !important;
}
/* Outline variant: brand outline + label; fills brand on hover. */
html[data-brand=syndicator] .btn-outline-success {
  color: var(--dwi-color-primary) !important;
  border-color: var(--dwi-color-primary) !important;
}
html[data-brand=syndicator] .btn-outline-success:hover,
html[data-brand=syndicator] .btn-outline-success:focus,
html[data-brand=syndicator] .btn-outline-success:active {
  color: #fff !important;
  background-color: var(--dwi-color-primary) !important;
  border-color: var(--dwi-color-primary) !important;
}

/* Documents + Notes tabs. Both feature skins use their own #0F6E5F emerald
   (documents_v2.css via --docs-green; notes_list.html hardcoded inline) —
   distinct from the shared token, so override scoped to this brand. Covers the
   Upload / Add note / Save note buttons and the brand accents. */
[data-brand=syndicator] .docs-v2 {
  --docs-green:      var(--dwi-color-primary);
  --docs-green-dark: var(--dwi-color-primary-strong);
  --docs-green-soft: rgba(var(--dwi-color-primary-rgb), 0.08);
}
[data-brand=syndicator] .notes-v2 .notes-v2-btn--primary,
[data-brand=syndicator] .notes-v2 .notes-save-btn {
  background: var(--dwi-color-primary) !important;
  border-color: var(--dwi-color-primary) !important;
  color: #fff !important;
}
[data-brand=syndicator] .notes-v2 .notes-v2-btn--primary:hover,
[data-brand=syndicator] .notes-v2 .notes-save-btn:hover {
  background: var(--dwi-color-primary-strong) !important;
  border-color: var(--dwi-color-primary-strong) !important;
  color: #fff !important;
}
[data-brand=syndicator] .notes-v2 .notes-v2-search input:focus {
  border-color: var(--dwi-color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.12) !important;
}
[data-brand=syndicator] .notes-v2 .notes-v2-vt button.is-active {
  background: rgba(var(--dwi-color-primary-rgb), 0.08) !important;
  color: var(--dwi-color-primary) !important;
}
[data-brand=syndicator] .notes-v2 .notes-filter-btn.active,
[data-brand=syndicator] .notes-v2 .notes-v2-action:hover,
[data-brand=syndicator] .notes-v2 .notes-doc-link {
  color: var(--dwi-color-primary) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   Public-report sticky CTA bar ("Want to underwrite your own deal?"). The
   report markup + the shared theme-dealworthit-reports.css (loaded on every
   brand's report) hardcode a dark-EMERALD bar with an emerald primary button.
   Re-skin the bar to the brand ramp with a white primary button (white-on-brand
   reads cleanly — the faithful analog of DealWorthIt's emerald bar + lighter
   emerald button). Scoped by [data-brand] (specificity beats the base
   .dwi-sticky-* rules). Negatives/ghost/title inherit the white-on-dark base,
   which already reads on the brand bar.
   ──────────────────────────────────────────────────────────────────────── */
[data-brand=syndicator] .dwi-sticky-cta {
  background: linear-gradient(135deg, var(--dwi-color-primary-strong) 0%, var(--dwi-color-primary) 100%);
}
[data-brand=syndicator] .dwi-sticky-cta-icon {
  color: rgba(255, 255, 255, 0.82);
}
[data-brand=syndicator] .dwi-sticky-btn-primary {
  background: #fff;
  color: var(--dwi-color-primary-strong);
  border-color: #fff;
}
[data-brand=syndicator] .dwi-sticky-btn-primary:hover {
  background: rgba(255, 255, 255, 0.88);
  color: var(--dwi-color-primary-strong);
  border-color: rgba(255, 255, 255, 0.88);
}
/* Same treatment for the detailed report's inline public-CTA panel (.dwi-pub-cta),
   the non-sticky sibling of the bar above. Its base reports.css rules carry
   !important, so match it here to win. */
[data-brand=syndicator] .dwi-pub-cta {
  background: linear-gradient(135deg, var(--dwi-color-primary-strong) 0%, var(--dwi-color-primary) 100%) !important;
}
[data-brand=syndicator] .dwi-pub-cta .btn-primary,
[data-brand=syndicator] .dwi-pub-cta .dwi-pub-cta-btn {
  background: #fff !important;
  border-color: #fff !important;
  color: var(--dwi-color-primary-strong) !important;
}

/* ────────────────────────────────────────────────────────────────────────
   Modals rendered at document root (outside their re-pointed feature container)
   still show DealWorthIt emerald on this brand — some via a local emerald
   palette, most via hardcoded #0E6E59 / rgba(14,110,89,x) literals that token
   re-pointing can't reach. Re-skin each modal's BRAND-ACCENT emerald (icons,
   focus rings, borders, tints, stepper/selection chrome) to the brand color.
   Genuine success / "good" indicators stay green (left untouched). Scoped by
   [data-brand]; the added attribute out-specifies each base rule, and !important
   is matched where the base uses it. These skins all load on Syndicator.ai —
   their host <link>s are gated on $brand_theme_css, truthy for this brand.
   ──────────────────────────────────────────────────────────────────────── */

/* Guided intake modal (.dwi-im). Its stepper, asset-selection ring and focus
   outlines are colored with the positive token used as a brand accent (not a
   metric), so re-point it for this modal only; plus two hardcoded rgba literals. */
[data-brand=syndicator] .dwi-im { --dwi-color-positive: var(--dwi-color-primary); }
[data-brand=syndicator] .dwi-im .form-control:focus,
[data-brand=syndicator] .dwi-im .form-select:focus {
  box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.12);
}
[data-brand=syndicator] .dwi-im-success-staged {
  border-color: rgba(var(--dwi-color-primary-rgb), 0.18);
}

/* CSV / AIP import result modal (.csv_modal / .aip-result-modal). Brand-accent
   chips + insight icon → brand; the .text-success / .bg-success /
   .badge-light-success / .rrv-al--good success signals keep their green. */
[data-brand=syndicator] .rrv-banner-rec { color: var(--dwi-color-primary); background: rgba(var(--dwi-color-primary-rgb), 0.10); }
[data-brand=syndicator] .rrv-ins-ic { background: rgba(var(--dwi-color-primary-rgb), 0.10); color: var(--dwi-color-primary); }
[data-brand=syndicator] .rrv-tab .badge.bg-dark { background: rgba(var(--dwi-color-primary-rgb), 0.12) !important; color: var(--dwi-color-primary) !important; }
[data-brand=syndicator] .rrv-imp { color: var(--dwi-color-primary); background: rgba(var(--dwi-color-primary-rgb), 0.08); }

/* Underwrite-inputs modal (.dwi-umx) — emerald focus ring (its border already
   follows the brand via --dwi-color-primary). */
[data-brand=syndicator] .dwi-umx .dwi-umx-inp .form-select:focus {
  box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.12);
}

/* Syndication / equity-split modal (.modal_equity_split) — hardcoded emerald
   rgba borders / tints / focus rings (buttons already follow the brand). */
[data-brand=syndicator] .dwi-shell-modern .modal_equity_split .dwi-synd-recon { border-color: rgba(var(--dwi-color-primary-rgb), 0.20); background: rgba(var(--dwi-color-primary-rgb), 0.05); }
[data-brand=syndicator] .dwi-shell-modern .modal_equity_split .dwi-synd-recon-head:hover { background: rgba(var(--dwi-color-primary-rgb), 0.06); }
[data-brand=syndicator] .dwi-shell-modern .modal_equity_split .dwi-synd-recon-head:focus-visible { outline-color: rgba(var(--dwi-color-primary-rgb), 0.45); }
[data-brand=syndicator] .dwi-shell-modern .modal_equity_split .form-select:focus { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.07) !important; }
[data-brand=syndicator] .dwi-shell-modern .modal_equity_split .select2-container--open .select2-selection { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.07) !important; }
[data-brand=syndicator] body.dwi-shell-modern .modal_equity_split .add_new_manager_equity:hover { background-color: rgba(var(--dwi-color-primary-rgb), 0.12) !important; }
[data-brand=syndicator] .dwi-shell-modern .modal_equity_split .dwi-sym-half.lp { background: rgba(var(--dwi-color-primary-rgb), 0.05); }
[data-brand=syndicator] .dwi-shell-modern .modal_equity_split .dwi-sym-ein:focus-within { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.07); }
[data-brand=syndicator] .dwi-shell-modern .modal_equity_split .dwi-sym-feecard.tint { background: rgba(var(--dwi-color-primary-rgb), 0.05); }
[data-brand=syndicator] .dwi-shell-modern .modal_equity_split .dwi-sym-select:focus { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.07); }
[data-brand=syndicator] .dwi-shell-modern .modal_equity_split .dwi-sym-chips b { background: rgba(var(--dwi-color-primary-rgb), 0.05); }

/* Investor-projection modal ([id^=kt_modal_investor_projection_]) — emerald KPI
   + table-header tints. */
[data-brand=syndicator] .dwi-shell-modern [id^="kt_modal_investor_projection_"] .dwi-ib-kpi.hl { background: linear-gradient(160deg, rgba(var(--dwi-color-primary-rgb), 0.05), transparent 70%); }
[data-brand=syndicator] .dwi-shell-modern [id^="kt_modal_investor_projection_"] table.table th.bg-light { background: rgba(var(--dwi-color-primary-rgb), 0.05) !important; }
[data-brand=syndicator] .dwi-shell-modern [id^="kt_modal_investor_projection_"] table.table th.bg-light-info { background: rgba(var(--dwi-color-primary-rgb), 0.05) !important; }

/* Markets add-modal STATE dropdown focus rings (hardcoded; not reached by the
   --mk-emerald re-point above). */
[data-brand=syndicator] #markets_add_modal .mk-statedd.open .mk-statedd-toggle,
[data-brand=syndicator] #markets_add_modal .mk-statedd-input:focus { box-shadow: 0 0 0 3px rgba(var(--dwi-color-primary-rgb), 0.12); }

/* Reports create-modal upsell button hover glow (button fill already brand). */
[data-brand=syndicator] .dwi-cr-sec-upsell-btn:hover { box-shadow: 0 4px 12px -4px rgba(var(--dwi-color-primary-rgb), 0.40); }

/* Dark mode — Metronic's dark surfaces (~#1e1e2d). STATIC FALLBACK (the config
   injection re-declares a lightened primary for dark from colors.primary);
   neutrals stay at Metronic's dark values. */
[data-brand=syndicator][data-theme=dark] {
  --dwi-color-primary: #6E93F5;
  --dwi-color-primary-rgb: 110, 147, 245;
  --dwi-color-primary-strong: #4070F0;
  --dwi-color-primary-press: #2F5AD9;
  --dwi-color-primary-soft: rgba(110, 147, 245, 0.16);
  --dwi-color-accent: #6E93F5;
  --dwi-color-accent-rgb: 110, 147, 245;
}
