/* Цвета статусов в выпадающих списках */
.fi-ta-select select option[value="1"] {
    color: #16a34a;
}

.fi-ta-select select option[value="2"] {
    color: #dc2626;
}

.fi-ta-select select option[value="3"] {
    color: #d97706;
}

/* Горизонтальный скролл для графиков на узких экранах */
.fi-section-content-ctn:has(.fi-wi-chart-canvas-ctn) {
    overflow-x: auto;
}

.fi-wi-chart-canvas-ctn {
    min-width: 800px;
}

/* Центрирование заголовка APP_NAME на странице логина */
.fi-simple-header .fi-logo {
    width: 100%;
    margin-inline-start: 0;
    justify-content: center;
    text-align: center;
}

/*
 * Primary filled-кнопки: белый текст и в светлой теме — как в тёмной.
 * Тёмная тема устраивает как есть, поэтому её не трогаем: там цвет берётся
 * из переменных --dark-*. В светлой теме подменяем --text/--hover-text на
 * значения тёмной темы. Классы dark:fi-text-color-* задают --dark-text
 * безусловно (не внутри .dark), поэтому в светлой теме цвет текста получается
 * ровно как в тёмной, а фон (--bg) остаётся прежним.
 */
.fi-btn:not(.fi-outlined).fi-color-primary {
    --text: var(--dark-text);
    --hover-text: var(--dark-hover-text);
}