/*
 * Environment-specific theme overrides.
 *
 * Driven by the data-env-theme attribute on <html>, which is set from
 * the "EnvironmentDisplay:Theme" config value in appsettings.
 * When the attribute is absent (Production), no rules match and the
 * default Telerik ocean-blue theme is used unchanged.
 */

/* ── Development: Green (sidebar only) ────────────────────────────── */

html[data-env-theme="green"] .page-drawer .k-drawer-wrapper {
    --kendo-color-primary: #2E7D32;
    --kendo-color-primary-hover: #1B5E20;
    --kendo-color-primary-active: #1B5E20;
    --kendo-color-primary-focus: #2E7D32;
    --kendo-color-primary-emphasis: rgba(46, 125, 50, 0.4);
    --kendo-color-primary-subtle: #E8F5E9;
    --kendo-color-primary-subtle-hover: #C8E6C9;
    --kendo-color-primary-subtle-active: #A5D6A7;
    --kendo-color-on-primary: #FFFFFF;
    --kendo-color-primary-contrast: #FFFFFF;
}

/* ── Environment Label Badge ─────────────────────────────────────── */

.env-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-left: 8px;
    line-height: 1.4;
}

html[data-env-theme="green"] .env-label {
    background-color: #E8F5E9;
    color: #2E7D32;
    border: 1px solid #A5D6A7;
}

/* ── Training: Pink/Magenta (sidebar only) ────────────────────────── */

html[data-env-theme="pink"] .page-drawer .k-drawer-wrapper {
    --kendo-color-primary: #8E1F5C;
    --kendo-color-primary-hover: #5D1E48;
    --kendo-color-primary-active: #5D1E48;
    --kendo-color-primary-focus: #8E1F5C;
    --kendo-color-primary-emphasis: rgba(142, 31, 92, 0.4);
    --kendo-color-primary-subtle: #FCE4EC;
    --kendo-color-primary-subtle-hover: #F8BBD0;
    --kendo-color-primary-subtle-active: #F48FB1;
    --kendo-color-on-primary: #FFFFFF;
    --kendo-color-primary-contrast: #FFFFFF;
}

html[data-env-theme="pink"] .env-label {
    background-color: #FCE4EC;
    color: #8E1F5C;
    border: 1px solid #F48FB1;
}

/* ── Mobile: Orange (sidebar only) ───────────────────────────────── */

html[data-env-theme="orange"] .page-drawer .k-drawer-wrapper {
    --kendo-color-primary: #B46000; /* was #D17A2A: white text 3.22:1 -> 4.55:1 (WCAG 1.4.3) */
    --kendo-color-primary-hover: #A35A1A;
    --kendo-color-primary-active: #A35A1A;
    --kendo-color-primary-focus: #B46000;
    --kendo-color-primary-emphasis: rgba(180, 96, 0, 0.4);
    --kendo-color-primary-subtle: #FFF3E0;
    --kendo-color-primary-subtle-hover: #FFE0B2;
    --kendo-color-primary-subtle-active: #FFCC80;
    --kendo-color-on-primary: #FFFFFF;
    --kendo-color-primary-contrast: #FFFFFF;
}

html[data-env-theme="orange"] .env-label {
    background-color: #FFF3E0;
    color: #A35A1A;
    border: 1px solid #FFB74D;
}

/* ── Local: Purple (sidebar only) ────────────────────────────────── */

html[data-env-theme="purple"] .page-drawer .k-drawer-wrapper {
    --kendo-color-primary: #7B1FA2;
    --kendo-color-primary-hover: #4A148C;
    --kendo-color-primary-active: #4A148C;
    --kendo-color-primary-focus: #7B1FA2;
    --kendo-color-primary-emphasis: rgba(123, 31, 162, 0.4);
    --kendo-color-primary-subtle: #F3E5F5;
    --kendo-color-primary-subtle-hover: #E1BEE7;
    --kendo-color-primary-subtle-active: #CE93D8;
    --kendo-color-on-primary: #FFFFFF;
    --kendo-color-primary-contrast: #FFFFFF;
}

html[data-env-theme="purple"] .env-label {
    background-color: #F3E5F5;
    color: #7B1FA2;
    border: 1px solid #CE93D8;
}