/* Custom page CSS
-------------------------------------------------- */
/* Not required for template or sticky footer method. */

main > .container,
main > .container-fluid {
    padding: 60px 15px 0;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

@media (min-width: 768px) {
    .bd-placeholder-img-lg {
        font-size: 3.5rem;
    }
}

.b-example-divider {
    width: 100%;
    height: 3rem;
    background-color: rgba(0, 0, 0, .1);
    border: solid rgba(0, 0, 0, .15);
    border-width: 1px 0;
    box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
}

.b-example-vr {
    flex-shrink: 0;
    width: 1.5rem;
    height: 100vh;
}

.bi {
    vertical-align: -.125em;
    fill: currentColor;
}

.nav-scroller {
    position: relative;
    z-index: 2;
    height: 2.75rem;
    overflow-y: hidden;
}

.nav-scroller .nav {
    display: flex;
    flex-wrap: nowrap;
    padding-bottom: 1rem;
    margin-top: -1px;
    overflow-x: auto;
    text-align: center;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

.btn-bd-primary {
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8;
}

.bd-mode-toggle {
    z-index: 1500;
}

@media (min-width: 992px) {
    .navbar .navbar-nav > .nav-item > .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
        font-size: 0.9375rem;
    }

    .navbar .navbar-brand {
        font-size: 1.0625rem;
    }
}

.navbar-user-btn {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bd-mode-toggle .dropdown-menu .active .bi {
    display: block !important;
}

/* jstree theme */

:root {
    --jstree-hover-bg: rgba(0, 0, 0, 0.05);
    --jstree-clicked-bg: #beebff;
    --jstree-text-color: #000;
}

[data-bs-theme="dark"] {
    --jstree-hover-bg: rgba(255, 255, 255, 0.1);
    --jstree-clicked-bg: rgba(13, 110, 253, 0.35);
    --jstree-text-color: #e9ecef;
}

.jstree-wholerow-hovered {
    background: var(--jstree-hover-bg) !important;
    border-radius: 4px;
}

.jstree-wholerow-clicked {
    background: var(--jstree-clicked-bg) !important;
    border-radius: 4px;
}

.jstree-anchor {
    color: var(--jstree-text-color) !important;
}

[data-bs-theme="dark"] .jstree-ocl {
    filter: invert(1) grayscale(1) brightness(1.5);
}

/* Минималистичный dl/dt/dd: тонкий gap, dt без жира, в muted цвете */
dl.row {
    margin-bottom: 0.35rem;
    row-gap: 0.25rem;
}

dl.row:last-child {
    margin-bottom: 0;
}

dl.row > dt {
    font-weight: 400;
    color: var(--bs-secondary-color);
}

dl.row > dd {
    margin-bottom: 0;
}

/* Производственные линии: горизонтально-прокручиваемые табы со стрелочной навигацией */
.production-line-tabs__bar {
    gap: 0.25rem;
}

.production-line-tabs__list {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.production-line-tabs__list::-webkit-scrollbar {
    display: none;
}

.production-line-tabs__list .nav-item {
    flex-shrink: 0;
}

.production-line-tabs__list .nav-link {
    max-width: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.production-line-tabs__nav-btn {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    margin-bottom: var(--bs-nav-tabs-border-width, 1px);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--bs-secondary-color);
    background: transparent;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
}

.production-line-tabs__nav-btn:hover:not(:disabled) {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
}

.production-line-tabs__nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.production-line-tabs.is-overflowing .production-line-tabs__nav-btn {
    display: inline-flex;
}

/* Мобильные: резервируем отступ под нижнюю safe-area (home indicator на iPhone,
   особенно в установленном PWA), иначе футер прижимается к самому краю экрана.
   Работает вместе с viewport-fit=cover в meta viewport; на десктопе env = 0. */
.footer {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
}

/* Пагинация в одну строку: при нехватке ширины — горизонтальный скролл вместо
   переноса на вторую строку. Скроллбар скрыт. */
.pagination.flex-nowrap-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pagination.flex-nowrap-scroll::-webkit-scrollbar {
    display: none;
}

/* Таблицы .responsive-cards на узком экране превращаются в карточки:
   каждая строка — отдельная карточка, каждая ячейка на своей строке с подписью
   из data-label. Убирает горизонтальный скролл широких таблиц на телефоне. */
@media (max-width: 767.98px) {
    .responsive-cards > thead {
        display: none;
    }

    .responsive-cards,
    .responsive-cards > tbody,
    .responsive-cards > tbody > tr,
    .responsive-cards > tbody > tr > td {
        display: block;
        width: 100%;
    }

    .responsive-cards > tbody > tr {
        margin-bottom: .75rem;
        border: 1px solid var(--bs-border-color) !important;
        border-radius: .5rem;
        overflow: hidden;
    }

    .responsive-cards > tbody > tr > td {
        border: 0 !important;
        border-bottom: 1px solid var(--bs-border-color) !important;
        padding: .5rem .75rem;
    }

    .responsive-cards > tbody > tr > td:last-child {
        border-bottom: 0 !important;
    }

    .responsive-cards > tbody > tr > td[data-label]::before {
        content: attr(data-label);
        display: block;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: .03em;
        color: var(--bs-secondary-color);
        margin-bottom: .2rem;
    }

    /* Отступы абзацев со статусами внутри карточки поплотнее */
    .responsive-cards > tbody > tr > td p:last-child {
        margin-bottom: 0;
    }
}

/* Пары «ключ — значение» на col-sm-* (конфигурация устройства, информация о
   производственных линиях) на узком экране разрывались на две строки. Держим их
   в одной строке. Обычные сводки (col-7/col-5 без col-sm) не затрагиваем. */
@media (max-width: 575.98px) {
    dl.row > dt[class*="col-sm-"] {
        flex: 0 0 42%;
        max-width: 42%;
    }

    dl.row > dd[class*="col-sm-"] {
        flex: 0 0 58%;
        max-width: 58%;
    }
}

/* Страница «Лог приложения»: вывод в терминал, показанный в браузере.
   Моноширинный текст с прокруткой; цвета уровней берём из темы, чтобы
   одинаково читалось в светлом и тёмном оформлении. */
.app-log {
    height: 70vh;
    min-height: 320px;
    overflow: auto;
    font-size: .78rem;
    line-height: 1.35;
    white-space: pre-wrap;
    word-break: break-word;
    background-color: var(--bs-body-bg);
}

.app-log-line {
    padding: 0 .15rem;
}

.app-log-line:hover {
    background-color: var(--bs-tertiary-bg);
}

/* Колонка времени фиксированной ширины — у строк-продолжений она пустая,
   поэтому стек исключения остаётся выровненным под своим сообщением. */
.app-log-time {
    display: inline-block;
    width: 5.5rem;
    color: var(--bs-secondary-color);
    user-select: none;
}

.app-log-error {
    color: var(--bs-danger-text-emphasis);
    background-color: var(--bs-danger-bg-subtle);
}

.app-log-warn {
    color: var(--bs-warning-text-emphasis);
}

.app-log-muted {
    color: var(--bs-secondary-color);
}

@media (max-width: 575.98px) {
    .app-log {
        height: 60vh;
        font-size: .72rem;
    }

    .app-log-time {
        width: 4.2rem;
    }
}