@charset "UTF-8";
/*
  Шрифты приложения.

  Семейство выбирает пользователь в окне «Стили приложения» (ViewModels/Shared/colorPaletteDialog.vue),
  и оно не зависит от палитры: выбор хранится в куке nagrFontFamily, а применением занимается
  Models/shared/fontFamily.js — он пишет CSS-стек в переменную --nagr-font-family-selected на <html>,
  которую читает токен --nagr-font-family из _tokens.scss.

  Здесь объявлены сами начертания. Файлы лежат в WebUI/wwwroot/fonts и отдаются веб-сервером;
  этот partial компилируется в WebUI/wwwroot/css/nagr.css, поэтому пути указаны относительно
  папки css — так же, как в materialdesignicons.css. Браузер скачивает файл только тогда,
  когда шрифт реально используется, то есть только для выбранного семейства.

  Начертания:
  - Montserrat — Light 300, Regular 400, SemiBold 600, ExtraBold 800;
  - Manrope — Regular 400, Medium 500, SemiBold 600, Bold 700;
  - Bebas Neue — Light 300, Book 400, Regular 500, Bold 700. В исходном наборе Book и Regular —
    два близких начертания одного веса, поэтому Regular отдан весу 500: так доступны все четыре
    файла и ни один не перекрывает другой;
  - Arial объявлять не нужно, это системный шрифт.
*/
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Montserrat-Light.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Montserrat-Regular.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Montserrat-SemiBold.woff") format("woff");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/Montserrat-ExtraBold.woff") format("woff");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Manrope-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Manrope-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Manrope-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Manrope-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/BebasNeue-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/BebasNeue-Book.woff2") format("woff2");
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/BebasNeue-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/BebasNeue-Bold.woff2") format("woff2");
}
/*
  Общее применение выбранного семейства.

  Общий CSS подключается в _Layout раньше, чем bundle со стилями Vuetify и DevExtreme, поэтому
  специфичность селекторов важнее порядка подключения. Шрифт назначается на html/body и на корни
  приложения и виджетов, а дальше перечислены элементы, которые объявляют шрифт сами.
*/
html,
html body {
  font-family: var(--nagr-font-family);
}

body .v-application,
body .v-application--wrap,
body .dx-widget,
body .dx-overlay-wrapper,
body .dx-overlay-content,
body .dx-popup-content,
body .dx-popup-title,
body .dx-theme-generic-typography {
  font-family: var(--nagr-font-family);
}

/*
  Vuetify: классы типографики. В Vuetify 2 они объявляют Roboto через !important, поэтому и у
  нас нужен !important, а специфичность (body + .v-application) перебивает .v-application .text-*.

  Список собирается циклом: базовые варианты (text-h1 … text-overline, text-button), адаптивные
  (text-sm-*, text-md-*, text-lg-*, text-xl-*) и устаревшие (display-1 … display-4, headline,
  title, subtitle-*, body-*, caption, overline) — Vuetify объявляет шрифт во всех.
*/
body .v-application .text-h1, body .v-application .text-h2, body .v-application .text-h3, body .v-application .text-h4, body .v-application .text-h5, body .v-application .text-h6, body .v-application .text-subtitle-1, body .v-application .text-subtitle-2, body .v-application .text-body-1, body .v-application .text-body-2, body .v-application .text-caption, body .v-application .text-overline, body .v-application .text-button, body .v-application .text-sm-h1, body .v-application .text-sm-h2, body .v-application .text-sm-h3, body .v-application .text-sm-h4, body .v-application .text-sm-h5, body .v-application .text-sm-h6, body .v-application .text-sm-subtitle-1, body .v-application .text-sm-subtitle-2, body .v-application .text-sm-body-1, body .v-application .text-sm-body-2, body .v-application .text-sm-caption, body .v-application .text-sm-overline, body .v-application .text-sm-button, body .v-application .text-md-h1, body .v-application .text-md-h2, body .v-application .text-md-h3, body .v-application .text-md-h4, body .v-application .text-md-h5, body .v-application .text-md-h6, body .v-application .text-md-subtitle-1, body .v-application .text-md-subtitle-2, body .v-application .text-md-body-1, body .v-application .text-md-body-2, body .v-application .text-md-caption, body .v-application .text-md-overline, body .v-application .text-md-button, body .v-application .text-lg-h1, body .v-application .text-lg-h2, body .v-application .text-lg-h3, body .v-application .text-lg-h4, body .v-application .text-lg-h5, body .v-application .text-lg-h6, body .v-application .text-lg-subtitle-1, body .v-application .text-lg-subtitle-2, body .v-application .text-lg-body-1, body .v-application .text-lg-body-2, body .v-application .text-lg-caption, body .v-application .text-lg-overline, body .v-application .text-lg-button, body .v-application .text-xl-h1, body .v-application .text-xl-h2, body .v-application .text-xl-h3, body .v-application .text-xl-h4, body .v-application .text-xl-h5, body .v-application .text-xl-h6, body .v-application .text-xl-subtitle-1, body .v-application .text-xl-subtitle-2, body .v-application .text-xl-body-1, body .v-application .text-xl-body-2, body .v-application .text-xl-caption, body .v-application .text-xl-overline, body .v-application .text-xl-button, body .v-application .display-1, body .v-application .display-2, body .v-application .display-3, body .v-application .display-4, body .v-application .headline, body .v-application .title, body .v-application .subtitle-1, body .v-application .subtitle-2, body .v-application .body-1, body .v-application .body-2, body .v-application .caption, body .v-application .overline {
  font-family: var(--nagr-font-family) !important;
}

/*
  Vuetify: кнопки и остальные компоненты, в которых есть текст. От .v-application они шрифт
  наследуют, но перечислены явно — тогда выбранное семейство сохранится, даже если компонент
  начнёт объявлять своё (так уже сделано для .text-*).

  Иконочные шрифты не затрагиваются: в проекте включён iconfont: 'mdiSvg', иконки рисуются SVG
  внутри <i class="v-icon">, а не текстом.
*/
body .v-application .v-btn,
body .v-application .v-btn__content,
body .v-application .v-chip,
body .v-application .v-chip__content,
body .v-application .v-badge__badge,
body .v-application .v-tab,
body .v-application .v-tabs-slider-wrapper,
body .v-application .v-toolbar,
body .v-application .v-toolbar__content,
body .v-application .v-toolbar__title,
body .v-application .v-app-bar,
body .v-application .v-card,
body .v-application .v-card__title,
body .v-application .v-card__subtitle,
body .v-application .v-card__text,
body .v-application .v-dialog,
body .v-application .v-sheet,
body .v-application .v-list,
body .v-application .v-list-item,
body .v-application .v-list-item__title,
body .v-application .v-list-item__subtitle,
body .v-application .v-list-item__content,
body .v-application .v-subheader,
body .v-application .v-input,
body .v-application .v-input__slot,
body .v-application .v-label,
body .v-application .v-messages,
body .v-application .v-messages__message,
body .v-application .v-counter,
body .v-application .v-select__selection,
body .v-application .v-select__selections,
body .v-application .v-text-field__prefix,
body .v-application .v-text-field__suffix,
body .v-application .v-data-table,
body .v-application .v-data-table__wrapper,
body .v-application .v-data-footer,
body .v-application .v-data-footer__select,
body .v-application .v-data-footer__pagination,
body .v-application .v-menu__content,
body .v-application .v-overlay,
body .v-application .v-tooltip__content,
body .v-application .v-snack__content,
body .v-application .v-alert,
body .v-application .v-alert__content,
body .v-application .v-pagination__item,
body .v-application .v-breadcrumbs__item,
body .v-application .v-expansion-panel-header,
body .v-application .v-expansion-panel-content,
body .v-application .v-stepper__label,
body .v-application .v-stepper__step__step {
  font-family: var(--nagr-font-family);
}

/*
  DevExtreme: кнопки, поля, таблицы, меню и всплывающие окна.

  DevExtreme объявляет Helvetica Neue на .dx-widget, .dx-field, .dx-menu-base, .dx-overlay-wrapper,
  колонковых chooser'ах и на вложенных input/textarea, поэтому элементы перечислены явно.
  Префикс body даёт специфичность выше, чем у правил из dx.light.css / dx.dark.css, которые
  подключаются позже.

  Не затрагиваются: иконочный DXIcons (.dx-icon и псевдоэлементы ::before) и моноширинные
  начертания редактора HTML, где шрифт задан осознанно.
*/
body .dx-button,
body .dx-button-content,
body .dx-button-text,
body .dx-toolbar,
body .dx-toolbar-item,
body .dx-toolbar-label,
body .dx-toolbar-menu-section,
body .dx-field,
body .dx-field input,
body .dx-field textarea,
body .dx-form,
body .dx-field-item-label,
body .dx-field-item-label-text,
body .dx-field-item-help-text,
body .dx-validation-message,
body .dx-invalid-message,
body .dx-invalid-message-content,
body .dx-texteditor,
body .dx-texteditor-input,
body .dx-placeholder,
body .dx-textbox,
body .dx-textarea,
body .dx-numberbox,
body .dx-selectbox,
body .dx-dropdowneditor,
body .dx-dropdowneditor-field-template-wrapper,
body .dx-autocomplete,
body .dx-datebox,
body .dx-calendar,
body .dx-calendar-caption-button,
body .dx-lookup,
body .dx-lookup-field,
body .dx-tagbox,
body .dx-tag-content,
body .dx-checkbox,
body .dx-checkbox-text,
body .dx-radiobutton,
body .dx-radiobutton-text,
body .dx-switch,
body .dx-menu-base,
body .dx-menu-base input,
body .dx-menu-base textarea,
body .dx-menu-item,
body .dx-menu-item-content,
body .dx-context-menu,
body .dx-tabs,
body .dx-tab,
body .dx-list,
body .dx-list-item,
body .dx-list-item-content,
body .dx-treeview,
body .dx-treeview-item,
body .dx-treeview-item-content,
body .dx-accordion-item-title,
body .dx-datagrid,
body .dx-treelist,
body .dx-datagrid-column-chooser,
body .dx-datagrid-column-chooser input,
body .dx-datagrid-column-chooser textarea,
body .dx-treelist-column-chooser,
body .dx-treelist-column-chooser input,
body .dx-treelist-column-chooser textarea,
body .dx-pivotgrid .dx-ie .dx-pivotgrid-fields-area,
body .dx-pivotgrid .dx-ie .dx-pivotgrid-fields-area input,
body .dx-pivotgrid .dx-ie .dx-pivotgrid-fields-area textarea,
body .dx-overlay-wrapper input,
body .dx-overlay-wrapper textarea,
body .dx-popup-normal,
body .dx-dialog-message,
body .dx-tooltip,
body .dx-toast-content,
body .dx-loadpanel-content,
body .dx-loadpanel-message,
body .dx-theme-generic-typography input,
body .dx-theme-generic-typography textarea {
  font-family: var(--nagr-font-family);
}

/*
  Поля ввода, кнопки и подписи: браузер не наследует шрифт в элементы форм, а Vuetify с
  DevExtreme назначают его адресно (.dx-widget input, .dx-texteditor-input, .dx-field input),
  поэтому здесь нужен !important. Иконочные шрифты не затрагиваются: они висят на <i>,
  .v-icon и .dx-icon, а не на самих контролах.
*/
body input,
body textarea,
body select,
body button,
body label,
body legend,
body .v-label {
  font-family: var(--nagr-font-family) !important;
}

/*
  Локальные объявления шрифта в легаси-компонентах: без этих правил часть панелей, гридов и
  полей осталась бы на Roboto, Helvetica Neue, Segoe UI или Open Sans. Моноширинные Roboto Mono
  (часы в Navigator, .monitor-mono) намеренно не трогаем.
*/
body .ComponentFont,
body .titleTextBox,
body #teacherinfo,
body .staff_table,
body .ipp_summary_table,
body .nav_item_subtitle,
body .q_title,
body .meeting_headline,
body .open_info,
body .close_info,
body .clock-date,
body .emplContractMessage,
body .demoMessage,
body .dx-datagrid,
body .v-input--selection-controls .v-radio > .v-label {
  font-family: var(--nagr-font-family) !important;
}

:root,
.theme--light {
  --nagr-color-scheme: light;
  --nagr-brand: var(--main-color-nagr, #004624);
  --nagr-brand-2: var(--second-color-nagr, #30a162);
  /*
    Глубокий цвет бренда: заливка шапки, панелей и основных кнопок. В светлой и тёмной
    палитрах это main-цвет приложения, в академической — классический бордовый.
    От --nagr-brand отличается в тёмной палитре: там бренд становится ярким акцентом,
    на котором белый текст заливок шапки и панелей не читается.
  */
  --nagr-brand-deep: var(--main-color-nagr, #004624);
  --nagr-brand-action: #02723b;
  --nagr-on-brand: #fff;
  --nagr-accent-dark: #243a51;
  --nagr-nav-bg: #283654;
  --nagr-nav-bg-active: #343c4d;
  --nagr-bg-app: #fafafa;
  --nagr-bg-surface: #fff;
  --nagr-bg-surface-alt: #f9f9fd;
  --nagr-bg-subtle: #f1f3f4;
  --nagr-bg-neutral: #e9e9e9;
  --nagr-bg-disabled: #dcdcdc;
  --nagr-bg-grid-header: whitesmoke;
  /* Фон строк таблиц: совпадает с фоном строк гридов DevExtreme (dx.light: #fff). */
  --nagr-bg-grid-row: #fff;
  --nagr-bg-hover: var(--hover-color-nagr, #d4f4cd);
  --nagr-bg-hover-2: var(--hover2-color-nagr, #3dc77a);
  --nagr-bg-selected: var(--second-color-nagr, #30a162);
  --nagr-bg-hover-subtle: rgb(191 191 191 / 15%);
  --nagr-bg-selected-weak: rgb(0 70 36 / 10%);
  --nagr-bg-selected-soft: rgb(0 70 36 / 22%);
  --nagr-bg-scrim: rgb(0 0 0 / 40%);
  --nagr-bg-scrim-strong: rgb(0 0 0 / 60%);
  --nagr-bg-scrim-solid: #000;
  /* Слой поверх фоновых картинок и «стеклянные» поверхности (страница авторизации). */
  --nagr-bg-overlay: rgb(0 70 36 / 77%);
  --nagr-bg-glass: rgb(255 255 255 / 60%);
  --nagr-border-glass: rgb(255 255 255 / 65%);
  --nagr-shadow-glass: 0 12px 12px var(--nagr-shadow-deep), inset 0 1px 0 var(--nagr-shadow-highlight) !important;
  --nagr-text-primary: rgba(0, 0, 0, .87);
  --nagr-text-secondary: #676767;
  --nagr-text-muted: #9e9e9e;
  --nagr-text-disabled: #bdbdbd;
  --nagr-danger: #e75757;
  --nagr-danger-strong: #d9534f;
  --nagr-danger-soft: #fcb3aa;
  --nagr-danger-muted: rgb(255 82 82 / 50%);
  --nagr-success: #4caf50;
  --nagr-success-strong: #2e7d32;
  --nagr-success-soft: #c6ffc6;
  --nagr-success-muted: rgb(51 105 30 / 45%);
  --nagr-success-wash: rgb(51 105 30 / 25%);
  --nagr-success-fill: #4caf50;
  --nagr-success-fill-hover: #2e7d32;
  --nagr-on-success: #fff;
  --nagr-info: #2196f3;
  --nagr-info-strong: #1976d2;
  --nagr-info-soft: #c8ebfb;
  --nagr-warning: #ffc107;
  --nagr-warning-strong: #e6ae06;
  --nagr-warning-soft: #fcff9d;
  --nagr-warning-highlight: rgb(255 255 30 / 70%);
  --nagr-warning-wash: rgb(255 255 10 / 10%);
  /* Цвет иконок интерфейса (панели инструментов, диалоги). */
  --nagr-icon: #5f6368;
  --nagr-border: #ddd;
  --nagr-border-strong: #b9b9b9;
  --nagr-border-soft: #e8eaed;
  --nagr-border-muted: #d2d3d5;
  --nagr-border-contrast: #000;
  --nagr-divider: rgb(0 0 0 / 12%);
  --nagr-focus-border: #008000;
  --nagr-focus-ring: #99c999;
  --nagr-popup-focus-ring: #02723b;
  --nagr-shadow-field-color: rgb(220 220 220 / 50%);
  --nagr-shadow-field-color-hover: rgb(220 220 220 / 87%);
  --nagr-shadow-field: 0 0 3px 1px rgb(220 220 220 / 50%);
  --nagr-shadow-field-hover: 0 0 3px 1px rgb(220 220 220 / 87%);
  --nagr-shadow-field-inset: inset 0 0 0 2px rgb(220 220 220 / 50%);
  --nagr-shadow-subtle: rgb(0 0 0 / 8%);
  --nagr-shadow-soft: rgb(0 0 0 / 20%);
  --nagr-shadow-medium: rgb(0 0 0 / 40%);
  --nagr-shadow-strong: rgb(0 0 0 / 50%);
  --nagr-shadow-deep: rgb(15 23 42 / 35%);
  --nagr-shadow-highlight: rgb(255 255 255 / 52%);
  /* Тень диалогового окна. В светлой теме окно и так отделяет штатная тень Vuetify. */
  --nagr-shadow-dialog: 0 6px 16px rgb(0 0 0 / 24%);
  --nagr-radius-sm: 4px;
  --nagr-radius-md: 8px;
  --nagr-radius-lg: 10px;
  --nagr-radius-glass: 16px;
  --nagr-control-height: 28px;
  --nagr-grid-header-input-height: 22px;
  --nagr-grid-row-height: 23px;
  --nagr-grid-cell-font-size: 13px;
  --nagr-grid-header-font-size: 11px;
  --nagr-scrollbar-size: 8px;
  --nagr-scrollbar-thumb-vertical-size: 6px;
  --nagr-scrollbar-thumb-horizontal-size: 4px;
  --nagr-scrollbar-track: var(--nagr-bg-surface-alt);
  --nagr-scrollbar-thumb: var(--scroll-thumb-color, var(--nagr-brand));
  /*
    Основной шрифт приложения. Семейство выбирается в окне «Стили приложения» и не зависит от
    палитры: Models/shared/fontFamily.js пишет CSS-стек в переменную --nagr-font-family-selected
    на <html>. Цепочка ниже — запасной вариант для тех случаев, когда переменную ещё не
    проставили (или JS отключён); начертания объявлены в _fonts.scss.
  */
  --nagr-font-family: var(--nagr-font-family-selected, var(--main-font-family-nagr, Roboto, RobotoFallback, "Noto Kufi Arabic", Helvetica, Arial, sans-serif));
  /* Насыщенность начертаний: подписи, значения и заголовки интерфейса. */
  --nagr-font-weight-regular: 400;
  --nagr-font-weight-semibold: 600;
  --nagr-font-weight-bold: 700;
  /*
    Страница авторизации. В светлой и тёмной палитрах заголовок приложения белый на затемнении,
    в академической — цветом бренда на светлом фоне.
  */
  --nagr-auth-title: var(--nagr-on-brand);
  --nagr-auth-title-bg: linear-gradient(90deg, var(--nagr-bg-scrim-solid) -0.99%, var(--nagr-bg-scrim) -0.98%, transparent 102.71%);
  --nagr-header-font-size: clamp(18px, 2.3vw, 20px);
}

/*
  Тёмная тема.

  Vuetify вешает класс .theme--dark и на корень приложения, и на каждый themed-компонент,
  поэтому переопределения ниже наследуются всем поддеревом (включая DevExtreme-гриды).

  Здесь переопределяются только цвета, фоны, границы и тени. Радиусы, размеры контролов,
  высоты строк грида, размеры скроллбара и типографика не зависят от темы и наследуются из :root.

  Токены бренда по-прежнему ссылаются на runtime-переменные из Models/shared/setStyle.js,
  но в тёмной теме за основу взята вторая (яркая) краска приложения: основной тёмно-зелёный
  на тёмных поверхностях не читается.
*/
.theme--dark {
  --nagr-color-scheme: dark;
  --nagr-brand: var(--second-color-nagr, #30a162);
  --nagr-brand-2: var(--second-color-nagr, #30a162);
  --nagr-brand-action: var(--nagr-brand-2);
  --nagr-on-brand: #fff;
  --nagr-accent-dark: var(--nagr-brand-2);
  --nagr-nav-bg: #1e1e1e;
  --nagr-nav-bg-active: #303030;
  --nagr-bg-app: #303030;
  --nagr-bg-surface: #424242;
  --nagr-bg-surface-alt: #383838;
  --nagr-bg-subtle: #3a3a3a;
  --nagr-bg-neutral: #4a4a4a;
  --nagr-bg-disabled: #4d4d4d;
  --nagr-bg-grid-header: #3a3a3a;
  /* Фон строк таблиц: совпадает с фоном строк гридов DevExtreme (dx.dark: #2a2a2a). */
  --nagr-bg-grid-row: #2a2a2a;
  /* Подсветка строк и элементов: тонированный брендом полупрозрачный слой работает
     и на светлых, и на вложенных тёмных подложках. */
  --nagr-bg-hover: rgb(48 161 98 / 22%);
  --nagr-bg-hover-2: rgb(61 199 122 / 32%);
  --nagr-bg-selected: rgb(48 161 98 / 45%);
  --nagr-bg-hover-subtle: rgb(255 255 255 / 8%);
  --nagr-bg-selected-weak: rgb(48 161 98 / 14%);
  --nagr-bg-selected-soft: rgb(48 161 98 / 30%);
  --nagr-bg-scrim: rgb(0 0 0 / 25%);
  --nagr-bg-scrim-strong: rgb(0 0 0 / 80%);
  --nagr-bg-scrim-solid: #000;
  --nagr-bg-overlay: rgb(0 36 18 / 88%);
  --nagr-bg-glass: rgb(66 66 66 / 55%);
  --nagr-border-glass: rgb(255 255 255 / 15%);
  --nagr-text-primary: rgba(255, 255, 255, .87);
  --nagr-text-secondary: #b3b3b3;
  --nagr-text-muted: #8a8a8a;
  --nagr-text-disabled: #6b6b6b;
  --nagr-danger: #ff6b6b;
  --nagr-danger-strong: #ef5350;
  --nagr-danger-soft: rgb(255 107 107 / 22%);
  --nagr-danger-muted: rgb(255 107 107 / 50%);
  --nagr-success: #66bb6a;
  --nagr-success-strong: #81c784;
  --nagr-success-soft: rgb(76 175 80 / 22%);
  --nagr-success-muted: rgb(129 199 132 / 45%);
  --nagr-success-wash: rgb(129 199 132 / 25%);
  /*
    Заливка success-кнопок. В тёмных палитрах --nagr-success светлый — он работает
    как текст и акцент на тёмном фоне, — поэтому для кнопок берётся тёмный тон
    палитры: белая подпись на нём читается, и кнопка выглядит так же, как в светлой
    теме (светлая заливка + белый текст не читается).
  */
  --nagr-success-fill: #4caf50;
  --nagr-success-fill-hover: #2e7d32;
  --nagr-on-success: #fff;
  --nagr-info: #64b5f6;
  --nagr-info-strong: #42a5f5;
  --nagr-info-soft: rgb(33 150 243 / 22%);
  --nagr-warning: #ffca28;
  --nagr-warning-strong: #ffb300;
  --nagr-warning-soft: rgb(255 202 40 / 22%);
  --nagr-warning-highlight: rgb(255 235 59 / 28%);
  --nagr-warning-wash: rgb(255 235 59 / 12%);
  /* В тёмной теме иконки светлые: серые цвета светлой темы на тёмном фоне не читаются. */
  --nagr-icon: rgba(255, 255, 255, .87);
  --nagr-border: #4d4d4d;
  --nagr-border-strong: #6b6b6b;
  --nagr-border-soft: #4d4d4d;
  --nagr-border-muted: #5c5c5c;
  --nagr-border-contrast: #e0e0e0;
  --nagr-divider: rgb(255 255 255 / 12%);
  --nagr-focus-border: #4caf50;
  --nagr-focus-ring: rgb(76 175 80 / 45%);
  --nagr-popup-focus-ring: var(--nagr-brand-2);
  /* Светлые тени на тёмном фоне не видны, поэтому тени строятся на чёрном. */
  --nagr-shadow-field-color: rgb(0 0 0 / 45%);
  --nagr-shadow-field-color-hover: rgb(0 0 0 / 70%);
  --nagr-shadow-field: 0 0 3px 1px rgb(0 0 0 / 45%);
  --nagr-shadow-field-hover: 0 0 3px 1px rgb(0 0 0 / 70%);
  --nagr-shadow-field-inset: inset 0 0 0 2px rgb(0 0 0 / 45%);
  --nagr-shadow-subtle: rgb(0 0 0 / 45%);
  --nagr-shadow-soft: rgb(0 0 0 / 55%);
  --nagr-shadow-medium: rgb(0 0 0 / 65%);
  --nagr-shadow-strong: rgb(0 0 0 / 75%);
  --nagr-shadow-deep: rgb(0 0 0 / 70%);
  --nagr-shadow-highlight: rgb(255 255 255 / 8%);
  /* Штатная тень диалогов построена на чёрном цвете и на тёмном фоне окно не отделяет,
     поэтому окно подсвечивается светло-серой (gainsboro) растушёванной тенью со всех сторон. */
  --nagr-shadow-dialog: 0 0 14px 2px rgb(100 100 100 / 32%);
  /* --scroll-thumb-color задаётся приложением светлым значением под светлую тему,
     поэтому в тёмной теме ползунок берём из бренда напрямую; дорожка наследует
     токен --nagr-scrollbar-track, который ссылается на --nagr-bg-surface-alt. */
  --nagr-scrollbar-thumb: var(--nagr-brand-2);
}

/*
  Академическая палитра, светлая тема — фирменный красный.

  Акцентный цвет выбирается отдельно от темы (см. Models/shared/colorTheme.js), поэтому
  академический красный существует в двух вариантах: светлом (этот блок) и тёмном
  (`.academy--theme.theme--dark` ниже). Здесь меняются только цвет, фон, границы, тени и
  метрики компактного интерфейса; поверхности и семантика — светлой темы.

  Класс висит на <html>, но Vuetify дублирует класс .theme--light и на корне приложения,
  и на каждом themed-компоненте, переобъявляя там токены светлой темы. Такое объявление
  на самом элементе перебивает унаследованное из <html>, поэтому палитра применяется
  и к вложенным .theme--light.
*/
.academy--theme,
.academy--theme .theme--light {
  --nagr-color-scheme: light;
  color-scheme: var(--nagr-color-scheme);
  /* Палитра брендбука: используются HEX из подписей */
  --academy-red: #c81240;
  --academy-burgundy: #a00f33;
  --academy-red-medium: #e63542;
  --academy-coral: #ff5f61;
  --academy-black: #171f29;
  --academy-gray: #8b8a8f;
  --academy-gray-light: #e9e8f1;
  --academy-white: #fff;
  /* Бренд и основные действия: основной цвет — классический бордовый, акцент — академический красный */
  --nagr-brand: var(--academy-burgundy);
  --nagr-brand-2: var(--academy-red);
  --nagr-brand-deep: var(--academy-burgundy);
  --nagr-brand-action: var(--academy-red);
  --nagr-brand-action-hover: var(--academy-burgundy);
  --nagr-brand-action-active: #820c2a;
  --nagr-on-brand: var(--academy-white);
  /* Навигация: нейтральная основа, бордовое выделение */
  --nagr-accent-dark: var(--academy-burgundy);
  --nagr-nav-bg: var(--academy-black);
  --nagr-nav-bg-active: var(--academy-burgundy);
  --nagr-on-nav: var(--academy-white);
  /* Нейтральные поверхности */
  --nagr-bg-app: #f7f7fa;
  --nagr-bg-surface: var(--academy-white);
  --nagr-bg-surface-alt: #f4f4f8;
  --nagr-bg-subtle: #efeff5;
  --nagr-bg-neutral: var(--academy-gray-light);
  --nagr-bg-disabled: #e0dfe6;
  /* Таблицы */
  --nagr-bg-grid-header: #efeff5;
  --nagr-bg-grid-row: var(--academy-white);
  /* Наведение и выделение */
  --nagr-bg-hover: #fcecf0;
  --nagr-bg-hover-2: var(--academy-burgundy);
  --nagr-bg-selected: var(--academy-red);
  --nagr-bg-hover-subtle: rgb(23 31 41 / 4%);
  --nagr-bg-selected-weak: rgb(200 18 64 / 8%);
  --nagr-bg-selected-soft: rgb(200 18 64 / 16%);
  /* Дополнительные токены: нужно применить в компонентах */
  --nagr-on-hover: var(--academy-black);
  --nagr-on-hover-2: var(--academy-white);
  --nagr-on-selected: var(--academy-white);
  --nagr-on-selected-soft: var(--academy-black);
  /* Затемнение */
  --nagr-bg-scrim: rgb(23 31 41 / 40%);
  --nagr-bg-scrim-strong: rgb(23 31 41 / 60%);
  --nagr-bg-scrim-solid: var(--academy-black);
  /*
    Авторизация и стеклянные поверхности. Фон страницы авторизации в этой палитре светлый —
    страница читается в белых оттенках, — а заголовок приложения идёт цветом бренда.
  */
  --nagr-bg-overlay: rgb(255 255 255 / 88%);
  --nagr-bg-glass: rgb(255 255 255 / 88%);
  --nagr-border-glass: rgb(200 18 64 / 22%);
  --nagr-shadow-glass:
    0 12px 24px var(--nagr-shadow-deep),
    inset 0 1px 0 var(--nagr-shadow-highlight);
  --nagr-auth-title: var(--nagr-brand);
  --nagr-auth-title-bg: none;
  /* Текст */
  --nagr-text-primary: var(--academy-black);
  --nagr-text-secondary: #62616b;
  --nagr-text-muted: #72717b;
  --nagr-text-disabled: var(--academy-gray);
  /* Ошибки: отдельная семантическая палитра */
  --nagr-danger: #b42318;
  --nagr-danger-strong: #912018;
  --nagr-danger-soft: #fee4e2;
  --nagr-danger-muted: rgb(180 35 24 / 45%);
  --nagr-on-danger: var(--academy-white);
  /* Успех */
  --nagr-success: #287a46;
  --nagr-success-strong: #1e6036;
  --nagr-success-soft: #e4f3e9;
  --nagr-success-muted: rgb(40 122 70 / 45%);
  --nagr-success-wash: rgb(40 122 70 / 10%);
  --nagr-success-fill: #287a46;
  --nagr-success-fill-hover: #1e6036;
  --nagr-on-success: var(--academy-white);
  /* Информация: синий только для смыслового статуса */
  --nagr-info: #2563a6;
  --nagr-info-strong: #1e4f85;
  --nagr-info-soft: #e8f1fb;
  /* Предупреждения: тёмный текст на светлой заливке */
  --nagr-warning: #f0b429;
  --nagr-warning-strong: #8a5700;
  --nagr-warning-soft: #fff3d6;
  --nagr-warning-highlight: rgb(240 180 41 / 35%);
  --nagr-warning-wash: rgb(240 180 41 / 10%);
  --nagr-on-warning: var(--academy-black);
  /* Иконки и границы */
  --nagr-icon: #62616b;
  --nagr-border: #d3d2dc;
  --nagr-border-strong: var(--academy-gray);
  --nagr-border-soft: var(--academy-gray-light);
  --nagr-border-muted: #dedde6;
  --nagr-border-contrast: var(--academy-black);
  --nagr-divider: rgb(23 31 41 / 12%);
  /* Фокус */
  --nagr-focus-border: var(--academy-red);
  --nagr-focus-ring: var(--academy-red);
  --nagr-popup-focus-ring: var(--academy-red);
  /* Тени полей */
  --nagr-shadow-field-color: rgb(23 31 41 / 10%);
  --nagr-shadow-field-color-hover: rgb(23 31 41 / 16%);
  --nagr-shadow-field:
    0 0 3px 1px var(--nagr-shadow-field-color);
  --nagr-shadow-field-hover:
    0 0 3px 1px var(--nagr-shadow-field-color-hover);
  --nagr-shadow-field-inset:
    inset 0 0 0 2px var(--nagr-shadow-field-color);
  /* Общие тени */
  --nagr-shadow-subtle: rgb(23 31 41 / 6%);
  --nagr-shadow-soft: rgb(23 31 41 / 12%);
  --nagr-shadow-medium: rgb(23 31 41 / 20%);
  --nagr-shadow-strong: rgb(23 31 41 / 28%);
  --nagr-shadow-deep: rgb(23 31 41 / 30%);
  --nagr-shadow-highlight: rgb(255 255 255 / 60%);
  --nagr-shadow-dialog: 0 8px 28px rgb(23 31 41 / 18%);
  /* Геометрия */
  --nagr-radius-sm: 4px;
  --nagr-radius-md: 8px;
  --nagr-radius-lg: 10px;
  --nagr-radius-glass: 16px;
  /* Компактный интерфейс с Montserrat */
  --nagr-control-height: 28px;
  --nagr-grid-header-input-height: 24px;
  --nagr-grid-row-height: 26px;
  --nagr-grid-cell-font-size: 13px;
  --nagr-grid-header-font-size: 12px;
  /* Полосы прокрутки: спокойный нейтральный цвет */
  --nagr-scrollbar-size: 8px;
  --nagr-scrollbar-thumb-vertical-size: 6px;
  --nagr-scrollbar-thumb-horizontal-size: 4px;
  --nagr-scrollbar-track: var(--nagr-bg-surface-alt);
  --nagr-scrollbar-thumb: var(--academy-gray);
  --nagr-header-font-size: clamp(18px, 2.3vw, 20px);
}

/*
  Академическая палитра, тёмная тема — фирменный красный на тёмных поверхностях.

  Поверхности, текст, семантика, границы и тени взяты из тёмной палитры: при одном акцентном
  цвете светлая и тёмная темы должны отличаться только им, иначе переключатель «Тема» начнёт
  менять ещё и цвета статусов. Метрики компактного интерфейса (радиусы, высоты строк,
  размеры шрифта грида, шрифт шапки) наследуются из блока `.academy--theme` выше: он висит
  на <html> и работает в обоих вариантах академической палитры.

  Значения акцентов проверены по контрасту WCAG:

  - `--nagr-brand` (#ff9db0) — светлый тон академического красного #c81240: на тёмных
    подложках сам #c81240 даёт 2.6:1, а его светлый тон — 6.7:1 на #303030 и 5.1:1 на #424242,
    поэтому текст, иконки и рамки в акцентном цвете читаются;
  - заливки остаются фирменными: бордовый `--nagr-brand-deep` с белым текстом — 8.0:1,
    академический красный `--nagr-brand-action` с белым текстом — 5.8:1;
  - подсветка и выделение строк — тот же красный полупрозрачным слоем поверх тёмных рядов,
    белый текст на них даёт 8-10:1.
*/
.academy--theme.theme--dark,
.academy--theme .theme--dark {
  --nagr-color-scheme: dark;
  color-scheme: var(--nagr-color-scheme);
  /* Палитра брендбука: используются HEX из подписей */
  --academy-red: #c81240;
  --academy-burgundy: #a00f33;
  --academy-red-medium: #e63542;
  --academy-coral: #ff5f61;
  /* Светлый тон акцентного красного — только для тёмных подложек */
  --academy-red-light: #ff9db0;
  --academy-black: #171f29;
  --academy-gray: #8b8a8f;
  --academy-gray-light: #e9e8f1;
  --academy-white: #fff;
  /* Бренд и основные действия: акцент — светлый красный, заливки — фирменные тёмные */
  --nagr-brand: var(--academy-red-light);
  --nagr-brand-2: var(--academy-red-light);
  --nagr-brand-deep: var(--academy-burgundy);
  --nagr-brand-action: var(--academy-red);
  --nagr-brand-action-hover: var(--academy-burgundy);
  --nagr-brand-action-active: #820c2a;
  --nagr-on-brand: var(--academy-white);
  /* Навигация: нейтральная тёмная основа, бордовое выделение, как в светлой академической */
  --nagr-accent-dark: var(--academy-red-light);
  --nagr-nav-bg: #1e1e1e;
  --nagr-nav-bg-active: var(--academy-burgundy);
  --nagr-on-nav: var(--academy-white);
  /* Нейтральные поверхности тёмной темы */
  --nagr-bg-app: #303030;
  --nagr-bg-surface: #424242;
  --nagr-bg-surface-alt: #383838;
  --nagr-bg-subtle: #3a3a3a;
  --nagr-bg-neutral: #4a4a4a;
  --nagr-bg-disabled: #4d4d4d;
  /* Таблицы */
  --nagr-bg-grid-header: #3a3a3a;
  --nagr-bg-grid-row: #2a2a2a;
  /* Наведение и выделение: красный поверх тёмных рядов */
  --nagr-bg-hover: rgb(200 18 64 / 22%);
  --nagr-bg-hover-2: var(--academy-burgundy);
  --nagr-bg-selected: rgb(200 18 64 / 45%);
  --nagr-bg-hover-subtle: rgb(255 255 255 / 8%);
  --nagr-bg-selected-weak: rgb(200 18 64 / 16%);
  --nagr-bg-selected-soft: rgb(200 18 64 / 30%);
  /* Дополнительные токены: нужно применить в компонентах.
     На тёмных заливках читается белый текст, тёмный текст светлой академической здесь не годится. */
  --nagr-on-hover: var(--academy-white);
  --nagr-on-hover-2: var(--academy-white);
  --nagr-on-selected: var(--academy-white);
  --nagr-on-selected-soft: var(--academy-white);
  /* Затемнение */
  --nagr-bg-scrim: rgb(0 0 0 / 25%);
  --nagr-bg-scrim-strong: rgb(0 0 0 / 80%);
  --nagr-bg-scrim-solid: #000;
  /* Авторизация и стеклянные поверхности: как в тёмной палитре бренда, затемнение с бордовым отливом */
  --nagr-bg-overlay: rgb(36 0 8 / 88%);
  --nagr-bg-glass: rgb(66 66 66 / 55%);
  --nagr-border-glass: rgb(255 255 255 / 15%);
  --nagr-shadow-glass:
    0 12px 12px var(--nagr-shadow-deep),
    inset 0 1px 0 var(--nagr-shadow-highlight);
  --nagr-auth-title: var(--nagr-on-brand);
  --nagr-auth-title-bg: linear-gradient(90deg, var(--nagr-bg-scrim-solid) -0.99%, var(--nagr-bg-scrim) -0.98%, transparent 102.71%);
  /* Текст */
  --nagr-text-primary: rgba(255, 255, 255, .87);
  --nagr-text-secondary: #b3b3b3;
  --nagr-text-muted: #8a8a8a;
  --nagr-text-disabled: #6b6b6b;
  /* Ошибки: яркий красный тёмной темы — он отличается от светлого акцента #ff9db0;
     текст на заливке тёмный, белый на #ff6b6b не читается */
  --nagr-danger: #ff6b6b;
  --nagr-danger-strong: #ef5350;
  --nagr-danger-soft: rgb(255 107 107 / 22%);
  --nagr-danger-muted: rgb(255 107 107 / 50%);
  --nagr-on-danger: var(--academy-black);
  /* Успех */
  --nagr-success: #66bb6a;
  --nagr-success-strong: #81c784;
  --nagr-success-soft: rgb(76 175 80 / 22%);
  --nagr-success-muted: rgb(129 199 132 / 45%);
  --nagr-success-wash: rgb(129 199 132 / 25%);
  /* Заливка success-кнопок: тот же тёмный тон, что и в светлой академической теме. */
  --nagr-success-fill: #287a46;
  --nagr-success-fill-hover: #1e6036;
  --nagr-on-success: var(--academy-white);
  /* Информация */
  --nagr-info: #64b5f6;
  --nagr-info-strong: #42a5f5;
  --nagr-info-soft: rgb(33 150 243 / 22%);
  /* Предупреждения: тёмный текст на светлой заливке */
  --nagr-warning: #ffca28;
  --nagr-warning-strong: #ffb300;
  --nagr-warning-soft: rgb(255 202 40 / 22%);
  --nagr-warning-highlight: rgb(255 235 59 / 28%);
  --nagr-warning-wash: rgb(255 235 59 / 12%);
  --nagr-on-warning: var(--academy-black);
  /* Иконки и границы */
  --nagr-icon: rgba(255, 255, 255, .87);
  --nagr-border: #4d4d4d;
  --nagr-border-strong: #6b6b6b;
  --nagr-border-soft: #4d4d4d;
  --nagr-border-muted: #5c5c5c;
  --nagr-border-contrast: #e0e0e0;
  --nagr-divider: rgb(255 255 255 / 12%);
  /* Фокус */
  --nagr-focus-border: var(--academy-red-light);
  --nagr-focus-ring: rgb(255 157 176 / 45%);
  --nagr-popup-focus-ring: var(--academy-red-light);
  /* Тени полей: светлые тени на тёмном фоне не видны, поэтому они построены на чёрном */
  --nagr-shadow-field-color: rgb(0 0 0 / 45%);
  --nagr-shadow-field-color-hover: rgb(0 0 0 / 70%);
  --nagr-shadow-field:
    0 0 3px 1px var(--nagr-shadow-field-color);
  --nagr-shadow-field-hover:
    0 0 3px 1px var(--nagr-shadow-field-color-hover);
  --nagr-shadow-field-inset:
    inset 0 0 0 2px var(--nagr-shadow-field-color);
  /* Общие тени */
  --nagr-shadow-subtle: rgb(0 0 0 / 45%);
  --nagr-shadow-soft: rgb(0 0 0 / 55%);
  --nagr-shadow-medium: rgb(0 0 0 / 65%);
  --nagr-shadow-strong: rgb(0 0 0 / 75%);
  --nagr-shadow-deep: rgb(0 0 0 / 70%);
  --nagr-shadow-highlight: rgb(255 255 255 / 8%);
  /* Диалоговое окно подсвечивается светло-серой растушёванной тенью: чёрная на тёмном фоне не видна */
  --nagr-shadow-dialog: 0 0 14px 2px rgb(100 100 100 / 32%);
  /* Полосы прокрутки: спокойный нейтральный цвет, как в светлой академической */
  --nagr-scrollbar-track: var(--nagr-bg-surface-alt);
  --nagr-scrollbar-thumb: var(--academy-gray);
}

html.theme--dark,
html.theme--dark body {
  /* Тёмная тема: фон страницы вне v-app (html и body), иначе вокруг приложения остаётся белая полоса. */
  background-color: var(--nagr-bg-app);
}

::-webkit-scrollbar {
  display: auto !important;
  width: var(--nagr-scrollbar-size) !important;
  background-color: var(--nagr-scrollbar-track) !important;
}

::-webkit-scrollbar-thumb:vertical {
  width: var(--nagr-scrollbar-thumb-vertical-size) !important;
  border-radius: var(--nagr-radius-md) !important;
  background-color: var(--nagr-scrollbar-thumb) !important;
}

::-webkit-scrollbar-thumb:horizontal {
  height: var(--nagr-scrollbar-thumb-horizontal-size) !important;
  border-radius: var(--nagr-radius-md) !important;
  background-color: var(--nagr-scrollbar-thumb) !important;
}

.dx-scrollable-scroll-content {
  background: var(--nagr-scrollbar-thumb) !important;
}

.blockTextBox {
  display: flex;
  align-items: center;
}

body .blockTextBox .blockNumBox .dx-show-clear-button .dx-clear-button-area {
  width: 25px;
  min-width: 25px;
}

body .blockTextBox .dx-texteditor.dx-editor-outlined .dx-texteditor-input {
  padding: 3px 8px;
}

body .blockTextBox .dx-texteditor-input {
  min-height: var(--nagr-control-height);
}

body .blockTextBox .dx-texteditor-container {
  background-color: transparent;
  border-radius: var(--nagr-radius-md);
}

body .blockTextBox .dx-texteditor.dx-state-focused.dx-editor-outlined {
  border-color: var(--nagr-focus-border);
}

body .blockTextBox .dx-texteditor.dx-editor-outlined.dx-state-focused {
  box-shadow: 0 0 0 2px var(--nagr-focus-ring) !important;
  -webkit-box-shadow: 0 0 0 2px var(--nagr-focus-ring) !important;
}

body .blockTextBox .dx-texteditor.dx-editor-outlined {
  box-shadow: var(--nagr-shadow-field);
  -webkit-box-shadow: var(--nagr-shadow-field-inset);
  border-radius: var(--nagr-radius-md);
}

body .blockTextBox .dx-texteditor.dx-editor-outlined.dx-state-hover {
  box-shadow: var(--nagr-shadow-field-hover);
  -webkit-box-shadow: var(--nagr-shadow-field-hover);
}

body .blockTextBox textarea.dx-texteditor-input::-webkit-scrollbar-thumb {
  border-radius: var(--nagr-radius-lg);
  background-color: var(--nagr-scrollbar-thumb);
}

body .blockTextBox textarea.dx-texteditor-input::-webkit-scrollbar-track {
  border-radius: var(--nagr-radius-lg);
  background-color: var(--nagr-scrollbar-track);
}

body .blockTextBox textarea.dx-texteditor-input::-webkit-scrollbar {
  width: 10px;
  background-color: var(--nagr-scrollbar-track);
  border-radius: var(--nagr-radius-lg);
}

.text-box-popup {
  margin: 5px 12px;
}

body .text-box-popup .dx-placeholder::before {
  padding: 4px 9px 8px;
}

body .text-box-popup .dx-texteditor.dx-editor-outlined.dx-state-focused {
  box-shadow: 0 0 0 2px var(--nagr-popup-focus-ring) !important;
  -webkit-box-shadow: 0 0 0 2px var(--nagr-popup-focus-ring) !important;
}

body .text-box-popup .dx-texteditor-input {
  min-height: var(--nagr-control-height);
}

body .text-box-popup .dx-texteditor.dx-editor-outlined .dx-texteditor-input {
  padding: 0 8px;
}

body .text-box-popup .dx-texteditor.dx-editor-outlined {
  box-shadow: var(--nagr-shadow-field);
  -webkit-box-shadow: var(--nagr-shadow-field-inset);
  border-radius: var(--nagr-radius-md);
}

body .text-box-popup .dx-texteditor.dx-editor-outlined.dx-state-hover {
  box-shadow: var(--nagr-shadow-field-hover);
  -webkit-box-shadow: var(--nagr-shadow-field-hover);
}

body input:-webkit-autofill,
body input:-webkit-autofill:hover,
body input:-webkit-autofill:focus,
body input:-webkit-autofill:active {
  background-color: transparent !important;
  -webkit-background-clip: text;
  background-clip: text;
}

.ucard-popup-card .tool_panel {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.ucard-popup-card-text {
  padding: 0 7px !important;
}

.ucard-popup-card .btn_panel {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-end !important;
  flex-shrink: 0;
}

/*
  Кнопка закрытия панели повторяет цвет шапки (--nagr-brand-deep): токен --nagr-brand
  в тёмной теме становится ярко-зелёным и кнопка выделялась на фоне тёмной шапки.
*/
.ucard-popup-card .panel_btn {
  min-width: 24px !important;
  width: 34px !important;
  height: 24px !important;
  background-color: var(--nagr-brand-deep) !important;
  border: 1px solid var(--nagr-on-brand);
  color: var(--nagr-on-brand) !important;
  transition: 250ms background-color !important;
}

.ucard-popup-card .panel_btn .v-icon {
  font-size: 20px !important;
}

.ucard-popup-card-text .v-input--selection-controls__input {
  margin-right: -1px;
}

.ucard-popup-card-text fieldset .v-icon__svg {
  color: var(--nagr-text-secondary);
  height: 18px;
  width: 18px;
}

/*
  Тёмная тема: строки таблиц Vuetify (v-data-table) красятся тем же фоном, что и строки
  гридов DevExtreme. Иначе таблицы проваливаются в чёрный (#1e1e1e) и контрастируют
  с цветом содержимого ячеек. Исключены выбранные и активные строки (у них своя подсветка)
  и таблицы с классом transparent — у них фон задаётся извне.
*/
.theme--dark .v-data-table:not(.transparent) > .v-data-table__wrapper > table > tbody > tr:not(.v-data-table__selected):not(.active) {
  background-color: var(--nagr-bg-grid-row);
}

#gridContainer .dx-datagrid {
  font-size: var(--nagr-grid-cell-font-size);
  color: var(--nagr-text-primary);
}

#gridContainer .dx-datagrid-headers {
  font-size: var(--nagr-grid-header-font-size);
  color: var(--nagr-text-primary);
}

#gridContainer .dx-datagrid-content .dx-datagrid-table .dx-row .dx-editor-cell {
  padding: 0 !important;
}

#gridContainer .dx-filter-menu.dx-menu .dx-menu-item .dx-menu-item-content {
  padding: 0 5px;
}

#gridContainer .dx-datagrid-headers .dx-texteditor-input {
  min-height: var(--nagr-grid-header-input-height);
}

#gridContainer .dx-texteditor-input {
  padding: 2px;
  font-size: 11px;
  padding-left: 26px;
}

#gridContainer tr.dx-row.dx-data-row.dx-row-lines.dx-column-lines > td {
  padding-top: 2px;
  padding-bottom: 2px;
  height: var(--nagr-grid-row-height);
}

#gridContainer .dx-datagrid .dx-header-filter::before {
  content: "\f050";
  font-size: 10px;
  vertical-align: super;
}

#gridContainer .dx-header-row .dx-header-filter-indicator {
  min-width: 13px;
}

#gridContainer .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center !important;
  vertical-align: middle;
  font-size: 10px !important;
  font-weight: 700;
  background-color: var(--nagr-bg-grid-header);
}

.header {
  font-size: var(--nagr-header-font-size) !important;
}

/*
  Кнопка закрытия диалога всегда повторяет цвет шапки (--nagr-brand-deep). Токен --nagr-brand
  в тёмной теме становится ярко-зелёным, и крестик выделялся на фоне тёмной шапки.
*/
.closeBtn {
  min-width: 24px !important;
  width: 24px !important;
  height: 24px !important;
  position: absolute !important;
  right: 0;
  margin-top: 0;
  margin-right: 8px;
  background-color: var(--nagr-brand-deep) !important;
  border: 1px solid var(--nagr-on-brand);
  color: var(--nagr-on-brand) !important;
  transition: 250ms background-color !important;
}

.lineCollectionButtons {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
}

.delete-btn-red {
  color: var(--nagr-danger) !important;
}

body .dx-popup-wrapper > .dx-overlay-content {
  border-radius: var(--nagr-radius-md);
}

/*
  Тёмная тема: у v-dialog нет границы, а штатная тень построена на чёрном цвете, поэтому окно
  сливается с затемнённой страницей под ним. Светло-серая растушёванная тень со всех сторон
  (без смещения) подсвечивает окно. Тот же токен применяем к попапам DevExtreme, чтобы все
  диалоговые окна выглядели одинаково.
*/
html.theme--dark .v-dialog,
html.theme--dark .dx-popup-wrapper > .dx-overlay-content {
  box-shadow: var(--nagr-shadow-dialog);
}

/*
  Полоса вкладок внутри диалогов и панелей (редактор строки, настройки расчёта,
  формы контроля). Классы повторяют цвета главных вкладок OrgBoard
  (ViewModels/OrgBoard/tabs.vue: .active-tab / .menu__text): неактивная вкладка —
  вторичный текст, активная — акцент бренда, разделители — по границе. Маска вокруг
  активной вкладки берётся из цвета карточки (--nagr-bg-surface), а не из фона
  страницы: полоса вкладок стоит в окне, а не на странице.
*/
.active--tab {
  background: transparent;
  color: var(--nagr-brand) !important;
  box-shadow: 0 9px 0 0 var(--nagr-bg-surface), 0 -9px 0 0 var(--nagr-bg-surface), 4px 0 8px -4px var(--nagr-shadow-strong), -4px 0 8px -4px var(--nagr-shadow-strong);
}

.menu--text {
  color: var(--nagr-text-secondary);
  border-right: 1px solid var(--nagr-border);
  text-transform: none !important;
  text-decoration: none !important;
  font-size: 14px !important;
  font-weight: 700;
}

body .dx-button .dx-icon {
  vertical-align: bottom;
}

/*
  Кнопки DevExtreme type="success" — подтверждения «Да» и подобные действия без
  иконок. Тема DevExtreme знает только собственный success (#5cb85c), поэтому
  заливка берётся из токенов палитры: --nagr-success-fill (в тёмных палитрах это
  тёмный тон палитры, чтобы белая подпись читалась) и --nagr-success-fill-hover
  для состояний. Подпись и иконка красятся в --nagr-on-success.
*/
body .dx-button-mode-contained.dx-button-success {
  background-color: var(--nagr-success-fill);
  border-color: transparent;
  color: var(--nagr-on-success);
}

body .dx-button-mode-contained.dx-button-success .dx-icon {
  color: var(--nagr-on-success);
}

body .dx-button-mode-contained.dx-button-success.dx-state-hover,
body .dx-button-mode-contained.dx-button-success.dx-state-focused,
body .dx-button-mode-contained.dx-button-success.dx-state-active {
  background-color: var(--nagr-success-fill-hover);
  border-color: transparent;
  color: var(--nagr-on-success);
}