/* Мост между разметкой проекта (Bootstrap/Larkon) и дизайн-системой JanaOne.
   Страницы написаны на обычных Bootstrap-классах — card, btn, table, badge,
   form-control, — поэтому переодеваем именно их, а не переписываем 44 шаблона.
   Токены берём из janaone.css. */

body {
  background: var(--canvas);
  font-family: var(--font);
  color: var(--tx);
  font-size: 13.5px;
}

/* ─── Заголовки ────────────────────────────────────────────────────────── */
.page-title-box { padding: 0 0 16px; border: none; }
.page-title { font: 600 17px var(--font) !important; color: var(--tx) !important; margin: 0; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--tx); }
.card-title { font: 600 14px var(--font) !important; color: var(--tx); }

/* Коды, GTIN, номера документов — моноширинным, как в макетах */
code, .mono, pre { font-family: var(--mono); font-size: 12.5px; color: var(--tx); }

/* ─── Карточки ─────────────────────────────────────────────────────────── */
.card {
  background: #fff;
  border: 1px solid var(--bd);
  border-radius: var(--r-card);
  box-shadow: none;
  margin-bottom: 16px;
}
.card-header {
  background: #fff;
  border-bottom: 1px solid var(--bd);
  padding: 14px 20px;
  border-radius: var(--r-card) var(--r-card) 0 0;
}
.card-body { padding: 18px 20px; }

/* ─── Кнопки ───────────────────────────────────────────────────────────── */
.btn {
  border-radius: var(--r-fld);
  font: 600 12.5px var(--font);
  height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
}
.btn-sm { height: 32px; padding: 0 11px; font-size: 12px; }
.btn-lg { height: 44px; padding: 0 24px; font-size: 14px; border-radius: var(--r-btn); }

.btn-primary { background: var(--pri); border-color: var(--pri); box-shadow: var(--sh-pri); }
.btn-primary:hover, .btn-primary:focus { background: var(--pri-hover); border-color: var(--pri-hover); }
.btn-secondary, .btn-light { background: #fff; border-color: var(--bd); color: var(--tx2); font-weight: 500; }
.btn-secondary:hover, .btn-light:hover { background: var(--fill2); color: var(--tx2); }
.btn-success { background: var(--ok); border-color: var(--ok); }
.btn-danger { background: var(--err-strong); border-color: var(--err-strong); }
.btn-warning { background: var(--warn); border-color: var(--warn); color: #fff; }
.btn-info { background: var(--info); border-color: var(--info); color: #fff; }

/* Мягкие кнопки темы — в палитре JanaOne */
.btn-soft-primary { background: var(--pri-soft); color: var(--pri); border-color: var(--pri-border); font-weight: 500; }
.btn-soft-primary:hover { background: var(--pri-soft2); color: var(--pri-hover); }
.btn-soft-secondary { background: #fff; color: var(--tx2); border-color: var(--bd); font-weight: 500; }
.btn-soft-secondary:hover { background: var(--fill2); color: var(--tx); }
.btn-soft-success { background: var(--ok-bg); color: var(--ok); border-color: #A6F4C5; font-weight: 500; }
.btn-soft-danger { background: var(--err-bg); color: var(--err); border-color: #FDA29B; font-weight: 500; }
.btn-soft-warning { background: var(--warn-bg); color: var(--warn); border-color: #FEC84B; font-weight: 500; }
.btn-soft-info { background: var(--info-bg); color: var(--info); border-color: var(--pri-border); font-weight: 500; }

/* ─── Таблицы ──────────────────────────────────────────────────────────── */
.table { color: var(--tx); margin-bottom: 0; border-color: var(--fill2); }
.table > thead > tr > th,
.table > thead.table-light > tr > th {
  background: #fff;
  border-bottom: 1px solid var(--bd);
  padding: 12px 20px;
  font: 600 10px var(--font);
  color: var(--tx-mut);
  text-transform: uppercase;
  letter-spacing: .4px;
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: 13px 20px;
  border-bottom: 1px solid var(--fill2);
  font: 500 13px var(--font);
  vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: none; }
.table-hover > tbody > tr:hover > * { background: var(--fill2); --bs-table-accent-bg: transparent; }
.card-body.p-0 > .table-responsive > .table > thead > tr > th:first-child,
.card-body.p-0 > .table-responsive > .table > tbody > tr > td:first-child { padding-left: 20px; }

/* ─── Бейджи ───────────────────────────────────────────────────────────── */
.badge {
  font: 600 10px var(--font);
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: .2px;
}
.badge.bg-success, .badge.bg-success-subtle { background: var(--ok-bg) !important; color: var(--ok) !important; }
.badge.bg-danger, .badge.bg-danger-subtle { background: var(--err-bg) !important; color: var(--err) !important; }
.badge.bg-warning, .badge.bg-warning-subtle { background: var(--warn-bg) !important; color: var(--warn) !important; }
.badge.bg-info, .badge.bg-info-subtle { background: var(--info-bg) !important; color: var(--info) !important; }
.badge.bg-primary, .badge.bg-primary-subtle { background: var(--pri-soft) !important; color: var(--pri) !important; }
.badge.bg-secondary, .badge.bg-secondary-subtle { background: var(--neutral-bg) !important; color: var(--neutral) !important; }
.badge.bg-dark { background: var(--dark) !important; color: #fff !important; }

/* ─── Формы ────────────────────────────────────────────────────────────── */
.form-label { font: 500 12px var(--font); color: #344054; margin-bottom: 7px; }
.form-control, .form-select {
  min-height: 42px;
  border: 1px solid var(--bd);
  border-radius: var(--r-fld);
  padding: 0 13px;
  font: 500 13px var(--font);
  color: var(--tx);
}
textarea.form-control { height: auto; min-height: 64px; padding-top: 11px; }
.form-control::placeholder { color: var(--tx-mut); font-weight: 400; }
.form-control:focus, .form-select:focus {
  border-color: var(--pri);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.form-control-sm, .form-select-sm { min-height: 34px; font-size: 12.5px; }
.input-group-text { border-color: var(--bd); background: var(--fill3); font-size: 12.5px; }
.form-check-input:checked { background-color: var(--pri); border-color: var(--pri); }

/* ─── Уведомления ──────────────────────────────────────────────────────── */
.alert {
  border-radius: var(--r-fld);
  border: 1px solid transparent;
  font: 500 13px var(--font);
  padding: 12px 16px;
}
.alert-success { background: var(--ok-bg); color: var(--ok); border-color: #A6F4C5; }
.alert-danger, .alert-error { background: var(--err-bg); color: var(--err); border-color: #FDA29B; }
.alert-warning { background: var(--warn-bg); color: var(--warn); border-color: #FEC84B; }
.alert-info { background: var(--info-bg); color: var(--info); border-color: var(--pri-border); }
.alert-secondary, .alert-light { background: var(--fill3); color: var(--tx2); border-color: var(--bd); }

/* ─── Вкладки, пагинация, прочее ───────────────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--bd); gap: 4px; }
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--tx3);
  font: 500 13px var(--font);
  padding: 9px 14px;
  background: none;
}
.nav-tabs .nav-link.active { color: var(--pri); border-bottom-color: var(--pri); background: none; }

.pagination { gap: 4px; }
.page-link {
  border: 1px solid var(--bd);
  border-radius: 8px;
  color: var(--tx2);
  font: 500 13px var(--font);
  min-width: 34px;
  text-align: center;
}
.page-item.active .page-link { background: var(--pri); border-color: var(--pri); color: #fff; }

.progress { background: var(--fill); border-radius: 999px; }
.progress-bar { background: var(--pri); }
.dropdown-menu {
  border: 1px solid var(--bd);
  border-radius: var(--r-fld);
  box-shadow: var(--sh-card);
  font-size: 13px;
}
.modal-content { border: 1px solid var(--bd); border-radius: var(--r-card-lg); }
.modal-header, .modal-footer { border-color: var(--bd); }
.text-muted { color: var(--tx-mut) !important; }
hr { border-color: var(--bd); opacity: 1; }

/* ─── Поверх темы Larkon ───────────────────────────────────────────────── */
/* Тема задаёт свои фоны и цвета кнопок — возвращаем палитру JanaOne */
.btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-info { color: #fff !important; }
.btn-primary:hover { color: #fff !important; }
.content-page, .page-content, .wrapper { background: transparent; padding: 0; }
.card { box-shadow: none !important; }

/* Таблицы шире экрана прокручиваются внутри карточки, а не рвут вёрстку */
.table-responsive { overflow-x: auto; }
/* Колонкам Bootstrap оставляем их отступы — иначе соседние карточки слипаются.
   Отрицательные margin строки компенсируем полем самой области контента. */
.jo-content { padding: 18px 24px; }
.jo-content > .row { margin-left: -12px; margin-right: -12px; }

/* Графики на обзоре: Chart.js растягивает canvas по контейнеру —
   ограничиваем высоту, иначе кольцевая диаграмма занимает пол-экрана */
#codesChart { max-height: 260px !important; }
#statusChart { max-height: 240px !important; }

/* Информационные карточки темы (bg-soft-*) — в палитре JanaOne */
.card.bg-soft-primary { background: var(--pri-soft3) !important; border-color: var(--pri-border); }
.card.bg-soft-info { background: var(--info-bg) !important; border-color: var(--pri-border); }
.card.bg-soft-warning { background: var(--warn-bg) !important; border-color: #FEC84B; }
.card.bg-soft-success { background: var(--ok-bg) !important; border-color: #A6F4C5; }
.card.bg-soft-danger { background: var(--err-bg) !important; border-color: #FDA29B; }

/* Скрытые уведомления не должны занимать место: тема задаёт им display,
   из-за чего под полем ввода оставался серый прямоугольник */
.alert[style*="display:none"], .alert[style*="display: none"] { display: none !important; }

/* Выпадающий список стран (choices.js). Скрытие в самой библиотеке сделано
   через visibility, а тема Larkon переопределяет фон и рамку с !important —
   в итоге под полем оставался пустой серый прямоугольник. Прячем закрытый
   список полностью. */
.choices__list--dropdown:not(.is-active),
.choices__list[aria-expanded]:not(.is-active) {
  display: none !important;
  visibility: hidden !important;
}
.choices__list--dropdown.is-active, .choices__list[aria-expanded].is-active {
  display: block !important;
  visibility: visible !important;
}
.choices { margin-bottom: 0; }
.choices__inner {
  min-height: 42px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  border: 1px solid var(--bd);
  border-radius: var(--r-fld);
  background: #fff;
  font: 500 13px var(--font);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted { background: var(--pri-soft); }

/* Меню пользователя в рельсе: раскрывается вправо и вверх, чтобы не уезжать
   за левый край экрана и не упираться в низ окна */
.jo-rail-menu {
  min-width: 240px;
  --bs-dropdown-spacer: 10px;
}
.jo-rail .dropend .dropdown-menu {
  left: 100% !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  transform: none !important;
  margin-left: 10px;
}

/* Полноэкранные инструменты (редактор этикеток) занимают всю область */
.jo-content.p-0 { padding: 0 !important; overflow: hidden; }