.content {
    padding: 10px;
}

body.theme-dark .layout-body {
    background-color: #2a2a32;
}

.card-group {
    grid-area: card-group;
    padding: 20px;
    margin-bottom: 10px;
    background-color: white;
}

body.theme-dark .card-group {
    background-color: #363640;
}

/* Строка сводных read-only полей (см. FacilityService/Index.cshtml) - вместо
   пустых на вид outlined-текстбоксов формы (рамка + мелкая подпись сверху,
   без выделения самого значения) простые пары подпись/значение, тот же
   стиль подписи, что у .dash-kpi-label в дашбордах. */
.info-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 40px;
}

@media screen and (max-width: 600px) {
    .info-strip {
        grid-template-columns: 1fr;
    }
}

.info-strip-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    opacity: .6;
}

.info-strip-value {
    font-size: 14px;
    font-weight: 500;
    margin-top: 4px;
}

body.theme-dark .dx-card {
    background-color: #363640;
}

body.theme-light .menu-container,
body.theme-dark .menu-container {
    background-color: #363640;
    box-shadow: 1px 0 3px rgba(0, 0, 0, .08);
}

.card-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 16px;
}

.section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 10px;
}

/* Заголовок страницы (<h2 class="content-block">) - тот же компактный вид,
   что у .card-title на страницах с кнопкой "Назад" (см. _BackButtonTitle),
   вместо крупного 30px/300 из dx.css (.layout-body .content h2). margin-left
   фиксированный (33px, вместо 20/40px из dx.css по брейкпоинту) - столько же,
   сколько занимает стрелка "назад" до текста в .back-button-wrapper, чтобы
   текст заголовка был на одном x на страницах с ней и без неё. */
.layout-body .content h2.content-block {
    font-size: 18px;
    font-weight: 500;
    margin-left: 33px;
}

.toolbar-template-separator {
    height: 36px;
    margin: 0 5px;
    border-left: 1px solid #ddd;
}

body.theme-dark .toolbar-template-separator {
    border-left: 1px solid #515159;
}

.toolbar-menu-separator {
    height: 1px;
    border-bottom: 1px solid #ddd;
}

body.theme-dark .toolbar-menu-separator {
    border-bottom: 1px solid #515159;
}

.dx-invalid-message {
    font-size: 12px;
    margin-top: 5px;
}

.buttons-align-right {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.tab-content-wrapper {
    padding: 15px;
}

.dx-tabpanel {
    border: 1px solid #e0e0e0;
    overflow: hidden;
}

body.theme-dark .dx-tabpanel {
    border-color: #515159;
}

.login-container {
    display: flex;
    height: 100vh;
    width: 100%;
}

.login-left-panel {
    flex: 0 0 25%;
    background-color: #fcfbf9;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px;
}

body.theme-dark .login-left-panel {
    background-color: #2a2a32;
}

.login-right-panel {
    flex: 0 0 75%;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

body.theme-dark .login-right-panel {
    background-color: #363640;
}

body.theme-dark .login-left-panel h2,
body.theme-dark .login-right-panel .card-title {
    color: #fff;
}

.login-left-panel .program-image img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.button-wrapper {
    margin-bottom: 16px;
}

.settings-panel {
    padding: 4px 4px 16px;
}

.settings-section-title {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: .4px;
    opacity: .6;
    margin-bottom: 12px;
}

.settings-field + .settings-field {
    margin-top: 18px;
}

.settings-field-label {
    font-size: 13px;
    opacity: .75;
    margin-bottom: 8px;
}

.settings-swatches {
    display: flex;
    gap: 10px;
}

.settings-swatch {
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: none;
    cursor: pointer;
    line-height: 0;
}

.settings-swatch img {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: block;
}

.settings-swatch-active {
    border-color: var(--theme-accent-color, #ff5722);
}

.settings-seg-group {
    display: inline-flex;
    border: 1px solid rgba(125, 125, 125, .4);
    border-radius: 8px;
    overflow: hidden;
}

.settings-seg {
    padding: 7px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    color: inherit;
}

.settings-seg + .settings-seg {
    border-left: 1px solid rgba(125, 125, 125, .4);
}

.settings-seg-active {
    background: var(--theme-accent-color, #ff5722);
    color: #fff;
}

.error-note {
    margin-top: 8px;
    font-size: 13px;
    color: rgba(0, 0, 0, .55);
}

body.theme-dark .error-note {
    color: rgba(255, 255, 255, .55);
}

.align-checkbox {
    margin-top: 10px;
}

/* Тот же margin-top, что у .content-block (dx.css) - иначе заголовок
   страницы с кнопкой "Назад" оказывается выше, чем на обычных страницах
   списков (h2.content-block). Left/right не трогаем - стрелка "назад"
   остаётся на одном уровне с гридом/контентом ниже (.content, 10px).
   height 27px = line-height текста h2.content-block: dx-toolbar выше этого
   (за счёт кнопки-стрелки) и по умолчанию центрируется по своей строке, из-за
   чего текст заголовка со стрелкой оказывался ниже текста h2 на той же
   странице по вертикали - align-items: center центрирует тулбар (а значит и
   текст внутри него) по этой строке, а не по своей высоте. */
.back-button-wrapper {
    display: flex;
    align-items: center;
    height: 27px;
    margin-top: 20px;
    margin-bottom: 16px;
}

.back-button-wrapper .dx-toolbar {
    background-color: transparent;
}

.back-button-wrapper .card-title {
    margin-bottom: 0;
}

.back-button-wrapper .back-button-title {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.back-button-wrapper .card-subtitle {
    font-size: 12.5px;
    font-weight: 500;
    opacity: .6;
}

.space-wrapper {
    margin-bottom: 16px;
}

.tabs-left {
    width: auto !important;
    display: inline-block !important;
}

.territory-columns {
    display: flex;
    gap: 20px;
}

@media screen and (max-width: 600px) {
    .territory-columns {
        flex-direction: column;
    }
}

.territory-column {
    flex: 1;
    min-width: 0;
}

.territory-flow-arrow {
    color: var(--theme-accent-color, #ff5722);
    font-weight: 700;
    margin-right: 6px;
}

.territory-flow-context {
    font-size: 13px;
    font-weight: 400;
    color: rgba(0, 0, 0, .55);
    margin-left: 6px;
}

body.theme-dark .territory-flow-context {
    color: rgba(255, 255, 255, .55);
}

@media screen and (max-width: 600px) {
    .territory-flow-arrow {
        display: inline-block;
        transform: rotate(90deg);
    }
}

.dx-field-item:has(.dx-textbox.dx-state-invisible) {
    display: none;
}

.role-form-item .dx-field-item-label {
    width: 200px !important;
}

.dx-datagrid-rowsview .dx-row-focused .ui-status-cell,
.dx-datagrid-rowsview .dx-selection .ui-status-cell {
    color: inherit !important;
}

.dx-datagrid-rowsview td.ui-overdue-cell {
    color: #e53935;
    font-weight: 600;
}

.dx-datagrid-rowsview .dx-row-focused td.ui-overdue-cell,
.dx-datagrid-rowsview .dx-selection td.ui-overdue-cell {
    color: inherit !important;
}

/* ==================== Дашборды: правила под конкретные id графиков вьюх ====================
   Общий движок дашбордов (KPI / сетка карточек / фильтры / закреплённая шапка /
   подсказки / popup просмотра) — в css/dashboard.css. */

.grid-toolbar-title {
    font-size: 15px;
    font-weight: 500;
    padding-left: 4px;
}

/* scrollview приложения переведён в useNative (нужно для нативного sticky):
   прячем системную полосу прокрутки — остаётся только тонкая накладка DevExtreme,
   вид как был при симулированной прокрутке. */
#layout-drawer-scrollview.dx-scrollable-native > .dx-scrollable-wrapper > .dx-scrollable-container {
    scrollbar-width: none;
    /* без «резинки» на границах — иначе закреплённую шапку тянет вверх */
    overscroll-behavior-y: contain;
}

#layout-drawer-scrollview.dx-scrollable-native > .dx-scrollable-wrapper > .dx-scrollable-container::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Числа-подписи на бар-графиках: без синей плашки, жирным цветом текста темы */
#chartSource .dxc-labels text,
#chartView .dxc-labels text,
#chartType .dxc-labels text,
#chartReason .dxc-labels text,
#chartExecutorLoad .dxc-labels text {
    fill: #1c2530 !important;
    font-weight: 700 !important;
}

body.theme-dark #chartSource .dxc-labels text,
body.theme-dark #chartView .dxc-labels text,
body.theme-dark #chartType .dxc-labels text,
body.theme-dark #chartReason .dxc-labels text,
body.theme-dark #chartExecutorLoad .dxc-labels text {
    fill: #e7ecf2 !important;
}

/* вторая строка подписи бара исполнителя — красным (fill ставится в onDrawn,
   здесь только чтобы CSS-правило выше не перебивало её через наследование) */
#chartExecutorLoad .dxc-labels text tspan[fill] {
    fill: #e53935 !important;
}