/* ═══════════════════════════════════════════════════════════════════════════
   FIFTEEN chrome-token BINDING stylesheet  (--fx-*)   ·  Fifteen.Web.Shared RCL
   ───────────────────────────────────────────────────────────────────────────
   This is the load-bearing half of the chrome-theming system. _BrandStyle emits
   the --fx-* token VALUES (per mode); THIS file maps each token onto the Metronic
   surface it drives.

   WHY IT EXISTS: Metronic's dark-sidebar chrome hardcodes its menu colours as
   literal hex inside style.bundle.css (resting menu text #9D9DA6, headings
   #646477, icons #C5C5D8, bullets #787887, active-row bg #2A2A3C) — they are NOT
   CSS variables, so setting a Metronic variable can't reach them. The only way
   to theme them is an override rule at EQUAL-OR-HIGHER specificity, loaded AFTER
   the bundle. Every menu rule below replicates the bundle's exact selector chain
   ([data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item …) so it
   matches at equal specificity and wins on source order (this file MUST be linked
   after style.bundle.css in every chrome layout).

   PIXEL-IDENTITY: every var() carries a fallback equal to today's exact value, and
   the Default theme's emitted token values EQUAL those fallbacks — so an unthemed
   render (or one on the Default theme) is identical to today. A preset theme emits
   different --fx-* values and the surfaces recolour.

   HEADER: the header is now token-driven (--fx-header-bg). The Default keeps it
   DARK in both light and dark (NEX-39 preserved); a theme CAN set a light header.
   The light-mode header re-pin in fifteen-theme.css was converted to reference the
   same --fx-header-* tokens so the two never fight.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────── Header ─────────────────────────── */
#kt_app_header.app-header {
    --kt-app-header-base-bg-color: var(--fx-header-bg, #1e1e2d);
    --kt-app-header-base-bg-color-mobile: var(--fx-header-bg, #1e1e2d);
    --kt-app-header-base-menu-link-bg-color-active: var(--fx-header-active-bg, #2A2A3C);
    background-color: var(--fx-header-bg, #1e1e2d);
    border-bottom: 1px solid var(--fx-header-border, #2B2B40);
}
.app-header .text-white {
    color: var(--fx-header-text, #ffffff) !important;
}
#kt_shell_module_name.app-shell-module-name {
    color: var(--fx-header-text-muted, #7e8299);
}
.app-header .btn.btn-icon,
.app-header .btn.btn-icon > i,
.app-header #kt_app_sidebar_mobile_toggle > i {
    color: var(--fx-header-icon, #9899ac);
}
.app-header .btn.btn-icon:hover,
.app-header .btn.btn-icon:hover > i,
.app-header .btn.btn-active-color-primary:hover > i {
    color: var(--fx-header-icon-hover, #3699ff);
}

/* ─────────────────────────── Sidebar shell ─────────────────────────── */
#kt_app_sidebar.app-sidebar {
    --kt-app-sidebar-base-bg-color: var(--fx-sidebar-bg, #1e1e2d);
    background-color: var(--fx-sidebar-bg, #1e1e2d);
    border-right-color: var(--fx-sidebar-border, #2B2B40);
}
#kt_app_sidebar_menu_wrapper.hover-scroll-overlay-y::-webkit-scrollbar-thumb {
    background-color: var(--fx-sidebar-scrollbar, rgba(255, 255, 255, 0.18));
}

/* ─── Bespoke shared sidebar section headings (fifteen-sidebar.css) ─── */
.app-sidebar .menu-section-heading,
.app-sidebar .menu-section-toggle .menu-section-text {
    color: var(--fx-menu-heading, #565674);
}
.app-sidebar .menu-section-toggle .menu-section-caret {
    border-color: var(--fx-menu-heading, #565674);
}
.app-sidebar .menu-section-toggle:hover .menu-section-text {
    color: var(--fx-menu-heading-hover, #a1a5b7);
}
.app-sidebar .menu-section-toggle:hover .menu-section-caret {
    border-color: var(--fx-menu-heading-hover, #a1a5b7);
}

/* ══════════════════════════════════════════════════════════════════════════
   DARK-SIDEBAR MENU — re-point the hardcoded bundle hexes at --fx-* tokens.
   Selectors mirror style.bundle.css exactly (equal specificity); this file loads
   after the bundle so it wins. THIS is what makes "jet-black menu + grey text",
   "pink icons + blue text" etc. expressible.
   ══════════════════════════════════════════════════════════════════════════ */

/* Section / group heading (bundle: #646477 !important). */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-heading {
    color: var(--fx-menu-heading, #646477) !important;
}

/* THE :not(.fx-workspace-entry) EXCLUSIONS BELOW — read this once, it explains
   every one of them (Brad, 2026-08-15).
   These rules bind the DARK SIDEBAR's menu tokens, and they are keyed off
   [data-kt-app-layout="dark-sidebar"] on the BODY plus .app-sidebar. The module
   switcher's dropdown lives inside .app-sidebar (correctly — it must survive the
   shell's per-module menu swap, see _FifteenSidebar.cshtml), and it carries the
   class .menu, so it was matching all of them. But that dropdown is a THEMED
   PANEL, not the dark sidebar: Metronic paints its background with
   --kt-menu-dropdown-bg-color, which is #ffffff in the light theme. The result
   in light theme was --fx-menu-text #9D9DA6 on white — 2.7:1, below even the
   3:1 large-text floor — and on hover --fx-menu-text-hover #ffffff on white,
   i.e. a hovered row that vanished completely.
   So the switcher's rows (.fx-workspace-entry) are excluded HERE, at the source
   of the over-reach, rather than fought with a higher-specificity override
   elsewhere. Their panel-appropriate colours are defined once, next to the rest
   of the workspace rules, in fifteen-sidebar.css. Nothing else changes: the
   sidebar's own menu is untouched by these exclusions. */

/* Resting link + title text (bundle: #9D9DA6). */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:not(.fx-workspace-entry),
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link:not(.fx-workspace-entry) .menu-title {
    color: var(--fx-menu-text, #9D9DA6);
}

/* Resting icon (bundle: #C5C5D8). */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-icon .svg-icon {
    color: var(--fx-menu-icon, #C5C5D8);
}

/* Resting bullet (bundle: #787887). */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link .menu-bullet .bullet {
    background-color: var(--fx-menu-bullet, #787887);
}

/* Disabled link. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.disabled,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.disabled .menu-title {
    color: var(--fx-menu-text-disabled, #565674);
}

/* HOVER state (bundle keys these off --kt-primary-inverse; we decouple to
   dedicated hover tokens so hover colour is independent of the primary). */

/* Hover BACKGROUND. The bundle paints no background on a dark-sidebar
   .menu-link:hover, and the token's default is `transparent`, so this binding is
   a no-op on the Default theme — it exists so a theme can actually give the
   sidebar a hover highlight. Previously --fx-menu-bg-hover was emitted and shown
   in the picker but bound to nothing outside the preview pane. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here):not(.fx-workspace-entry),
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here) .menu-link:not(.disabled):not(.active):not(.here):not(.fx-workspace-entry):hover {
    background-color: var(--fx-menu-bg-hover, transparent);
}

[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here):not(.fx-workspace-entry),
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here) .menu-link:not(.disabled):not(.active):not(.here):not(.fx-workspace-entry):hover,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here):not(.fx-workspace-entry) .menu-title,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here) .menu-link:not(.disabled):not(.active):not(.here):not(.fx-workspace-entry):hover .menu-title {
    color: var(--fx-menu-text-hover, #ffffff);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here) .menu-link:not(.disabled):not(.active):not(.here):hover .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here) .menu-link:not(.disabled):not(.active):not(.here):hover .menu-icon i {
    color: var(--fx-menu-icon-hover, #ffffff);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here) .menu-bullet .bullet,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item:not(.here) .menu-link:not(.disabled):not(.active):not(.here):hover .menu-bullet .bullet {
    background-color: var(--fx-menu-text-hover, #ffffff);
}

/* ACTIVE + HERE + SHOW states (bundle: bg #2A2A3C on .active, text/icon/bullet
   → --kt-primary-inverse). Bind bg to --fx-menu-bg-active and fg to the active
   tokens. */
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active:not(.fx-workspace-entry) {
    background-color: var(--fx-menu-bg-active, #2A2A3C);
    color: var(--fx-menu-text-active, #ffffff);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .menu-title,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .menu-title,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active:not(.fx-workspace-entry) .menu-title {
    color: var(--fx-menu-text-active, #ffffff);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-icon .svg-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .menu-icon i,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .menu-icon i {
    color: var(--fx-menu-icon-active, #ffffff);
}
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item .menu-link.active .menu-bullet .bullet,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.here > .menu-link .menu-bullet .bullet,
[data-kt-app-layout="dark-sidebar"] .app-sidebar .menu .menu-item.show > .menu-link .menu-bullet .bullet {
    background-color: var(--fx-menu-text-active, #ffffff);
}

/* ─────────────────────────── Body / surface ─────────────────────────── */
html,
body#kt_app_body,
body {
    background-color: var(--fx-body-bg, #15171c);
}

/* Shared page-header card — bind the hardcoded hexes (fifteen-theme.css /
   site.css set #1e1e2d/#2B2B40 dark, #ffffff/#e4e6ef light) to the per-mode
   card tokens. */
.page-header-card {
    background-color: var(--fx-card-bg, #1e1e2d);
    border-color: var(--fx-card-border, #2B2B40);
}

/* ─────────────────────── Content surfaces (generic) ───────────────────────
   GENERIC (non-page-header) content cards, body text, headings and table
   column-headers. The card BACKGROUND is carried by the --fx-card-bg → --kt-card-bg
   bridge in _BrandStyle (Metronic's own .card{background:var(--kt-card-bg)} reads
   it at root inheritance), so no raw .card{} background override lives here — that
   is deliberate, to avoid the documented --bs-card-bg dark-card regression. Body
   text / headings / muted are carried by the --bs-body-color / --bs-heading-color /
   --bs-secondary-color bridges in light, and by the per-host fifteen-dark.css token
   refs in dark. The two rules below cover surfaces the framework does NOT already
   key off a themeable var: the muted-text light path and the table column header.
   Every default value EQUALS today's rendered value ⇒ no-op until a company sets
   an override (the table header is the one intentional improvement — see below). */

/* Muted body text — Metronic light .text-muted is a fixed grey, not var-driven.
   Point it at the token (default #7e8299 == today's light value). Dark is handled
   by fifteen-dark.css, which now reads the same token; that rule is more specific
   so it wins in dark. */
.text-muted {
    color: var(--fx-text-muted, #7e8299);
}

/* Table COLUMN HEADERS — Metronic bundles thead colour via frozen text-gray-*
   utilities on the <tr> (e.g. .text-gray-400 = #B5B5C3), which neither theme
   remaps, so headers were a fixed washed grey — invisible-ish on dark and not
   brand-tunable. Bind thead th directly (beats the inherited tr utility colour;
   no !important, so an explicit text-gray-* class ON a th still wins). Per-mode
   value comes from the emitted token: readable muted header on the card in BOTH
   themes, and now brand-tunable. Unlike the other content tokens this CHANGES the
   default header colour (fixed grey → theme-aware muted) — that is the intended
   Part-2 improvement, not a regression. */
.table thead th {
    color: var(--fx-table-header-text, #7e8299);
    background-color: var(--fx-table-header-bg, transparent);
}