/* JanaOne — дизайн-система (App Shell + компоненты).
   Источник: design_handoff_janaone (high-fidelity). Токены — из README «Design Tokens».
   Классы с префиксом .jo-* переиспользуются во всех шаблонах. */

:root {
  /* Основные */
  --pri: #2563EB;
  --pri-hover: #1D4FD7;
  --pri-soft: #EEF3FF;
  --pri-soft2: #EFF6FF;
  --pri-soft3: #F6FAFF;
  --pri-border: #C7D7FE;

  /* Тёмный рельс/акценты */
  --dark: #14161A;
  --panel: #212530;
  --rail-ico: #7C8698;

  /* Текст */
  --tx: #14161A;
  --tx2: #475467;
  --tx3: #667085;
  --tx-mut: #98A2B3;
  --tx-dash: #B4BAC4;

  /* Границы/заливки/холст */
  --bd: #E7E9EE;
  --fill: #F2F4F7;
  --fill2: #F6F7F9;
  --fill3: #F9FAFB;
  --fill4: #FAFBFC;
  --canvas: #EEF0F3;

  /* Статусы */
  --ok: #12805C;     --ok-bg: #ECFDF3;
  --info: #0E63C4;   --info-bg: #EFF6FF;
  --warn: #B54708;   --warn-bg: #FEF6EE;
  --err: #B42318;    --err-bg: #FEF3F2;
  --err-strong: #F04438;
  --violet: #7C3AED; --violet-bg: #F3EEFF;
  --neutral: #667085; --neutral-bg: #F2F4F7;

  /* Радиусы/тени */
  --r-fld: 10px;
  --r-btn: 11px;
  --r-card: 14px;
  --r-card-lg: 16px;
  --sh-card: 0 12px 40px -12px rgba(16,24,40,.18);
  --sh-soft: 0 4px 18px -8px rgba(16,24,40,.12);
  --sh-pri: 0 6px 16px -4px rgba(37,99,235,.5);

  --font: 'Golos Text', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  font-family: var(--font);
  color: var(--tx);
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--mono); }
a { color: var(--pri); text-decoration: none; }
a:hover { color: var(--pri-hover); }

/* ======================= APP SHELL ======================= */
.jo-app { display: flex; height: 100vh; overflow: hidden; }

/* Тёмный рельс модулей */
.jo-rail {
  width: 74px; flex: none; background: var(--dark);
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 0; gap: 6px;
}
.jo-logo {
  width: 38px; height: 38px; border-radius: 11px; background: var(--pri);
  display: flex; align-items: center; justify-content: center;
  font: 700 17px var(--font); color: #fff; margin-bottom: 14px; text-decoration: none;
}
.jo-rail-item {
  width: 48px; min-height: 44px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--rail-ico); text-decoration: none; padding: 4px 0;
}
.jo-rail-item i { font-size: 18px; line-height: 1; }
.jo-rail-item span { font: 500 8px var(--font); }
.jo-rail-item:hover { color: #C7CDD8; }
.jo-rail-item.active { background: var(--pri); color: #fff; }
.jo-rail-item.active span { font-weight: 600; }
.jo-rail-ava {
  margin-top: auto; width: 34px; height: 34px; border-radius: 50%;
  background: var(--pri-soft); color: var(--pri);
  display: flex; align-items: center; justify-content: center;
  font: 600 12px var(--font); border: none; cursor: pointer;
}

/* Светлая колонка подпунктов */
.jo-subnav {
  width: 214px; flex: none; background: #fff; border-right: 1px solid var(--bd);
  padding: 20px 14px; overflow-y: auto;
}
.jo-subnav-title {
  font: 600 11px var(--font); color: var(--tx-mut);
  text-transform: uppercase; letter-spacing: .5px; padding: 0 10px; margin-bottom: 12px;
}
.jo-subnav-title + .jo-subnav-title,
.jo-subnav-item + .jo-subnav-title { margin-top: 20px; }
.jo-subnav-item {
  display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px;
  font: 500 13px var(--font); color: var(--tx2); border-radius: 9px; margin-bottom: 2px;
  text-decoration: none;
}
.jo-subnav-item:hover { background: var(--fill2); color: var(--tx2); }
.jo-subnav-item.active { background: var(--pri-soft); color: var(--pri); font-weight: 600; }
.jo-subnav-badge {
  margin-left: auto; background: var(--err-strong); color: #fff;
  font: 600 10px var(--font); padding: 1px 7px; border-radius: 999px;
}

/* Основная колонка */
.jo-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Топбар */
.jo-topbar {
  height: 60px; flex: none; background: #fff; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 12px; padding: 0 24px;
}
.jo-topbar-title { font: 600 17px var(--font); color: var(--tx); }
.jo-topbar-back { font: 500 13px var(--font); color: var(--tx-mut); }
.jo-topbar-back:hover { color: var(--tx2); }
.jo-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* Селектор точки в топбаре */
.jo-store {
  display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px;
  border: 1px solid var(--bd); border-radius: 9px;
  font: 500 12.5px var(--font); color: #344054; background: #fff; cursor: pointer;
}
.jo-store i { color: var(--tx3); }

/* Область контента */
.jo-content { flex: 1; overflow: auto; padding: 18px 24px; }
.jo-content.center { display: flex; justify-content: center; }
.jo-narrow { width: 100%; max-width: 760px; }
.jo-narrow-lg { width: 100%; max-width: 880px; }

/* Вторичная панель (поиск/чипы) под топбаром */
.jo-subbar {
  min-height: 54px; flex: none; background: #fff; border-bottom: 1px solid var(--bd);
  display: flex; align-items: center; gap: 10px; padding: 8px 24px;
}

/* ======================= КОМПОНЕНТЫ ======================= */

/* Карточка */
.jo-card { background: #fff; border: 1px solid var(--bd); border-radius: var(--r-card); }
.jo-card.pad { padding: 22px 24px; }
.jo-card-title { font: 600 14px var(--font); color: var(--tx); }

/* Таблица-список (grid). grid-template-columns задаётся инлайн на .jo-thead и .jo-row. */
.jo-table { display: flex; flex-direction: column; overflow: hidden; }
.jo-thead, .jo-table .jo-row { grid-template-columns: var(--cols, 1fr); }
.jo-thead {
  display: grid; padding: 12px 20px; border-bottom: 1px solid var(--bd);
  font: 600 10px var(--font); color: var(--tx-mut);
  text-transform: uppercase; letter-spacing: .4px;
}
.jo-rows { flex: 1; }
.jo-row {
  display: grid; padding: 13px 20px; align-items: center;
  border-bottom: 1px solid var(--fill2);
  font: 500 13px var(--font); color: var(--tx);
}
.jo-row:last-child { border-bottom: none; }
/* Подсветка строки под курсором — чтобы глаз не терял её в широкой таблице. */
.jo-row:hover { background: var(--fill2); }
.jo-row.warn { background: #FFFBFA; }
.jo-row .num, .jo-thead .num { text-align: right; }
.jo-foot {
  padding: 12px 20px; border-top: 1px solid var(--bd);
  font: 500 12px var(--font); color: var(--tx-mut);
}
.jo-edit { text-align: right; color: var(--tx-mut); }
.jo-edit:hover { color: var(--pri); }
/* Контрагент в списках актов ПП: длинные названия режем, полное — в title. */
.jo-party { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; }

/* Статус-бейджи */
.jo-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font: 600 10px var(--font); padding: 3px 9px; border-radius: 6px; white-space: nowrap;
}
.jo-badge.green  { color: var(--ok);      background: var(--ok-bg); }
.jo-badge.blue   { color: var(--info);    background: var(--info-bg); }
.jo-badge.orange { color: var(--warn);    background: var(--warn-bg); }
.jo-badge.red    { color: var(--err);     background: var(--err-bg); }
.jo-badge.gray   { color: var(--neutral); background: var(--neutral-bg); }
.jo-badge.violet { color: var(--violet);  background: var(--violet-bg); }
.jo-badge.mark   { color: var(--pri);     background: var(--pri-soft); font-size: 8.5px; padding: 2px 6px; }

/* Поля формы */
.lbl { display: block; font: 500 12px var(--font); color: #344054; margin-bottom: 7px; }
.lbl.accent { color: var(--pri); font-weight: 600; }
.fld {
  width: 100%; min-height: 42px; height: 42px; border: 1px solid var(--bd); border-radius: var(--r-fld);
  display: flex; align-items: center; padding: 0 13px;
  font: 500 13px var(--font); color: var(--tx); background: #fff;
}
select.fld, input.fld { -webkit-appearance: none; appearance: none; }
textarea.fld { height: auto; min-height: 64px; align-items: flex-start; padding-top: 11px; resize: vertical; }
.fld::placeholder { color: var(--tx-mut); font-weight: 400; }
.fld.ph { color: var(--tx-mut); font-weight: 400; }
.fld.mono { font-family: var(--mono); font-size: 12.5px; }
.fld:focus, .fld:focus-visible { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.fld.readonly, .fld[readonly] { background: var(--fill3); color: var(--tx2); }
.fld.accent { border-color: var(--pri-border); background: var(--pri-soft3); }
select.fld { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2398A2B3' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 34px; }
.fld-hint { font: 400 11px/1.5 var(--font); color: var(--tx-mut); margin-top: 6px; }

/* Плашка readonly-поля (внутр. штрихкод) */
.jo-readonly-box {
  background: var(--fill3); border: 1px solid var(--bd); border-radius: 11px; padding: 13px 15px;
}
.jo-readonly-box .val { font: 600 15px var(--mono); color: var(--tx); }

/* Кнопки */
.jo-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 15px; border-radius: var(--r-fld);
  font: 600 12.5px var(--font); cursor: pointer; border: 1px solid transparent;
  text-decoration: none; white-space: nowrap; background: none;
}
.jo-btn.lg { height: 44px; padding: 0 24px; border-radius: var(--r-btn); font-size: 14px; }
.jo-btn-primary { background: var(--pri); color: #fff; box-shadow: var(--sh-pri); }
.jo-btn-primary:hover { background: var(--pri-hover); color: #fff; }
.jo-btn-secondary { border-color: var(--bd); color: var(--tx2); background: #fff; font-weight: 500; }
.jo-btn-secondary:hover { background: var(--fill2); color: var(--tx2); }
.jo-btn-primary-soft { border-color: var(--pri-border); color: var(--pri); background: #fff; font-weight: 500; }
.jo-btn-primary-soft:hover { background: var(--pri-soft); color: var(--pri); }
.jo-btn-success { background: var(--ok); color: #fff; }
.jo-btn-danger-outline { border-color: #FDA29B; color: var(--err); background: #fff; }
.jo-btn-danger-outline:hover { background: var(--err-bg); color: var(--err); }
.jo-btn:disabled, .jo-btn.disabled { opacity: .55; cursor: default; box-shadow: none; }

/* Outlined-переключатели: замена коротких <select> группой кнопок (JS: base.html) */
.jo-toggle-group { display: flex; flex-wrap: wrap; gap: 8px; }
.jo-toggle-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 42px; padding: 0 16px; border-radius: var(--r-fld);
  border: 1px solid var(--bd); background: #fff; color: var(--tx2);
  font: 500 13px var(--font); cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.jo-toggle-btn:hover { background: var(--fill2); }
.jo-toggle-btn.active { border-color: var(--pri-border); background: var(--pri-soft); color: var(--pri); font-weight: 600; }
.jo-toggle-btn:focus-visible { outline: none; border-color: var(--pri); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.jo-toggle-btn:disabled { opacity: .55; cursor: default; }

/* Поиск */
.jo-search {
  display: flex; align-items: center; gap: 9px; flex: 1; max-width: 400px; height: 38px;
  background: var(--fill2); border: 1px solid var(--bd); border-radius: var(--r-fld); padding: 0 13px;
}
.jo-search i { color: var(--tx-mut); }
.jo-search input {
  border: none; background: none; outline: none; flex: 1;
  font: 400 13px var(--font); color: var(--tx);
}
.jo-search input::placeholder { color: var(--tx-mut); }

/* Чип-фильтры */
.jo-chip {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
  font: 500 12.5px var(--font); color: var(--tx2); background: #fff; border: 1px solid var(--bd);
  text-decoration: none; cursor: pointer;
}
.jo-chip.active { background: var(--pri); color: #fff; border-color: var(--pri); }

/* Тумблер */
.jo-switch { position: relative; display: inline-block; width: 36px; height: 20px; flex: none; }
.jo-switch input { opacity: 0; width: 0; height: 0; }
.jo-switch .track {
  position: absolute; inset: 0; background: #C7D0DD; border-radius: 999px; transition: background .15s;
}
.jo-switch .track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 50%; transition: transform .15s;
}
.jo-switch input:checked + .track { background: var(--pri); }
.jo-switch input:checked + .track::after { transform: translateX(16px); }

/* Чекбокс-плитка */
.jo-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid #C7D0DD;
  display: inline-flex; align-items: center; justify-content: center; color: transparent; }
.jo-check.on { background: var(--pri); border-color: var(--pri); color: #fff; }

/* Утилиты */
.jo-hint { font: 400 13px/1.5 var(--font); color: var(--tx-mut); }
.jo-note { font: 400 11.5px var(--font); color: var(--tx-dash); }
.t-mut { color: var(--tx-mut); }
.t-2 { color: var(--tx2); }
.t-3 { color: var(--tx3); }
.t-err { color: var(--err); }
.t-ok { color: var(--ok); }
.t-pri { color: var(--pri); }
.t-dash { color: var(--tx-dash); }
.jo-stack { display: flex; flex-direction: column; gap: 16px; }
.jo-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.jo-form-grid .col-full { grid-column: 1 / -1; }
.jo-dashed {
  border: 1.5px dashed #C7D0DD; border-radius: 12px; padding: 30px; background: #FBFCFE;
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}

/* Django-формы: приводим виджеты Bootstrap к виду .fld без правки forms.py.
   Оборачивать форму в .jo-form. */
.jo-form .form-label, .jo-form > label, .jo-form label:not(.form-check-label) {
  font: 500 12px var(--font); color: #344054; margin-bottom: 7px;
}
.jo-form .form-control, .jo-form .form-select, .jo-form textarea.form-control {
  min-height: 42px; border: 1px solid var(--bd); border-radius: var(--r-fld);
  padding: 8px 13px; font: 500 13px var(--font); color: var(--tx); background: #fff;
}
.jo-form textarea.form-control { min-height: 64px; }
.jo-form .form-control:focus, .jo-form .form-select:focus {
  border-color: var(--pri); box-shadow: 0 0 0 3px rgba(37,99,235,.12); outline: none;
}
.jo-form .form-control[readonly] { background: var(--fill3); color: var(--tx2); }
.jo-form .form-text { font: 400 11px/1.5 var(--font); color: var(--tx-mut); margin-top: 6px; }
.jo-form .form-check-input { width: 18px; height: 18px; border: 1.5px solid #C7D0DD; }
.jo-form .form-check-input:checked { background-color: var(--pri); border-color: var(--pri); }
.jo-form-actions { display: flex; align-items: center; gap: 12px; margin-top: 20px; }

/* Данные ИС МПТ НК (карточка «ключ-значение») */
.jo-kv { display: flex; padding: 11px 18px; border-bottom: 1px solid var(--fill2); }
.jo-kv:last-child { border-bottom: none; }
.jo-kv .k { width: 45%; font: 400 12.5px var(--font); color: var(--tx-mut); }
.jo-kv .v { font: 500 12.5px var(--font); color: var(--tx); }

/* ============ СЛОЙ СОВМЕСТИМОСТИ (Bootstrap → дизайн-язык) ============
   Поднимает ещё не переписанные экраны до дизайн-системы. Ограничен .jo-content,
   чтобы не трогать переписанный Склад (.jo-*) и модалки кассы (они вне .jo-content). */
.jo-content h1, .jo-content .h3 { font: 600 20px var(--font); color: var(--tx); }
.jo-content h2, .jo-content .h4 { font: 600 15px var(--font); color: var(--tx); }
.jo-content h5, .jo-content .h5 { font: 600 14px var(--font); color: var(--tx); }
.jo-content .text-muted { color: var(--tx3) !important; }
.jo-content .font-monospace { font-family: var(--mono) !important; }

.jo-content .card {
  background: #fff; border: 1px solid var(--bd) !important; border-radius: var(--r-card);
  box-shadow: none;
}
.jo-content .card.shadow-sm { box-shadow: var(--sh-soft); }
.jo-content .card-body { padding: 20px 22px; }
.jo-content .card-header {
  background: #fff; border-bottom: 1px solid var(--fill); padding: 15px 18px;
  font: 600 14px var(--font); color: var(--tx);
}

.jo-content .table { margin: 0; color: var(--tx); }
.jo-content .table > :not(caption) > * > * { padding: 13px 18px; border-color: var(--fill2); }
.jo-content .table > thead, .jo-content .table-light > th, .jo-content .table-light {
  --bs-table-bg: #fff;
}
.jo-content .table thead th {
  font: 600 10px var(--font); color: var(--tx-mut); text-transform: uppercase;
  letter-spacing: .4px; border-bottom: 1px solid var(--bd); background: #fff;
}
.jo-content .table tbody td { font: 500 13px var(--font); vertical-align: middle; }
.jo-content .table-hover > tbody > tr:hover > * { background: var(--fill4); }

.jo-content .btn {
  border-radius: var(--r-fld); font: 600 12.5px var(--font);
  padding: 8px 15px; display: inline-flex; align-items: center; gap: 6px;
}
.jo-content .btn-primary { background: var(--pri); border-color: var(--pri); box-shadow: var(--sh-pri); }
.jo-content .btn-primary:hover { background: var(--pri-hover); border-color: var(--pri-hover); }
.jo-content .btn-outline-secondary { border-color: var(--bd); color: var(--tx2); font-weight: 500; }
.jo-content .btn-outline-secondary:hover { background: var(--fill2); color: var(--tx2); border-color: var(--bd); }
.jo-content .btn-outline-primary { border-color: var(--pri-border); color: var(--pri); font-weight: 500; }
.jo-content .btn-outline-primary:hover { background: var(--pri-soft); color: var(--pri); }
.jo-content .btn-success { background: var(--ok); border-color: var(--ok); }
.jo-content .btn-danger { background: var(--err-strong); border-color: var(--err-strong); }
.jo-content .btn-link { color: var(--tx3); font-weight: 500; text-decoration: none; }
.jo-content .btn-link:hover { color: var(--pri); }
.jo-content .btn-sm { padding: 5px 10px; font-size: 12px; }

.jo-content .badge {
  font: 600 10px var(--font); padding: 3px 9px; border-radius: 6px; letter-spacing: 0;
}
.jo-content .badge.bg-success { background: var(--ok-bg) !important; color: var(--ok) !important; }
.jo-content .badge.bg-danger  { background: var(--err-bg) !important; color: var(--err) !important; }
.jo-content .badge.bg-info    { background: var(--info-bg) !important; color: var(--info) !important; }
.jo-content .badge.bg-warning { background: var(--warn-bg) !important; color: var(--warn) !important; }
.jo-content .badge.bg-secondary { background: var(--neutral-bg) !important; color: var(--neutral) !important; }
.jo-content .badge.bg-primary { background: var(--pri-soft) !important; color: var(--pri) !important; }

.jo-content .form-label { font: 500 12px var(--font); color: #344054; margin-bottom: 7px; }
.jo-content .form-control, .jo-content .form-select {
  min-height: 42px; border: 1px solid var(--bd); border-radius: var(--r-fld);
  padding: 8px 13px; font: 500 13px var(--font); color: var(--tx);
}
.jo-content textarea.form-control { min-height: 64px; }
.jo-content .form-control:focus, .jo-content .form-select:focus {
  border-color: var(--pri); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.jo-content .form-control[readonly] { background: var(--fill3); }
.jo-content .form-text { font: 400 11px/1.5 var(--font); color: var(--tx-mut); }
.jo-content .form-check-input:checked { background-color: var(--pri); border-color: var(--pri); }
.jo-content .input-group .btn { border-radius: 0 var(--r-fld) var(--r-fld) 0; }

.jo-content .alert { border-radius: 10px; padding: 11px 14px; font: 500 13px var(--font); border: 1px solid transparent; }
.jo-content .alert-info { background: var(--info-bg); border-color: #B2DDFF; color: var(--info); }
.jo-content .alert-success { background: var(--ok-bg); border-color: #A6F4C5; color: var(--ok); }
.jo-content .alert-warning { background: var(--warn-bg); border-color: #FEDF89; color: var(--warn); }
.jo-content .alert-danger { background: var(--err-bg); border-color: #FECDCA; color: var(--err); }

.jo-content .page-link { color: var(--tx2); border-color: var(--bd); }
.jo-content .page-item.active .page-link { background: var(--pri); border-color: var(--pri); }

/* Алерты (сообщения Django) */
.jo-alert { border-radius: 10px; padding: 11px 14px; font: 500 13px var(--font); margin-bottom: 14px; }
.jo-alert.error, .jo-alert.danger { background: var(--err-bg); border: 1px solid #FECDCA; color: var(--err); }
.jo-alert.success { background: var(--ok-bg); border: 1px solid #A6F4C5; color: var(--ok); }
.jo-alert.warning { background: var(--warn-bg); border: 1px solid #FEDF89; color: var(--warn); }
.jo-alert.info { background: var(--info-bg); border: 1px solid #B2DDFF; color: var(--info); }