/* program-chrome.css — per-PROGRAM chrome theming for THREE surfaces:
 *   (1) left navigation (.cr-sidebar)   (2) top header (.cr-navbar)   (3) table headers (thead)
 *
 * Driven by the --cr-program-* variables injected in _Layout.cshtml, and scoped under the body class
 * `.cr-has-program` which the layout adds ONLY when a program is in context. So when no program is selected,
 * none of these rules apply and the surfaces look exactly as before (AppTheme defaults). Loaded AFTER
 * site.css; the `.cr-has-program` prefix also gives every rule higher specificity than the base rules.
 *
 * Colours: header + left nav use the program's PRIMARY colour; table headers use a soft tint of the program's
 * SECONDARY colour (or primary when no secondary). Foregrounds (--cr-program-*-fg) are computed server-side
 * from WCAG luminance (see Services/ThemeColor.cs) so text stays readable on light OR dark program colours.
 * Hover/active overlays are foreground-relative (color-mix) for the same reason.
 *
 * TO REVERT THIS FEATURE: delete this file, remove its <link> from _Layout.cshtml, remove the
 * --cr-program-* injection block + the `cr-has-program` body class in _Layout.cshtml, and delete
 * Services/ThemeColor.cs. No other file is touched. */

/* ── (2) Top header ─────────────────────────────────────────────────────────── */
.cr-has-program .cr-navbar {
    background-color: var(--cr-program-header-bg, var(--cr-navbar-bg));
    color:            var(--cr-program-header-fg, var(--cr-navbar-text));
}

.cr-has-program .cr-navbar .navbar-brand,
.cr-has-program .cr-navbar .nav-link,
.cr-has-program .cr-navbar .navbar-toggler {
    color: var(--cr-program-header-fg, var(--cr-navbar-text));
}

/* Hover/border overlays are relative to the (computed) foreground, so they remain visible on BOTH light and
 * dark program colours — replacing the previous hardcoded rgba(255,255,255,…) overlays. */
.cr-has-program .cr-navbar .nav-link:hover,
.cr-has-program .cr-navbar .nav-link:focus {
    color: var(--cr-program-header-fg, var(--cr-navbar-text));
    background-color: color-mix(in srgb, var(--cr-program-header-fg, var(--cr-navbar-text)) 12%, transparent);
}

.cr-has-program .cr-navbar .navbar-toggler {
    border-color: color-mix(in srgb, var(--cr-program-header-fg, var(--cr-navbar-text)) 25%, transparent);
}

/* ── (1) Left navigation ────────────────────────────────────────────────────── */
.cr-has-program .cr-sidebar {
    background-color: var(--cr-program-nav-bg, var(--cr-sidebar-bg));
}

.cr-has-program .cr-sidebar__section-label,
.cr-has-program .cr-sidebar__link,
.cr-has-program .cr-sidebar__link i {
    color: var(--cr-program-nav-fg, var(--cr-sidebar-text));
}

.cr-has-program .cr-sidebar__link:hover {
    color: var(--cr-program-nav-fg, var(--cr-sidebar-text));
    background-color: color-mix(in srgb, var(--cr-program-nav-fg, var(--cr-sidebar-text)) 10%, transparent);
}

/* Active item: ON-COLOUR emphasis — an inset accent bar + bolder same-colour text — readable against any
 * program colour. Replaces the previous teal-on-gray active treatment (which assumed a light sidebar). */
.cr-has-program .cr-sidebar__link--active,
.cr-has-program .cr-sidebar__link--active:hover {
    color: var(--cr-program-nav-fg, var(--cr-sidebar-text));
    background-color: color-mix(in srgb, var(--cr-program-nav-fg, var(--cr-sidebar-text)) 16%, transparent);
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 var(--cr-program-nav-fg, var(--cr-sidebar-text));
}

.cr-has-program .cr-sidebar__link--active i {
    color: var(--cr-program-nav-fg, var(--cr-sidebar-text));
    opacity: 1;
}

/* ── (3) Table headers ──────────────────────────────────────────────────────── */
/* SOFT TINT (default): ~12% of the program colour mixed over white, with dark ink text — a subtle band that
 * sits inside content without competing with the data.
 *
 * ONE-LINE SWITCH to FULL-FILL (bold program-coloured header band) — replace the two declarations below with:
 *     background-color: var(--cr-program-thead-base) !important;
 *     color:            var(--cr-program-thead-base-fg, #1f2937) !important;
 */
.cr-has-program thead.table-light th,
.cr-has-program table.dataTable > thead th {
    background-color: color-mix(in srgb, var(--cr-program-thead-base) 12%, white) !important;
    color: #1f2937 !important;
}