:root {
  --bg: #0e1117;
  --bg-elev: #161b22;
  --bg-elev-2: #1d2330;
  --border: #262d3a;
  --text: #e6edf3;
  --text-dim: #8b949e;
  --text-mute: #6e7681;
  --accent: #58a6ff;
  --accent-dim: #1f6feb44;
  --success: #3fb950;
  --warn: #d29922;
  --danger: #f85149;
  --row-hover: #1e2533;
  --row-stripe: rgba(255, 255, 255, 0.028);
  --new-flash: #1f6feb33;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.topbar {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}

.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600;
}
.brand-mark {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, #58a6ff, #a371f7);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  color: #0e1117;
  letter-spacing: -0.5px;
}
.brand-name { font-size: 15px; }

.tabs { display: flex; gap: 4px; }
.tab {
  padding: 6px 14px;
  border-radius: 8px;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  font-size: 13.5px;
  transition: background 0.15s, color 0.15s;
}
.tab:hover { background: var(--bg-elev-2); color: var(--text); }
.tab.active { background: var(--accent-dim); color: var(--accent); }

.status {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  color: var(--text-dim);
  font-size: 13px;
}
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-mute);
  transition: background 0.2s;
}
.dot.ok { background: var(--success); box-shadow: 0 0 6px var(--success); }
.dot.loading { background: var(--warn); animation: pulse 1s infinite; }
.dot.err { background: var(--danger); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

#refresh-btn {
  background: var(--bg-elev-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  width: 28px; height: 28px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.15s;
}
#refresh-btn:hover { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }
#refresh-btn.spinning { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

main { padding: 20px 24px; }

.summary {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.metric {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 18px;
  min-width: 130px;
}
.metric-right { margin-left: auto; }
.metric-label {
  color: var(--text-dim);
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.metric-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.metric-delta { font-size: 13px; margin-top: 2px; }
.metric-delta.up { color: #1a7f37; }
.metric-delta.down { color: #c1121f; }

.table-wrap {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
thead th {
  background: var(--bg-elev-2);
  color: var(--text-dim);
  text-align: left;
  padding: 10px 14px;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
thead th.num { text-align: right; }

tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--row-hover); }

td.num { text-align: right; font-variant-numeric: tabular-nums; }
td.dim { color: var(--text-dim); }
td.muted { color: var(--text-mute); }
td.name { font-weight: 500; }

tr.new-row { animation: flash 2.2s ease-out; }
@keyframes flash {
  0% { background: var(--new-flash); }
  100% { background: transparent; }
}

tr.placeholder td {
  text-align: center;
  color: var(--text-mute);
  padding: 40px;
}

.nowrap { white-space: nowrap; }

.datetime-cell { font-variant-numeric: tabular-nums; }
.datetime-cell .dt-date { color: var(--text); }
.datetime-cell .dt-time { color: var(--text-dim); margin-left: 4px; }

.item-line {
  padding: 1px 0;
  line-height: 1.45;
}
.item-line + .item-line {
  border-top: 1px dashed var(--border);
  margin-top: 2px;
  padding-top: 3px;
}
.article-cell {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: var(--text-dim);
  white-space: nowrap;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.name-cell {
  max-width: 380px;
  color: var(--text);
}
.muted { color: var(--text-mute); }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.status-pill::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--state-color, var(--text-mute));
}

/* ===== «Заказы»: организация таблицы для чтения (только десктоп ≥701px) ===== */
/* Всё зажато на #orders-table / #view-orders, чтобы не трогать другие таблицы и
   мобильную карточную раскладку (≤700px превращает строки в карточки). */
@media (min-width: 701px) {
  /* Липкая шапка: контейнер сам скроллится → шапка не уезжает; overflow:auto ещё и
     страхует от обрезки, если столбцы не влезли по ширине (гориз. скролл вместо клипа). */
  #view-orders .table-wrap { max-height: calc(100vh - 290px); overflow: auto; }
  #view-orders .table-wrap thead th { position: sticky; top: 0; z-index: 5; }

  /* Выравнивание по верху — одиночные значения встают на первую строку позиции
     (важно для заказов с несколькими позициями). */
  #orders-table tbody td { vertical-align: top; }

  /* Зебра + подсветка. #id-специфичность выше базовых правил, порядок правильный:
     зебра → hover → selected, чтобы выделение/наведение всегда перекрывали полосу. */
  #orders-table tbody tr:nth-child(even) { background: var(--row-stripe); }
  #orders-table tbody tr:hover { background: var(--row-hover); }
  #orders-table tbody tr.selected { background: rgba(88, 166, 255, 0.10); }
  #orders-table tbody tr.selected:hover { background: rgba(88, 166, 255, 0.16); }

  /* № не переносится */
  #orders-table td.name { white-space: nowrap; }

  /* Артикул и Наименование: каждая позиция — в одну строку с «…»; полный текст — в title
     (видно по наведению). Даёт ровную высоту строк вместо «лесенки» из длинных названий. */
  #orders-table .article-cell { width: 130px; max-width: 130px; }
  #orders-table .article-cell .item-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  #orders-table .name-cell { width: 300px; max-width: 300px; }
  #orders-table .name-cell .item-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Контрагент не растягивает таблицу (…), Сумма/Ответственный без переносов. */
  #orders-table .agent-cell { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #orders-table .sum-cell { white-space: nowrap; }
  #orders-table .owner-cell { white-space: nowrap; }
}

.error-banner {
  background: #5c1e1e;
  border: 1px solid var(--danger);
  color: #ffd0d0;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13px;
}

@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; gap: 12px; padding: 10px 14px; }
  main { padding: 14px; }
  .metric { min-width: 110px; padding: 10px 14px; }
  table { font-size: 12.5px; }
  thead th, tbody td { padding: 8px 10px; }
}

/* ===== checkboxes & selection ===== */
.check-col { width: 36px; padding-left: 16px !important; padding-right: 4px !important; }
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--text-mute);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  vertical-align: middle;
  position: relative;
  transition: all 0.12s;
  margin: 0;
}
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid #0e1117;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:indeterminate {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:indeterminate::after {
  content: '';
  position: absolute;
  left: 2px; top: 6px;
  width: 8px; height: 2px;
  background: #0e1117;
}
tbody tr.selected { background: rgba(88, 166, 255, 0.08); }
tbody tr.selected:hover { background: rgba(88, 166, 255, 0.14); }

/* ===== action bar ===== */
.action-bar {
  position: sticky;
  top: 64px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  animation: slideDown 0.18s ease-out;
}
@keyframes slideDown {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.action-count { font-weight: 500; color: var(--text); }
.action-count #sel-count { color: var(--accent); font-weight: 600; }

/* ===== buttons ===== */
.btn {
  font-family: inherit;
  font-size: 13.5px;
  padding: 7px 14px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.12s;
  font-weight: 500;
}
.btn-primary {
  background: var(--accent);
  color: #0e1117;
  border-color: var(--accent);
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:disabled {
  background: var(--bg-elev-2);
  color: var(--text-mute);
  border-color: var(--border);
  cursor: not-allowed;
}
.btn-ghost {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--border);
}
.btn-ghost:hover { color: var(--text); border-color: var(--text-mute); }

/* ===== modal ===== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
  display: grid;
  place-items: center;
  z-index: 100;
  animation: fadeIn 0.15s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 460px;
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 4px;
}
.modal-header h3 { margin: 0; font-size: 16px; font-weight: 600; }
.modal-close {
  background: transparent;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
}
.modal-close:hover { color: var(--text); }
.modal-sub { padding: 0 18px 12px; color: var(--text-dim); font-size: 12.5px; }
.modal-body {
  padding: 0 18px;
  flex: 1; min-height: 0;
  overflow-y: auto;   /* высокий контент скроллится ВНУТРИ тела, а не вылезает на футер */
  display: flex; flex-direction: column;
}
#emp-search {
  width: 100%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  padding: 8px 12px;
  margin-bottom: 8px;
  outline: none;
  transition: border-color 0.12s;
}
#emp-search:focus { border-color: var(--accent); }
.emp-list {
  flex: 1; overflow-y: auto;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  max-height: 320px; min-height: 120px;
}
.emp-row {
  padding: 9px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  transition: background 0.1s;
}
.emp-row:last-child { border-bottom: none; }
.emp-row:hover { background: var(--row-hover); }
.emp-row.selected { background: var(--accent-dim); color: var(--accent); }
.emp-name { font-weight: 500; }
.emp-email { color: var(--text-mute); font-size: 12px; margin-left: auto; }
.emp-empty {
  padding: 20px; text-align: center;
  color: var(--text-mute); font-size: 13px;
}
.modal-footer {
  padding: 14px 18px;
  display: flex; align-items: center; gap: 8px;
  border-top: 1px solid var(--border);
  margin-top: 12px;
}
.modal-status { flex: 1; font-size: 12.5px; color: var(--text-dim); }
.modal-status.ok { color: var(--success); }
.modal-status.err { color: var(--danger); }

/* type pill (Заказ/Отгрузка) */
.type-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.type-order  { background: rgba(88,166,255,0.15); color: #58a6ff; border: 1px solid rgba(88,166,255,0.3); }
.type-demand { background: rgba(163,113,247,0.15); color: #a371f7; border: 1px solid rgba(163,113,247,0.3); }

/* ===== pagination ===== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
  padding: 6px 0 18px;
}
.pagination .btn:disabled {
  background: var(--bg-elev-2);
  color: var(--text-mute);
  border-color: var(--border);
  cursor: not-allowed;
  opacity: 0.5;
}
.page-info {
  color: var(--text-dim);
  font-size: 13px;
  min-width: 220px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ===== salary view ===== */
.rate-tag {
  display: inline-block;
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: 0;
  text-transform: none;
}
#salary-table tbody td { font-size: 14px; padding: 12px 14px; }
#salary-table .emp { font-weight: 500; }
#salary-table .salary-cell {
  color: var(--success);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#salary-table .salary-cell.zero { color: var(--text-mute); font-weight: 400; }
#salary-table .unassigned { color: var(--text-mute); font-style: italic; }
.note {
  margin-top: 14px;
  color: var(--text-dim);
  font-size: 12.5px;
  line-height: 1.6;
}
.note b { color: var(--text); font-weight: 600; }

.period-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.period-label {
  color: var(--text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}
.period-bar input[type="date"],
.period-bar input[type="month"] {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  padding: 6px 10px;
  color-scheme: dark;
  outline: none;
}
.period-bar input[type="date"]:focus,
.period-bar input[type="month"]:focus { border-color: var(--accent); }
.period-dash { color: var(--text-mute); }
.period-presets { display: flex; gap: 6px; margin-left: 4px; }
.chip {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 12.5px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.12s;
}
.chip:hover { color: var(--text); border-color: var(--text-mute); }
.chip.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}
.period-hint {
  margin-left: auto;
  color: var(--text-mute);
  font-size: 12px;
}

/* ===== фильтр по статусам ===== */
.status-filter { position: relative; display: inline-flex; }
#btn-statuses {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#btn-statuses .caret,
#btn-month .caret { font-size: 10px; transition: transform 0.15s; }
#btn-statuses[aria-expanded="true"] .caret,
#btn-month[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* ===== выбор месяца ===== */
.month-filter { position: relative; display: inline-flex; }
#btn-month { display: inline-flex; align-items: center; gap: 6px; }
.month-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  width: 234px;
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: 9px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  padding: 8px;
}
.month-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.month-year { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.month-nav {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1;
  width: 28px; height: 28px;
  cursor: pointer;
  transition: all 0.12s;
}
.month-nav:hover { color: var(--accent); border-color: var(--accent); }
.month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.month-cell {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 7px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  padding: 9px 0;
  cursor: pointer;
  transition: all 0.12s;
}
.month-cell:hover { border-color: var(--accent); color: var(--accent); }
.month-cell.selected { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.month-cell.future { color: var(--text-mute); }

.status-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 30;
  min-width: 230px;
  background: var(--bg-elev);
  border: 1px solid var(--accent);
  border-radius: 9px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  padding: 6px;
}
.status-menu-head {
  display: flex;
  gap: 6px;
  padding: 4px 4px 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.status-link {
  flex: 1;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: inherit;
  font-size: 11.5px;
  padding: 5px 8px;
  cursor: pointer;
  transition: all 0.12s;
}
.status-link:hover { color: var(--accent); border-color: var(--accent); }

.status-list { display: flex; flex-direction: column; max-height: 320px; overflow-y: auto; }
.status-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: var(--text);
}
.status-item:hover { background: var(--bg-elev-2); }
.status-item input[type="checkbox"] { margin: 0; flex: none; }
.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--state-color, var(--text-mute));
}
.status-name { flex: 1; white-space: nowrap; }
.status-count { color: var(--text-mute); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.status-empty { padding: 10px 8px; color: var(--text-mute); font-size: 12.5px; }

/* ===================== Login page ===================== */
.login-body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: var(--bg);
}
.login-card {
  width: 360px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px 32px;
  display: flex; flex-direction: column; gap: 18px;
}
.login-card .brand { justify-content: center; }
.login-title {
  margin: 4px 0 0 0;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  color: var(--text-dim);
}
.login-form { display: flex; flex-direction: column; gap: 12px; }
.login-field { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.login-field span { color: var(--text-dim); }
.login-field input {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 14px;
}
.login-field input:focus { outline: 2px solid var(--accent); }
.login-error {
  background: rgba(248, 81, 73, 0.12);
  border: 1px solid var(--danger);
  color: var(--danger);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
}

/* ===================== User menu in topbar ===================== */
.user-menu { position: relative; margin-left: 12px; }
.user-menu-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--text); padding: 6px 12px; border-radius: 8px;
  cursor: pointer; font-size: 13px;
}
.user-menu-btn:hover { background: var(--bg-elev-2); }
.user-menu-dropdown {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 8px; min-width: 180px; padding: 6px;
  z-index: 100;
}
.user-menu-dropdown[hidden] { display: none !important; }
.user-menu-item {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0; color: var(--text);
  padding: 8px 10px; border-radius: 6px; cursor: pointer;
  font-size: 13px;
}
.user-menu-item:hover { background: var(--bg-elev-2); }

/* ===================== Users admin tab ===================== */
.users-toolbar { display: flex; gap: 8px; margin-bottom: 12px; }
.tabs-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.tabs-chips .chip {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 4px; padding: 2px 8px; font-size: 12px;
}
.tabs-chips .chip.role-admin { color: var(--accent); }
.user-row.inactive { opacity: 0.5; }

/* checkbox group в модалке */
.tabs-checkboxes { display: flex; flex-direction: column; gap: 6px; }
.tabs-checkboxes label {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
}
.tabs-checkboxes input[disabled] + span {
  color: var(--text-mute);
  text-decoration: line-through;
}

/* пароль в модалке */
.password-display {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 18px; letter-spacing: 1px;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px; padding: 12px;
  text-align: center; margin: 12px 0;
}
.password-warning {
  background: rgba(210, 153, 34, 0.12);
  border: 1px solid var(--warn);
  color: var(--warn);
  padding: 8px 10px; border-radius: 6px; font-size: 13px;
  margin-bottom: 8px;
}

/* select в модалке (привязка ответственного) */
.login-field select {
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  color-scheme: dark;
}
.login-field select:focus { outline: 2px solid var(--accent); }

/* danger-кнопка (удалить) + поле пароля в форме пользователя */
.btn-danger {
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
}
.btn-danger:hover { background: rgba(248, 81, 73, 0.14); }
.btn-warn {
  background: transparent;
  border: 1px solid var(--warn);
  color: var(--warn);
}
.btn-warn:hover { background: rgba(210, 153, 34, 0.14); }
.btn-warn:disabled { opacity: .5; cursor: not-allowed; }
.modal-footer-spacer { flex: 1; }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }

/* пароль в форме: поле на всю ширину + ровный ряд кнопок под ним */
.uf-password-row { display: flex; flex-direction: column; gap: 8px; }
.uf-password-row input {
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  color: var(--text);
  font-size: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.5px;
}
.uf-password-row input::placeholder {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  letter-spacing: 0;
  color: var(--text-mute);
}
.uf-password-row input:focus { outline: 2px solid var(--accent); }
.uf-password-actions { display: flex; gap: 8px; }
.uf-password-actions .btn { flex: 1; white-space: nowrap; }

/* ===================== Чат ===================== */
.chat-tab-badge {
  display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px;
  background: var(--danger); color: #fff; border-radius: 9px; font-size: 11px;
  line-height: 16px; text-align: center; vertical-align: middle;
}

.chat-layout {
  display: flex; height: 100%; overflow: hidden; background: var(--bg-elev);
}

.chat-sidebar {
  width: 290px; border-right: 1px solid var(--border); display: flex; flex-direction: column;
  background: var(--bg);
}
.chat-sidebar-head { display: flex; gap: 8px; align-items: center; padding: 10px; border-bottom: 1px solid var(--border); }
.chat-sidebar-head .btn { flex: 1; }
.chat-mute { background: none; border: 1px solid var(--border); color: var(--text); border-radius: 8px; cursor: pointer; font-size: 16px; padding: 6px 8px; }
.chat-mute:hover { border-color: var(--text-mute); }

.chat-conv-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.chat-conv-empty { padding: 16px; color: var(--text-mute); font-size: 13px; }
.chat-conv { position: relative; padding: 11px 14px; cursor: pointer; border-bottom: 1px solid var(--border);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.chat-conv:hover { background: var(--row-hover); }
.chat-conv.active { background: var(--accent-dim); }
.chat-conv-title { font-weight: 600; font-size: 14px; color: var(--text); }
.chat-conv-preview { color: var(--text-dim); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.chat-badge { position: absolute; right: 12px; top: 12px; min-width: 18px; padding: 0 5px; background: var(--danger); color: #fff; border-radius: 9px; font-size: 11px; line-height: 16px; text-align: center; }

.chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-thread-head { padding: 13px 18px; border-bottom: 1px solid var(--border); font-weight: 600; color: var(--text); }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 72%; padding: 8px 12px; border-radius: 12px; background: var(--bg-elev-2); border: 1px solid var(--border); align-self: flex-start;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }  /* long-press → меню, без выделения текста и системной панели iOS */
.chat-msg.mine { align-self: flex-end; background: var(--accent-dim); border-color: #1f6feb66; }
.chat-msg-meta { font-size: 11px; color: var(--text-mute); margin-bottom: 3px; display: flex; align-items: center; gap: 6px; }
.chat-msg-body { white-space: pre-wrap; word-break: break-word; color: var(--text); font-size: 14px; }
.chat-edited { color: var(--text-mute); font-style: italic; }


.chat-att { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; }
.chat-att img { max-width: 260px; max-height: 260px; border-radius: 8px; display: block; }
.chat-file-link { color: var(--accent); text-decoration: none; font-size: 13px; }
.chat-file-link:hover { text-decoration: underline; }

.chat-typing { padding: 4px 18px; color: var(--text-dim); font-size: 12px; font-style: italic; }

.chat-composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--border); }
.chat-attach { cursor: pointer; height: 40px; box-sizing: border-box; padding: 0 8px; user-select: none; display: flex; align-items: center; justify-content: center; }
.chat-input-wrap { flex: 1; min-width: 0; }
.chat-input-wrap textarea {
  display: block;  /* убирает «хвост» базовой линии у inline-block textarea — иначе поле выше кнопок */
  width: 100%; resize: none; border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px;
  font: inherit; line-height: 20px; min-height: 40px; max-height: 160px; background: var(--bg); color: var(--text);
}
.chat-input-wrap textarea:focus { outline: none; border-color: var(--accent); }
.chat-send { width: 44px; height: 40px; border: none; border-radius: 8px; background: var(--accent); color: #06101f; font-size: 18px; cursor: pointer; }
.chat-send:hover { filter: brightness(1.1); }
.chat-attach, .chat-send { align-self: flex-end; }

/* «Сканер» — только на телефоне (камера). В десктоп-навигации скрыт;
   на мобиле доступен через бургер-меню (.mm-item), где это правило не действует. */
.tabs .tab[data-view="scanner"] { display: none !important; }

.chat-file-preview { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chat-file-preview:empty { display: none; margin: 0; }
.chat-file-chip { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; font-size: 12px; color: var(--text-dim); }
.chat-file-chip button { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 13px; }

.chat-edit-area { width: 100%; resize: vertical; min-height: 54px; border: 1px solid var(--accent); border-radius: 6px; padding: 6px 8px; font: inherit; background: var(--bg); color: var(--text); }
.chat-edit-actions { display: flex; gap: 6px; margin-top: 6px; }

.chat-recipients { display: flex; flex-direction: column; gap: 4px; max-height: 320px; overflow-y: auto; }
.chat-recipient { padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; color: var(--text); }
.chat-recipient:hover { background: var(--row-hover); border-color: var(--text-mute); }

/* ===== Чат: на весь экран под меню + адаптив + лайтбокс ===== */
#view-chat:not([hidden]) {
  position: fixed; inset: var(--topbar-h, 56px) 0 0 0; z-index: 5;
}
.chat-att-img { cursor: zoom-in; }

/* кнопка «назад к списку» — только на узких экранах */
.chat-thread-head { display: flex; align-items: center; gap: 10px; }
.chat-back {
  display: none; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); cursor: pointer; font-size: 16px; flex: 0 0 auto;
}
.chat-back:hover { border-color: var(--text-mute); }

/* Адаптив: на больших экранах сайдбар чуть шире, бабблы у́же по доле */
@media (min-width: 1400px) {
  .chat-sidebar { width: 340px; }
  .chat-msg { max-width: 62%; }
}

/* Планшет/узкий десктоп */
@media (max-width: 1000px) {
  .chat-sidebar { width: 240px; }
  .chat-msg { max-width: 80%; }
}

/* Телефон: одна панель за раз (список ИЛИ диалог) + кнопка «назад» */
@media (max-width: 700px) {
  .chat-sidebar { width: 100%; border-right: none; }
  .chat-layout .chat-main { display: none; }
  .chat-layout.show-thread .chat-sidebar { display: none; }
  .chat-layout.show-thread .chat-main { display: flex; }
  .chat-back { display: inline-flex; }
  .chat-msg { max-width: 88%; }
  .chat-att img, .chat-att-img { max-width: 70vw; max-height: 50vh; }
  /* Композер на телефоне: по-мессенджерному — pill-поле + круглая кнопка,
     крупные тач-таргеты, отступ снизу под «домашнюю полоску» iPhone. */
  .chat-composer {
    gap: 8px; padding: 8px 10px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: var(--bg-elev);
  }
  .chat-attach { height: 44px; padding: 0 4px; }
  .chat-attach .ic { width: 24px; height: 24px; }
  .chat-input-wrap textarea {
    min-height: 44px; border-radius: 22px; padding: 11px 16px; line-height: 22px;
  }
  .chat-send { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
  .chat-send .ic { width: 22px; height: 22px; }
}

/* ===== Лайтбокс просмотра картинок ===== */
.chat-lightbox {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0, 0, 0, 0.85);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; touch-action: none;
}
.chat-lb-img {
  max-width: 92vw; max-height: 92vh; object-fit: contain;
  transform-origin: center center; cursor: zoom-in; user-select: none;
  transition: transform 0.08s ease-out; will-change: transform;
}
.chat-lightbox.zoomed .chat-lb-img { cursor: grab; }
.chat-lightbox.dragging .chat-lb-img { cursor: grabbing; transition: none; }
.chat-lb-close {
  position: absolute; top: 16px; right: 20px; width: 40px; height: 40px;
  border: none; border-radius: 50%; background: rgba(255, 255, 255, 0.12); color: #fff;
  font-size: 24px; cursor: pointer; line-height: 1;
}
.chat-lb-close:hover { background: rgba(255, 255, 255, 0.22); }
.chat-lb-controls {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 8px; background: rgba(0, 0, 0, 0.4); padding: 6px 10px; border-radius: 24px;
}
.chat-lb-controls button {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 18px; cursor: pointer; line-height: 1;
}
.chat-lb-controls button:hover { background: rgba(255, 255, 255, 0.25); }
.chat-lb-hint { position: absolute; top: 18px; left: 20px; color: rgba(255,255,255,0.6); font-size: 12px; }

/* ===== Вкладка «Пользователи»: аккуратная плашка по дизайну сайта ===== */
#view-users { max-width: 1100px; }                 /* не растягиваем на пол-экрана */
#view-users .users-toolbar { margin-bottom: 14px; }
#users-table th, #users-table td { white-space: nowrap; }
#users-table td.name, #users-table .name { white-space: normal; }
#users-table .tabs-chips { gap: 6px; }
/* колонка «Последний вход» и «Действия» — не растягивать */
#users-table thead th:nth-child(5),
#users-table tbody td:nth-child(5) { width: 1%; color: var(--text-dim); }
#users-table thead th:last-child,
#users-table tbody td:last-child { width: 1%; text-align: right; }

/* планшетный диапазон: горизонтальный скролл; на телефоне (≤700) — карточки (ниже) */
@media (min-width: 701px) and (max-width: 900px) {
  #view-users { max-width: 100%; }
  #view-users .table-wrap { overflow-x: auto; }
  #users-table { min-width: 720px; }
}

/* ===== Быстрая кнопка «Чат» в шапке (на месте блока статуса) ===== */
.topbar-chat-btn {
  margin-left: auto;                 /* прижимает кнопку и меню юзера вправо */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 8px;
  background: var(--accent-dim); color: var(--accent);
  border: 1px solid transparent; cursor: pointer;
  font-weight: 600; font-size: 13.5px; line-height: 1;
  transition: background 0.15s, border-color 0.15s;
}
.topbar-chat-btn:hover { border-color: var(--accent); }
.topbar-chat-btn .topbar-chat-ic { font-size: 15px; }
.topbar-chat-btn .chat-tab-badge { margin-left: 2px; }
@media (max-width: 700px) {
  .topbar-chat-btn { padding: 6px 10px; }       /* компактнее на телефоне */
  .topbar-chat-btn .topbar-chat-ic { font-size: 16px; }
}

/* ===================== ТЕЛЕФОН (≤700px): общий адаптив ===================== */
@media (max-width: 700px) {
  main { padding: 12px; }

  /* --- Шапка: бренд + кнопки в строку, вкладки отдельной прокручиваемой строкой --- */
  .topbar { flex-wrap: wrap; gap: 8px 10px; padding: 8px 12px; }
  .brand-name { display: none; }                       /* оставляем значок «АБ» */
  .topbar .tabs { order: 10; flex-basis: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .topbar .tab { white-space: nowrap; }
  .topbar-chat-btn { margin-left: auto; }
  .user-menu-btn { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* --- Метрики/итоги: по 2 в ряд --- */
  .summary { gap: 8px; margin-bottom: 14px; }
  .metric { min-width: 0; flex: 1 1 44%; padding: 10px 12px; }
  .metric-right { margin-left: 0; }

  /* --- Период/фильтры: перенос --- */
  .period-bar { flex-wrap: wrap; gap: 8px; padding: 12px; }

  /* --- Таблицы → карточки --- */
  .table-wrap { border: none; background: transparent; overflow: visible; border-radius: 0; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; width: auto; }
  .table-wrap thead { display: none; }
  .table-wrap tbody tr {
    background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: 10px; padding: 10px 14px;
  }
  .table-wrap tbody tr:hover { background: var(--bg-elev); }
  .table-wrap tbody tr.selected { background: var(--accent-dim); border-color: #1f6feb66; }
  .table-wrap tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 5px 0; border: none; text-align: right;
  }
  .table-wrap tbody td::before {
    content: attr(data-label); color: var(--text-dim); font-weight: 500;
    text-align: left; flex: 0 0 auto; white-space: nowrap;
  }
  /* ячейки без подписи: чекбокс слева, кнопки на всю ширину */
  .table-wrap tbody td[data-label=""]::before,
  .table-wrap tbody td.check-col::before { content: ""; }
  .table-wrap tbody td.check-col { justify-content: flex-start; padding-left: 0 !important; }
  .table-wrap tbody td[data-label=""] .btn { width: 100%; margin-top: 4px; }
  /* многострочные / списочные ячейки — подпись сверху, контент слева во всю ширину */
  .table-wrap tbody td.name-cell,
  .table-wrap tbody td.article-cell,
  .table-wrap tbody td:has(.tabs-chips) {
    flex-direction: column; align-items: flex-start; text-align: left;
  }
  .table-wrap tbody td:has(.tabs-chips) .tabs-chips { flex-wrap: wrap; }
  .article-cell, .name-cell { max-width: 100%; }
  /* плейсхолдеры/ошибки — по центру, без карточки */
  .table-wrap tbody tr.placeholder { background: transparent; border: none; padding: 0; }
  .table-wrap tbody tr.placeholder td { text-align: center; justify-content: center; }
  .table-wrap tbody tr.placeholder td::before { content: ""; }

  /* --- Экшен-бар выделения / пагинация --- */
  .action-bar { flex-wrap: wrap; top: 0; gap: 8px; }
  .action-bar .btn { flex: 1 1 auto; }
  .pagination { flex-wrap: wrap; gap: 8px; }
  .pagination .btn { flex: 1 1 auto; }

  /* --- Модалки почти на весь экран --- */
  .modal { width: 94vw; max-width: 94vw; }
  .modal-body { max-height: 68vh; overflow-y: auto; }

  /* --- Кабинет «Моя зарплата» --- */
  #view-my-salary .summary .metric { flex: 1 1 44%; }
}

/* ===== Сворачиваемая плашка «Фильтры» (Заказы) ===== */
.filters-toggle { display: none; }                       /* на компе скрыта */
.filters-panel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1; }

@media (max-width: 700px) {
  .period-bar { flex-direction: column; align-items: stretch; gap: 0; }
  .filters-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 11px 14px; border-radius: 10px;
    background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text);
    font-weight: 600; font-size: 14px; cursor: pointer;
  }
  .filters-toggle .caret { transition: transform 0.15s; }
  .period-bar.open .filters-toggle .caret { transform: rotate(180deg); }
  .filters-panel { display: none; }
  .period-bar.open .filters-panel {
    display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 12px;
  }
  .filters-panel .period-presets { display: flex; flex-wrap: wrap; gap: 6px; }
  .filters-panel .period-label { color: var(--text-dim); font-size: 12px; }
  .status-filter, .status-filter .chip-toggle { width: 100%; }

  /* кнопка «Редактировать» в карточке пользователя — во всю ширину, аккуратно */
  .table-wrap tbody td[data-label=""] { display: block; }
  .table-wrap tbody td[data-label=""]::before { display: none; }
  .table-wrap tbody td[data-label=""] .btn { width: 100%; margin-top: 6px; }
}

/* ===== Лайтбокс v2: качественный зум (через реальный размер) + скролл/пинч ===== */
.chat-lightbox { touch-action: auto; }
.chat-lb-stage {
  position: absolute; inset: 0; overflow: auto;
  display: flex; align-items: safe center; justify-content: safe center;
  padding: 16px; touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch;
}
.chat-lb-img {
  display: block; width: auto; height: auto; max-width: 95vw; max-height: 90vh;
  transform: none !important; will-change: auto; transition: none;
  cursor: zoom-in; user-select: none; -webkit-user-drag: none;
  image-rendering: auto; image-rendering: high-quality;
}
.chat-lightbox.zoomed .chat-lb-img { cursor: grab; }
.chat-lightbox.dragging .chat-lb-img { cursor: grabbing; }

/* ===== Телефон: крупнее чекбокс выбора заказа (удобно прожимать) ===== */
@media (max-width: 700px) {
  .table-wrap tbody td.check-col { padding: 6px 0 6px 2px !important; }
  input.row-check {
    transform: scale(1.8);
    transform-origin: left center;
    margin: 4px 0 4px 6px;
  }
}

/* ===== Телефон: чекбокс выбора заказа — в правый верхний угол ===== */
@media (max-width: 700px) {
  .table-wrap tbody td.check-col { justify-content: flex-end !important; padding: 6px 2px 6px 0 !important; }
  input.row-check { transform-origin: right center; margin: 4px 6px 4px 0; }
}

/* ===== Телефон: период «Зарплаты»/«Моей зарплаты» — отступ + крупнее кнопка месяца ===== */
@media (max-width: 700px) {
  #view-salary .period-bar,
  #view-my-salary .period-bar { gap: 10px; }
  #view-salary .period-bar input[type="date"],
  #view-my-salary .period-bar input[type="date"] { width: 100%; }
  #view-salary .period-bar .month-filter,
  #view-my-salary .period-bar .month-filter { width: 100%; margin-top: 8px; }
  .month-filter .chip-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 13px 16px;
    font-size: 15px;
    border-radius: 10px;
  }
}

/* ===== Телефон: панель «Назначить менеджера» закреплена внизу экрана ===== */
@media (max-width: 700px) {
  #action-bar:not([hidden]) {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 50;
    margin: 0; border: 1px solid var(--border); border-bottom: none;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.45);
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    flex-wrap: wrap; gap: 8px;
  }
  #action-bar:not([hidden]) .action-count { flex: 0 0 auto; }
  #action-bar:not([hidden]) #btn-assign { flex: 1 1 auto; }
  #action-bar:not([hidden]) #btn-clear { flex: 1 1 100%; }
  /* чтобы последние карточки не прятались под закреплённой панелью */
  #view-orders:has(#action-bar:not([hidden])) { padding-bottom: 160px; }
}

/* ===== Телефон: «парящая» панель назначения (отступы от краёв, тень, крупнее) ===== */
@media (max-width: 700px) {
  #action-bar:not([hidden]) {
    left: 12px; right: 12px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
    padding: 14px 16px;
    gap: 10px;
  }
  #action-bar:not([hidden]) .action-count { font-size: 15px; font-weight: 600; }
  #action-bar:not([hidden]) #btn-assign { padding: 14px 18px; font-size: 15px; }
  #action-bar:not([hidden]) #btn-clear { padding: 12px 18px; font-size: 14px; }
  #view-orders:has(#action-bar:not([hidden])) { padding-bottom: 190px; }
}

/* ===== Запрет зума страницы (зум остаётся только в лайтбоксе картинок) ===== */
html { touch-action: pan-x pan-y; }            /* отключает пинч и double-tap zoom всей страницы */
.chat-lb-stage { touch-action: pan-x pan-y; }  /* в лайтбоксе зум — свой, через JS-пинч */

/* поля ввода ≥16px — iOS не приближает страницу при фокусе */
@media (max-width: 700px) {
  input, textarea, select, .chat-input-wrap textarea { font-size: 16px; }
}

/* ===== Картинки в чате — крупные сразу (как в Telegram), тап → лайтбокс ===== */
.chat-att img.chat-att-img {
  width: 320px; max-width: 100%; max-height: 380px; height: auto;
  border-radius: 10px; cursor: zoom-in;
}
@media (max-width: 700px) {
  .chat-att img.chat-att-img { width: 74vw; max-width: 74vw; max-height: 62vh; }
}

/* ===== Бургер-меню (только телефон) ===== */
.burger-btn { display: none; }
.mobile-menu { display: none; }

@media (max-width: 700px) {
  /* разбросанную навигацию прячем — всё уходит в бургер */
  .topbar .tabs, .topbar-chat-btn, .user-menu { display: none !important; }
  .brand-name { display: inline; }                 /* теперь есть место под название */
  .burger-btn {
    display: inline-flex; align-items: center; justify-content: center;
    position: relative; margin-left: auto;
    width: 46px; height: 40px; border-radius: 10px;
    background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--text);
    font-size: 20px; cursor: pointer;
  }
  .burger-btn .burger-ic { line-height: 1; }
  .burger-btn .chat-tab-badge { position: absolute; top: -6px; right: -6px; }

  .mobile-menu:not([hidden]) {
    display: block; position: fixed; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, 0.55);
  }
  .mobile-menu-panel {
    position: absolute; top: 0; right: 0; height: 100%;
    width: 82%; max-width: 320px;
    background: var(--bg-elev); border-left: 1px solid var(--border);
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: -14px 0 40px rgba(0, 0, 0, 0.55);
  }
  .mm-head {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border);
  }
  .mm-user { font-weight: 600; font-size: 15px; color: var(--text); }
  .mm-close { width: 36px; height: 36px; border: none; background: none; color: var(--text-dim); font-size: 26px; line-height: 1; cursor: pointer; }
  .mm-nav { display: flex; flex-direction: column; gap: 4px; }
  .mm-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left; padding: 14px; border: none; border-radius: 10px;
    background: none; color: var(--text); font-size: 16px; font-weight: 500; cursor: pointer;
  }
  .mm-item.active, .mm-item:hover { background: var(--accent-dim); color: var(--accent); }
  .mm-item .chat-tab-badge { margin-left: auto; }
  .mm-logout {
    margin-top: auto; width: 100%; padding: 14px; border-radius: 10px;
    background: none; border: 1px solid var(--border); color: var(--danger);
    font-size: 15px; font-weight: 500; cursor: pointer;
  }
}

/* ===== Телефон: кнопка «Редактировать» в карточке пользователя (надёжно) ===== */
@media (max-width: 700px) {
  #users-body td[data-label=""] { display: block !important; padding: 0 !important; }
  #users-body td[data-label=""]::before { content: "" !important; display: none !important; }
  #users-body td[data-label=""] .btn {
    display: block; width: 100%; margin-top: 10px;
    padding: 12px; text-align: center; border-radius: 10px; font-size: 14px;
  }
}

/* ===== Телефон: внутренние отступы карточки «Период» (Зарплата/Моя зарплата) ===== */
@media (max-width: 700px) {
  #view-salary .period-bar,
  #view-my-salary .period-bar { padding: 16px; gap: 12px; }
  #view-salary .period-hint,
  #view-my-salary .period-hint {
    width: 100%; text-align: right; margin: 2px 0 0; align-self: stretch;
    color: var(--text-mute);
  }
}

/* ===== Телефон: iOS date-input не уважает width:100% — нормализуем, чтобы отступ справа = слева ===== */
@media (max-width: 700px) {
  #view-salary .period-bar input[type="date"],
  #view-my-salary .period-bar input[type="date"] {
    -webkit-appearance: none; appearance: none;
    box-sizing: border-box; width: 100%; min-width: 0;
    text-align: center;
  }
  #view-salary .period-bar input[type="date"]::-webkit-date-and-time-value,
  #view-my-salary .period-bar input[type="date"]::-webkit-date-and-time-value { text-align: center; }
}

/* ===== Поиск по заказам (№ / артикул / наименование) ===== */
.orders-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  padding: 2px 12px; margin-bottom: 14px;
}
.orders-search:focus-within { border-color: var(--accent); }
.orders-search-ic { color: var(--text-mute); font-size: 14px; flex: 0 0 auto; }
.orders-search input {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  color: var(--text); font: inherit; font-size: 14px; padding: 9px 0;
}
.orders-search input::placeholder { color: var(--text-mute); }
.orders-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.orders-search-clear {
  border: none; background: none; color: var(--text-mute); font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0 2px; flex: 0 0 auto;
}
.orders-search-clear:hover { color: var(--text); }
@media (max-width: 700px) { .orders-search input { font-size: 16px; } }

/* ===================== Вкладка «Сканер» ===================== */
.sc-wrap { max-width: 640px; margin: 0 auto; }
.sc-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.sc-btn { width: 100%; margin-top: 10px; }
.sc-hint { color: var(--text-dim); font-size: 13px; text-align: center; margin: 10px 0 0; }
.sc-err { color: var(--danger); font-size: 14px; margin-top: 10px; }
.sc-reader { width: 100%; min-height: 240px; border-radius: 12px; overflow: hidden; background: #000; }
.sc-reader video { width: 100%; border-radius: 12px; display: block; }

.sc-me-line { font-size: 14px; }
.sc-lbl { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
#sc-emp { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 12px; font-size: 16px; }

.sc-spin { color: var(--text-dim); text-align: center; padding: 8px 0; }
.sc-reshead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.sc-badge { font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
.sc-badge.ok { background: rgba(63,185,80,.16); color: var(--success); }
.sc-badge.no { background: rgba(210,153,34,.16); color: var(--warn); }
.sc-sub { color: var(--text-dim); font-size: 12px; }
.sc-order { font-size: 24px; font-weight: 800; word-break: break-all; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sc-items { margin: 12px 0 4px; border-top: 1px solid var(--border); }
.sc-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.sc-item:last-child { border-bottom: none; }
.sc-nm { font-weight: 700; font-size: 15px; }
.sc-art { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
.sc-qty { float: right; color: var(--accent); font-weight: 800; }
.sc-owner { margin-top: 10px; font-size: 13px; }
.sc-owner.taken { color: var(--warn); }
.sc-owner.free { color: var(--success); }
.sc-note { color: var(--warn); font-size: 14px; line-height: 1.5; margin-top: 10px; }
.sc-raw { color: var(--text-mute); font-size: 12px; margin-top: 8px; word-break: break-all; }

.sc-confirmed-banner { background: rgba(63,185,80,.12); border: 1px solid rgba(63,185,80,.4); color: var(--success);
  border-radius: 12px; padding: 14px; text-align: center; font-weight: 800; font-size: 16px; }

.sc-loghead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sc-mini { width: auto; font-size: 12px; padding: 6px 10px; }
.sc-log { list-style: none; margin: 0; padding: 0; }
.sc-log li { border-bottom: 1px solid var(--border); padding: 9px 2px; display: flex; justify-content: space-between; gap: 10px; }
.sc-log li:last-child { border-bottom: none; }
.sc-c { font-weight: 700; font-variant-numeric: tabular-nums; word-break: break-all; }
.sc-meta { color: var(--text-dim); font-size: 11px; white-space: nowrap; }
.sc-empty { color: var(--text-dim); font-size: 13px; text-align: center; padding: 12px 0; }

/* строки списка сканов (лайт-версия вкладки «Сканер») */
.sc-log li.sc-row { align-items: flex-start; }
.sc-ic { font-weight: 800; font-size: 16px; line-height: 1.35; }
.sc-row.ok .sc-ic { color: var(--success); }
.sc-row.warn .sc-ic { color: var(--warn); }
.sc-row.bad .sc-ic { color: var(--danger); }
.sc-rmain { flex: 1; min-width: 0; }
.sc-row .sc-st { font-size: 12px; margin-top: 2px; }
.sc-row.ok .sc-st { color: var(--success); }
.sc-row.warn .sc-st { color: var(--warn); }
.sc-row.bad .sc-st { color: var(--danger); }
@keyframes scFlash { from { background: var(--accent-dim); } to { background: transparent; } }
.sc-row.flash { animation: scFlash 0.9s ease-out; }

/* Артикул в карточке заказа (мобайл) — справа и белым, как остальные значения */
@media (max-width: 700px) {
  .table-wrap tbody td.article-cell {
    flex-direction: row; align-items: center; text-align: right;
    color: var(--text); white-space: normal; max-width: 100%; overflow: visible;
  }
  .table-wrap tbody td.article-cell .items-val { margin-left: auto; text-align: right; }
  .table-wrap tbody td.article-cell .item-line { white-space: normal; word-break: break-all; }
}

/* Карточка результата сканера: поля «Артикул»/«Наименование» — серый лейбл, белое крупнее значение */
.sc-item { padding: 2px 0 10px; }
.sc-field-label { color: var(--text-dim); font-size: 12px; margin-top: 8px; }
.sc-field-val { color: var(--text); font-size: 16px; font-weight: 600; line-height: 1.3; word-break: break-word; margin-top: 1px; }
.sc-field-val .sc-qty { float: none; color: var(--accent); font-weight: 800; margin-left: 4px; }

/* ===== Линейные SVG-иконки ===== */
.ic { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; display: inline-block; }
.btn .ic { width: 18px; height: 18px; margin-right: 2px; }
.chat-file-link .ic { width: 16px; height: 16px; }
.chat-conv-title .ic.conv-ic { width: 16px; height: 16px; opacity: .8; }
.chat-back .ic, .chat-mute .ic, .chat-send .ic, .chat-attach .ic { width: 22px; height: 22px; }
.orders-search-ic .ic, .topbar-chat-btn .ic { width: 18px; height: 18px; }

/* ===== Контекстное меню сообщений (Telegram-стиль) ===== */
.chat-ctx {
  position: fixed; z-index: 1000; min-width: 180px;
  background: var(--bg-elev-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.45);
  opacity: 0; transform: scale(.92); transform-origin: top left;
  transition: opacity .12s ease-out, transform .12s ease-out;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;  /* не выделять пункты меню при long-press */
}
.chat-ctx.open { opacity: 1; transform: scale(1); }
.chat-ctx-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: none; background: none; color: var(--text);
  font-size: 14px; cursor: pointer; border-radius: 8px; text-align: left;
}
.chat-ctx-item:hover { background: rgba(255,255,255,.07); }
.chat-ctx-item.danger { color: #ff6b6b; }
.chat-ctx-item .ic { width: 18px; height: 18px; }
.chat-msg.ctx-active { background: rgba(255,255,255,.06); border-radius: 10px; }
.chat-msg.pressing { transform: scale(.98); transition: transform .12s ease; }
.chat-msg.removing {
  opacity: 0; transform: translateX(8px); max-height: 0;
  margin: 0; padding-top: 0; padding-bottom: 0; overflow: hidden;
  transition: opacity .18s ease, transform .18s ease, max-height .18s ease, padding .18s ease, margin .18s ease;
}

/* ===== Вкладка «Автоматизация» ===== */
#view-automation { max-width: 820px; }
.auto-head { margin: 18px 0 6px; }
.auto-head h2 { margin: 0 0 6px; font-size: 20px; }
.auto-sub { margin: 0; color: var(--text-dim); font-size: 13.5px; line-height: 1.5; }
.auto-controls {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; margin: 16px 0;
}
.auto-actions { display: flex; align-items: center; gap: 12px; }
.auto-status { color: var(--text-dim); font-size: 13px; }

/* тумблер-свитч */
.auto-switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.auto-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.auto-slider {
  position: relative; flex: none; width: 44px; height: 24px; border-radius: 999px;
  background: var(--bg-elev-2); border: 1px solid var(--border); transition: background .15s, border-color .15s;
}
.auto-slider::before {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--text-mute); transition: transform .15s, background .15s;
}
.auto-switch input:checked + .auto-slider { background: var(--accent-dim); border-color: var(--accent); }
.auto-switch input:checked + .auto-slider::before { transform: translateX(20px); background: var(--accent); }
.auto-switch input:focus-visible + .auto-slider { box-shadow: 0 0 0 3px var(--accent-dim); }
.auto-switch-label { font-size: 14px; }

/* лог прогонов */
.auto-log-wrap { margin-top: 10px; }
.auto-log-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; cursor: pointer; text-align: left;
  color: var(--text); font-family: inherit; font-size: 15px; font-weight: 600;
  transition: background .12s, border-color .12s;
}
.auto-log-head:hover { background: var(--bg-elev-2); border-color: var(--text-mute); }
.auto-log-head .caret { color: var(--text-dim); transition: transform .15s; }
.auto-log-head[aria-expanded="true"] .caret { transform: rotate(90deg); }
.auto-log { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; color: var(--text-dim); }
.auto-run {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 14px; font-size: 13.5px; line-height: 1.55;
}
.auto-run b { color: var(--text); font-weight: 600; }
.auto-run .auto-warn { color: var(--warn); }
.auto-run .auto-err { color: var(--danger); }
.auto-run .auto-ok { color: var(--success); font-weight: 700; }
#abcp-times .abcp-time { cursor: pointer; }
#abcp-time-new { padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--text); }

@media (max-width: 700px) {
  #view-automation { max-width: none; }
  .auto-controls { flex-direction: column; align-items: stretch; gap: 14px; }
  .auto-actions { justify-content: space-between; }
  #auto-run-now { flex: 1; }
}

/* ===== Роль «Разработчик» + панель dev-only вкладок ===== */
.chip.role-developer { background:#7c3aed; color:#fff; }
.dev-flag { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted,#9aa4b2); }
.dev-flag input { width:auto; }
#btn-dev-panel { margin-left:10px; }
.dev-panel {
  margin:12px 0; padding:14px 16px; border:1px solid #7c3aed55;
  border-radius:12px; background:#7c3aed14;
}
.dev-panel-title { font-size:13px; color:var(--muted,#9aa4b2); margin-bottom:10px; }
.dev-tabs-list { display:flex; flex-direction:column; gap:8px; }
.dev-tab-item { display:flex; align-items:center; gap:10px; font-size:14px; cursor:pointer; }
.dev-tab-item input { width:auto; }
.dev-tab-item .dev-tab-state { margin-left:auto; font-size:12px; color:var(--muted,#9aa4b2); }
.dev-tab-item input:checked ~ .dev-tab-state { color:#a78bfa; }

/* ===== Онлайн-присутствие + галочки прочтения в чате ===== */
.online-dot {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  background:#3ad07a; margin-right:6px; vertical-align:middle;
  box-shadow:0 0 0 2px rgba(58,208,122,.25);
}
.chat-thread-status { margin-left:10px; font-size:12px; color:var(--text-mute,#7d8794); }
.chat-thread-status.online { color:#3ad07a; }
.chat-ticks { margin-left:6px; font-size:11px; color:var(--text-mute,#7d8794); letter-spacing:-1px; }
.chat-ticks.read { color:#4aa3ff; }

/* ===== Вкладка «Аналитика» (каркас) ===== */
.an-head h2 { margin: 0 0 4px; font-size: 20px; }
.an-sub { color: var(--text-mute,#7d8794); font-size: 13px; margin: 0 0 16px; }
.an-cards { display: flex; flex-wrap: wrap; gap: 14px; }
.an-card {
  background: var(--bg-elev,#1a1f29); border: 1px solid var(--border,#2a3340);
  border-radius: 12px; padding: 16px 18px; min-width: 180px;
}
.an-card-title { color: var(--text-mute,#7d8794); font-size: 12.5px; margin-bottom: 8px; }
.an-card-value { font-size: 24px; font-weight: 700; }
.an-note { margin-top: 16px; color: var(--text-mute,#7d8794); font-size: 13px; }
.an-loading { color: var(--text-mute,#7d8794); font-size: 14px; padding: 8px 0; }

/* Панель действий в «Аналитике» */
.an-actions { display: flex; gap: 8px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.an-actions-status { font-size: 13px; color: #555; }

/* Когорта Ozon→WB в «Аналитике» (весь «Обзор») */
.cohort-block { margin-top: 8px; }
.cohort-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.cohort-sub { color: var(--text-mute,#7d8794); font-size: 13px; margin-bottom: 12px; }
#cohort-table thead .co-group { text-align: center; }
#cohort-table .co-sep { border-left: 1px solid var(--border); }

/* ===== Калькулятор цен (dev_only вкладка): таблица товаров ===== */
.calc-controls { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:10px; align-items:flex-end; }
.calc-controls label { display:flex; flex-direction:column; font-size:13px; gap:4px; }
.calc-controls input[type=number] { width:90px; padding:6px 8px; }
.calc-controls input[type=search] { width:240px; padding:6px 8px; flex:1; min-width:160px; }
.seg { display:inline-flex; border:1px solid #ccc; border-radius:8px; overflow:hidden; }
.seg-btn { padding:8px 16px; background:#fff; border:0; cursor:pointer; font:inherit; }
.seg-btn.active { background:#2d6cdf; color:#fff; }
.calc-muted { color:#888; font-size:13px; }
#calc-note { margin-bottom:12px; }
.calc-table { width:100%; border-collapse:collapse; font-size:14px; }
.calc-table th, .calc-table td { padding:7px 10px; border-bottom:1px solid #eee; text-align:left; }
.calc-table th.num, .calc-table td.num { text-align:right; white-space:nowrap; }
.calc-table .calc-reco b { color:#1c7d3e; }
.calc-row-muted td { color:#999; }
.calc-status { font-style:italic; }
@media (max-width:700px){
  .calc-controls input[type=number], .calc-controls input[type=search] { width:100%; }
  .calc-table thead { display:none; }
  .calc-table tr { display:block; border-bottom:2px solid #ddd; padding:6px 0; }
  .calc-table td { display:flex; justify-content:space-between; border:0; padding:3px 10px; text-align:right; }
  .calc-table td::before { content:attr(data-label); color:#888; font-size:12px; margin-right:10px; }
}

/* Управление закупками (поиск — общий стиль .orders-search, как на «Заказах») */
.pu-filters { display: flex; align-items: flex-start; gap: 26px; flex-wrap: wrap;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px; }
.pu-fgroup { display: flex; flex-direction: column; }
.pu-flabel { font-size: 11px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--text-mute,#7d8794); margin-bottom: 8px; }
.pu-fchips { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.pu-fchips .chip { text-align: center; }
.pu-fside { order: 99; margin-left: auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 10px; }
.pu-fcount { color: var(--text-mute,#7d8794); font-size: 13px; white-space: nowrap; }
@media (max-width:700px){
  .pu-filters { gap: 14px; }
  .pu-fgroup { min-width: 44%; }
  .pu-fside { margin-left: 0; width: 100%; align-items: flex-start; }
}

.pu-table th.pu-ch { text-align: center; border-left: 1px solid var(--border,#2a2f3a); }
.pu-table th.pu-ch-first, .pu-table td.pu-ch-first { border-left: 1px solid var(--border,#2a2f3a); }
/* компакт: 15 колонок должны влезать в экран целиком (обёртка режет по overflow:hidden) */
#view-purchasing .table-wrap { overflow-x: auto; }
@media (min-width:701px){
  .pu-table { font-size: 13px; }
  .pu-table thead th { padding: 8px 8px; }
  .pu-table tbody td { padding: 8px 8px; white-space: nowrap; }
  .pu-table td.pu-name { max-width: 330px; overflow: hidden; text-overflow: ellipsis; }
}
.pu-morebar { text-align: center; margin: 10px 0 4px; }
.pu-dash { color: var(--text-mute,#7d8794); }
.pu-neg { color: #e96a6a; font-weight: 600; }
.pu-warn { color: #e6b43c; font-weight: 600; }
.pu-good { color: #51d18a; }
#pu-archive-toggle.active { border-color: #e6b43c; color: #e6b43c; }
.pu-stale { border: 1px solid #e6b43c; background: rgba(230,180,60,.08); color: #e6b43c;
  border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; font-size: 13.5px; }
.pu-lead-select { background: var(--bg-elev-2); color: inherit; font: inherit;
  border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.pu-lead-select:focus { outline: 2px solid var(--accent); }
@media (max-width:700px){ #pu-table td.check-col { display: flex; } }
.pu-abc { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 6px;
  font-size: 11px; font-weight: 700; line-height: 16px; vertical-align: 1px; }
.pu-abc-A { background: rgba(64,192,120,.20); color: #51d18a; }
.pu-abc-B { background: rgba(230,180,60,.20); color: #e6b43c; }
.pu-abc-C { background: rgba(125,135,148,.18); color: var(--text-mute,#7d8794); }
/* карточка позиции (фичефлаг purchasing_detail) */
.pu-row-click { cursor: pointer; }
.pu-row-click:hover td { background: rgba(120,150,255,.06); }
.pu-detail { width: 810px; max-width: 92vw; min-height: 560px; }
.pu-detail .modal-body { overflow-y: auto; padding-top: 4px; }
/* мета-строка: жизнь карточки + ссылки */
.pu-d-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  flex-wrap: wrap; font-size: 12px; color: var(--text-mute,#7d8794); margin-bottom: 12px; }
.pu-d-links a { color: var(--accent, #6b8afd); text-decoration: none; margin-left: 10px;
  white-space: nowrap; }
.pu-d-links a:hover { text-decoration: underline; }
/* KPI-плитки (стат-тайлы): подпись → значение → пояснение/дельта */
.pu-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px; margin-bottom: 6px; }
.pu-kpi { background: rgba(255,255,255,.025); border: 1px solid var(--border,#2a2f3a);
  border-radius: 10px; padding: 10px 12px; min-width: 0; }
.pu-kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-mute,#7d8794); margin-bottom: 4px; }
.pu-kpi-value { font-size: 21px; font-weight: 650; line-height: 1.2; }
.pu-kpi-unit { font-size: 13px; font-weight: 500; color: var(--text-mute,#7d8794); }
.pu-kpi-sub { font-size: 12px; color: var(--text-mute,#7d8794); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-kpi-sub.pu-good, .pu-kpi-sub.pu-neg { font-weight: 600; }
/* заголовки секций внутри карточки */
.pu-d-section { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-mute,#7d8794); font-weight: 600; margin: 16px 0 8px; }
/* таблицы: приглушённые линейки, табличные цифры по правому краю */
.pu-d-channels { width: 100%; border-collapse: collapse; }
.pu-d-channels th, .pu-d-channels td { padding: 7px 8px;
  border-bottom: 1px solid rgba(125,135,148,.18); }
.pu-d-channels th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--text-mute,#7d8794); text-align: left; font-weight: 600; }
.pu-d-channels th.num, .pu-d-channels td.num { text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pu-d-channels tbody tr:hover td { background: rgba(120,150,255,.05); }
/* экономика: вычеты с отступом и приглушённо, итоги — жирно с разделителем */
.pu-d-econ .pu-d-ind { padding-left: 22px; color: var(--text-mute,#7d8794); }
.pu-d-econ .pu-d-ind + .num, .pu-d-econ td.num { font-variant-numeric: tabular-nums; }
.pu-d-econ .pu-d-strong td { font-weight: 650; border-top: 1px solid var(--border,#2a2f3a); }
/* справочная строка (возвраты) — вне арифметики, приглушена целиком */
.pu-d-econ .pu-d-note td { color: var(--text-mute,#7d8794); font-size: 12px;
  border-top: 1px dashed var(--border,#2a2f3a); }
/* сторож: доля удержаний вне 15–70% — числа почти наверняка разъехались */
.pu-d-warn { font-size: 11px; padding: 2px 7px; border-radius: 999px; cursor: help;
  background: rgba(230,120,60,.14); color: #e6783c; white-space: nowrap; }
/* ставки комиссий из API МП — справка, а не расчёт: держим ВНЕ таблицы */
.pu-d-ref { margin-top: 8px; font-size: 12px; color: var(--text-mute,#7d8794); }
/* «оценка» — число выведено расчётом, а не взято из факта (сейчас: выручка/маржа ВБ) */
.est-warn { font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 999px;
  cursor: help; background: rgba(230,180,60,.16); color: #e6b43c;
  white-space: nowrap; vertical-align: middle; }
/* подпись ценовой базы под числом: у Озона и ВБ это РАЗНЫЕ величины */
.pu-d-base { font-size: 11px; font-weight: 400; color: var(--text-mute,#7d8794);
  white-space: normal; margin-top: 2px; }
.pu-d-help { display: inline-block; width: 13px; height: 13px; line-height: 13px;
  text-align: center; border-radius: 50%; cursor: help;
  background: rgba(125,135,148,.22); font-size: 10px; }
/* акции — мягкие чипы */
.pu-d-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.pu-d-action { font-size: 12px; padding: 3px 9px; border-radius: 999px;
  background: rgba(230,180,60,.12); color: #e6b43c; }
.pu-d-tabs { display: flex; gap: 6px; margin: 2px 0 14px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border,#2a2f3a); padding-bottom: 10px; }
/* что-если — приборная строка */
.pu-d-whatif { display: flex; align-items: center; gap: 10px; margin-top: 16px;
  padding: 10px 12px; border: 1px dashed var(--border,#2a2f3a); border-radius: 10px;
  flex-wrap: wrap; background: rgba(255,255,255,.02); }
.pu-d-whatif-t { font-weight: 600; }
.pu-d-whatif input { width: 110px; background: var(--bg,#141821); color: var(--text,#e7ecf3);
  border: 1px solid var(--border,#2a2f3a); border-radius: 6px; padding: 6px 8px; font: inherit;
  font-variant-numeric: tabular-nums; }
@media (max-width:700px){
  .pu-kpis { grid-template-columns: 1fr 1fr; }
  .pu-d-meta { flex-direction: column; gap: 4px; }
  .pu-d-links a { margin-left: 0; margin-right: 10px; }
}
@media (max-width:700px){
  #pu-table thead { display:none; }
  #pu-table tr { display:block; border-bottom:2px solid #ddd; padding:6px 0; }
  #pu-table td { display:flex; justify-content:space-between; border:0; padding:3px 10px; text-align:right; }
  #pu-table td::before { content:attr(data-label); color:#888; font-size:12px; margin-right:10px; }
  #pu-table td.pu-ch-first { border-left:0; }
}

/* ===== Вкладка «Возвраты» (dev_only) ===== */
.rt-recon { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 16px; margin-bottom: 14px; }
.rt-recon-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-weight: 600; }
.rt-recon-head .rt-sync { font-weight: 400; color: var(--text-mute,#7d8794); margin-left: auto; }
.rt-since { font-weight: 400; color: var(--text-mute,#7d8794); }
.rt-recon-rows { margin-top: 4px; }
.rt-recon-row { display: flex; gap: 18px; flex-wrap: wrap; padding: 6px 0; font-size: 13px; }
.rt-recon-row .rt-bad { color: var(--danger); }
.rt-nodoc-btn { border: none; background: none; text-decoration: underline; cursor: pointer;
  font-weight: 700; color: inherit; padding: 0; font: inherit; }
.rt-nodoc { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.rt-nodoc-title { font-weight: 600; margin-bottom: 6px; }
.rt-nodoc-table { width: 100%; font-size: 12.5px; }
.rt-empty { color: var(--text-mute,#7d8794); }
.rt-flag { border: none; background: none; cursor: pointer; opacity: .35; font-size: 16px; padding: 0; }
.rt-flag:hover { opacity: .7; }
@media (max-width:700px){ #rt-table td.check-col { display: flex; } }

/* Переключатель режимов «На складе» / «Нет документа в МС» (idiom вкладки «Аналитика») */
.rt-mode-seg { margin-bottom: 14px; max-width: 100%; overflow-x: auto; }
.rt-mode-seg .seg-btn { background: var(--bg-elev); color: var(--text-dim); white-space: nowrap; }
.rt-mode-seg .seg-btn.active { background: var(--accent-dim); color: var(--accent); }
.rt-new-badge {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px;
  background: var(--danger); color: #fff; border-radius: 9px; font-size: 11px;
  line-height: 16px; text-align: center; vertical-align: middle;
}
/* Строки со свежим «На складе с» (последние 2 суток) */
.rt-new-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
  background: var(--danger); color: #fff; font-size: 10px; font-weight: 700;
  letter-spacing: .3px; vertical-align: middle;
}
tr.rt-fresh { background: rgba(248, 81, 73, .07); }
tr.rt-fresh:hover { background: rgba(248, 81, 73, .13); }
/* Список «Нет документа в МС»: майские строки — «настройка, не заводить» */
tr.rt-may-row { opacity: .8; }
.rt-may-tag { color: var(--text-mute,#7d8794); font-size: 11px; font-style: italic; }
.rt-hint { color: var(--text-mute,#7d8794); font-size: 12px; line-height: 1.45;
  margin: 2px 0 12px; max-width: 780px; }
.rt-log-rb { color: var(--text-mute,#7d8794); font-size: 12px; }
.rt-log-fail { color: var(--warn); font-size: 12px; }
/* Панель действий возвратов раньше была липкой (top:64) и, приклеиваясь вверху,
   перекрывала строку заголовка таблицы с чекбоксом «выбрать всё» (строка «пропадала»).
   Делаем её в потоке — тогда заголовок со «выбрать всё» всегда виден рядом со списком
   и не заслоняется. (Sticky-заголовок ненадёжен: .table-wrap = overflow:hidden.) */
#rt-mode-stock #rt-actionbar, #rt-mode-nodoc #rt-nd-actionbar { position: static; }
/* Кнопка «Создать возврат» по строке — disabled с тултипом (may/fresh/нет карточки) */
.rt-nd-action { white-space: nowrap; }
.rt-nd-create-btn:disabled {
  background: var(--bg-elev-2); color: var(--text-mute); border-color: var(--border);
  cursor: not-allowed; opacity: .5;
}
tr.rt-nd-nocard { background: rgba(248, 81, 73, .07); }
tr.rt-nd-nocard:hover { background: rgba(248, 81, 73, .13); }

/* Y1-UI: счётчик-бейдж на сегменте «Спорные» (та же форма, что rt-new-badge, но акцентный
   янтарный цвет спорных, а не «тревожный» красный). */
.rt-count-badge {
  display: inline-block; min-width: 18px; margin-left: 6px; padding: 0 5px;
  background: #e69922; color: #fff; border-radius: 9px; font-size: 11px;
  line-height: 16px; text-align: center; vertical-align: middle;
}
/* Y4: примечание «+M май — не заводить» рядом с основным (уже без мая) счётчиком */
.rt-may-note { color: var(--text-mute,#7d8794); font-size: 12px; font-style: italic; }
/* R1b (UI-половина): «прочее» — Ozon-статусы вне «Получен»/транзита (списан/спор), видны
   только когда есть (>0), чтобы не шуметь нулём на каналах без такого хвоста. */
.rt-other-note { color: var(--text-mute,#7d8794); font-size: 13px; }

/* Y3: чип-фильтр и пометка строк с причиной «брак» (без блокировки переноса/создания) */
tr.rt-defect { outline: 2px solid rgba(230, 153, 34, .35); outline-offset: -2px; }
.rt-defect-tag {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px;
  background: rgba(230, 153, 34, .25); color: #b9770e; font-size: 10px; font-weight: 700;
  vertical-align: middle;
}

/* Y6: мобильные теги блокировки создания — видимый текст, не только title/цвет строки */
.rt-nd-tag {
  display: inline-block; margin: 0 6px 4px 0; padding: 1px 6px; border-radius: 8px;
  font-size: 10px; font-weight: 700; vertical-align: middle; white-space: nowrap;
}
.rt-nd-tag-nocard { background: rgba(248, 81, 73, .18); color: var(--danger); }
.rt-nd-tag-fresh { background: var(--bg-elev-2); color: var(--text-mute,#7d8794); }

/* Y5: индикатор синка старше 26ч — данные устарели */
.rt-sync-stale { color: var(--danger) !important; font-weight: 600; }

@media (max-width:700px){ #rt-nd-table td.check-col { display: flex; } }

/* ===== Аналитика 2.0 (каркас) ===== */
.a2-head { display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.a2-title { font-size:20px; font-weight:700; }
.a2-badge-dev { font-size:11px; font-weight:700; color:#e6b43c; background:rgba(230,180,60,.18); padding:2px 8px; border-radius:6px; vertical-align:middle; }
.a2-built { font-size:12px; color:var(--text-mute,#7d8794); }
.a2-subtabs { margin-bottom:14px; flex-wrap:wrap; }
.a2-panel { display:flex; flex-direction:column; gap:14px; }
.a2-block { border:1px solid var(--border,#e2e6ea); border-radius:10px; padding:14px 16px; }
.a2-block-title { margin:0 0 6px; font-size:15px; font-weight:700; }
.a2-block-sub { font-size:12px; color:var(--text-mute,#7d8794); margin-bottom:8px; }
.a2-named { border-left:3px solid #6b8afd; background:rgba(107,138,253,.05); }
.a2-placeholder { font-size:13px; color:var(--text-mute,#7d8794); font-style:italic; padding:8px 0; }
.a2-status { font-size:12px; font-weight:400; color:var(--text-mute,#7d8794); margin-left:6px; }
.a2-info { cursor:help; color:#6b8afd; font-weight:700; margin-left:4px; }
/* диапазон мёртвого капитала */
.a2-range { border:1px solid var(--border,#e2e6ea); border-radius:10px; padding:14px 16px; background:rgba(230,90,90,.04); }
.a2-range-title { font-size:14px; font-weight:700; margin-bottom:10px; }
.a2-range-vals { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.a2-range-item { min-width:160px; }
.a2-range-label { font-size:12px; color:var(--text-mute,#7d8794); }
.a2-range-num { font-size:24px; font-weight:800; }
.a2-range-item.proven .a2-range-num { color:#e96a6a; }
.a2-range-item.upper .a2-range-num { color:var(--text-mute,#9aa3ad); }
.a2-range-sub { font-size:11px; color:var(--text-mute,#7d8794); }
.a2-range-sep { font-size:22px; color:var(--text-mute,#9aa3ad); }
.a2-quality { margin-top:16px; }
.a2-q-note { font-size:12px; color:var(--text-mute,#7d8794); }
.a2-total td { font-weight:700; border-top:2px solid var(--border,#e2e6ea); }
/* разбор длинного хвоста */
.a2-lt-groups { display:flex; gap:12px; flex-wrap:wrap; margin:10px 0 14px; }
.a2-lt-card { flex:1; min-width:180px; border:1px solid var(--border,#e2e6ea); border-radius:10px; padding:12px 14px; }
.a2-lt-card.rare { background:rgba(64,192,120,.06); }
.a2-lt-card.over { background:rgba(230,180,60,.07); }
.a2-lt-card.free { background:rgba(107,138,253,.08); border-color:#6b8afd; }
.a2-lt-card-title { font-size:13px; font-weight:700; margin-bottom:6px; }
.a2-lt-card-num { font-size:22px; font-weight:800; }
.a2-lt-card.free .a2-lt-card-num { color:#6b8afd; }
.a2-lt-card-sub { font-size:11px; color:var(--text-mute,#7d8794); margin-top:2px; }
/* две главные карточки рядом: списать / вытащить */
.a2-headline { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.a2-hcard { flex:1; min-width:280px; border:1px solid var(--border,#e2e6ea); border-radius:12px; padding:14px 16px; }
.a2-hcard.dead { background:rgba(230,90,90,.05); border-color:rgba(230,90,90,.45); }
.a2-hcard.free { background:rgba(107,138,253,.07); border-color:#6b8afd; }
.a2-hcard-label { font-size:14px; font-weight:700; margin-bottom:10px; }
.a2-hcard-num { font-size:30px; font-weight:800; color:#6b8afd; }
.a2-hcard-sub { font-size:11px; color:var(--text-mute,#7d8794); margin-top:3px; }
.a2-lt-brands { margin:6px 0 10px; }
.a2-lt-brands-head, .a2-lt-toptitle { font-size:13px; font-weight:700; margin:10px 0 6px; }
.a2-prec { font-size:11px; font-weight:700; padding:1px 7px; border-radius:6px; }
.a2-prec.ok { background:rgba(64,192,120,.18); color:#40c078; }
.a2-prec.warn { background:rgba(230,180,60,.20); color:#e6b43c; cursor:help; }
.a2-md-cols { display:flex; gap:14px; flex-wrap:wrap; }
.a2-md-cols > div { flex:1; min-width:280px; }
.a2-warn-note { color:#e6b43c; }

/* ===== Аналитика: подвкладки + Финансы (кассовая аналитика) ===== */
.an-subtabs { margin-bottom: 14px; }
.an-subtabs .seg-btn { background: var(--bg-elev); color: var(--text-dim); }
.an-subtabs .seg-btn.active { background: var(--accent-dim); color: var(--accent); }
.fin-head { margin-bottom: 12px; }
.fin-title { font-size: 16px; font-weight: 600; }
.fin-sub { color: var(--text-dim); font-size: 12.5px; margin-top: 2px; }
.fin-chart-wrap { background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 14px 8px; margin-bottom: 16px; }
.fin-legend { display: flex; gap: 18px; padding: 6px 4px 4px; flex-wrap: wrap; }
.fin-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); }
.fin-key i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.fin-month { margin-bottom: 20px; }
.fin-month-title { margin: 0 0 8px; font-size: 15px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fin-badge { font-size: 11.5px; font-weight: 400; color: var(--warn);
  border: 1px solid var(--warn); border-radius: 6px; padding: 1px 8px; }
.fin-delta { font-size: 12px; font-weight: 500; }
.fin-delta.up { color: var(--success); }
.fin-delta.down { color: var(--danger); }
.fin-total td { border-top: 2px solid var(--border); font-weight: 600; }
.fin-ret { color: var(--text-mute); font-size: 11.5px; }
.fin-warn { color: var(--warn); font-size: 11.5px; cursor: help; }
@media (max-width: 700px) {
  .fin-chart-wrap { padding: 10px 8px 4px; }
  .fin-table thead { display: none; }
  .fin-table tr { display: block; border-bottom: 1px solid var(--border); padding: 6px 0; }
  .fin-table td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 2px 4px; }
  .fin-table td::before { content: attr(data-label); color: var(--text-mute); }
}

/* ===== Аналитика: подвкладка «Оборачиваемость» ===== */
/* Палитра квадрантов валидирована scripts/validate_palette.js (dark, surface #161b22): все чеки PASS */
.to-channels { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.to-ch-btn { font: inherit; font-size: 13.5px; cursor: pointer; color: var(--text-dim);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  padding: 7px 16px; transition: background .15s, color .15s, border-color .15s; }
.to-ch-btn:hover { background: var(--bg-elev-2); color: var(--text); }
.to-ch-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }
.to-quads { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; margin: 12px 0 6px; }
.to-tile { --qc: var(--accent); position: relative; text-align: left; cursor: pointer; font: inherit;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px 10px 16px; color: var(--text); transition: background .15s, border-color .15s; }
.to-tile::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 4px;
  border-radius: 10px 0 0 10px; background: var(--qc); }
.to-tile:hover { background: var(--bg-elev-2); }
.to-tile.active { border-color: var(--qc); background: var(--bg-elev-2); }
.to-t-name { font-size: 13px; color: var(--text); font-weight: 600; }
.to-t-pos { font-size: 12px; color: var(--text-dim); }
.to-t-cap { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 3px; }
.to-t-sub { font-size: 11px; color: var(--text-dim); margin-top: 3px; }
.to-q-core { --qc: #2ea043; } .to-q-tail { --qc: #bb8009; }
.to-q-horse { --qc: #388bfd; } .to-q-dead { --qc: #da3633; }
.to-note { color: var(--text-dim); font-size: 13px; margin: 4px 0 10px; }
.to-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.to-chip { font: inherit; font-size: 12.5px; cursor: pointer; color: var(--text-dim);
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; transition: background .15s, color .15s, border-color .15s; }
.to-chip:hover { background: var(--bg-elev-2); color: var(--text); }
.to-chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--text); }
.to-chip .to-chip-n { color: var(--text-mute); margin-left: 4px; font-variant-numeric: tabular-nums; }
.to-chip.active .to-chip-n { color: var(--text-dim); }
.to-table thead th[data-sort] { cursor: pointer; user-select: none; }
.to-table thead th[data-sort]:hover { color: var(--text); }
.to-table thead th.to-sorted { color: var(--accent); }
.to-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; flex-wrap: wrap; }
.to-bar input[type=search] { flex: 1; min-width: 200px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); padding: 7px 10px; font: inherit; }
.to-count { color: var(--text-dim); font-size: 13px; white-space: nowrap; }
#an-sub-turnover .table-wrap { overflow: auto; max-height: 72vh; }
.to-table { width: 100%; min-width: 1320px; border-collapse: collapse; font-size: 13.5px; }
.to-table thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-elev-2);
  color: var(--text-dim); font-weight: 500; text-align: left; padding: 9px 10px;
  white-space: nowrap; border-bottom: 1px solid var(--border); }
.to-table thead th[title] { cursor: help; }
.to-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.to-table tbody tr:hover { background: var(--row-hover); }
.to-table th.num, .to-table td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.to-table td:nth-child(2) { max-width: 420px; }
.to-neg { color: var(--danger); }
.to-never { color: var(--text-dim); font-style: italic; }
.to-badge { font-size: 11px; padding: 1px 6px; border-radius: 8px; white-space: nowrap; }
.to-badge-dead { background: rgba(218,54,51,.16); color: #e5534b; }
.to-badge-unsold { background: rgba(187,128,9,.16); color: #c9a23f; }
@media (max-width: 700px) {
  .to-quads { grid-template-columns: 1fr 1fr; }
  .to-table { min-width: 0; }
  #an-sub-turnover .table-wrap { max-height: none; }
  .to-bar input[type=search] { width: 100%; }
}

/* Финансы: панель переключения графиков под графиком */
.fin-chart-tabs { margin-top: 10px; flex-wrap: wrap; border-color: var(--border); }
.fin-chart-tabs .seg-btn { background: var(--bg-elev); color: var(--text-dim); padding: 6px 12px; font-size: 12.5px; }
.fin-chart-tabs .seg-btn.active { background: var(--accent-dim); color: var(--accent); }
@media (max-width: 700px) {
  .fin-chart-tabs { display: flex; }
  .fin-chart-tabs .seg-btn { flex: 1 1 auto; padding: 6px 8px; }
}

/* 04.07: жёлтые плашки месяцев убраны по просьбе владельца — остатки бейджей нейтральные */
.fin-badge { color: var(--text-mute); border-color: var(--border); }
.fin-note { font-size: 11.5px; font-weight: 400; color: var(--text-mute); }