/* GENERATED by build-css-bundle.ps1 - do not edit.
 * Edit the individual files under wwwroot/css/ instead; the bundle is rebuilt on build.
 * File list and order come from the @import rules of
 * app.login.css and are the CSS cascade.
 */
@layer escape, reset, vendor, root, core, overrides, project, controls, modes;
@layer vendor.bootstrap, vendor.kendo, vendor.fontawesome, vendor.gridstack, vendor.fullcalendar;

@layer escape {

/* ---- /css/escape.css ---- */
/* layer(escape) - the only place allowed to hold an !important whose job is to beat another
 * !important, and in practice that means a vendor utility class.
 *
 * WHY IT WORKS. Per CSS Cascade 5 the layer order is INVERTED for important declarations: the
 * FIRST layer wins, not the last. `escape` is declared first in the contract, so an !important here
 * beats an !important from `vendor` (third) and from `project` (seventh) alike. The mirror image is
 * that a NORMAL declaration here is the weakest in the document - which is the point: this layer is
 * for overrides, not for styling.
 *
 * WHAT IT DOES NOT BEAT. `style="… !important"` written on the element, and the same set from JS
 * (setProperty(…, 'important'), cssText). Per css-cascade-5 the "Element-Attached Styles" step sits
 * ABOVE the "Layers" step, so those win over every layer including this one. Fix them at the
 * element; nothing here can reach them.
 *
 * BEFORE ADDING AN ENTRY, check that the vendor rule is not simply doing its job. Bootstrap's
 * utilities (.p-0, .d-none, .text-center …) all carry !important by design, and they only apply
 * when the class is written in the markup. If a utility is beating you, the first question is
 * whether that class belongs on that element at all - removing it is a smaller change than
 * out-ranking it forever.
 *
 * RULES FOR ADDING AN ENTRY:
 *   1. Only !important declarations. A normal declaration here loses to everything.
 *   2. Name the OPPONENT in a comment: which file, which selector, which declaration. "Needed it to
 *      stick" is not a reason - if there is no important opponent, the flag belongs in the owning
 *      file without one.
 *   3. Say why it does not start beating a THIRD declaration. Winning here is unconditional, so an
 *      over-broad selector quietly takes over rules nobody was arguing about.
 *   4. Keep the selector as narrow as the case allows.
 *
 * The file is empty on purpose. An empty layer costs nothing, and having the plumbing in place
 * means the first real case is a three-line edit rather than a migration step.
 */

}

@layer root {

/* ---- /css/eRoot/eRoot.css ---- */
:root {
    /* FONT */
    --font-family-base: 'Inter', sans-serif; /* "Segoe UI", Roboto, Helvetica, Arial, sans-serif;*/
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 900;
    /* Base text */
    --font-size-base: 14px;
    --line-height-base: 1.5; /* = 24px */
    --letter-spacing-base: normal;
    /* Display title */
    --letter-spacing-display: -0.02em;
    --font-size-display-2xl: 72px;
    --line-height-display-2xl: 1.25; /* = 90px */

    --font-size-display-xl: 60px;
    --line-height-display-xl: 1.2; /* = 72px */

    --font-size-display-lg: 48px;
    --line-height-display-lg: 1.25; /* = 60px */

    --font-size-display-md: 36px;
    --line-height-display-md: 1.22; /* = 44px */

    --font-size-display-sm: 30px;
    --line-height-display-sm: 1.27; /* = 38px */

    --font-size-display-xs: 24px;
    --line-height-display-xs: 1.33; /* = 32px */
    /* Text style */
    --font-size-text-2xl: 22px;
    --line-height-text-2xl: 1.5; /* = 30px */

    --font-size-text-xl: 20px;
    --line-height-text-xl: 1.5; /* = 30px */

    --font-size-text-lg: 18px;
    --line-height-text-lg: 1.56; /* = 28px */

    --font-size-text-md: 16px;
    --line-height-text-md: 1.5; /* = 24px */

    --font-size-text-sm: 14px;
    --line-height-text-sm: 1.43; /* = 20px */

    --font-size-text-sm-1: 13px;
    --font-size-text-xs: 12px;
    --line-height-text-xs: 1.5; /* = 18px */
    /* === Base === */
    --white: #ffffff;
    --black: #000000;
    --transparent: rgba(255, 255, 255, 0);
    /* COLOR */
    --bg-color: #fafafa;
    --bg-color-accent: #f9f9f9;
    /* === Gray (AA/AAA) === */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e9eaeb; /* разделители */
    --gray-300: #d5d7da; /* бордеры */
    --gray-400: #6B6B6B;
    --gray-500: #717680; /* обычный текст (не AAA) */
    --gray-600: #535862; /* текст (AA), фоновый текст */
    --gray-700: #414651; /* тёмный текст (AAA) */
    --gray-800: #252b37; /* заголовки */
    --gray-900: #181d27; /* основа UI dark */
    --gray-950: #0a0d12;
    /* === Gray Dark (тёмная тема) === */
    --gray-dark-100: #f0f0f1;
    --gray-dark-200: #ececed;
    --gray-dark-300: #cecfd2;
    --gray-dark-400: #94979c;
    --gray-dark-500: #85888e;
    --gray-dark-600: #61656c;
    --gray-dark-700: #373a41;
    --gray-dark-800: #22262f;
    --gray-dark-900: #13161b;
    --gray-dark-950: #0c0e12;
    /* === Brand (фирменный, отобраны только контрастные) === */
    --brand-50: #F9F5FF; /* BG */
    --brand-100: #F4EBFF; /* AAA — использовать с dark-текстом */
    --brand-150: #ECE4FF;
    --brand-300: #D6BBFB; /* AA — основной цвет */
    --brand-400: #B692F6;
    --brand-500: #9E77ED;
    --brand-600: #7F56D9; /* AA — интерактив/hover */
    --brand-700: #6941C6;
    --brand-800: #53389E; /* AAA — тёмный фон/акцент */
    --brand-900: #42307D; /* AAA — заголовки, кнопки */
    --brand-transparent-bg: #7F56D994;
    --brand-transparent-bc: #7F56D933;
    /* === Accent (второстепенные, как ярлыки и метки) === */
    --accent-blue: #2e90fa;
    --accent-indigo: #6172f3;
    --accent-pink: #ee46bc;
    /* === Semantic — Success === */
    --success-100: #dcfae6; /* AAA фон */
    --success-300: #75e0a7; /* AA акцент */
    --success-500: #17b26a; /* основной зелёный */
    --success-700: #067647; /* текст/иконки */
    --success-900: #074d31; /* тёмный success */
    --success-transparent-bg: #06764794;
    --success-transparent-bc: #06764733;
    /* === Semantic — Warning === */
    --warning-100: #fef0c7;
    --warning-300: #fec84b;
    --warning-500: #f79009;
    --warning-700: #b54708;
    --warning-900: #7a2e0e;
    --warning-transparent-bg: #b5470894;
    --warning-transparent-bc: #b5470833;
    /* === Semantic — Error === */
    --error-100: #fee4e2; /* фон */
    --error-300: #fda29b; /* ярлык, иконки */
    --error-500: #f04438; /* основной красный */
    --error-700: #b42318; /* текст ошибок */
    --error-900: #7a271a; /* насыщенный */
    --error-transparent-bg: #b4231894;
    --error-transparent-bc: #b4231833;
    /* RADIUS */
    --radius-none: 0px;
    --radius-xxs: 2px; /* = 0.125rem */
    --radius-xs: 4px; /* = 0.25rem */
    --radius-sm: 6px; /* = 0.375rem */
    --radius-md: 8px; /* = 0.5rem */
    --radius-lg: 10px; /* = 0.625rem */
    --radius-xl: 12px; /* = 0.75rem */
    --radius-2xl: 16px; /* = 1rem */
    --radius-3xl: 20px; /* = 1.25rem */
    --radius-4xl: 24px; /* = 1.5rem */
    --radius-full: 9999px;
    /* === Spacing primitives (4px base grid) === */
    --spacing-none: 0px;
    --spacing-xxs: 2px;
    --spacing-xs: 4px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
    --spacing-2xl: 20px;
    --spacing-3xl: 24px;
    --spacing-4xl: 32px;
    --spacing-5xl: 40px;
    --spacing-6xl: 48px;
    --spacing-7xl: 64px;
    --spacing-8xl: 80px;
    --spacing-9xl: 96px;
    --spacing-10xl: 128px;
    --spacing-11xl: 160px;
    /* === Container sizes === */
    --container-padding-mobile: 16px;
    --container-padding-desktop: 32px;
    --container-max-width-desktop: 1280px;
    /* === Paragraph width === */
    --paragraph-max-width: 720px;
    /* === Shadows === */
    --shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
    --shadow-sm: 0px 1px 3px rgba(16, 24, 40, 0.1), 0px 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0px 4px 6px rgba(16, 24, 40, 0.1), 0px 2px 4px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0px 10px 15px rgba(16, 24, 40, 0.1), 0px 4px 6px rgba(16, 24, 40, 0.06);
    --shadow-xl: 0px 20px 25px rgba(16, 24, 40, 0.1), 0px 10px 10px rgba(16, 24, 40, 0.04);
    --shadow-2xl: 0px 25px 50px rgba(16, 24, 40, 0.25);
    --shadow-3xl: 0 35px 60px rgba(0, 0, 0, 0.3);
    --shadow-custom: 0 12px 24px var(--brand-100), 0 4px 12px var(--brand-100);
    --shadow-custom-small: 0px 4px 6px var(--brand-100), 0px 2px 4px var(--brand-100);
    /* === Focus rings === */
    --focus-ring-color: var(--brand-500);
    --focus-ring-error-color: var(--error-500);
    --focus-ring-shadow-xs: 0 0 0 4px rgba(127, 86, 217, 0.4); /* brand */
    --focus-ring-shadow-sm: 0 0 0 4px rgba(127, 86, 217, 0.6); /* brand */
    --focus-ring-error-shadow-xs: 0 0 0 4px rgba(217, 45, 32, 0.4); /* error */
    --focus-ring-shadow-skeuo: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    --control-height: 40px;
    --color-focus-shadow: rgba(10, 13, 18, 0.05);
    --color-border: var(--gray-300);
    --color-text-secondary: var(--gray-700);
    /* === Theme-aware semantic tokens === */
    /* Text on brand-colored backgrounds (всегда светлый, не зависит от темы) */
    --text-on-brand: #ffffff;
    /* "Soft" brand surface — для active/hover/selected состояний */
    --brand-soft-bg: var(--brand-100);
    --brand-soft-text: var(--brand-700);
    --brand-soft-border: var(--brand-300);
    --components-height-3xs: 24px;
    --components-height-2xs: 28px;
    --components-height-xs: 32px;
    --components-height-sm: 36px;
    --components-height-md: 40px;
    --components-height-lg: 44px;
    --components-height-xl: 48px;
    --components-height-2xl: 52px;
    --components-height-3xl: 56px;
}

[data-accent="purple"] {
    --bg-color: #F9F5FF;
    --brand-50: #F9F5FF; /* BG */
    --brand-100: #F4EBFF; /* AAA — использовать с dark-текстом */
    --brand-300: #D6BBFB; /* AA — основной цвет */
    --brand-400: #B692F6;
    --brand-500: #9E77ED;
    --brand-600: #7F56D9; /* AA — интерактив/hover */
    --brand-700: #6941C6;
    --brand-800: #53389E; /* AAA — тёмный фон/акцент */
    --brand-900: #42307D; /* AAA — заголовки, кнопки */
    --brand-transparent-bg: #7F56D954;
    --brand-transparent-bc: #7F56D933;
}

[data-accent="default"] {
    --bg-color: #fafafa;
    --brand-50: #F9F5FF; /* BG */
    --brand-100: #F4EBFF; /* AAA — использовать с dark-текстом */
    --brand-300: #D6BBFB; /* AA — основной цвет */
    --brand-400: #B692F6;
    --brand-500: #9E77ED;
    --brand-600: #7F56D9; /* AA — интерактив/hover */
    --brand-700: #6941C6;
    --brand-800: #53389E; /* AAA — тёмный фон/акцент */
    --brand-900: #42307D; /* AAA — заголовки, кнопки */
    --brand-transparent-bg: #7F56D954;
    --brand-transparent-bc: #7F56D933;
}

/* Dark mode (Alt+0) — основан на default-палитре purple, инвертирует серую шкалу */
[data-accent="dark"] {
    /* Brand (как в default), но light-tints (50/100/150) переопределены под тёмный фон */
    --brand-50: rgba(127, 86, 217, 0.10);   /* hover-фон, очень мягкий */
    --brand-100: rgba(127, 86, 217, 0.18);  /* active/selected фон */
    --brand-150: rgba(127, 86, 217, 0.28);  /* sticky active фон */
    --brand-300: #D6BBFB;
    --brand-400: #B692F6;
    --brand-500: #9E77ED;
    --brand-600: #7F56D9;
    --brand-700: #6941C6;
    --brand-800: #53389E;
    --brand-900: #42307D;
    --brand-transparent-bg: #7F56D954;
    --brand-transparent-bc: #7F56D933;

    /* Поверхности */
    --bg-color: #0c0e12;
    --bg-color-accent: #13161b;
    --white: #13161b;        /* карточки, формы, поповеры */
    --black: #f0f0f1;        /* основной текст */
    --transparent: rgba(0, 0, 0, 0);

    /* Серая шкала: инвертируем, маппя на --gray-dark-* */
    --gray-50: #0c0e12;      /* самый тёмный фон */
    --gray-100: #13161b;
    --gray-200: #22262f;     /* разделители */
    --gray-300: #373a41;     /* бордеры */
    --gray-400: #61656c;
    --gray-500: #85888e;     /* обычный текст (не AAA) */
    --gray-600: #94979c;     /* текст AA */
    --gray-700: #cecfd2;     /* тёмный текст → светлый AAA */
    --gray-800: #ececed;     /* заголовки */
    --gray-900: #f0f0f1;     /* основа UI */
    --gray-950: #ffffff;

    /* Тени — глубже на тёмном фоне */
    --shadow-xs: 0px 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0px 1px 3px rgba(0, 0, 0, 0.5), 0px 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0px 4px 6px rgba(0, 0, 0, 0.5), 0px 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0px 10px 15px rgba(0, 0, 0, 0.55), 0px 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0px 20px 25px rgba(0, 0, 0, 0.55), 0px 10px 10px rgba(0, 0, 0, 0.35);
    --shadow-2xl: 0px 25px 50px rgba(0, 0, 0, 0.7);
    --shadow-3xl: 0 35px 60px rgba(0, 0, 0, 0.8);
    --shadow-custom: 0 12px 24px rgba(127, 86, 217, 0.25), 0 4px 12px rgba(127, 86, 217, 0.2);
    --shadow-custom-small: 0px 4px 6px rgba(127, 86, 217, 0.25), 0px 2px 4px rgba(127, 86, 217, 0.2);

    /* Семантические бордеры/текст */
    --color-border: var(--gray-300);
    --color-text-secondary: var(--gray-700);
    --color-focus-shadow: rgba(255, 255, 255, 0.08);
    /* Soft brand-surface для active/hover (на тёмном фоне используем приглушённый purple) */
    --brand-soft-bg: rgba(127, 86, 217, 0.18);
    --brand-soft-text: var(--brand-300);
    --brand-soft-border: rgba(127, 86, 217, 0.45);

    color-scheme: dark;

    --bs-secondary-color: rgba(255, 255, 255, 0.5);

    --surface-secondary: var(--gray-dark-800) !important;
}

[data-accent="blue"] {
    --bg-color: #EFF4FF;
    --brand-50: #EFF4FF; /* BG */
    --brand-100: #D1E0FF; /* AAA — использовать с dark-текстом */
    --brand-300: #84ADFF; /* AA — основной цвет */
    --brand-400: #528BFF;
    --brand-500: #2970FF;
    --brand-600: #155EEF; /* AA — интерактив/hover */
    --brand-700: #004EEB;
    --brand-800: #0040C1; /* AAA — тёмный фон/акцент */
    --brand-900: #00359E; /* AAA — заголовки, кнопки */
    --brand-transparent-bg: #155EEF54;
    --brand-transparent-bc: #155EEF33;
}

[data-accent="green"] {
    --bg-color: #ECFDF3;
    --brand-50: #ECFDF3; /* BG */
    --brand-100: #DCFAE6; /* AAA — использовать с dark-текстом */
    --brand-300: #75E0A7; /* AA — основной цвет */
    --brand-400: #47CD89;
    --brand-500: #17B26A;
    --brand-600: #079455; /* AA — интерактив/hover */
    --brand-700: #079455; /* AA — интерактив/hover */
    --brand-800: #085D3A; /* AAA — тёмный фон/акцент */
    --brand-900: #074D31; /* AAA — заголовки, кнопки */
    --brand-transparent-bg: #07945554;
    --brand-transparent-bc: #07945533;
}

/* Red — #CC0000 */
[data-accent="red"] {
    --bg-color: #FCF4F4;
    --brand-50: #FCF4F4;
    --brand-100: #F9E5E5;
    --brand-300: #EDA5A5;
    --brand-400: #E27272;
    --brand-500: #D83F3F;
    --brand-600: #CC0000;
    --brand-700: #AD0000;
    --brand-800: #840000;
    --brand-900: #700000;
    --brand-transparent-bg: #CC000054;
    --brand-transparent-bc: #CC000033;
}

/* Emerald Green — #006633 */
[data-accent="emeraldgreen"] {
    --bg-color: #F4F8F6;
    --brand-50: #F4F8F6;
    --brand-100: #E5EFEA;
    --brand-300: #A5C9B7;
    --brand-400: #72AA8E;
    --brand-500: #3F8C66;
    --brand-600: #006633;
    --brand-700: #00562B;
    --brand-800: #004221;
    --brand-900: #00381C;
    --brand-transparent-bg: #00663354;
    --brand-transparent-bc: #00663333;
}

/* Orange — #CC6600 */
[data-accent="orange"] {
    --bg-color: #FCF8F4;
    --brand-50: #FCF8F4;
    --brand-100: #F9EFE5;
    --brand-300: #EDC9A5;
    --brand-400: #E2AA72;
    --brand-500: #D88C3F;
    --brand-600: #CC6600;
    --brand-700: #AD5600;
    --brand-800: #844200;
    --brand-900: #703800;
    --brand-transparent-bg: #CC660054;
    --brand-transparent-bc: #CC660033;
}

/* Magenta — #CC0066 */
[data-accent="magenta"] {
    --bg-color: #FCF4F8;
    --brand-50: #FCF4F8;
    --brand-100: #F9E5EF;
    --brand-300: #EDA5C9;
    --brand-400: #E272AA;
    --brand-500: #D83F8C;
    --brand-600: #CC0066;
    --brand-700: #AD0056;
    --brand-800: #840042;
    --brand-900: #700038;
    --brand-transparent-bg: #CC006654;
    --brand-transparent-bc: #CC006633;
}

/* Indigo — #330066 */
[data-accent="indigo"] {
    --bg-color: #F6F4F8;
    --brand-50: #F6F4F8;
    --brand-100: #EAE5EF;
    --brand-300: #B7A5C9;
    --brand-400: #8E72AA;
    --brand-500: #663F8C;
    --brand-600: #330066;
    --brand-700: #2B0056;
    --brand-800: #210042;
    --brand-900: #1C0038;
    --brand-transparent-bg: #33006654;
    --brand-transparent-bc: #33006633;
}

/* Violet — #660066 */
[data-accent="violet"] {
    --bg-color: #F8F4F8;
    --brand-50: #F8F4F8;
    --brand-100: #EFE5EF;
    --brand-300: #C9A5C9;
    --brand-400: #AA72AA;
    --brand-500: #8C3F8C;
    --brand-600: #660066;
    --brand-700: #560056;
    --brand-800: #420042;
    --brand-900: #380038;
    --brand-transparent-bg: #66006654;
    --brand-transparent-bc: #66006633;
}

/* Navy Blue — #000066 */
[data-accent="navyblue"] {
    --bg-color: #F4F4F8;
    --brand-50: #F4F4F8;
    --brand-100: #E5E5EF;
    --brand-300: #A5A5C9;
    --brand-400: #7272AA;
    --brand-500: #3F3F8C;
    --brand-600: #000066;
    --brand-700: #000056;
    --brand-800: #000042;
    --brand-900: #000038;
    --brand-transparent-bg: #00006654;
    --brand-transparent-bc: #00006633;
}

/* Grey — #606060 */
[data-accent="grey"] {
    --bg-color: #F8F8F8;
    --brand-50: #F8F8F8;
    --brand-100: #EFEFEF;
    --brand-300: #C7C7C7;
    --brand-400: #A7A7A7;
    --brand-500: #878787;
    --brand-600: #606060;
    --brand-700: #515151;
    --brand-800: #3E3E3E;
    --brand-900: #343434;
    --brand-transparent-bg: #60606054;
    --brand-transparent-bc: #60606033;
}

/* Yellow — #FFBC4C */
[data-accent="yellow"] {
    --bg-color: #FFFCF7;
    --brand-50: #FFFCF7;
    --brand-100: #FFF8ED;
    --brand-300: #FFE7C0;
    --brand-400: #FFDA9C;
    --brand-500: #FFCC78;
    --brand-600: #FFBC4C;
    --brand-700: #D89F40;
    --brand-800: #A57A31;
    --brand-900: #8C6729;
    --brand-transparent-bg: #FFBC4C54;
    --brand-transparent-bc: #FFBC4C33;
}

/* Grey-Green — #6B7F76 */
[data-accent="greygreen"] {
    --bg-color: #F9F9F9;
    --brand-50: #F9F9F9;
    --brand-100: #F0F2F1;
    --brand-300: #CBD2CF;
    --brand-400: #ADB8B3;
    --brand-500: #909F98;
    --brand-600: #6B7F76;
    --brand-700: #5A6B64;
    --brand-800: #45524C;
    --brand-900: #3A4540;
    --brand-transparent-bg: #6B7F7654;
    --brand-transparent-bc: #6B7F7633;
}

/* White — #FFFFFF */
[data-accent="white"] {
    --bg-color: #FFFFFF;
    --brand-50: #F5F5F5;
    --brand-100: #E5E5E5;
    --brand-300: #D4D4D4;
    --brand-400: #B8B8B8;
    --brand-500: #9C9C9C;
    --brand-600: #737373;
    --brand-700: #616161;
    --brand-800: #4A4A4A;
    --brand-900: #3D3D3D;
    --brand-transparent-bg: #73737354;
    --brand-transparent-bc: #73737333;
}

:root, [data-accent] {
    transition: color 140ms ease, background-color 140ms ease,
        border-color 140ms ease,
        box-shadow 140ms ease,
        opacity 140ms ease;
}


/* ---- /css/eCSSCore/profile/eunify.tokens.css ---- */
/* eUnify project profile — maps eCSSCore semantic tokens onto the portal palette (defined in css/eRoot). */
/* Load AFTER eRoot palette and BEFORE core/*.css. */
.eCSSCore {
    --e-text-primary: var(--gray-900);
    --e-surface-panel: var(--gray-50);
}

}

@layer core {

/* ---- /css/eCSSCore/core/eLayout.css ---- */
/* eCSSCore core — synced 1:1 from css_core/core/eLayout.css. DO NOT edit by hand. Re-sync via SYNC.md. */
.--eStack {
    --_eStackGap: var(--eStackGap, var(--estackgap, var(--eStackGapDefault, var(--spacing-lg))));
    --_eStackAI: var(--eStackAI, var(--estackai, var(--eStackAIDefault, stretch)));

    display: flex;
    flex-direction: column;
    gap: var(--_eStackGap);
    align-items: var(--_eStackAI);
}

.--eCluster {
    --_eClusterGap: var(--eClusterGap, var(--eclustergap, var(--eClusterGapDefault, var(--spacing-md))));
    --_eClusterAI: var(--eClusterAI, var(--eclusterai, var(--eClusterAIDefault, center)));
    --_eClusterJC: var(--eClusterJC, var(--eclusterjc, var(--eClusterJCDefault, flex-start)));

    display: flex;
    flex-wrap: wrap;
    gap: var(--_eClusterGap);
    align-items: var(--_eClusterAI);
    justify-content: var(--_eClusterJC);
}

.--eSplit {
    --_eSplitGap: var(--eSplitGap, var(--esplitgap, var(--eSplitGapDefault, var(--spacing-xl))));
    --_eSplitAI: var(--eSplitAI, var(--esplitai, var(--eSplitAIDefault, flex-start)));
    --_eSplitFirst: var(--eSplitFirst, var(--esplitfirst, var(--eSplitFirstDefault, auto)));

    display: flex;
    gap: var(--_eSplitGap);
    align-items: var(--_eSplitAI);
}

.--eSplit > :first-child {
    flex: 0 0 var(--_eSplitFirst);
}

.--eSplit > :last-child {
    flex: 1 1 auto;
    min-width: 0;
}

.--eCenter {
    --_eCenterMaxWidth: var(--eCenterMaxWidth, var(--ecentermaxwidth, var(--eCenterMaxWidthDefault, none)));
    --_eCenterPadding:  var(--eCenterPadding,  var(--ecenterpadding,  var(--eCenterPaddingDefault, 0)));

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: var(--_eCenterMaxWidth);
    padding: var(--_eCenterPadding);
}

.--eCover {
    --_eCoverMinH: var(--eCoverMinH, var(--ecoverminh, var(--eCoverMinHDefault, 100%)));
    --_eCoverGap: var(--eCoverGap, var(--ecovergap, var(--eCoverGapDefault, 0)));

    display: flex;
    flex-direction: column;
    min-height: var(--_eCoverMinH);
    gap: var(--_eCoverGap);
}

.--eCover > :nth-child(2) {
    flex: 1 1 auto;
    min-height: 0;
}

/* ---- /css/eCSSCore/core/eGrid.css ---- */
/* eCSSCore core — synced 1:1 from css_core/core/eGrid.css. DO NOT edit by hand. Re-sync via SYNC.md. */
.eCSSCore .--eRow {
    --_eCols: var(--eCols, var(--ecols, var(--eColsDefault, 1fr)));
    --_eGap: var(--eGap, var(--egap, var(--eGapDefault, 24px)));
    --_eRowBottom: var(--eRowBottom, var(--erowbottom, var(--eRowBottomDefault, 24px)));
    --_eRowMaxWidth: var(--eRowMaxWidth, var(--erowmaxwidth, var(--eRowMaxWidthDefault, 100%)));
    --_eRowOverflow: var(--eRowOverflow, var(--erowoverflow, var(--eRowOverflowDefault, visible)));
    --_eOddSpan: var(--eOddSpan, var(--eoddspan, var(--eOddSpanDefault, 1 / -1)));

    display: grid;
    grid-template-columns: var(--_eCols);
    gap: var(--_eGap);
    margin-bottom: var(--_eRowBottom);
    max-width: var(--_eRowMaxWidth);
    height: auto;
    overflow: var(--_eRowOverflow);
    width: 100%;

    @supports (width: -webkit-fill-available) {
        & {
            width: -webkit-fill-available;
        }
    }

    @supports (width: -moz-available) {
        & {
            width: -moz-available;
        }
    }

    & > *:last-child:nth-child(odd) {
        grid-column: var(--_eOddSpan);
    }

    & .--eRow {
        --_eRowBottomSub: var(--eRowBottomSub, var(--erowbottomsub, var(--eRowBottomSubDefault, 24px)));
        --_eGapSub: var(--eGapSub, var(--egapsub, var(--eGapSubDefault, 24px)));
        
        margin-bottom: var(--_eRowBottomSub);
        gap: var(--_eGapSub);
    }

    & .--eRow > *:last-child:nth-child(odd) {
        grid-column: var(--_eOddSpan);
    }

    & .--eTopTitle {
        --_eTopTitleMB: var(--eTopTitleMB, var(--etoptitlemb, var(--eTopTitleMBDefault, var(--spacing-3xl))));
        
        font-weight: 600;
        font-size: 24px;
        color: var(--e-text-primary, var(--gray-900));
        margin-bottom: var(--_eTopTitleMB);
    }

    & > *,
    & .--eRow > * {
        min-width: 0;
    }

    @media (max-width: 1280px) {
        &,
        & .--eRow {
            grid-template-columns: var(--_eColsMediaTablet, 100%);
            grid-template-areas:
                "area__1"
                "area__2"
                "area__3"
                "area__4";
        }
    }
}

/* ---- /css/eCSSCore/core/eForm.css ---- */
/* eCSSCore core — synced 1:1 from css_core/core/eForm.css. DO NOT edit by hand. Re-sync via SYNC.md. */
.eCSSCore .--eSection {
    --_ePageP: var(--ePageP, var(--epagep, var(--ePagePDefault, 24px 0 64px 0)));

    padding: var(--_ePageP);
}

.eCSSCore .--ePanel {
    position: sticky;
    bottom: 0;
    background: var(--e-surface-panel, rgba(250, 250, 250, 1));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}

.eCSSCore .--eForm {
    --_eFormBg: var(--eFormBg, var(--eformbg, var(--eFormBgDefault, var(--white))));
    --_eFormShadow: var(--eFormShadow, var(--eformshadow, var(--eFormShadowDefault, none)));
    --_eFormBorderR: var(--eFormBorderR, var(--eformborderr, var(--eFormBorderRDefault, var(--radius-md))));
    --_eFormPadding: var(--eFormPadding, var(--eformpadding, var(--eFormPaddingDefault, var(--spacing-3xl))));
    --_eFormMaxWidth: var(--eFormMaxWidth, var(--eformmaxwidth, var(--eFormMaxWidthDefault, 100%)));
    --_eFormW: var(--eFormW, var(--eformw, var(--eFormWDefault, 100%)));
    --_eFormGap: var(--eFormGap, var(--eformgap, var(--eFormGapDefault, var(--spacing-md))));
    --_eFormBorderColor: var(--eFormBorderColor, var(--eformbordercolor, var(--eFormBorderColorDefault, none)));
    --_eFormBorderW: var(--eFormBorderW, var(--eformborderw, var(--eFormBorderWDefault, 0)));
    --_eFormJC: var(--eFormJC, var(--eformjc, var(--eFormJCDefault, none)));
    --_eFormMargin: var(--eFormMargin, var(--eformmargin, var(--eFormMarginDefault, 0)));
    --_eFormAlignItem: var(--eFormAlignItem, var(--eformalignitem, var(--eFormAlignItemDefault, flex-start)));
    --_eFormH: var(--eFormH, var(--eformh, var(--eFormHDefault, 100%)));
    --_eFormHChrome: var(--eFormHChrome, var(--eformhchrome, var(--eFormHChromeDefault, -webkit-fill-available)));
    --_eFormHFireFox: var(--eFormHFireFox, var(--eformhfirefox, var(--eFormHFireFoxDefault, -moz-available)));
    --_eFormPaddingMediaTablet: var(--eFormPaddingMediaTablet, var(--eformpaddingmediatablet, var(--eFormPaddingMediaTabletDefault, var(--_eFormPadding))));
    --_eFormPaddingMediaMob: var(--eFormPaddingMediaMob, var(--eformpaddingmediamob, var(--eFormPaddingMediaMobDefault, var(--_eFormPaddingMediaTablet))));
    --_eFormMaxWidthMediaTablet: var(--eFormMaxWidthMediaTablet, var(--eformmaxwidthmediatablet, var(--eFormMaxWidthMediaTabletDefault, var(--_eFormMaxWidth))));
    --_eFormMaxWidthMediaMob: var(--eFormMaxWidthMediaMob, var(--eformmaxwidthmediamob, var(--eFormMaxWidthMediaMobDefault, var(--_eFormMaxWidthMediaTablet))));

    background: var(--_eFormBg);
    box-shadow: var(--_eFormShadow);
    border-radius: var(--_eFormBorderR);
    padding: var(--_eFormPadding);
    max-width: var(--_eFormMaxWidth);
    width: var(--_eFormW);
    display: flex;
    flex-direction: column;
    gap: var(--_eFormGap);
    transition: box-shadow 0.2s ease;
    outline: none;
    border-style: solid;
    border-color: var(--_eFormBorderColor);
    border-width: var(--_eFormBorderW);
    justify-content: var(--_eFormJC);
    margin: var(--_eFormMargin);
    align-items: var(--_eFormAlignItem);
    height: var(--_eFormH);

    &.--eTouch {
        border: 1px solid var(--brand-100);
        cursor: pointer;
        transition: all 0.2s;
    }

    &.--eTouch:hover {
        background: var(--brand-50);
    }

    @supports (height: -webkit-fill-available) {
        & {
            height: var(--_eFormHChrome);
        }
    }

    @supports (height: -moz-available) {
        & {
            height: var(--_eFormHFireFox);
        }
    }

    &:focus-visible {
        box-shadow: var(--focus-ring-shadow-sm);
    }

    &.--shadow-xs { box-shadow: var(--shadow-xs); }
    &.--shadow-sm { box-shadow: var(--shadow-sm); }
    &.--shadow-md { box-shadow: var(--shadow-md); }
    &.--shadow-lg { box-shadow: var(--shadow-lg); }
    &.--shadow-xl { box-shadow: var(--shadow-xl); }

    &.--eFormScroll::-webkit-scrollbar-thumb,
    & .--eFormScroll::-webkit-scrollbar-thumb {
        border-color: var(--sb-thumb);
        border-width: 0;
    }

    &.--eFormScroll,
    & .--eFormScroll {
        overflow: auto;
    }

    &.--eFormScroll::-webkit-scrollbar:hover *::-webkit-scrollbar-thumb,
    & .--eFormScroll::-webkit-scrollbar:hover *::-webkit-scrollbar-thumb {
        border-width: 4px;
    }

    &.--eFormScroll::-webkit-scrollbar,
    & .--eFormScroll::-webkit-scrollbar {
        width: 4px;
    }

    @media (max-width: 768px) {
        --_eFormPadding: var(--_eFormPaddingMediaTablet);
        --_eFormMaxWidth: var(--_eFormMaxWidthMediaTablet);
    }

    @media (max-width: 576px) {
        --_eFormPadding: var(--_eFormPaddingMediaMob);
        --_eFormMaxWidth: var(--_eFormMaxWidthMediaMob);
    }
}

.eCSSCore .--eTitle {
    --_eTitleAlIt: var(--eTitleAlIt, var(--etitlealit, var(--eTitleAlItDefault, center)));
    --_eTitleJC: var(--eTitleJC, var(--etitlejc, var(--eTitleJCDefault, space-between)));
    --_eTitleGap: var(--eTitleGap, var(--etitlegap, var(--eTitleGapDefault, var(--spacing-xl))));
    --_eTitleMarginB: var(--eTitleMarginB, var(--etitlemarginb, var(--eTitleMarginBDefault, 4px)));
    --_eTitlePaddingB: var(--eTitlePaddingB, var(--etitlepaddingb, var(--eTitlePaddingBDefault, 4px)));
    --_eTitleBorderB: var(--eTitleBorderB, var(--etitleborderb, var(--eTitleBorderBDefault, none)));
    --_eTitleW: var(--eTitleW, var(--etitlew, var(--eTitleWDefault, 100%)));

    display: flex;
    align-items: var(--_eTitleAlIt);
    justify-content: var(--_eTitleJC);
    gap: var(--_eTitleGap);
    margin-bottom: var(--_eTitleMarginB);
    padding-bottom: var(--_eTitlePaddingB);
    border-bottom: var(--_eTitleBorderB);
    width: 100%;
    max-width: var(--_eTitleW);

    & > h4 {
        color: var(--e-text-primary); /* semantic token — works in dark theme */
        font-weight: var(--font-weight-semibold);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & > div:not([class]),
    & h6 {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.--eForm {
    & .--eFilter {
        --_eFilterPaddingT: var(--eFilterPaddingT, var(--efilterpaddingt, var(--eFilterPaddingTDefault, 0)));

        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--_eFilterPaddingT);
        width: 100%;
    }

    & > .--eFooter {
        --_eFooterMarginTop: var(--eFooterMarginTop, var(--efootermargintop, var(--eFooterMarginTopDefault, auto)));

        margin-top: var(--_eFooterMarginTop);
    }

    &.--eView {
        overflow: auto;
        max-height: 520px;
    }
}

.--eBlock {
    --_eBlockDisplay: var(--eBlockDisplay, var(--eblockdisplay, var(--eBlockDisplayDefault, flex)));
    /* canonical: --eBlockAlign  |  legacy alias kept: --eBlockAling */
    --_eBlockAlign: var(--eBlockAlign, var(--eBlockAling, var(--eblockaling, var(--eBlockAlignDefault, center))));
    --_eBlockDirection: var(--eBlockDirection, var(--eblockdirection, var(--eBlockDirectionDefault, row)));
    --_eBlockGap: var(--eBlockGap, var(--eblockgap, var(--eBlockGapDefault, var(--spacing-lg))));
    --_eBlockJC: var(--eBlockJC, var(--eblockjc, var(--eBlockJCDefault, flex-start)));
    --_eBlockM: var(--eBlockM, var(--eblockm, var(--eBlockMDefault, 0)));
    --_eBlockW: var(--eBlockW, var(--eblockw, var(--eBlockWDefault, auto)));
    --_eBlockBorderColor: var(--eBlockBorderColor, var(--eblockbordercolor, var(--eBlockBorderColorDefault, none)));
    --_eBlockBorderW: var(--eBlockBorderW, var(--eblockborderw, var(--eBlockBorderWDefault, 0)));
    --_eBlockBorderR: var(--eBlockBorderR, var(--eblockborderr, var(--eBlockBorderRDefault, 0)));

    display: var(--_eBlockDisplay);
    align-items: var(--_eBlockAlign);
    flex-direction: var(--_eBlockDirection);
    gap: var(--_eBlockGap);
    justify-content: var(--_eBlockJC);
    margin: var(--_eBlockM);
    width: var(--_eBlockW);
    border-style: solid;
    border-color: var(--_eBlockBorderColor);
    border-width: var(--_eBlockBorderW);
    border-radius: var(--_eBlockBorderR);
}

.--eForm .--eBlockContent {
    /* canonical: --eBlockContentAlign  |  legacy alias kept: --eBlockContentAling */
    --_eBlockContentAlign: var(--eBlockContentAlign, var(--eBlockContentAling, var(--eblockcontentaling, var(--eBlockContentAlignDefault, center))));
    --_eBlockContentDirection: var(--eBlockContentDirection, var(--eblockcontentdirection, var(--eBlockContentDirectionDefault, row)));
    --_eBlockContentGap: var(--eBlockContentGap, var(--eblockcontentgap, var(--eBlockContentGapDefault, var(--spacing-3xl))));
    --_eBlockContentJC: var(--eBlockContentJC, var(--eblockcontentjc, var(--eBlockContentJCDefault, flex-start)));
    --_eBlockContentM: var(--eBlockContentM, var(--eblockcontentm, var(--eBlockContentMDefault, 0)));

    display: flex;
    align-items: var(--_eBlockContentAlign);
    flex-direction: var(--_eBlockContentDirection);
    gap: var(--_eBlockContentGap);
    justify-content: var(--_eBlockContentJC);
    margin: var(--_eBlockContentM);
}

.eCSSCore .--eProperties {
    --_ePropertiesW: var(--ePropertiesW, var(--epropertiesw, var(--ePropertiesWDefault, 100%)));
    --_ePropertiesFD: var(--ePropertiesFD, var(--epropertiesfd, var(--ePropertiesFDDefault, column)));
    --_ePropertiesGap: var(--ePropertiesGap, var(--epropertiesgap, var(--ePropertiesGapDefault, var(--spacing-3xl))));
    --_ePropertiesJC: var(--ePropertiesJC, var(--epropertiesjc, var(--ePropertiesJCDefault, flex-start)));
    --_ePropertiesWMediaTablet: var(--ePropertiesWMediaTablet, var(--epropertieswmediatablet, var(--ePropertiesWMediaTabletDefault, var(--_ePropertiesW))));
    --_ePropertiesWMediaMobile: var(--ePropertiesWMediaMobile, var(--epropertieswmediamobile, var(--ePropertiesWMediaMobileDefault, var(--_ePropertiesWMediaTablet))));

    display: flex;
    flex-direction: var(--_ePropertiesFD);
    width: var(--_ePropertiesW);
    gap: var(--_ePropertiesGap);
    justify-content: var(--_ePropertiesJC);

    @supports (width: -webkit-fill-available) {
        & {
            width: var(--_ePropertiesW, -webkit-fill-available);
        }
    }

    @supports (width: -moz-available) {
        & {
            width: var(--_ePropertiesW, -moz-available);
        }
    }

    & .--eAdaptiveLine,
    &.--eAdaptiveLine {
        --_ePropertyGap: var(--ePropertyGap, var(--epropertygap, var(--ePropertyGapDefault, 4px)));
        --_eFlexJC: var(--eFlexJC, var(--eflexjc, var(--eFlexJCDefault, flex-start)));
        --_ePropertyMarginTop: var(--ePropertyMarginTop, var(--epropertymargintop, var(--ePropertyMarginTopDefault, 0px)));
        --_ePropertyMarginBottom: var(--ePropertyMarginBottom, var(--epropertymarginbottom, var(--ePropertyMarginBottomDefault, 0px)));

        display: flex;
        flex-wrap: wrap;
        gap: var(--_ePropertyGap);
        justify-content: var(--_eFlexJC);
        margin-top: var(--_ePropertyMarginTop);
        margin-bottom: var(--_ePropertyMarginBottom);
        align-items: center;
    }

    & .--eLink {
        text-decoration: none;
        cursor: pointer;
    }

    & .--eProperty {
        --_eProperty: var(--eProperty, var(--eproperty, var(--ePropertyDefault, 1fr)));
        --_ePropertyGap: var(--ePropertyGap, var(--epropertygap, var(--ePropertyGapDefault, 8px)));
        --_ePropertyMaxW: var(--ePropertyMaxW, var(--epropertymaxw, var(--ePropertyMaxWDefault, 100%)));
        --_ePropertyAI: var(--ePropertyAI, var(--epropertyai, var(--ePropertyAIDefault, revert)));
        --_ePropertyJC: var(--ePropertyJC, var(--epropertyjc, var(--ePropertyJCDefault, revert)));
        --_ePropertyPadding: var(--ePropertyPadding, var(--epropertypadding, var(--ePropertyPaddingDefault, 0)));
        --_ePropertyBorderColor: var(--ePropertyBorderColor, var(--epropertybordercolor, var(--ePropertyBorderColorDefault, none)));
        --_ePropertyBorderW: var(--ePropertyBorderW, var(--epropertyborderw, var(--ePropertyBorderWDefault, 0)));
        --_ePropertyMB: var(--ePropertyMB, var(--epropertymb, var(--ePropertyMBDefault, 0)));

        display: grid;
        grid-template-columns: var(--_eProperty);
        gap: var(--_ePropertyGap);
        width: 100%;
        max-width: var(--_ePropertyMaxW);
        align-items: var(--_ePropertyAI);
        justify-items: var(--_ePropertyJC);
        padding: var(--_ePropertyPadding);
        border-style: solid;
        border-color: var(--_ePropertyBorderColor);
        border-width: var(--_ePropertyBorderW);
        margin-bottom: var(--_ePropertyMB);

        & .--eLabel {
            --_eLabelMarginB: var(--eLabelMarginB, var(--elabelmarginb, var(--eLabelMarginBDefault, var(--spacing-sm))));
            
            font-weight: var(--font-weight-medium);
            font-size: var(--font-size-text-sm);
            line-height: var(--line-height-text-sm);
            color: var(--gray-700);
            margin-bottom: var(--_eLabelMarginB);
        }

        & .--eSubLabel {
            --_eSubLabelMarginB: var(--eLabelMarginB, var(--elabelmarginb, var(--eSubLabelMarginBDefault, var(--spacing-xs))));
            
            font-weight: var(--font-weight-medium);
            font-size: var(--font-size-text-xs);
            line-height: var(--line-height-text-xs);
            color: var(--gray-700);
            margin-bottom: var(--_eSubLabelMarginB);
        }

        & .--eHeader,
        & .--eContent {
            --_direction: var(--direction, var(--directionDefault, row));
            
            display: flex;
            flex-direction: var(--_direction);
        }

    }

    /* canonical: .column | legacy: .colum (typo kept for backward compat) */
    &.column > .--eProperty,
    &.colum > .--eProperty {
        grid-template-columns: 1fr;
    }

    @media (max-width: 768px) {
        --_ePropertiesW: var(--_ePropertiesWMediaTablet);
    }

    @media (max-width: 576px) {
        --_ePropertiesW: var(--_ePropertiesWMediaMobile);
    }
}

.eCSSCore .--eProperty {}

.eCSSCore .--eAdaptiveLine {
    --_eAdaptiveLineGap: var(--eAdaptiveLineGap, var(--eadaptivelinegap, var(--eAdaptiveLineGapDefault, 4px)));
    --_eFlexJC: var(--eFlexJC, var(--eflexjc, var(--eFlexJCDefault, flex-start)));
    --_eAdaptiveLineMarginTop: var(--eAdaptiveLineMarginTop, var(--eadaptivelinemargintop, var(--eAdaptiveLineMarginTopDefault, 0px)));
    --_eAdaptiveLineMarginBottom: var(--eAdaptiveLineMarginBottom, var(--eadaptivelinemarginbottom, var(--eAdaptiveLineMarginBottomDefault, 0px)));

    display: flex;
    flex-wrap: wrap;
    gap: var(--_eAdaptiveLineGap);
    justify-content: var(--_eFlexJC);
    margin-top: var(--_eAdaptiveLineMarginTop);
    margin-bottom: var(--_eAdaptiveLineMarginBottom);
}

}

@layer overrides {

/* ---- /css/eCSSCore/extensions/eForm.eunify.css ---- */
/* eForm — eUnify project extensions over eCSSCore core. Load AFTER core/eForm.css. Each rule here is project-specific and intentionally NOT in the reusable core. */

/* SECTION: container queries — project-level container context on .--eForm */
.eCSSCore .--eForm {
    &:not(.stop__container, .--eFormScroll) {
        container: eForm / inline-size;
        position: relative;
        z-index: 1;
    }

    /* The :not() above is the portal's opt-out (8 markup sites: the dashboard blocks and
       EventView.cshtml, which documents it in a comment), and it is the only thing in the portal's
       own CSS that makes a .--eForm a container. One view defeats it:
       Views/Dashboard/DashboardBlocks/_WhatsNewBlock.cshtml:41 declares
       `.--eForm { container: eForm / inline-size }` unconditionally, for its own @container block.
       That <style> is emitted in the component body with a bare selector, so it is DOCUMENT-wide,
       not view-scoped: it turns the block's own .--eFormScroll into a container, and on the
       dashboard - where the component renders alongside the seven blocks that do carry
       .stop__container, and is re-injected on every AJAX refresh - it removes their opt-out too.
       Prod had the identical view-level style and the identical :not() rule, so this is parity, not
       a new hole; fixing it belongs to that view, not here.
       There used to be an explicit counter-rule resetting container-type/container-name on
       .stop__container / .--eFormScroll, to undo core/eContainers.css — which makes EVERY .--eForm a
       container, the reusable core having no notion of this opt-out. It is gone because the portal
       does not load eContainers.css at all (see the load order in README.md), which left it writing
       initial values over nothing. Link eContainers.css and the opt-out breaks: bring the
       counter-rule back, do NOT "fix" it in core/ — that directory is synced 1:1 from css_core, see
       SYNC.md. */

    @container eForm (max-width: 720px) {
        & {
            --eFormGapCurrent: var(--eFormGapCqSm, var(--eformgapcqsm));
            --eFormPaddingCurrent: var(--eFormPaddingCqSm, var(--eformpaddingcqsm));
        }

        & .--eFilter {
            flex-direction: column;
            align-items: start;
            gap: var(--spacing-xl);
        }

        & .--eFilter > .--eBlock:first-child {
            --eBlockDirection: column;
            --eBlockAling: start;
        }
    }

    @container eForm (max-width: 684px) {
        & .--eTitle:has( ~ .--eFilter) {
            flex-direction: column;
        }
    }
}

/* SECTION: fullscreen editor — reset z-index stacking inside fullscreen mode */
.eCSSCore .editor-fullscreen-open .--eForm {
    &:not(.stop__container, .--eFormScroll) {
        z-index: revert !important;
    }
}

/* SECTION: eSection — project uses 4-variable padding API instead of single --ePageP */
.eCSSCore .--eSection {
    padding: var(--ePageTop, 24px) var(--ePageRight, 0) var(--ePageBottom, 64px) var(--ePageLeft, 0);
}

/* SECTION: ePanel — project forces gray-50 background with !important */
.eCSSCore .--ePanel {
    background: var(--gray-50) !important;
}

/* SECTION: eTitle — project-specific color overrides and priority__title component */
.eCSSCore .--eTitle {
    & > h4 {
        color: var(--gray-800);
    }

    & .priority__title {
        margin: 0;
        font-weight: var(--font-weight-semibold);
        color: var(--gray-900);
        font-size: var(--font-size-text-lg);
        word-break: break-word;
    }

    & .priority__title ~ p {
        font-weight: 400;
        color: var(--gray-600);
    }
}

/* SECTION: eFilter — project-level bottom padding handle, and the portal default for the top one.

   PORTAL DEFAULT. The core resolves the handle as
   `var(--eFilterPaddingT, var(--efilterpaddingt, var(--eFilterPaddingTDefault, 0)))`
   (core/eForm.css:156), so the *Default tier is consulted ONLY where nothing is declared on the
   element. Every inline and every modifier class still wins; this cannot lose a cascade fight.

   Its failure mode is the opposite one — it moves whatever declares nothing, which is invisible in the
   markup. That is why it was worth doing here and nowhere else yet: every `.--eFilter` carrier IN THE
   SOURCE TREE declares the handle explicitly — 67 did so through a `--eFilterPadTop` class, now deleted,
   and 2 write `--eFilterPaddingT: 0` inline and keep it. Zero silent carriers, so zero elements move,
   and that was tested rather than trusted: an undeclared carrier surfaces as a changed computed value.
   The limit of the claim: a grep sees the source, not the DOM. Markup stored in the database and
   rendered raw (V1Template pages, CustomPage, editor content) is outside it. A `.--eFilter` arriving
   that way, inside a `.--eForm`, would now take 20px. Judged unlikely — portal component classes in
   user-authored HTML would be odd — but it is not statically provable either way.
   `Views/Announcement/AnnouncementList.cshtml.old:32` is a seventieth carrier; the file is dead and
   declares the handle anyway, so it changes nothing, but a recount will find it.

   Declared HERE and not in profile/eunify.tokens.css on purpose. css-variables-2 substitutes a var()
   into the declaration on the element the declaration applied to, and the computed result is what
   inherits. On `.eCSSCore` — which is <html> — `var(--spacing-2xl)` would resolve in the html context;
   here it resolves on the carrier, exactly as the class it replaces did. Identical today, because
   --spacing-2xl is defined once at :root with no media or theme override, and different the day that
   stops being true. Keeping it beside --eFilterPaddingB also means the family is configured in one
   place rather than split across two files.

   Ergonomic consequence, worth knowing before adding a filter: the top inset used to be opt-in and is
   now the default, so a `.--eFilter` that wants none needs an explicit `--eFilterPaddingT: 0` — which is
   the inline form this whole effort removes. Two carriers already write it
   (Views/Reservation/ReservationCalendar.cshtml:192 and :482). If a third appears, that is the signal to
   add a `--eFilterFlush` class rather than keep writing the inline.

   Cost, so it is not discovered later: `<div class="--eFilter">` now means 20px portal-wide, for all
   future markup, not just the 69 that exist. Reverting after new views are written against it is no
   longer a one-line revert. */
.eCSSCore .--eForm .--eFilter {
    --eFilterPaddingTDefault: var(--spacing-2xl);

    padding-bottom: var(--eFilterPaddingB, 0);
}

/* SECTION: eBlock — project adds !important overrides and extra handles */
.eCSSCore .--eBlock {
    align-items: var(--eBlockAling, center) !important;
    gap: var(--eBlockGap, var(--spacing-lg)) !important;
    flex-wrap: var(--eBlockWrap, revert);
    height: var(--eBlockH, auto);
}

/* SECTION: eBlockContent — project adds padding/border handles and !important overrides */
.eCSSCore .--eForm .--eBlockContent {
    align-items: var(--eBlockContentAling, center) !important;
    gap: var(--eBlockContentGap, var(--spacing-3xl)) !important;
    padding: var(--eBlockContentP, 0);
    border-style: solid;
    border-color: var(--eBlockContentBorderColor, none);
    border-width: var(--eBlockContentBorderW, 0);
    border-radius: var(--eBlockContentBorderR, 0);
}

/* SECTION: eProperties — project adds !important gap, margin handle, login variants, mobile override, and colum 100% fix */
.eCSSCore .--eProperties {
    gap: var(--ePropertiesGap, var(--spacing-3xl)) !important;
    margin: var(--ePropertiesM, revert);

    & .--eProperty {
        & .--eHeader.login {
            font-size: calc(var(--index) * 1.45);
            font-weight: 600;
        }

        & .--eContent.login {
            color: var(--gray-700);
            font-weight: 400;
        }

        & > .--eTop {
            display: grid;
            align-items: start;
            margin-top: 4px;
            height: 100%;
        }
        /* The tail mirrors the core's own chain (core/eForm.css --_eProperty) on purpose. Without it
           an unset --eProperty resolves to 1fr above 576px and to none below it — a jump the core
           does not have. Note this is NOT the replaced css/eForm/eForm.css behaviour: there the
           value went invalid at computed-value time and produced `none` at every width. The core's
           1fr is the deliberate change; keeping it consistent across the breakpoint is this tail.
           A single implicit `auto` track stretches much like 1fr, so the difference is expected to
           be invisible — not verified in a browser. */
        @media (max-width: 576px) {
            grid-template-columns: var(--ePropertyMobile, var(--eProperty, var(--eproperty, var(--ePropertyDefault, 1fr))));
        }
    }

    &.colum > .--eProperty {
        grid-template-columns: 100% !important;
    }
}

/* SECTION: eUniformDistribution — project-only layout utility */
.eCSSCore .--eUniformDistribution {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--eUniformDistributionGap, 4px);
    margin-top: var(--eUniformDistributionMarginTop, 0px);
    margin-bottom: var(--eUniformDistributionMarginBottom, 0px);
}

/* SECTION: eCollapse — project-level collapse/expand component */
.eCSSCore .--eCollapse {
    --_eCollapseDuration: var(--eCollapseDuration, .18s);
    --_eCollapseIconSize: var(--eCollapseIconSize, 18px);
    --_eCollapseIconColor: var(--eCollapseIconColor, var(--gray-700));
    position: relative;

    & .--eCollapseState {
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        opacity: 0;
        pointer-events: none;
    }

    & .--eCollapseTitle {
        cursor: pointer;
        user-select: none;

        & h4 label {
            cursor: pointer;
        }

        & .--eCollapseIcon {
            inline-size: var(--_eCollapseIconSize);
            block-size: var(--_eCollapseIconSize);
            display: grid;
            place-items: center;
            cursor: pointer;
            flex: 0 0 auto;
            margin-left: 8px;

            &::before {
                content: "";
                inline-size: 8px;
                block-size: 8px;
                border-right: 2px solid var(--_eCollapseIconColor);
                border-bottom: 2px solid var(--_eCollapseIconColor);
                transform: rotate(45deg);
                transition: transform var(--_eCollapseDuration) ease;
            }
        }
    }

    & .--eCollapseBody {
        display: grid;
        grid-template-rows: 1fr;
        opacity: 1;
        overflow: hidden;
        transition: grid-template-rows var(--_eCollapseDuration) ease, opacity var(--_eCollapseDuration) ease;

        & .--eProperties {
            min-block-size: 0;
            overflow: hidden;
        }
    }

    & .--eCollapseState:not(:checked) {
        & ~ .--eCollapseTitle {
            & .--eCollapseIcon::before {
                transform: rotate(-45deg);
            }
        }

        & ~ .--eCollapseBody {
            grid-template-rows: 0fr;
            opacity: 0;
        }
    }
}

/* SECTION: portal view modifiers — named classes replacing repeated inline variable sets in the views.
   The eRow half of this set lives in extensions/eGrid.eunify.css; read the cascade note in the header of
   that file before adding a class or a site here — it is the single copy of the rules that govern both
   files (why a class is weaker than the inline it replaces, why one class = one scope, and why a "dead"
   declaration has to be checked against the rendered partials, not just the view).
   Known competitors are named per class below. */
.eCSSCore {
    /* Named in the plural deliberately: this is a HOST class, not an .--eForm modifier. It goes on whatever
       element WRAPS the cards and does nothing to that element itself; it only supplies inherited values
       that DESCENDANT .--eForm elements read through @supports (core/eForm.css:31-32, consumed :69 and :75).
       That wrapper is usually the <form> tag, which carries no --eForm class, but it need not be — among the
       carriers, one is a row (Views/Election/ElectionList.cshtml:11, `section.--eRow`), which is equally
       valid: the selector requires no companion token, only that the cards are inside.
       Putting it on a .--eForm would change that card's own height instead, which is a different intent —
       that case is --eFormHeightAuto below.
       Pages/BoardDashboardV2.css:20-21 sets the same pair in CSS, but on the card itself
       (`.board-dash .--eForm`), so it is a precedent for the values, not for this scoping. */
    & .--eFormsHeightAuto {
        --eFormHChrome: auto;
        --eFormHFireFox: auto;
    }

    /* 20px is var(--spacing-2xl) (eRoot/eRoot.css:141); the views wrote both spellings for the same value. */
    & .--eForm.--eFormGapBelow {
        --eFormMargin: 0 0 var(--spacing-2xl) 0;
    }

    /* --eTitleAlIt is the handle name as the core spells it (core/eForm.css:122) — mind the capital I and
       the missing "gn". Unlike --eBlockAling / --eBlockContentAling there is no canonical alias here: no
       --eTitleAlign exists anywhere in the project, so this is simply the name, not a legacy fallback.
       (The "Canonical vs legacy alias" note in eCSSCore/README.md covers only the two eBlock handles and
       does not apply to .--eTitle.) */
    & .--eTitle.--eTitleFlush {
        --eTitleAlIt: start;
        --eTitlePaddingB: 0;
    }

    /* Competitors, both in the later `controls` layer, both of which beat this class wherever they match —
       and the second beats the inline form too, being !important:
         eControls/eDropUpload.css:324    --eBlockGap: 4px  — full selector is
                                          `.eControls .ai-eUpload__wrapper .eDropUpload .--eBlock` (0,4,0),
                                          i.e. NOT every .eDropUpload .--eBlock (the rule is nested inside
                                          eDropUpload.css:226)
         eControls/eListViewToggle.css:11 --eBlockDirection: row !important on .view-toggle-buttons
       Also Pages/Dashboard.css:375 and Pages/LiteGridDashboard.css:174 (--eBlockDirection, layer `project`,
       dashboard-scoped). */
    & .--eBlock.--eBlockStack {
        --eBlockDirection: column;
        --eBlockGap: var(--spacing-2xl);
    }

    /* Switches every descendant .--eProperty from the core's flexible `1fr` track to a rigid `100%` one
       (core/eForm.css:267, and the 576px chain in this file). `1fr` means minmax(auto, 1fr), so it carries a
       min-content floor; `100%` does not. The two therefore differ ONLY when content overflows — the core
       sets min-width:0 on .--eRow children but not on .--eProperty ones. */
    & .--eProperties.--ePropsFull {
        --eProperty: 100%;
    }

    & .--eProperty.--ePropertyFlush {
        --ePropertyGap: 0;
    }

    /* ---- eForm page-role classes -------------------------------------------------------------------
       The four below are composites: one class per recurring page role rather than one per handle. That
       is allowed here and NOT in the row family, because every eForm handle they set is read by the same
       selector at any depth (core/eForm.css) — none of them has a *Sub counterpart, so none can go
       half-inert the way --eRowBottom does on a nested row.

       Competitor covering the whole group: eControls/eWindow.css:31 sets --eFormBorderR: 0 !important on
       cards inside an eWindow. Being !important it outranked the inline these classes replace just as it
       outranks the classes, so it is parity, not a regression — listed here because "known competitors are
       named per class" should not have a gap. */

    /* The standalone card: bordered, rounded, gutter-inset, no internal gap, on `div.--eForm`. */
    & .--eForm.--eFormCard {
        --eFormBorderColor: var(--gray-200);
        --eFormBorderR: var(--radius-lg);
        --eFormBorderW: 1px;
        --eFormGap: 0;
        --eFormMargin: 0 var(--spacing-md);
        --eFormPadding: var(--spacing-2xl) var(--spacing-3xl);
        --eFormW: auto;
    }

    /* Same inset geometry as --eFormCard but border-only, letting the card size itself off the gutter
       rather than off `auto`. Kept separate from --eFormCard rather than factored into a
       shared base: the two sets overlap on three handles but disagree on --eFormW, and a shared base would
       have to be applied together with its variant to mean anything. */
    & .--eForm.--eFormCardInset {
        --eFormBorderColor: var(--gray-200);
        --eFormBorderW: 1px;
        --eFormMargin: 0 var(--spacing-md);
        --eFormW: calc(100% - 16px);
    }

    /* The grey footer panel closing a card — bottom corners rounded, top ones square, always
       on `div.--eForm.--ePanel`, hence the compound selector: .--ePanel has no rule of its own in the core
       (it is a marker token), so requiring it here is what keeps this class off plain cards.

       This class CORRECTS two things rather than only relocating declarations, both on the owner's
       ruling of 2026-08-18, and both declared to the acceptance run instead of passing as equivalent:
         * 14 carriers omitted --eFormHChrome: auto. A panel foot without it is a markup defect, so the
           class supplies it — the panel stops stretching in Chrome.
         * 8 carriers declared --eFormBg: var(--gray-25). That is an error; the panel is gray-50. Only
           that one wrong value is corrected: any other --eFormBg keeps the class off the element, so a
           legitimate lighter variant could never be repainted by accident. */
    & .--eForm.--ePanel.--eFormPanelFoot {
        --eFormBg: var(--gray-50);
        --eFormBorderR: 0 0 var(--radius-2xl) var(--radius-2xl);
        --eFormHChrome: auto;
        --eFormPadding: var(--spacing-xl) var(--spacing-3xl);
    }

    /* The scrollable body of a dialog-style card, on `div.--eForm.--eFormScroll`.
       Competitor: Views/Shared/_BasePreviewPartial.cshtml:48,50 sets --eFormBorderR and --eFormPadding on
       `.preview__min > #previewWrapper .--eForm` with !important, so it outranks this class — and equally
       outranked the inline this class replaces, so the move changes nothing there. */
    & .--eForm.--eFormScroll.--eFormScrollBody {
        --eFormBorderColor: transparent;
        --eFormBorderR: 0 0 var(--radius-2xl) var(--radius-2xl);
        --eFormPadding: var(--spacing-2xl) var(--spacing-3xl) var(--spacing-2xl) var(--spacing-3xl);
    }

    /* Deliberately NOT the same class as --eFormsHeightAuto above, despite identical declarations.
       --eFormsHeightAuto is a HOST class for the wrapping element, which supplies these values to descendant
       cards by inheritance; this one sits on the card itself and changes that card's own height. Same
       declarations, different element, different intent — and every carrier of this one is a
       `div.--eForm`. Merging them would make the host class's own comment false. */
    & .--eForm.--eFormHeightAuto {
        --eFormHChrome: auto;
        --eFormHFireFox: auto;
    }

    /* ---- eTitle ------------------------------------------------------------------------------------ */

    /* Section heading with a rule under it, on `div.--eTitle`. 20px is var(--spacing-2xl)
       (eRoot/eRoot.css:141); the views wrote the literal. */
    & .--eTitle.--eTitleRuled {
        --eTitleAlIt: start;
        --eTitleBorderB: 1px solid var(--gray-200);
        --eTitleMarginB: 0;
        --eTitlePaddingB: var(--spacing-2xl);
    }

    /* Heading stripped of both its bottom spacings. Note this is NOT --eTitleFlush plus
       --eTitleTight: --eTitleFlush sets --eTitleAlIt, this one does not, and the two therefore land on
       different elements. The three-handle combination gets its own class below rather than being stacked,
       so that no element ends up carrying two classes that both own --eTitlePaddingB. */
    & .--eTitle.--eTitleTight {
        --eTitleMarginB: 0;
        --eTitlePaddingB: 0;
    }

    /* --eTitleFlush and --eTitleTight together, as one token. 8 sites. */
    & .--eTitle.--eTitleFlushTight {
        --eTitleAlIt: start;
        --eTitleMarginB: 0;
        --eTitlePaddingB: 0;
    }

    /* Heading laid out as a row — title and its trailing controls on one line, on
       `section.--eTitle`. */
    & .--eTitle.--eTitleInline {
        --eTitleGap: var(--spacing-md);
        --eTitleJC: start;
    }

    /* ---- eBlock ------------------------------------------------------------------------------------
       Competitors for this family, all of which also outranked the inline these replace except where
       noted: eControls/eListViewCard.css:118,196,234 (--eBlockJC, !important),
       eControls/eListViewToggle.css:11 (--eBlockDirection, !important),
       Pages/Dashboard.css:375 and Pages/LiteGridDashboard.css:174 (--eBlockDirection, normal, layer
       `project`, dashboard-scoped), eControls/eDropUpload.css:324 (--eBlockGap, NORMAL, layer `controls`).
       That last one is the only true regression risk in the family: normal in a later layer, so it beats a
       class here while losing to an inline. Its selector needs the eDropUpload widget, so the rollout skips
       --eBlockGap in any view whose text mentions eUpload/eDropUpload rather than trying to resolve partial
       composition statically. */

    /* Label-over-value stack — the dominant cell layout on list pages. Applied to fewer elements than
       carry the inline pattern, because --eBlockGap is skipped in any view containing the eDropUpload
       widget (see the competitor note above). */
    & .--eBlock.--eBlockStackTight {
        --eBlockAling: start;
        --eBlockDirection: column;
        --eBlockGap: var(--spacing-xs);
    }

    /* Full-width block distributing its children evenly. 54 sites. */
    & .--eBlock.--eBlockSpread {
        --eBlockJC: space-evenly;
        --eBlockW: 100%;
    }

    /* --eBlockStack with the wider 3xl gap. 14 sites. */
    & .--eBlock.--eBlockStackWide {
        --eBlockDirection: column;
        --eBlockGap: var(--spacing-3xl);
    }

    /* ---- eProperties / eProperty -------------------------------------------------------------------- */

    /* Property list laid out inline, on `div.--eProperties.--eAdaptiveLine`; the
       selector does not require --eAdaptiveLine because --ePropertiesFD and --ePropertiesGap are read
       unconditionally (core/eForm.css), unlike --ePropertyMarginBottom. */
    & .--eProperties.--ePropsInline {
        --ePropertiesFD: row;
        --ePropertiesGap: 12px;
    }

    /* NOTE, so the next person does not re-add it: a `--ePropsFullMB24` class pairing --eProperty: 100%
       with --ePropertyMarginBottom: 24px was written and then withdrawn. --ePropertyMarginBottom is read
       ONLY under `.--eAdaptiveLine` (core/eForm.css:245-259), and not one of the 22 carriers of that inline
       pair has the token — so half the class was inert at every site it would ever have. Those 22 elements
       now carry plain --ePropsFull and the dead declaration is gone, which is how the same handle was
       already treated in the LinkEdit pilot. A genuinely --eAdaptiveLine-scoped variant would be a
       different class with `.--eAdaptiveLine` in its selector. */

    /* Tight bottom padding on a single property. 21 sites on `div.--eProperty`. */
    & .--eProperty.--ePropertyPadTight {
        --ePropertyPadding: 0 0 4px 0;
    }

    /* ---- eFilter ------------------------------------------------------------------------------------
       --eFilterPadTop used to live here, replacing an inline --eFilterPaddingT on 67 carriers. It is
       gone: the value is now the portal default, declared on `.--eForm .--eFilter` in the eFilter
       section near the top of this file. A class was the wrong tool once every carrier in the tree
       wanted the same value — the default expresses that in one place instead of 67 tokens. */

    /* ================================================================================================
       Second rollout wave — the same three rules as above apply, plus one learned here:

       A composite (>= 2 declarations) is applied ONLY where the element's whole eCSSCore set is this
       class's set; a single-declaration class is applied wherever its declaration appears. An atomic
       class's name IS its declaration and cannot lie however far it spreads, while a composite's name
       claims a ROLE — and that claim is false on an element whose remaining handles define a different
       one. Exact matching also shrinks the blast radius of any competitor the audit missed, because the
       style attribute disappears completely rather than leaving a half-converted element behind.

       Views/Dashboard/** is deliberately NOT converted. _WhatsNewBlock.cshtml declares, in @layer
       project, a bare `.--eForm { container: eForm / inline-size; @container (max-width: 380px) {
       & .--eBlock:not(.whats__setting) { --eBlockDirection: row } } }` — anchored to nothing, so it
       reaches every card on the page, and GridStackDashboard composes blocks through
       Component.InvokeAsync(block.BlockTypeName) with a runtime string. No static guard can see that
       pairing, so the directory is excluded rather than guarded.
       ============================================================================================= */

    /* Filter popup body: the scroll area that sits above a footer panel, hence padding-bottom 0.
       On `div.--eForm.--eFormScroll`. Distinct from --eFormScrollBody above, which pads the
       bottom; the views wrote this one with two different amounts of whitespace inside --eFormPadding,
       which is the same declaration to CSS and one cluster here. */
    & .--eForm.--eFormScroll.--eFormScrollBodyFlush {
        --eFormBorderColor: transparent;
        --eFormBorderR: 0 0 var(--radius-2xl) var(--radius-2xl);
        --eFormPadding: var(--spacing-2xl) var(--spacing-3xl) 0 var(--spacing-3xl);
    }

    /* Square-cornered scroll body; the selector does not require --eFormScroll because one
       carrier is a plain .--eForm. */
    & .--eForm.--eFormScrollPlain {
        --eFormBorderColor: transparent;
        --eFormBorderR: 0;
        --eFormPadding: var(--spacing-2xl) var(--spacing-3xl);
    }

    /* Footer of a read-only view card: bottom corners rounded, top border dropped so it butts against
       the section above, on `div.--eForm.eView`.
       The views wrote `0 0 8px 8px`; that is var(--radius-md), NOT var(--spacing-md) — the two scales
       collide at 8px (eRoot/eRoot.css:126 and :138) and this handle is a radius. */
    & .--eForm.--eFormViewFoot {
        --eFormBorderR: 0 0 var(--radius-md) var(--radius-md);
        --eFormBorderW: 0 1px 1px 1px;
    }

    /* Heading with bottom padding but no rule. */
    & .--eTitle.--eTitleSpaced {
        --eTitleAlIt: start;
        --eTitleMarginB: 0;
        --eTitlePaddingB: var(--spacing-2xl);
    }

    /* Ruled heading, tighter than --eTitleRuled and without the alignment override. */
    & .--eTitle.--eTitleRuledTight {
        --eTitleBorderB: 1px solid var(--gray-200);
        --eTitlePaddingB: var(--spacing-lg);
    }

    /* Ruled heading at the xl step. Its cluster was the same size as --eTitleRuledTight's, which is why
       both exist: taking one and leaving the other would have been an arbitrary cut. */
    & .--eTitle.--eTitleRuledXl {
        --eTitleBorderB: 1px solid var(--gray-200);
        --eTitleMarginB: 0;
        --eTitlePaddingB: var(--spacing-xl);
    }

    /* Row of controls packed to the start. */
    & .--eBlock.--eBlockRowStart {
        --eBlockDirection: row;
        --eBlockJC: flex-start;
    }

    /* Row with the small gap. Carries --eBlockGap, so the rollout skips it in any view whose
       markup mentions the eDropUpload widget — eControls/eDropUpload.css:324 declares that handle
       normally in the later `controls` layer and would beat this class while losing to an inline. */
    & .--eBlock.--eBlockRowTight {
        --eBlockDirection: row;
        --eBlockGap: var(--spacing-sm);
        --eBlockJC: start;
    }

    /* Full-width column. */
    & .--eBlock.--eBlockStackFull {
        --eBlockDirection: column;
        --eBlockW: 100%;
    }

    /* Row with its two ends pushed apart. */
    & .--eBlock.--eBlockSplit {
        --eBlockDirection: row;
        --eBlockJC: space-between;
    }

    /* The lg gap on a property list. Atomic, so it applies wherever the declaration appears, which gives
       it the widest reach of any class here. Written as the token; some carriers spell it 12px, which
       is the same value (eRoot/eRoot.css:139). */
    & .--eProperties.--ePropsGapLg {
        --ePropertiesGap: var(--spacing-lg);
    }

    /* Inline property list using the PER-PROPERTY gap handle. Note the handle differs from
       --ePropsInline above by one letter of scope: --ePropertyGap (core/eForm.css:247,268) is read on
       the property, --ePropertiesGap (core/eForm.css:222) on the list. Same declaration count, so the
       catalogue gives this one an explicit priority rather than letting file order decide. */
    & .--eProperties.--ePropsInlineTight {
        --ePropertiesFD: row;
        --ePropertyGap: var(--spacing-lg);
    }

    /* Two-column property list with a hairline rule under each row. Owns --ePropertiesGap as well, and
       having four declarations it is matched before --ePropsGapLg, which then finds the handle already
       taken. One matching element does NOT get it — Views/Event/EventView.cshtml:421 — because that
       file declares --ePropertyBorderW in its own <style> block and the competitor guard is per file
       rather than per selector. Deliberately conservative: the guard errs towards leaving inline alone. */
    & .--eProperties.--ePropsRuledRow {
        --ePropertiesGap: var(--spacing-lg);
        --eProperty: 1fr 100px;
        --ePropertyBorderColor: var(--gray-300);
        --ePropertyBorderW: 0px 0px .1px 0px;
    }

    /* The three below are read ONLY inside `.eCSSCore .--eProperties .--eProperty`
       (core/eForm.css:268-276), so a carrier outside a property list would take an inert class. Measured
       before the rollout: every carrier in scope was inside one, none outside — and the applier re-checks
       the ancestor per site rather than trusting that measurement. */
    & .--eProperty.--ePropertyPadBottom {
        --ePropertyPadding: 0 0 var(--spacing-3xl) 0;
    }

    & .--eProperty.--ePropertyBorderless {
        --ePropertyBorderW: 0;
    }

    & .--eProperty.--ePropertyMB20 {
        --ePropertyMB: var(--spacing-2xl);
    }

    /* Label with its bottom margin removed. --eLabelMarginB is read twice with different
       defaults — core/eForm.css:291 for `.--eLabel` (var(--spacing-sm)) and :301 for `.--eSubLabel`
       (var(--spacing-xs)) — and eControls/eControls.css:14 READS it too. Requiring the --eLabel token
       keeps this off the two odd carriers (a `label.eCheckBox` and a `p.--eSubLabel`), which stay
       inline rather than take a class whose name would not describe them. */
    & .--eLabel.--eLabelFlush {
        --eLabelMarginB: 0;
    }

    /* ================================================================================================
       Third wave — Views/Dashboard/**, which the first two waves excluded.

       The exclusion was replaced by a COMPOSITION ZONE rule rather than lifted. Dashboard blocks are
       instantiated from a runtime string (GridStackDashboard.cshtml:250,
       Component.InvokeAsync(block.BlockTypeName)), so which blocks share a page is a user setting, not
       a fact in the source. Inside such a zone a <style> rule anchored to nothing does not just affect
       its own file — it reaches every matching element on the composed page. So the handle of every
       unanchored declaration found anywhere in the zone is blocked across the whole zone.

       Measured: the zone holds exactly ONE such declaration —
       _WhatsNewBlock.cshtml:38-56, a bare `.--eForm` with a 380px container query setting
       `--eBlockDirection: row` on any `.--eBlock:not(.whats__setting)`. So `--eBlockDirection` is
       blocked zone-wide and nothing else is; the attributes carrying it stay inline.

       Two things the zone taught that apply everywhere:
         * A competitor need not be in a LATER layer. eForm.eunify.css:42-45 above sits in `overrides`
           like the modifiers do, but `.eCSSCore .--eForm .--eFilter > .--eBlock:first-child` is (0,5,0)
           — `:first-child` counts in the class column, Selectors 4 §15 — against a modifier's (0,3,0),
           so it beats the class and still loses to an inline. The applier
           now blocks --eBlockDirection / --eBlockAling on exactly that element shape.
         * A row that looks top-level in its own partial is nested once composed: the grid sits inside
           the page's own `<section class="--eRow">`, so rows inside DashboardBlocks/ read
           --eRowBottomSub / --eGapSub and the depth-sensitive classes are skipped there.
       ============================================================================================= */

    /* Heading padded at the xl step, no rule. Atomic, so it also picks up carriers outside the zone. */
    & .--eTitle.--eTitlePadXl {
        --eTitlePaddingB: var(--spacing-xl);
    }

    /* The `.--eForm` counterpart of --eRowBoxed, whose selector requires --eRow and therefore never
       matched a card. Same two declarations; no element carries both class names, and the rollout
       tooling will not co-apply them, so the pair cannot race. */
    & .--eForm.--eFormBoxed {
        --eFormBorderColor: var(--gray-200);
        --eFormBorderW: 1px;
    }

    /* The footer strip closing a list page — it holds the pager and the empty-state block, which is why
       it is named for the region and not for the pager alone.

       --eFormBg: var(--white) looks redundant, because it IS the core's own default
       (core/eForm.css:18; --eFormBgDefault is set nowhere in the project). It is not redundant: every
       carrier sits inside a `div.--eForm.--eCards` that declares `--eFormBg: transparent` and
       `--eFormBorderR: var(--radius-lg) var(--radius-lg) 0 0` (e.g. AnnouncementList.cshtml:170), and
       custom properties inherit. This declaration exists to overrule that inheritance. Delete it as
       "same as default" and the footer turns transparent.

       --eFormBorderR is the ONE place this class does not reproduce the markup. The views declared
       var(--radius-md) — all four corners rounded — under a container rounded `lg lg 0 0`, so the two
       halves did not close into one card and the seam showed. Owner's decision, 2026-08-18: the footer
       is `0 0 lg lg`. This is a deliberate visual change on 7 pages, not a refactor side effect, and
       the acceptance run declares it explicitly rather than letting it pass as equivalent.

       Overlaps --eFormCard on seven handles, six of which carry identical values; the radius differs
       and --eFormBg belongs to this class alone. No carrier holds both class names — checked, and the
       rollout tooling refuses to co-apply them — so the two never race despite equal specificity in
       one layer. */
    & .--eForm.--eFormListFoot {
        --eFormPadding: var(--spacing-2xl) var(--spacing-3xl);
        --eFormGap: 0;
        --eFormBorderColor: var(--gray-200);
        --eFormBorderW: 1px;
        --eFormMargin: 0 var(--spacing-md);
        --eFormW: auto;
        --eFormBg: var(--white);
        --eFormBorderR: 0 0 var(--radius-lg) var(--radius-lg);
    }

    /* Pill-shaped centred block. Every carrier is a dashboard "Show all ..." link container
       (#annShowAllContainer, #electionShowAllContainer, #eventShowAllContainer, #linkShowAllContainer,
       #surveyShowAllContainer, #collectorBlockShowAll). */
    & .--eBlock.--eBlockPill {
        --eBlockBorderR: var(--radius-xl);
        --eBlockJC: center;
    }

    /* Property list with the lg gap and a left indent on each property. --ePropertyPadding is set on
       the LIST and reaches the properties by inheritance; both handles share the same reach, so this
       composite cannot go half-inert. */
    & .--eProperties.--ePropsIndent {
        --ePropertiesGap: var(--spacing-lg);
        --ePropertyPadding: 0 0 0 var(--spacing-lg);
    }

    /* NOT added, so nobody re-proposes them:
       --eTitleSplit (--eTitleJC: space-between + --eTitleMarginB: 0 + --eTitlePaddingB: 0) would have
         been half-inert: core/eForm.css:123 resolves --eTitleJC to `space-between` already, and
         --eTitleJCDefault is set nowhere in the project, so that third declaration changes nothing.
         Strip it and the class is identical to --eTitleTight above. Its carriers keep their inline
         rather than gain a duplicate class or lose a declaration this rollout cannot prove is
         removable — an ancestor could in principle inherit a different --eTitleJC in future.
       --eFlexCenter (--eFlexJC: center) is deferred on placement, not on merit. The handle IS a core
         one — read at core/eForm.css:248/255 and :339/346 under `.--eAdaptiveLine`, and again at
         site.css:97 — but every carrier of this value is a `.--eFlex`, and that class is defined in
         site.css, not in eCSSCore. Whether a modifier for a site.css component belongs in
         eCSSCore/extensions/ is the same open question as --eButtonW and --eTabStripItems, and the
         same owner decision. */
}

/* SECTION: WORKAROUND — cyclic --_eFormPadding / --_eFormMaxWidth / --_ePropertiesW in core/eForm.css.
   REMOVE once css_core is fixed and re-synced; see SYNC.md.

   The core declares, inside @media, a variable whose own fallback chain ends in that same variable:

       core/eForm.css:22   --_eFormPadding: var(--eFormPadding, ... );
       core/eForm.css:34   --_eFormPaddingMediaTablet: var(--eFormPaddingMediaTablet,
                               var(--eformpaddingmediatablet,
                               var(--eFormPaddingMediaTabletDefault, var(--_eFormPadding))));
       core/eForm.css:111  @media (max-width: 768px) { --_eFormPadding: var(--_eFormPaddingMediaTablet); }

   Per css-variables-1 "Resolving Dependency Cycles" a var() reference counts as a dependency edge
   even when it sits in a fallback, so below 768px both properties are invalid at computed-value
   time and `padding: var(--_eFormPadding)` falls back to unset — i.e. no padding at all. Same for
   --_eFormMaxWidth and, on .--eProperties, --_ePropertiesW (which the anonymous pages drive through
   --ePropertiesW / --ePropertiesWMediaMobile).

   Redeclaring the same variables here breaks the cycle: the chains below reference only public
   handles, never a --_* one. Specificity matches the core's (0,2,0) and this file loads after it,
   so these win. The core's own --_*MediaTablet / --_*MediaMob declarations still point back at the
   base variable, but that edge is now one-way and harmless.

   The public API is preserved, including the lowercase aliases the core accepts, and with none of
   the handles set the value equals the non-media one — which is exactly what the replaced
   css/eForm/eForm.css did (it had no @media on .--eForm at all, and its .--eProperties tablet block
   wrote to a misspelled name that nothing ever read). */
@media (max-width: 768px) {
    .eCSSCore .--eForm {
        --_eFormPadding:  var(--eFormPaddingMediaTablet,  var(--eformpaddingmediatablet,  var(--eFormPadding,  var(--eformpadding,  var(--eFormPaddingDefault,  var(--spacing-3xl))))));
        --_eFormMaxWidth: var(--eFormMaxWidthMediaTablet, var(--eformmaxwidthmediatablet, var(--eFormMaxWidth, var(--eformmaxwidth, var(--eFormMaxWidthDefault, 100%)))));
    }

    .eCSSCore .--eProperties {
        --_ePropertiesW: var(--ePropertiesWMediaTablet, var(--epropertieswmediatablet, var(--ePropertiesW, var(--epropertiesw, var(--ePropertiesWDefault, 100%)))));
    }
}

@media (max-width: 576px) {
    .eCSSCore .--eForm {
        --_eFormPadding:  var(--eFormPaddingMediaMob,  var(--eformpaddingmediamob,  var(--eFormPaddingMediaTablet,  var(--eformpaddingmediatablet,  var(--eFormPadding,  var(--eformpadding,  var(--eFormPaddingDefault,  var(--spacing-3xl))))))));
        --_eFormMaxWidth: var(--eFormMaxWidthMediaMob, var(--eformmaxwidthmediamob, var(--eFormMaxWidthMediaTablet, var(--eformmaxwidthmediatablet, var(--eFormMaxWidth, var(--eformmaxwidth, var(--eFormMaxWidthDefault, 100%)))))));
    }

    .eCSSCore .--eProperties {
        --_ePropertiesW: var(--ePropertiesWMediaMobile, var(--epropertieswmediamobile, var(--ePropertiesWMediaTablet, var(--epropertieswmediatablet, var(--ePropertiesW, var(--epropertiesw, var(--ePropertiesWDefault, 100%)))))));
    }
}

/* ---- /css/eCSSCore/extensions/eGrid.eunify.css ---- */
/* eGrid — eUnify project extensions over eCSSCore core. Load AFTER core/eGrid.css. */

/* SECTION: @property registration — required for --eCols animation/transition support */
@property --eCols {
    syntax: "*";
    initial-value: 100%;
    inherits: false;
}

/* SECTION: eRow — hide-aware odd-span selectors (not in core, which only has :last-child:nth-child(odd)) */
.eCSSCore .--eRow {
    & > *:nth-child(odd of :not([style*="display: none"])):nth-last-child(1 of :not([style*="display: none"])) {
        grid-column: var(--eOddSpan, 1 / -1);
    }

    & .--eRow > *:nth-child(odd of :not([style*="display: none"])):nth-last-child(1 of :not([style*="display: none"])) {
        grid-column: var(--eOddSpan, 1 / -1);
    }
}

/* SECTION: eRow max-height — portal uses max-height where core uses max-width.
   The core reads --eRowMaxWidth into `max-width` (core/eGrid.css), the replaced css/eGrid/eGrid.css
   read the same handle into `max-height` and declared no max-width at all. Restoring `none` keeps
   the portal meaning of the handle and drops the constraint the core would otherwise add to every
   row that does not set it. */
.eCSSCore .--eRow {
    max-height: var(--eRowMaxWidth, 100%);
    max-width: none;
}

/* SECTION: portal view modifiers — named classes replacing repeated inline variable sets in the views.

   Cascade cost of the move, and it is a real one: within author-level CSS the inline `style` these replace
   lost only to `!important` (CSS Cascade 5 § 6.1 Cascade Sorting Order — important author declarations rank
   above normal author ones, and inline is merely the tie-break WITHIN normal author; animations and
   important user/UA declarations also outrank it, neither of which this portal uses on these handles).
   A class here is weaker still: it sits in layer(overrides) and loses to any NORMAL declaration in
   `project` (which includes every inline <style> in a view or in a partial it renders), `controls`, `modes`
   or unlayered CSS. Before adding a site, list everyone who declares the same variable — known competitors
   are named per class below.

   One class = one scope. Do not merge variables with different reach into a single class: a class that is
   half-inert wherever it is applied cannot be diagnosed from the markup.

   Before DELETING a declaration as dead, check its reader in the rendered PARTIALS too, not just in the
   view — these variables inherit, so the reader can live in a partial. Example: --ePropertyMarginBottom is
   read only under `.--eAdaptiveLine` (core/eForm.css:245-259), which appears in 81 tracked .cshtml files
   (74 views + 7 partials, measured 08/17) — absent from one page proves nothing about the next. */
.eCSSCore {
    /* TOP-LEVEL ROWS ONLY, for both row classes below: --eRowBottom and --eGap are read by
       `.eCSSCore .--eRow` (core/eGrid.css:4-5), but a NESTED row takes its margin and gap from
       --eRowBottomSub / --eGapSub instead (core/eGrid.css:35-41, specificity (0,3,0), same layer), so on a
       nested row these classes are silently no-ops. */
    /* Covers the top-level row only, NOT the nested rows under it: those read --eRowBottomSub. 9 inline
       sites in 4 files set both handles together (e.g. Views/PortalPerson/AccountInfo.cshtml:120,
       Views/Dashboard/DashboardBlocks/_AccountInfoBlock.cshtml:178, measured 08/17) — there this class
       replaces half the declaration and the --eRowBottomSub part has to stay. */
    & .--eRow.--eRowFlush {
        --eRowBottom: 0;
    }

    /* Separate from --eRowFlush on purpose: `--eRowBottom: 0` WITHOUT a gap override in the same attribute
       is the dominant inline pattern in the views — 110 style attributes across 50 tracked .cshtml files,
       measured 08/17 — and merging the two classes would silently move every one of those rows from the
       core's 24px default (core/eGrid.css:4, --eGapDefault) to 20px. */
    & .--eRow.--eRowGapTight {
        --eGap: var(--spacing-2xl);
    }

    /* Any depth. These are eForm handles (core/eForm.css:25-26) set on the ROW so that descendant .--eForm
       cards inherit them — custom properties inherit, the row itself has no border. */
    & .--eRow.--eRowBoxed {
        --eFormBorderColor: var(--gray-200);
        --eFormBorderW: 1px;
    }

    /* Observable only above 1280px: below that core/eGrid.css:61-71 hard-sets grid-template-columns from
       --_eColsMediaTablet — which nothing in this project defines, so every row becomes a single 100%
       column — and also imposes grid-template-areas of four named areas (core/eGrid.css:65-69).
       Competing declarations: Pages/Dashboard.css:367 and Pages/LiteGridDashboard.css:166 set
       `--eCols: 1fr !important` (layer `project`), which outranks both this class and the inline form it
       replaces. They only reach a row when their own selector matches it directly: --eCols is registered
       `inherits: false` (see the @property block at the top of this file), so it never arrives by
       inheritance from an ancestor. */
    & .--eRow.--eCols2 {
        --eCols: 1fr 1fr;
    }

    /* --eCols: 1fr is NOT the same as omitting --eCols, and this class exists because that is easy to get
       wrong. The @property block at the top of this file registers --eCols with `initial-value: 100%`, so a
       row that declares nothing still HAS a value for it; the fallback chain in core/eGrid.css:3
       (`var(--eCols, var(--ecols, var(--eColsDefault, 1fr)))`) therefore never reaches its 1fr tail. That is
       also why --eColsDefault is dead project-wide. Dropping an inline `--eCols: 1fr` as "the default"
       silently switches grid-template-columns from 1fr to 100% above 1280px.
       Same viewport caveat and the same Dashboard/LiteGridDashboard competitors as --eCols2 above. */
    & .--eRow.--eCols1 {
        --eCols: 1fr;
    }

    /* The asymmetric content/aside row. Named for the proportion rather than a column count, unlike
       --eCols1 / --eCols2 which name how many equal columns there are.
       Same viewport caveat as those two: observable ONLY above 1280px, because below it
       core/eGrid.css:61-71 hard-sets grid-template-columns from --_eColsMediaTablet at any depth.
       Depth-insensitive otherwise — --eCols is read by `.eCSSCore .--eRow` (core/eGrid.css:3), which a
       nested row matches too; only --eRowBottom and --eGap switch to their *Sub twins when nested.
       Competitors, checked rather than assumed: Pages/Dashboard.css:367 and
       Pages/LiteGridDashboard.css:166 set `--eCols: 1fr !important`, but on `.--eContainer`, not on
       `.--eRow`, and --eCols is registered `inherits: false` (the @property block at the top of this
       file) so it cannot arrive from an ancestor either. core/eContainers.css:30 writes --eCols inside
       a container query but sits in layer `core`, which loses to `overrides`. None of the carriers
       declares --eCols in its own <style>. */
    & .--eRow.--eCols3to1 {
        --eCols: 3fr 1fr;
    }

    /* The list page's main row, as one class rather than four — the ONE composite in the row family.
       Justified by measurement, not by taste: every carrier is a depth-0 `<section class="--eRow">`, so
       the "half-inert composite" failure that --eRowFlush / --eRowGapTight are kept apart for has zero
       instances here. Depth-0 is what matters; a couple of carriers do take a further modifier
       (BoardReportReview/BoardReportReviewList.cshtml:8 adds --eRowBoxed,
       Election/ElectionList.cshtml:11 adds --eFormsHeightAuto), and that is fine — those classes own
       disjoint handles. The inline sets this replaced wrote --eGap as 20px in most cases and
       var(--spacing-2xl) in the rest; the two are the same value, eRoot/eRoot.css:141.
       MeetingPacketList uses 8px and is deliberately not converted.

       Do NOT put this on a nested row: --eRowBottom and --eGap would go inert there while --eCols and
       --eRowMaxWidth stayed live, which is exactly the undiagnosable half-effect the rule above warns about.
       Converting the whole set at once also empties the style attribute, so the row keeps no residual
       `style` text for the `:not([style*="display: none"])` selectors at the top of this file to read. */
    & .--eRow.--eRowListHeader {
        --eCols: 1fr;
        --eGap: var(--spacing-2xl);
        --eRowBottom: 0;
        --eRowMaxWidth: none;
    }
}

}

@layer project {

/* ---- /css/eUI/eUI.css ---- */
/* ----------  Sidebar  ---------- */
.eUI .sidebar {
    position: relative;
    /*max-width: 300px;*/
    width: 290px;
    /*min-width: 280px;*/
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    transition: margin .3s ease, width .3s ease;
    margin: 8px;
    overflow: hidden;

    &.collapsed {
        width: 74px;
        min-width: 74px;
    }
}
/* =========================================================
    SIDEBAR NAVIGATION
========================================================= */
.eUI .brand {
    padding: var(--spacing-3xl) var(--spacing-2xl) 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-600);

    & > div.sidebar__logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding-bottom: var(--spacing-lg);
        border-bottom: 2px solid var(--brand-600);
        box-sizing: border-box;
        cursor: pointer;
    }

    & img {
        max-height: 80px;
        max-width: 100%;
        object-fit: contain;
    }

    & .sidebar__logo img {
        max-height: 80px;
        max-width: 100%;
        object-fit: contain;
    }
}

.eUI .--eMenu {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;

    .--eNav {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .--eBlockDown {
        flex-shrink: 0;
        border-top: 1px solid var(--brand-300);
        margin: 8px 0;
        padding-top: 12px
    }
}

/* Portal Settings Link (Manage Site) */
.eUI .portal-settings-link {
    display: flex;
    align-items: center;
    gap: 0;
    text-decoration: none;
    color: var(--gray-500);
    font-size: 11px;
    font-weight: 500;
    padding: 4px 6px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    overflow: hidden;

    &:hover {
        color: var(--brand-600);
        background-color: rgba(0, 123, 255, 0.08);
    }

    &:hover svg {
        transform: rotate(90deg);
    }

    svg {
        transition: transform 0.3s ease;
        flex-shrink: 0;
    }

    .settings-label {
        max-width: 0;
        opacity: 0;
        white-space: nowrap;
        overflow: hidden;
        transition: max-width 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
        margin-right: 0;
    }

    &:hover .settings-label {
        max-width: 80px;
        opacity: 1;
        margin-right: 6px;
    }
}

.eUI .toggle--sidebar {
    padding: 0;
}

.eUI nav[role="navigation"] {
    flex: 1;
}

.eUI .nav-link,
.eUI .submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: var(--navLinkW, 100%);
    padding: 10px 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;

    &:hover {
        background: var(--gray-100);
    }

    & .setting__item {
        display: flex;
        text-align: center;
        align-items: center;
        gap: 8px;
    }
}

/* Compact sidebar */
.eUI .sidebar.collapsed .nav-label {
    display: none;
}

.eUI .sidebar.collapsed .nav-link,
.eUI .sidebar.collapsed .submenu-toggle {
    justify-content: center;
}

/* Sub‑menu */
.eUI .submenu {
    list-style: none;
    padding-left: 28px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;

    &.show {
        max-height: 500px;
    }

    & .nav-link {
        font-size: 13px;
        padding: 8px 16px;
    }
}

.eUI .account {
    margin: 8px 16px;
}

.eUI .--eBlockDown {
    & .nav-label {
        color: var(--gray-700);
        font-size: 14px;
        font-weight: 600;
        min-width: 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
    }

    & .account__user {
        display: flex;
        gap: 12px;
    }
}

.eUI .account__wrapper {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: 12px;
    width: 100%;

    @supports (width: -webkit-fill-available) {
        & {
            width: -webkit-fill-available;
        }
    }

    @supports (width: -moz-available) {
        & {
            width: -moz-available;
        }
    }

    & .nav-label {
        color: var(--gray-700);
        font-size: 16px;
        font-weight: 600;
        min-width: 0;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        text-decoration: none;
    }

    & .account__user {
        display: flex;
        gap: 12px;
    }
}

.eUI .sidebar.collapsed .account__wrapper {
    & .nav-label {
        display: none;
    }

    & .chevron {
        display: none;
    }
}



.eUI .top__drop-down {
    margin: 8px 16px;
    & p {
        margin-bottom: 0;
    }

    & .wrapper__drop-down {
        padding: 8px;
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-lg);
        width: 100%;

        @supports (width: -webkit-fill-available) {
            & {
                width: -webkit-fill-available;
            }
        }

        @supports (width: -moz-available) {
            & {
                width: -moz-available;
            }
        }
    }
}

.eUI .sidebar.collapsed .top__drop-down {
    display: none;
}

.eUI .form-label.small {
    color: var(--gray-700);  
    font-size: 14px; 
    font-weight: 500;
    margin-bottom: 0 !important;
}

/* =========================================================
    ACCESSIBILITY
========================================================= */
.eUI :focus-visible {
    /*outline: 2px dashed var(--brand-primary);
    outline-offset: 2px;*/
    outline: none;
    outline-offset: 0;
}

/* =========================================================
    PAGINATION
========================================================= */

.eUI .pager {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    font-size: 12px;
    color: var(--gray-600);

    & button:disabled {
        opacity: .35;
        cursor: default;
    }
}

/* =========================================================
    SEARCH
========================================================= */

.eUI .search {
    width: 100%;
    min-width: 350px;
    height: 40px;
    padding: 8px 12px;
    background: var(--white);
    box-shadow: var(--shadow-xs-card);
    border: .1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 8px;

    & .eTextBox {
        height: inherit;
        border: 1px solid transparent !important;
    }

    & .eTextBox .k-input-solid.k-focus {
        border: 1px solid transparent !important;
    }

    &:has( .eTextBox .k-input-solid.k-focus) {
        border: 1px solid var(--brand-600);
    }

    --eTextBoxBorderColor: transparent;

    & input {
        width: 100%;
        border: none;
        border-radius: var(--radius-sm);
    }

        & input:focus-visible,
        & input:focus {
            outline: 0;
            outline-offset: 0;
        }
}
    /* =========================================================
    PANEL SHOW
========================================================= */

.eUI .show__panel {
    position: absolute;
    height: 100vh;
    top: 0;
    left: -100%;
    max-width: 100%;
    width: auto;
    background: transparent;
    z-index: 11;
    transition: left .5s ease;
    overflow-y: hidden;
}

[data-accent="dark"] .eRail {
    & .k-treeview {
        color: var(--gray-600) !important;
    }
}

    /* Kendo Splitter override kept for its only remaining consumer, CommunityMap.cshtml:85 — the
       Documents folder tree no longer uses a Splitter (see the left rail below). */
    .eUI .k-splitter .k-scrollable {
        overflow: hidden !important;
    }

    /* =========================================================
    LEFT RAIL (Documents folder tree)
========================================================= */

    /* An in-flow flex item of .admin, like the sidebar: the rail takes layout space, so
       .content-wrapper (flex: 1 1 0) shrinks by exactly the rail width and no part of the page is
       covered. Replaces the former fixed overlay + Kendo Splitter, whose second pane existed only to
       let clicks through to the page underneath. */
    .eUI .eRail {
        /* The drag bounds and the open width live here and nowhere else: ERailResizer (eDocument.js)
           reads these properties off the rail, so no number has a second copy to keep in sync. */
        --eRailMin: 240px;
        --eRailMaxRatio: .5;
        --eRailDefault: 320px;
        --eRailAnim: .3s ease; /* in step with the sidebar's own margin transition, top of this file */

        position: relative; /* containing block for the resizer pinned to the right edge */
        box-sizing: border-box;
        display: none; /* closed: no layout space, nothing inside is focusable */
        grid-template-rows: auto minmax(0, 1fr); /* head by content, body takes the rest */
        /* closed width, and the value the open transition starts from and returns to */
        flex: 0 0 0;
        min-width: 0;
        max-width: calc(var(--eRailMaxRatio) * 100%);
        padding: var(--spacing-md) 0;
        /* the cards inside have a min-content floor of their own, so they would spill out of the rail
           while it is narrower than that */
        overflow: hidden;
    }

    /* Open state stays in CSS on purpose: two places flip the checkbox programmatically
       (navigateToFolder in eDocument.js and the rail's own close button), and a programmatic .checked
       fires no event a JS-driven class could have listened to. */
    .eUI .admin:has(.folder__view-switch:checked) > .eRail {
        display: grid;
        flex-basis: var(--eRailW, var(--eRailDefault));
        /* the 12px on the right is the splitter's own gutter, so the bar never covers the card */
        padding-right: 12px;
        padding-left: var(--spacing-md);

        /* First frame of the opening transition — without it the box would jump straight to its final
           width. Must stay after the declarations above: same specificity, source order decides. */
        @starting-style {
            flex-basis: 0;
            padding-right: 0;
            padding-left: 0;
        }
    }

    /* The open/close animation. Gated the same way eTextBox.css gates its entrance animation, plus a
       class the script adds one frame after load: without that class the rail would slide in on every
       reload that restores the tree as open, because @starting-style fires on the first style update
       too and the checkbox is restored after the rail has been styled once already (sidebarToggle.js
       solves the same problem for the sidebar the same way).
       Animating `display` needs Chromium 117+ or Safari 18+; Firefox (bugzil.la/2057005, targeted at
       Firefox 155) and Safari 17.5-17.6 open with the animation and close instantly, which is what
       every browser does before this rule. Only the horizontal padding is in the list — padding-top
       differs between the desktop and mobile branches and must not ease across the breakpoint. */
    @media (prefers-reduced-motion: no-preference) {
        .eUI.eRailReady .eRail {
            transition: flex-basis var(--eRailAnim), padding-left var(--eRailAnim),
                        padding-right var(--eRailAnim), display var(--eRailAnim) allow-discrete;
        }

        /* A drag has to be immediate, or every pointer frame eases and the grip feels rubbery. The
           selector carries the open-state context on purpose: that makes it (0,7,0), so it keeps
           winning even if someone adds a transition to the open-state rule above. */
        .eUI.eRailReady .admin:has(.folder__view-switch:checked) > .eRail.is-resizing {
            transition: none;
        }
    }

    /* The splitter: a 12px hit zone filling the rail's right gutter, aligned with the cards */
    .eUI .eRail__resizer {
        position: absolute;
        top: var(--spacing-md);
        bottom: var(--spacing-md);
        right: 0;
        width: 12px;
        cursor: ew-resize;
        touch-action: none; /* the drag is pointer-event driven; never scroll instead */
        background: transparent;
    }

    /* Divider line, always visible. --gray-400 measures 5.1:1 on the light app background and 3.3:1 on
       the dark one; --gray-300 was tried first and is invisible in light (1.4:1). */
    .eUI .eRail__resizer::before {
        content: "";
        position: absolute;
        inset: 0 auto 0 50%;
        width: 1px;
        transform: translateX(-50%);
        background: var(--gray-400);
    }

    /* The grip that says "drag me". It reads through its pill shape and its 6.8:1 contrast against the
       app background, not against the line (only 1.3:1 apart); one token covers both themes because
       the gray scale inverts with the theme. */
    .eUI .eRail__resizer::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 4px;
        height: 24px;
        transform: translate(-50%, -50%);
        border-radius: var(--radius-full);
        background: var(--gray-600);
        transition: background-color .15s ease, height .15s ease;
    }

    .eUI .eRail__resizer:hover::after,
    .eUI .eRail__resizer:focus-visible::after,
    .eUI .eRail.is-resizing .eRail__resizer::after {
        background: var(--gray-700);
        height: 40px;
    }

    .eUI .eRail__resizer:focus-visible {
        outline: 2px solid var(--brand-400);
        outline-offset: -2px;
    }

    /* Text inside the tree must not get selected while dragging the grip */
    .eUI .eRail.is-resizing {
        user-select: none;
    }

    /* height: auto neutralizes both .--eForm height branches (-webkit-fill-available / -moz-available),
       so the head keeps its content height and the body takes exactly the remaining row */
    .eUI .eRail .eTreePanel__head,
    .eUI .eRail .eTreePanel__body {
        height: auto;
        min-width: 0;
    }

    .eUI .eRail .eTreePanel__body {
        min-height: 0;
        overflow: hidden;
    }

    .eUI .eRail .eTreePanel__body > .--eBlock {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    .eUI .eRail .eTreeView--panel {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
    }

    .eUI .eRail .eTreeView--panel > .k-treeview {
        height: 100%;
        width: 100%;
        overflow-y: scroll; /* scroll, not auto: the gutter is reserved, so the scrollbar is always there */
        overflow-x: hidden; /* long folder names ellipsize instead of scrolling sideways */
    }

    /* Scrollbar cosmetics through ::-webkit-scrollbar only, and deliberately WITHOUT
       scrollbar-width/scrollbar-color: MDN documents that where the standard properties are supported
       and set to anything but auto, they override ::-webkit-scrollbar-* styling — and the
       @supports not selector(::-webkit-scrollbar) gate the dropdowns use (eControls.css) can no
       longer keep the two engines apart, because Firefox 153 reports that selector as supported
       without implementing it. So Firefox keeps its own scrollbar here; overflow-y: scroll above is
       what makes it always present, which is the part that was actually asked for. Caveat on
       overlay-scrollbar platforms (macOS — Firefox included, Android): the gutter is what stays there,
       a painted track is not guaranteed.
       The thumb's transition comes from the global *::-webkit-scrollbar-thumb in site.css and is not
       restated below — it animates exactly the two properties the hover/active rules change. */
    .eUI .eRail .eTreeView--panel > .k-treeview::-webkit-scrollbar {
        width: 8px;
        background: transparent;
    }

    /* styling the scrollbar makes WebKit render the stepper arrows — hide them */
    .eUI .eRail .eTreeView--panel > .k-treeview::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    /* --gray-200 (the divider token), not --gray-100: in the dark theme --gray-100 is the very hex
       the card background resolves to (both #13161b), so a --gray-100 track would not render at all */
    .eUI .eRail .eTreeView--panel > .k-treeview::-webkit-scrollbar-track {
        background: var(--gray-200);
        border-radius: var(--radius-full);
    }

    .eUI .eRail .eTreeView--panel > .k-treeview::-webkit-scrollbar-thumb {
        /* --gray-500 against that track measures 3.8:1 light / 4.3:1 dark, so it clears the 3:1
           non-text minimum in both themes. --gray-300 (1.2-1.3:1) and --gray-400 (2.6:1 dark) do not. */
        background: var(--gray-500);
        /* 2px transparent frame keeps a 4px visible thumb inside the 8px click zone */
        border: 2px solid transparent;
        background-clip: padding-box;
        border-radius: var(--radius-full);
    }

    /* the global *::-webkit-scrollbar-thumb:hover/:active sit in the `core` layer and lose to the rule
       above regardless of specificity, so the feedback has to be restated here. --gray-600/700 read as
       "more prominent" in both themes: darker in light, lighter in dark. */
    .eUI .eRail .eTreeView--panel > .k-treeview::-webkit-scrollbar-thumb:hover {
        background-color: var(--gray-600);
        border-width: 1px;
    }

    .eUI .eRail .eTreeView--panel > .k-treeview::-webkit-scrollbar-thumb:active {
        background-color: var(--gray-700);
        border-width: 1px;
    }

    .eUI .folder__view {
        position: relative;
        display: flex;
        align-items: center;
        cursor: default;
    }

    .eUI .folder__view-icon-label {
        position: relative;
        display: flex;
        cursor: pointer;
    }

    .eUI .folder__view-switch {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .eUI .icon__view {
        display: block;
        width: 28px;
        height: 28px;
        transition: background-image .25s ease;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;

        & .close__svg {
            display: block;
        }

        & .open__svg {
            display: none;
        }
    }

    .eUI .folder__view-switch:checked ~ .icon__view {
        & .close__svg {
            display: none;
        }

        & .open__svg {
            display: block;
        }
    }

    .eUI .panel__help {
        position: absolute;
        top: 50%;
        z-index: 4;
        position: absolute;
        padding: 4px 16px;
        color: var(--brand-50);
        background: var(--brand-600);
        border-top-left-radius: var(--radius-xs);
        border-top-right-radius: var(--radius-xs);
        transform: rotate(270deg);
        right: -24px;
        cursor: pointer;

        &:hover {
            opacity: .7;
        }

        & .help-label {
            color: var(--text-on-brand);
        }

        & .help__item {
            display: flex;
            gap: 4px;
            align-items: center;
        }
    }

    .eUI .panel__favorite {
        position: absolute;
        top: calc(50% + 112px);
        z-index: 4;
        padding: 4px 16px;
        color: var(--text-on-brand);
        background: var(--brand-600);
        border-top-left-radius: var(--radius-xs);
        border-top-right-radius: var(--radius-xs);
        transform: rotate(270deg);
        right: -36px;
        cursor: pointer;

        &:hover {
            opacity: .7;
        }

        & .favorite-label {
            color: var(--text-on-brand);
        }

        & .favorite__item {
            display: flex;
            align-items: center;
            gap: 6px;
        }

        /* When page is favorited: fill the star icon */
        & #favoriteIcon.is-favorite svg {
            fill: var(--text-on-brand);
        }
    }

    @media (prefers-reduced-motion: no-preference) {
        .eUI .sidebar {
            will-change: transform;
            /*overflow-y: auto;*/
        }
    }

/* =========================================================
    SIDEBAR TOGGLE SYSTEM
    CSS-checkbox state carrier — desktop collapse / mobile drawer
========================================================= */

/* ── Hidden state carrier ── */
.sidebar-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* ── Desktop: collapse tab (thin vertical strip on right edge of sidebar) ── */
.eUI .sidebar-collapse-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 48px;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
    cursor: pointer;
    z-index: 2;
    color: var(--gray-400);
    transition: background .2s ease, color .2s ease, border-color .2s ease;

    & svg {
        flex-shrink: 0;
        transition: transform .3s ease;
    }

    &:hover {
        background: var(--brand-50);
        color: var(--brand-600);
        border-color: var(--brand-200);
    }

    &:focus-visible {
        outline: 2px solid var(--brand-400);
        outline-offset: -2px;
    }
}

/* ── Desktop: "Show Menu" tab — styled like the Help/Favorite side tabs,
   mirrored onto the left screen edge. Hidden while the sidebar is open. ── */
.eUI .sidebar-show-tab {
    display: none;
    position: fixed;
    top: 50%;
    /* Fixed width + center-origin rotation make the on-screen position
       deterministic (independent of text width): the rotated pill is ~H(28px)
       wide and its visual left edge ≈ left + (width - 28)/2 ≈ -2px → flush. */
    left: -38px;
    width: 104px;
    box-sizing: border-box;
    text-align: center;
    z-index: 50;
    padding: 4px 16px;
    color: var(--brand-50);
    background: var(--brand-600);
    border-bottom-left-radius: var(--radius-xs);
    border-bottom-right-radius: var(--radius-xs);
    transform: rotate(270deg);
    transform-origin: center center;
    cursor: pointer;
    white-space: nowrap;

    &:hover {
        opacity: .7;
    }

    & .show-menu-label {
        color: var(--text-on-brand);
    }

    &:focus-visible {
        outline: 2px solid var(--brand-400);
        outline-offset: 2px;
    }
}

/* ── Desktop only: checked = sidebar slides off-screen, "Show Menu" tab appears ── */
@media (min-width: 997px) {
    /* Sidebar slides out past the left edge AND releases its layout space,
       so the content area expands to full width.
       > .sidebar, not a descendant: the class is reused as a surface style by panels that are not the
       navigation (GridStackDashboard.cshtml, LiteGridDashboard.cshtml), and as a descendant this rule
       shifted those popovers 298px off-screen and made them unclickable whenever the menu was
       collapsed. Only the navigation aside is a direct child of .admin. */
    .sidebar-toggle-input:checked ~ .admin > .sidebar {
        margin-left: -298px;
        pointer-events: none;
    }

    /* Reveal the "Show Menu" tab. Scoped to --menu: the --rail twin is revealed by its own rule below
       and only while a rail exists, so the two can never both be on screen fighting for the click. */
    .sidebar-toggle-input:checked ~ .admin .sidebar-show-tab--menu {
        display: block;
    }

    /* ---- The folder rail replaces the navigation ----
       Opening the tree slides the sidebar out exactly the way the manual collapse does. Deliberately
       CSS and not JS: the state survives F5, browser form-state restoration and window resizing with
       nothing to reconcile, and localStorage['eup-sidebar-collapsed'] — the user's own preference —
       is never written. Specificity: :has() contributes the specificity of its argument
       (.folder__view-switch:checked = one class + one pseudo-class), so these rules are (0,5,0)
       against (0,4,0) for the two rules above, and win regardless of source order.
       The pointer-events declaration MUST stay inside this media query: on mobile the same checked
       state means "the drawer is open", and a (0,5,0) pointer-events: none would make the navigation
       drawer unclickable whenever the tree is open. */
    /* > .sidebar, not a descendant: the class is reused for dashboard popovers
       (GridStackDashboard.cshtml, LiteGridDashboard.cshtml), only the navigation aside is a direct
       child of .admin */
    .eUI .admin:has(.folder__view-switch:checked) > .sidebar {
        margin-left: -298px;
        pointer-events: none;
    }

    /* While the tree is open, the tab that only un-collapses the menu would be a dead control (the
       rule above outranks it) sitting on top of the rail's left edge. The rail's own tab takes over:
       same look, but it closes the tree, which is what brings the menu back. */
    .eUI .admin:has(.folder__view-switch:checked) .sidebar-show-tab--menu {
        display: none;
    }

    .eUI .admin:has(.folder__view-switch:checked) .sidebar-show-tab--rail {
        display: block;
    }
}

/* ── Mobile-only elements: hidden on desktop ── */
.eUI .mobile-menu-btn,
.eUI .sidebar-overlay {
    display: none;
}

/* ── Mobile: sidebar becomes a fixed overlay drawer ── */
@media (max-width: 996px) {
    /* Drawer starts off-screen and invisible */
    .eUI .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100dvh;
        width: 290px;
        margin: 0;
        border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform .3s ease;
        visibility: hidden;
        pointer-events: none;
        overflow: hidden;
    }

    /* Open state: drawer slides in. Same > .sidebar reasoning as the desktop rule — as a descendant
       this one revealed the dashboards' .sidebar-classed popovers whenever the drawer was opened. */
    .sidebar-toggle-input:checked ~ .admin > .sidebar {
        transform: translateX(0);
        width: 290px;
        min-width: 290px;
        visibility: visible;
        pointer-events: auto;
    }

    /* Content fills full width on mobile */
    .eUI .content-wrapper {
        width: 100%;
        padding-left: var(--spacing-xl);
        padding-right: var(--spacing-xl);
        padding-top: calc(var(--spacing-xl) + 52px);
    }

    /* Left rail covers the page instead of splitting it — two columns do not fit here.
       z-index below the nav drawer (200), its backdrop (199) and the hamburger (300), so navigation
       stays reachable; the same 52px top offset as the content keeps the header clear of the burger. */
    .eUI .admin:has(.folder__view-switch:checked) > .eRail {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        padding: calc(var(--spacing-md) + 52px) var(--spacing-md) var(--spacing-md);
        z-index: 150;
        background: var(--white);
    }

    /* Width is not adjustable when the rail is full-screen */
    .eUI .eRail__resizer {
        display: none;
    }

    /* Nothing to ease on a full-screen overlay: there is no layout width, and easing its padding would
       only shift the content sideways by 8px */
    .eUI.eRailReady .eRail {
        transition: none;
    }

    /* Hide rotated side panels (Help / Favorite tabs) */
    .eUI .panel__help,
    .eUI .panel__favorite {
        display: none;
    }

    /* Backdrop overlay — click to close the drawer */
    .eUI .sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .42);
        z-index: 199;
        cursor: pointer;
        backdrop-filter: blur(1px);
        -webkit-backdrop-filter: blur(1px);
    }

    .sidebar-toggle-input:checked ~ .admin .sidebar-overlay {
        display: block;
    }

    /* Mobile hamburger button */
    .eUI .mobile-menu-btn {
        display: flex;
        position: fixed;
        top: 10px;
        left: 10px;
        z-index: 300;
        width: 40px;
        height: 40px;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-card);
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: var(--gray-700);
        transition: background .2s ease, color .2s ease;
    }

    .eUI .mobile-menu-btn:hover {
        background: var(--brand-50);
        color: var(--brand-600);
    }

    .eUI .mobile-menu-btn:focus-visible {
        outline: 2px solid var(--brand-400);
        outline-offset: 2px;
    }

    /* Hamburger disappears once drawer is open (overlay provides close) */
    .sidebar-toggle-input:checked ~ .admin .mobile-menu-btn {
        display: none;
    }

    /* Desktop collapse button not needed on mobile */
    .eUI .sidebar .sidebar-collapse-btn {
        display: none;
    }

    /* ── Bug 2: single scroll container inside the drawer ── */

    /* .--eNav (flex: 1, min-height: 0) becomes the scrollable area */
    .eUI .sidebar .--eMenu .--eNav {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* Neutralize competing scroll container from site.css (.--eNav > section) */
    .eUI .sidebar .--eMenu .--eNav > section {
        overflow: visible;
    }

    /* Neutralize competing scroll container from site.css (.portal__menu) */
    .eUI .sidebar .--eMenu .portal__menu {
        height: auto;
        overflow: visible;
    }

    /* Keep account/logout footer always in view at the bottom of the scroll area */
    .eUI .sidebar .--eMenu .--eBlockDown {
        position: sticky;
        bottom: 0;
        background: var(--white);
    }
}

}

@layer controls {

/* ---- /css/eControls/eControls.css ---- */

.eControls .--eLabel {
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-text-sm);
    line-height: var(--line-height-text-sm);
    color: var(--gray-700);
    /* The fallback used to be `--spacing-md` — a bare dashed-ident, not a var(). When
     * --eLabelMarginB was not set the whole declaration was invalid at computed-value time and the
     * label fell back to margin-bottom: 0, which only went unnoticed because inside a --eProperty
     * the more specific rule in eCSSCore/core/eForm.css was winning anyway. Now that eControls sits
     * in `controls` and eForm in `core`, this rule wins there too, so the broken fallback would have
     * collapsed the label spacing across every form. --spacing-sm matches what eForm's own chain
     * resolves to, so forms keep the spacing they have today. */
    margin-bottom: var(--eLabelMarginB, var(--spacing-sm));

    & .spanAsteriskRequired {
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-text-lg);
        color: var(--brand-600);
        line-height: 1;
    }
}


.eControls {
    & .k-listview-content,
    & .eListView:not(.stop__min-height),
    & :not(.stop__min-height) > .k-grid .k-grid-content {
        min-height: var(--eContentMinHeight, 520px);
    }

    & .k-input-inner,
    & .k-list-item-text {
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
        min-width: 0; /* critical: allows text to shrink so ellipsis works */
        width: 100%;
        overflow: hidden !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
    }

    & textarea.k-input-inner {
        white-space: break-spaces !important;
        overflow: auto !important;
    }
}

.eControls .k-link {
    text-decoration: none;
    padding: 4px !important;
    min-width: 0; /* critical: allows text to shrink so ellipsis works */
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


.eControls {
    & .rb-title {
        font-weight: var(--font-weight-semibold);
    }

    & .rb-sub {
        font-size: var(--font-size-text-sm);
        color: var(--gray-400);
    }

    & .e-link {
        color: var(--brand-700);
        font-weight: 600;
    }

    & .k-form-error,
    & .k-invalid-msg,
    & .field-validation-error {
        color: var(--error-500);
    }

    & span.k-invalid {
        border: 1px solid var(--error-500) !important;
    }

    & .input-validation-error ~ .k-editor .k-editor-content {
        border: 1px solid var(--error-500) !important;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }

    & .k-input.survey-choice-desc-widget:has(.input-validation-error) {
        border: 1px solid var(--error-500) !important;
    }

    & .k-e-notification-wrapper {
        color: var(--gray-900) !important;
    }

    & .k-notification-info,
    & .k-notification-error,
    & .k-notification-warning,
    & .k-notification-success {
        border-radius: var(--radius-lg);
        border-color: var(--gray-300);
        background-color: var(--white);
        position: relative;
    }

        & .k-notification-info::after,
        & .k-notification-error::after,
        & .k-notification-success::after,
        & .k-notification-warning::after {
            content: "";
            width: 100%;
            height: 100%;
            right: 0;
            position: absolute;
            z-index: 0;
            backdrop-filter: blur(2px);
            border-radius: var(--radius-lg);
        }

        & .k-notification-info::after {
            /*background-color: var(--brand-transparent-bg);*/
        }

        & .k-notification-error::after {
            /*background-color: #7F56D954;*/
        }

    & .k-notification-info,
    & .k-notification-success,
    & .k-notification-warning,
    & .k-notification-error {
        position: relative;
        padding: 15px 30px 15px 15px;
    }

    & .k-e-notification-wrapper {
        z-index: 4;
    }

    & .notification-icon-block {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    & .k-notification-close {
        font-size: 24px;
        cursor: pointer;
    }

    & .k-notification-title,
    & .k-notification-mess {
        color: var(--gray-900);
    }

    & .k-notification-mess {
        font-size: 14px;
    }

    & .k-animation-container {
        margin-top: var(--radius-sm);
        border-radius: var(--radius-sm);
        margin-bottom: var(--radius-sm) !important;
    }

        & .k-animation-container .k-child-animation-container .k-popup {
            border-radius: var(--radius-sm);
        }

        & .k-animation-container .k-child-animation-container .k-list {
            border-radius: var(--radius-sm);
        }

        & .k-animation-container li:where( .k-focus, .k-selected) span {
            color: var(--brand-700);
        }

    /* Dropdown list scrollbar: same overlay look as the global one (transparent track, no
       arrow buttons), but wider and brand-tinted instead of thin gray.
       Both hooks are styled on purpose — the Kendo theme puts overflow-y on .k-list-content,
       while .k-list-scroller is the flex wrapper some widgets scroll instead. */
    /* Firefox only. Chromium supports the standard properties too, but as soon as scrollbar-color
       is set it paints the native (Fluent) scrollbar and ignores every ::-webkit-scrollbar-* rule
       below — including the button reset — so the native stepper arrows come back, tinted with
       --brand-300. Hence a negative selector test instead of @supports (scrollbar-width: auto),
       which no longer tells the two engines apart. Cost: an engine without @supports selector()
       reads the test as false and so passes the `not` — Firefox < 121 loses the tint (it falls back
       to the default OS scrollbar), Chromium < 105 gets the block it was meant to skip (harmless:
       it has no standard-property support either, so both declarations are dropped). */
    @supports not selector(::-webkit-scrollbar) {
        & .k-list-content,
        & .k-list-scroller {
            scrollbar-width: auto;
            scrollbar-color: var(--brand-300) transparent; /* keep in sync with the thumb color below */
        }
    }

    & .k-list-content::-webkit-scrollbar,
    & .k-list-scroller::-webkit-scrollbar {
        width: 12px;
        height: 12px;
        background: transparent;
    }

    /* Styling the scrollbar makes WebKit render the stepper arrows — hide them */
    & .k-list-content::-webkit-scrollbar-button,
    & .k-list-scroller::-webkit-scrollbar-button {
        display: none;
        width: 0;
        height: 0;
    }

    & .k-list-content::-webkit-scrollbar-track,
    & .k-list-scroller::-webkit-scrollbar-track {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    & .k-list-content::-webkit-scrollbar-thumb,
    & .k-list-scroller::-webkit-scrollbar-thumb {
        background: var(--brand-300);
        /* 3px transparent frame keeps a 6px visible thumb inside the 12px click zone */
        border: 3px solid transparent;
        background-clip: padding-box;
        border-radius: var(--radius-full);
    }

    & .k-list-content::-webkit-scrollbar-thumb:hover,
    & .k-list-scroller::-webkit-scrollbar-thumb:hover {
        background-color: var(--brand-400);
        border-width: 2px; /* grows to an 8px visible thumb */
    }

    & .k-list-content::-webkit-scrollbar-thumb:active,
    & .k-list-scroller::-webkit-scrollbar-thumb:active {
        background-color: var(--brand-600);
        border-width: 2px;
    }

    & .k-list .k-selected, .k-listbox .k-selected {
        background-color: var(--brand-50) !important;
    }

    & #notifications-root {
        position: fixed;
        bottom: 16px;
        right: 16px;
        /* Top of the stack: above Kendo Windows/Dialogs (10001+) AND above the blocking loader
           overlay (#blurOverlay 10050 / #MainPageLoader 10051), so a message stays readable while
           a loader is up — e.g. the toast shown right before navigateBack() re-shows the loader. */
        z-index: 10060;
        max-height: 90vh;
        max-width: 450px;
        min-width: 250px;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-radius: var(--radius-lg);
        box-shadow: 0 0 2px rgba(0,0,0,.05), 1px 2px 2px rgba(0,0,0,.07);
    }

    & body:has( #notifications-root .k-notification) > #eun-chat-widget {
        z-index: 3;
        position: relative;
    }
    /*& #notifications-root::before,
    & #notifications-root::after {
        content: "";
        position: fixed;
        right: 16px;
        max-width: 450px;
        height: 80px;
        pointer-events: none;
        z-index: 10001;
        background: rgba(204, 204, 204, 0.45);
        backdrop-filter: blur(var(--spacing-xs));
        -webkit-backdrop-filter: blur(var(--spacing-xs));
    }*/
    & #notifications-root::-webkit-scrollbar {
        width: 4px;
    }

    & #notifications-root::-webkit-scrollbar-thumb {
        border-color: var(--sb-thumb);
        border-width: 0;
    }

    & #notifications-root::-webkit-scrollbar:hover *::-webkit-scrollbar-thumb { /* just in case for nested */
        border-width: 4px;
    }


    & #notifications-root .k-notification {
        pointer-events: auto;
    }
}


.eControls .k-calendar-container.k-popup {

    & .k-selected.k-focus .k-link {
        background-color: var(--brand-600)!important;
    }

    & .k-button-flat-primary {
        color: var(--brand-600)!important;
    }

    & .k-today .k-link  {
        color: var(--brand-600)!important;
    }

    &  .k-today.k-selected.k-focus .k-link {
        color: var(--text-on-brand) !important;
    }
}

.eControls body {
    &:not(.menu-loaded) .eAccordion-content {
        transition: none !important;
    }

    &.menu-loaded .eAccordion-content {
        transition: max-height 0.3s ease;
    }
}

.eControls .view-setting {
    width: 32px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    padding: 4px 6px;
    border: 2px solid transparent;

    &:hover {
        border: 2px solid var(--brand-500);
    } 
}

    .eControls .menu__context {
        position: fixed;
        /*top: -66px;*/
        /*left: calc(-80% + 16px);*/
        /*left: 20px;*/
        max-width: 200px;
        min-width: 120px;
        background: var(--white);
        border: 1px solid var(--gray-300);
        border-radius: 6px 6px 6px 0;
        padding: 4px;
        box-shadow: 0 4px 16px rgba(0,0,0,.15);
        z-index: 4;
        visibility: hidden;

        & button:hover {
            background: var(--gray-100);
        }

        &.is-open {
            visibility: visible;
        }

        & .menu__context-list {
            display: grid;
            list-style: none;
            margin: 0;
            padding: 0;
            gap: var(--spacing-xs);

            & img {
                margin-right: 8px;
            }
        }

            & .menu__context-list button,
            & .k-bulk-menu button {
                width: 100%;
                text-align: start;
                display: flex;
                align-items: center;
                pointer-events: revert !important;
            }

            & .menu__context-list span,
            & .k-bulk-menu span {
                font-size: 14px;
                font-weight: var(--font-weight-medium);
                color: var(--gray-900);
                word-break: break-all;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 130px;
                white-space: nowrap
            }

        & .btn.disabled,
        & .btn:disabled,
        & button:hover {
            border-color: var(--gray-300);
        }
    }

.eControls {
    & .mess__search {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    & .massege__res-search > span {
        color: var(--brand-600);
        cursor: pointer;
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 4px;

        &:hover {
            opacity: .7;
        }
    }
}

.eControls {
    & .floating-label,
    & .control-label {
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
        font-weight: 500;
        color: var(--gray-700);
        margin-bottom: 8px;
    }

    & .k-listbox .k-list-scroller {
        min-width: 0;
        max-width: 100%;
    }

    & .ePreview__thumb {
        object-fit: cover;
        border-radius: var(--radius-sm, 4px);
        cursor: pointer;
    }
}

/* ---- /css/eControls/eButton.css ---- */

.eControls .eButton {
    width: var(--eButtonW, auto);
    white-space: nowrap;
    /*max-width: 300px;*/

    & .k-button,
    & .e-btn,
    &.e-btn,
    & .k-button-solid-base {
        width: 100%;
        /*max-width: 128px;*/
        border-radius: var(--radius-md);
        border: 2px solid var(--gray-300);
        background: var(--white);
        font-weight: 600;
        font-size: 14px; /*calc(var(--index) * .5)*/
        height: var(--eButtonH, var(--components-height-md));
        color: var(--gray-700);
        padding: var(--eButtonP, var(--spacing-md) var(--spacing-lg));
        display: flex !important;
        gap: var(--spacing-xs) !important;
        align-items: center !important;
        justify-content: center;
    }

    #btnNavNext {
        &.k-button,
        &.e-btn,
        &.k-button-solid-base {
            flex-direction: row-reverse;
        }
    }

    & .k-button-solid-primary,
    & .e-btn-primary,
    & .e-btn-danger,
    &.e-btn-danger,
    & .e-btn-warning,
    &.e-btn-warning,
    & .k-button-solid-error {
        color: var(--text-on-brand);
    }

    & .k-button-solid-primary,
    & .e-btn-primary,
    & .k-button-solid-success {
        position: relative;
        border: 2px solid transparent;
        background: var(--brand-600);
        overflow: hidden;
        border-radius: var(--radius-md);
        z-index: 0;
    }

        & .k-button-solid-primary::before,
        & .e-btn-primary::before,
        & .k-button-solid-success::before,
        & .k-button-solid-base::before,
        & .k-button::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: var(--radius-md);
            pointer-events: none;
            background: linear-gradient( 180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 100% );
            z-index: 1;
            opacity: revert !important;
            display: revert !important;
        }

        & .k-button-solid-primary > *,
        & .e-btn-primary > *,
        & .k-button-solid-success > *,
        & .k-button-solid-base > *,
        & .k-button > * {
            position: relative;
            z-index: 2;
            white-space: nowrap;
        }

    & .k-button.k-selected,
    & .e-btn:hover,
    &.e-btn:hover {
        opacity: .7;
    }

    & .k-button-solid-base.k-focus,
    & .k-button-solid-base:focus,
    & .e-btn:focus {
        box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
    }

    & .k-button-solid-primary.k-focus,
    & .k-button-solid-primary:focus,
    & .e-btn-primary:focus,
    & .e-btn-primary-secondary:focus {
        box-shadow: 0 1px 2px 0 rgba(158, 119, 237, 0.6), 0 -2px 0 0 rgba(158, 119, 237, 0.6) !important;
    }

    & .e-btn.e-event__btn {
        border: 1px solid var(--brand-600);
        color: var(--brand-600);
        background: transparent;
        border-radius: var(--radius-md);
    }

        & .e-btn.e-event__btn:hover {
            background: var(--brand-50);
        }

    & .e-btn.outline {
        background: var(--white);
        color: var(--brand-600);
        border: 1px solid var(--brand-600);
    }

    & .e-btn.small {
        font-size: 12px;
        padding: 6px 16px;
        width: auto;
    }

    & .e-btn.account-link {
        border: none !important;
    }

    & .e-btn-danger,
    & .e-btn-danger:active,
    &.e-btn-danger,
    &.e-btn-danger:active,
    & .k-button-solid-error {
        background: var(--error-500);
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

        & .e-btn-danger:focus,
        &.e-btn-danger:focus,
        & .k-button-solid-error.k-focus {
            box-shadow: 0 1px 2px 0 rgba(158, 119, 237, 0.6), 0 -2px 0 0 rgba(158, 119, 237, 0.6) !important;
        }

    & .e-btn-warning,
    & .e-btn-warning:active,
    &.e-btn-warning,
    &.e-btn-warning:active {
        background: #fbd976;
        border: 1px solid rgba(255, 255, 255, 0.12);
    }

        & .e-btn-warning:focus,
        &.e-btn-warning:focus {
            box-shadow: 0 1px 2px 0 rgba(158, 119, 237, 0.6), 0 -2px 0 0 rgba(158, 119, 237, 0.6) !important;
        }

    & .e-btn-primary-secondary,
    & .k-button-solid-secondary {
        border: 2px solid var(--brand-400);
        background: var(--white);
        overflow: hidden;
        border-radius: var(--radius-md);
        color: var(--brand-600);
    }

    &.btn-2xs,
    &.btn-2xs button {
        height: var(--components-height-xxs);
    }

    &.btn-xs,
    &.btn-xs button {
        height: var(--components-height-xs);
    }

    &.btn-sm,
    &.btn-sm button {
        height: var(--components-height-sm);
    }

    &.btn-md,
    &.btn-md button {
        height: var(--components-height-md);
    }

    & .e__filter--btn {
        width: 128px;
        --eBlockDirection: row;
    }

    & .k-button-text {
        font-size: var(--font-size-text-sm) !important;
        line-height: var(--line-height-text-sm) !important;
    }

    & .e-link-btn {
        color: var(--brand-600);
        padding: 0;
        border: none;
        height: auto;
    }

    & .e-btn-delete {
        background: transparent;
        border: none;
        color: var(--error-700);
    }

    &:has(> .min) {
        display: flex;
        justify-content: center;
    }

    & .min {
        width: fit-content;
    }

    &.btn-toggle button.e-btn {
        border: none;
    }

    &.btn-toggle.view-toggle button {
        display: flex;
        align-items: center;
        padding: 3px 4px;
        cursor: pointer;
        border: none;
        background: transparent;
        transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        z-index: 1;
    }

    &.btn-toggle.view-toggle.active button {
        color: var(--brand-700) !important;
    }
}

.eControls .eButton__icon button {
    border: none !important;
    background: transparent !important;
}

.eControls .--eFilter .--ePanel .eButton {
    width: 100%;

    @supports (width: -webkit-fill-available) {
        & {
            width: -webkit-fill-available;
        }
    }

    @supports (width: -moz-available) {
        & {
            width: -moz-available;
        }
    }
}

/* =========================================================
    DISABLED STATE FOR NON-KENDO BUTTONS
    Kendo widget buttons get .k-disabled added at widget init,
    but raw <button> elements emitted by eTemplateButton / ePermission
    (used inside Kendo client templates) bypass widget init.
    These rules give them parity with Kendo's disabled styling.
========================================================= */
.e-btn:disabled,
.e-btn.disabled,
button.btn:disabled,
button.btn.disabled {
    opacity: .5;
    /* A disabled form control never fires mouse events, so a data-e-tooltip on it
       would never trigger the global tooltip. Let the pointer fall through to the
       non-disabled wrapper, which drives the tooltip (see _GlobalTooltips.cshtml).
       INVARIANT: to re-enable such a button JS MUST clear BOTH the `disabled`
       attribute AND this `.disabled` class — otherwise pointer-events:none strands
       it unclickable. Today this is safe: Kendo .enable()/prop('disabled') round-trip
       the ATTRIBUTE (tracked by :disabled), while the `.disabled` CLASS is only ever
       server-rendered for permission-gated buttons that are never re-enabled client-side. */
    pointer-events: none;
}

/* =========================================================
    BUSY STATE — loading spinner (setButtonBusy / .e-busy)
    Only the LABEL is hidden (color:transparent) — the button box (background,
    border) stays — and a centered spinner is shown in its place, WITHOUT
    changing the button's width/height. The spinner is a real child element
    (.e-btn-spinner) — not a pseudo-element — to avoid clashing with Kendo's
    ::before/::after on .k-button. Its colour is set inline by setButtonBusy
    (captured from the button's text colour) so it reads on any variant; the
    normal disabled look stays.
========================================================= */
.e-btn.e-busy {
    position: relative;
    /* Hide the label only (keep bg/border). !important + the descendant rule
       below are needed to beat the Kendo theme, which colours .k-button-text /
       solid variants explicitly. The spinner is excluded so it keeps its colour. */
    color: transparent !important;
}
.e-btn.e-busy *:not(.e-btn-spinner) {
    color: transparent !important;
}
.e-btn.e-busy > .e-btn-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    box-sizing: border-box;
    border: 2px solid currentColor;   /* currentColor = inline colour set by setButtonBusy */
    border-right-color: transparent;
    border-radius: 50%;
    animation: e-btn-spin 0.6s linear infinite;
    pointer-events: none;
}
@keyframes e-btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- /css/eControls/eCheckBox.css ---- */
.eControls .eCheckBox {
    display: flex;
    align-items: center;
    flex-direction: var(--eCheckBoxDirection, row);
    gap: var(--eCheckBoxGap, 12px);

    &.edit-control {
        display: flex;
        align-items: var(--eToggleSwitchAlIt, start);
        flex-direction: var(--eToggleSwitchDirection, row);
        gap: var(--eToggleSwitchGap, 8px);
        border: var(--eToggleSwitchNoB, 1px solid var(--gray-300));
        border-radius: var(--radius-xl);
        padding: var(--eToggleSwitchPadding, var(--spacing-xl));

        &:has( .input-validation-error) {
            border-color: var(--error-500);
        }
    }

    & .k-checkbox-wrap {
        height: 100%;
    }

    & label {
        display: flex;
        flex-direction: column;
        gap: 2px;
        cursor: pointer;

        &:has( .spanAsteriskRequired) {
            flex-direction: row;
        }
    }
    /*&:has( .k-checkbox:checked ) {
        border: var(--eToggleSwitchNoB, 1px solid var(--brand-600));
    }*/

    & .form-check-input,
    & .k-checkbox {
        border: 1px solid var(--gray-300);
        background-color: transparent;
        margin-top: 0;
    }

    & .form-check-input:checked,
    & .k-checkbox:checked {
        background-color: var(--brand-600) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
    }

    & .form-check-input:checked:focus,
    & .form-check-input:focus,
    & .k-checkbox:checked:focus,
    & .k-checkbox:focus {
        box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
    }

    & .input-validation-error {
        border-color: var(--error-500);
    }

    &.edit-control:has( .k-checkbox:checked) {
        border: var(--eCheckBoxBorderCheck, 1px solid var(--brand-600));
    }
}

.eControls [type="checkbox"] {
    border: 1px solid var(--gray-300);
    accent-color: transparent;
    margin-top: 0;
}

.eControls [type="checkbox"]:checked {
    accent-color: var(--brand-600) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

.eControls [type="checkbox"]:checked:focus {
    box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
}

.eControls[data-accent="dark"] .eCheckBox {

    & .rb-title {
        color: var(--gray-700) !important;
    }

    & .rb-sub {
        color: var(--gray-600) !important;
    }
}

/* ---- /css/eControls/eTextBox.css ---- */
.eControls .eTextBox {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;

    & .k-textbox,
    & .form-control {
        width: 100%;
        border-radius: var(--eTextBoxBorderR, var(--radius-lg));
        border-style: solid;
        border-color: var(--eTextBoxBorderColor, var(--gray-300));
        border-width: var(--eTextBoxBorderW, 1px);
        background: transparent;
        font-weight: 400;
        height: 40px;

        &:has( .input-validation-error) {
            border-color: var(--error-500);
        }
    }

    & .k-input-solid.k-focus,
    & .k-input-solid:focus,
    & .form-control:focus {
        border: 1px solid var(--brand-600);
        box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;

        &:has( .input-validation-error) {
            border-color: var(--error-500);
        }
    }

    & .password-toggle-btn {
        height: 100%;
        opacity: .7;
        color: var(--brand-600) !important;
    }

    & .eSearch {
        min-width: var(--eSearchW, 260px);
    }

    .eye-off__icon::after {
        content: "";
        display: flex;
        width: 20px;
        height: 20px;
        background: url("/images/EyeOff-icon.svg");
        background-size: cover;
    }

    .eye__icon:before {
        content: "";
        display: flex;
        width: 20px;
        height: 20px;
        background: url("/images/Eye-icon.svg");
        background-size: cover;
    }

    &.disabled {
        opacity: 0.5;
    }

        &.disabled .form-control {
            background-color: var(--gray-100);
        }
}

/* Entrance ("appears") animation for every eTextBox: fade + slide-up.
   @starting-style supplies the pre-render values, so the transition plays each time the
   element is first rendered — on page load, when a hidden tab/dialog becomes visible, and
   when a row is appended dynamically (e.g. the Survey "Add Choice" rows). Gated behind
   prefers-reduced-motion so reduced-motion users get an instant, non-animated appearance.
   Note: the transition below is a blanket rule, so toggling `.disabled` also smoothly dims
   opacity (1 -> 0.5) — intentional; any future inline opacity/transform change will animate too. */
@media (prefers-reduced-motion: no-preference) {
    .eControls .eTextBox {
        transition: opacity 0.3s ease, transform 0.3s ease;

        @starting-style {
            opacity: 0;
            transform: translateY(8px);
        }
    }
}

/* ---- /css/eControls/eLoader.css ---- */
.eControls .eLoader {

    & .k-loader-primary {
        color: var(--brand-600) !important;
    }

    & .k-loader-segment {
        background-color: var(--brand-600) !important;
    }
}

/* ---- /css/eControls/eComboBox.css ---- */
.eControls .eComboBox {
    & .k-combobox {
        width: 100%;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 400;
        min-height: 40px;
        max-width: var(--eComboBoxMaxW, 100%);
    }

    & .k-button-solid-base {
        background: transparent;
        border: none; 
    }

    & .k-focus {
        border: 1px solid var(--brand-600);
        box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
    }

    & .k-i-arrow-s::before {
        content: "\e015";
        color: var(--gray-500);
    }

    & .k-input-inner {
        font-size: 16px;
        font-weight: 500;
        color: var(--gray-900);
    }

    & .k-clear-value + .k-clear-value {
        display: none;
    }
}

.eControls .eComboBox {
    & select.custom-select {
        position: absolute;
        inset: 0;
        left: -9999px;
        opacity: 0;
        pointer-events: none;
        width: 100%;
        z-index: -1;
    }

    & .custom-select-wrapper {
        position: relative;
    }

    & .eComboBox-ui {
        position: relative;
        width: 100%;
    }

    & .eComboBox-ui__button {
        position: relative;
        width: 100%;
        min-height: 40px;
        padding: 4px 28px 4px 8px;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: var(--white);
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
        color: var(--gray-700);
        cursor: pointer;
        text-align: left;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 2;
    }

        & .eComboBox-ui__button:hover {
            border-color: rgba(0, 0, 0, 0.15);
        }

        & .eComboBox-ui__button:focus {
            outline: none;
            border-color: var(--brand-600);
            box-shadow: 0 0 0 0.2rem rgba(var(--brand-600), 0.25);
        }

    & .eComboBox-ui__value {
        font-size: 16px;
        font-weight: 500;
        color: var(--gray-900);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    & .eComboBox-ui__list {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 4px);
        margin: 0;
        padding: 4px 0;
        list-style: none;
        border: 3px double var(--brand-600); /*thick */
        border-radius: var(--radius-lg);
        background: var(--bg-color-accent);
        max-height: 360px;
        overflow: auto;
        z-index: 3;
        display: none;
    }

    &.is-open .eComboBox-ui__list {
        display: block !important;
    }

    & .eComboBox-ui__option {
        padding: 8px 12px;
        cursor: pointer;
        color: var(--gray-700);
        font-weight: 600;
        font-size: 14px;
    }

        & .eComboBox-ui__option:hover,
        & .eComboBox-ui__option:focus {
            outline: none;
            background-color: var(--brand-50);
        }

        & .eComboBox-ui__option[aria-selected="true"] {
            color: var(--brand-600);
        }

        & .eComboBox-ui__option[aria-disabled="true"] {
            color: var(--gray-300);
            cursor: not-allowed;
        }

    & .custom-select-wrapper .select-icon {
        position: absolute;
        top: 12px;
        right: 8px;
        width: 16px;
        height: 16px;
        pointer-events: none;
        z-index: 2;
    }

    & .eComboBox-ui__button:disabled {
        background: var(--gray-100, #f5f5f5);
        border-color: var(--gray-200, #e9eaeb);
        color: var(--gray-400, #9ca3af);
        cursor: default;
        opacity: 0.7;
    }

        & .eComboBox-ui__button:disabled:hover {
            border-color: var(--gray-200, #e9eaeb);
        }

        & .eComboBox-ui__button:disabled .eComboBox-ui__value {
            color: var(--gray-400, #9ca3af);
        }

    & .eComboBox-ui__button.is-placeholder .eComboBox-ui__value {
        color: var(--gray-400, #9ca3af);
        opacity: 0.7;
    }

    & .k-clear-value {
        visibility: visible !important;
    }

    & .k-clear-value.k-hidden {
        visibility: hidden !important;
        display: block !important;
    }
}

.eControls .k-popup {
    & .k-list-item-text::before,
    & .k-popup .k-list-optionlabel::before {
        content: "";
        width: 0;
        height: 0;
        overflow: hidden;
    }

    & .association-name,
    & .role-title {
        color: var(--gray-700);
        font-weight: 600;
        font-size: 14px;
    }

    & .k-selected .role-title,
    & .k-selected .association-name {
        color: var(--brand-600) !important;
    }

    & .k-focus.k-list-optionlabel,
    & .k-list-item.k-focus,
    & .k-list-item:focus,
    & .k-list-optionlabel:focus {
        border: none !important; /*1px solid var(--gray-300)*/
        background-color: var(--brand-50) !important;
        box-shadow: none !important;
    }

    & .k-selected.k-list-optionlabel {
        color: var(--brand-700) !important;
    }
}

.eControls .eComboBox__dash {
    & input {
        color: var(--brand-700);
    }

    & .k-combobox {
        border: none;
    }

    & .k-clear-value {
        visibility: visible !important;
    }

    & .k-clear-value.k-hidden {
        visibility: hidden !important;
        display: block !important;
    }

    & .k-input-solid:focus-within {
        box-shadow: none !important;
    }

    & .k-button {
        background: transparent;
        border: none;
    }

    & .k-button .k-icon:before {
        content: "";
        width: 20px;
        height: 20px;
        background-image: url("/images/DashArrow-icon.svg");
        background-origin: content-box;
        background-repeat: no-repeat;
        background-position: center;
    }

    & .k-button .k-icon svg {
        display: none;
    }
}

/* ---- /css/eControls/eDropDownList.css ---- */
.eControls .eDropDownList {
    width: 100%;
    min-width: 0;

    & .k-i-arrow-s::before {
        content: "\e015";
        color: var(--gray-500);
    }

    & .k-dropdownlist {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 400;
        min-height: 40px;
    }

    & .k-input-inner,
    & .k-input-value-text {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    & .k-focus {
        border: 1px solid var(--brand-600);
        box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
    }
}

/* ---- /css/eControls/eDialog.css ---- */
.eControls .k-dialog.del-wrapper {
    position: relative;
    border-radius: 16px;
    min-width: 400px;
    max-width: 600px;
    width: auto !important;

    & .eDialog {
        padding: 0;

        & .info {
            color: var(--gray-600);
            font-weight: 400;
            max-height: calc(600px - 192px);
            overflow: auto;
        }
    }

    & .k-dialog-buttongroup {
        padding: 0 24px 20px 24px;
    }

    & .dots__bg {
        --fade: 104px;
        position: absolute;
        top: -4px;
        left: -4px;
        z-index: 0;
        width: 40%;
        height: 165px;
        background: url(/images/NoFoundBgS-icon.svg);
        mask-image: 
            linear-gradient(
                to bottom, 
                transparent 0, 
                #000 var(--fade), 
                #000 calc(100% - var(--fade)), 
                transparent 100%
            ), 
            linear-gradient(
                to right, 
                transparent 0, 
                #000 var(--fade), 
                #000 calc(100% - var(--fade)), 
                transparent 100%
            );
        -webkit-mask-image: 
            linear-gradient(
                to bottom, 
                transparent 0, 
                #000 var(--fade), 
                #000 calc(100% - var(--fade)), 
                transparent 100%
            ), 
            linear-gradient(
                to right, 
                transparent 0, 
                #000 var(--fade), 
                #000 calc(100% - var(--fade)), 
                transparent 100%
            );
        opacity: .5;
    }

    & .k-dialog-actions {
        border: none !important;
        background: rgba(204, 204, 204, 0.08) !important;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }
}

.eControls .k-overlay {
    background: rgba(204, 204, 204, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 1 !important;
}


.eControls {
    & .k-window-titlebar-actions {
        display: none;
        pointer-events: none;
    }

    & .eWindow-header {
        position: sticky;
        top: 0;
        z-index: 1;
        background: var(--white);
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        max-height: 140px;
    }

    & .eWindow-close-btn {

    }

    & .eWindow-content {
        border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
        /*padding-bottom: var(--spacing-8xl);*/
    }

    & .eWindow-content .--eForm:not(.--ePanel) {
        height: var(--eDialogH, calc(100% - 72px));/*calc(100% - 72px)*/
        overflow: auto;
    }

    & .eWindow-content .--eForm:has( .eDiscussion) {
        height: calc(100% - 12px);
        overflow: auto;
    }

    & .eWindow-content .popup__wrapper {
        display: flex; 
        flex-direction: column;
        height: 100%;
    }

    & .eWindow-content .--eForm:not(.--ePanel):has(+ .--ePanel):after {
        position: absolute;
        bottom: 72px;
        left: 0;
        content: "";
        height: 12px;
        width: calc(100% - 8px);
        background: rgba(250, 250, 250, 0.08) !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 2;
    }
}


/* ---- /css/eControls/eMaskedTextBox.css ---- */
.eControls .eMaskedTextBox {
    & .k-maskedtextbox {
        width: 100%;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 600;
        height: 40px;
    }

    & .k-input-solid.k-focus,
    & .k-input-solid:focus {
        border: 1px solid var(--brand-600);
        box-shadow: 0 1px 2px 0 rgba(10, 13, 18, 0.05), 0 -2px 0 0 rgba(10, 13, 18, 0.05) !important;
    }

    & .eSearch {
        min-width: 260px;
    }
}

/* ---- /css/eControls/eKendoPopupOverrides.css ---- */
/* =========================================================
   Kendo popup / surface overrides for [data-accent="dark"]
   ---------------------------------------------------------
   Эти селекторы рендерятся Kendo напрямую в <body>
   (за пределами .eControls scope), поэтому их нельзя
   починить из обычных eControls-файлов. Здесь — только dark.
   ========================================================= */

[data-accent="dark"] {

    /* ── Kendo PanelBar (sidebar navigation) ── */
    & .k-panelbar,
    & .k-panelbar.k-widget {
        background-color: transparent;
        border: none;
    }

    & .k-panelbar > .k-panelbar-item > .k-link,
    & .k-panelbar .k-link.k-header,
    & .k-panelbar .k-panelbar-header,
    & .k-panelbar .k-state-default > .k-link {
        background-color: transparent !important;
        color: var(--gray-900) !important;
        border-color: var(--gray-200) !important;
    }

    & .k-panelbar > .k-panelbar-item > .k-link:hover,
    & .k-panelbar .k-link.k-header:hover,
    & .k-panelbar .k-panelbar-item:hover > .k-link {
        background-color: var(--gray-200) !important;
        color: var(--gray-900) !important;
    }

    & .k-panelbar > .k-panelbar-item.k-state-active > .k-link,
    & .k-panelbar > .k-panelbar-item.k-active > .k-link,
    & .k-panelbar .k-link.k-selected {
        background-color: var(--brand-50) !important;
        color: var(--gray-900) !important;
    }

    & .k-panelbar .k-panelbar-group,
    & .k-panelbar .k-group {
        background-color: transparent;
    }

    & .k-panelbar .k-link:not(.k-header) {
        color: var(--gray-700) !important;
        background-color: transparent !important;
    }

    & .k-panelbar .k-link:not(.k-header):hover {
        background-color: var(--brand-50) !important;
        color: var(--gray-900) !important;
    }

    & .k-panelbar .k-link.k-selected:not(.k-header),
    & .k-panelbar .k-state-selected > .k-link {
        background-color: var(--brand-100) !important;
        color: var(--gray-900) !important;
    }

    /* ── Kendo input surfaces (textbox, dropdown closed value, numerics) ── */
    & .k-input-solid,
    & .k-textbox,
    & .k-input,
    & .k-picker-solid {
        background-color: var(--white) !important;
        color: var(--gray-900) !important;
        border-color: var(--gray-300);
    }

    & .k-input-inner,
    & .k-input-value-text {
        color: var(--gray-900) !important;
        background-color: transparent !important;
    }

    & .k-input-inner::placeholder {
        color: var(--gray-500);
        opacity: 1;
    }

    & .k-disabled,
    & .k-input-solid.k-disabled {
        background-color: var(--gray-100) !important;
        color: var(--gray-500) !important;
    }

    /* ── Popup / animation containers ── */
    & .k-animation-container,
    & .k-popup,
    & .k-list-container {
        color: var(--gray-900);
    }

    & .k-popup,
    & .k-list-container,
    & .k-list,
    & .k-menu-popup,
    & .k-context-menu {
        background-color: var(--white);
        border: 1px solid var(--gray-300);
        box-shadow: var(--shadow-lg);
    }

    & .k-list-item,
    & .k-list-optionlabel,
    & .k-menu-item .k-link {
        color: var(--gray-900);
        background-color: transparent;
    }

    & .k-list-item:hover,
    & .k-list-item.k-hover,
    & .k-menu-item:hover > .k-link {
        background-color: var(--brand-50) !important;
        color: var(--gray-900);
    }

    & .k-list-item.k-selected,
    & .k-list-item.k-selected:hover {
        background-color: var(--brand-100) !important;
        color: var(--gray-900) !important;
    }

    & .k-list-group-sticky-header,
    & .k-list-header {
        background-color: var(--gray-100);
        color: var(--gray-700);
        border-color: var(--gray-300);
    }

    & .k-no-data {
        color: var(--gray-500);
    }

    /* ── Calendar / date picker popup ── */
    & .k-calendar,
    & .k-calendar-view,
    & .k-time-list-container,
    & .k-time-list-wrapper,
    & .k-datetime-container {
        background-color: var(--white) !important;
        color: var(--gray-900);
        border-color: var(--gray-300);
    }

    & .k-calendar .k-calendar-th,
    & .k-calendar .k-calendar-caption,
    & .k-calendar .k-meta-header,
    & .k-time-list-wrapper .k-title {
        color: var(--gray-700);
    }

    & .k-calendar .k-link {
        color: var(--gray-900);
    }

    & .k-calendar .k-other-month .k-link {
        color: var(--gray-500);
    }

    & .k-calendar .k-link:hover,
    & .k-calendar .k-hover .k-link {
        background-color: var(--brand-50);
        color: var(--gray-900);
    }

    & .k-calendar .k-selected .k-link,
    & .k-calendar .k-selected:hover .k-link {
        background-color: var(--brand-600) !important;
        color: var(--text-on-brand) !important;
    }

    & .k-calendar .k-today .k-link {
        color: var(--brand-400);
    }

    & .k-time-list .k-item:hover {
        background-color: var(--brand-50);
    }

    & .k-time-list .k-item.k-selected {
        background-color: var(--brand-600);
        color: var(--text-on-brand);
    }

    /* ── Grid ── */
    & .k-grid,
    & .k-grid table {
        background-color: transparent;
        color: var(--gray-900);
    }

    & .k-grid-header,
    & .k-grid-header-wrap,
    & .k-grid .k-table-thead,
    & .k-grid th.k-table-th {
        background-color: var(--gray-100) !important;
        color: var(--gray-800);
        border-color: var(--gray-300);
    }

    & .k-grid .k-table-row,
    & .k-grid tr.k-table-row {
        background-color: var(--white);
        color: var(--gray-900);
    }

    & .k-grid .k-table-row:hover {
        background-color: var(--gray-100) !important;
    }

    & .k-grid tr.k-table-alt-row,
    & .k-grid tr.k-alt,
    & .k-grid .k-master-row.k-alt,
    & .k-grid .k-table-alt-row > td,
    & .k-grid tr.k-alt > td {
        background-color: var(--gray-50) !important;
        color: var(--gray-900) !important;
    }

    & .k-grid tr.k-table-alt-row:hover,
    & .k-grid tr.k-alt:hover {
        background-color: var(--gray-100) !important;
    }

    & .k-grid .k-table-row.k-selected,
    & .k-grid tr.k-selected,
    & .k-grid tr.k-selected > td {
        background-color: var(--brand-100) !important;
        color: var(--gray-900) !important;
    }

    & .k-grid td,
    & .k-grid .k-table-td {
        border-color: var(--gray-200);
    }

    & .k-grid-footer,
    & .k-grid-pager,
    & .k-pager {
        background-color: var(--gray-100);
        color: var(--gray-700);
        border-color: var(--gray-300);
    }

    /* ── Window / Dialog ── */
    & .k-window,
    & .k-dialog {
        background-color: var(--white);
        color: var(--gray-900);
        border: 1px solid var(--gray-300);
    }

    & .k-window-titlebar,
    & .k-dialog-titlebar {
        background-color: var(--white);
        color: var(--gray-900);
        border-bottom: 1px solid var(--gray-200);
    }

    & .k-overlay {
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

    /* ── Default (non-primary) Kendo buttons (e.g. Cancel) ── */
    & .k-button-solid-base:not(.js-editor-fullscreen):not(.js-editor-insert-image):not(.js-editor-ai-btn):not([data-command]) {
        background-color: var(--white);
        color: var(--gray-700);
        border-color: var(--gray-300);
    }

    & .k-button-solid-base:not(.js-editor-fullscreen):not(.js-editor-insert-image):not(.js-editor-ai-btn):not([data-command]):hover {
        background-color: var(--gray-100);
    }

    /* ── Toolbar / TabStrip ── */
    & .k-toolbar {
        background-color: var(--white);
        border-color: var(--gray-200);
        color: var(--gray-700);
    }

    & .k-tabstrip-items-wrapper {
        border-color: var(--gray-200);
    }

    & .k-tabstrip-items .k-link {
        color: var(--gray-700);
    }

    & .k-tabstrip-items .k-item.k-active .k-link,
    & .k-tabstrip-items .k-item.k-state-active .k-link {
        color: var(--brand-400);
    }

    /* ── Notification / tooltip ── */
    & .k-tooltip {
        background-color: var(--gray-900);
        color: var(--white);
        border-color: var(--gray-700);
    }

    /* ── Kendo Scheduler / Calendar ── */
    & .k-scheduler,
    & .k-scheduler-layout {
        background-color: var(--white);
        color: var(--gray-900);
        border-color: var(--gray-300);
    }

    & .k-scheduler-head,
    & .k-scheduler-body,
    & .k-scheduler-columns {
        background-color: var(--white);
        border-color: var(--gray-200);
    }

    & .k-scheduler-head .k-scheduler-cell,
    & .k-scheduler-head th,
    & .k-scheduler .k-heading-cell {
        background-color: var(--gray-100) !important;
        color: var(--gray-600) !important;
        border-color: var(--gray-200) !important;
    }

    /* Kendo overrides .k-heading-cell .k-link with primary color for weekends */
    & .k-scheduler .k-heading-cell .k-link,
    & .k-scheduler .k-heading-cell a,
    & .k-scheduler .k-scheduler-head .k-link,
    & .k-scheduler .k-heading-cell.k-weekend .k-link,
    & .k-scheduler .k-heading-cell.k-weekend a,
    & .k-scheduler .k-scheduler-head .k-table-th .k-link,
    & .k-scheduler .k-scheduler-head th .k-link,
    & .k-scheduler .k-scheduler-head td .k-link,
    & .k-scheduler-head .k-heading-cell span,
    & .k-scheduler-head .k-heading-cell .k-link span {
        color: var(--gray-600) !important;
        text-decoration: none !important;
    }

    & .k-scheduler .k-scheduler-cell,
    & .k-scheduler td {
        background-color: var(--white);
        color: var(--gray-700);
        border-color: var(--gray-200);
    }

    /* "today" cell — заменяем Kendo-жёлтый на translucent brand */
    & .k-scheduler .k-today,
    & .k-scheduler .k-today > .k-scheduler-cell,
    & .k-scheduler td.k-today {
        background-color: rgba(127, 86, 217, 0.12) !important;
    }

    & .k-scheduler .k-today .k-scheduler-cell-header,
    & .k-scheduler td.k-today .k-link {
        color: var(--brand-400) !important;
        font-weight: 600;
    }

    /* Non-current month cells */
    & .k-scheduler .k-other-month {
        background-color: var(--gray-50) !important;
    }

    & .k-scheduler .k-other-month .k-link {
        color: var(--gray-500) !important;
    }

    /* Month view date numbers */
    & .k-scheduler .k-link {
        color: var(--gray-700);
    }

    /* Event blocks */
    & .k-scheduler .k-event {
        background-color: var(--brand-600) !important;
        color: var(--text-on-brand) !important;
        border: none;
        opacity: 0.9;
    }

    & .k-scheduler .k-event:hover {
        opacity: 1;
        filter: brightness(1.15);
    }

    & .k-scheduler .k-event.k-selected,
    & .k-scheduler .k-event:focus {
        box-shadow: 0 0 0 2px var(--brand-300) !important;
        outline: none;
    }

    /* Toolbar / nav buttons */
    & .k-scheduler .k-toolbar,
    & .k-scheduler-toolbar {
        background-color: var(--white) !important;
        border-color: var(--gray-200) !important;
        color: var(--gray-800) !important;
    }

    /* Toolbar buttons (Week/Day/Month/Today) */
    & .k-scheduler-toolbar .k-button,
    & .k-scheduler-toolbar .k-button-md,
    & .k-scheduler-toolbar .k-nav-current {
        background-color: var(--gray-100) !important;
        color: var(--gray-800) !important;
        border-color: var(--gray-300) !important;
    }

    & .k-scheduler-toolbar .k-button:hover,
    & .k-scheduler-toolbar .k-button-md:hover {
        background-color: var(--gray-200) !important;
    }

    & .k-scheduler-toolbar .k-button.k-selected,
    & .k-scheduler-toolbar .k-button.k-state-selected {
        background-color: var(--brand-600) !important;
        color: var(--text-on-brand) !important;
        border-color: var(--brand-600) !important;
    }

    /* select/input inside toolbar (e.g. "30 min") */
    & .k-scheduler-toolbar select,
    & .k-scheduler-toolbar .k-dropdownlist,
    & .k-scheduler-toolbar .k-picker {
        background-color: var(--gray-100) !important;
        color: var(--gray-800) !important;
        border-color: var(--gray-300) !important;
    }

    /* ── Scrollbar (WebKit) ── */
    & ::-webkit-scrollbar {
        width: 10px;
        height: 10px;
    }

    & ::-webkit-scrollbar-track {
        background: transparent;
    }

    & ::-webkit-scrollbar-thumb {
        background: var(--gray-300);
        border-radius: 5px;
    }

    & ::-webkit-scrollbar-thumb:hover {
        background: var(--gray-400);
    }
}

/* Применяется когда [data-accent="dark"] на <html> (а не на потомке) */
html[data-accent="dark"] .k-animation-container,
html[data-accent="dark"] .k-popup,
html[data-accent="dark"] .k-list-container,
html[data-accent="dark"] .k-calendar,
html[data-accent="dark"] .k-list,
html[data-accent="dark"] .k-menu-popup {
    background-color: var(--white);
    color: var(--gray-900);
    border-color: var(--gray-300);
}

html[data-accent="dark"] .k-list-container .k-list-item,
html[data-accent="dark"] .k-popup .k-list-item {
    color: var(--gray-900);
}

html[data-accent="dark"] .k-list-container .k-list-item:hover,
html[data-accent="dark"] .k-popup .k-list-item:hover,
html[data-accent="dark"] .k-list-container .k-list-item.k-hover,
html[data-accent="dark"] .k-popup .k-list-item.k-hover {
    background-color: var(--brand-50) !important;
    color: var(--gray-900);
}

html[data-accent="dark"] .k-list-container .k-list-item.k-selected,
html[data-accent="dark"] .k-popup .k-list-item.k-selected {
    background-color: var(--brand-100) !important;
    color: var(--gray-900) !important;
}

/* Scheduler day-name labels at html level */
html[data-accent="dark"] .k-scheduler .k-heading-cell,
html[data-accent="dark"] .k-scheduler .k-heading-cell .k-link,
html[data-accent="dark"] .k-scheduler .k-heading-cell a,
html[data-accent="dark"] .k-scheduler .k-heading-cell.k-weekend .k-link,
html[data-accent="dark"] .k-scheduler .k-heading-cell.k-weekend a,
html[data-accent="dark"] .k-scheduler .k-scheduler-head th .k-link,
html[data-accent="dark"] .k-scheduler .k-scheduler-head td .k-link,
html[data-accent="dark"] .k-scheduler-head .k-heading-cell span {
    color: var(--gray-600) !important;
}

html[data-accent="dark"] .k-scheduler .k-today .k-link,
html[data-accent="dark"] .k-scheduler td.k-today .k-link {
    color: var(--brand-400) !important;
    font-weight: 600;
}

/* Scheduler toolbar background */
html[data-accent="dark"] .k-scheduler .k-toolbar,
html[data-accent="dark"] .k-scheduler-toolbar {
    background-color: var(--white) !important;
    border-color: var(--gray-200) !important;
    color: var(--gray-800) !important;
}

/* =========================================================
   Kendo Editor — table wizard dialogs → branded --eForm card
   ---------------------------------------------------------
   "Table Properties" / "Cell Properties" popups are rendered by
   Kendo directly into <body> with the wrapper class
   .k-editor-table-wizard-window (see kendo.custom.min.js). Unlike the
   editor's Link / HTML / Image popups (hand-built with --eForm in
   _EditorPartial.cshtml), these ship with the raw Telerik "Default"
   theme — coral-red primaryа button, red active tab, red checkbox,
   plain header — which clashes with the brand.

   Rather than physically move Kendo's form into a native <dialog>
   (its DropDownList / ColorPicker popups append to <body> and would
   render BEHIND a top-layer showModal() dialog, and its Confirm/Cancel
   handlers are bound directly to the buttons), we re-skin Kendo's own
   window IN PLACE into the same --eForm look: Kendo's plain titlebar is
   hidden and a branded header (icon badge + close + title) is injected
   into the content by eEditor.kendo.js; header + grey footer stay fixed
   while the body scrolls; the window is capped to the viewport. All Kendo
   fields / popups / apply-logic stay untouched.

   The window radius comes from eWindow.css. Everything here is token-based
   → works in light AND dark. Scope is the wizard wrapper only (unique
   class), so no other Kendo window is affected. Rollback = delete this
   section AND the decorator in eEditor.kendo.js. ========================= */

/* ── Fit to viewport: pin the window near the top + cap its height.
      Pinning (top) instead of relying on Kendo's open-time centering avoids
      the tall-dialog bug (Kendo centres by measured height → top goes
      negative → header/footer clipped) and is immune to the branded header
      we inject asynchronously changing the height afterwards. ── */
.eControls .k-window:has(.k-editor-table-wizard-window) {
    top: 16px !important;
    max-height: calc(100vh - 32px);
    /* Give the card a visible outline + shadow so it reads as a contained
       popup like the --eForm dialogs (eWindow.css strips both site-wide;
       box-shadow there is !important, so we must restate it !important). */
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg) !important;
    /* Clip content to the rounded border so square child corners don't poke
       past it. Safe: the body's own overflow-y is a nested scroll, and Kendo's
       dropdown/colorpicker popups mount to <body> (siblings, not descendants). */
    overflow: hidden;
}

/* Kendo's native titlebar is hidden — a branded --eForm header is injected
   into the content instead (see eEditor.kendo.js). Dragging by the titlebar
   is lost, which is acceptable for a modal dialog. */
.eControls .k-window:has(.k-editor-table-wizard-window) .k-window-titlebar {
    display: none;
}

/* The wizard wrapper IS the .k-window-content node (Kendo only adds the class
   to it — they are the same element, not parent/child). It is a flex column
   (from eWindow.css). Cap + clip it so its children own the scroll: the
   injected header and the footer stay fixed, only the body scrolls. */
.eControls .k-editor-table-wizard-window {
    padding: 0 !important;
    max-height: calc(100vh - 32px) !important;   /* beat Kendo's inline max-height */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--white);
    color: var(--gray-900);
}

/* Body = the single scroll region (table → tabstrip, cell → the form).
   Direct-child structure confirmed from the Kendo wizard templates. */
.eControls .k-editor-table-wizard-window > .k-root-tabs,
.eControls .k-editor-table-wizard-window > #k-cell-properties {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--spacing-2xl) var(--spacing-3xl);
}

/* ── Injected --eForm header (eEditor.kendo.js): icon badge + close on top,
      title below. Fixed (does not scroll). Reuses the global .svg__wrapper
      badge and .text-lg / .font-semibold type classes. ── */
.eControls .k-editor-table-wizard-window > .eWizardHeader {
    flex: 0 0 auto;
    padding: var(--spacing-2xl) var(--spacing-3xl) var(--spacing-xl);
    border-bottom: 1px solid var(--gray-200);
    background: var(--white);
}

.eControls .k-editor-table-wizard-window > .eWizardHeader .eWizardHeader__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-lg);
}

/* .svg__wrapper (eIcon.css) has its flex centering commented out, so the
   injected svg-icon glyph would sit un-centred at its natural size. Centre
   and size it here. svg-icon renders an inline <svg> (or an <img> fallback). */
.eControls .k-editor-table-wizard-window > .eWizardHeader .svg__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.eControls .k-editor-table-wizard-window > .eWizardHeader .svg__wrapper svg,
.eControls .k-editor-table-wizard-window > .eWizardHeader .svg__wrapper img {
    display: block;
    width: 24px;
    height: 24px;
}

.eControls .k-editor-table-wizard-window > .eWizardHeader .eWizardHeader__close {
    background: none;
    border: none;
    padding: 4px;
    line-height: 0;
    cursor: pointer;
}

.eControls .k-editor-table-wizard-window > .eWizardHeader .eWizardHeader__title {
    color: var(--gray-900);
}

/* ── Fixed grey footer panel like --ePanel ── */
.eControls .k-editor-table-wizard-window > .k-actions.k-window-buttons {
    flex: 0 0 auto;
    margin: 0;
    padding: var(--spacing-xl) var(--spacing-3xl);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
    border-radius: 0 0 var(--radius-2xl) var(--radius-2xl);
    gap: var(--spacing-md);
}

/* Full-width, side-by-side buttons like the --eForm footer */
.eControls .k-editor-table-wizard-window > .k-actions.k-window-buttons > .k-button {
    flex: 1 1 0;
    max-width: none;
}

/* Mobile: eWindow.css forces the window to square corners (border-radius:0),
   so drop the footer's rounded bottom to match and avoid a "notch". */
@media (max-width: 767px) {
    .eControls .k-editor-table-wizard-window > .k-actions.k-window-buttons {
        border-radius: 0;
    }
}

/* ── Tabs (General / Advanced) — recolour the red active text to brand.
      Only the text colour is touched — borders are left as Telerik draws
      them (incl. the transparent bottom edge that blends the active tab
      into the panel below), so no "box seam" appears. ── */
.eControls .k-editor-table-wizard-window .k-root-tabs .k-item.k-active,
.eControls .k-editor-table-wizard-window .k-root-tabs .k-item.k-active .k-link {
    color: var(--brand-600) !important;
}

/* Drop the tabstrip's inner frame borders — the header wrapper, the active
   panel (form), and the box Telerik draws around the active tab item — so the
   tab area sits flush inside the branded card. */
.eControls .k-editor-table-wizard-window .k-tabstrip-items-wrapper,
.eControls .k-editor-table-wizard-window .k-tabstrip-content.k-active,
.eControls .k-editor-table-wizard-window .k-root-tabs .k-tabstrip-item.k-active {
    border: none !important;
}

/* Kill the focus box-shadow ring Telerik puts on a focused tab item. */
.eControls .k-editor-table-wizard-window .k-tabstrip-items-wrapper .k-item.k-focus {
    box-shadow: none !important;
}

/* ── Checkbox accent (Independent Cell Paddings / Apply to all cells).
      Only fill + border are branded; the checkmark keeps Telerik's
      on-primary colour, so it stays readable. ── */
.eControls .k-editor-table-wizard-window .k-checkbox:checked,
.eControls .k-editor-table-wizard-window .k-checkbox.k-checked {
    background-color: var(--brand-600) !important;
    border-color: var(--brand-600) !important;
}

/* ── Footer action buttons (only .k-dialog-ok / .k-dialog-close render
      in the table & cell wizards). !important is required to beat both
      the Telerik theme and the dark-mode .k-button-solid-base block above. ── */
.eControls .k-editor-table-wizard-window .k-dialog-ok,
.eControls .k-editor-table-wizard-window .k-dialog-close {
    border-radius: var(--radius-md);
    font-weight: 600;
    padding: var(--spacing-md) var(--spacing-lg);
}

/* Confirm (primary) → brand */
.eControls .k-editor-table-wizard-window .k-dialog-ok {
    background: var(--brand-600) !important;
    border: 1px solid var(--brand-600) !important;
    color: var(--text-on-brand) !important;
}

.eControls .k-editor-table-wizard-window .k-dialog-ok:hover {
    background: var(--brand-700) !important;
    border-color: var(--brand-700) !important;
}

/* Cancel (secondary) → neutral outline */
.eControls .k-editor-table-wizard-window .k-dialog-close {
    background: var(--white) !important;
    border: 1px solid var(--gray-300) !important;
    color: var(--gray-700) !important;
}

.eControls .k-editor-table-wizard-window .k-dialog-close:hover {
    background: var(--gray-100) !important;
}

/* ── Input / picker focus → brand border (kills Telerik's coral focus) ── */
.eControls .k-editor-table-wizard-window .k-input-solid:focus-within,
.eControls .k-editor-table-wizard-window .k-picker-solid:focus-within {
    border-color: var(--brand-600);
}

}

@layer project {

/* ---- /css/eIcon/eIcon.css ---- */
.eIcon .--eWrapper__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 60px;
    width: 60px;

    background: var(--brand-50);
    border-radius: 50%;
}

.eIcon .--eIcon {
    font-size: var(--font-size-text-lg);

    &.fa-trash,
    &.fa-pen-to-square,
    &.fa-circle-plus,
    &.fa-user-group,
    &.fa-book-copy {
        color: var(--brand-500);
    }

    &.fa-circle-check {
        color: green;
    }

    &.fa-circle-xmark {
        color: red;
    }
}

.eIcon .svg__wrapper {
    width: 48px;
    height: 48px;
    /*display: flex;*/
    padding: 6px;
    background: var(--brand-100);
    align-items: center;
    /*justify-content: center;*/
    border-radius: 50%;
}

.eIcon .eIconArrow::before {
    content: "\e014";
}



.eIcon .eUrgentDot {
    position: absolute;
    top: -12px;
    left: -10px;
}

.eIcon .eUrgentDot::before {
    font-family: "Font Awesome 6 Pro";
    content: "\f071";
    width: 24px;
    height: 24px;
    font-size: 24px;
    text-shadow: 1px 0 0 var(--white),
        -1px 0 0 var(--white),
        0 1px 0 var(--white),
        0 -1px 0 var(--white),
        1px 1px 0 var(--white),
        -1px 1px 0 var(--white),
        1px -1px 0 var(--white),
        -1px -1px 0 var(--white);
    color: #DC6803;
}

.eIcon {
    & .eRevertAI::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f2ea";
        width: 20px;
        height: 16px;
        font-size: 12px;
    }

    & .eImproveAI::before {
        font-family: "Font Awesome 6 Pro";
        content: "\e2ca";
        width: 20px;
        height: 16px;
        font-size: 12px;
    }

    & .eImproveSettingsAI::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f1de";
        width: 20px;
        height: 16px;
        font-size: 12px;
    }

    & .eInsertLocalImage::before {
        font-family: "Font Awesome 6 Pro";
        content: "\e1b5";
        width: 20px;
        height: 24px;
        font-size: 16px;
    }

    & .eFullScreenIcon::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f31d";
        width: 16px;
        height: 16px;
        font-size: 14px;
    }
}

.eIcon {
    & .eIconUsers,
    & .eIconAccount,
    & .eIconSheld,
    & .eIconEmail {
        display: flex;
        text-align: center;
    }

    & .eIconUsers::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f0c0";
        width: 34px;
        height: 34px;
        font-size: 20px; 
    }

    & .eIconAccount::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f7f3";
        width: 34px;
        height: 34px;
        font-size: 20px; 
    }

    & .eIconSheld::before {
        font-family: "Font Awesome 6 Pro";
        content: "\f2f7";
        font-size: 28px; 
    }

    & .eIconEmail:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f0e0";
        width: 34px;
        font-size: 20px; 
    }

    & .eIconBulb:before {
        font-family: "Font Awesome 6 Pro";
        content: "\f672";
        width: 34px;
        font-size: 28px; 
    }
}

/* Bool column Templates */
.eTemplateColumn_GreenOkIcon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--success-500);
    border: 1px solid #20c997;
    vertical-align: middle;
    position: relative;
    text-align: center;
    line-height: 16px;
    font-size: 10px;
    color: var(--white);
    font-weight: bold;
}

.eTemplateColumn_GreenOkIcon::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: bold;
    color: var(--white);
}

/* Yellow circle - Warning/Caution status with checkmark */
.eTemplateColumn_YellowOkIcon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--warning-300);
    border: 1px solid #f39c12;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: var(--white);
}

.eTemplateColumn_YellowOkIcon::before {
    content: "⚠";
    font-weight: bold;
}

/* Red circle - Error/Failed status with X mark */
.eTemplateColumn_RedCrossIcon {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--error-500);
    border: 1px solid #c82333;
    vertical-align: middle;
    position: relative;
}

.eTemplateColumn_RedCrossIcon::before,
.eTemplateColumn_RedCrossIcon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 1.5px;
    background-color: var(--white);
    border-radius: 1px;
}

.eTemplateColumn_RedCrossIcon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}

.eTemplateColumn_RedCrossIcon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Empty circle - No status/Neutral */
.eTemplateColumn_EmptyIcon {
    display: inline-flex;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #e9ecef;
    border: 1px solid #dee2e6;
    vertical-align: middle;
}

/* ── Status Pill ── */
.eStatusPill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 16px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 500;
    white-space: break-spaces;
    line-height: 1.4;
}

/*.eStatusPill::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: currentColor;
}*/

.eStatusPill--green  { color: #16a34a; background: #f0fdf4; border-color: #bbf7d0; }
.eStatusPill--red    { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
.eStatusPill--yellow { color: #d97706; background: #fffbeb; border-color: #fde68a; }
.eStatusPill--gray   { color: #6b7280; background: #f8fafc; border-color: #cbd5e1; }
.eStatusPill--purple { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; }
.eStatusPill--orange { color: #ea580c; background: #fff7ed; border-color: #fed7aa; }
.eStatusPill--blue   { color: #2563eb; background: #eff6ff; border-color: #bfdbfe; }

}

@layer core {

/* ---- /css/site.css ---- */


/* =========================================================
    GLOBAL RESETS
========================================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    font-family: var(--font-family);
}

body {
    margin: 0;
    font-family: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.45;
    background: var(--bg-color) !important;
    color: var(--gray-800);
    font-size: var(--font-size-base); /*calc(var(--index) * .65)*/
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 600;
}

.eBlind {
    & h1, 
    & h2, 
    & h3, 
    & h4, 
    & h5, 
    & h6 {
        margin: 0;
        font-weight: 900 !important;
        color: green !important;
    }
}

p {
    margin: 0;
}

button {
    font-family: inherit;
}

.content-wrapper {
    flex: 1 1 0;
    height: 100vh;
    overflow-y: auto;
    padding: var(--spacing-md) var(--spacing-2xl) var(--spacing-md) var(--spacing-2xl);
    display: flex;
    flex-direction: column;
}


/* Overlay that creates the blur effect */
#blurOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(5px);
    /* Above Kendo Windows/Dialogs (they get 10001 and up) so the blocking loader stays visible
       when an action is started from inside a modal popup. Keep #MainPageLoader one step higher. */
    z-index: 10050;
    display: none;
}

.admin {
    display: flex;
    min-height: 100vh;
    overflow: hidden; /* Sidebar stays fixed; content scrolls */
    height: 100%;
}

.--eMargin {
    margin: var(--eMarginTop, 0) var(--eMarginRight, 0) var(--eMarginBottom, 0) var(--eMarginLeft, 0);
}

.portal__menu {
    /*max-height: calc(100vh - 544px);*/
    height: fit-content; /*100%*/
    overflow: auto;
    padding: 0;
}

.--eFlex {
    display: flex;
    justify-content: var(--eFlexJC, space-between);
    align-items: center;
    gap: var(--eFlexGap, var(--spacing-xs));
}

.--eGrid {
    display: grid;
    gap: var(--eGridGap, 12px);
}

.visually-hidden {
    position: absolute !important;
    width: 1px; 
    height: 1px;
    margin: -1px; 
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); 
    clip-path: inset(50%); 
    white-space: nowrap; 
}

.--eEllipsis {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.font-regular {
    font-weight: var(--font-weight-regular);
}

.font-medium {
    font-weight: var(--font-weight-medium);
}

.font-semibold {
    font-weight: var(--font-weight-semibold);
}

.font-bold {
    font-weight: var(--font-weight-bold);
}

/* === Letter Spacing Helpers === */
.letter-normal {
    letter-spacing: normal;
}

.letter-tight {
    letter-spacing: -0.02em;
}

.letter-loose {
    letter-spacing: 0.05em;
}


.skeleton {
    min-height: 64px;
    background: var(--gray-100);
}

/*html {
    scrollbar-gutter: stable both-edges;
}*/

/* MultiSelect hide remove buttons */
.e-multiselect-no-remove .k-input-values .k-select {
    display: none !important;
}

/*.bg__img:has( .thumb[src$=".svg"]) {
    background: radial-gradient(circle, var(--white) 0%, var(--brand-150) 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: var(--radius-md);
}*/

.thumb {
    border-radius: var(--radius-md);
    object-fit: cover;
    object-position: center;

    &[src$=".svg"] {
        object-fit: none;
    }
}

.eView {
    & .thumb {
        width: 100%;
        height: 200px;
    }
}

/*Scroll start*/
:root {
    --sb-thumb: rgba(0,0,0,.25);
    --sb-thumb-hover: rgba(0,0,0,.45);
}

/* В Chrome/Edge/Safari */
*::-webkit-scrollbar {
    width: 8px; /* fixed zone - no layout shifts */
    height: 8px;
    background: transparent; /* The track is transparent and looks like an overlay. */
    position: absolute;
    z-index: 3;
}

*::-webkit-scrollbar-thumb {
    background: var(--sb-thumb);
    border-radius: 999px;
    /* "Thin" look thanks to the transparent frame (the clickable area remains 8px) */
    border: 4px solid transparent;
    background-clip: padding-box;
    transition: border-width .15s ease, background-color .15s ease, opacity .15s ease;
}

/* Hover exactly on the slider (without sticking) */
*::-webkit-scrollbar-thumb:hover {
    border-width: 1px; /* visually thicker */
    background-color: var(--sb-thumb-hover);
    cursor: pointer;
}

/* (optional) reaction if the cursor is over the track - also thicken */
*::-webkit-scrollbar:hover {
    /* don't change anything in the size of the zone (to avoid displacements) */
}

*::-webkit-scrollbar:hover *::-webkit-scrollbar-thumb { /* just in case for nested */
    border-width: 4px;
}

/* Active — при перетаскивании */
*::-webkit-scrollbar-thumb:active {
    background-color: rgba(0,0,0,.6);
}

/* Active - when dragging */
/** {
    scrollbar-width: thin;*/ /* тонкий по умолчанию */
    /*scrollbar-color: var(--sb-thumb) transparent;*/ /* цвет/трек */
/*}*/

/* «Расширение» на ховере в FF без анимации: */
/** :hover {
    scrollbar-width: auto;
}*/

.--eNav > section {
    overflow: auto;
}

.--eNav > section .portal__menu {
    overflow: hidden;
} 

.--eNav > section::-webkit-scrollbar {
    width: 0;
}


/*Scroll end*/
.mood__edit-page {
    font-size: var(--font-size-text-xs);
    border: 1px solid var(--brand-800);
    background-color: var(--brand-100);
    color: var(--brand-800);
    padding: 3px 10px;
    border-radius: 16px;
    height: 24px;
    position: relative;
    top: -4px;
}

/* "You see this page as <Role>" inline label rendered at the top of the
   menu footer (just below the divider strip, above the user-name row).
   Only rendered when the user has 2+ distinct roles in the current
   association — the single-role majority never sees this. The role name
   itself is the interactive element (bold); the surrounding sentence is
   kept faint so the whole control stays unobtrusive. */
.portal-menu-role-as {
    font-size: 11px;
    color: var(--gray-500, #6b7280);
    padding: 6px 12px 8px;
    line-height: 1.4;
    position: relative;
    text-align: center;
}
.role-as__name--switchable {
    cursor: pointer;
    user-select: none;
    color: var(--gray-900, #111827);
    white-space: nowrap;
}
.role-as__name--switchable strong {
    border-bottom: 1px dotted currentColor;
    color: var(--brand-600);
}
.role-as__name--static {
    white-space: nowrap;
}
.role-as__name--static strong {
    color: var(--gray-900, #111827);
}
.role-as__arrow {
    font-size: 9px;
    margin-left: 2px;
}
/* The label lives in the menu footer, so the dropdown must open UPWARD —
   anchor to the bottom of the label and align horizontally to the centre. */
.role-as__menu {
    position: absolute;
    z-index: 100;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin: 0 0 4px 0;
    background: #fff;
    border: 1px solid var(--gray-200, #e5e7eb);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 4px 0;
    list-style: none;
    min-width: 160px;
    text-align: left;
}
.role-as__menu li {
    margin: 0;
}
.role-as__menu li a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
    color: var(--gray-900, #111827);
    font-size: 12px;
    white-space: nowrap;
}
.role-as__menu li a:hover {
    background: var(--gray-100, #f3f4f6);
}

.content-wrapper > form:not(:has(.eTabStrip)) {
    display: grid;
    gap: var(--spacing-3xl);
}

}

@layer project {

/* ---- /css/eModal/eModal.css ---- */
dialog {
    border-radius: var(--radius-2xl);
    border: none;
    padding: 0;
    min-width: 350px;
    max-width: var(--eDialogWidth, 500px);
    /*width: revert-layer;*/
    width: 100%;
    height: var(--eDialogHeight, fit-content);
}

dialog::backdrop {
    background: rgba(204, 204, 204, 0.45);
    backdrop-filter: blur(var(--spacing-xs));
    -webkit-backdrop-filter: blur(var(--spacing-xs));
}

dialog[open] {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.del-wrapper .k-dialog-titlebar,
.del-wrapper .k-window-titlebar {
    display: none;
}

.del-wrapper .k-dialog-buttongroup {
    border: none;
}

.content__pre-view {
    line-height: var(--line-height-text-sm);
    -webkit-appearance: none;
    white-space: pre-wrap;
    -moz-appearance: none;
    appearance: none;
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-300);
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    max-height: 600px;
}

.ePopup {
    display: none;
    flex: 1;
}

/* ---- /css/eAccessibility/eAccessibility.css ---- */
.eAccessibility {
    & #result {
        background: var(--gray-100);
        padding: 1rem;
        border-radius: 6px;
        overflow: auto;
        max-height: 60vh;
    }

    & .severity {
        margin-top: 1rem;
    }

    & .severity h3 {
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
    }

    & .item {
        margin: .5rem 0;
    }

    & .item h4 {
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
    }

    & .item a {
        color: #0064e5;
        text-decoration: underline;
    }

    & details {
        transition: all .25s ease;
        max-width: 450px;
        width: auto;
    }

    & details summary {
        cursor: pointer;
        font-weight: 600;
        list-style: none;
        display: flex;
        gap: 4px;
        justify-content: space-between;
        align-items: center;
    }

    & details p:not(.block__selector) {
        overflow: hidden;
        font-weight: 600;
    }

    & .block__selector {
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        color: var(--gray-600);
        padding: 8px;
        margin-bottom: 12px;
    }

    & details[open] summary::after,
    & details summary::after {
        content: '▶';
        float: right;
        transition: transform .25s;
    }

    & details[open] > summary::after {
        transform: rotate(180deg);
    }

    & .--eGrade {
        position: relative;
        padding-bottom: 12px;

        &::after {
            content: '';
            position: absolute;
            inset: 0;
            height: 12px;
            background: green;
            width: var(--eGradeWidth);
            border-radius: 6px;
        }

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            height: 12px;
            background: red;
            width: 100%;
            border-radius: 6px;
        }
    }
}

.wrapper__eAccessibilityBlind {
    position: absolute;
    z-index: 10;
    top: 10px;
    left: calc(50% - 50px);
    height: auto;
    width: 250px;
    border-radius: 8px;
    border: 1px solid var(--gray-300);
    box-shadow: 0 -3px 4px -2px rgba(0 0 0 / .2);
    background: rgba(204, 204, 204, 0.25); /*rgba(248, 249, 255, .25);*/
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 8px;
}

.wrapper__accessibility,
.wrapper__eAccessibilityBlind {
    display: none;

    &.open {
        display: block;
    }
}

.wrapper__accessibility {
    position: absolute;
    top: 50px;
    right: calc(50% - 150px);
    z-index: 2;
}

/* ---- /css/Global/eFonts.inter.css ---- */
@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter-roman.var.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    size-adjust: 102%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Inter";
    src: url("/fonts/Inter-italic.var.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    size-adjust: 102%;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* ---- /css/Global/eFontTitle.css ---- */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: var(--letter-spacing-display);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    color: var(--gray-800);
}

/*h1 {
    font-size: var(--font-size-display-2xl);
    line-height: var(--line-height-display-2xl);
}

h2 {
    font-size: var(--font-size-display-xl);
    line-height: var(--line-height-display-xl);
}

h3 {
    font-size: var(--font-size-display-lg);
    line-height: var(--line-height-display-lg);
}

h4 {
    font-size: var(--font-size-display-md);
    line-height: var(--line-height-display-md);
}

h5 {
    font-size: var(--font-size-display-sm);
    line-height: var(--line-height-display-sm);
}

h6 {
    font-size: var(--font-size-display-xs);
    line-height: var(--line-height-display-xs);
}*/

.display-2xl,
.display-xl,
.display-lg,
.display-md,
.display-sm,
.display-xs {
    letter-spacing: var(--letter-spacing-display);
    font-family: var(--font-family-base);
    font-weight: var(--font-weight-bold);
    color: var(--gray-800);
}

.display-2xl {
    font-size: var(--font-size-display-2xl);
    line-height: var(--line-height-display-2xl);
}

.display-xl {
    font-size: var(--font-size-display-xl);
    line-height: var(--line-height-display-xl);
}

.display-lg {
    font-size: var(--font-size-display-lg);
    line-height: var(--line-height-display-lg);
}

.display-md {
    font-size: var(--font-size-display-md);
    line-height: var(--line-height-display-md);
}

.display-sm {
    font-size: var(--font-size-display-sm);
    line-height: var(--line-height-display-sm);
}

.display-xs {
    font-size: var(--font-size-display-xs);
    line-height: var(--line-height-display-xs);
}

.eBlind {
    & h1, 
    & h2, 
    & h3, 
    & h4, 
    & h5, 
    & h6 {
        letter-spacing: var(--letter-spacing-display);
        font-family: var(--font-family-base);
        font-weight: var(--font-weight-bold);
        color: var(--gray-800);
    }

    & h1 {
        font-size: var(--font-size-display-2xl);
        line-height: var(--line-height-display-2xl);
    }

    & h2 {
        font-size: var(--font-size-display-xl);
        line-height: var(--line-height-display-xl);
    }

    & h3 {
        font-size: var(--font-size-display-lg);
        line-height: var(--line-height-display-lg);
    }

    & h4 {
        font-size: var(--font-size-display-md);
        line-height: var(--line-height-display-md);
    }

    & h5 {
        font-size: var(--font-size-display-sm);
        line-height: var(--line-height-display-sm);
    }

    & h6 {
        font-size: var(--font-size-display-xs);
        line-height: var(--line-height-display-xs);
    }

    & .display-2xl,
    & .display-xl,
    & .display-lg,
    & .display-md,
    & .display-sm,
    & .display-xs {
        letter-spacing: var(--letter-spacing-display);
        font-family: var(--font-family-base);
        color: var(--gray-800);
    }

    & .display-2xl {
        font-size: var(--font-size-display-2xl);
        line-height: var(--line-height-display-2xl);
    }

    & .display-xl {
        font-size: var(--font-size-display-xl);
        line-height: var(--line-height-display-xl);
    }

    & .display-lg {
        font-size: var(--font-size-display-lg);
        line-height: var(--line-height-display-lg);
    }

    & .display-md {
        font-size: var(--font-size-display-md);
        line-height: var(--line-height-display-md);
    }

   & .display-sm {
        font-size: var(--font-size-display-sm);
        line-height: var(--line-height-display-sm);
    }

    & .display-xs {
        font-size: var(--font-size-display-xs);
        line-height: var(--line-height-display-xs);
    }
}

/* ---- /css/Global/eFontText.css ---- */
.eCSSCore body .admin {
    & p {
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
        font-weight: var(--font-weight-regular);
        overflow-wrap: anywhere;
    }

    & .button,
    & .badge,
    & .label {
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
        font-weight: var(--font-weight-medium);
    }

    & input,
    & textarea,
    & select {
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
        font-weight: var(--font-weight-regular);
        overflow-wrap: anywhere;
    }

    & nav a,
    & .menu-item,
    & .list-item,
    & .secondary-text,
    & .caption,
    & small {
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
    }

    & nav a,
    & .menu-item,
    & .list-item {
        font-weight: var(--font-weight-medium);
    }

    & .secondary-text {
        font-weight: var(--font-weight-regular);
    }

    & .caption,
    & .small {
        font-weight: var(--font-weight-regular);
    }

    & *.text-xs {
        font-size: var(--font-size-text-xs);
        line-height: var(--line-height-text-xs);
    }

    & *.text-sm {
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
    }

    & *.text-md {
        font-size: var(--font-size-text-md);
        line-height: var(--line-height-text-md);
    }

    & *.text-lg {
        font-size: var(--font-size-text-lg);
        line-height: var(--line-height-text-lg);
    }

    & *.text-xl {
        font-size: var(--font-size-text-xl);
        line-height: var(--line-height-text-xl);
    }

    & *.text-2xl {
        font-size: var(--font-size-text-2xl);
        line-height: var(--line-height-text-2xl);
    }

    & .eBlind {
        & p {
            font-size: var(--font-size-text-lg); /*-md*/
            line-height: var(--line-height-text-lg); /*-md*/
            font-weight: var(--font-weight-regular);
        }

        & .button,
        & .badge,
        & .label {
            font-size: var(--font-size-text-lg); /*-md*/
            line-height: var(--line-height-text-lg); /*-md*/
            font-weight: var(--font-weight-medium);
        }

        & input,
        & textarea,
        & select {
            font-size: var(--font-size-text-lg); /*-md*/
            line-height: var(--line-height-text-lg); /*-md*/
            font-weight: var(--font-weight-regular);
        }

        & nav a,
        & .menu-item,
        & .list-item,
        & .secondary-text,
        & .caption,
        & small {
            font-size: var(--font-size-text-lg); /*-md*/
            line-height: var(--line-height-text-lg); /*-md*/
        }

        & nav a,
        & .menu-item,
        & .list-item {
            font-weight: var(--font-weight-medium);
        }

        & .secondary-text {
            font-weight: var(--font-weight-regular);
        }

        & .caption,
        & small {
            font-weight: var(--font-weight-regular);
        }

        & *.text-xs {
            font-size: var(--font-size-text-sm);
            line-height: var(--line-height-text-sm);
        }

        & *.text-sm {
            font-size: var(--font-size-text-md);
            line-height: var(--line-height-text-md);
        }

        & *.text-md {
            font-size: var(--font-size-text-lg);
            line-height: var(--line-height-text-lg);
        }

        & *.text-lg {
            font-size: var(--font-size-text-xl);
            line-height: var(--line-height-text-xl);
        }

        & *.text-xl {
            font-size: var(--font-size-text-2xl);
            line-height: var(--line-height-text-2xl);
        }

        & *.text-2sxl {
            font-size: var(--font-size-text-2xl);
            line-height: var(--line-height-text-2xl);
        }
    }
}

/* ---- /css/Global/eViewTransition.css ---- */
/* =========================================================================
   eViewTransition.css — cross-document (MPA) View Transitions

   Goal: on same-origin page navigation the left chrome (sidebar) stays put while
   only the main content pane (.content-wrapper) animates: the old page fades out
   and the new page rises up from below and fades in (a calm, premium "settle").

   How it works: the native cross-document View Transition API. Both the outgoing
   and the incoming document opt in via @view-transition, so the browser plays the
   animation automatically — no JavaScript drives it. This file is linked from the
   shared _Styles partials, so every page that uses them opts in.

   Support: Chromium 126+ (Chrome/Edge). Firefox/Safari ignore these at-rules and
   pseudo-elements and simply navigate normally — graceful degradation, nothing
   breaks. The whole feature sits under prefers-reduced-motion: no-preference, so a
   user who asks for reduced motion gets plain navigation too.

   Note: the navigation loader overlay (#blurOverlay) is hidden in the `pageswap`
   handler (site.js › NavigationLoader) so it is NOT captured into the outgoing
   snapshot and does not slide with the content. The console noise this API produces on every skip is
   absorbed in Views/Shared/_ViewTransitionGuard.cshtml — read that file before touching this one.

   Known risk: @view-transition inside a cascade layer is not covered by the spec. The algorithm reads
   "let matchingRule be the last @view-transition rule in document" and says nothing about layers, yet
   this file reaches the layer both ways (@import … layer(project) in the dev branch, an @layer project
   wrapper in the generated bundle). Chromium honours it today. If cross-document transitions ever stop
   firing with no change on our side, lifting this rule out of the layer is the first thing to try.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {

    /* Opt every same-origin navigation into a cross-document transition. Must be
       present in BOTH the old and the new document — it is, via the shared layout. */
    @view-transition {
        navigation: auto;
    }

    /* --- The content pane: the only thing that moves --------------------- */
    /* Lifting it into its own named group lets it animate independently of the
       chrome. Its snapshot is rendered in the top-layer VT overlay, so the
       .admin { overflow: hidden } / its own overflow-y do not clip the animation. */
    .content-wrapper {
        view-transition-name: page-content;
    }

    /* Premium "rise + fade" (Stripe / Linear / Vercel-style):
       - the old page fades out FAST so there is no long muddy cross-fade;
       - the new page rises up from below and fades in with an ease-out "settle".
       Durations are set per pseudo-element (not relying on the group's inherited
       duration) so the asymmetric quick-out / graceful-in timing is explicit. */
    ::view-transition-group(page-content) {
        animation-duration: 0.5s;
    }

    ::view-transition-old(page-content) {
        animation-name: evt-zoom-out;
        animation-duration: 0.22s;
        animation-timing-function: ease-in;
    }

    ::view-transition-new(page-content) {
        animation-name: evt-rise-zoom-in;
        animation-duration: 0.5s;
        /* easeOutExpo — decisive start, soft landing; reads as "settling into place" */
        animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* --- The sidebar: kept genuinely static ----------------------------- */
    /* The active menu item and the expanded accordion differ between pages in
       different menu groups. Left in the default `root` group that difference
       would cross-fade (a visible shimmer / height wobble). Giving the sidebar its
       own group and cancelling all of its animation makes the new snapshot appear
       instantly and hold for the whole transition — no slide, no fade. If a browser
       ignored the override it would merely fall back to the same cross-fade as if
       the sidebar were unnamed, so there is no downside.

       INVARIANT: page-sidebar must match EXACTLY ONE rendered element per document.
       A view-transition-name shared by two elements aborts the whole transition with
       an InvalidStateError — no animation anywhere on the page, not just here. That
       is why this is keyed on the layout's #sidebar id and not on the .sidebar class:
       the class is reused for surface styling elsewhere (the dashboards' "All Blocks"
       popup, the FullCalendar test page), and every such reuse would silently break
       navigation. An id is not enforced by the browser - a duplicate one is swallowed
       silently - but it is declared once, in one layout, so the invariant has a single
       place to hold rather than one per page that happens to want the class.

       Side effect, deliberate: the empty <aside class="sidebar"> in the Razor Pages
       layout (Pages/Shared/_Layout.cshtml) has no id and so stays in the root group.
       It has no content to shimmer, so it loses nothing. */
    #sidebar {
        view-transition-name: page-sidebar;
    }

    ::view-transition-group(page-sidebar),
    ::view-transition-old(page-sidebar),
    ::view-transition-new(page-sidebar) {
        animation: none;
    }

    ::view-transition-old(page-sidebar) {
        opacity: 0; /* drop the old snapshot immediately */
    }

    ::view-transition-new(page-sidebar) {
        opacity: 1; /* show the new snapshot immediately */
    }

    /* --- Everything else (favorite/help rails, chrome) ------------------ */
    /* Identical across authorized pages, so keep the root swap short and quiet. */
    ::view-transition-group(root) {
        animation-duration: 0.25s;
    }

    /* Old content fades out while easing back slightly (scale 1 → 0.99) — a small
       "step back" that makes the departure clearly readable without any translation. */
    @keyframes evt-zoom-out {
        to {
            opacity: 0;
            transform: scale(0.99);
        }
    }

    /* New content rises up from below AND zooms in slightly (scale 0.96 → 1) while
       fading in. The second dimension (scale) is what makes the transition obviously
       readable yet premium — it reads as content "settling into place", never as a
       glitch. Vertical motion keeps it entirely clear of the sidebar. */
    @keyframes evt-rise-zoom-in {
        from {
            opacity: 0;
            transform: translateY(56px) scale(0.96);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
}

/* ---- /css/Global/eColor.css ---- */
.e-text-primary {
    color: var(--gray-900);
}

.e-text-secondary {
    color: var(--gray-600);
}

.e-text-tertiary {
    color: var(--gray-500);
}

.e-text-heading {
    color: var(--gray-800);
}

.e-text-link {
    color: var(--brand-600);

    &:hover {
        color: var(--brand-800);
        text-decoration: underline;
    }

}

.e-text-success {
    color: var(--success-700);
}

.e-text-warning {
    color: var(--warning-700);
}

.e-text-error {
    color: var(--error-700);
}

.e-text-white {
    color: var(--white);
}

.e-text-black {
    color: var(--black);
}

a,
a .e-text-primary {
    color: var(--brand-600);
    text-decoration: none;
}
}