/**
 * Новый дизайн: отлаженные и оптимизированные CSS-классы.
 * Подключается после main.css; сюда переносим стили по мере готовности.
 * 
 * !important — только там, где Triton/ExtJS перебивает правило (проверено на TestModalWindow).
 */

/* --- Токены нового дизайна (adm-*) --- */
body {
    --adm-wnd-body-row-gap: 16px;
    --adm-wnd-body-col-gap: 16px;
    --adm-wnd-body-padding: var(--edit-window-content-padding);
    --adm-wnd-body-padding-nob: var(--edit-window-content-padding-no-bottom);
    --adm-wnd-body-padding-not: 0 16px 24px 16px;
    --adm-wnd-body-padding-notb: 0 16px;
    --adm-wnd-body-padding-notbl: 0 0 0 16px;
    --adm-wnd-body-padding-notbr: 0 16px 0 0;
    --adm-wnd-body-padding-noall: 0;

    /* Вертикальный gap между рядами кнопок в footer (flex gap, row). */
    /* Горизонтальный gap между кнопками в footer (flex gap, column). */
    /* Внутренние отступы toolbar подвала edit-окна. */
    --adm-wnd-footer-row-gap: 16px;
    --adm-wnd-footer-col-gap: 16px;
    --adm-wnd-footer-padding: 12px 16px;

    /* Минимальная ширина adm-btn в footer edit-окна (перебивает min-width из .adm-btn). */
    --adm-wnd-footer-btn-min-width: 100px;
}

/*
 * .adm-edit-window — минимальный набор для простого модального окна
 * (см. Adm.view.debug.TestModalWindow): шапка, body, footer с adm-btn.
 */

/* --- Кнопки --- */

/*
 * Базовый компонент кнопки .adm-btn (копия .design-new-btn).
 * В JS: cls: 'adm-btn adm-btn--primary' | 'adm-btn adm-btn--secondary'.
 */
a.adm-btn {
    text-decoration: none;
}

/* Геометрия и типографика кнопки. */
.adm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 160px;
    height: 32px;
    min-height: 32px;
    max-height: 32px;
    padding: 0 12px;
    border: none;
    border-radius: var(--design-new-radius-sm);
    box-sizing: border-box;
    cursor: pointer;
    font-family: var(--design-new-font-family);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background-image: none;
    box-shadow: none;
}

/* Иконка внутри кнопки — 16×16, цвет от родителя. */
.adm-btn .adm-btn__icon,
.adm-btn .x-btn-icon-el {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 16px;
    color: inherit;
}

/* Текст кнопки — обрезка длинных подписей, цвет от родителя. */
.adm-btn .adm-btn__text,
.adm-btn .x-btn-inner {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: inherit;
}

/* Сброс стилей ExtJS Triton (x-btn-default-small / toolbar-small). */
.adm-btn.x-btn-default-small,
.adm-btn.x-btn-default-toolbar-small,
.adm-edit-window .adm-btn {
    background-image: none;
    border-width: 0;
    border-style: solid;
    border-color: transparent;
    /* Triton x-btn-default-* сбрасывает border-radius в 0 — без !important кнопки без скругления. */
    border-radius: var(--design-new-radius-sm) !important;
    box-shadow: none;
    -webkit-box-shadow: none;
}

/* Текст и иконка ExtJS — цвет наследуется от модификатора кнопки. */
.adm-btn.x-btn-default-small .x-btn-inner-default-small,
.adm-btn.x-btn-default-small .x-btn-icon-el-default-small,
.adm-btn.x-btn-default-toolbar-small .x-btn-inner-default-toolbar-small,
.adm-btn.x-btn-default-toolbar-small .x-btn-icon-el-default-toolbar-small,
.adm-edit-window .adm-btn .x-btn-inner,
.adm-edit-window .adm-btn .x-btn-icon-el,
.adm-edit-window .adm-btn [class*="x-btn-inner-"],
.adm-edit-window .adm-btn [class*="x-btn-icon-el-"] {
    color: inherit;
}

/* Вариант primary — синий акцентный фон. */
.adm-btn.adm-btn--primary,
.adm-edit-window .adm-btn.adm-btn--primary {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-fg);
}

/* Primary при наведении. */
.adm-btn.adm-btn--primary:hover,
.adm-btn.adm-btn--primary.x-btn-over:not(.x-btn-disabled),
.adm-edit-window .adm-btn.adm-btn--primary:hover,
.adm-edit-window .adm-btn.adm-btn--primary.x-btn-over:not(.x-btn-disabled) {
    background-color: var(--btn-primary-bg-hover);
}

/* Primary при нажатии. */
.adm-btn.adm-btn--primary:active,
.adm-btn.adm-btn--primary.x-btn-pressed:not(.x-btn-disabled),
.adm-edit-window .adm-btn.adm-btn--primary:active,
.adm-edit-window .adm-btn.adm-btn--primary.x-btn-pressed:not(.x-btn-disabled) {
    background-color: var(--btn-primary-bg-pressed);
}

/* Primary в состоянии disabled. */
.adm-btn.adm-btn--primary:disabled,
.adm-btn.adm-btn--primary.x-btn-disabled,
.adm-edit-window .adm-btn.adm-btn--primary:disabled,
.adm-edit-window .adm-btn.adm-btn--primary.x-btn-disabled {
    background-color: var(--btn-primary-bg-disabled);
    color: var(--btn-primary-fg-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* Вариант secondary — нейтральный фон. */
.adm-btn.adm-btn--secondary,
.adm-edit-window .adm-btn.adm-btn--secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg);
}

/* Secondary при наведении. */
.adm-btn.adm-btn--secondary:hover,
.adm-btn.adm-btn--secondary.x-btn-over:not(.x-btn-disabled),
.adm-edit-window .adm-btn.adm-btn--secondary:hover,
.adm-edit-window .adm-btn.adm-btn--secondary.x-btn-over:not(.x-btn-disabled) {
    background-color: var(--btn-secondary-bg-hover);
}

/* Secondary при нажатии. */
.adm-btn.adm-btn--secondary:active,
.adm-btn.adm-btn--secondary.x-btn-pressed:not(.x-btn-disabled),
.adm-edit-window .adm-btn.adm-btn--secondary:active,
.adm-edit-window .adm-btn.adm-btn--secondary.x-btn-pressed:not(.x-btn-disabled) {
    background-color: var(--btn-secondary-bg-pressed);
}

/* Secondary в состоянии disabled. */
.adm-btn.adm-btn--secondary:disabled,
.adm-btn.adm-btn--secondary.x-btn-disabled,
.adm-edit-window .adm-btn.adm-btn--secondary:disabled,
.adm-edit-window .adm-btn.adm-btn--secondary.x-btn-disabled {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-fg-disabled);
    cursor: not-allowed;
    pointer-events: none;
}

/* #region--- Окно ------------------------------------------------------------------- */

/* Корневой контейнер модального окна ExtJS (cls на Window). */
.adm-edit-window.x-window-default {
    /* Triton x-window-default сбрасывает верхние углы border-radius в 0. */
    border-radius: var(--edit-window-radius) !important;
    overflow: hidden;
    box-shadow: none;
    -webkit-box-shadow: none;
    border: none;
    background-color: var(--edit-window-chrome-bg);
    background-image: none;
    padding: 0;
}

/* Сброс внешней рамки ExtJS outer-border у окна. */
.adm-edit-window[class*="x-window-default-outer-border"] {
    border: none;
}

/* Рамка окна в тёмной теме (body.theme-dark). */
body.theme-dark .adm-edit-window.x-window-default,
body.theme-dark .adm-edit-window[class*="x-window-default-outer-border"] {
    border: 1px solid var(--edit-window-outer-border);
}

/* Обёртка контента окна между шапкой и подвалом. */
.adm-edit-window .x-window-bodyWrap {
    background-color: transparent;
    border: none;
}

/* Область body окна — фон, отступы и gap контента. */
.adm-edit-window .x-window-body-default {
    display: flex;
    flex-direction: column;
    gap: var(--adm-wnd-body-row-gap) var(--adm-wnd-body-col-gap);
    box-sizing: border-box;
    /* ExtJS задаёт padding у body окна — без !important перебивается. */
    padding: var(--adm-wnd-body-padding) !important;
    background-color: var(--edit-window-surface-bg);
    color: var(--edit-window-content-fg);
    border: none;
}

/* --- Шапка --- */

/* Контейнер шапки окна (заголовок + tools). */
.adm-edit-window .x-window-header-default,
.adm-edit-window .x-window-header-default-top,
.adm-edit-window .x-window-header-default-horizontal {
    background-color: var(--edit-window-chrome-bg);
    background-image: none;
    border: none;
    /* Triton сбрасывает верхний левый угол шапки в 0. */
    border-radius: var(--edit-window-radius) var(--edit-window-radius) 0 0 !important;
    padding: 12px 16px;
    box-shadow: none;
    -webkit-box-shadow: none;
    filter: none;
}

/* Внутренние контейнеры шапки — убираем тени и фоновые картинки ExtJS. */
.adm-edit-window .x-window-header-default .x-window-header-body,
.adm-edit-window .x-window-header-default .x-box-inner {
    box-shadow: none;
    -webkit-box-shadow: none;
    filter: none;
    background-image: none;
}

/* Внутренний box-layout шапки — без лишних отступов. */
.adm-edit-window .x-window-header-default .x-box-inner {
    padding: 0;
}

/* Текст заголовка окна (title). */
.adm-edit-window .x-window-header-title-default {
    color: var(--edit-window-title-fg);
    font-family: var(--design-new-font-family);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}

/* Иконка tool-кнопки в шапке (close и др.) — прозрачный фон. */
.adm-edit-window .x-window-header-default .x-tool-img {
    opacity: 1;
    background-color: transparent;
    background-image: none;
}

/* Иконка tool при hover и нажатии — без фоновой картинки ExtJS. */
.adm-edit-window .x-window-header-default .x-tool-over .x-tool-img,
.adm-edit-window .x-window-header-default .x-tool-pressed .x-tool-img {
    background-color: transparent;
    background-image: none;
}

/* Tool-кнопки шапки: close, maximize, restore — размер и сброс стилей ExtJS. */
.adm-edit-window .x-window-header-default .x-tool,
.adm-edit-window .x-window-header-default .x-tool-default,
.adm-edit-window .x-window-header-default .x-tool-close,
.adm-edit-window .x-window-header-default .x-tool-maximize,
.adm-edit-window .x-window-header-default .x-tool-restore {
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    opacity: 1;
    width: 24px;
    height: 24px;
}

/* Подсветка tool-кнопки при наведении. */
.adm-edit-window .x-window-header-default .x-tool-over {
    background-color: var(--edit-window-header-tool-hover-bg);
    border-radius: 4px;
}

/* Цвет иконок close / maximize / restore в шапке. */
.adm-edit-window .x-window-header-default .x-tool-close,
.adm-edit-window .x-window-header-default .x-tool-maximize,
.adm-edit-window .x-window-header-default .x-tool-restore {
    color: var(--edit-window-title-fg);
}

/* Псевдоэлементы иконок tool — цвет совпадает с заголовком. */
.adm-edit-window .x-window-header-default .x-tool-close:before,
.adm-edit-window .x-window-header-default .x-tool-maximize:before,
.adm-edit-window .x-window-header-default .x-tool-restore:before {
    color: var(--edit-window-title-fg);
}

/* --- Подвал (Cancel / Save) --- */

/* Toolbar подвала окна (dock: bottom, ui: footer). */
.adm-edit-window .x-toolbar-footer,
.adm-edit-window .x-toolbar-footer-default,
.adm-edit-window .x-toolbar-docked-bottom {
    background-color: var(--edit-window-footer-bg);
    background-image: none;
    /* Triton toolbar-footer перебивает border-top (становится 0). */
    border-top: 1px solid var(--edit-window-footer-border) !important;
    border-left: none;
    border-right: none;
    border-bottom: none;
    /* Triton сбрасывает нижние углы подвала в 0. */
    border-radius: 0 0 var(--edit-window-radius) var(--edit-window-radius) !important;
    overflow: hidden;
    padding: var(--adm-wnd-footer-padding);
}

/* Внутренний контейнер toolbar — на всю ширину, без absolute-позиционирования ExtJS. */
.adm-edit-window .x-toolbar-footer .x-box-inner,
.adm-edit-window .x-toolbar-footer-default .x-box-inner,
.adm-edit-window .x-toolbar-docked-bottom .x-box-inner {
    display: block;
    position: relative;
    width: 100%;
}

/* Ряд кнопок в подвале — flex, выравнивание вправо, gap между кнопками. */
.adm-edit-window .x-toolbar-footer .x-box-target,
.adm-edit-window .x-toolbar-footer-default .x-box-target,
.adm-edit-window .x-toolbar-docked-bottom .x-box-target {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--adm-wnd-footer-row-gap) var(--adm-wnd-footer-col-gap);
    position: relative;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}

/* Элементы toolbar (кнопки) — сброс absolute left/top от ExtJS layout. */
.adm-edit-window .x-toolbar-footer .x-box-target > .x-toolbar-item,
.adm-edit-window .x-toolbar-footer-default .x-box-target > .x-toolbar-item,
.adm-edit-window .x-toolbar-docked-bottom .x-box-target > .x-toolbar-item {
    /* HBox layout пишет inline position:absolute — без !important кнопки уезжают из flex-ряда. */
    position: relative !important;
    /* HBox layout пишет inline left:Npx — без !important кнопки смещаются по left. */
    left: auto !important;
    top: auto;
    margin: 0;
}

/* Spacer «->» в toolbar — растягивается и отталкивает кнопки вправо. */
.adm-edit-window .x-toolbar-footer .x-toolbar-item-fill,
.adm-edit-window .x-toolbar-footer-default .x-toolbar-item-fill,
.adm-edit-window .x-toolbar-docked-bottom .x-toolbar-item-fill {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

/* Кнопки adm-btn в подвале — без обрезки текста по ширине. */
.adm-edit-window .x-toolbar-footer .adm-btn:not(.adm-btn--icon),
.adm-edit-window .x-toolbar-footer-default .adm-btn:not(.adm-btn--icon),
.adm-edit-window .x-toolbar-docked-bottom .adm-btn:not(.adm-btn--icon) {
    min-width: var(--adm-wnd-footer-btn-min-width);
    width: auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
}

/* Текст внутри кнопок подвала — без ellipsis, полная подпись видна. */
.adm-edit-window .x-toolbar-footer .adm-btn:not(.adm-btn--icon) .x-btn-inner,
.adm-edit-window .x-toolbar-footer-default .adm-btn:not(.adm-btn--icon) .x-btn-inner,
.adm-edit-window .x-toolbar-docked-bottom .adm-btn:not(.adm-btn--icon) .x-btn-inner,
.adm-edit-window .x-toolbar-footer .adm-btn:not(.adm-btn--icon) .adm-btn__text,
.adm-edit-window .x-toolbar-footer-default .adm-btn:not(.adm-btn--icon) .adm-btn__text,
.adm-edit-window .x-toolbar-docked-bottom .adm-btn:not(.adm-btn--icon) .adm-btn__text {
    overflow: visible;
    text-overflow: clip;
}

/* #endregion--- Окно ------------------------------------------------------------------- */