/* Общие стили korobka. Bootstrap 5.3 — основа, здесь только дополнения. */

:root {
  --kb-sidebar-w: 248px;
  --kb-sidebar-w-min: 64px;
  --kb-sidebar-bg: #1b2430;
  --kb-sidebar-fg: #cfd6e4;
  --kb-sidebar-dim: #8b97ab;
  --kb-topbar-h: 48px;
}

body { background: #f6f7f9; }

/* ============================ Каркас: боковая панель + содержимое ============================ */

.kb-sidebar {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 1040;
  width: var(--kb-sidebar-w);
  display: flex; flex-direction: column;
  background: var(--kb-sidebar-bg); color: var(--kb-sidebar-fg);
  transition: width .15s ease, transform .2s ease;
}
.kb-content { min-width: 0; }
body.kb-app .kb-content { margin-left: var(--kb-sidebar-w); transition: margin-left .15s ease; }

.kb-sidebar-head {
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .75rem; min-height: var(--kb-topbar-h);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.kb-brand {
  display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; min-width: 0;
  color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; overflow: hidden;
}
.kb-brand .bi { font-size: 1.3rem; flex: 0 0 auto; }
.kb-collapse-btn, .kb-icon-btn {
  background: none; border: 0; border-radius: .35rem; line-height: 1;
  padding: .3rem .45rem; font-size: 1.1rem;
}
.kb-collapse-btn { color: var(--kb-sidebar-dim); }
.kb-collapse-btn:hover { color: #fff; background: rgba(255, 255, 255, .1); }

.kb-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: .3rem 0 .5rem; }
.kb-group-title {
  padding: .6rem .9rem .2rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--kb-sidebar-dim);
}
.kb-nav-list { list-style: none; margin: 0; padding: 0; }
.kb-nav-link {
  display: flex; align-items: center; gap: .65rem; white-space: nowrap;
  padding: .35rem .9rem; color: var(--kb-sidebar-fg); text-decoration: none;
  border-left: 3px solid transparent;
}
.kb-nav-link .bi { font-size: 1.05rem; width: 1.25rem; flex: 0 0 auto; text-align: center; }
.kb-nav-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.kb-nav-link.active { background: rgba(94, 160, 255, .16); border-left-color: #5ea0ff; color: #fff; font-weight: 500; }
.kb-nav-link:focus-visible, .kb-collapse-btn:focus-visible, .kb-user:focus-visible {
  outline: 2px solid #5ea0ff; outline-offset: -2px;
}

/* Счётчик у пункта панели (открытые сигналы). В свёрнутой панели текст скрыт,
   поэтому число сжимается в точку на иконке — иначе счётчик исчезал бы вместе с названием. */
.kb-nav-link { position: relative; }
.kb-badge {
  margin-left: auto; flex: 0 0 auto; min-width: 1.35rem; text-align: center;
  font-size: .7rem; font-weight: 600; line-height: 1.25rem;
  background: #dc3545; color: #fff; border-radius: 999px; padding: 0 .35rem;
}
.kb-icon-btn.kb-on { color: #cc8a00; }

.kb-sidebar-foot { border-top: 1px solid rgba(255, 255, 255, .08); padding: .5rem; }
.kb-user {
  display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
  background: none; border: 0; border-radius: .4rem; padding: .35rem .5rem; color: var(--kb-sidebar-fg);
}
.kb-user:hover { background: rgba(255, 255, 255, .08); }
.kb-user .bi { font-size: 1.35rem; flex: 0 0 auto; }
.kb-user .kb-nav-text { display: flex; flex-direction: column; min-width: 0; }
.kb-user-name, .kb-user-role { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-user-name { font-size: .9rem; color: #fff; }
.kb-user-role { font-size: .72rem; color: var(--kb-sidebar-dim); }
.kb-sidebar-foot .dropdown-menu { width: calc(100% - 1rem); }

/* Шапка над содержимым */
.kb-topbar {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: .5rem;
  min-height: var(--kb-topbar-h); padding: .25rem .75rem;
  background: #fff; border-bottom: 1px solid #e3e6ea;
}
.kb-topbar-brand { color: #212529; font-weight: 600; text-decoration: none; }
.kb-topbar-section { color: #6c757d; font-size: .9rem; }
.kb-topbar-tools { margin-left: auto; display: flex; align-items: center; gap: .1rem; }
.kb-icon-btn { color: #6c757d; }
.kb-icon-btn:hover:not(:disabled) { color: #212529; background: #f1f3f5; }
.kb-icon-btn:disabled { opacity: .45; }

.kb-backdrop { position: fixed; inset: 0; z-index: 1035; background: rgba(0, 0, 0, .45); }
.kb-backdrop[hidden] { display: none; }

/* Свёрнутая панель — только на большом экране (на телефоне она выезжает целиком) */
@media (min-width: 992px) {
  html.kb-collapsed .kb-sidebar { width: var(--kb-sidebar-w-min); }
  html.kb-collapsed body.kb-app .kb-content { margin-left: var(--kb-sidebar-w-min); }
  html.kb-collapsed .kb-nav-text { display: none; }
  html.kb-collapsed .kb-sidebar-head { flex-direction: column; gap: .15rem; padding: .5rem .25rem; }
  html.kb-collapsed .kb-brand { flex: 0 0 auto; justify-content: center; }
  html.kb-collapsed .kb-collapse-btn .bi { display: inline-block; transform: rotate(180deg); }
  html.kb-collapsed .kb-group-title {
    margin: .45rem .8rem; padding: 0; border-top: 1px solid rgba(255, 255, 255, .12);
  }
  html.kb-collapsed .kb-nav-link { justify-content: center; padding: .5rem .4rem; }
  html.kb-collapsed .kb-user { justify-content: center; }
  html.kb-collapsed .kb-badge {
    position: absolute; top: .3rem; right: .3rem; margin: 0; padding: 0;
    min-width: .5rem; width: .5rem; height: .5rem; overflow: hidden;
    color: transparent; line-height: .5rem;
  }
  html.kb-collapsed .kb-sidebar-foot .dropdown-menu { width: auto; }
}

/* Телефон и узкий экран: панель уезжает за край, открывается гамбургером поверх содержимого */
@media (max-width: 991.98px) {
  .kb-sidebar { width: min(280px, 85vw); transform: translateX(-100%); box-shadow: 0 0 2rem rgba(0, 0, 0, .35); }
  html.kb-nav-open .kb-sidebar { transform: translateX(0); }
  html.kb-nav-open, html.kb-nav-open body { overflow: hidden; }
  body.kb-app .kb-content { margin-left: 0; }
  .kb-collapse-btn { display: none; }
}

/* Узкие формы (вход, смена пароля) — по центру, на телефоне во всю ширину */
.login-card { max-width: 380px; }
.narrow-card { max-width: 520px; }

/* На печать страницы идут без панели и шапки */
@media print {
  .kb-sidebar, .kb-topbar, .kb-backdrop { display: none !important; }
  body.kb-app .kb-content { margin-left: 0 !important; }
}

/* ============================ Единый вид страниц ============================ */

/* Шапка страницы: заголовок слева, кнопки справа, на телефоне переносится */
.page-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: 1rem;
}

/* Плитка с числом на главной — ссылка в раздел */
.stat-card {
  display: flex; flex-direction: column; gap: .1rem; height: 100%;
  padding: .8rem .9rem; background: #fff; border: 1px solid #e3e6ea; border-radius: .5rem;
  color: inherit; text-decoration: none; transition: box-shadow .15s ease, border-color .15s ease;
}
.stat-card:hover { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .07); border-color: #cfd6e0; color: inherit; }
.stat-value { font-size: clamp(1.15rem, 4.6vw, 1.6rem); font-weight: 600; line-height: 1.2; }
.stat-label { font-size: .78rem; color: #6c757d; }

/* Карточка-ссылка на раздел (обзор настройки цеха) */
.section-card { transition: box-shadow .15s ease, border-color .15s ease; }
.section-card:hover { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .07); border-color: #cfd6e0; }

/* Шапка карточки с ссылкой «смотреть всё» */
.card-header-link { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.progress-thin { height: .4rem; }
.min-w-0 { min-width: 0; }

/* Карточки и таблицы не выпирают за край на телефоне */
.card { overflow-wrap: anywhere; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* Пустые состояния: «что это и с чего начать» */
.empty-state {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.25rem; border: 1px dashed #ced4da; border-radius: .5rem; background: #fff;
}
.empty-state > .bi { font-size: 1.75rem; color: #6c757d; }

/* Настройки */
.setting-input { max-width: 360px; }
.weekday-boxes > div { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.weekday-boxes label { display: inline-flex; align-items: center; gap: .35rem; }
.weekday-boxes input[type=checkbox] { width: 1.1em; height: 1.1em; }

/* Длинные слова и номера не раздвигают страницу на телефоне */
main { overflow-wrap: anywhere; }

/* Формы средней ширины (клиент, позиция) */
.narrow-form { max-width: 860px; }

/* Статусы заказов — цвет из справочника статусов */
.status-badge { background: var(--status-color, #6c757d); color: #fff; font-weight: 500; }
.item-card .price { white-space: nowrap; }
.events-list .event-time { white-space: nowrap; }

/* Туры и подсказки (М8.3) */
/* Значки «?» видны только в режиме подсказок (М8.3). Разметка на странице есть всегда, и
   показывает её класс на body — поэтому значки появляются сразу по нажатию «?», без
   перезагрузки (мелочь 6 QA слияния панели). Раньше правило было написано для `.hint-icon` —
   класса, которого не было ни на одном элементе, то есть не прятало и не показывало ничего.
   Значок не должен расталкивать подписи полей и съезжать от базовой линии. */
.hint-mark { display: none; line-height: 1; vertical-align: baseline; }
body.hints-on .hint-mark { display: inline-block; }
.hint-mark:focus { box-shadow: none; }
/* На телефоне (мастер и цех смотрят с 375 px) окно тура у Driver.js по умолчанию 300 px
   и прижимается к краю — расширяем до ширины экрана с отступами и даём читаемый шрифт. */
@media (max-width: 575.98px) {
  .driver-popover.korobka-tour { max-width: calc(100vw - 1.5rem); min-width: 0; }
  .driver-popover.korobka-tour .driver-popover-title { font-size: 1.05rem; }
  .driver-popover.korobka-tour .driver-popover-description { font-size: 0.95rem; }
  .driver-popover.korobka-tour .driver-popover-footer-btn { padding: 6px 12px; font-size: 0.9rem; }
}

/* Колокольчик уведомлений (М8.1): список не должен расползаться по всей шапке и обрезаться на телефоне */
.notifications-menu { width: 22rem; max-width: 92vw; max-height: 70vh; overflow-y: auto; }
.notifications-menu .event-time { white-space: nowrap; }
#item-panel:empty { display: none; }

.item-just-saved { animation: just-saved 2.5s ease-out; }
@keyframes just-saved { from { background: #fff3cd; } to { background: transparent; } }

/* Настройка цеха (М2.1) */
.setup-nav .nav-link { white-space: nowrap; }
.stage-dot { display: inline-block; width: .75rem; height: .75rem; border-radius: 50%; background: var(--stage-color, #6c757d); flex: 0 0 auto; }
.drag-handle { cursor: grab; touch-action: none; }
.order-saved { outline: 2px solid #19875455; transition: outline .3s; }
.route-chain { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.route-chip { border-left: 4px solid var(--stage-color, #6c757d); background: #fff; border-radius: .25rem; padding: .05rem .4rem; border-top: 1px solid #dee2e6; border-right: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6; }
.route-chip.conditional { border-style: dashed; border-left-style: solid; }
.cap-table td, .cap-table th { white-space: nowrap; text-align: center; font-size: .8rem; }
.cap-table th:first-child, .cap-table td:first-child { text-align: left; position: sticky; left: 0; background: #fff; z-index: 1; }
.cap-table .off { background: #f1f3f5; color: #adb5bd; }
.cap-table .changed { background: #fff3cd; }
.cap-table .zero { background: #f8d7da; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.cal-head { text-align: center; font-size: .75rem; color: #6c757d; }
.cal-day { display: block; min-height: 3.6rem; padding: .2rem .3rem; border-radius: .25rem; background: #fff; border: 1px solid #dee2e6; font-size: .75rem; color: inherit; text-decoration: none; }
.cal-day.off { background: #f1f3f5; color: #868e96; }
.cal-day.holiday { background: #f8d7da; }
.cal-day.transfer { background: #fff3cd; }
.cal-day.extra-work { background: #d1e7dd; }
.cal-day.other-month { opacity: .4; }
.cal-day.today { border: 2px solid #0d6efd; }
.cal-day.selected { outline: 2px solid #fd7e14; }
.cal-day .num { font-weight: 600; font-size: .85rem; }
.cal-day .note { display: block; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 575.98px) { .cal-day .note { display: none; } .cal-day { min-height: 2.6rem; } }
.cap-table td[data-bs-toggle="popover"] { cursor: pointer; }
.stage-pinned .drag-handle { visibility: hidden; }
/* Сегодня / Мои задания (М2.4) */
[x-cloak] { display: none !important; }
.task-done { background: #f1f8f4; }
.task-card .btn-lg { padding-top: .75rem; padding-bottom: .75rem; }

/* Склад (М5.1) */
.stock-low { border-left: 4px solid #dc3545; }
.stock-low .stock-qty { color: #dc3545; }
.stock-low-dot { display: inline-block; width: .6rem; height: .6rem; border-left: 4px solid #dc3545; }
/* Доска загрузки (М2.5) */
.board-table { font-size: .8rem; }
.board-table th, .board-table td { text-align: center; white-space: nowrap; vertical-align: middle; min-width: 4.6rem; }
.board-table .stage-col { text-align: left; position: sticky; left: 0; background: #fff; z-index: 2; min-width: 9rem; }
.board-table thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.board-table .is-today { box-shadow: inset 0 0 0 2px #0d6efd; }
.board-table th.is-past, .board-table td.is-past { color: #868e96; }
.board-table .cap-total { font-size: .7rem; color: #868e96; }
.board-table td.cell[role=button] { cursor: pointer; }
.cell-ok { background: #d1e7dd; } .cell-warn { background: #fff3cd; } .cell-reserve { background: #ffe5b4; }
.cell-over { background: #f8d7da; } .cell-zero, .cell-off { background: #f1f3f5; } .cell-past { background: #f8f9fa; }
.board-table tr.is-bottleneck .stage-col { box-shadow: inset 4px 0 0 #fd7e14; }
.board-table tr.is-milestone td { background: #fafafa; color: #6c757d; }
.board-target { border: 2px dashed #adb5bd; border-radius: .375rem; padding: .5rem .75rem; min-width: 7rem; min-height: 2.5rem; font-size: .8rem; }
.board-target .list-group-item { display: none; }
.move-form input[type=date] { width: 9.5rem; }
.move-form input[type=number] { width: 6.5rem; flex: 1 1 5rem; }
/* Вид «как на доске» (М2.6) */
.wall-table { font-size: .82rem; }
.wall-table th, .wall-table td { text-align: center; vertical-align: middle; white-space: nowrap; }
.wall-table .order-col { text-align: left; position: sticky; left: 0; background: #fff; z-index: 2; }
.wall-table .due-col { min-width: 4rem; }
.wall-table thead th { position: sticky; top: 0; background: #fff; z-index: 1; }
.wall-cell { min-width: 3.8rem; }
.wall-input { width: 3.4rem; border: 1px solid transparent; background: transparent; text-align: center;
  font: inherit; border-radius: .25rem; padding: .1rem; }
.wall-input:hover { border-color: #ced4da; }
.wall-input:focus { border-color: #0d6efd; background: #fff; outline: none; }
.wall-done { background: #d1e7dd; }
.wall-done .wall-input { color: #0f5132; font-weight: 600; }
.wall-partial { background: #fff3cd; }
.wall-skip { color: #adb5bd; }
.wall-pinned { box-shadow: inset 0 -2px 0 #6c757d; }
.wall-absent { background: #f8f9fa; }
.wall-table tr.risk-late .order-col { box-shadow: inset 4px 0 0 #dc3545; }
.wall-table tr.risk-warning .order-col { box-shadow: inset 4px 0 0 #ffc107; }
.wall-table tr.risk-ok .order-col { box-shadow: inset 4px 0 0 #198754; }
.wall-table tr.risk-unplanned .order-col { box-shadow: inset 4px 0 0 #adb5bd; }
.wall-items .order-col, .wall-items td { background: #fcfcfc; }
.wall-items .order-col { padding-left: 1.6rem; }
.wall-table .order-col { width: 12rem; max-width: 12rem; white-space: normal; }
.wall-toggle[aria-expanded=true] .bi-chevron-right { transform: rotate(90deg); display: inline-block; }

/* Импорт RemOnline (М6.1) */
.recon-table td, .recon-table th { font-size: .8rem; }
.recon-table th:first-child, .recon-table td:first-child { position: sticky; left: 0; background: #fff; }