/* 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 BUNDLE-SOURCES region of
 * _Styles.cshtml and are the CSS cascade.
 */

/* ---- /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/eForm/eForm.css ---- */
.eForm .--eSection {
    padding: var(--ePageTop, 24px) var(--ePageRight, 0) var(--ePageBottom, 64px) var(--ePageLeft, 0);
}

.eForm .--ePanel {
    position: sticky;
    bottom: 0;
    background: var(--gray-50) !important; /*0.08*/
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}

.eForm .--eForm {
    --_computedPadding: var(--eFormPadding);
    --_computedMaxW: var(--eFormMaxWidth);
    background: var(--eFormBg, var(--white));
    box-shadow: var(--eFormShadow, none);
    border-radius: var(--eFormBorderR, var(--radius-md));
    padding: var(--_computedPadding, var(--spacing-3xl));
    max-width: var(--_computedMaxW, 100%);
    width: var(--eFormW, 100%);
    display: flex;
    flex-direction: column;
    gap: var(--eFormGap, var(--spacing-md));
    transition: box-shadow 0.2s ease;
    outline: none;
    border-style: solid;
    border-color: var(--eFormBorderColor, none);
    border-width: var(--eFormBorderW, 0);
    justify-content: var(--eFormJC, none);
    margin: var(--eFormMargin, 0);
    align-items: var(--eFormAlignItem, flex-start);
    /*--eFormH: auto;*/

    height: var(--eFormH, 100%);

    &.--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, -webkit-fill-available);
        }
    }

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

    &: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 { /* just in case for nested */
        border-width: 4px;
    }

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

    &:not(.stop__container, .--eFormScroll) {
        container: eForm / inline-size;
        position: relative;
        z-index: 1;
    }

    @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;
        }
    }
}

.eForm .editor-fullscreen-open .--eForm {
    &:not(.stop__container, .--eFormScroll) {
        z-index: revert !important;
    }
}

.eForm .--eTitle {
    display: flex;
    align-items: var(--eTitleAlIt, center);
    justify-content: var(--eTitleJC, space-between);
    gap: var(--eTitleGap, var(--spacing-xl));
    margin-bottom: var(--eTitleMarginB, 4px);
    padding-bottom: var(--eTitlePaddingB, 4px);
    border-bottom: var(--eTitleBorderB, none);
    width: 100%;
    max-width: var(--eTitleW, 100%);

    & .priority__title {
        /*font-size: var(--font-size-display-xs);
        line-height: var(--line-height-display-xs);*/
        margin: 0;
        font-weight: var(--font-weight-semibold);
        color: var(--gray-900);
        font-size: var(--font-size-text-lg);
        word-break: break-word;
    }
        /*& h1.priority__title {
        font-size: 28px;
    }

    & h2.priority__title {
        font-size: 20px;
    }

    & h3.priority__title {
        font-size: 16px;
    }*/

        & .priority__title ~ p {
            /*font-size: 18px;*/
            font-weight: 400;
            color: var(--gray-600);
        }

    & > h4 {
        color: var(--gray-800);
        font-weight: var(--font-weight-semibold);
        overflow: hidden;
        text-overflow: ellipsis;
    }

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

    & h6 {
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

.--eForm {

    & .--eFilter {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: var(--eFilterPaddingT, 0);
        padding-bottom: var(--eFilterPaddingB, 0);
        width: 100%;
    }

    /* footer region — pins itself to the bottom of the flex-column .--eForm card */
    & > .--eFooter {
        margin-top: var(--eFooterMarginTop, auto);
    }

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

.--eBlock {
    display: var(--eBlockDisplay, flex);
    align-items: var(--eBlockAling, center) !important;
    flex-direction: var(--eBlockDirection, row);
    flex-wrap: var(--eBlockWrap, revert);
    gap: var(--eBlockGap, var(--spacing-lg)) !important;
    justify-content: var(--eBlockJC, flex-start);
    margin: var(--eBlockM, 0);
    width: var(--eBlockW, auto);
    border-style: solid;
    border-color: var(--eBlockBorderColor, none);
    border-width: var(--eBlockBorderW, 0);
    border-radius: var(--eBlockBorderR, 0);
    height: var(--eBlockH, auto);
}

.--eForm .--eBlockContent {
    display: flex;
    align-items: var(--eBlockContentAling, center) !important;
    flex-direction: var(--eBlockContentDirection, row);
    gap: var(--eBlockContentGap, var(--spacing-3xl)) !important;
    justify-content: var(--eBlockContentJC, flex-start);
    margin: var(--eBlockContentM, 0);
    padding: var(--eBlockContentP, 0);
    border-style: solid;
    border-color: var(--eBlockContentBorderColor, none);
    border-width: var(--eBlockContentBorderW, 0);
    border-radius: var(--eBlockContentBorderR, 0);
}

.eForm .--eProperties {
    --_computedProperyMaxW: var(--ePropertiesW);
    display: flex;
    flex-direction: var(--ePropertiesFD, column);
    width: var(--_computedProperyMaxW, 100%);
    gap: var(--ePropertiesGap, var(--spacing-3xl)) !important;
    justify-content: var(--ePropertiesJC, flex-start);
    margin: var(--ePropertiesM, revert);

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

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

    & .--eAdaptiveLine, &.--eAdaptiveLine {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ePropertyGap, 4px);
        justify-content: var(--eFlexJC, flex-start);
        margin-top: var(--ePropertyMarginTop, 0px);
        margin-bottom: var(--ePropertyMarginBottom, 0px);
        align-items: center;
    }

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

    & .--eProperty {
        --_computedProperty: var(--eProperty);
        display: grid;
        grid-template-columns: var(--_computedProperty);
        gap: var(--ePropertyGap, 8px);
        width: 100%;
        max-width: var(--ePropertyMaxW, 100%);
        align-items: var(--ePropertyAI, revert);
        justify-items: var(--ePropertyJC, revert);
        padding: var(--ePropertyPadding, 0);
        border-style: solid;
        border-color: var(--ePropertyBorderColor, none);
        border-width: var(--ePropertyBorderW, 0);
        margin-bottom: var(--ePropertyMB, 0);

        & .--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);
            margin-bottom: var(--eLabelMarginB, var(--spacing-sm));
        }

        & .--eSubLabel {
            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(--eLabelMarginB, var(--spacing-xs));
        }

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

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

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

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

        @media (max-width: 576px) {
            --_computedProperty: var(--ePropertyMobile, var(--eProperty));
        }
    }

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

    @media (max-width: 768px) {
        --_computedPropertiesMaxW: var(--ePropertiesWMediaTablet, var(--ePropertiesW));
    }

    @media (max-width: 576px) {
        --_computedProperyMaxW: var(--ePropertiesWMediaMobile, var(--ePropertiesWMediaTablet, var(--ePropertiesW)));
        --_computedProperty: var(--ePropertyMobile, var(--eProperty));
    }
}

.eForm .--eProperty {

}

.eForm .--eAdaptiveLine {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eAdaptiveLineGap, 4px);
    justify-content: var(--eFlexJC, flex-start);
    margin-top: var(--eAdaptiveLineMarginTop, 0px);
    margin-bottom: var(--eAdaptiveLineMarginBottom, 0px);
}

.eForm .--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);
}

.eForm .--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;
        }
    }
}

/* ---- /css/eGrid/eGrid.css ---- */
@property --eCols {
    syntax: "*";
    initial-value: 100%;
    inherits: false;
}

.eGrid .--eRow {
    display: grid;
    grid-template-columns: var(--eCols);
    gap: var(--eGap, 24px);
    margin-bottom: var(--eRowBottom, 24px);
    max-height: var(--eRowMaxWidth, 100%);
    height: var(--eRowH, auto);
    overflow: var(--eRowOverflow, visible);
    width: 100%;

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

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

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

    & .--eRow {
        margin-bottom: var(--eRowBottomSub, 24px);
        gap: var(--eGapSub, 24px);
    }

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

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

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

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


/* ---- /css/eActivity/eActivity.css ---- */
.files-wrap {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.flex-column {
    flex-direction: column;
}

.article-history {
    background: transparent;
    padding: var(--spacing-xl) 0;
    max-width: 600px;
}

.article-history__title {
    font-size: var(--font-size-text-md);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-md);
    color: var(--gray-600);
}

.article-history__list {
    list-style: none;
    margin: 0;
    margin-left: var(--spacing-md);
    padding: 0;
    border-left: 2px solid var(--gray-300);
}

.article-history__item {
    position: relative;
    padding: var(--spacing-md) 0 var(--spacing-md) var(--spacing-xl);
}

    .article-history__item::before {
        content: "";
        position: absolute;
        left: -7px;
        top: 10px;
        width: 12px;
        height: 12px;
        background: var(--brand-600);
        border-radius: 50%;
        border: 2px solid var(--white);
        box-shadow: 0 0 0 2px var(--gray-300);
    }

.article-history__date {
    font-size: var(--font-size-text-xs);
    color: #6b7280;
}

.article-history__details {
    font-size: var(--font-size-text-sm);
    color: var(--gray-700);
}


.new {

    & .article-history__details {
        font-size: var(--font-size-text-sm);
        color: var(--gray-900);
    }
}

/* ---- /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;
    }

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

    &: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;
}

.eUI .show__panel--doc {
    position: fixed;
    inset: 0 auto 0 0;
    max-width: 100vw;
    width: 100%;
    min-width: 340px;
    height: 100vh;
    overflow: hidden;
    transform: translateX(-100%);
    transition: transform .4s ease;
    z-index: 11;
    pointer-events: none;
}

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

#panelBody .k-resize-handle-e {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 12px;
    z-index: 5;
    cursor: ew-resize;
}

    .eUI .--eRow:has( .folder__view-switch:checked) ~ .show__panel--doc {
        transform: translateX(0);
    }

    .eUI .k-splitter .k-scrollable {
        overflow: hidden !important;
    }

    .eUI .show__panel--doc {
        .k-ghost-splitbar.k-ghost-splitbar-horizontal {
            display: none !important;
        }
    }

    #overlaySplitter {
        height: 100%;
    }

    #overlaySplitter .k-splitbar-horizontal {
        width: 12px;
        background: var(--gray-100);
        border-left: 1px solid var(--gray-200);
        border-right: 1px solid var(--gray-200);
        cursor: ew-resize;
    }

    [data-accent="dark"] #overlaySplitter .k-splitbar-horizontal {
        background: var(--gray-400);
    }

    #overlaySplitter .k-splitbar-horizontal .k-resize-handle {
        left: 50%;
        transform: translateX(-50%);
        opacity: .75;
    }

    #overlaySplitter .k-splitbar-horizontal:hover .k-resize-handle {
        opacity: 1;
    }

    #overlaySplitter .k-pane:last-child {
        background: transparent !important;
        pointer-events: none;
        flex-basis: revert;
    }

    #overlaySplitter .k-pane:first-child,
    #overlaySplitter .k-splitbar,
    #overlaySplitter .k-splitbar-horizontal,
    #overlaySplitter .k-resize-handle {
        pointer-events: auto;
    }

    .eUI .--eRow:has( .folder__view-switch:checked) ~ .show__panel {
        left: 0;
    }

    .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-toggle-input:checked ~ .admin .sidebar {
        margin-left: -298px;
        pointer-events: none;
    }

    /* Reveal the "Show Menu" tab */
    .sidebar-toggle-input:checked ~ .admin .sidebar-show-tab {
        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 */
    .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);
    }

    /* 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);
    }
}

/* ---- /css/eUI/eNoRecords.css ---- */
.eNoRecords {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    padding: var(--spacing-6xl) var(--spacing-3xl);
    background: transparent;
    width: 100%;

    & .eNoRecords__label {
        font-family: var(--font-family-base);
        font-size: var(--font-size-text-lg) !important;
        font-weight: var(--font-weight-semibold, 600) !important;
        color: var(--gray-700);
        margin: var(--spacing-xl) 0 0 0;
        text-align: center;
    }

    /* Secondary line under the main label (e.g. the "open an Owner Account" hint). */
    & .eNoRecords__hint {
        font-family: var(--font-family-base);
        font-size: var(--font-size-text-md);
        font-weight: var(--font-weight-regular, 400);
        color: var(--gray-500);
        margin: var(--spacing-xs) 0 0 0;
        text-align: center;
    }
}

.--eRow:has( > .--eForm > .eNoRecords) {
    height: 100% !important;
}

.--eRow > .--eForm:has( > .eNoRecords) {
    --eFormJC: center !important;
}

/* ---- /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);
    margin-bottom: var(--eLabelMarginB, --spacing-md);

    & .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);
        }

    & .k-list-scroller::-webkit-scrollbar:hover *::-webkit-scrollbar-thumb { /* just in case for nested */
        border-width: 1px;
    }

    & .k-list-scroller::-webkit-scrollbar {
        width: 4px;
    }

    & .k-list-scroller::-webkit-scrollbar-thumb {
        border-width: 1px;
    }

    & .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%;
    }
}

/* ---- /css/eControls/eListView.css ---- */
.eControls .eListView {
    width: 100%;
    height: calc(100% - 80px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /*height: 100%;*/
    /*overflow: auto;*/

    & .k-pager-info {
        justify-content: center;
        order: 0;
    }

    & .k-listview {
        border: 0px solid transparent !important;
        /*height: calc(100% - 56px);*/
    }

    & .k-listview-content {
        height: 100%;
        /*overflow: auto !important;*/
    }

    & .k-listview-pager {
        display: none !important;
    }

    & .text-content h6 {
        font-size: var(--font-size-text-sm);
    }

    & .text-content p {
        font-size: var(--font-size-text-sm);
    }

    & .--eListView-page {
        display: flex;
        justify-content: space-between;
        align-items: center;
        max-height: 80px;
        width: auto;
        border-top: none;
        padding: 0;
        margin: 0 auto;
    }
    /* ── Empty state ─────────────────────────────────────────── */

    & .k-nodata {
        display: none;
    }

    & .k-listview:has(> #eClientSearchEmpty) {
        position: relative;
        min-height: 220px;
    }

        & .k-listview:has(> #eClientSearchEmpty) .k-listview-content {
            display: none;
        }

    &:has(.k-listview > #eClientSearchEmpty) .--eForm:has(> .--eListView-page) {
        display: none !important;
    }

    & .k-listview > #eClientSearchEmpty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-height: unset;
        padding: 0;
        pointer-events: none;
    }
}

/* ---- /css/eControls/eListViewCard.css ---- */
/* eListView Card Styles */

.eListView .k-listview {
    background: transparent !important;
}

.eListView .k-listview-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
}

/* Card Base */
.eListView .--Card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    background: var(--white);
    padding: var(--CardPadding, var(--spacing-lg));
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    transition: all 0.5s ease;
    margin: var(--spacing-md);
}

.eListView .--Card:hover {
    border-color: var(--brand-100);
    box-shadow: var(--shadow-custom);
    transform: translateY(-8px);
}

.eListView .--Сard .priority {
    font-weight: var(--font-weight-medium);
    color: var(--gray-900);
    overflow: hidden;
    text-overflow: ellipsis;
}

.eListView .--Сard .side {
    font-weight: var(--font-weight-regular);
    color: var(--gray-600);
    line-height: var(--line-height-text-sm);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Actions */
.eListView .--Actions {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    background: var(--white);
}

.eListView .action-dots {
    background: transparent;
    border: none;
    padding: 4px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}

.eListView .action-dots img {
    width: 16px;
    height: 16px;
}

/* Card Link */
.eListView .--Card-link {
    display: flex;
    gap: var(--spacing-lg);
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

/* Card Thumbnail */
.eListView .--Thumb {
    width: 140px;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

/* Card Content */
.eListView .--Content {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--spacing-sm);
    flex: 1;
}

.eListView .--Content .eUrgentDot {
    position: revert;
}

.eListView .--Content .eUrgentDot::before {
    display: flex;
    content: "";
    width: 12px;
    height: 12px;
    background: #bd0000;
    border: 2px solid #bb7b7b;
    border-radius: 50%;
    /*margin-top: 5px;*/
}

.eListView .--Content .--eBlock.--eListTitle {
    --eBlockJC: flex-start !important;
}

.eListView .--Card-title {
    font-size: var(--font-size-text-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-900);
    margin: 0;
    overflow-wrap: anywhere;
    height: 100%;
    display: flex;
    align-items: center;
}

.eListView .--Description {
    font-size: var(--font-size-text-sm-1) !important;
    color: var(--gray-600);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}

.eListView .--Meta {
    display: flex;
    align-items: end;
    gap: var(--spacing-md);
    font-size: var(--font-size-text-xs);
    color: var(--gray-500);
}

.eListView .permission-badge {
    padding: 2px 8px;
    background: var(--brand-50);
    color: var(--brand-800);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* Container Query Support */
.--eCards {
    container: eContainer / size !important;
}

/* Grid View */
.--eCards.view-grid .k-listview-content {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md);
    align-items: stretch;
}

.--eCards.view-grid .k-listview-content:has( .no-found__wrapper) {
    grid-template-columns: 1fr;
}

.--eCards.view-grid .--Card {
    flex-direction: column;
    padding: 0;
}

.--eCards.view-grid .--Card-link {
    flex-direction: column;
}

.--eCards.view-grid .--Thumb {
    width: 100%;
    height: 200px;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.--eCards.view-grid .--Content {
    padding: 0 var(--spacing-3xl) var(--spacing-lg) var(--spacing-3xl);
}

.--eCards.view-grid .--Content .--eBlock.--eListTitle {
    --eBlockJC: space-between !important;
}

.--eCards.view-grid .--Meta {
    margin-top: auto;
    justify-content: space-between;
}

.--eCards:not(.view-grid, .--eAnnouncementsBlock, .--eLinksBlock) .--eListTitle {
    padding-right: var(--spacing-5xl);
}

.--eCards.--eElectionsBlock .--Content {
    padding: var(--spacing-lg) var(--spacing-3xl) var(--spacing-lg) var(--spacing-3xl);
}

/* Responsive Grid View */
@container eContainer (max-width: 1280px) {
    .--eCards.view-grid .k-listview-content {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container eContainer (max-width: 980px) {
    .--eCards.view-grid .k-listview-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container eContainer (max-width: 768px) {
    .--eCards.view-grid .k-listview-content {
        grid-template-columns: 1fr;
    }
}

/* Responsive List View */
@container eContainer (max-width: 630px) {
    .eListView .--Content .--eBlock.--eListTitle {
        --eBlockJC: space-between !important;
    }
}

@container eContainer (max-width: 500px) {
    .--Card {
        flex-direction: column;
    }

    .--Card-link {
        flex-direction: row;
    }

    .eListView .--Description {
        -webkit-line-clamp: 5;
    }

    .--Thumb {
        width: 100%;
        height: 200px;
    }
}

/* ---- /css/eControls/eListViewToggle.css ---- */
/* eListView Toggle - Grid/List View Switcher */

.view-toggle-buttons {
    display: flex;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: var(--radius-xs);
    background: var(--gray-200);
    position: relative;

    --eBlockDirection: row !important;
}

.view-toggle-buttons::before {
    content: '';
    position: absolute;
    background: var(--white);
    border-radius: var(--radius-sm);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.view-toggle-buttons[data-active="list"]::before {
    left: 4px;
    width: calc(50% - 6px);
    height: calc(100% - 8px);
    top: 4px;
}

.view-toggle-buttons[data-active="grid"]::before {
    left: calc(50% + 2px);
    width: calc(50% - 6px);
    height: calc(100% - 8px);
    top: 4px;
}

/* ---- /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;
    }

    & .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);
    }
}

.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/eFileManager.css ---- */
.k-filemanager .k-pane.k-navigation {
    width: 260px;
}

.k-filemanager .k-treeview .k-in.k-state-selected,
.k-filemanager .k-treeview .k-item > .k-link.k-selected {
    background: var(--brand-100);
    color: var(--brand-900);
}

.k-filemanager .k-grid tr.k-state-selected,
.k-filemanager .k-grid tr:hover {
    background: var(--brand-50);
}

.file-left__block {
    display: flex;
    align-items: center;
}

.file-main {
    display: inline-block;
    vertical-align: top;
    margin-left: .4rem;
    text-align: start;
}

.file-name {
    font-weight: 500;
}

.file-desc {
    font-size: 0.75rem;
    color: var(--gray-500);
    line-height: 1rem;
}

.file-size {
    float: right;
    font-size: 0.75rem;
    margin-right: .5rem;
}

.k-listview-content {
    overflow: hidden !important;
}

.k-d-flex-row, 
.k-flex-row {
    flex-direction: column !important;
}

.k-d-flex,
.k-d-flex-col,
.k-d-flex-row {
    flex-direction: column;
}

.k-listview-item {
    display: flex;
}

.k-filemanager-listview .k-listview-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100% !important;
    border-bottom: 1px solid var(--gray-200);
}

.k-filemanager .k-file-preview {
    display: none !important;
}

.file-ico {
    flex-shrink: 0; 
    margin-right: 8px;
}

.k-filemanager .file-ico use {
    width: 100% !important;
    height: 100% !important;
}

.k-listview-content > .k-state-selected {
    background-color: rgb(215 215 216 / 25%) !important;
}

.k-listview-content > .k-state-focused {
    box-shadow: none !important;
}

/* ---- /css/eControls/eScheduler.css ---- */
.k-scheduler-toolbar.k-toolbar {
    display: none !important;
}

.date-box {
    width: 60px;
    height: 60px;
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);

    & .month {
        font-size: .65rem;
        color: var(--gray-500);
        letter-spacing: .05em;
    }

    & .day {
        font-size: 1.25rem;
        color: var(--brand-600);
    }
}

#addEventBtn {
    border: 1px solid var(--brand-600);
    color: var(--brand-600);
    background: transparent;
    border-radius: 8px;

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

#scheduleHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;

    & .d-flex {
        display: flex;
        align-items: center;
    }
}

/* ---- /css/eControls/eTabStrip.css ---- */
.eTabStrip {
    height: 100%;

    &:has( #editor-popup-Description-overlay:not([style$='display: none;'])) .k-tabstrip-items-wrapper {
        z-index: 1 !important;
    }

    & .k-tabstrip-prev,
    & .k-tabstrip-next {
        background: var(--gray-300) !important;
        z-index: 2;
    }  

    & .k-tabstrip-prev {
        margin-right: 8px;
    }

    & .k-tabstrip-next {
        margin-left: 8px;
    }
    
    & .k-tabstrip-prev:hover,
    & .k-tabstrip-next:hover {
        background: var(--brand-300) !important;
    }  

    & .k-content,
    & .k-tabstrip-content {
        padding: 16px 0 0 0 !important;
        border: 0 !important;
        background-color: transparent !important;
    }

    & .k-tabstrip-item {
        color: var(--gray-500) !important;
        height: 40px;
        padding: 0
    }

    & .k-tabstrip-item.k-active,
    & .k-item.k-active {
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        border-bottom-color: var(--gray-300) !important;
        color: var(--brand-600) !important;
    }

    & .k-tabstrip-item.k-active.k-focus,
    & > .k-tabstrip-items-wrapper .k-item.k-active {
        box-shadow: none !important;
        border: 1px solid var(--gray-300);
        border-bottom-color: var(--gray-300) !important;
    }

    & .k-tabstrip-item {
        color: var(--gray-500) !important;
        height: 40px;
        padding: 0
    }

    & .k-tabstrip-content.k-state-focused,
    & .k-tabstrip-content:focus,
    & .k-tabstrip > .k-content.k-state-focused,
    & .k-tabstrip > .k-content:focus {
        outline-width: 0;
    }

    & .k-tabstrip-prev.k-disabled, 
    & .k-tabstrip-next.k-disabled {
        display: none;
    }

}

/*work eraund*/
.eTabStrip#AnnouncemenDashboardTabs {
    /* height: auto; */
    & .k-tabstrip-content {
        display: none !important;
    }

}

.eTabStrip#LinkDashboardTabs {
    height: auto;

    & .k-tabstrip-content {
        display: none !important;
    }
}

.eUI .tabs {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    height: auto;

    & .k-tabstrip-items-wrapper {
        border: none !important;
        min-height: 48px;
    }

    & .k-tabstrip-items,
    & .k-state-hover {
        background-color: var(--white) !important;
        border-radius: var(--radius-lg) !important;
    }

    & .k-tabstrip-items {
        padding: var(--spacing-2xl) var(--spacing-3xl) !important;
        gap: 4px;
    }

    & .k-item.k-state-active {
        border: 1px solid var(--gray-200) !important;
        border-radius: var(--radius-md) !important;
    }
}

.eUI .tab {
    position: relative;
    padding: 6px 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;

    &.active {
        color: var(--brand-600);
    }

    &.active::after {
        content: "";
        position: absolute;
        bottom: -1px;
        left: 0;
        right: 0;
        height: 2px;
        background: var(--brand-600);
        border-radius: 1px 1px 0 0;
    }

}

.eUI .tabs.v2 {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;

    & .k-tabstrip-items-wrapper {
        border: none !important;
    }

    & .k-tabstrip-items,
    & .k-state-hover {
        background-color: var(--eTabStripItems, var(--white)) !important;
        border: none !important;
        border-bottom: 2px solid var(--brand-600) !important;
        border-radius: 0 !important;
    }

    & .k-item.k-active,
    & .k-item:hover {
        background-color: var(--eTabStripItems, var(--white)) !important;
    }

    & .k-tabstrip-item.k-active .k-link-text {
        color: var(--brand-600) !important;
    }

    & .k-tabstrip-items {
        padding: 4px !important;
        padding-bottom: 0px !important;
        border-bottom: 2px solid transparent !important;
        gap: 0 !important;
    }

    & .k-item.k-active,
    & .k-item:hover {
        color: var(--gray-600);
        border: none !important;
        border-bottom: 2px solid var(--brand-600) !important;
        border-radius: 0 !important;
        color: var(--brand-600) !important;
    }

    & .k-item:hover ~ .k-active {
        border-bottom: 2px solid var(--gray-200) !important;
    }

    & .k-item:hover ~ .k-active .k-link-text {
        color: var(--gray-500) !important;
    }

    /* The active item's underline CANNOT be drawn with border-bottom. Kendo's own theme
       forces `border-bottom-color: rgba(0,0,0,0) !important` on
       .k-tabstrip-top > .k-tabstrip-items-wrapper .k-item.k-active, and since the Telerik
       CSS is loaded inside @layer kendo, that !important outranks the unlayered !important
       above: cascade layers invert importance, so an unlayered !important is the WEAKEST one,
       no matter how specific its selector. Kendo ships no ::after rule for the item, so the
       bar is drawn as a pseudo-element instead — uncontested. The positioning context comes
       from `.eUI .tab { position: relative }`, and bottom: -2px covers the 2px border area so
       the bar lands exactly where the border-based underline used to sit. */
    & .k-item.k-active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        /* Absolute offsets resolve against the padding box, so this must equal the item's
           bottom border width — the `border-bottom: 2px` above is still what sets it (only
           its COLOR is lost to Kendo, the width still wins). Keep the two in sync: that rule
           is NOT dead code, dropping it would shrink the border to Kendo's 1px and leave the
           bar 1px low. */
        bottom: -2px;
        height: 2px;
        background: var(--brand-600);
    }

    /* Mirrors the border-based dimming above: hovering an earlier tab greys the active one. */
    & .k-item:hover ~ .k-active::after {
        background: var(--gray-200);
    }

    & .k-item.k-focus {
        box-shadow: none !important;
    }

    & .k-tabstrip-content {
        padding: 0 !important
    }

    & .k-hstack::after {
        content: "";
        width: 100%;
        border-bottom: 2px solid var(--gray-200) !important;
        position: absolute;
        margin: 0 4px;
        bottom: 4px;
        z-index: 0;
    }

}

.eUI .tab.v2 {
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    border: none !important;
    border-bottom: 2px solid var(--gray-200) !important;
    z-index: 1;
    
    &.active {
        color: var(--gray-600);
        border: .1px solid var(--gray-200);
        border-radius: var(--radius-md);
    }

    &.active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        background: transparent;
        border-radius: 0;
    }

}

.eUI .tabs.v3 {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
    
    & .k-tabstrip-items-wrapper {
        border: none !important;
        background: transparent;
        height: auto;
        max-height: 68px;
    }

    & .k-tabstrip-items,
    & .k-state-hover {
        background-color: transparent !important;
        border: none !important;
        border-radius: 0 !important;
    }

    & .k-tabstrip-item.k-active .k-link-text {
        color: var(--brand-600) !important;
    }

    & .k-tabstrip-items {
        display: grid !important;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        padding: 4px !important;
        gap: 16px !important;
        justify-content: space-between !important;
    }

    & .k-tabstrip-content {
        padding: 0 !important;
    }

    & .k-item {
        border: none !important;
        height: 100%;
    }

    & .k-tabstrip-item {
        border-top: 4px solid var(--gray-200) !important;
        border-radius: 0 !important;
    }

    & .k-item.k-active,
    & .k-item:hover {
        color: var(--gray-600);
        border: none !important;
        border-top: 4px solid var(--brand-600) !important;
        border-radius: 0 !important;
        color: var(--brand-600) !important;
        background: transparent;
    }

    & .k-item:hover ~ .k-active {
        border-top: 4px solid var(--gray-200) !important;
    }

    & .k-item:hover ~ .k-active .k-link-text {
        color: var(--gray-500) !important;
    }

    & .k-item.k-focus {
        box-shadow: none !important;
    }

    & .k-tabstrip-items .k-link {
        margin-top: 12px;
        height: 100%;
        padding: 0;
        justify-content: start !important;
    }

    & .k-tabstrip-items .k-link-text {
        height: 100%;
        padding: 0;
    }

}

.eUI .tab.v3 {
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-600);
    cursor: pointer;
    border: none !important;
    border-top: 4px solid var(--gray-200) !important;
    &.active {
        color: var(--gray-600);
        border: .1px solid var(--gray-200);
        border-radius: var(--radius-md);
    }

    &.active::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        background: transparent;
        border-radius: 0;
    }

}

.eUI .pill {
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--brand-primary-light);
    color: var(--brand-600);
}


/* Pre-init FOUC guard for opt-in eTabStrips (before Kendo adds the .k-tabstrip class).
   A server-rendered tabstrip is a raw <ul> (tab headers) followed by all panel <div>s
   stacked. Without this, the raw <ul> shows as bullets and the stacked panels' inner
   `fr` grids (.--eRow) collapse against an un-sized container — the "broken layout" flash.
   Generalised from the previous #editTabStrip-only rules to every .no-fouc tabstrip.
   Kept opt-in (.no-fouc): hiding non-first panels pre-init is unsafe for tabstrips whose
   non-active panels host child widgets (grids/charts) that measure size during init.
   Render-blocking (eTabStrip.css is in <head>), so it applies on the first paint. */
.eTabStrip.no-fouc:not(.k-tabstrip) {
    display: block;
    width: 100%;
}

/* Hide the raw tab-header list until Kendo styles it (kills the bullet-list flash). */
.eTabStrip.no-fouc:not(.k-tabstrip) > ul {
    display: none;
}

/* Hide every panel... */
.eTabStrip.no-fouc:not(.k-tabstrip) > div {
    display: none;
}

/* ...except the first one, shown full-width so its inner `fr` grids resolve correctly. */
.eTabStrip.no-fouc:not(.k-tabstrip) > ul + div {
    display: block;
    width: 100%;
}

#editTabStrip.k-tabstrip > .k-content,
#editTabStrip.k-tabstrip > .k-tabstrip-content {
    display: none;
    overflow: hidden;
}

#editTabStrip.k-tabstrip > .k-content.k-active,
#editTabStrip.k-tabstrip > .k-tabstrip-content.k-active,
#editTabStrip.k-tabstrip > .k-content[aria-expanded="true"],
#editTabStrip.k-tabstrip > .k-tabstrip-content[aria-expanded="true"] {
    display: block;
    overflow: visible;
}

#editTabStrip .k-tabstrip-content {
    min-height: var(--editTabStripMinH, clamp(640px, 70vh, 1100px));
}

.k-tabstrip-items .k-tabstrip-item {
    transition: opacity .2s ease;
}

#kendoTabStrip, main, .eListView {
    overflow-anchor: none;
}

/* ---- /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/eGrid.css ---- */
.eControls .eGrid {
    position: relative;
    overflow: visible;
    width: calc(100% - 2px);
    /* Horizontal scrollbar is always shown so users know columns can scroll sideways; vertical stays auto */
    overflow-x: scroll !important;
    overflow-y: auto !important;
    --sb-thumb-hover: rgba(0,0,0,.45);

    &.overflow__stop {
        overflow-y: hidden;
    }

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

    & .k-grid {
        border: none !important;
        width: fit-content;

        & .k-grid-header,
        & .k-grid-container,
        & .ann-pager {
            width: calc(100% - 1px);
        }

        & .ann-pager-block {
            display: flex;
            margin: 0 auto;
        }

        & .k-table-thead {
            background-color: transparent !important;
        }

        & th,
        & td {
            padding: 12px;
        }

            & td:has( > .k-reset) {
                padding: 12px 24px 12px 36px;
            }

            & td > .k-reset {
                position: absolute;
                left: 8px;
                top: 24px;
            }

        & th {
            border-width: 1px !important;
            border-color: transparent !important;
        }

        & td.k-table-td {
            overflow: hidden !important;
            text-overflow: ellipsis;
        }

        & th.priority,
        & td.priority {
            padding: 12px 24px 12px 12px;
        }

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

        & th:has( .ellipsis),
        & td:has( .ellipsis) {
            padding: 4px 8px;
        }

        & tr {
            border-right: 0;
            border-left: 0;
        }

        & td {
            border-right: none;
            border-left: none;
            border-bottom: 1px solid var(--gray-300);
        }

            & td:nth-child(-1n+2) {
                position: relative;
                z-index: 1;
                overflow: visible;
            }

        & tr:last-child td {
            border: none;
        }

            & tr:last-child td:last-child {
                border-radius: 0 0 8px 0;
            }

        & .k-header > .k-cell-inner {
            margin: 0 !important;
        }

        & .k-cell-inner > .k-link {
            padding: 0 !important;
            display: block !important;
        }

        & .k-alt {
            background: transparent !important;
        }

        & .k-master-row:hover {
            background-color: var(--gray-50) !important;
        }

        & .k-selected > .k-table-td,
        & .k-table-list .k-table-row.k-selected {
            background-color: var(--gray-50) !important;
        }

        & .eGridHeader__eCheckBox {
            display: flex;
            /*align-items: center;*/
            align-items: flex-end;
        }

        .eGridHeader__eCheckBox input {
            margin: 2px 0 0 0;
        }

        & .ellipsis {
            margin: 0 !important;
        }

        & .menu__context {
            position: absolute;
            top: -66px;
            left: 20px;
        }

        & .grid__view-setting {
            width: 32px;
            display: flex;
            justify-content: center;
            cursor: pointer;
        }

            & .grid__view-setting:hover {
                border-radius: 4px;
                padding: 4px 6px;
                border: 2px solid var(--brand-500);
            }

        & .grid__popup-setting {
            position: relative;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: visible;
        }

            & .grid__popup-setting img,
            & .k-bulk-menu img {
                margin-right: 8px;
            }

        & .k-grid-header {
            position: relative;
            z-index: 1;
        }

        & .k-grid-content,
        & .k-grid-content.k-auto-scrollable {
            position: relative;
            z-index: 2;
            overflow: visible;
            background: transparent !important;
        }

        & .badge__status {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 4px;
            font-size: 14px;
            font-weight: var(--font-weight-semibold);
            line-height: 1.2;
            color: var(--colorTitle-bs);
            border: 1px solid var(--colorBorder-bs);
            border-radius: 16px;
            background-color: var(--colorBg-bs);
            width: 100%;
        }

        & .badge__status-xs {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 4px;
            font-size: 14px;
            font-weight: var(--font-weight-semibold);
            line-height: 1.2;
            color: var(--colorTitle-bs);
            border: 1px solid var(--colorBorder-bs);
            border-radius: 16px;
            background-color: var(--colorBg-bs);
            width: 40px;
        }

        & .badge {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 4px;
            font-size: 14px;
            font-weight: var(--font-weight-semibold);
            line-height: 1.2;
            color: var(--gray-700);
            border: 1px solid var(--gray-300);
            border-radius: 8px;
            background-color: transparent;
            /*width: 84px;*/
        }

            & .badge .dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background-color: var(--error-500);
                box-sizing: revert;
            }

        & .bulk-actions {
            position: relative;
            display: inline-block;
            left: 120px;
            top: -2px;
        }

            & .bulk-actions .k-bulk-toggle {
                padding: 0 6px;
                border: none !important;
                background: var(--gray-50);
                color: var(--brand-700);
                font-weight: var(--font-weight-bold);
                font-size: var(--font-size-text-xs);
                line-height: var(--line-height-text-xs);
                z-index: 2;
            }

            & .bulk-actions .k-bulk-menu {
                position: absolute;
                top: 100%;
                right: 0;
                background: var(--white);
                border: 1px solid var(--gray-300);
                border-radius: 6px 0 6px 6px;
                padding: 4px;
                margin: 0;
                min-width: 140px;
                box-shadow: 0 2px 6px rgba(0,0,0,.15);
                z-index: 1;
            }

                & .bulk-actions .k-bulk-menu li {
                    list-style: none;
                    margin: 0;
                }

                & .bulk-actions .k-bulk-menu a {
                    display: block;
                    padding: 4px 10px;
                    text-decoration: none;
                    color: inherit;
                }

                & .bulk-actions .k-bulk-menu button:hover {
                    background: var(--gray-100);
                }

            & .bulk-actions:has( .k-bulk-menu[style$="none;"]) .eIconArrow::before {
                content: "\e015";
            }

        &:has( .bulk-actions) .k-header {
            overflow: visible;
        }

        &:has( .bulk-actions) .k-grid-header {
            z-index: 3;
        }

        &:has( .bulk-actions) .menu__context {
            z-index: 0;
        }

        &:has( .is-open) .k-header {
            overflow: revert;
        }

        &:has( .is-open) .k-grid-header {
            z-index: 1;
        }

        &:has( .is-open) .menu__context {
            z-index: 3;
        }

        & .k-checkbox {
            display: flex;
            width: var(--spacing-2xl);
            height: var(--spacing-2xl);
        }

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

                & .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;
                }

        & .k-state-selected > td {
            background: var(--gray-50);
        }

        & .membership__join-now,
        & .membership__accept {
            text-decoration: none;
            color: var(--brand-600) !important;
            cursor: pointer;
            font-weight: 600;
        }

        & .membership__remove-me,
        & .membership__decline {
            text-decoration: none;
            color: var(--gray-600) !important;
            cursor: pointer;
            font-weight: 600;
        }

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

        & a {
            line-height: var(--line-height-text-sm);
            white-space: normal;
            max-height: 3lh;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--brand-600);
            text-decoration: none;
        }
    }

    & .k-grid-header-wrap {
        border-right: none;
        border-left: none;
        overflow: visible !important;
    }

    & .k-grid-header .k-header {
        border-right: 1px solid rgba(204, 204, 204, .25) !important;
        border-left: 0 !important;
    }

    & .k-grid-header {
        border-start-end-radius: 0;
        border-start-start-radius: 0;
        border: 1px solid var(--gray-300);
        border-right: none;
        border-left: none;
        padding-right: 0 !important;
        background: var(--gray-50);
        color: var(--gray-500);
        font-weight: 600;
    }

    & .k-pager-numbers .k-link.k-state-selected {
        border-color: var(--brand-600) !important;
        background-color: var(--brand-600) !important;
    }

    & .k-pager-nav.k-link,
    & .k-pager-refresh {
        color: var(--brand-600) !important;
    }

    & .k-pager-info {
        justify-content: center;
        order: 0;
    }

    & .k-i-sort-asc-sm::before {
        content: "\e013";
        color: var(--gray-500);
    }

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

    & .k-column-title {
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--gray-500);
    }

    & .priority {
        font-weight: var(--font-weight-medium);
        color: var(--gray-900);
        overflow: hidden;
        text-overflow: ellipsis;

        &.priority--truncate {
            white-space: nowrap;
        }
    }

    & a.priority {
        color: var(--brand-600);
        text-decoration: none;
    }

    & .side {
        font-weight: var(--font-weight-regular);
        color: var(--gray-600);
        font-size: var(--font-size-text-sm);
        line-height: var(--line-height-text-sm);
        white-space: normal;
        max-height: 3lh;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;

        &.side--truncate {
            white-space: nowrap;
        }
        /* Server-side truncation (desc-more-link) manages its own expand/collapse,
           so opt out of the 2-line CSS clamp: keep the "...more" link visible and
           inline after the text, and let a click reveal the full description. */
        &:has(.desc-more-link) {
            display: block;
            height: auto;
            max-height: 100%;
            -webkit-line-clamp: none;
            overflow: visible;
            text-overflow: clip;
        }
    }

    & .desc-more-link {
        color: var(--brand-600);
        font-weight: var(--font-weight-semibold);
        text-decoration: none;
        white-space: nowrap;

        &:hover {
            text-decoration: underline;
        }
    }

    & .folder-link {
        & .--eFlex,
        & .--eFlex > div {
            min-width: 0;
        }

        & .priority {
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    & .k-table-td:has( > .e-grid-btn) {
        text-overflow: initial;
    }

    & .e-grid-btn {
        border: none;
        background: transparent;
    }

    & .heightAuto {
        & .k-grid-content.k-auto-scrollable {
            height: 100% !important;
            /*overflow: hidden;*/
            padding-right: 0 !important;
        }

        @media(max-width: 1100px) {
            & .k-grid-content.k-auto-scrollable {
                height: 100% !important;
                max-height: 100% !important;
            }
        }
    }

    & .k-grid-header-wrap {
        overflow-x: clip !important;
    }
    /* ── Empty state ─────────────────────────────────────────── */

    & tr.k-no-data > td {
        border: none !important;
        padding: 0 !important;
        overflow: visible !important;
        height: 260px;
        vertical-align: middle;
        text-align: center;
    }

    & .k-grid-content > #eClientSearchEmpty {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        min-height: unset;
        padding: 0;
        pointer-events: none;
    }

    & .k-grid-norecords {
        justify-content: center;
    }
    /* ── Preview thumbnail (ePreview column) ─────────────────── */

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

    & .grid__wrapper-file {
        flex-wrap: wrap;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ── Horizontal scroll affordance ────────────────────────────────
   Soft edge shadows hint that grid columns can be scrolled sideways.
   Anchored to a tight wrapper injected by eGrid.kendo.js around the .eGrid
   scroll container (never a shared parent), so the shadows sit on top of the
   opaque rows, stay pinned while columns scroll, and can't spill over sibling
   headers/labels. Visibility is driven by the .can-scroll-left /
   .can-scroll-right classes that the JS toggles from scrollLeft + scrollWidth,
   so a shadow only appears while content is actually hidden on that side. */
/* Only sizing that is always safe lives here; any flex/grid/height intent the
   grid had as its parent's item is forwarded onto this wrapper by eGrid.kendo.js
   (wrapEGridScroller), since the wrapper now occupies the grid's layout slot. */
.eGrid__scroll-wrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

.eGrid__scroll-wrap::before,
.eGrid__scroll-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transition: opacity .15s ease;
}

/* Right edge — columns hidden to the right */
.eGrid__scroll-wrap::after {
    right: 0;
    background: linear-gradient(to left, rgba(16, 24, 40, .16), rgba(16, 24, 40, 0));
}

/* Left edge — columns hidden to the left */
.eGrid__scroll-wrap::before {
    left: 0;
    background: linear-gradient(to right, rgba(16, 24, 40, .16), rgba(16, 24, 40, 0));
}

/* Reveal each shadow only while there is hidden content on that side */
.eGrid__scroll-wrap:has(> .eGrid.can-scroll-right)::after {
    opacity: 1;
}

.eGrid__scroll-wrap:has(> .eGrid.can-scroll-left)::before {
    opacity: 1;
}

/* ── Preview popup content (ePreviewOpen) ────────────────────── */

.ePreview__imageWrap,
.ePreview__objectWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--spacing-md, 12px);
    box-sizing: border-box;
}

.ePreview__image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.ePreview__object {
    width: 100%;
    height: 100%;
    border: none;
}

/* ---- /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/eEditor.css ---- */
.eControls .eEditor {

    & .k-editor {
        border: none !important;
    }

    & .k-toolbar {
        border: 1px solid var(--gray-300) !important;
        border-width: 1px 1px 0 1px !important;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        /*background: transparent !important;*/
        padding-bottom: 12px !important;

        & > * {
            gap: 8px;
        }

        & .k-picker,
        & .k-dropdown {
            background: transparent !important;
            border-radius: var(--radius-lg) !important;
        }

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

    & .k-editor-content {
        padding: 0 !important;
    }
    /*& .k-editor-toolbar {
        margin-bottom: 12px;
    }*/

    & .k-content {
        border: 1px solid var(--gray-300) !important;
        border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    }

    & .k-combobox {
        border: 1px solid var(--gray-300) !important;
        border-radius: var(--radius-lg) !important;
    }

    & .k-button-solid-base {
        color: var(--gray-500) !important
    }

        & .k-button-solid-base.k-selected {
            color: var(--gray-900) !important;
        }

    & .k-combobox.k-focus,
    & .k-colorpicker.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-invalid .k-content.k-iframe {
        border-color: var(--error-500) !important;
    }

    & .k-editor {
        background-color: transparent !important;
    }

    & .editor-fullscreen .k-content {
        padding: 0 !important;
    }
}

/* ---- /css/eControls/eDropUpload.css ---- */
.eControls .eDropUpload {
    position: relative;
    text-align: center;
    cursor: pointer;

    &.k-dropzone-hover .e-upload-surface {
        border: 1px solid var(--brand-600) !important;
    }

    &.horizontal__eDropUpload {
        padding: 8px 20px;
    }

    &.horizontal__eDropUpload .e-upload-surface {
        display: flex;
        align-items: center;
    }

    & .e-upload-surface {
        border: 1px solid var(--gray-300) !important;
        border-radius: var(--radius-lg) !important;
        background-color: transparent;
        padding: 20px;
        transition: border-color 0.3s, background-color 0.3s;
    }

    & .k-upload {
        width: 100%;
        border-radius: var(--radius-lg);
        border: none; /*1px solid var(--gray-300)*/
        background: transparent;
        font-weight: 600;
        padding: 2px;
        position: revert !important;
    }

    & .k-upload-button {
        height: 100%;
        min-width: 7em;
        width: 100%;
        cursor: pointer;
    }

    & .k-dropzone {
        position: absolute !important;
        inset: 0;
        opacity: 0;
        cursor: pointer;
        padding: 0;
    }

    & .e-upload-icon-box {
        width: 40px;
        height: 40px;
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        margin: 0 auto 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        & .e-upload-icon-box .k-icon {
            font-size: 20px;
            color: var(--gray-500);
        }

    &.horizontal__eDropUpload .e-upload-icon-box {
        margin: 0;
    }

    &.compact__eDropUpload  {
        padding: 0;
    }

    &.compact__eDropUpload .e-upload-surface {
        display: flex;
        align-items: center;
        padding: 10px;
    }

    &.compact__eDropUpload .e-upload-icon-box {
        margin: 0;
    }

    &.compact__eDropUpload .k-upload .k-actions {
        display: none;
    }

    &.compact__eDropUpload .e-upload-subtitle {
        display: none;
    }

    &.compact__eDropUpload .eDropUpload.horizontal__eDropUpload {
        padding: 0;
    }

    &.compact__eDropUpload .e-upload-surface .--eBlock {
        display: block;
    }

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

    ::file-selector-button {
        cursor: pointer;
    }

    & .k-upload-button-wrap {
        width: 100%;
        height: 100%;
    }

    & .k-upload-files {
        border-width: 0 0 1px 0;
        border-color: var(--gray-300);
        box-sizing: border-box;
        margin-bottom: 12px
    }

    & .k-file-single > .k-file-info,
    & .k-multiple-files-wrapper > .k-file-info {
        text-align: start;
    }

    & .k-icon-button {
        padding: 0;
    }

    & .k-file-name {
        color: var(--gray-900) !important;
        max-width: 350px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    & .k-file {
        padding: 8px 12px;
    }

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

    & .k-icon[title="Remove"]::before {
        content: "";
        width: 14px;
        height: 16px;
        background-image: url("/images/Delet-icon.svg");
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="png"]) .k-icon {
        background-image: url("/images/png-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="gif"]) .k-icon {
        background-image: url("/images/gif-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="xlsx"]) .k-icon {
        background-image: url("/images/xlsx-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="docx"]) .k-icon {
        background-image: url("/images/docx-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="pdf"]) .k-icon {
        background-image: url("/images/pdf-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="doc"]) .k-icon {
        background-image: url("/images/doc-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="xls"]) .k-icon {
        background-image: url("/images/xls-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="bmp"]) .k-icon,
    & .k-file-icon-wrapper:has( + .k-file-info [title$="svg"]) .k-icon {
        background-image: url("/images/DefaultFile-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="jpg"]) .k-icon {
        background-image: url("/images/jpg-icon.svg");
        background-size: contain;
    }

    & .k-file-icon-wrapper:has( + .k-file-info [title$="jpeg"]) .k-icon {
        background-image: url("/images/jpeg-icon.svg");
        background-size: contain;
    }

    & .k-file-multiple:has(> .k-multiple-files-wrapper) .k-icon:not([title="Remove"]) {
        background-image: url("/images/AllFiles-icon.svg");
        background-size: contain;
    }

    & .k-multiple-files-wrapper .k-file-info {
        border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
        border-width: 0 0 1px;
        border-style: solid;
        margin-bottom: 0;
        padding: 8px 0;
    }

    & .k-multiple-files-wrapper .k-file-summary {
        padding: 8px 0 0 0;
        margin: 0;
    }
}

.eControls .ai-eUpload__wrapper {
     position:relative;
     display:flex;
     flex-direction:column;
     align-items:center;
     justify-content:center;
     width: 180px;
     overflow:hidden;

    &:hover .e-upload-ai {
        visibility: visible;
        background: rgba(0, 0, 0, 0.5); 
    }

    &.ai-section + .ai-section {
        border-top:1px solid var(--gray-200);
    } 
    
    & .k-dropzone {
        border-radius:0 0 10px 10px;
        padding: 0;
    }

    & .k-upload {
        padding: 0;
    }

    & .ai-eUpload {
        width: 180px;
        height: 120px;
        position: relative;
    }

    & .e-upload-ai {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--radius-md);
        visibility: hidden;
        transition: background .25s ease, visibility .25s ease;
    }
    
    & .eDropUpload {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        height: 120px;
    }
    
    & .e-upload-icon-box {
        display: none;
    }

    & .bg__img {
        background: var(--white);
        background: radial-gradient(circle, var(--white) 0%, var(--brand-150) 100%);
        position: absolute;
        inset: 0 auto auto auto;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 180px;
        height: 120px;
        border-radius: var(--radius-md);

        & img[id] {
            width: 100%;
            height: 100%;
            z-index: 0;
            border-radius: var(--radius-md);
            object-fit: cover;
            object-position: center;
        }

        & img[id][src$=".svg"] {
            width: 120px !important;
            height: 90px !important;
        }
    }
    
    

    & .eDropUpload .--eBlock {
        font-size: 10px;
        gap: 4px !important;
    }

    & .eDropUpload {
        padding: 0;
    }

    & .e-upload-subtitle {
        display: none;
    }

    & .k-upload-button-wrap {
        width: 100%;
        height: 100%;
    }
}

@keyframes pulse {
    0% {
        border: 1px solid var(--gray-300);
    }

    100% {
        border: 1px solid rgba(from var(--gray-300) r g b / .2);
    }
}

/* ---- /css/eControls/eToggleSwitch.css ---- */
.eControls .eToggleSwitch {
    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));

    & .e-switch.k-checkbox {
        -webkit-appearance: none;
        appearance: none;
        width: 38px;
        height: 20px;
        background: var(--gray-300);
        border-radius: var(--radius-xl);
        position: relative;
        vertical-align: middle;
        cursor: pointer;
        outline: none;
        border: none;
        margin-top: 4px;
        transition: background .2s ease;
    }

    & .k-switch-label-on {
        display: none !important;
    }

    & .e-switch.k-checkbox::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 16px;
        height: 16px;
        background: #fff;
        border-radius: 50%;
        transition: left .2s ease;
        box-shadow: 0 0 2px rgba(0,0,0,.3);
    }

    & .e-switch.k-checkbox:checked {
        background: var(--brand-600);
    }

        & .e-switch.k-checkbox:checked::after {
            top: 1px;
            left: 19px;
        }

        & .e-switch.k-checkbox:checked::before {
            background-color: transparent !important;
        }

    label[for] {
        display: flex;
        flex-direction: column;
        gap: 2px;
        cursor: pointer;
        user-select: none;
    }

    & .k-checkbox.k-checked.k-focus,
    & .k-checkbox:checked:focus,
    & .k-checkbox.k-focus,
    & .k-checkbox:focus {
        border-color: transparent !important;
        box-shadow: none !important;
    }

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

    & .k-switch-on .k-switch-track {
        border-color: var(--brand-600) !important;
        background-color: var(--brand-600) !important;
    }

    & .k-switch-on:focus .k-switch-track, .k-switch-on.k-focus .k-switch-track {
        outline: 2px solid color-mix(in srgb, var(--brand-600) 25%, transparent) !important;
    }

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


.eControls[data-accent="dark"] .eToggleSwitch {
    & .k-checkbox-label {
        color: var(--gray-600) !important;
    }
}

/* ---- /css/eControls/eSwitch.css ---- */
.eControls .eSwitch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: var(--eSwitchDirection, row);

    & .k-switch {
        position:relative;
        display:inline-block;
        width:38px;                
        height:20px;
        vertical-align:middle;
        cursor:pointer;
        outline:none;
        line-height:20px;        
    }

    & .k-switch-sm.k-switch-on .k-switch-thumb-wrap {
        left: calc(100% - 7px);
    }

    & .k-switch .k-switch-handle {
        display: none !important;
    }

    & .k-switch .k-switch-track {
        position:absolute;
        inset:0;                             
        width:100%; 
        height:100%;
        border-radius:10px;
        background: var(--gray-300);
        transition:background .2s ease;
        overflow:hidden;
    }

    & .k-switch .k-switch-thumb {
        position:absolute;
        width:16px; 
        height:16px;
        left: -3px;          
        border-radius:50%;
        background:#fff;
        box-shadow:0 0 2px rgba(0,0,0,.3);
        transition:transform .2s ease;
    }

    & .k-switch.k-switch-on .k-switch-track { 
        background:var(--brand-600); 
        border: none !important;
    }

    & .k-switch.k-switch-off .k-switch-track {
        border: none !important;
    }

    & .k-switch.k-focus .k-switch-track{
        box-shadow:0 0 0 2px rgba(139,92,246,.6);
    }

    & .k-switch:focus-visible { 
        outline:none; 
    }

    & .k-switch.k-focus,
    & .k-switch .k-switch-thumb:focus {
        box-shadow:none;
        border-color:transparent;
    }

    & .k-switch.k-disabled,
    & .k-switch input[disabled] + .k-switch-track{
        opacity:.45; 
        cursor:not-allowed;
    }

    & .k-switch + label{
        margin-left:8px;
        cursor:pointer;
        user-select:none;
    }

    & label[for] { 
        cursor:pointer; 
        user-select:none; 
    }

    & .k-switch-on.k-focus .k-switch-track, 
    & .k-switch-on:focus .k-switch-track,
    & .k-switch-off.k-focus .k-switch-track, 
    & .k-switch-off:focus .k-switch-track {
        outline: none !important;
    }

    & .k-switch-label-on,
    & .k-switch-label-off {
        display: none !important;
    }
}


.eControls .eSwitch.smoll {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: var(--eSwitchDirection, row);
    gap: 4px;

    & .k-switch {
        position:relative;
        display:inline-block;
        width:24px;                
        height:16px;
        vertical-align:middle;
        cursor:pointer;
        outline:none;
        line-height:16px;        
    }

    & .k-switch.k-switch-on .k-switch-thumb {
        width: 12px;
        height: 12px;
        left: 0px;
    }

    & .k-switch.k-switch-off .k-switch-thumb {
        width: 12px;
        height: 12px;
        left: -6px;
    }
}

/* ---- /css/eControls/eDatePicker.css ---- */
.eControls .eDatePicker {
    display: flex;
    flex-direction: column;

    & .e-pill-date.k-datepicker {
        position: relative;               
        display: flex;
        gap: 4px;
        padding: 4px 12px 4px 12px;       
        border: 1px solid var(--gray-300);
        border-radius: 8px;
        background: var(--white);
        cursor: pointer;
        font-family: inherit;
        width: fit-content;
        min-height: 40px;
    }

    & .e-pill-date.k-focus,
    & .e-pill-date: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;
    }

    & .e-pill-date .k-input-inner,
    & .e-pill-date .k-input {
        border: none !important;
        outline: none;
        width: 98px;                   
        background: transparent;
        font-size: 14px;
        font-weight: 600;
        color: var(--gray-700);
        order: 1;                
        padding: 0;
        text-align: center;
    }

    & .e-pill-date .k-icon svg { display: none !important; }

    & .k-input-button {
        border-inline-start-width: 0 !important;
    }

    & .k-input-button .k-svg-i-calendar {
        display: flex;
        order: 0;
        background-color: transparent !important;
        /*ackground: url(/images/Calendar-icon.svg) !important;*/
        background-repeat: no-repeat !important;
        background-position: center;
        width: 20px;
        border: none !important;
    }

    & .k-button-solid-base.k-active, 
    & .k-button-solid-base:active {
        background-color: transparent !important;
    }

    & .k-button-solid-base.k-hover, 
    & .k-button-solid-base:hover {
        background-color: transparent !important;
    }

    & .k-datepicker {
        width: 100%;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 400;
        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;
    }

    & .k-input-button {
        background: transparent;
    }
}

/* ---- /css/eControls/eRadioButton.css ---- */
.eControls .eRadioButton {
    display: flex;
    align-items: var(--eRadioButtonAlIt, start);
    flex-direction: var(--eCheckBoxDirection, row);
    gap: var(--eCheckBoxGap, 8px);
    border-style: solid;
    border-color: var(--eRadioButtonBorderColor, var(--gray-300));
    border-width: var(--eRadioButtonBorderW, 1px);
    border-radius: var(--radius-xl);
    padding: var(--eRadioButtonP, var(--spacing-xl));

    &:has( .k-radio:checked:focus, .k-radio:focus, .k-radio:checked ) {
        border-style: solid;
        border-color: var(--eRadioButtonBorderColorFocus, var(--brand-600));
        border-width: var(--eRadioButtonBorderW, 1px);
    }

    & label {
        display: flex;
        flex-direction: column;
        gap: 2px;
        cursor: pointer;
        white-space: nowrap;
    }

    & .k-radio {
        border: 1px solid var(--gray-300);
        background-color: transparent;
        margin-top: 4px;
    }

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

            & .k-radio:checked:focus,
            & .k-radio:focus {
                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/eRadioGroup.css ---- */
.eControls .eRadioGroup {

    & .k-radio-list-item {
        display: flex;
        align-items: var(--eRadioButtonAlIt, start);
        flex-direction: var(--eCheckBoxDirection, row);
        gap: var(--eCheckBoxGap, 8px);
        border: var(--eRadioGroupBorder, 1px solid var(--gray-300));
        border-radius: var(--radius-xl);
        padding: var(--eRadioGroupP, var(--spacing-xl));
    }

    & .k-list-vertical > .k-radio-list-item:not(:last-child) {
        margin-bottom: var(--eRadioGroupM, var(--spacing-3xl));
    }

    & .k-radio-list-item:has( .k-radio:checked:focus, .k-radio:checked ) {
        border: var(--eRadioGroupBorderCheck, 1px solid var(--brand-600));
    }

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

    & .k-radio {
        border: 1px solid var(--gray-300);
        background-color: transparent;
        margin-top: var(--eRadioGroupElMT, 4px);
    }

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

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

    & .eRadioWrapper {
        display: flex;
        gap: 4px;
        align-items: center;
        height: 38px;
        margin: 0 8px;

        & input[type=radio] {
            accent-color: var(--brand-600);
        }
    }
}

.eControls[data-accent="dark"] .eRadioGroup {
    & .rb-title {
        color: var(--gray-700) !important;
    }

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

/* ---- /css/eControls/eRadioCard.css ---- */
/* =========================================================
   eRadioCard — Card-based radio / checkbox selector
   Usage: .eRadioCard > label.eRadioCard__item > input + content
   ========================================================= */

/* ── Stack container — single column, cards one under another */
.eRadioCard {
    display: flex;
    flex-direction: column;
    gap: var(--eRadioCardGap, var(--spacing-sm));
    margin-top: var(--eRadioCardMT, var(--spacing-md));
}

/* ── Single card (is a <label>) — horizontal row ───────── */
.eRadioCard__item {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--spacing-lg);
    padding: var(--eRadioCardP, var(--spacing-lg) var(--spacing-xl));
    border: 2px solid var(--gray-200);
    border-radius: var(--radius-xl);
    background: var(--white);
    cursor: pointer;
    transition: border-color 0.15s ease,
                box-shadow     0.15s ease,
                background-color 0.15s ease;
    user-select: none;
    text-decoration: none;
    margin-bottom: 0;

    /* visually hide native input — kept accessible */
    & input[type="radio"],
    & input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        width: 1px;
        height: 1px;
        pointer-events: none;
    }

    &:hover {
        border-color: var(--brand-300);
        box-shadow: var(--shadow-sm);
    }

    &:focus-within {
        outline: none;
        box-shadow: var(--focus-ring-shadow-xs);
    }

    /* selected state — via CSS :has() + JS .active class */
    &.active,
    &:has(input:checked) {
        border-color: var(--brand-600);
        background-color: var(--brand-50);
        box-shadow: var(--shadow-custom-small);
    }
}

/* ── Selection indicator circle / square — left side ───── */
.eRadioCard__check {
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px; /* optical align with first text line */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--gray-300);
    background: var(--white);
    transition: border-color 0.15s ease, background-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eRadioCard__item.active .eRadioCard__check,
.eRadioCard__item:has(input:checked) .eRadioCard__check {
    border-color: var(--brand-600);
    background-color: var(--brand-600);
}

/* Radio: filled dot */
.eRadioCard__item.active .eRadioCard__check::after,
.eRadioCard__item:has(input:checked) .eRadioCard__check::after {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--white);
}

/* Checkbox variant: square with checkmark */
.eRadioCard__item--checkbox .eRadioCard__check {
    border-radius: var(--radius-xs);
}

.eRadioCard__item--checkbox.active .eRadioCard__check::after,
.eRadioCard__item--checkbox:has(input:checked) .eRadioCard__check::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: 2px solid var(--white);
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-2px);
    background: transparent;
}

/* ── Card content ───────────────────────────────────────── */

.eRadioCard__img {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--gray-200);
    flex-shrink: 0;
    align-self: flex-start;
    transition: border-color 0.15s ease;
}

.eRadioCard__item.active .eRadioCard__img,
.eRadioCard__item:has(input:checked) .eRadioCard__img {
    border-color: var(--brand-300);
}

/* ── Content block — name + bio + link in a column ──────── */
.eRadioCard__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.eRadioCard__name {
    font-size: var(--font-size-text-md);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-800);
    line-height: var(--line-height-text-md);
    word-break: break-word;
}

.eRadioCard__bio {
    font-size: var(--font-size-text-sm);
    color: var(--gray-600);
    line-height: var(--line-height-text-sm);
}

.eRadioCard__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-text-xs);
    font-weight: var(--font-weight-medium);
    color: var(--brand-600);
    text-decoration: none;
    margin-top: var(--spacing-xs);
    transition: color 0.12s ease;

    &:hover {
        color: var(--brand-700);
        text-decoration: underline;
    }

    &:focus-visible {
        outline: 2px solid var(--brand-500);
        outline-offset: 2px;
        border-radius: var(--radius-xxs);
    }
}

/* ── Vote instruction strip ─────────────────────────────── */
.eRadioCard__instruction {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--gray-100);
    border-radius: var(--radius-sm);
    border-left: 3px solid var(--brand-500);
    margin-bottom: var(--spacing-md);
}

/* ── Cumulative numeric variant ─────────────────────────── */
.eRadioCard__cumulative-item {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg) var(--spacing-xl);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    background: var(--white);
    margin-bottom: var(--spacing-md);
    transition: border-color 0.15s ease;

    &:hover {
        border-color: var(--brand-300);
    }

    &:last-child {
        margin-bottom: 0;
    }
}

.eRadioCard__cumulative-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.eRadioCard__cumulative-input {
    width: 64px;
    flex-shrink: 0;
    text-align: center;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-text-sm);
    color: var(--gray-800);
    background: var(--white);
    height: var(--components-height-sm);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;

    &:focus {
        outline: none;
        border-color: var(--brand-500);
        box-shadow: var(--focus-ring-shadow-xs);
    }
}

.eRadioCard__cumulative-label {
    font-size: var(--font-size-text-md);
    color: var(--gray-800);
    font-weight: var(--font-weight-medium);
    word-break: break-word;
    flex: 1;
    cursor: default;
    margin-bottom: 0;
}

/* ── Write-in section ───────────────────────────────────── */
.eRadioCard__writein {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--gray-200);
}

.eRadioCard__writein-title {
    font-size: var(--font-size-text-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--spacing-md);
}

.eRadioCard__writein-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-md) var(--spacing-xl);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-xl);
    background: var(--white);
    margin-bottom: var(--spacing-sm);
    transition: border-color 0.15s ease;

    &:last-child {
        margin-bottom: 0;
    }

    &:hover {
        border-color: var(--brand-300);
    }

    & .writein-name {
        flex: 1;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-sm);
        padding: 4px var(--spacing-md);
        font-size: var(--font-size-text-sm);
        color: var(--gray-800);
        height: var(--components-height-sm);
        transition: border-color 0.15s ease;

        &::placeholder {
            color: var(--gray-500);
        }

        &:focus {
            outline: none;
            border-color: var(--brand-500);
            box-shadow: var(--focus-ring-shadow-xs);
        }
    }
}

/* ── Review Vote popup content ───────────────────────────── */

.review__meta {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.review__election-title {
    font-size: var(--font-size-text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
    line-height: 1.3;
}

.review__detail {
    font-size: var(--font-size-text-sm);
    color: var(--gray-600);
}

.review__divider {
    border: none;
    border-top: 1px solid var(--gray-200);
    margin: 0;
}

.review__ballot-item {
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--gray-100);

    &:last-child {
        border-bottom: none;
    }
}

.review__ballot-label {
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-800);
    margin-bottom: var(--spacing-xxs);
}

.review__ballot-choice {
    font-size: var(--font-size-text-sm);
    color: var(--gray-600);
    padding-left: var(--spacing-md);
}

/* Signature section */
.review__signature-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-xs);
}

.review__signature-check-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    cursor: pointer;
    font-size: var(--font-size-text-sm);
    color: var(--gray-800);
    line-height: 1.5;
}

.review__signature-checkbox {
    flex-shrink: 0;
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--brand-500);
    cursor: pointer;
}

.review__signature-label {
    font-size: var(--font-size-text-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--gray-800);
}

.review__signature-error {
    font-size: var(--font-size-text-xs);
    color: var(--error-700);
}

/* Highlight applied when the user tries to submit without confirming */
.review__signature-check-label.--invalid {
    color: var(--error-700);
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: calc(var(--spacing-xs) * -1) calc(var(--spacing-sm) * -1);
    border-radius: var(--radius-md);
    background: var(--error-100);
    box-shadow: 0 0 0 1px var(--error-300);
    animation: review__signature-pulse 0.9s ease-out;
}

.review__signature-check-label.--invalid .review__signature-checkbox {
    accent-color: var(--error-500);
    outline: 2px solid var(--error-500);
    outline-offset: 1px;
}

@keyframes review__signature-pulse {
    0% { box-shadow: 0 0 0 0 var(--error-transparent-bc); }
    40% { box-shadow: 0 0 0 4px var(--error-transparent-bc); }
    100% { box-shadow: 0 0 0 1px var(--error-300); }
}

/* ── Vote Submitted popup content ────────────────────────── */

.success__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
    padding: var(--spacing-sm) 0;
}

.success__icon {
    color: var(--green-600, #16a34a);
    font-size: 48px;
    line-height: 1;

    svg-icon, i {
        width: 56px;
        height: 56px;
    }
}

.success__title {
    font-size: var(--font-size-text-lg);
    font-weight: var(--font-weight-bold);
    color: var(--gray-900);
    line-height: 1.3;
}

.success__warning {
    font-size: var(--font-size-text-sm);
    color: var(--yellow-800, #854d0e);
    background: var(--yellow-50, #fefce8);
    border: 1px solid var(--yellow-300, #fde047);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: center;
    width: 100%;
}

.success__extra-text {
    font-size: var(--font-size-text-sm);
    color: var(--gray-700);
    padding-top: var(--spacing-sm);
}

.success__print-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-text-sm);
    color: var(--brand-600);
    text-decoration: none;
    padding-top: var(--spacing-sm);

    &:hover {
        color: var(--brand-700);
        text-decoration: underline;
    }
}


/* ---- /css/eControls/eMenu.css ---- */
.eControls .eMenu {
    & .k-menu-vertical:not(.k-context-menu) {
        padding: 0 !important;
        border: none !important;
        background: transparent !important;
   }

    & .k-menu-link-text {
        align-items: center;
        font-weight: 400;
        margin-left: 12px;
    }

    & .k-list-item-text::before {
        line-height: 0 !important;
    }

    & .k-item.k-hover, 
    & .k-item.k-focus {
        background: var(--brand-50);
    }
}

/* ---- /css/eControls/eBar.css ---- */
.eControls .eBar {
    & .k-panelbar {
        width: 100%;
        border-radius: var(--radius-lg);
        border: none;
        background: transparent;
        font-weight: 600;
    }

    & .k-panelbar-item {
    }

    & .k-panelbar-header {
        border: none !important;
    }

        & .k-panelbar-header > .k-link,
        & .k-item {
            padding: 6px 16px !important;
            margin: 0 8px;
            border-radius: var(--radius-sm);
            color: var(--gray-800) !important;
        }

    & .k-link.k-state-selected {
        background: transparent !important;
    }

    & .k-link:focus,
    & .k-link.k-state-focus,
    & .k-link.k-state-focused {
        box-shadow: none !important;
    }

    & .k-panelbar-item-text {
        font-weight: 800;
        color: var(--eBarItemTextColor, var(--gray-500));
        flex-grow: 1;
        min-width: 0; /* critical: allows text to shrink so ellipsis works */
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    & .k-expanded .k-panelbar-item-text {
        color: var(--eBarActiveItemTextColor, var(--gray-500));
    }

    & i {
        width: 20px;
        color: var(--brand-400);
    }

    & .k-menu-link-text {
        gap: 8px;
    }

    & .k-menu-link-text {
        color: var(--gray-700);
        font-weight: 600;
    }

        & .k-menu-link-text > span:not(.notification-badge) {
            flex-grow: 1;
            min-width: 0; /* critical: allows text to shrink so ellipsis works */
            max-width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    & .k-i-arrow-chevron-up::before,
    & .k-i-arrow-chevron-down::before {
        color: var(--gray-500);
    }

    & .k-panelbar-header > .k-link.k-selected {
        background: var(--brand-50);
    }

    & .k-link.k-focus {
        box-shadow: none;
    }

    & .k-menu-link-text i {
        display: none;
    }

    & .k-hover .k-menu-link-text i {
        display: block;
        transition: all .4s ease;
    }

    & .k-panelbar-header .k-panelbar-header {
        padding: 2px 0 2px 20px;
    }

    & .k-panelbar .k-link:not(.k-header):hover {
        border-radius: var(--radius-sm);
    }
}

/* ---- /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/eTreeView.css ---- */
:root {
    --tv-icon-size: 16px;
    --tv-pad-x: 8px;
    --tv-pad-y: 4px;
    --tv-gap: 6px;
    --tv-sel-bg: var(--brand-50);
    --tv-sel-color: var(--gray-900);
    --tv-hov-bg: var(--brand-100);
}

.eControls .eTreeView--doc {
    
    & .k-treeview .k-treeview-item {
        position: relative;
        padding: var(--tv-pad-y) var(--tv-pad-x) var(--tv-pad-y) calc(var(--tv-pad-x) * 2 + var(--tv-icon-size));
        border-radius: 6px;
        line-height: 1.4;
        font-size: 14px;
        display: block;
    }

    & .tree-node-content::before {
        content: "";
        position: sticky;
        width: var(--tv-icon-size);
        height: var(--tv-icon-size);
        transform: translateY(-16%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    /*& .k-treeview .k-treeview-leaf > .k-mid > .k-treeview-item::before,
    & .k-treeview .k-treeview-item::before { 
        background-image: url("/images/TreeViewFolder-icon.svg");
    }*/

    & .tree-node-content:has( > .folder__type-1)::before {

        background-image: url("/images/TreeViewFolder-icon.svg");
    }

    & .tree-node-content:has( > .folder__type-2)::before {
        background-image: url("/images/TreeViewFolderDot-icon.svg");
    }

    & .tree-node-content:has( > .folder__type-3)::before {
        background-image: url("/images/TreeViewFolderViolet-icon.svg");
    }

    & .tree-node-content:has( > .folder__type-4)::before {
        background-image: url("/images/TreeViewFolderVioletDot-icon.svg");
    }

    /*& .k-treeview li[aria-expanded="false"]:has( > :not(ul))::after {
        content: "\e013";
        transform: rotate(90deg);
    }

    &  .k-treeview li[aria-expanded="true"]:has( > :not(ul))::after {
        content: "\e013";
        transform: rotate(180deg);
    }*/

    & .k-treeview .k-treeview-item.k-selected,
    & .k-treeview .k-mid.k-selected > .k-treeview-item,
    & .k-treeview .k-item.k-selected > .k-mid > .k-treeview-item,
    & .k-treeview-leaf.k-selected {
        background: var(--tv-sel-bg);
        color: var(--tv-sel-color);
    }

    /*& .k-treeview .k-treeview-item:hover {
        background: var(--tv-hov-bg);
    }*/

    & .k-treeview.k-treeview-lines .k-lines .k-line {
        border-color: var(--brand-300);
    }

    & .k-treeview .k-treeview-item.k-i-collapse,
    & .k-treeview .k-treeview-item.k-i-expand {
        margin-right: 2px;
    }

    & .k-treeview-leaf-text {
        display: block;
        /*width: 120px;*/
        white-space: nowrap; 
        overflow: hidden; 
        /*text-overflow: ellipsis;*/
    }

    & .tree-node-wrapper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        & .tree__node-file-name {
            /*max-width: 100px;*/
        }

        /*& .k-treeview-item {
            display: none;
        }*/
    }

   /* & .custom-template-applied {
        & .k-treeview-leaf {
            display: none;
        }
    }*/
    
    & .tree-node-content {
        display: grid;
        grid-template-columns: 16px auto;
        align-items: center;
        gap: 12px;
    }
    
    & .tree-dots-menu {
        position: relative;
        opacity: 0;
        transition: opacity 0.2s;
        cursor: pointer;
        padding: 4px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-left: 8px;
    }
    
    & .tree-dots-menu:hover {
        background-color: var(--brand-150);
    }
    
    & div:where(.k-treeview-top, .k-treeview-mid, .k-treeview-bot):hover .tree-dots-menu {
        opacity: 1;
    }
    
    & .tree-dots-menu.active {
        opacity: 1;
        background-color: var(--brand-150);
    }
    
    & .tree-context-menu {
        position: absolute;
        top: calc(100% + 4px);
        right: 0;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.15);
        z-index: 1000;
        min-width: 160px;
        padding: 4px 0;
        display: none;
    }
    
    & .tree-context-menu-item {
        display: flex;
        align-items: center;
        padding: 8px 12px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.2s;
    }
    
    & .tree-context-menu-item:hover {
        background-color: var(--brand-150);
    }
    
    & .tree-context-menu-item img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
    }
 
}

/* ---- /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/eListBox.css ---- */
.eControls .eListBox {
    & .label__eListBox {
        height: 40px;
        display: flex;
        align-items: center;
        white-space: nowrap;
    }

    & .k-selectable {
        width: 100%;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: transparent;
    }

    & .eSearch {
        padding: 4px 12px;
    }

    & .icon-controls {
        align-items: center;
    }

    & .right-icon,
    & .left-icon,
    & .rightDouble-icon,
    & .leftDouble-icon {
        width: 28px;
        height: 28px;
        padding: 4px;
        border-radius: var(--radius-xs);
        background: transparent;
    }

        & .right-icon span,
        & .left-icon span,
        & .rightDouble-icon span,
        & .leftDouble-icon span {
            width: 20px;
            height: 20px;
        }

        & .right-icon span {
            background-image: url("/images/right-icon.svg");
        }

        & .left-icon span {
            background-image: url("/images/left-icon.svg");
        }

        & .rightDouble-icon span {
            background-image: url("/images/rightDouble-icon.svg");
        }

        & .leftDouble-icon span {
            background-image: url("/images/leftDouble-icon.svg");
        }

    & .k-list-item {
        width: 100%;
        /*max-width: 700px;*/
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

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

    & .k-list {
        border-radius: var(--radius-md);
    }

    & .k-button {
        background-color: var(--white);
        color: var(--gray-700);
        border-color: var(--gray-300);
    }
}

.eControls[data-accent="dark"] .eListBox {
    & .label__eListBox {
        color: var(--gray-700) !important;
    }
}

/* ---- /css/eControls/eMultiSelect.css ---- */
.eControls .eMultiSelect {
    & .--eLabel {
        font-weight: 500;
        font-size: 14px;
        color: var(--gray-700);
        margin-bottom: 8px;
    }

    & .k-multiselect {
        width: 100%;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 600;
        padding: 2px 8px;
        min-height: 40px;
        height: auto;
    }

    & .e-multiselect-no-remove ~ .k-input-values .k-chip-content {
        margin-inline-end: var(--kendo-spacing-1, 0.25rem);
    }

    & .e-multiselect-no-remove ~ .k-input-values .k-chip-actions {
        display: none !important;
    }

    & .k-input-values {
        padding: 1px 0;
    }

    & .k-chip {
        font-weight: 500;
        font-size: 14px;
        color: var(--gray-700);
        padding: 2px 4px;
        background: transparent;
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-md);
    }

    & .k-chip-icon {
        color: var(--gray-500);
    }

    .eMultiSelect.disabled {
        opacity: 0.5;
        pointer-events: none;
        cursor: not-allowed;
    }

    .eMultiSelect.disabled .k-multiselect {
        background-color: var(--gray-100);
        cursor: not-allowed;
    }
}

/* eMultiSelect "+X more" tag styling */
.e-more-tag {
    pointer-events: none;
    cursor: default;
}

.e-more-tag .k-chip-content {
    margin-inline-end: 0;
}

/* ---- /css/eControls/eAttachedFiles.css ---- */
.eControls .eAttachedFiles {
    width: 100%;

    & .file-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        max-width: var(--eAttachedFilesW, 100%);
        border-radius: var(--radius-none);
        border-bottom: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 600;
        padding: 8px 12px;
        margin-bottom: 12px;
    }

    & a {
        color: var(--gray-900) !important;
    }

    & .eAttachedFiles__info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-width: 0;
    }
        /* Any intermediate flex wrapper (e.g., --eBlock in _FilesContainerPartial)
        must be able to shrink, otherwise a long name will push out the arrow/break the ellipsis. */
        & .eAttachedFiles__info > * {
            min-width: 0;
        }
    /* & .eAttachedFiles__info > svg {
        width: 32px;
        height: 32px;
    }*/

    & .eAttachedFiles__info-text {
        margin-left: var(--spacing-md);
        flex: 1 1 auto;
        min-width: 0; /* critical: allows text to shrink so ellipsis works */
        max-width: calc(100% - 40px);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        & > span {
            min-width: 0; /* critical: allows text to shrink so ellipsis works */
            max-width: calc(100% - 40px);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }
}

#pendingFilesContainer {
    margin-top: 12px;
}

/* ---- /css/eControls/eTextArea.css ---- */
.eControls .eTextArea {
    width: 100%;

    & .k-textarea,
    & .form-control__textarea {
        width: 100%;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 600;
        min-height: 40px;

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

    & .k-input-solid.k-focus,
    & .k-input-solid:focus,
    & .form-control__textarea: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);
        }
    }
}

/* ---- /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/eWindow.css ---- */
.eControls .k-window {
    border-radius: var(--radius-2xl);
    border: none;
    padding: 0;
    min-width: 350px;
    box-shadow: none !important;

    & .k-window-titlebar {
        background-color: transparent;
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        border-bottom-width: 1px !important;
        border-color: var(--gray-200);
    }

    & .k-window-content {
        padding: 0;
        display: flex;
        flex-direction: column;
        border-radius: var(--radius-2xl);
    }

    @media (max-width: 767px) {
        & {
            border-radius: 0 !important;
        }
    }
}

@media (max-width: 767px) {
    .eControls .eWindow-header .--eForm {
        --eFormBorderR: 0 !important;
    }
}

/* ---- /css/eControls/eSplitter.css ---- */
.eSplitter {
    --eSplitterH: 640px;
    --eSplitterBarSize: var(--spacing-lg);
    --eSplitterBarBg: var(--brand-100);
    --eSplitterBarBgHover: var(--brand-300);
    --eSplitterBarBgActive: var(--brand-500);
    --eSplitterBarRadius: var(--radius-full);

    height: var(--eSplitterH);
    width: 100%;

    & .k-splitter {
        border: none;
        background: transparent;
        height: 100%;
        width: 100%;
    }

    & .k-pane {
        overflow: hidden;
    }

    & .k-splitbar {
        background-color: var(--eSplitterBarBg);
        border: none;
        transition: background-color 0.2s ease;

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

        &:hover,
        &.k-splitbar-draggable-horizontal:hover,
        &.k-splitbar-draggable-vertical:hover {
            background-color: var(--eSplitterBarBgHover);
            cursor: col-resize;
        }

        &:active {
            background-color: var(--eSplitterBarBgActive);
        }
    }

    & .k-splitbar-horizontal {
        width: var(--eSplitterBarSize);
        border-radius: var(--eSplitterBarRadius);
    }

    & .k-splitbar-vertical {
        height: var(--eSplitterBarSize);
        border-radius: var(--eSplitterBarRadius);

        &:hover,
        &.k-splitbar-draggable-vertical:hover {
            cursor: row-resize;
        }
    }
}

/* ---- /css/eControls/eDiscussion.css ---- */
.eControls .eDiscussion {
    width: 100%;

    & .header__discussion {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-content: center;
        align-items: center;
    }

    & .icon__discussion {
        position: absolute;
        left: -50px;
        top: 0;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid #71768070;
        background: var(--gray-100);
        color: var(--gray-500);
        font-size: 20px;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    /* Uploaded profile picture shown in place of the initials circle */
    & .icon__discussion .avatar__discussion {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

    & .comment-container {
        padding: 8px 0;
        min-width: 370px;
        border-bottom: 1px solid var(--gray-200);
    }

    & .comment-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        gap: 15px; 
    }

    & .comment-date {
        font-size: 0.9em;
        color: var(--gray-500);
        margin-top: 2px;
        margin-bottom: 12px;
    }

    & .author-name {
        flex-grow: 1; 
    }

    & .comment-body {
        margin-bottom: 8px;
        max-width: var(--paragraph-max-width);
        width: 100%;
        text-wrap: auto;
        overflow-wrap: anywhere;
    }

    & li:has( .k-treeview-toggle) {
        position: relative;
    }

    & .k-treeview-toggle {
        margin-right: 24px;
    }

    & .k-treeview-toggle:has( .k-svg-i-caret-alt-down)::after {
        content: "";
        border-left: 1px dashed var(--gray-300);
        height: calc(100% - 80px);
        width: 1px;
        position: absolute;
        top: 72px;
    }

    & .k-treeview-toggle .k-svg-icon {
        position: absolute;
        top: 58px;
        left: 12px;
        width: 17px;
    }

    & .comment-footer {
        /*flex-end*/
        justify-content: flex-start; 
    }

    & .attachments-section {
        display: flex; 
        align-items: baseline; 
        margin-top: 12px; 
        font-size: 0.9em; 
    }

    & .attachments-label {
        font-weight: bold;
        margin-right: 8px; 
        flex-shrink: 0;
    }

    & .attachment-links {
        display: flex; 
        flex-direction: column;
        flex-wrap: wrap; 
        gap: 4px;
    }

    & .attachment-link {
        text-decoration: underline;
    }

    & .k-treeview-item {
        padding: 0 0 0 48px;
    }

    & .k-hover,
    & .k-focus {
        background-color: transparent;
        border: none;
        box-shadow: none;
    }

    /*& .btn__discussion {
        margin-top: 16px;
    }*/

    & .btn__discussion button {
        color: var(--brand-700);
        border: 1px solid var(--brand-700);
        border-radius: 4px;
        text-decoration: none;
        font-weight: 600;
        display: flex;
        gap: 4px;
        padding: 4px !important;

        &:hover {
            opacity: .7;
        }
    }

    /*& .icon-edit:before {
        content: "";
        width: 20px;
        height: 20px;
        background-image: url("/images/edit-icon.svg");
    }*/
}

/* ---- /css/eControls/eTimePicker.css ---- */
.eControls .eTimePicker {
    display: flex;
    flex-direction: column;

    & .k-timepicker {
        width: 100%;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 400;
        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;
    }

    & .k-input-button {
        background: transparent;
    }
}

/* ---- /css/eControls/eDateTimePicker.css ---- */
.eControls .eDateTimePicker {
    & .k-datetimepicker {
        width: 100%;
        border-radius: var(--radius-lg);
        border: 1px solid var(--gray-300);
        background: transparent;
        font-weight: 400;
        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;
    }

    & .k-input-button {
        background: transparent;
        border-inline-start-width: 0px !important;
    }
}

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

    & .k-numerictextbox {
        width: 100%;
        border-radius: var(--eNumericTextBoxBorderR, var(--radius-lg));
        border-style: solid;
        border-color: var(--eNumericTextBoxBorderColor, var(--gray-300));
        border-width: var(--eNumericTextBoxBorderW, 1px);
        background: transparent;
        font-weight: 400;
        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;
    }

    & .k-selected {
        border-color: var(--brand-400);
        background-color: var(--brand-600);
    }
}

/* ---- /css/eControls/eAccordionsGroup.css ---- */
.eControls .eAccordionsGroup {
    display: flex;
    flex-direction: column;
    margin: 0 16px;

    & .eAccordion {
        border-bottom: 1px solid var(--gray-200);
    }
}

    .eControls .eAccordionsGroup .eAccordion {
        &.expanded .eAccordion-icon {
            transform: rotate(180deg);
        }

        &.expanded .eAccordion-content {
            max-height: 1000px;
        }

        & .eAccordion-header {
            width: 100%;
            padding: 12px 8px;
            background: none;
            border: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            text-align: left;
            transition: background-color 0.2s;
            color: var(--gray-900);
        }

            & .eAccordion-header:hover {
                background-color: var(--gray-100);
            }

        & .eAccordion-icon {
            transition: transform 0.2s;
        }

        & .eAccordion-content {
            max-height: 0;
            overflow: hidden;
        }

        & .eAccordion__menu-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

            & .eAccordion__menu-list li {
                position: relative;
            }

        & .eAccordion__menu-item {
            display: flex;
            align-items: center;
            gap: var(--spacing-md);
            padding: var(--spacing-sm) var(--spacing-xl);
            text-decoration: none;
            transition: background-color 0.2s;
            border: 0;
            font-size: 14px;
            line-height: 1.4285714286;
            margin-bottom: var(--spacing-xs);
        }

            & .eAccordion__menu-item span:not([class]) {
                color: var(--gray-700);
            }

            & .eAccordion__menu-item.active {
                background-color: var(--brand-50);
                border-radius: var(--radius-sm);
            }

                & .eAccordion__menu-item.active span:not(.eAccordion__notification-badge) {
                    color: var(--brand-600);
                    font-weight: 500;
                }

                & .eAccordion__menu-item.active i {
                    color: var(--brand-600);
                    display: block;
                }

            & .eAccordion__menu-item:hover i {
                display: block;
            }

            & .eAccordion__menu-item:hover {
                background-color: var(--brand-100);
                border-radius: var(--radius-sm);
            }

                & .eAccordion__menu-item:hover span:not([class]) {
                    color: var(--gray-700);
                }

            & .eAccordion__menu-item:visited span:not([class]) {
                color: var(--gray-700);
            }

            & .eAccordion__menu-item i {
                width: 20px;
                text-align: center;
                flex-shrink: 0;
                display: none;
            }

        & .eAccordion__menu-item-not-ready {
            cursor: not-allowed !important;
            pointer-events: none !important;
            opacity: 0.5;
        }

        & .eAccordion__notification-badge {
            background-color: var(--brand-600);
            color: var(--text-on-brand);
            border-radius: 4px;
            padding: 2px 6px;
            font-size: 11px;
            font-weight: bold;
            margin-left: auto;
            min-width: 16px;
            text-align: center;
        }
    }

/* ---- /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);
}

/* ---- /css/eControls/eunChat.css ---- */
:host {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    /*border: 1px solid #ccc;*/
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    overflow-anchor: none !important;
    -webkit-text-size-adjust: 100%;
    container-type: inline-size;
    container-name: chat__resize;
    --color-1: var(--color_eUnify, var(--brand-600, #7F56D9));
    --color-text-chat: var(--gray-900, #181d27);
    --color-chat: rgba(from var(--gray-900, #181d27) r g b / 0.14);
    --color-2: var(--white, #ffffff);
    --color-def: rgba(249, 249, 249, .9); /*transparent;*/
    --color-bg-attch: var(--gray-300, #d5d7da);
    --chatcomponent-user-mess-bg: var(--color-1);
    --chatcomponent-chat-mess-bg: var(--color-def);
    --chatcomponent-chatV2-mess-bg: var(--color-chat);
    --chatcomponent-user-mess-text: var(--color-2);
    --chatcomponent-chat-mess-text: var(--color-text-chat);
    --chatcomponent-new-chat: var(--color-2);
    --chatcomponent-send-mess: var(--color-1);
    --chatcomponent-file-bg: var(--color-bg-attch);
    --chatcomponent-mention-color: var(--color-1);
    /* Font scale for accessibility A-A-A control. Default = 1 (no change). */
    --eun-chat-font-scale: 1;
}

button, input, optgroup, select, textarea, h2, div {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
}

.eunChat-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px;
    /*background: #f9f9f9;*/
    width: 100%;
    position: relative;

    & h2 {
        margin: 0;
    }

    & .header__label-name-mob,
    & .header__label-name {
        display: none;
    }

    @container eunChat__resize (max-width: 790px) {
        & {
            justify-content: flex-end;
        }

            & .new-eunChat-btn {
                max-width: 100px;
                width: 100%;
                gap: 8px;
            }

            & .header__label-name-mob {
                display: block;
            }
    }
}

.new-chat-btn {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    padding: 4px;
    margin: 8px;
    border-radius: 4px;
    cursor: pointer;
    background: var(--chatcomponent-new-chat);
    border: 1px solid hsl(from var(--chatcomponent-send-mess) h s l / 0.2);
}

    .new-chat-btn:hover {
        background-color: hsl(from var(--chatcomponent-send-mess) h s l / 0.5);

        @container chat__resize (min-width: 800px) {
            & ~ .header__label-name {
                display: block;
                position: absolute;
                bottom: -20px;
                padding: 4px 8px;
                left: 8px;
                z-index: 2;
                border: 1px solid hsl(from var(--chatcomponent-send-mess) h s l / 0.2);
                border-radius: 4px;
                font-size: 14px;
            }
        }
    }

.eunChat-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    /*background: #f9f9f9;*/
    height: 100%;
    min-height: 0;
    overflow-anchor: none !important;
}

/* Wrapper around the scrollable history — positioning context for the
   floating "scroll to latest" button so the button stays put while the
   history scrolls underneath it. */
.eunChat-historyWrap {
    position: relative;
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eunChat-history {
    flex: 1;
    overflow-y: auto;
    /* Prevent wide content (long unbreakable tokens, code) from creating a
       horizontal scrollbar. padding-left:34px gives .message-actions (left:-24px)
       enough room so overflow-x:hidden does not clip them. */
    overflow-x: hidden;
    overflow-anchor: none !important;
    padding: 10px 10px 10px 34px;
    /*background: #f9f9f9;*/
    max-width: 768px;
    width: calc(100% - 38px);
    margin-bottom: 20px;
    min-height: 0;
    /* Scale message bubble text via the host-level custom property. */
    font-size: calc(16px * var(--eun-chat-font-scale));
}

/* Jump-to-bottom pill — only visible (via .is-visible) when scrolled up. */
.eunChat-scrollBottom {
    position: absolute;
    bottom: 28px;
    left: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 50%;
    background: #fff;
    color: var(--gray-600, #475467);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    z-index: 7;
    /* hidden state */
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

    .eunChat-scrollBottom.is-visible {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
        pointer-events: auto;
    }

    .eunChat-scrollBottom:hover {
        background: var(--gray-50, #f9fafb);
        color: var(--gray-800, #1d2939);
    }

    .eunChat-scrollBottom:focus-visible {
        outline: 2px solid var(--chatcomponent-user-mess-bg, #0d6efd);
        outline-offset: 2px;
    }

/* Busy overlay — sibling of #eunChatHistory, positioned over it via JS offset metrics */
.eunChat-busy {
    position: absolute; /* geometry set by _positionBusy() to match the history box */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.55); /* slight veil — history stays visible underneath */
    z-index: 6;
    border-radius: 10px;
}

    .eunChat-busy.is-active {
        display: flex;
    }

.eunChat-busy__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 0, 0, .12);
    border-top-color: var(--chatcomponent-user-mess-bg, #0d6efd);
    border-radius: 50%;
    animation: eunChat-busy-spin .8s linear infinite;
}

@keyframes eunChat-busy-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Notification stack — top-right, over the chat. Entries auto-dismiss or close via × */
.eunChat-toasts {
    position: absolute;
    top: 44px;
    right: 12px;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-width: min(360px, calc(100% - 24px));
    pointer-events: none; /* container ignores clicks; individual toasts re-enable */
}

.eunChat-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--white, #ffffff);
    color: var(--gray-900, #181d27);
    font-size: 13px;
    line-height: 1.35;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    border-left: 3px solid var(--color-1, #0d6efd);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(12px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .eunChat-toast.is-visible {
        opacity: 1;
        transform: translateX(0);
    }

.eunChat-toast--warn {
    border-left-color: #f59e0b;
}

.eunChat-toast--error {
    border-left-color: #ef4444;
}

.eunChat-toast--success {
    border-left-color: #22c55e;
}

.eunChat-toast--info {
    border-left-color: var(--color-1, #0d6efd);
}

.eunChat-toast__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eunChat-toast__title {
    font-weight: 600;
    font-size: 13px;
}

.eunChat-toast__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-size: 12px;
}

.eunChat-toast__name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--gray-800, #1d2939);
}

.eunChat-toast__reason {
    flex: none;
    font-size: 11px;
    color: var(--gray-500, #667085);
}

.eunChat-toast__close {
    flex: none;
    width: 18px;
    height: 18px;
    margin: -2px -4px 0 0;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--gray-500, #667085);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    border-radius: 4px;
}

    .eunChat-toast__close:hover {
        background: rgba(0, 0, 0, 0.06);
        color: var(--gray-800, #1d2939);
    }

.eunChat-wrapper__mess {
    width: fit-content;
    max-width: calc(100% - 160px);
}

.body__mess {
    padding: 8px 12px;
    border-radius: 6px;
    margin: 4px;
    /* overflow-wrap:anywhere breaks only truly unbreakable tokens (long URLs,
       code identifiers) while keeping normal words intact; it also reduces
       the min-content width so fit-content bubbles never push past the container.
       word-break:break-all is removed — it was splitting ordinary words
       mid-character unnecessarily. */
    overflow-wrap: anywhere;
    min-width: 0;
    max-width: 100%;
    position: relative;

    & a {
    }

    & .message-actions {
        position: absolute;
        left: -24px;
        top: 4px;
        display: flex;
        flex-direction: column;
    }

    & .message-action {
        width: 24px;
        height: 14px;
        background: transparent;
        border: none;
        border: none;
        opacity: 0.6;
        cursor: pointer;
    }

        & .message-action:hover {
            opacity: 1;
        }

    &.minimal-user {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 4px;
        border-bottom-left-radius: 12px;
    }

    &.minimal-chat {
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-bottom-left-radius: 4px;
    }
}

    /* Apply pre-wrap only to user bubbles, not bot/AI bubbles.
   v1 (eun_Chat.js): user messages are set via textContent (plain text) — newlines must
   be preserved visually; bot/loading bubbles receive class "mess__chat" (eun_Chat.js:363).
   v2 (eun_ChatV2.js): bot bubbles receive "mess--chat", system get "mess--system".
   User bubbles in both components have none of those three classes, so the :not() chain
   targets exactly the right set without touching bot/AI messages whose innerHTML markup
   would produce spurious blank lines under pre-wrap. */
    .body__mess:not(.mess__chat):not(.mess--chat):not(.mess--system) {
        white-space: revert; /*pre-wrap;*/
    }

.mess--user {
    text-align: right;
}

.mess--chat,
.mess--system {
    text-align: left;
}

.mess--system {
    opacity: 0.7;
}

.mess--user ~ .eunChat-message-info {
    display: flex;
    justify-content: flex-end;
    margin-right: 4px;
}

.mess--chat ~ .eunChat-message-info {
    display: flex;
    justify-content: flex-start;
    margin-left: 4px;
}

.default-user {
    background-color: var(--chatcomponent-user-mess-bg);
    color: var(--chatcomponent-user-mess-text);
}

.default-chat {
    background-color: var(--chatcomponent-chat-mess-bg);
    border: 1px solid var(--brand-100, #F4EBFF);
    color: var(--chatcomponent-chat-mess-text);
    line-height: 16px;

    & b {
        color: var(--gray-800, #252b37);
        line-height: 20px;
    }

    & a {
        color: #0d6efd;
        text-decoration: underline;
    }
}

.minimal-user {
    background: var(--chatcomponent-user-mess-bg);
    border: 1px solid var(--chatcomponent-user-mess-bg);
    color: var(--chatcomponent-user-mess-text);
    line-height: 16px;

    & b {
        color: var(--gray-800, #252b37);
        line-height: 20px;
    }

    & a {
        color: #0d6efd;
        text-decoration: underline;
    }
}

.minimal-chat {
    background: var(--gray-50, #fafafa);
    border: 1px solid var(--chatcomponent-chatV2-mess-bg);
    color: var(--chatcomponent-chat-mess-text);
    line-height: 16px;

    & b {
        color: var(--gray-800, #252b37);
        line-height: 20px;
    }

    & a {
        color: #0d6efd;
        text-decoration: underline;
    }
}

.eunChat-input {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    padding-right: 68px;
    background: var(--gray-50, #fafafa);
    border: 1px solid var(--gray-300, #d5d7da);
    border-radius: 16px;
    /*background: #f9f9f9;*/
    max-width: 768px;
    width: calc(100% - 28px);
}

    .eunChat-input textarea,
    .eunChat-input .eTextBox {
        flex: 1;
        height: 36px;
        padding: 10px;
        border-radius: 16px;
        background: var(--gray-50, #fafafa);
        border: 0px solid var(--gray-300, #d5d7da);
        resize: none;
        font-size: calc(16px * var(--eun-chat-font-scale));
    }

        .eunChat-input textarea:focus-visible {
            outline: 1px solid var(--brand-300);
        }

    .eunChat-input .eTextBox {
        box-shadow: none;
    }

    .eunChat-input .RadInputHovered,
    .eunChat-input .RadInputFocused,
    .eunChat-input .RadInputFocused .riTextBox {
        background: transparent;
        box-shadow: none !important;
        border-color: none !important;
    }

.eunChat-input {
    & .eTextBox .messenger-textarea {
        padding: 0;
        background: transparent;
        border: none;
    }

    &[chatDiscussion] {
        width: auto;
    }

        &[chatDiscussion] .messenger-textarea.RadInputMultiline.eTextBox {
            width: 100vw !important;
        }
}

.eunChat-input {
    position: relative;
    width: 100%;
    display: flex;

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

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

    & .eunChat-panel__panel-feld {
        display: flex;
        width: 100%;
        flex-direction: column;
        gap: 12px;
    }

    & .eunChat-panel {
        position: absolute !important;
        right: 4px;
        display: flex;
        justify-content: space-between;
    }

    & .eunCht-panel__attach {
        width: 100%;
        overflow: auto;
    }

    & .eunCht-panel__btn {
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
        gap: 4px;
        align-items: center;
        width: 60px;
    }

    & .send-btn,
    & .attach-btn,
    & .quick-notes-btn,
    & .stt-btn {
        width: 28px !important;
        min-width: 28px;
        height: 28px !important;
        background-color: var(--chatcomponent-send-mess);
        color: var(--text-on-brand, #ffffff);
        border: none;
        cursor: pointer;
        border-radius: 50% !important;
        display: flex !important;
        justify-content: center;
        align-items: center;

        &.RadButton[chatDiscussion] {
            background: var(--color_eUnify, var(--brand-600, #7F56D9));
            min-width: 28px !important;
            border-radius: 50% !important;
            padding: 4px 2px !important;
        }

        & svg {
            fill: var(--text-on-brand, #ffffff);
        }

        &[hidden] {
            display: none !important;
        }
    }

    & .eunChat-files {
        display: none;
        padding: 0;
        gap: 8px;
        white-space: nowrap;
    }

    & .eunChat-file {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 2px;
        background: var(--chatcomponent-file-bg);
        border-radius: 4px;
    }

    & .eunChat-mentions {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(100% + 6px);
        width: fit-content;
        background: var(--white, #ffffff);
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 10px;
        box-shadow: 0 8px 24px rgba(0,0,0,.12);
        max-height: 220px;
        overflow-y: auto;
        z-index: 1000;
    }

    & .eunChat-mention-item {
        padding: 6px 10px;
        cursor: pointer;
    }

        & .eunChat-mention-item:hover {
            background: var(--gray-200, #e9eaeb);
        }

    & .eunChat-editor {
        flex: 1;
        box-sizing: border-box;
        background: var(--white, #ffffff);
        border: 1px solid rgba(0,0,0,.2);
        border-radius: 10px;
        line-height: 1.3;
        padding: 8px 12px;
        font: inherit;
        font-size: calc(16px * var(--eun-chat-font-scale));
        min-height: 60px;
        max-height: 200px;
        overflow-y: auto;
        resize: none;
        outline: none;
        white-space: pre-wrap;
        word-break: break-word;
        transition: min-height .15s ease;
        transform: translateZ(0);
    }

        & .eunChat-editor:focus {
            border-color: #0b5cff;
            box-shadow: 0 0 0 2px rgba(11,92,255,.15);
        }

        & .eunChat-editor:empty:before {
            content: attr(data-placeholder);
            color: var(--gray-400, #6B6B6B);
            opacity: .7;
            pointer-events: none;
        }
}

.eunChat-mention__chip {
    font-weight: 600;
    font-size: 16px;
}

.mess--user .eunChat-mention__chip {
    color: var(--text-on-brand, #ffffff);
}

.mess--chat .eunChat-mention__chip {
    color: var(--chatcomponent-mention-color);
}

.eunChat-editor .eunChat-mention__chip {
    color: var(--chatcomponent-mention-color);
}

.send-btn:hover,
.attach-btn:hover,
.quick-notes-btn:hover,
.stt-btn:hover {
    background-color: hsl(from var(--chatcomponent-send-mess) h s l / 0.5);
}

.loading {
    font-style: italic;
    color: var(--gray-400, #6B6B6B);
}

    .loading span {
        animation: dots 1.5s infinite;

        &:nth-child(1) {
            animation-delay: 0s;
        }

        &:nth-child(2) {
            animation-delay: 0.3s;
        }

        &:nth-child(3) {
            animation-delay: 0.6s;
        }
    }

.eunChat__block-sender {
    display: flex;
    flex-direction: column;
}

.eunChat-upload {
    padding: 0 10px;
}

.chat__wrapper {
    height: var(--chatWrapperH, calc(70vh - 80px));
}

.section-mess__block {
    display: flex;
    align-items: flex-end;
    gap: 12px;

    &.section-mess__user {
        justify-content: flex-end;
    }

    &.section-mess__chat {
        justify-content: flex-start;
    }

    &.section-mess__header {
        justify-content: flex-start;
        padding: 8px;
        border-radius: 12px;
        border: 1px solid var(--chatcomponent-user-mess-bg);
    }
}

.section-mess__chat .eunChat-authorRow {
    background: var(--gray-50, #fafafa);
    border: 1px solid var(--chatcomponent-chatV2-mess-bg);
    color: var(--gray-800, #252b37);
}

.section-mess__user .eunChat-authorRow {
    background: #0d6efd3d;
    border: 1px solid var(--chatcomponent-chatV2-mess-bg);
    color: #0e00eb;
}

/*.section-mess__chat {
    flex-direction: row-reverse;
}*/

.eunChat-message-body {
    display: flex;
    gap: 4px;
    align-items: flex-start;
}

.minimal-user .eunChat-message-body {
    flex-direction: row-reverse;
}

.messenger-message-right {
    margin-left: auto;
}

.messenger-message-left {
    margin-right: auto;
}

.eunChat-attachments {
}

.chat__wrapper {
    height: var(--eunChatWrapperH, calc(100vh - 300px));
    min-height: 280px;
    width: 100%;
}

/* Responsive thumbnail row — thumbs share available width, no scrollbar ever */
.eunChat-gallery {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    margin-bottom: 12px;
    /* no overflow/scroll — flex-shrink on children prevents any overflow */
}

.eunChat-gallery__thumb {
    flex: 1 1 0; /* share row width equally; may shrink below intrinsic size */
    min-width: 0; /* allow shrinking past intrinsic size — prevents overflow */
    max-width: 88px; /* don't stretch huge on wide bubbles */
    aspect-ratio: 1; /* stay square; height tracks width responsively */
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
}

/* Single-image: constrain to a fixed comfortable size instead of stretching full width */
.eunChat-gallery--single .eunChat-gallery__thumb {
    flex: 0 0 auto;
    width: 120px;
    height: 120px;
}

/* "+N" standalone box — separate flex item after the thumbs, NOT overlaid on any image */
.eunChat-gallery__more {
    flex: 0 0 auto;
    align-self: center;
    min-width: 44px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
}

.eunChat-gallery__moreCount {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.eunChat-inline-image {
    cursor: pointer;
}

.eunChat-filesList {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.eunChat-fileItem {
    border: 1px solid var(--color-bg-attch);
    border-radius: 8px;
    background: var(--color-2);
    display: flex;
    gap: 6px;
    width: fit-content;
    font-size: 13px;
    text-decoration: none !important;

    & .eunChat-fileIcon {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8px;
        width: 34px;
        height: 34px;
        background: var(--gray-700, #414651);
        color: var(--chatcomponent-file-bg);
    }

    & .eunChat-fileName {
        max-width: 150px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding: 2px 4px;
    }
}

.eunChat-imageOverlay {
    position: absolute;
    inset: 0;
    z-index: 1000;
}

.eunChat-imageOverlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(204, 204, 204, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.eunChat-imageOverlay__content {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eunChat-imageOverlay img {
    max-width: 90%;
    max-height: 90%;
}

.eunChat-imageOverlay .close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-family: 'Font Awesome 6 Duotone';
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--chatcomponent-user-mess-bg);
    color: var(--text-on-brand, #ffffff);
    cursor: pointer;

    &:hover {
        opacity: 0.6;
    }
}

/* Overlay prev/next arrows — round, theme color, matching .close button */
.eunChat-imageOverlay__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    box-sizing: border-box;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--chatcomponent-user-mess-bg);
    color: #fff;
    cursor: pointer;
    z-index: 1;

    & svg {
        width: 18px;
        height: 18px;
        stroke: #fff;
    }

    &:hover {
        opacity: 0.6;
    }
}

.eunChat-imageOverlay__nav--prev {
    left: 16px;
}

.eunChat-imageOverlay__nav--next {
    right: 16px;
}

.eunChat-authorRow {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 32px;
    height: 32px;
    width: 32px;
    border-radius: 50%;
    color: var(--text-on-brand, #ffffff);
    margin-bottom: 4px;
}

    .eunChat-authorRow:not(:has( img)) {
        background: var(--chatcomponent-user-mess-bg);
    }

.mess--user .eunChat-authorRow {
    text-align: right;
}

.mess--chat .eunChat-authorRow {
    text-align: left;
}

.eunChat-author {
    font-size: 12px;
    font-weight: 600;
    max-height: 32px;
    line-height: normal;

    & img {
        height: 32px;
        width: 32px;
        border-radius: 50%;
    }
}

    .eunChat-author:not(:has( > img)) {
        opacity: .7;
    }

.eunChat-text {
    text-align: start;
    word-break: break-word;
    white-space: pre-wrap;
    width: 100%;
    align-self: flex-start;
}

.eunChat-message-info {
    display: flex;
    gap: 4px;
}

.mess--user .eunChat-message-info {
    justify-content: flex-end;
}

.eunChat-message-edited,
.eunChat-message-date {
    margin-top: 8px;
    font-size: 10px;
    opacity: 0.6;
}

.quick-notes-btn {
    background: none;
    border: none;
    cursor: pointer;
}

.quick-notes-dropdown {
    position: absolute;
    bottom: 48px;
    right: 8px;
    background: var(--white, #ffffff);
    border: 1px solid var(--gray-300, #d5d7da);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 20;
}

.quick-note-item {
    padding: 6px 10px;
    cursor: pointer;
}

    .quick-note-item:hover {
        background: var(--gray-100, #f5f5f5);
    }

.eunChat-date__top {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 12px 0;
    opacity: 0.6;

    & .eunChat-date__line {
        width: 100%;
    }

    & .eunChat-date {
        white-space: nowrap;
        margin: 0 8px;
    }
}

/* ── Font-size accessibility toolbar (A A A) ── */
.eunChat-fontsize {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    padding: 2px 6px;
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
    box-sizing: border-box;
    background: transparent;
}

.eunChat-fontsize__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.75);
    color: var(--gray-500, #667085);
    cursor: pointer;
    line-height: 1;
    /* Each button's A glyph has its own fixed size — not scaled with font-scale. */
}

    .eunChat-fontsize__btn[data-level="small"] span {
        font-size: 12px;
    }

    .eunChat-fontsize__btn[data-level="normal"] span {
        font-size: 15px;
    }

    .eunChat-fontsize__btn[data-level="large"] span {
        font-size: 19px;
    }

    .eunChat-fontsize__btn:hover {
        background: rgba(255, 255, 255, 0.95);
        border-color: hsl(from var(--color-1) h s l / 0.35);
        color: var(--color-1);
    }

    .eunChat-fontsize__btn:focus-visible {
        outline: 2px solid var(--color-1);
        outline-offset: 1px;
    }

    .eunChat-fontsize__btn[aria-pressed="true"] {
        background: hsl(from var(--color-1) h s l / 0.12);
        border-color: var(--color-1);
        color: var(--color-1);
    }

@keyframes dots {
    0%, 100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

/* ---- /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; }

/* ---- /css/eFilter/eFilter.css ---- */
.filter__view {
    width: auto;
    height: var(--components-height-sm);
    border-radius: var(--radius-lg);
    border: 2px solid var(--gray-300);
    padding: 6px;
    display: flex;
    gap: var(--spacing-lg);
    font-size: 16px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--gray-700);
}

.not__filter-mess {
    align-items: center;
    font-weight: 500;
}


/* ---- /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);
}


/* ---- /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 ---- */
.eForm 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.
   ========================================================================= */

@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. */
    .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;
}

/* ---- /css/Pages/NotFounds.css ---- */

.no-found__wrapper {
    position: relative;
    display: flex;
    justify-items: center;
    align-items: center;
    flex-direction: column;
    max-width: 364px;
    width: 100%;
    max-height: 340px;
    /*justify-content: space-between;*/
}

.no-found__animation-block {
    height: 240px;
    background-size: contain;
    display: flex;
    justify-content: center;
    z-index: 1;
    width: 100%;

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

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

.dots__bg {
        --fade: 55%;
        position: absolute;
        z-index: 0;
        width: 100%;
        height: 80%;
        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;
    }

.no-found__information {
    display: flex;
    flex-direction: column;
    align-items: center;

    & h1 {
        margin-bottom: var(--spacing-md);
        z-index: 1;
    }

    & p {
        text-align: center;
        margin-bottom: var(--spacing-4xl);
        z-index: 1;
    }
}

.no-found__btns {
    display: flex;
    gap: 16px;
}

/* ---- /css/eExtensions/ePagination.kendo.css ---- */

.ann-item,
.link-item,
.document-item {
    display: flex;
    gap: 4px;
    /*border: 1px solid var(--gray-200);*/
    border: none;
    border-radius: var(--radius-lg);
    margin: 20px;
}

.ann-item .text-content,
.link-item .text-content,
.document-item .text-content {
    padding: 0 0 12px 0;
    padding-top: 0;

    & p {
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;

        margin: 8px 0 0 0 !important;
        color: var(--gray-700);
    }
}

.ann-item img.thumb,
.link-item img.thumb,
.document-item img.thumb,
.arcdocs-item img.thumb {
    border-radius: var(--radius-md);
    object-fit: cover;
    min-height: 100px;
    max-width: 400px;

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

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


.ann-pager,
.link-pager,
.document-pager,
.--eListView-page {
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gray-200);
    max-height: 80px;
    width: 100%;
}

.ann-pager nav,
.link-pager nav,
.document-pager nav,
.arcdocs-pager nav,
.--eListView-page nav {
    display: flex;
}

.ann-pager .k-button.btn,
.link-pager .k-button.btn,
.document-pager .k-button.btn,
.arcdocs-pager .k-button.btn,
.--eListView-page .k-button.btn {
    border: 1px solid var(--gray-200) !important;
    padding: 12px;
    border-radius: 12px;
}

.ann-pager .k-state-disabled,
.link-pager .k-state-disabled,
.document-pager .k-state-disabled,
.arcdocs-pager .k-state-disabled,
.--eListView-page .k-state-disabled {
    opacity: .4;
    pointer-events: none
}

.ann-attachment-link,
.link-attachment-link,
.document-attachment-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: auto;
    flex-shrink: 0;
    text-decoration: none;
    border-radius: 6px;
    background-color: var(--gray-100);
    transition: all 0.2s ease-in-out;
}

.ann-attachment-link:hover,
.link-attachment-link:hover,
.document-attachment-link:hover {
    border-color: var(--gray-300);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.ann-attachment-link img.thumb,
.link-attachment-link img.thumb,
.document-attachment-link img.thumb,
.arcdocs-attachment-link img.thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: none;
}

.file-icon {
    font-size: 40px; 
    line-height: 1;
}

.ann-text-link,
.link-text-link,
.document-text-link,
.arcdocs-text-link {
    text-decoration: none;
    color: var(--black);
}

/* ---- /css/eControls/eImageUploader.css ---- */
/* eImageUploader Component Styles */

.eImageUploader-wrapper {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--gray-200);
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.eImageUploader-wrapper.drag-over {
    border-color: var(--brand-600);
    background-color: var(--brand-50);
}

.eImageUploader-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: var(--eImageUploader-object-fit, contain);
    display: block;
}

.eImageUploader-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.eImageUploader-wrapper:hover .eImageUploader-overlay {
    opacity: 1;
}

.eImageUploader-btn {
    background: var(--brand-600);
    color: var(--text-on-brand);
    border: none;
    padding: var(--spacing-sm, 8px) var(--spacing-lg, 16px);
    border-radius: var(--radius-md, 6px);
    font-weight: 500;
    font-size: var(--font-size-text-sm, 14px);
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.eImageUploader-btn:hover {
    transform: scale(1.05);
    background: var(--brand-700);
}

.eImageUploader-placeholder {
    width: 100%;
    height: 100%;
    background: var(--gray-100, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: var(--gray-400, #9ca3af);
}

.eImageUploader-placeholder svg {
    margin-bottom: 8px;
}

.eImageUploader-placeholder p {
    margin: 0;
    font-size: 12px;
    text-align: center;
}