/* Собственные стили поверх Bootstrap (мобильные сценарии — приоритет) */

/* Крупное поле ввода INV: удобно и с клавиатуры, и со сканера */
.scan-input {
    font-size: 1.35rem;
    letter-spacing: 0.03em;
    min-height: 3.4rem;
}

/* Плитки участков на странице выбора */
.area-tile {
    border-width: 2px;
    border-radius: 1rem;
}

/* Результат скана: заметная плашка INV; приоритет — обычным шрифтом,
   акцент в плашке — цветной бейдж статуса */
.scan-result .card-body { padding: 0.9rem 1.1rem; }
.scan-priority {
    margin-top: 0.2rem;
}

/* Полноэкранный режим сканирования камерой */
.camera-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}
.camera-overlay-inner {
    text-align: center;
    max-width: 32rem;
    width: 92%;
    /* Страховка: если устройство всё же отдало вытянутый кадр и контент
       выше экрана — прокручиваем, кнопка «Закрыть» всегда достижима */
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
}
.camera-view {
    border-radius: 0.75rem;
    overflow: hidden;
    background: #000;
}
.camera-view video { width: 100%; display: block; }

/* Усиленные режимы: квадратное поле камеры (видео 4:3 кадрируется
   до квадрата object-fit: cover), горизонтальная рамка-прицел 4:1 —
   1D-штрихкод сам является горизонтальной полосой (декодируется
   центральная полоса 4:1 кадра, doc/08); вертикальные метки —
   поворотом телефона на 90° */
.strong-view {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; /* квадратное поле камеры */
    max-height: 60vh;    /* на больших экранах не вытягиваем колонку */
    border-radius: 0.75rem;
    overflow: hidden;
    background: #000;
}
.strong-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* заполняем квадрат, кроп сверху/снизу */
}
.strong-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    aspect-ratio: 4 / 1;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 0.5rem;
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3); /* затемнение вокруг полосы */
    pointer-events: none; /* тапы по кадру не блокируем */
}
/* Квадратная рамка для 2D-кодов (QR/Data Matrix, режим «Скан 2D») */
.strong-frame-square {
    width: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 0.75rem;
}

/* Панель управления камерой в оверлее сканирования (doc/08-upravlenie-kameroy.md):
   элементы показываются только при поддержке устройством */
.camera-controls {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.camera-controls-row {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}
/* Крупная тач-кнопка (🔄 камера, 🔦 подсветка): иконка + подпись,
   удобно нажимать одной рукой и в перчатках */
.camera-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    line-height: 1.1;
    touch-action: manipulation; /* без задержки двойного тапа */
    -webkit-user-select: none;
    user-select: none;
}
.camera-btn:active { background: rgba(255, 255, 255, 0.32); }
.camera-btn-icon { font-size: 1.7rem; }
.camera-btn-caption {
    font-size: 0.72rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Выпадающий список камер: крупная тач-цель на всю свободную ширину ряда
   (растягивается по высоте рядом с кнопкой 🔦), стиль тёмного оверлея */
.camera-select {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 1.05rem;
    padding: 0 2.4rem 0 1rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    background-color: rgba(255, 255, 255, 0.14);
    color: #fff;
    appearance: none;
    -webkit-appearance: none;
    /* Собственная стрелка (нативную убрали appearance: none) */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M8 11 3 6h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}
.camera-select:active { background-color: rgba(255, 255, 255, 0.32); }
/* Пункты нативного выпадающего списка рисует ОС — текст чёрным,
   иначе на iOS в тёмной теме бывает белый на белом */
.camera-select option { color: #000; }
/* Включённая подсветка (torch) — жёлтая, «горит» */
.camera-btn.active {
    background-color: var(--bs-warning);
    border-color: var(--bs-warning);
    color: #000;
}
/* Зум: увеличенный ползунок — удобнее попадать пальцем */
.camera-controls .form-range { margin: 0; }
.camera-controls .form-range::-webkit-slider-thumb {
    width: 1.7rem;
    height: 1.7rem;
}
.camera-controls .form-range::-moz-range-thumb {
    width: 1.7rem;
    height: 1.7rem;
}
/* Подсказка про тап-фокус — приглушённый текст на тёмном оверлее */
.camera-focus-hint {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    text-align: center;
}
/* Сообщения панели управления (например, неудачное переключение камеры) */
.camera-message {
    color: var(--bs-warning);
    font-size: 0.9rem;
    text-align: center;
}
/* Строка статуса с лампой здоровья режима (watchdog, doc/08) */
.camera-status-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 1.3rem;
}
.camera-status-line .camera-focus-hint {
    text-align: left; /* текст рядом с лампой, а не по центру колонки */
}
/* Лампа-индикатор: скрыта = всё нормально */
.scan-lamp {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    flex: 0 0 auto;
}
.scan-lamp-warn { background: var(--bs-warning); }
.scan-lamp-error {
    background: var(--bs-danger);
    animation: lamp-blink 1s steps(2, start) infinite; /* внимание оператора */
}
@keyframes lamp-blink {
    50% { opacity: 0.25; }
}

/* User-Agent в журнале логинов — не растягивает таблицу */
.user-agent-cell { max-width: 22rem; }

/* Кнопки режимов скана («Универсальный», «Плохие штрихкоды 1»…): длинные
   надписи переносятся на узких кнопках (col-xl-3), слово может разорваться */
.btn-scan-mode {
    overflow-wrap: break-word;
    word-wrap: break-word;        /* старые браузеры */
    white-space: normal;
    word-break: break-all;        /* разрыв длинного слова в любом месте */
    max-width: 100%;
}

/* Шапка: схлопывающееся меню на мобильных (doc/03, раздел 4a).
   Bootstrap JS в проект не подключён — раскладку делаем сами:
   <992px меню скрыто (без .show) и раскрывается колонкой под строкой шапки,
   ≥992px — всегда строка справа от логотипа, «бургер» и быстрая кнопка скрыты */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.7rem;
    height: 2.4rem;
    padding: 0.25rem 0.5rem;
    font-size: 1.25rem;
    line-height: 1;
    color: rgba(255, 255, 255, 0.85);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0.375rem;
}
.nav-toggle:hover,
.nav-toggle:focus { color: #fff; }
.nav-menu {
    display: none;
    flex-basis: 100%; /* отдельная строка под шапкой на мобильных */
}
.nav-menu.show { display: block; }
/* Раскрытое меню — колонкой на всю ширину: крупные тач-цели */
.nav-menu .navbar-nav {
    flex-direction: column;
    align-items: stretch;
}
.nav-menu .navbar-text { padding-bottom: 0.5rem; }
@media (min-width: 992px) {
    .nav-menu {
        display: flex !important; /* на десктопе меню видно всегда */
        flex-basis: auto;
        flex-direction: row;
        align-items: center;
    }
    .nav-menu .navbar-nav {
        flex-direction: row;
        align-items: center;
    }
    .nav-menu .navbar-text { padding-bottom: 0; }
}

/* Секретные значения на staff-страницах (токен API): размыты, показ по кнопке */
.blur-secret {
    filter: blur(5px);
    user-select: none; /* скрытое случайно не копируется — только после «Показать» */
}