/*
 * Theme CSS — content-stable.
 *
 * Replaces the dynamically-rendered Views/Home/Theme.cshtml partial. All color
 * values live as CSS custom properties on `:root`; the SPA sets them from the
 * server-resolved theme returned by /api/v2/me/bootstrap (see BootstrapTheme).
 *
 * Variables:
 *   --menu-color           Primary brand / accent (button fills, key icons, etc).
 *   --menu-color-dark      Pressed/active state — darker shade of --menu-color.
 *   --menu-color-shadow    --menu-color with 40% alpha (the legacy "MenuColor + 66" trick).
 *                          Pre-computed by the SPA so we don't need color-mix() here.
 *   --module-color         Per-module accent (selected rows, wizard active step, …).
 *   --module-color-light   Lighter shade — hover backgrounds, inactive wizard steps.
 *   --text-color           Foreground that pairs with --module-color (white on dark
 *                          backgrounds, black on light — server picks).
 *
 * Default values keep the screen renderable while the SPA bootstraps (avoids the
 * "flash of unstyled colors" between HTML paint and bootstrap completion). The
 * defaults match the Wello Purple theme since that's the most common tenant.
 */

:root {
    --menu-color: #4d002e;
    --menu-color-dark: #2f001c;
    --menu-color-shadow: rgba(77, 0, 46, 0.4);
    --module-color: #4d002e;
    --module-color-light: #4d002e;
    --text-color: #ffffff;
    /*
     * Foreground for elements that use --menu-color as background (notably the
     * Angular 20 shell's main-menu component). Computed client-side by
     * BootstrapService.applyTheme() via YIQ luminance — white for dark themes
     * (most tenants on wello-purple / wello-green), black for light themes
     * (yellow_light, sunny_orange). The default is white to match the
     * wello-purple fallback above.
     */
    --menu-text-color: #ffffff;

    /*
     * Contrast-aware sidebar palette. Pre-computed alongside --menu-text-color
     * by BootstrapService.applyTheme() so descendants of the menu (sb-item
     * label, hover/active backgrounds, kbd hints, etc.) stay readable on both
     * dark and light tenant themes without hardcoding white-only foregrounds.
     *
     *   --menu-text-muted   ~78%  text alpha — section labels, secondary names
     *   --menu-text-subtle  ~55%  text alpha — placeholder, footer "small"
     *   --menu-text-faint   ~40%  text alpha — counters, kbd shortcuts
     *   --menu-surface-hover    6% tint  — hover background on menu items
     *   --menu-surface-active  10% tint  — active background on selected item
     *   --menu-border           8% tint  — section dividers, rail border-right
     *
     * Defaults below pair with #FFFFFF text on the wello-purple background.
     * applyTheme() flips to black-tinted rgba()s when the tenant runs a light
     * theme (yellow_light, sunny_orange).
     */
    --menu-text-muted: rgba(255, 255, 255, 0.78);
    --menu-text-subtle: rgba(255, 255, 255, 0.55);
    --menu-text-faint: rgba(255, 255, 255, 0.40);
    --menu-surface-hover: rgba(255, 255, 255, 0.06);
    --menu-surface-active: rgba(255, 255, 255, 0.10);
    --menu-border: rgba(255, 255, 255, 0.08);
}

/*#region Contract Colors */
.u-legacy .u-d-none {
    display: none !important;
}

.u-legacy .u-d-block {
    display: block !important;
}

.u-legacy input[type='button'],
.u-legacy input[type='submit'],
.u-legacy button,
.u-legacy button.button,
.u-legacy .fill-orange,
.u-legacy .fillorange {
    background: var(--menu-color);
}

.u-legacy .wello-bg-color {
    background-color: var(--menu-color) !important;
}

.u-legacy .wello-color {
    color: var(--menu-color) !important;
}

.u-legacy button.c-button--forced {
    background: var(--menu-color-dark);
}

.u-legacy .border-orange {
    border-color: var(--menu-color) !important;
}

.u-legacy .orange {
    color: var(--menu-color) !important;
}

.u-legacy .border-color-module-light {
    border-color: var(--module-color-light);
}

.u-legacy .fill-color-module-light {
    background: var(--module-color-light);
}

.u-legacy .color-module-light {
    color: var(--module-color-light);
}

.u-legacy .border-color-module {
    border-color: var(--module-color) !important;
}

.u-legacy .fill-color-module {
    background: var(--module-color);
}

.u-legacy .color-module {
    color: var(--module-color) !important;
}

.u-legacy .module-edit {
    background-image: url("/Images/Icons/contract/edit.png");
}

.u-legacy .module-add {
    background-image: url("/Images/Icons/contract/add.png");
}

.u-legacy .wizard-steps a {
    background: var(--module-color-light);
}

.u-legacy .wizard-steps a:before {
    border-top-color: var(--module-color-light);
    border-bottom-color: var(--module-color-light);
}

.u-legacy .wizard-steps a:after {
    border-left-color: var(--module-color-light);
}

.u-legacy .wizard-steps a:hover,
.u-legacy .wizard-steps a.active {
    background: var(--module-color);
}

.u-legacy .wizard-steps a:hover:before,
.u-legacy .wizard-steps a.active::before {
    border-top-color: var(--module-color);
    border-bottom-color: var(--module-color);
}

.u-legacy .wizard-steps a:hover:after,
.u-legacy .wizard-steps a.active:not(.wizard-step-last)::after {
    border-left-color: var(--module-color);
}

.u-legacy .k-state-selected,
.u-legacy .k-details-master {
    background: var(--module-color);
    border-color: var(--module-color);
}

.u-legacy .k-state-selected a {
    color: var(--text-color) !important;
}

.u-legacy .k-grid table tbody tr:hover,
.u-legacy .k-grid-content table tbody tr:hover {
    background: var(--module-color-light);
    border-color: var(--module-color);
    color: #fff;
}

.ods-new-css .bg-color-theme,
.ods-new-css .c-button--primary,
.ods-new-css .c-button--primary[disabled],
.ods-new-css .c-navbar--key,
.ods-new-css .c-checkbox input[type='checkbox']:checked,
.ods-new-css .c-checkbox input[type='checkbox']:indeterminate,
.ods-new-css .c-radio input[type='radio']:checked:before,
.ods-new-css .c-toggle input[type='checkbox']:checked ~ .c-toggle__back,
.ods-new-css .c-treeview .c-treeview--item-selected > span.c-treeview--item,
.ods-new-css .c-checkbox.circle_letter input:checked ~ .checkmark,
.ods-new-css .c-toggle.c-toggle--same-color .c-toggle__back,
.ods-new-css mat-horizontal-stepper.arrow-template mat-step-header[aria-selected=true] .mat-step-label-active .mat-step-text-label,
.cdk-drag-preview .c-checkbox input[type='checkbox']:checked,
.cdk-drag-preview .c-checkbox input[type='checkbox']:indeterminate,
.cdk-drag-preview .c-checkbox.circle_letter input:checked ~ .checkmark {
    background: var(--menu-color) !important;
}

.ods-new-css mat-horizontal-stepper.arrow-template mat-step-header[aria-selected=true] + div + mat-step-header .mat-step-text-label::before {
    border-left-color: var(--menu-color) !important;
}

.ods-new-css .border-color-theme,
.ods-new-css .c-checkbox input[type='checkbox']:checked,
.ods-new-css .c-checkbox input[type='checkbox'][data-indeterminate]:checked,
.ods-new-css .c-radio input[type='radio']:checked,
.ods-new-css .c-card--selected,
.cdk-drag-preview .c-checkbox input[type='checkbox']:checked,
.cdk-drag-preview .c-checkbox input[type='checkbox'][data-indeterminate]:checked {
    border-color: var(--menu-color) !important;
}

.ods-new-css .text-color-theme,
.ods-new-css .form-mobile-preview .chapter .list .item.selected {
    color: var(--menu-color) !important;
}

.ods-new-css .c-checkbox input[type='checkbox']:checked::-ms-check,
.cdk-drag-preview .c-checkbox input[type='checkbox']:checked::-ms-check {
    background: var(--menu-color) !important;
    border-color: var(--menu-color) !important;
}

.ods-new-css .c-radio input[type=radio]::-ms-check {
    border-color: var(--menu-color) !important;
    color: var(--menu-color) !important;
}

.ods-new-css .c-button--revert {
    background: #fff !important;
    border-color: var(--menu-color) !important;
    color: var(--menu-color) !important;
}

.ods-new-css div.c-checkbox input[type='checkbox'][disabled]:checked:before,
.cdk-drag-preview div.c-checkbox input[type='checkbox'][disabled]:checked:before {
    color: var(--menu-color) !important;
}

.ods-new-css div.c-checkbox.disabled input[type='checkbox'][disabled]:checked:before,
.cdk-drag-preview div.c-checkbox.disabled input[type='checkbox'][disabled]:checked:before {
    background-color: var(--menu-color) !important;
    content: "";
}

.mat-progress-bar .mat-progress-bar-fill::after {
    background-color: var(--menu-color) !important;
}

.ods-new-css svg.template-color path {
    fill: var(--menu-color) !important;
}

.ods-new-css .toggle-button-custom {
    border: solid 1px var(--menu-color) !important;
    display: flex !important;
    align-items: center !important;
}

.ods-new-css .toggle-button-custom div {
    cursor: pointer !important;
    background: #fff !important;
    padding: 8px 16px !important;
    color: var(--menu-color) !important;
}

.ods-new-css .toggle-button-custom div:hover {
    background: #efefef !important;
}

.ods-new-css .toggle-button-custom div.toggle-button--active:hover,
.ods-new-css .background-color-theme {
    background: var(--menu-color) !important;
}

/*
 * Legacy `#@(ViewBag.MenuColor + "66")` — appending 66 made the color 8-digit
 * hex with 40% alpha. Replaced with a pre-computed rgba() set as
 * --menu-color-shadow from the SPA so we don't need color-mix() / relative-color
 * syntax (still partial-support across browsers we care about).
 */
.ods-new-css .background-color-theme:hover,
.ods-new-css .c-button--revert:hover,
.c-user-security__button:hover,
.c-user-security__focus-button:focus,
.c-mfa-configuration__button:hover {
    box-shadow: 0 0 12px 4px var(--menu-color-shadow) !important;
}

.ods-new-css .background-color-theme:disabled,
.ods-new-css .c-button--revert:disabled,
.c-user-security__button:disabled,
.c-mfa-configuration__button:disabled {
    box-shadow: none !important;
    cursor: auto !important;
}

.ods-new-css .stroke-color-theme path {
    stroke: var(--menu-color) !important;
}

.ods-new-css .toggle-button-custom .toggle-button--active {
    background: var(--menu-color) !important;
    display: flex !important;
    align-items: center !important;
    color: #fff !important;
}

.ods-new-css svg.dynamic-video-icon rect,
.u-legacy svg.dynamic-video-icon rect {
    fill: var(--menu-color) !important;
}

.ods-new-css .dynamic-video-icon-2 i {
    color: var(--menu-color) !important;
}
/*#endregion */