/* ───────────────────────────────────────────────────────────────────────────
   Палитра sf-review: сталь + сигнальный янтарь.

   Осмысление: сервис оперирует складом (стеллажи/погрузка) и ML-качеством.
   Бренд — глубокий сине-стальной (надёжность/индустриальное), акцент —
   янтарь (сигнальный цвет складской техники, хорошие заметные CTA).
   Семантические цвета Bootstrap не переназначаем: success/danger/warning
   остаются зелёным/красным/жёлтым — их значение закреплено бейджами
   состояний (READY/FAILED/SYNCING) и менять окраску рискованно.

   Всё — только через CSS-переменные Bootstrap: компоненты (btn-, text-bg-,
   link-, form-), включая forthcoming-страницы, перекрашиваются сами,
   кастомных цветов в JSP нет и заводить не надо.
   ─────────────────────────────────────────────────────────────────────── */
:root {
    /* Бренд: PRIMARY (steel blue) */
    --bs-primary: #2c4a5e;
    --bs-primary-rgb: 44, 74, 94;
    --bs-link-color: #2c4a5e;
    --bs-link-color-rgb: 44, 74, 94;
    --bs-link-hover-color: #1d3342;
    --bs-link-hover-color-rgb: 29, 51, 66;

    /* Акцент: AMBER (используется явными text-bg-warning/btn-warning там, где
       нужно внимание — новые сессии, фильтры); отдельного accent-класса нет. */

    /* Фон: холодный светлый, чуть стальнее дефолтного серого. */
    --bs-body-bg: #f2f4f6;
    --bs-light: #e9edf0;
    --bs-light-rgb: 233, 237, 240;
}

/* Тёмный navbar поверх светлых страниц: якорь бренда, не конкурирует с
   контентом. Активный пункт — янтарное нижнее подчёркивание. */
.navbar.sf-nav {
    --bs-navbar-color: rgba(255, 255, 255, 0.72);
    --bs-navbar-hover-color: #fff;
    --bs-navbar-active-color: #fff;
    background: var(--bs-primary);
}
.navbar.sf-nav .navbar-brand {
    color: #fff;
    letter-spacing: 0.02em;
}
.navbar.sf-nav .nav-link.active {
    color: #fff;
    box-shadow: inset 0 -3px 0 var(--bs-warning);
}
.navbar.sf-nav .btn-link {
    color: rgba(255, 255, 255, 0.72);
}
.navbar.sf-nav a {
    color: rgba(255, 255, 255, 0.72);
}
.navbar.sf-nav a:hover {
    color: #fff;
}

/* sf-review — небольшой слой поверх Bootstrap 5, не замена его классов. */

.navbar-brand {
    font-weight: 600;
}

.table > :not(caption) > * > * {
    vertical-align: middle;
}

.toast-container {
    z-index: 1080;
}

/* Сортируемые заголовки таблиц — sfSortableTable() в app.js. */
table.sortable th[data-sort] {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

table.sortable th[data-sort].sort-asc::after {
    content: " \2191";
}

table.sortable th[data-sort].sort-desc::after {
    content: " \2193";
}

/* Рамки расхождений сегментации на /tasks/compare — прямо поверх оверлеев,
   абсолютное позиционирование в процентах (нормализованные [0,1] координаты
   бокса * 100%) относительно .position-relative обёртки вокруг <img>. */
.seg-highlight {
    position: absolute;
    border: 3px solid;
    border-radius: 2px;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
}
.seg-highlight-removed { border-color: var(--bs-danger); }
.seg-highlight-added { border-color: var(--bs-success); }
.seg-highlight-changed { border-color: var(--bs-warning); }

/* Метка DataMatrix — та же рамка (наследует цвет из seg-highlight-*), но
   пунктиром — отличать от объектов сегментации на глаз, не только по цвету. */
.label-highlight {
    position: absolute;
    border: 3px dashed;
    border-radius: 2px;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .7);
}

.seg-legend-swatch {
    display: inline-block;
    width: .9em;
    height: .9em;
    border: 3px solid;
    border-radius: 2px;
    vertical-align: middle;
    margin: 0 .15em 0 .4em;
}

/* Бейджи вида расхождения в шапке кадра — крупнее и жирнее дефолтного
   .badge, чтобы сегментация/метки/декод было видно сразу, не приглядываясь
   (по прямому запросу пользователя — «поярче»). */
.diff-kind-badge {
    font-size: .8em;
    padding: .4em .6em;
    margin-right: .25em;
}

/* Карусель /tasks/compare — высота картинки/таблиц расхождений зафиксирована,
   чтобы вся карточка помещалась на экран и не «прыгала» (не менялась высота
   страницы, соответственно и её прокрутка) при переходе между кадрами:
   у разных кадров разное число строк в таблицах и разный размер картинки. */
.compare-img-wrap {
    max-height: 45vh;
}
.compare-img {
    display: block;
    max-width: 100%;
    max-height: 45vh;
    width: auto;
    height: auto;
    margin: 0 auto;
}
.compare-tables-scroll {
    min-height: 24vh;
    max-height: 24vh;
    overflow-y: auto;
}

/* Иконка-стрелка разворота (Lucide chevron-right, инлайн SVG — без
   иконочного шрифта/CDN) — поворот на 90° вместо смены на chevron-down,
   один SVG на оба состояния. Общая утилита, не только для /cameras. */
.expand-icon {
    transition: transform .15s ease;
    flex-shrink: 0;
}
.expand-icon.is-expanded {
    transform: rotate(90deg);
}

/* Правый блок пользователя на тёмном navbar — светлые ссылки, не muted. */
.sf-nav-user {
    color: rgba(255, 255, 255, 0.72);
}