:root {
  --bg: #fafafa;
  --card: #ffffff;
  --panel: #fafafa;
  --line: rgba(0,0,0,0.06);
  --line-strong: rgba(0,0,0,0.12);
  --text: #1a1a1a;
  --muted: #666666;
  --faint: #888888;
  --accent: #1a1a1a;
  --focus: #FFD843;
  --hl: #FFE074;
  --hl-soft: rgba(255,224,116,0.18);
  --danger: #b91c1c;
  --warn: #92400e;
  --ok: #16a34a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 14px;
  color: var(--text);
  background: var(--bg);
}

/* ============ ВХОД ============ */
.login-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--bg);
}
.login-card {
  background: var(--card);
  padding: 32px;
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(0,0,0,0.10);
  width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-title { margin: 0 0 8px; text-align: center; }
.login-error {
  background: rgba(220,38,38,0.10);
  color: var(--danger);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 14px;
}
.login-btn { margin-top: 8px; }

/* ============ КАРКАС: сайдбар + контент ============ */
.app { display: flex; height: 100vh; overflow: hidden; }

.nav-sidebar {
  width: 90px;
  background: var(--hl);
  display: flex;
  flex-direction: column;
  padding: 16px 0;
  flex-shrink: 0;
}
.nav-item {
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  font-size: 11px;
  color: #5a4a00;
  text-decoration: none;
  text-align: center;
  line-height: 1.15;
}
.nav-item .ico { font-size: 22px; }
.nav-item:hover { background: rgba(0,0,0,0.05); }
.nav-item.active { background: #fff; font-weight: 600; }
.nav-item.soon { opacity: 0.45; cursor: default; }
.nav-item.soon:hover { background: transparent; }
.nav-spacer { flex: 1; }

.manager-form { margin-top: 8px; border-top: 1px solid rgba(0,0,0,0.08); }
.manager-badge {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 6px 4px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.manager-badge:hover { background: rgba(255,255,255,0.35); }
.manager-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: #5a4a00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.manager-name { font-size: 12px; font-weight: 700; color: #5a4a00; line-height: 1.1; text-align: center; }
.manager-role { font-size: 9px; color: #5a4a00; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.4px; }

main { flex: 1; display: flex; flex-direction: column; overflow: hidden; min-width: 0; }
.top-bar { background: var(--card); border-bottom: 1px solid var(--line); padding: 12px 24px; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.top-bar h1 { margin: 0; font-size: 16px; font-weight: 700; }
.top-bar .spacer { flex: 1; }
.content { flex: 1; overflow: auto; padding: 22px 30px; }

/* ============ ОБЩЕЕ ============ */
.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.page-head h1 { margin: 0; font-size: 20px; font-weight: 700; }
.muted { color: var(--muted); }
.muted-cell { color: var(--muted); text-align: center; padding: 18px; }

.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  background: rgba(0,0,0,0.06);
  color: #555;
  border-radius: 10px;
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}
.badge.warn { background: rgba(245,158,11,0.16); color: var(--warn); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  background: #fff;
  color: #444;
  cursor: pointer;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  transition: all 0.15s;
}
.btn:hover { background: #f5f5f5; }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { background: #333; }
.btn.danger { background: #fff; color: var(--danger); border-color: rgba(220,38,38,0.3); }
.btn.danger:hover { background: rgba(220,38,38,0.05); }
.btn.small { padding: 4px 10px; font-size: 11px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.search {
  width: 100%;
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
}
.search:focus { outline: 2px solid var(--focus); border-color: transparent; }

/* ============ ТАБЛИЦЫ ============ */
.grid {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.grid th, .grid td {
  text-align: left;
  padding: 11px 14px;
}
.grid th {
  background: var(--panel);
  color: var(--muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-bottom: 1px solid var(--line);
}
.grid td { font-size: 13px; border-bottom: 1px solid rgba(0,0,0,0.04); }
.grid tr:last-child td { border-bottom: none; }
.row { cursor: pointer; }
.row:hover, .grid tbody tr:hover td { background: var(--panel); }
.grid tr.expiring td { background: rgba(245,158,11,0.12); }

/* ============ КАРТОЧКА КЛИЕНТА: 3 колонки ============ */
.card-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .card-grid { grid-template-columns: 1fr; } }
.card-col { display: flex; flex-direction: column; min-width: 0; }

/* секции карточки (.section) выглядят как .card прототипа */
.section {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.section-head h2 { margin: 0; font-size: 12px; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.5px; }
.section-actions { display: flex; gap: 6px; }

.fields { display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 6px 12px; margin: 0; }
.fields dt { color: var(--faint); font-size: 12px; }
.fields dd { margin: 0; font-size: 13px; }

/* ============ ФОРМЫ ============ */
.card-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field span, .field label { font-size: 10px; text-transform: uppercase; color: var(--faint); letter-spacing: 0.3px; font-weight: 600; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.field textarea { min-height: 60px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--focus); border-color: transparent; }
.form-actions { grid-column: 1 / -1; display: flex; gap: 8px; }

.row-form { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.row-form input, .row-form select {
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font: inherit;
  font-size: 13px;
  background: #fff;
}
.row-form input:focus, .row-form select:focus { outline: 2px solid var(--focus); border-color: transparent; }
.row-form .inline { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.row-form input[type="color"] { flex: 0 0 auto; width: 42px; height: 36px; padding: 2px; cursor: pointer; }

.form-err { color: var(--danger); font-size: 13px; margin: 8px 0 0; }
.form-notice { color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 6px; font-size: 13px; padding: 8px 12px; margin: 8px 0 0; }
.sch-import { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }

.form-msg { font-size: 13px; margin: 8px 0 0; }
.form-msg.error { color: var(--danger); }
.form-msg.ok { color: #15803d; }

/* ============ ВКЛАДКИ АДМИНКИ ============ */
.subtabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.subtab {
  padding: 10px 16px;
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.subtab:hover { color: var(--text); }
.subtab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }

/* Таб-бар КХО: карточка с пилюлями + значки (по макету armory.html .top-tabs) */
.arm-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  background: var(--card);
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  width: fit-content;
  margin-bottom: 18px;
}
.arm-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-radius: 7px;
  transition: background 0.12s, color 0.12s;
}
.arm-tab:hover { background: var(--panel); color: var(--text); }
.arm-tab.active { background: var(--accent); color: #fff; }
.arm-tab-ico { font-size: 15px; line-height: 1; }

/* ============ СПРАВОЧНИК: дерево + панель ============ */
.catalog-layout { display: grid; grid-template-columns: 320px 1fr; gap: 18px; align-items: start; }
.catalog-tree {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 14px 10px;
}
.tree-branch { margin-bottom: 4px; }
.tree-root {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 5px;
  min-height: 28px;
}
.tree-root:hover, .tree-node:hover { background: rgba(0,0,0,0.04); }
.tree-root.active, .tree-node.active { background: #fff; color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.08); font-weight: 500; }
.tree-children { margin: 2px 0 4px 14px; border-left: 1px dashed rgba(0,0,0,0.1); padding-left: 6px; display: flex; flex-direction: column; }
.tree-node {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  border-radius: 5px;
  min-height: 28px;
}
.tree-count { color: var(--faint); font-size: 12px; }
.tree-empty { color: var(--faint); font-size: 12px; padding: 4px 8px; }
.tree-sec { font-weight: 600; }
.tree-subbranch { margin-left: 10px; }
.tree-doc { font-size: 13px; }
.swatch-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
/* Дерево прайса: глиф сворачивания + название слева, цвет/счётчик справа */
.tree-row { display: flex; align-items: center; gap: 2px; }
.tree-row > .tree-node { flex: 1; min-width: 0; }
.tree-toggle { background: none; border: none; padding: 0; width: 16px; flex-shrink: 0; cursor: pointer; color: var(--faint); font-size: 10px; line-height: 1; transition: transform .12s; }
.tree-toggle.leaf { cursor: default; visibility: hidden; }
.tree-branch.collapsed > .tree-row > .tree-toggle, .tree-subbranch.collapsed > .tree-row > .tree-toggle { transform: rotate(-90deg); }
.tree-branch.collapsed > .tree-children, .tree-subbranch.collapsed > .tree-children { display: none; }
.tree-label { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-glyph { flex-shrink: 0; font-size: 12px; }
.tree-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }

.catalog-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 20px 22px;
}
.panel-head { margin-bottom: 12px; }
.breadcrumbs { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.breadcrumbs a { color: var(--text); cursor: pointer; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs span { margin: 0 4px; opacity: 0.6; }
.linklike { color: var(--text); cursor: pointer; text-decoration: underline; }

/* Карточки-боксы (патроны, оружие): обособленный контейнер на каждую карточку */
.slot-card { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 16px 18px; margin-bottom: 16px; }

/* Галереи: каждая галерея — отдельная карточка (по макету armory.html) */
.gallery-list { display: flex; flex-direction: column; }
.gallery-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.gallery-title { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.gallery-title b { font-size: 15px; font-weight: 700; }
.gstatus { padding: 2px 9px; border-radius: 14px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.gstatus-ok { background: rgba(34,197,94,0.12); color: #15803d; }
.gstatus-closed { background: rgba(239,68,68,0.12); color: #b00; }
.gallery-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.gallery-meta-item { display: flex; flex-direction: column; gap: 2px; }
.meta-label { font-size: 10px; text-transform: uppercase; color: var(--faint); font-weight: 600; letter-spacing: 0.3px; }
.gallery-dirs { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gallery-dirs-label { font-size: 10px; text-transform: uppercase; color: var(--faint); font-weight: 600; margin-right: 4px; }
.dir-dot { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 14px; font-size: 11px; font-weight: 600; }
.dir-ok { background: rgba(34,197,94,0.10); color: #15803d; }
.dir-closed { background: rgba(239,68,68,0.12); color: #b00; }

/* ============ ПАКЕТЫ: слоты/опции ============ */
.slots-title { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 700; }

/* Бейджи позиций (порт из прототипа) */
.badge.package { background: rgba(255,107,0,0.15); color: #c2410c; }
.badge.choice { background: rgba(99,102,241,0.15); color: #4f46e5; }
.badge.fixed { background: rgba(0,0,0,0.06); color: #555; }
.badge.caliber { background: rgba(14,116,144,0.12); color: #0e7490; font-variant-numeric: tabular-nums; }
.badge.caliber-missing { background: rgba(220,38,38,0.1); color: #dc2626; }

/* Поля в ряд */
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }

/* Свод калибров */
.caliber-summary { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; background: linear-gradient(180deg, #fafafa, #fff); border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; margin: 14px 0; }
.caliber-summary .item { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; background: #fff; border: 1px solid rgba(14,116,144,0.2); border-radius: 6px; }
.caliber-summary .item .num { font-weight: 600; color: #0e7490; font-size: 16px; }
.caliber-summary .item .label { font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 0.3px; }
.caliber-summary .item.choice .num { color: #4f46e5; }
.caliber-summary .item.choice { border-color: rgba(99,102,241,0.3); background: rgba(99,102,241,0.04); }
.caliber-summary-label { font-size: 11px; text-transform: uppercase; color: #666; font-weight: 600; letter-spacing: 0.5px; align-self: center; margin-right: 4px; }

/* Баннеры */
.warn-banner { background: rgba(245,158,11,0.12); border-left: 3px solid #f59e0b; padding: 10px 14px; border-radius: 4px; font-size: 12px; color: #92400e; margin-top: 8px; line-height: 1.5; }
.info-banner { background: rgba(255,216,67,0.25); border-left: 3px solid #FFB300; padding: 10px 14px; border-radius: 4px; font-size: 12px; color: #5a4a00; margin-bottom: 16px; line-height: 1.5; }

/* Слот-редактор */
.slot { border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; background: #fafafa; }
.slot.choice { background: rgba(99,102,241,0.04); border-color: rgba(99,102,241,0.2); }
.slot-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.slot-header .slot-title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: #555; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.slot-item-row { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 10px; }
.slot-src { color: #999; font-size: 12px; }
.opt-list-title { font-size: 11px; color: #666; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; margin: 10px 0 6px; }
.opt-empty { font-size: 12px; padding: 6px 0; }
.option-row { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: #fff; border-radius: 5px; margin-bottom: 4px; font-size: 13px; }
.option-row .name { flex: 1; }
.option-row .src { font-size: 11px; color: #999; }
.icon-btn { border: none; background: none; cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; opacity: 0.6; }
.icon-btn:hover { opacity: 1; }

/* Модалка выбора позиций */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 100; }
.modal { background: #fff; border-radius: 12px; width: 860px; max-width: 95vw; height: 600px; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; }
.modal-header { padding: 18px 22px; border-bottom: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-size: 16px; font-weight: 600; margin: 0; }
.modal-header .sub { font-size: 12px; color: #888; margin-top: 2px; }
.modal-close { background: none; border: none; font-size: 22px; cursor: pointer; opacity: 0.4; line-height: 1; }
.modal-close:hover { opacity: 1; }
.modal-body { display: flex; flex: 1; overflow: hidden; }
.modal-tree { width: 260px; overflow-y: auto; padding: 12px; background: #fafafa; border-right: 1px solid rgba(0,0,0,0.06); }
.modal-tree .tree-node { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 5px 6px; border-radius: 5px; cursor: pointer; }
.modal-tree .tree-node:hover { background: rgba(0,0,0,0.04); }
.modal-tree .tree-node.selected { background: rgba(99,102,241,0.1); }
.modal-tree .tree-node .label { flex: 1; }
.modal-tree .tree-node .tree-count { font-size: 11px; color: #999; }
.modal-items { flex: 1; overflow-y: auto; padding: 12px 18px; }
.modal-filter { margin-bottom: 12px; }
.modal-filter input { width: 100%; padding: 7px 10px; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; font-size: 13px; font-family: inherit; }
.modal-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 5px; cursor: pointer; }
.modal-item:hover { background: rgba(0,0,0,0.03); }
.modal-item input { cursor: pointer; }
.modal-item .name { flex: 1; font-size: 13px; }
.modal-item .in-doc { font-size: 11px; color: #999; }
.modal-item.disabled { opacity: 0.5; cursor: not-allowed; }
.modal-item.disabled .name { text-decoration: line-through; color: #999; }
.modal-footer { padding: 14px 22px; border-top: 1px solid rgba(0,0,0,0.08); display: flex; justify-content: space-between; align-items: center; background: #fafafa; }
.selected-count { font-size: 13px; color: #666; }
.empty-state { text-align: center; padding: 40px 20px; color: #999; font-size: 13px; }

/* Карточка настройки позиции прайса */
.item-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin-top: 14px; }
.item-card-title { font-size: 12px; text-transform: uppercase; color: #666; font-weight: 700; letter-spacing: 0.4px; margin: 0 0 14px; }
.item-card-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field-label { font-size: 10px; text-transform: uppercase; color: #888; letter-spacing: 0.3px; font-weight: 600; }
.field input, .field select { padding: 9px 12px; font-size: 14px; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; font-family: inherit; width: 100%; }
.field-readout { padding: 9px 12px; font-size: 16px; font-weight: 700; background: #fafafa; border-radius: 6px; border: 1px solid rgba(0,0,0,0.06); }
.item-card-ammo { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 6px; }
.item-card-ammo select { padding: 9px 12px; font-size: 14px; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; font-family: inherit; max-width: 360px; }
.item-card-note { margin-top: 14px; font-style: italic; }
.item-card-actions { margin-top: 18px; display: flex; gap: 8px; }

/* ============ ПАТРОНЫ ============ */
.ammo-batches { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.ammo-batches-head { font-size: 12px; margin-bottom: 8px; }
.ammo-batch { align-items: center; }
.ammo-batch input[name="number"], .ammo-batch input[name="invoice"] { width: 130px; }
.ammo-batch input[name="price"], .ammo-batch input[name="stock"] { width: 110px; }
.ammo-batch-add { border-top: 1px dashed var(--line); padding-top: 10px; }

/* ============ ГАЛЕРЕИ ============ */
.gallery-form { flex-wrap: wrap; }
.gallery-form input[type="number"] { width: 110px; }
.slot-field { display: flex; gap: 6px; align-items: center; }
.slot-field .slot-custom { width: 70px; }
.caliber-picks { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.caliber-pick { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--text); }
.caliber-empty { font-size: 13px; color: var(--muted); }
.swatch { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-strong); vertical-align: middle; }

/* ============ ГРАФИК / ТАБЕЛЬ ============ */
.sch-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 14px; font-size: 13px; }
.sch-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.sch-leg-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-weight: 700;
  font-size: 12px;
  border: 1px solid var(--line-strong);
}
.sch-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.sch-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.sch-table th, .sch-table td { border: 1px solid var(--line); padding: 6px 4px; text-align: center; white-space: nowrap; }
.sch-table thead th { background: var(--panel); color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; position: sticky; top: 0; }
.sch-num { width: 34px; }
.sch-role { text-align: left; min-width: 120px; }
.sch-fio { text-align: left; min-width: 170px; font-weight: 600; }
.sch-dh { width: 30px; font-size: 12px; line-height: 1.1; }
.sch-dow { display: block; color: var(--faint); font-size: 9px; }
.sch-shifts, .sch-zp { font-weight: 600; min-width: 56px; font-variant-numeric: tabular-nums; }
.sch-cell { width: 30px; cursor: pointer; font-weight: 700; user-select: none; }
.sch-cell:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.sch-we { background: rgba(220,38,38,0.06); }
.sch-hol { background: rgba(245,158,11,0.10); }
.sch-zone-row td { text-align: left; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; }

/* ============ СОТРУДНИКИ: права роли ============ */
.perm-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 16px; }
.perm-check { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.perm-check input { width: 16px; height: 16px; }
.field.inline-check { flex-direction: row; align-items: center; gap: 8px; }
.field.inline-check input { width: 16px; height: 16px; }

/* ============ ФОТО ============ */
.photo-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 0; }
.photo-circle {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: var(--hl);
  color: #5a4a00;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 48px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}
.photo-circle img { width: 100%; height: 100%; object-fit: cover; }
.photo-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }

/* ============ КАТЕГОРИИ ============ */
.cat-toggles { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-toggle {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--text);
  border-radius: 16px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.cat-toggle.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ============ ТРАНСПОРТ ============ */
.grid tr.default td { background: var(--hl-soft); }
.star { border: none; background: none; font-size: 18px; cursor: default; color: #c2a200; }
.star.ghost { cursor: pointer; color: var(--faint); }
.star.ghost:hover { color: #c2a200; }

/* ============ КХО (armory) ============ */
.arm-summary { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; font-size: 13px; }
.arm-spacer { flex: 1; }
.status-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 6px; }
.status-ok { background: #22c55e; }
.status-repair { background: #f59e0b; }
.status-broken { background: #ef4444; }
.status-disposed { background: #9ca3af; }
.weapon-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.weapon-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arm-status { margin-left: auto; padding: 5px 8px; font-weight: 600; }
.weapon-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; align-items: flex-end; }
.chk { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; white-space: nowrap; }
.chk input { width: auto; }

/* ============ КАССА (JS-остров) ============ */
.cashier-loading { padding: 40px; text-align: center; color: var(--faint); }
.nd-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.nd-h-num { font-size: 20px; font-weight: 700; }
.nd-h-status { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; padding: 3px 9px; border-radius: 20px; background: var(--hl-soft); color: var(--warn); font-weight: 600; }
.nd-h-status.paid { background: rgba(34,197,94,0.12); color: #15803d; }
.nd-h-status.refunded { background: rgba(220,38,38,0.10); color: #b91c1c; }
.nd-h-status.partial { background: rgba(234,179,8,0.14); color: #a16207; }
.nd-h-actions { margin-left: auto; display: flex; gap: 8px; }
.nd-grid { display: grid; grid-template-columns: 1fr 360px; gap: 16px; align-items: start; }
.nd-left { display: flex; flex-direction: column; gap: 14px; }
.nd-right { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; }
.nd-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.nd-label { font-size: 10px; text-transform: uppercase; color: var(--faint); letter-spacing: 0.3px; font-weight: 600; margin-bottom: 6px; }
.nd-input { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; background: #fff; }
.nd-input:focus { outline: 2px solid var(--focus); border-color: transparent; }
.nd-top-trio { display: grid; grid-template-columns: 150px 1fr 1.3fr; gap: 12px; }
.nd-stack-card { display: flex; flex-direction: column; gap: 8px; }
.nd-stack-row { display: flex; align-items: center; gap: 8px; }
.nd-stack-label { font-size: 11px; color: var(--muted); width: 86px; flex: none; }
.nd-stack-input, .nd-stack-row .nd-input { flex: 1; }
.price-picker { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: #fff; cursor: pointer; font-size: 13px; }
.price-picker-empty { color: var(--faint); border-style: dashed; }
.price-picker .caret { color: var(--faint); }
.price-popover { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.16); padding: 8px; }
.pp-section { font-size: 10px; text-transform: uppercase; color: var(--faint); letter-spacing: 0.3px; font-weight: 700; padding: 8px 6px 4px; }
.pp-block { display: block; width: 100%; text-align: left; padding: 7px 10px; border: none; background: none; border-radius: 7px; cursor: pointer; font-size: 13px; }
.pp-block:hover { background: rgba(0,0,0,0.04); }
.pp-block.active { background: var(--hl-soft); font-weight: 600; }
.pp-empty { padding: 12px; color: var(--faint); font-size: 13px; }
.nd-client-mini { display: flex; align-items: center; gap: 10px; }
.nd-client-mini-info { flex: 1; }
.nd-client-mini-name { font-weight: 600; font-size: 14px; }
.nd-client-mini-meta { font-size: 12px; color: var(--muted); }
.nd-value.empty { color: var(--faint); cursor: pointer; padding: 6px 0; }
.nd-card-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.nd-card-h h3 { margin: 0; font-size: 15px; }
.nd-pill { display: inline-block; min-width: 20px; text-align: center; padding: 1px 7px; border-radius: 20px; background: var(--hl-soft); font-size: 12px; font-weight: 600; }
.nd-empty-state { padding: 22px; text-align: center; color: var(--faint); font-size: 13px; }
.nd-docs-hint { font-size: 12px; color: var(--muted); padding: 4px 0 2px; line-height: 1.5; }
.nd-doc-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.nd-doc-row:first-of-type { border-top: none; }
.nd-doc-row.pending { background: rgba(220,38,38,0.05); margin: 0 -10px; padding: 8px 10px; border-radius: 8px; border-top: none; }
.nd-doc-name { flex: 1; font-size: 13px; }
.nd-doc-sub { color: var(--faint); font-size: 11px; }
.nd-doc-req { font-size: 11px; font-weight: 600; color: var(--danger); white-space: nowrap; }
.nd-doc-req.done { color: var(--ok, #2f8f4e); font-weight: 500; }
.nd-doc-none { font-size: 11px; color: var(--faint); white-space: nowrap; }
.nd-docs-foot { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.nd-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.nd-item:first-of-type { border-top: none; }
.nd-item-main { flex: 1; }
.nd-item-name { font-weight: 600; font-size: 13px; }
.nd-item-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.nd-item-qty { display: flex; align-items: center; gap: 10px; }
.nd-qty-input { width: 64px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 13px; text-align: right; }
.nd-item-amount { font-weight: 700; min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.nd-item-del { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 14px; padding: 4px; }
.nd-item-del:hover { color: var(--danger); }
.nd-pkg { align-items: flex-start; }
.nd-pkg .nd-item-qty { padding-top: 2px; }
.nd-pkg-slots { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.nd-slot { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; border-radius: 8px; background: var(--hl-soft); border: 1px solid var(--line); }
.nd-slot.unresolved { border-color: var(--danger); background: rgba(220,38,38,0.05); }
.nd-slot-label { font-size: 12px; font-weight: 600; color: var(--ink, #1e293b); display: flex; align-items: center; gap: 8px; }
.nd-slot-need { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: var(--muted); }
.nd-slot.unresolved .nd-slot-need { color: var(--danger); }
.nd-slot-fixed { font-size: 12px; color: var(--muted); }
.nd-slot-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.nd-slot-opt { padding: 5px 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: #fff; cursor: pointer; font-size: 12px; color: var(--ink, #1e293b); }
.nd-slot-opt:hover { border-color: var(--accent); }
.nd-slot-opt.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.nd-slot-opt:disabled { cursor: default; opacity: 0.6; }
.nd-slot-opt-cal { opacity: 0.7; font-size: 11px; }
.nd-totals-card { background: var(--accent); color: #fff; }
.nd-totals-grand { display: flex; align-items: baseline; justify-content: space-between; }
.nd-totals-grand span { font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.8; }
.nd-totals-grand b { font-size: 24px; }
.nd-totals-detail { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.18); display: flex; flex-direction: column; gap: 4px; }
.nd-totals-detail div { display: flex; justify-content: space-between; font-size: 12px; opacity: 0.85; }
.nd-pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nd-pay-method { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; transition: all 0.12s; }
.nd-pay-method:hover { border-color: var(--accent); }
.nd-pay-method.selected { border-color: var(--accent); background: var(--hl-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.nd-pay-ico { font-size: 20px; }
.nd-pay-label { font-size: 12px; }
.nd-payment-card.locked { opacity: 0.6; pointer-events: none; }
.nd-receipt-channels { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line-strong); font-size: 12px; text-align: left; }
.nd-receipt-title { font-weight: 600; color: var(--muted, #555); }
.nd-receipt-ch { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.nd-receipt-contact { color: var(--muted, #777); }
.nd-receipt-contact.missing { color: #c0392b; }
.nd-action-btn { width: 100%; padding: 11px; border: 1px solid var(--line-strong); border-radius: 10px; background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.nd-action-btn.required { border-color: #f59e0b; color: var(--warn); background: rgba(245,158,11,0.06); }
.nd-action-btn.done { border-color: #22c55e; color: #15803d; background: rgba(34,197,94,0.06); }
.nd-action-btn.danger { border-color: #dc2626; color: #b91c1c; background: rgba(220,38,38,0.06); margin-top: 8px; }
.nd-action-btn.danger:hover { background: rgba(220,38,38,0.12); }
.nd-action-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.nd-pay-action { width: 100%; padding: 15px; border: none; border-radius: 10px; background: #ddd; color: #888; font-size: 16px; font-weight: 700; cursor: not-allowed; }
.nd-pay-action.active { background: #f97316; color: #fff; cursor: pointer; }
.nd-pay-action.active:hover { background: #ea580c; }
.nd-paid-banner { padding: 15px; text-align: center; border-radius: 10px; background: rgba(34,197,94,0.1); color: #15803d; font-weight: 700; }
.nd-paid-banner.refunded { background: rgba(220,38,38,0.10); color: #b91c1c; }
.nd-paid-banner.partial { background: rgba(234,179,8,0.14); color: #a16207; }

/* Построчный возврат */
.rf-list { display: flex; flex-direction: column; gap: 10px; max-height: 56vh; overflow-y: auto; }
.rf-row { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.rf-name { font-weight: 600; font-size: 14px; }
.rf-done { font-size: 11px; color: var(--faint); }
.rf-axis { display: flex; align-items: center; gap: 8px; }
.rf-axis label { width: 64px; font-size: 12px; color: var(--faint); }
.rf-axis input { width: 110px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); }
.rf-max { font-size: 11px; color: var(--faint); }
.rf-axis .rf-all { margin-left: auto; }
.rf-deposit { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13px; color: var(--text); cursor: pointer; }
.rf-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.rf-sum { font-size: 14px; }
.rf-sum b { font-size: 18px; }
.cashier-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); opacity: 0; transition: all 0.3s; z-index: 200; }
.cashier-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.drafts-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.drafts-strip { display: flex; gap: 4px; flex: 1; overflow-x: auto; }
.draft-tab { display: flex; align-items: center; gap: 6px; padding: 6px 12px; background: rgba(0,0,0,0.05); border-radius: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.draft-tab:hover { background: rgba(0,0,0,0.1); }
.draft-tab.active { background: var(--accent); color: #fff; }
.draft-tab .status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.draft-tab .status-dot.draft { background: #f59e0b; }
.draft-tab-close { opacity: 0.45; font-size: 15px; line-height: 1; }
.draft-tab-close:hover { opacity: 1; }
.new-draft-btn { flex: none; padding: 6px 12px; background: #fff; border: 1px solid var(--line-strong); border-radius: 6px; cursor: pointer; font-size: 13px; }
.new-draft-btn:hover { background: var(--hl-soft); }
.shift-bar { display: flex; align-items: center; gap: 12px; padding: 8px 14px; margin-bottom: 12px; background: #fafafa; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; }
.shift-pin { font-weight: 600; color: var(--muted); }
.shift-pin.active { color: var(--accent); }
.shift-val { color: var(--text); }
.shift-val.empty { color: var(--faint); font-style: italic; }
.shift-bar > button { margin-left: auto; }
.shift-field { display: flex; flex-direction: column; gap: 4px; }
.shift-field label { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.3px; }
.shift-modal { height: auto; width: 440px; }
.sm-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px; overflow: visible; }
.sm-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.sm-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
.caliber-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; margin: 8px 0 4px; background: linear-gradient(180deg, #fafafa, #fff); border: 1px solid var(--line); border-radius: 10px; }
.caliber-summary-label { font-size: 10px; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.5px; line-height: 1.2; }
.cal-chip { display: flex; align-items: baseline; gap: 6px; padding: 4px 12px; background: #fff; border: 1px solid rgba(14,116,144,0.25); border-radius: 6px; }
.cal-num { font-weight: 700; color: #0e7490; font-size: 18px; font-variant-numeric: tabular-nums; }
.cal-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.3px; }
.nd-qty-step { width: 26px; height: 28px; border: 1px solid var(--line-strong); border-radius: 6px; background: #fff; cursor: pointer; font-size: 15px; line-height: 1; color: var(--muted); flex: none; }
.nd-qty-step:hover { background: var(--hl-soft); color: var(--accent); border-color: var(--accent); }
.cashier-modal { height: 540px; }
.cashier-modal-body { padding: 0; flex-direction: column; }
.cm-tabs { display: flex; gap: 4px; padding: 10px 12px 0; background: #fafafa; border-bottom: 1px solid rgba(0,0,0,0.08); flex: none; }
.cm-tab { padding: 8px 18px; border: none; background: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.cm-tab:hover { color: var(--accent); }
.cm-tab.selected { color: var(--accent); border-bottom-color: var(--accent); }
.cm-panes { display: flex; flex: 1; overflow: hidden; }
.cm-pane { display: flex; flex-direction: column; width: 100%; overflow: hidden; }
.cm-tree { width: 240px; overflow-y: auto; padding: 12px; background: #fafafa; border-right: 1px solid rgba(0,0,0,0.06); }
.cm-items { display: flex; flex-direction: column; flex: 1; padding: 0; overflow: hidden; }
.cm-filter { padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.cm-filter .cm-search { margin: 0; width: 100%; }
.cm-items .cm-list { flex: 1; overflow-y: auto; padding: 8px 12px; }
.cm-foot { padding: 12px 16px; border-top: 1px solid rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fafafa; }
.cm-count { font-size: 13px; color: var(--muted); }
.cm-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cm-item:hover { background: var(--hl-soft); }
.cm-item input { cursor: pointer; }
.cm-item .name { flex: 1; }
.cm-search { margin: 14px; width: calc(100% - 28px); }
.cm-list { flex: 1; overflow-y: auto; padding: 0 14px 14px; }
.cm-doc { font-size: 10px; text-transform: uppercase; color: var(--faint); letter-spacing: 0.3px; font-weight: 700; padding: 12px 6px 4px; }
.cm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 9px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: 13px; }
.cm-row:hover { background: var(--hl-soft); }
.cm-row-name { font-weight: 500; }
.cm-cal { color: var(--muted); font-weight: 400; font-size: 12px; }
.cm-row-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ============ КХО «МОИ ВЫДАЧИ» (остров issues.js) ============ */
.issues-loading { padding: 22px; color: var(--faint); font-size: 13px; }
.issues-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.issues-col { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.issues-col-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.issues-col-head > span:first-child { font-size: 14px; font-weight: 700; }
.issues-count { min-width: 22px; text-align: center; padding: 1px 8px; border-radius: 20px; background: var(--hl-soft); font-size: 12px; font-weight: 700; color: var(--muted); }
.issues-empty { padding: 18px; text-align: center; color: var(--faint); font-size: 13px; }
.issue-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; background: #fff; border-left: 3px solid var(--line-strong); }
.issue-card.pending { border-left-color: #f59e0b; background: rgba(245,158,11,0.04); }
.issue-card.accepted { border-left-color: #0e7490; }
.issue-card.issued { border-left-color: #2563eb; background: rgba(37,99,235,0.04); }
.issue-card.completed { border-left-color: #22c55e; opacity: 0.85; }
.issue-client { font-weight: 700; font-size: 14px; }
.issue-meta { font-size: 12px; color: var(--muted); }
.issue-weapon { width: 100%; padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 13px; background: #fff; }
.issue-weapon:focus { outline: 2px solid var(--focus); border-color: transparent; }
.issue-card .btn { align-self: flex-start; }
.issue-actions { display: flex; gap: 8px; align-self: flex-start; }
.issue-actions .btn { align-self: auto; }
.issue-card .btn.ghost { background: #fff; color: var(--muted); border: 1px solid var(--line-strong); }
.issue-card .btn.ghost:hover { background: #f5f5f5; color: var(--text); }
.issue-weapon-tag { display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 6px; background: rgba(37,99,235,0.1); color: #1d4ed8; font-size: 12px; font-weight: 600; }
.issue-done-tag { display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 6px; background: rgba(34,197,94,0.12); color: #15803d; font-size: 12px; font-weight: 700; }
.issues-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); z-index: 200; }
@media (max-width: 720px) { .issues-grid { grid-template-columns: 1fr; } }

/* Документы клуба (КХО → Документы): контроль срока действия */
#clubdocs-body .row-form { align-items: flex-end; row-gap: 14px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); }
.fld { display: flex; flex-direction: column; gap: 4px; }
.fld > span:first-child { font-size: 11px; font-weight: 600; color: var(--muted); }
.fld-grow { flex: 1 1 150px; }
.fld-grow input { width: 100%; box-sizing: border-box; }
.row-actions { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; }
.doc-exp { display: inline-block; padding: 6px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; background: var(--hl-soft); color: var(--muted); white-space: nowrap; }
.doc-exp.doc-ok { background: rgba(34,197,94,0.12); color: #15803d; }
.doc-exp.doc-soon { background: rgba(245,158,11,0.14); color: #b45309; }
.doc-exp.doc-expired { background: rgba(220,38,38,0.12); color: #b91c1c; font-weight: 700; }
.docs-types { margin-top: 22px; border: 1px solid var(--line); border-radius: 10px; padding: 6px 14px; background: var(--card); }
.docs-types > summary { cursor: pointer; font-weight: 600; padding: 8px 0; color: var(--muted); }
.docs-types > summary:hover { color: var(--text); }
.docs-types .row-form { margin-top: 8px; align-items: center; }

/* КХО-формы с подписями полей: колонки выравниваются по нижнему краю */
#ammo-body .row-form, #armory-body .row-form, #galleries-section .gallery-form { align-items: flex-end; row-gap: 14px; }

/* Закрытия галерей на ремонт/ТО — отдельная карточка под списком галерей */
.closures-block { margin-top: 16px; }

/* Патроны: ручное списание + журнал расхода */
.ammo-consume { align-items: flex-end; margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--line-strong); border-radius: 9px; background: rgba(220,38,38,0.04); }
.ammo-consume-label { font-size: 12px; font-weight: 700; color: #b91c1c; align-self: center; white-space: nowrap; }
.ammo-consume .fld-grow { flex: 1 1 220px; }
.ammo-journal { margin-top: 26px; }
.journal-filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 6px; }
.journal-table { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); }
.journal-row { display: grid; grid-template-columns: 140px 1.6fr 90px 1.8fr 120px; gap: 12px; padding: 9px 14px; align-items: center; border-top: 1px solid var(--line); font-size: 13px; }
.journal-row:first-child { border-top: none; }
.journal-head { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; background: var(--hl-soft); }
.journal-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.src-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.src-order { background: rgba(37,99,235,0.1); color: #1d4ed8; }
.src-manual { background: rgba(245,158,11,0.14); color: #b45309; }
.src-disposal { background: rgba(120,113,108,0.14); color: #57534e; }

/* Настройки КХО */
.arm-settings-form { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; margin-top: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); max-width: 460px; }
.arm-settings-form .row-actions { margin-left: 0; align-items: center; }
.arm-setting { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.arm-setting input[type="checkbox"] { width: 18px; height: 18px; }
.arm-setting-msg { font-size: 12px; color: #15803d; font-weight: 600; }
@media (max-width: 720px) {
	.journal-row { grid-template-columns: 1fr 1fr; }
	.journal-head { display: none; }
}

/* ============ КАЛЕНДАРЬ / БРОНИ (остров calendar.js) ============ */
/* Статусные цвета броней — единый источник для сетки, чипов, месяца и карточки.
   На :root, а не на .calendar, чтобы переменные были доступны и в модалке брони
   (она монтируется в document.body, вне .calendar). */
:root {
  --st-ozhidanie: #b45309;  --st-ozhidanie-bg: rgba(245,158,11,0.14);
  --st-podtverdil: #15803d; --st-podtverdil-bg: rgba(34,197,94,0.14);
  --st-prishel: #1d4ed8;    --st-prishel-bg: rgba(37,99,235,0.12);
  --st-neprishel: #57534e;  --st-neprishel-bg: rgba(120,113,108,0.14);
  --st-otmena: #b91c1c;     --st-otmena-bg: rgba(220,38,38,0.10);
  --st-deleted: #888;       --st-deleted-bg: rgba(0,0,0,0.05);
}
.cal-loading { padding: 22px; color: var(--faint); font-size: 13px; }
.cal-empty { padding: 22px; color: var(--faint); font-size: 13px; }

/* --- тулбар --- */
.cal-toolbar-wrap { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.cal-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cal-views { display: flex; gap: 2px; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 8px; padding: 2px; }
.cal-view-btn { border: none; background: none; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.cal-view-btn:hover { color: var(--text); }
.cal-view-btn.active { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.cal-nav { display: flex; align-items: center; gap: 6px; }
.cal-nav-btn { border: 1px solid var(--line-strong); background: #fff; border-radius: 7px; padding: 6px 11px; font-size: 14px; line-height: 1; cursor: pointer; color: var(--text); }
.cal-nav-btn:hover { background: var(--hl-soft); border-color: var(--accent); }
.cal-nav-btn.cal-today { font-size: 13px; }
.cal-period-wrap { position: relative; }
.cal-period { font-size: 14px; font-weight: 600; min-width: 200px; text-align: center; border: 1px solid var(--line-strong); background: #fff; border-radius: 7px; padding: 6px 12px; cursor: pointer; color: var(--text); }
.cal-period:hover { background: var(--hl-soft); border-color: var(--accent); }
.cal-spacer { flex: 1; }

/* --- датапикер (выпадает по клику на период) --- */
.cal-dp { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,0.16); padding: 12px; width: 280px; }
.cal-dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.cal-dp-nav { border: 1px solid var(--line-strong); background: #fff; border-radius: 6px; padding: 4px 9px; font-size: 14px; line-height: 1; cursor: pointer; }
.cal-dp-nav:hover { background: var(--hl-soft); }
.cal-dp-month { flex: 1; }
.cal-dp-month, .cal-dp-year { padding: 5px 7px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 13px; }
.cal-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dp-dow { text-align: center; font-size: 10px; font-weight: 700; color: var(--faint); text-transform: uppercase; padding: 4px 0; }
.cal-dp-dow.we { color: #dc2626; }
.cal-dp-cell { text-align: center; font-size: 13px; padding: 6px 0; border-radius: 6px; cursor: pointer; color: var(--text); }
.cal-dp-cell:hover { background: var(--hl-soft); }
.cal-dp-cell.other { color: var(--faint); opacity: 0.6; }
.cal-dp-cell.we, .cal-dp-cell.hol { color: #dc2626; }
.cal-dp-cell.today { background: rgba(255,224,116,0.5); color: #92400e; font-weight: 700; }
.cal-dp-cell.sel { background: #1a1a1a; color: #fff; }
.cal-dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.cal-dp-today { border: 1px solid var(--line-strong); background: #fff; border-radius: 6px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.cal-dp-today:hover { background: var(--hl-soft); border-color: var(--accent); }
.cal-dp-foot span { font-size: 10px; color: var(--faint); }
.cal-add-btn { border: 1px solid var(--accent); background: var(--accent); color: #fff; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cal-add-btn:hover { opacity: 0.88; }
.cal-filters { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cal-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-fchip { border: 1px solid var(--line-strong); background: #fff; border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; color: var(--faint); cursor: pointer; opacity: 0.55; }
.cal-fchip:hover { opacity: 0.85; }
.cal-fchip.on { opacity: 1; color: var(--text); border-color: var(--accent); }
.cal-status-chips .cal-fchip.on.status-ozhidanie  { background: var(--st-ozhidanie-bg);  color: var(--st-ozhidanie);  border-color: var(--st-ozhidanie); }
.cal-status-chips .cal-fchip.on.status-podtverdil { background: var(--st-podtverdil-bg); color: var(--st-podtverdil); border-color: var(--st-podtverdil); }
.cal-status-chips .cal-fchip.on.status-prishel    { background: var(--st-prishel-bg);    color: var(--st-prishel);    border-color: var(--st-prishel); }
.cal-status-chips .cal-fchip.on.status-neprishel  { background: var(--st-neprishel-bg);  color: var(--st-neprishel);  border-color: var(--st-neprishel); }
.cal-status-chips .cal-fchip.on.status-otmena     { background: var(--st-otmena-bg);     color: var(--st-otmena);     border-color: var(--st-otmena); }
.cal-status-chips .cal-fchip.on.status-deleted    { background: var(--st-deleted-bg);    color: var(--st-deleted);    border-color: var(--st-deleted); }
.cal-notes-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }

/* --- общий каркас сеток время-ось + колонки --- */
.cal-body { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; overflow-x: auto; }
.cal-gutter { position: relative; width: 48px; flex: none; }
.cal-hour-label { position: absolute; right: 6px; font-size: 11px; color: var(--faint); transform: translateY(-50%); font-variant-numeric: tabular-nums; }
.cal-hour-line { position: absolute; left: 0; right: 0; border-top: 1px solid var(--line); pointer-events: none; }
.cal-hour-line.half { border-top: 1px dashed rgba(0,0,0,0.05); }
/* зум сетки времени (день/неделя) */
.cal-zoom { display: inline-flex; align-items: center; gap: 2px; margin-right: 8px; }
.cal-zoom-btn { border: 1px solid var(--line-strong); background: #fff; color: var(--text); border-radius: 6px; min-width: 28px; height: 28px; font-size: 13px; cursor: pointer; padding: 0 6px; }
.cal-zoom-btn:hover:not(:disabled) { background: #f5f5f5; }
.cal-zoom-btn:disabled { opacity: 0.4; cursor: default; }
.cal-zoom-reset { font-size: 11px; font-variant-numeric: tabular-nums; min-width: 44px; }
/* meta (телефон/авто) и бейдж группы на карточке брони */
.cal-ev-meta { color: var(--faint); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-group-badge { position: absolute; top: 3px; right: 4px; background: rgba(0,0,0,0.18); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 8px; }
.cal-ev.locked .cal-group-badge { right: 22px; }
.cal-month-group { font-size: 9px; opacity: 0.8; }
/* C3: праздники/выходные + подсказка */
.cal-redday { color: var(--danger); font-size: 13px; font-weight: 600; margin-left: 6px; align-self: center; }
.cal-day-badge { background: var(--danger); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 6px; }
.cal-month-cell-head { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.cal-hol-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); vertical-align: middle; }
.cal-month-count { font-size: 10px; font-weight: 700; color: var(--faint); background: rgba(0,0,0,0.05); border-radius: 8px; padding: 0 6px; }
.cal-hint { font-size: 12px; color: var(--faint); padding: 4px 2px 8px; }
/* C4: метаинфо галереи + калибры направлений */
.cal-gallery-meta { font-size: 10px; font-weight: 400; color: var(--faint); }
.cal-dir-calibers { font-size: 11px; color: var(--faint); margin-top: 4px; }
/* C2: форма брони — участники, статусы, замок, удалённая бронь */
.cal-part-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.cal-part-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--hl); color: #5a4a00; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 11px; flex-shrink: 0; }
.cal-part-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cal-part-name { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-part-frombase { color: #16a34a; font-size: 10px; font-weight: 600; }
.cal-part-meta { font-size: 11px; color: var(--faint); }
.cal-part-status { border: none; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; padding: 2px 8px; cursor: pointer; }
.cal-part-status.status-ozhidanie  { background: var(--st-ozhidanie-bg);  color: var(--st-ozhidanie); }
.cal-part-status.status-podtverdil { background: var(--st-podtverdil-bg); color: var(--st-podtverdil); }
.cal-part-status.status-prishel    { background: var(--st-prishel-bg);    color: var(--st-prishel); }
.cal-part-status.status-neprishel  { background: var(--st-neprishel-bg);  color: var(--st-neprishel); }
.cal-part-status.status-otmena     { background: var(--st-otmena-bg);     color: var(--st-otmena); }
.cal-part-rm { border: none; background: transparent; color: var(--faint); cursor: pointer; font-size: 13px; padding: 2px 6px; border-radius: 5px; }
.cal-part-rm:hover { background: rgba(220,38,38,0.1); color: var(--danger); }
.cal-client-linked { color: #16a34a; font-size: 10px; font-weight: 600; }
.cal-lock-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; align-self: flex-end; padding-bottom: 6px; }
.cal-deleted-banner { background: rgba(220,38,38,0.08); color: var(--danger); border-radius: 8px; padding: 8px 12px; font-size: 12px; }
.cal-form .is-disabled { opacity: 0.55; cursor: not-allowed; }
.cal-cat-chip { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; color: #fff; vertical-align: middle; margin-right: 3px; }
.cal-client-cats, .cal-client-linked { vertical-align: middle; }

/* --- вид «День» --- */
.cal-day { display: flex; gap: 8px; }
.cal-day-cols { display: flex; gap: 12px; flex: 1; }
.cal-gallery { display: flex; flex-direction: column; min-width: 160px; flex: 1; }
.cal-gallery-name { font-size: 13px; font-weight: 700; padding: 4px 0; text-align: center; color: var(--text); }
.cal-dir-heads { display: flex; gap: 0; }
.cal-dir-head { flex: 1; text-align: center; font-size: 10px; font-weight: 600; color: var(--faint); padding: 2px 0; border-bottom: 1px solid var(--line); text-transform: uppercase; }
.cal-gallery-body { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(0,0,0,0.015) 48px); }
.cal-dir-cols { position: absolute; inset: 0; display: flex; }
.cal-dir-col { flex: 1; border-right: 1px dashed var(--line); cursor: pointer; }
.cal-dir-col:last-child { border-right: none; }
.cal-dir-col:hover { background: var(--hl-soft); }
.cal-dir-col.closed { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.04), rgba(0,0,0,0.04) 6px, rgba(0,0,0,0.08) 6px, rgba(0,0,0,0.08) 12px); cursor: not-allowed; }
.cal-dir-col.closed:hover { background: repeating-linear-gradient(45deg, rgba(0,0,0,0.04), rgba(0,0,0,0.04) 6px, rgba(0,0,0,0.08) 6px, rgba(0,0,0,0.08) 12px); }

/* --- событие (бронь) --- */
.cal-ev { position: absolute; box-sizing: border-box; border-radius: 6px; padding: 3px 6px; font-size: 11px; overflow: hidden; cursor: pointer; border-left: 3px solid var(--line-strong); background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.12); transition: box-shadow 0.1s; }
.cal-ev:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 5; }
.cal-ev.locked { box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.15); }
.cal-ev-time { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-ev-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev-note { color: var(--muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-ev.status-ozhidanie  { border-left-color: var(--st-ozhidanie);  background: var(--st-ozhidanie-bg); }
.cal-ev.status-podtverdil { border-left-color: var(--st-podtverdil); background: var(--st-podtverdil-bg); }
.cal-ev.status-prishel    { border-left-color: var(--st-prishel);    background: var(--st-prishel-bg); }
.cal-ev.status-neprishel  { border-left-color: var(--st-neprishel);  background: var(--st-neprishel-bg); }
.cal-ev.status-otmena     { border-left-color: var(--st-otmena);     background: var(--st-otmena-bg); text-decoration: line-through; }
.cal-ev.status-deleted    { border-left-color: var(--st-deleted);    background: var(--st-deleted-bg); opacity: 0.6; text-decoration: line-through; }

/* --- вид «Неделя» (тот же день-грид, 7 дней рядом, компактно) --- */
.cal-week { display: flex; gap: 8px; align-items: flex-start; overflow-x: auto; }
.cal-week-gutter { flex: none; }
.cal-week-days { display: flex; gap: 8px; flex: 1; }
.cal-week-day { flex: 1; min-width: 150px; display: flex; flex-direction: column; }
.cal-week-day-head { font-size: 12px; font-weight: 600; text-align: center; padding: 5px 0; margin-bottom: 4px; border-bottom: 1px solid var(--line); cursor: pointer; color: var(--muted); }
.cal-week-day-head:hover { color: var(--text); background: var(--hl-soft); }
.cal-week-day-head.today { color: var(--accent); font-weight: 700; }
.cal-week-day.red { background: rgba(220,38,38,0.04); border-radius: 8px; }
.cal-week-day-galls { display: flex; gap: 6px; }
/* в неделе блоки галерей компактнее */
.cal-week-day .cal-gallery { min-width: 0; }
.cal-week-day .cal-gallery-name { font-size: 11px; }
.cal-week-day .cal-dir-head { font-size: 9px; }
.cal-week-day .cal-ev { font-size: 10px; padding: 1px 3px; }
.cal-week-day .cal-ev-name { font-size: 10px; }

/* --- вид «Месяц» --- */
.cal-month { display: flex; flex-direction: column; }
.cal-month-head { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.cal-month-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(96px, auto); gap: 6px; }
.cal-month-cell { border: 1px solid var(--line); border-radius: 8px; padding: 4px; display: flex; flex-direction: column; gap: 2px; background: #fff; overflow: hidden; }
.cal-month-cell.other { background: var(--panel); opacity: 0.7; }
.cal-month-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cal-month-cell.red { background: rgba(220,38,38,0.05); }
.cal-month-cell.red.today { background: rgba(255,224,116,0.32); }
.cal-month-num { font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer; align-self: flex-start; padding: 1px 5px; border-radius: 5px; }
.cal-month-num:hover { background: var(--hl-soft); color: var(--text); }
.cal-month-ev { font-size: 10px; padding: 1px 5px; border-radius: 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-left: 3px solid var(--line-strong); }
.cal-month-ev.status-ozhidanie  { border-left-color: var(--st-ozhidanie);  background: var(--st-ozhidanie-bg);  color: var(--st-ozhidanie); }
.cal-month-ev.status-podtverdil { border-left-color: var(--st-podtverdil); background: var(--st-podtverdil-bg); color: var(--st-podtverdil); }
.cal-month-ev.status-prishel    { border-left-color: var(--st-prishel);    background: var(--st-prishel-bg);    color: var(--st-prishel); }
.cal-month-ev.status-neprishel  { border-left-color: var(--st-neprishel);  background: var(--st-neprishel-bg);  color: var(--st-neprishel); }
.cal-month-ev.status-otmena     { border-left-color: var(--st-otmena);     background: var(--st-otmena-bg);     color: var(--st-otmena); }
.cal-month-more { font-size: 10px; color: var(--muted); cursor: pointer; padding: 1px 5px; font-weight: 600; }
.cal-month-more:hover { color: var(--accent); }

/* --- модалка брони (компактная, авто-высота поверх общего .modal) --- */
.cal-modal { width: 560px; height: auto; max-height: 88vh; }
.cal-modal-body { display: block; padding: 18px 22px; overflow-y: auto; }
/* Перетаскиваемая панель брони: фон не затемняем (виден обзор записей), окно тащим за заголовок. */
.cal-resv-overlay { background: transparent; }
.cal-resv-overlay .cal-modal { box-shadow: 0 18px 60px rgba(0,0,0,0.40); border: 1px solid rgba(0,0,0,0.18); }
.cal-resv-overlay .modal-header { cursor: move; user-select: none; }
.cal-resv-overlay .modal-close { cursor: pointer; }
.cal-form { display: flex; flex-direction: column; gap: 12px; }
.cal-form-row { display: flex; gap: 10px; align-items: flex-end; }
.cal-form .fld input, .cal-form .fld select, .cal-form .fld textarea { padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 13px; box-sizing: border-box; width: 100%; }
.cal-form .fld input:focus, .cal-form .fld select:focus, .cal-form .fld textarea:focus { outline: 2px solid var(--focus); border-color: transparent; }
.cal-form .fld textarea { resize: vertical; }
.cal-pick-client { border: 1px solid var(--line-strong); background: #fff; border-radius: 7px; padding: 7px 12px; font-size: 13px; cursor: pointer; white-space: nowrap; }
.cal-pick-client:hover { background: var(--hl-soft); border-color: var(--accent); }
.cal-parts-block { border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px; background: var(--panel); }
.cal-parts-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cal-parts-head > span { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-right: auto; }
.cal-part-add-base, .cal-part-add-manual { border: 1px solid var(--line-strong); background: #fff; border-radius: 6px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--text); }
.cal-part-add-base:hover, .cal-part-add-manual:hover { background: var(--hl-soft); border-color: var(--accent); }
.cal-parts { display: flex; flex-direction: column; gap: 4px; }
.cal-part-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; }
.cal-part-name { flex: 1; }
.cal-part-rm { border: none; background: none; color: var(--faint); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }
.cal-part-rm:hover { color: var(--danger); }
.cal-addbase { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; color: var(--muted); }
.cal-form-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); }
.cal-form-actions button { border: 1px solid var(--line-strong); background: #fff; border-radius: 8px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); }
.cal-form-actions button:hover { background: var(--hl-soft); border-color: var(--accent); }
.cal-form-actions .cal-save, .cal-form-actions .cal-mp-save { background: var(--accent); color: #fff; border-color: var(--accent); }
.cal-form-actions .cal-save:hover, .cal-form-actions .cal-mp-save:hover { opacity: 0.88; background: var(--accent); }
.cal-form-actions .cal-to-order { margin-left: auto; }
.cal-form-actions button.danger { color: var(--danger); border-color: rgba(220,38,38,0.3); }
.cal-form-actions button.danger:hover { background: rgba(220,38,38,0.05); }
.cal-form-actions .cal-dup { margin-left: 0; }

/* --- жёлтая шапка модалки (зеркало прототипа .modal-header) --- */
.cal-modal .modal-header { background: #FFE074; border-bottom: 1px solid rgba(0,0,0,0.12); }
.cal-modal .modal-header h3 { color: #1a1a1a; }
.cal-modal .modal-close { color: #1a1a1a; }

/* --- пилюли статуса в модалке (цвета — как в сетке календаря, --st-*) --- */
.cal-status-field { display: flex; flex-direction: column; gap: 6px; }
.cal-status-label { font-size: 12px; color: var(--muted); }
.cal-status-label small { color: var(--faint); font-weight: 400; }
.cal-st-pills { display: flex; gap: 6px; flex-wrap: wrap; }
/* Цвет статуса виден всегда (приглушённо), при выборе (.on) — полный цвет + рамка. */
.cal-st-pill { border: 1px solid var(--line-strong); border-radius: 16px; padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer; opacity: 0.5; }
.cal-st-pill:hover { opacity: 0.8; }
.cal-st-pill.on { opacity: 1; box-shadow: inset 0 0 0 1px currentColor; }
.cal-st-pill.status-ozhidanie  { background: var(--st-ozhidanie-bg);  color: var(--st-ozhidanie);  border-color: var(--st-ozhidanie); }
.cal-st-pill.status-podtverdil { background: var(--st-podtverdil-bg); color: var(--st-podtverdil); border-color: var(--st-podtverdil); }
.cal-st-pill.status-prishel    { background: var(--st-prishel-bg);    color: var(--st-prishel);    border-color: var(--st-prishel); }
.cal-st-pill.status-neprishel  { background: var(--st-neprishel-bg);  color: var(--st-neprishel);  border-color: var(--st-neprishel); }
.cal-st-pill.status-otmena     { background: var(--st-otmena-bg);     color: var(--st-otmena);     border-color: var(--st-otmena); }
.cal-st-pill.status-deleted    { background: var(--st-deleted-bg);    color: var(--st-deleted);    border-color: var(--st-deleted); }

/* --- пилюли направлений в модалке --- */
.cal-dir-field { display: flex; flex-direction: column; gap: 6px; }
.cal-dir-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-dir-pill { border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; color: var(--muted); min-width: 38px; }
.cal-dir-pill:hover { border-color: var(--accent); }
.cal-dir-pill.on { background: var(--accent); color: #fff; border-color: var(--accent); }

/* --- ручки изменения размера + ghost создания --- */
.cal-rz { position: absolute; z-index: 6; }
.cal-rz-b { left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize; }
.cal-rz-r { top: 0; bottom: 0; right: 0; width: 7px; cursor: ew-resize; }
.cal-ev:hover .cal-rz-b { box-shadow: inset 0 -2px 0 rgba(0,0,0,0.25); }
.cal-ev:hover .cal-rz-r { box-shadow: inset -2px 0 0 rgba(0,0,0,0.25); }
.cal-ev.creating { opacity: 0.7; border-style: dashed; pointer-events: none; background: var(--st-ozhidanie-bg); border-left-color: var(--st-ozhidanie); }

/* --- модалка дублирования --- */
.cal-dup-src { background: var(--panel); border-radius: 6px; padding: 10px 12px; font-size: 13px; }
.cal-dup-src-h { font-size: 10px; text-transform: uppercase; color: var(--faint); font-weight: 700; letter-spacing: 0.4px; margin-bottom: 4px; }
.cal-dup-src-meta { color: var(--muted); }
.cal-dup-src-date { font-size: 11px; color: var(--faint); }
.cal-dup-modes { display: flex; gap: 6px; }
.cal-dup-mode { flex: 1; border: 1px solid var(--line-strong); background: #fff; border-radius: 8px; padding: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--text); }
.cal-dup-mode.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.cal-dup-freq { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.cal-dup-freq input { width: 60px; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 13px; box-sizing: border-box; }
.cal-dup-freq select { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 13px; }
.cal-dup-note { font-size: 11px; color: var(--muted); background: rgba(255,224,116,0.22); padding: 8px 12px; border-radius: 5px; line-height: 1.4; }
.cal-dup-summary { font-size: 12px; color: var(--muted); font-weight: 600; }
.cal-dup-apply { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }

/* --- тост --- */
.cal-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 12px); background: var(--accent); color: #fff; padding: 12px 20px; border-radius: 10px; font-size: 13px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); z-index: 300; opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; }
.cal-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 720px) {
  .cal-month-grid { grid-auto-rows: minmax(70px, auto); }
  .cal-modal { width: 95vw; }
}

/* ===== Журнал заказов (история) ===== */
.hist-filters { background: #fff; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 10px; }
.hist-frow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hist-flabel { font-size: 10px; text-transform: uppercase; color: #888; font-weight: 700; letter-spacing: 0.4px; }
.hist-chiprow { display: flex; gap: 6px; flex-wrap: wrap; }
.hist-chip { padding: 5px 12px; border-radius: 14px; background: rgba(0,0,0,0.05); color: #444; font-size: 12px; cursor: pointer; user-select: none; border: 1px solid transparent; font-weight: 500; }
.hist-chip:hover { background: rgba(0,0,0,0.08); }
.hist-chip.active { background: var(--accent); color: #fff; }
.hist-or { font-size: 11px; color: #999; }
.hist-dash { color: #999; }
.hist-finput { padding: 6px 10px; border: 1px solid rgba(0,0,0,0.15); border-radius: 5px; font-size: 13px; font-family: inherit; }
.hist-fsearch { flex: 1; min-width: 220px; padding: 7px 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 5px; font-size: 13px; font-family: inherit; }

.hist-summary { display: flex; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.hist-sum-card { flex: 1; min-width: 160px; background: #fff; border-radius: 10px; padding: 12px 16px; border: 1px solid rgba(0,0,0,0.06); }
.hist-sum-label { font-size: 10px; text-transform: uppercase; color: #888; font-weight: 700; letter-spacing: 0.4px; margin-bottom: 4px; }
.hist-sum-big { font-size: 22px; font-weight: 700; color: #1a1a1a; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hist-sum-sub { font-size: 11px; color: #888; margin-top: 4px; }
.hist-sum-card.green { background: rgba(22,163,74,0.06); border-color: rgba(22,163,74,0.18); }
.hist-sum-card.green .hist-sum-big { color: #15803d; }
.hist-sum-card.red { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.18); }
.hist-sum-card.red .hist-sum-big { color: #b91c1c; }

.hist-table-wrap { background: #fff; border-radius: 10px; border: 1px solid rgba(0,0,0,0.06); overflow: hidden; }
.hist-table { width: 100%; border-collapse: collapse; }
.hist-table th { background: #fafafa; text-align: left; padding: 10px 14px; font-size: 11px; text-transform: uppercase; color: #666; font-weight: 700; letter-spacing: 0.4px; border-bottom: 1px solid rgba(0,0,0,0.06); }
.hist-table td { padding: 10px 14px; font-size: 13px; border-bottom: 1px solid rgba(0,0,0,0.04); }
.hist-table tr:last-child td { border-bottom: none; }
.hist-row { cursor: pointer; }
.hist-row:hover td { background: #fafafa; }
.hist-num { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.hist-struck { text-decoration: line-through; color: #999; }
.hist-empty { color: #888; font-style: italic; padding: 30px; text-align: center; background: #fff; border-radius: 10px; border: 1px solid rgba(0,0,0,0.06); }
.method-ico { display: inline-block; width: 18px; text-align: center; }

/* ── Статистика (Фаза 7) ── */
.stat-sub { color: #888; font-size: 13px; margin: 4px 0 0; }
.stat-tabs { margin-bottom: 14px; }
.stat-kpis { margin-bottom: 6px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 880px) { .two-col { grid-template-columns: 1fr; } }
.hist-sum-card.amber { background: rgba(245,158,11,0.07); border-color: rgba(245,158,11,0.2); }
.hist-sum-card.amber .hist-sum-big { color: #b45309; }
.stat-delta { font-size: 12px; font-weight: 600; margin-top: 4px; }
.stat-delta.up { color: #15803d; }
.stat-delta.down { color: #b91c1c; }
.stat-delta-sub { color: #999; font-weight: 400; margin-left: 6px; }
.stat-note { font-size: 12px; color: #888; margin: 8px 0 0; }
.stat-soon { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 40px; text-align: center; color: #888; font-style: italic; }
.stat-bars { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 96px; align-items: center; gap: 10px; }
.bar-row .bar-name { font-size: 12px; color: #555; }
.bar-row .bar-val { font-size: 12px; color: #888; text-align: right; font-variant-numeric: tabular-nums; }
.bar-row .track { background: var(--surface-2, rgba(0,0,0,0.06)); border-radius: 4px; height: 18px; overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, #FFE074, #fbbf24); min-width: 2px; transition: width .2s; }
.bar-row .fill.blue { background: linear-gradient(90deg, #93c5fd, #3b82f6); }
.bar-row .fill.green { background: linear-gradient(90deg, #86efac, #16a34a); }
.bar-row .fill.amber { background: linear-gradient(90deg, #fde68a, #f59e0b); }
.bar-row .fill.red { background: linear-gradient(90deg, #fca5a5, #dc2626); }
.stat-stock-pill { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 600; background: rgba(0,0,0,0.06); color: #555; }
.stat-stock-pill.green { background: rgba(22,163,74,0.15); color: #15803d; }
.stat-stock-pill.amber { background: rgba(245,158,11,0.18); color: #92400e; }
.stat-stock-pill.red { background: rgba(220,38,38,0.15); color: #b91c1c; }
.stat-heatmap { display: grid; grid-template-columns: 36px repeat(24, 1fr); gap: 2px; font-size: 10px; align-items: center; }
.stat-hm-head { text-align: center; color: #888; padding: 2px 0; }
.stat-hm-day { color: #444; padding: 4px 2px; font-weight: 600; }
.stat-hm-cell { height: 22px; border-radius: 3px; background: #fafafa; }
.stat-table-wrap { overflow-x: auto; }
.cohort-table .cohort-cell { display: inline-block; min-width: 38px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.cohort-table td.muted { color: #ccc; }
/* ── Дашборд ── */
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1100px) { .dash-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .dash-grid { grid-template-columns: 1fr; } }
.dash-w { background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 10px; padding: 12px 14px; }
.dash-w.dash-sm { grid-column: span 1; }
.dash-w.dash-md { grid-column: span 2; }
.dash-w.dash-lg { grid-column: span 4; }
@media (max-width: 1100px) { .dash-w.dash-md, .dash-w.dash-lg { grid-column: span 2; } }
@media (max-width: 680px) { .dash-w.dash-md, .dash-w.dash-lg, .dash-w.dash-sm { grid-column: span 1; } }
.dash-w-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dash-w-title { font-weight: 700; font-size: 14px; }
.dash-w-tools { display: flex; align-items: center; gap: 6px; }
.dash-w-period { font-size: 10px; text-transform: uppercase; color: #999; letter-spacing: 0.3px; }
.dash-mv { border: none; background: rgba(0,0,0,0.05); border-radius: 4px; cursor: pointer; font-size: 10px; padding: 2px 6px; color: #666; }
.dash-mv:hover { background: rgba(0,0,0,0.1); }
.dash-kpis { display: flex; gap: 10px; flex-wrap: wrap; }
.dash-kpi { flex: 1; min-width: 120px; }
.dash-kpi-lbl { font-size: 10px; text-transform: uppercase; color: #888; font-weight: 700; letter-spacing: 0.3px; }
.dash-kpi-val { font-size: 20px; font-weight: 700; color: #1a1a1a; font-variant-numeric: tabular-nums; }
.dash-kpi-sub { font-size: 11px; color: #888; }
.dash-kpi.green .dash-kpi-val { color: #15803d; }
.dash-kpi.red .dash-kpi-val { color: #b91c1c; }
.dash-kpi.amber .dash-kpi-val { color: #b45309; }
.dash-cust { display: flex; flex-direction: column; gap: 8px; }
.dash-cust-row { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; padding: 10px 14px; flex-wrap: wrap; }
.dash-cust-vis { display: flex; align-items: center; gap: 8px; min-width: 220px; }
.dash-cust-f { font-size: 12px; color: #666; display: flex; align-items: center; gap: 6px; }
.dash-cust-foot { margin-top: 14px; display: flex; gap: 10px; }
/* ── Колокольчик уведомлений (Фаза 8) ── */
.notify-bell { background: none; border: none; font: inherit; width: 100%; cursor: pointer; }
.notify-ico-wrap { position: relative; }
.notify-badge { position: absolute; top: -5px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; background: #e53935; color: #fff; border-radius: 8px; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
/* hidden обязан скрывать бейдж: селектор по классу перебивал бы UA-правило
 * [hidden]{display:none}, из-за чего пустой бейдж висел красной точкой. */
.notify-badge[hidden] { display: none; }
.notify-badge.warn { background: #f59e0b; }
.notify-badge.crit { background: #e53935; }
.notify-panel { position: fixed; width: 360px; max-width: calc(100vw - 24px); max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,0.22); z-index: 200; }
.notify-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid rgba(0,0,0,0.06); font-weight: 700; font-size: 14px; position: sticky; top: 0; background: #fff; }
.notify-mark-all { background: none; border: none; color: #2563eb; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.notify-mark-all:hover { text-decoration: underline; }
.notify-empty { padding: 40px 20px; text-align: center; color: #999; font-size: 13px; }
.notify-item { display: flex; gap: 10px; padding: 11px 16px; cursor: pointer; border-left: 3px solid transparent; position: relative; }
.notify-item + .notify-item { border-top: 1px solid rgba(0,0,0,0.04); }
.notify-item:hover { background: #fafafa; }
.notify-item.critical { border-left-color: #e53935; }
.notify-item.warning { border-left-color: #f59e0b; }
.notify-item.info { border-left-color: #9ca3af; }
.notify-item.unread { background: rgba(37,99,235,0.05); }
.notify-ico { font-size: 18px; flex-shrink: 0; line-height: 1.3; }
.notify-text { flex: 1; min-width: 0; }
.notify-title { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.notify-sub { font-size: 12px; color: #888; margin-top: 2px; }
.notify-dot { width: 8px; height: 8px; border-radius: 50%; background: #2563eb; flex-shrink: 0; margin-top: 5px; }
.notif-settings { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; max-width: 560px; }
.notif-toggle { display: flex; align-items: center; gap: 8px; }
.notif-thresholds { display: flex; gap: 16px; flex-wrap: wrap; }
.notif-fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #666; }
.notif-fld input { width: 130px; padding: 6px 10px; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; font-size: 13px; }
.notif-sources { display: flex; flex-direction: column; gap: 8px; }
.notif-src-title { font-size: 10px; text-transform: uppercase; color: #888; font-weight: 700; letter-spacing: 0.4px; }
.notif-src { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.client-search-row { display: flex; align-items: center; gap: 12px; }
.client-search-row .search { flex: 1; }
.arch-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #555; white-space: nowrap; cursor: pointer; user-select: none; }
/* ── Документы клиента: тумблеры отслеживания, статусы, форма ── */
.trk-form { margin: 0; display: inline; }
.trk { border: none; border-radius: 12px; padding: 3px 12px; font-size: 12px; font-weight: 600; cursor: pointer; background: rgba(220,38,38,0.14); color: #b91c1c; font-family: inherit; }
.trk.on { background: rgba(22,163,74,0.16); color: #15803d; }
.trk-toggle { border: 1px solid rgba(0,0,0,0.12); border-radius: 8px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; background: rgba(220,38,38,0.10); color: #b91c1c; font-family: inherit; }
.trk-toggle.on { background: rgba(22,163,74,0.12); color: #15803d; border-color: rgba(22,163,74,0.3); }
.badge.danger { background: rgba(220,38,38,0.15); color: #b91c1c; }
.badge.ok { background: rgba(22,163,74,0.14); color: #15803d; }
/* Аккордеон-группы документов */
.doc-group { border: 1px solid rgba(0,0,0,0.08); border-radius: 10px; margin-bottom: 8px; background: #fff; }
.doc-group[open] { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.doc-group.doc-expired { border-color: rgba(220,38,38,0.4); }
.doc-group.doc-expiring { border-color: rgba(245,158,11,0.5); }
.doc-grp-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; cursor: pointer; list-style: none; user-select: none; }
.doc-grp-head::-webkit-details-marker { display: none; }
.doc-group > summary.doc-grp-head::before { content: "▶"; font-size: 10px; color: #999; margin-right: 8px; transition: transform .15s; }
.doc-group[open] > summary.doc-grp-head::before { transform: rotate(90deg); }
.doc-grp-title { font-weight: 600; font-size: 14px; }
.doc-grp-ico { margin-right: 6px; }
.doc-grp-add { font-size: 12px; color: #2563eb; font-weight: 600; border: 1px solid rgba(37,99,235,0.3); border-radius: 7px; padding: 4px 10px; }
.doc-grp-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.doc-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; background: #fafafa; flex-wrap: wrap; }
.doc-card.doc-expired { background: rgba(220,38,38,0.06); border-color: rgba(220,38,38,0.2); }
.doc-card.doc-expiring { background: rgba(245,158,11,0.08); border-color: rgba(245,158,11,0.25); }
.doc-card-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.doc-card-req { font-size: 13px; }
.doc-card-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.doc-add-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.doc-add-grid input { padding: 8px 10px; border: 1px solid rgba(0,0,0,0.15); border-radius: 7px; font-size: 13px; }
.doc-add-grid .span2 { grid-column: 1 / -1; }
.doc-add-form, .doc-edit { border: 1px dashed rgba(0,0,0,0.15); border-radius: 8px; padding: 12px; background: #fff; }
.doc-add-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trk-check { font-size: 13px; color: #555; display: flex; align-items: center; gap: 6px; cursor: pointer; }
.doc-passport .doc-grp-head { cursor: default; }
.doc-passport-info { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Основное/Баланс — поля парами */
.main-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.fld-pair { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fld-lbl { font-size: 10px; text-transform: uppercase; color: #888; font-weight: 700; letter-spacing: 0.3px; }
.fld-val { font-size: 14px; color: #1a1a1a; }
.note-text { white-space: pre-wrap; font-size: 13px; color: #333; margin: 4px 0 0; }
.cb-form { display: flex; flex-direction: column; gap: 10px; }
.cb-form .field { display: flex; flex-direction: column; gap: 3px; }
.cb-form .field span { font-size: 11px; color: #888; }
.cb-form .field input, .cb-form .field select { padding: 7px 9px; border: 1px solid rgba(0,0,0,0.15); border-radius: 7px; font-size: 13px; }
.cb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cal-part-veh { display: inline-flex; gap: 4px; align-items: center; }
.cal-part-veh input, .cal-part-veh select { width: 110px; padding: 4px 6px; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; font-size: 12px; }
.cal-veh-cell { display: flex; gap: 6px; align-items: center; }
.cal-veh-cell select { flex: 0 0 auto; max-width: 50%; }
.cal-veh-cell input { flex: 1; }
/* Снимок с веб-камеры: окно колонкой, кнопки по центру */
.cam-modal { width: 480px; }
.cam-body { padding: 18px 22px; display: flex; flex-direction: column; align-items: center; gap: 12px; overflow-y: auto; }
.cam-body video { width: 100%; max-width: 420px; border-radius: 10px; background: #000; }
.cam-body .cp-err { color: #b91c1c; font-size: 13px; }
.cam-actions { display: flex; gap: 10px; justify-content: center; }
/* «Загрузить» и «Снимок» одной высоты (не растягивать по файл-инпуту) */
.photo-actions .row-form { align-items: center; }
/* Настройки → Резервные копии */
.backup-upload { display: flex; gap: 8px; align-items: center; margin-top: 12px; }
.backup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.backup-dialog { background: #fff; border-radius: 12px; padding: 22px 26px; max-width: 560px; box-shadow: 0 12px 40px rgba(0,0,0,0.3); }
.backup-dialog h3 { margin: 0 0 10px; color: #b91c1c; }
.backup-warn { margin: 8px 0; padding-left: 18px; font-size: 14px; line-height: 1.55; }
.backup-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.backup-dialog-actions .btn.danger:disabled { opacity: 0.5; cursor: not-allowed; }
/* Настройки → Клуб → Юридическое лицо */
.legal-table { width: 100%; border-collapse: collapse; max-width: 720px; }
.legal-table td { border: 1px solid rgba(0,0,0,0.15); padding: 6px 10px; font-size: 14px; vertical-align: top; width: 50%; }
.legal-lbl { display: block; font-size: 10px; text-transform: uppercase; color: #888; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 2px; }
.legal-row { display: flex; gap: 12px; }
.legal-row .field { flex: 1; }
/* Блок «Договора» (срез К4) */
.contract-add { border: 1px dashed rgba(0,0,0,0.18); border-radius: 8px; padding: 12px; background: #fff; margin-bottom: 10px; }
.contract-add-mode { display: flex; gap: 16px; margin-bottom: 10px; font-size: 13px; }
.contract-pick { width: 100%; padding: 8px 10px; border: 1px solid rgba(0,0,0,0.15); border-radius: 7px; font-size: 13px; margin-bottom: 10px; }
.contract-add-actions { display: flex; gap: 10px; }
.contract-batch-sign, .contract-sign { display: inline-flex; align-items: center; gap: 6px; }
.contract-batch-sign input[type=date], .contract-sign input[type=date] { padding: 4px 6px; border: 1px solid rgba(0,0,0,0.15); border-radius: 6px; font-size: 12px; }
.btn.small.on { background: #16a34a; color: #fff; border-color: #16a34a; }
.doc-card.doc-void { opacity: 0.55; background: #f3f3f3; }
.doc-card.doc-void .doc-card-req { text-decoration: line-through; }
.contract-number { display: flex; align-items: center; gap: 8px; }
.contract-number input { padding: 6px 9px; border: 1px solid rgba(0,0,0,0.15); border-radius: 7px; font-size: 13px; }

.status-pill { padding: 2px 9px; border-radius: 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; display: inline-block; }
.status-pill.paid { background: rgba(22,163,74,0.15); color: #15803d; }
.status-pill.refunded { background: rgba(220,38,38,0.15); color: #b91c1c; }
.status-pill.deposit { background: rgba(245,158,11,0.18); color: #92400e; }
.status-pill.partial { background: rgba(234,179,8,0.18); color: #a16207; }

/* модалка заказа из журнала */
.hist-modal { height: auto; max-height: 85vh; }
.hist-modal-body { display: flex; flex-direction: column; padding: 18px 22px; overflow-y: auto; }
.mb-meta { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 14px; }
.mb-f { display: flex; flex-direction: column; gap: 2px; }
.mb-k { font-size: 10px; text-transform: uppercase; color: #888; font-weight: 700; letter-spacing: 0.3px; }
.mb-v { font-size: 13px; font-weight: 600; color: #1a1a1a; }
.mb-items { border: 1px solid rgba(0,0,0,0.06); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.mb-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13px; border-bottom: 1px solid rgba(0,0,0,0.04); }
.mb-item:last-child { border-bottom: none; }
.mb-name { font-weight: 500; flex: 1; }
.mb-sub { font-size: 11px; color: #888; font-weight: 400; }
.mb-qty { color: #666; font-size: 12px; min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; }
.mb-sum { font-weight: 600; min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }
.mb-empty { padding: 12px; color: #999; font-style: italic; text-align: center; }
.mb-total { display: flex; justify-content: space-between; padding-top: 10px; border-top: 2px solid #1a1a1a; font-size: 15px; font-weight: 700; margin-top: 4px; }
.mb-payments { background: #fafafa; padding: 10px 14px; border-radius: 6px; margin-top: 12px; font-size: 12px; }
.mb-pay-h { font-size: 10px; text-transform: uppercase; color: #888; font-weight: 700; letter-spacing: 0.3px; margin-bottom: 6px; }
.mb-pl { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.mb-pl.refund { color: #b91c1c; }
.mb-pa { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mb-receipt-link { color: var(--accent); text-decoration: underline; cursor: pointer; }
.mb-receipt-print { border: none; background: none; cursor: pointer; padding: 0 2px; font-size: 13px; }
.mb-receipt-print:hover { filter: brightness(1.2); }
.mb-actions { display: flex; gap: 8px; margin-top: 16px; }

/* Экран «Аванс» (касса) — остров advance.js. Выбор клиента — модально (.cm-*). */
.adv-wrap { width: 100%; }
.adv-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.adv-tab { padding: 9px 14px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--faint); font-size: 14px; cursor: pointer; white-space: nowrap; }
.adv-tab:hover { color: var(--text); }
.adv-tab.active { color: var(--text); border-bottom-color: var(--text); font-weight: 600; }
.adv-panel { display: flex; flex-direction: column; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; max-width: 480px; }
/* Реестр — таблица во всю ширину контента, не как узкая форма */
.adv-wrap-wide .adv-panel { max-width: none; }
.adv-empty { color: var(--faint); font-style: italic; text-align: center; padding: 20px 10px 4px; }
.adv-client { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.adv-client-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.adv-client-name { font-size: 18px; font-weight: 700; }
.adv-client-sub { font-size: 12px; color: var(--faint); margin-top: 2px; }
.adv-buyer { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.adv-buyer-empty { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: var(--faint); }
.adv-balances { font-size: 13px; margin-top: 8px; color: var(--muted); }
.adv-balances b { color: var(--text); font-variant-numeric: tabular-nums; }
.adv-methods { display: flex; gap: 8px; }
.adv-method { flex: 1; padding: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; cursor: pointer; font-size: 13px; }
.adv-method:hover { border-color: var(--line-strong); }
.adv-method.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.adv-panel .btn-primary { padding: 12px; background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.adv-panel .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }
.adv-msg { font-size: 13px; min-height: 18px; }
.adv-msg.ok { color: #15803d; }
.adv-msg.err { color: var(--danger); }

/* реестр карт — тулбар с подписанным поиском и пилюлями статусов */
.reg-toolbar { display: flex; gap: 12px; align-items: flex-end; margin-bottom: 12px; }
.reg-field { display: flex; flex-direction: column; gap: 5px; flex: 0 1 360px; }
.reg-field-actions { flex: 0 0 auto; }
.reg-label { font-size: 12px; color: var(--faint); }
.reg-search { width: 100%; }
.reg-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
/* пилюли окрашены в цвет своего статуса (--pc): не выбрана — контур/текст в пол силы,
   выбрана — полная заливка цветом статуса. */
.reg-pill { --pc: #4b5563; padding: 7px 14px; background: transparent; border: 1px solid var(--pc); border-radius: 999px; cursor: pointer; font-size: 13px; color: var(--pc); opacity: 0.5; transition: opacity 0.12s, background 0.12s; }
.reg-pill:hover { opacity: 0.8; }
.reg-pill.active { background: var(--pc); color: #fff; border-color: var(--pc); opacity: 1; }
.reg-pill-blank { --pc: #6b7280; }
.reg-pill-sold { --pc: #d97706; }
.reg-pill-activated { --pc: #15803d; }
.reg-pill-void { --pc: #dc2626; }
.reg-summary { font-size: 13px; color: var(--faint); margin-bottom: 10px; }
.reg-table { width: 100%; }
.reg-th { cursor: pointer; user-select: none; white-space: nowrap; }
.reg-th:hover { color: var(--text); }
.reg-status { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 10px; padding: 2px 8px; }
.reg-status.reg-blank { background: rgba(0,0,0,0.06); color: #555; }
.reg-status.reg-sold { background: rgba(245,158,11,0.16); color: var(--warn); }
.reg-status.reg-activated { background: rgba(21,128,61,0.14); color: #15803d; }
.reg-status.reg-void { background: rgba(220,38,38,0.12); color: var(--danger); }

/* ============ КАССА · настройки фискализации ============ */
.kassa-status { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; margin-bottom: 12px; }
.kassa-toggle { margin: 0; }
.kassa-toggle .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; color: var(--text); text-transform: none; letter-spacing: 0; font-weight: 600; }
.kassa-toggle .switch input { width: 16px; height: 16px; cursor: pointer; }
.kassa-mode { display: flex; align-items: center; gap: 10px; }
.kassa-mode-label { font-size: 12px; color: var(--faint); }
.kassa-mode-pills { display: inline-flex; gap: 6px; }
.kassa-pill { padding: 5px 14px; border: 1px solid var(--line-strong); background: #fff; border-radius: 999px; cursor: pointer; font: inherit; font-size: 12px; color: var(--muted); }
.kassa-pill:hover { border-color: var(--accent); }
.kassa-pill.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.kassa-hint { margin: 0 0 14px; font-size: 12px; color: var(--muted); background: rgba(0,0,0,0.03); border-left: 3px solid var(--line-strong); padding: 8px 10px; border-radius: 4px; }
.kassa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.kassa-card { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.kassa-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.kassa-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kassa-card-head h3 { margin: 0; font-size: 13px; }
.kassa-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: #fff; background: var(--accent); border-radius: 10px; padding: 2px 8px; }
.kassa-fieldset { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 6px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kassa-fieldset legend { font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.4px; padding: 0 6px; }
.field.check { flex-direction: row; align-items: center; gap: 8px; }
.field.check input { width: 16px; height: 16px; }
.field.check span { text-transform: none; font-size: 13px; letter-spacing: 0; color: var(--text); font-weight: 600; }
.kassa-error { margin: 0 0 12px; font-size: 12px; color: var(--danger); background: rgba(220,38,38,0.08); border-left: 3px solid var(--danger); padding: 8px 10px; border-radius: 4px; }

.kassa-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.kassa-actions-hint { font-size: 12px; color: var(--muted); }

.kassa-jobs { margin-top: 24px; }
.kassa-jobs-title { margin: 0 0 10px; font-size: 14px; }
.kassa-jobs-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.kassa-jobs-table th, .kassa-jobs-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kassa-jobs-table th { font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; }
.job-status { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.job-pending { background: rgba(148,163,184,0.18); color: var(--muted); }
.job-sent { background: rgba(37,99,235,0.12); color: var(--accent); }
.job-ok { background: rgba(22,163,74,0.12); color: #16a34a; }
.job-error { background: rgba(220,38,38,0.10); color: var(--danger); }
.job-fd { font-variant-numeric: tabular-nums; }
.job-err { color: var(--danger); max-width: 260px; overflow-wrap: anywhere; }
.job-date { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--muted); }
.job-amount { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }

/* Подменю раздела «Касса» */
.kassa-subtabs { display: flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.kassa-subtab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 16px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--muted); }
.kassa-subtab:hover { color: var(--accent); }
.kassa-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Z/X-отчёты смены */
.kassa-shift-head .kassa-shift-history { margin-left: auto; font-size: 12px; padding: 4px 10px; }
.kassa-shift-actions { margin: 8px 0 12px; }
.kassa-report { border: 1px solid var(--line-strong); border-radius: 10px; padding: 16px; max-width: 520px; }
.kassa-report-title { margin: 0 0 12px; font-size: 15px; }

@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { position: absolute; left: 0; top: 0; width: 100%; border: none; padding: 0; }
}
.kassa-job-cancel { margin-top: 4px; padding: 2px 8px; font-size: 11px; border: 1px solid var(--line-strong); background: var(--card); border-radius: 4px; cursor: pointer; color: var(--text); }
.kassa-job-cancel:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

@media (max-width: 720px) { .kassa-grid, .kassa-fieldset { grid-template-columns: 1fr; } }

/* ============ ДОКУМЕНТЫ (вкладка настроек) ============ */
/* Дерево слева + панель справа — по макету mockup.html (.tree-pane/.tree-node). */
.docs-layout { display: grid; grid-template-columns: 300px 1fr; align-items: stretch; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.doc-tree { background: var(--panel); border-right: 1px solid var(--line); padding: 14px 12px; min-height: 480px; }
.doc-tree-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding: 0 4px; }
.doc-tree-head h3 { margin: 0; font-size: 11px; text-transform: uppercase; color: var(--faint); letter-spacing: 0.5px; font-weight: 700; }

/* Узел: summary (с детьми) или div (лист). Маркер disclosure скрыт — рисуем каретку сами. */
.doc-node { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; font-size: 13px; min-height: 28px; user-select: none; list-style: none; }
.doc-node::-webkit-details-marker { display: none; }
.doc-node::marker { content: ""; }
.doc-node:hover { background: rgba(0,0,0,0.04); }
.doc-node.selected { background: var(--card); box-shadow: 0 1px 4px rgba(0,0,0,0.08); font-weight: 600; }
.doc-caret { width: 12px; font-size: 9px; opacity: 0.5; transition: transform 0.15s; flex-shrink: 0; cursor: pointer; }
details[open] > .doc-node > .doc-caret { transform: rotate(90deg); }
.doc-caret.leaf { opacity: 0; cursor: default; }
.doc-ico { width: 18px; text-align: center; font-size: 14px; flex-shrink: 0; }
.doc-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.doc-kids { margin-left: 14px; border-left: 1px dashed rgba(0,0,0,0.1); padding-left: 4px; }
/* ссылка-узел на другой экран (например «Пакеты» из дерева справочника) */
a.doc-node, a.doc-node:visited { text-decoration: none; color: var(--text); }

.doc-add { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; border-top: 1px dashed var(--line); padding-top: 12px; }
.doc-add input { width: 100%; padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 13px; font-family: inherit; }
.doc-add input:focus { outline: 2px solid var(--focus); border-color: transparent; }

.doc-addroot { background: var(--accent); color: #fff; border: none; width: 24px; height: 24px; border-radius: 4px; cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.doc-addroot:hover { background: #444; }

.doc-panel { padding: 18px 20px; min-width: 0; }
.doc-bc { font-size: 12px; color: var(--faint); margin-bottom: 10px; }
.doc-bc b { color: var(--text); font-weight: 700; }
.doc-bc-link { cursor: pointer; }
.doc-bc-link:hover { color: var(--text); text-decoration: underline; }
.doc-bc-sep { margin: 0 6px; opacity: 0.6; }
.doc-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 8px; }
.doc-panel-title { font-size: 18px; font-weight: 700; }
.doc-panel-sub { font-size: 12px; color: var(--faint); margin-top: 2px; }
.doc-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.doc-movebar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--hl-soft); border: 1px solid rgba(255,200,40,0.4); border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; }
.doc-movebar .lbl { font-size: 10px; text-transform: uppercase; color: #5a4a00; font-weight: 700; letter-spacing: 0.4px; }

.doc-sig-req { color: #d97706; font-weight: 600; }
.col-act { width: 64px; }
.doc-rowact { white-space: nowrap; text-align: right; }
.doc-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 5px; cursor: pointer; text-decoration: none; font-size: 13px; opacity: 0.55; transition: opacity 0.1s, background 0.1s; }
.doc-iconbtn:hover { opacity: 1; background: rgba(0,0,0,0.06); }

/* привязки документа к каталогу/пакетам */
.doc-bindings { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.doc-bind-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.doc-bind-head .lbl { font-size: 12px; font-weight: 700; color: var(--text); }
.doc-bind-list { display: flex; flex-wrap: wrap; gap: 6px; }
.doc-bind-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--hl-soft); border: 1px solid rgba(255,200,40,0.4); color: #5a4a00; border-radius: var(--r-pill, 999px); padding: 4px 6px 4px 12px; font-size: 12px; }
.doc-bind-chip .x { border: none; background: rgba(0,0,0,0.08); color: #5a4a00; width: 18px; height: 18px; border-radius: 50%; cursor: pointer; font-size: 11px; line-height: 1; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.doc-bind-chip .x:hover { background: var(--danger); color: #fff; }
.doc-picker { margin-top: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.doc-pick-group { margin-bottom: 12px; }
.doc-pick-group:last-child { margin-bottom: 0; }
.doc-pick-group .gt { font-size: 10px; text-transform: uppercase; color: var(--faint); font-weight: 700; letter-spacing: 0.4px; margin-bottom: 6px; }
.doc-pick-group .btn { margin: 0 6px 6px 0; }

/* справочник: чипы «используется в прайсах», калибр-селект, заметки, свойства */
.cat-usechips { display: flex; flex-wrap: wrap; gap: 5px; }
.cat-usechip { display: inline-block; font-size: 11px; background: rgba(0,0,0,0.06); color: #555; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.cat-caliber { padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 5px; font-size: 13px; font-family: inherit; background: #fff; }
.cat-note { background: var(--hl-soft); border-radius: 6px; padding: 8px 12px; font-size: 12px; color: #5a4a00; margin-top: 10px; }
.cat-prop { display: flex; flex-direction: column; gap: 6px; font-size: 11px; text-transform: uppercase; color: var(--faint); font-weight: 600; max-width: 220px; }

/* модалка выбора документов (привязка со стороны справочника) */
.cat-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 400; padding: 30px; }
.cat-modal-box { background: #fff; border-radius: 14px; width: 560px; max-width: 96vw; max-height: 86vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden; }
.cat-modal-head { padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 16px; font-weight: 700; }
.cat-modal-box form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cat-modal-body { padding: 12px 22px; overflow-y: auto; flex: 1; }
.cat-modal-sec { font-size: 11px; text-transform: uppercase; color: var(--faint); font-weight: 700; letter-spacing: 0.3px; margin: 8px 0 4px; }
.cat-modal-item { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.cat-modal-item:hover { background: rgba(0,0,0,0.04); }
.cat-modal-treerow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 13px; font-weight: 600; }
.cat-modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); background: #fafafa; display: flex; justify-content: flex-end; gap: 8px; }
.cat-modal-box.wide { width: 820px; }
.doc-modal-2pane { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; flex: 1; min-height: 0; }
.doc-modal-col { padding: 12px 18px; overflow-y: auto; max-height: 62vh; }
.doc-modal-col + .doc-modal-col { border-left: 1px solid var(--line); }
.doc-modal-grouphdr { font-size: 11px; color: var(--faint); font-weight: 600; margin: 10px 0 4px; }
@media (max-width: 720px) { .doc-modal-2pane { grid-template-columns: 1fr; } .cat-modal-box.wide { width: 96vw; } }

/* дерево в модалке документа */
.doc-modal-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 13px; }
.doc-modal-caret { width: 12px; font-size: 9px; opacity: 0.55; cursor: pointer; transition: transform 0.15s; flex-shrink: 0; }
.doc-modal-caret.open { transform: rotate(90deg); }
.doc-modal-catrow { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.doc-modal-catrow:hover { background: rgba(0,0,0,0.04); }
.doc-modal-catrow.active { background: var(--hl-soft); }
.doc-modal-empty { color: var(--faint); font-size: 13px; padding: 12px 4px; }

.doc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 12px 0; }
.doc-navcard { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px; text-decoration: none; color: var(--text); cursor: pointer; transition: border-color 0.15s; }
.doc-navcard:hover { border-color: var(--accent); }
.doc-navcard .ic { font-size: 22px; }
.doc-navcard .nm { font-weight: 600; margin-top: 4px; }
.doc-navcard .sb { font-size: 11px; color: var(--faint); }

.doc-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.doc-table th, .doc-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; }
.doc-table th { font-size: 11px; text-transform: uppercase; color: var(--faint); font-weight: 700; letter-spacing: 0.4px; }
.doc-table tbody tr { cursor: pointer; }
.doc-table tbody tr:hover { background: rgba(0,0,0,0.03); }

.doc-editor { display: grid; grid-template-columns: 1fr 230px; gap: 14px; align-items: start; margin-top: 10px; }
.doc-block { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.doc-block h4 { margin: 0 0 10px; font-size: 11px; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.4px; }
.doc-textarea { width: 100%; min-height: 320px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 8px; font-family: Consolas, Menlo, monospace; font-size: 12px; line-height: 1.5; resize: vertical; }

/* TipTap-редактор тела документа */
.doc-rte-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.doc-rte-toolbar button { border: 1px solid var(--line-strong); background: #fff; border-radius: 5px; padding: 4px 9px; font-size: 12px; cursor: pointer; font-family: inherit; color: var(--text); }
.doc-rte-toolbar button:hover { background: #f5f5f5; }
.doc-import-btn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-strong); background: #fff; border-radius: 5px; padding: 4px 9px; font-size: 12px; cursor: pointer; color: var(--text); margin-left: auto; }
.doc-import-btn:hover { background: #f5f5f5; }
.doc-rte-imgbtn { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line-strong); background: #fff; border-radius: 5px; padding: 4px 9px; font-size: 12px; cursor: pointer; color: var(--text); }
.doc-rte-imgbtn:hover { background: #f5f5f5; }
.doc-rte .ProseMirror img { max-width: 100%; height: auto; }
/* ресайз картинки: строчная обёртка + угловой маркер */
.doc-img-wrap { display: inline-block; position: relative; line-height: 0; max-width: 100%; vertical-align: bottom; }
.doc-img-wrap img { display: inline-block; max-width: 100%; height: auto; }
.doc-img-wrap.ProseMirror-selectednode { outline: 2px solid var(--focus); }
.doc-img-handle { position: absolute; right: -5px; bottom: -5px; width: 12px; height: 12px; border-radius: 2px; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.2); cursor: nwse-resize; opacity: 0; transition: opacity 0.1s; }
.doc-img-wrap:hover .doc-img-handle, .doc-img-wrap.ProseMirror-selectednode .doc-img-handle { opacity: 1; }
.doc-rte { border: 1px solid var(--line-strong); border-radius: 8px; min-height: 320px; background: #fff; }
.doc-rte .ProseMirror { min-height: 320px; padding: 12px 14px; outline: none; font-size: 14px; line-height: 1.5; }
.doc-rte .ProseMirror:focus { outline: none; }
.doc-rte .ProseMirror p { margin: 0 0 8px; }
.doc-rte .ProseMirror h2 { font-size: 18px; margin: 12px 0 6px; }
.doc-rte .ProseMirror h3 { font-size: 15px; margin: 10px 0 5px; }
.doc-tb-sep { width: 1px; align-self: stretch; background: var(--line-strong); margin: 0 3px; }
/* таблицы в редакторе и предпросмотре */
.doc-rte .ProseMirror table { border-collapse: collapse; width: 100%; margin: 10px 0; table-layout: fixed; }
.doc-rte .ProseMirror th, .doc-rte .ProseMirror td { border: 1px solid var(--line-strong); padding: 6px 8px; vertical-align: top; position: relative; }
.doc-rte .ProseMirror th { background: #f6f6f6; font-weight: 600; text-align: left; }
.doc-rte .ProseMirror .selectedCell:after { content: ""; position: absolute; inset: 0; background: rgba(14,116,144,0.12); pointer-events: none; }
.doc-rte .ProseMirror .column-resize-handle { position: absolute; right: -2px; top: 0; bottom: 0; width: 4px; background: var(--focus); cursor: col-resize; }
/* чип токена {{переменная}} */
.doc-token { background: rgba(14,116,144,0.10); color: #0e7490; border: 1px solid rgba(14,116,144,0.25); border-radius: 4px; padding: 0 4px; font-family: monospace; font-size: 12px; white-space: nowrap; }
.doc-check { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; cursor: pointer; }
.doc-copies { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 12px; }
.doc-copies input { width: 64px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 5px; text-align: center; }
.doc-num { border-top: 1px solid var(--line); padding-top: 12px; }
.doc-num-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.doc-num-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.doc-num-grid input, .doc-num-grid select { padding: 7px 10px; border: 1px solid var(--line-strong); border-radius: 5px; font-size: 13px; font-family: inherit; }
.doc-num-wide { grid-column: 1 / -1; }
.doc-num-preview { margin-top: 10px; padding: 8px 10px; background: var(--hl-soft); border-radius: 6px; font-size: 12px; color: #5a4a00; }
.doc-vars { position: sticky; top: 12px; }
.doc-var-group { margin-bottom: 12px; }
.doc-var-group .gt { font-size: 10px; text-transform: uppercase; color: var(--faint); font-weight: 700; margin-bottom: 5px; }
.docvar { cursor: pointer; padding: 4px 8px; border-radius: 5px; font-size: 11px; font-family: monospace; color: #0e7490; background: rgba(14,116,144,0.06); margin-bottom: 3px; }
.docvar:hover { background: rgba(14,116,144,0.15); }
.doc-foot { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.doc-move { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.doc-move .lbl { font-size: 10px; text-transform: uppercase; color: var(--faint); font-weight: 700; letter-spacing: 0.4px; }
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; } .doc-editor { grid-template-columns: 1fr; } }

/* ===================== Чат (внутреннее общение сотрудников) ===================== */
/* Экран чата занимает всю высоту контента и управляет прокруткой сам (список бесед
   и переписка скроллятся внутри своих панелей, а не страница целиком). */
.content:has(.page.chat) { padding: 0; overflow: hidden; }
.page.chat { box-sizing: border-box; height: 100%; padding: 14px; display: flex; min-height: 0; }
.chat-wrap { flex: 1; display: flex; gap: 14px; min-height: 0; min-width: 0; }

/* --- список бесед --- */
.conv-pane { width: 320px; flex: none; background: var(--card); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; }
.conv-pane-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.conv-pane-head h3 { margin: 0; flex: 1; font-size: 13px; font-weight: 700; }
.conv-search { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.conv-search .nd-input { width: 100%; }
.conv-list { flex: 1; overflow-y: auto; }
.chat-empty-list { padding: 40px 20px; text-align: center; color: var(--faint); font-size: 12px; line-height: 1.5; }

.conv-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; }
.conv-row:hover { background: var(--hl-soft); }
.conv-row.active { background: rgba(255,224,116,0.28); border-left-color: var(--accent); }
.conv-avatar-wrap { position: relative; flex: none; }
.conv-info { flex: 1; min-width: 0; }
.conv-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-role { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.3px; }
.conv-last { font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.conv-last.unread { color: var(--text); font-weight: 600; }
.conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.conv-time { font-size: 10px; color: var(--faint); }
.unread-badge { background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 6px; min-width: 18px; text-align: center; border-radius: 9px; }

/* --- аватар + индикатор присутствия --- */
.chat-avatar { border-radius: 50%; background: var(--hl); color: #5a4a00; font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
.chat-avatar-40 { width: 40px; height: 40px; font-size: 13px; }
.chat-avatar-36 { width: 36px; height: 36px; font-size: 12px; }
.chat-avatar-30 { width: 30px; height: 30px; font-size: 11px; align-self: flex-end; }
.msg-group:not(.mine) .chat-avatar-30 { background: #e5e5e5; color: #555; }
.presence-dot { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #fff; }
.presence-dot.online { background: var(--ok); }
.presence-dot.offline { background: #9ca3af; }

/* --- панель переписки --- */
.msg-pane { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.msg-pane-empty { align-items: center; justify-content: center; color: var(--faint); flex-direction: column; gap: 8px; font-size: 13px; }
.msg-empty-big { font-size: 48px; opacity: 0.3; }
.msg-pane-head { padding: 12px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 12px; flex: none; }
.msg-head-name { font-size: 14px; font-weight: 700; }
.msg-head-role { font-size: 11px; color: var(--muted); }
.msg-presence { font-size: 11px; font-weight: 500; }
.msg-presence.online { color: var(--ok); }
.msg-presence.offline { color: var(--faint); }
.msg-list { flex: 1; overflow-y: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(to bottom, #fafafa, #fff); }
.msg-empty-thread { margin: auto; color: var(--faint); font-size: 13px; }
.day-divider { text-align: center; margin: 14px 0 6px; font-size: 11px; color: var(--faint); display: flex; align-items: center; gap: 8px; }
.day-divider::before, .day-divider::after { content: ""; flex: 1; height: 1px; background: rgba(0,0,0,0.08); }

.msg-group { display: flex; gap: 10px; margin-top: 8px; align-items: flex-start; }
.msg-group.mine { flex-direction: row-reverse; }
.bubbles { display: flex; flex-direction: column; gap: 3px; max-width: 70%; }
.msg-group.mine .bubbles { align-items: flex-end; }
.msg-author { font-size: 10px; color: var(--faint); font-weight: 600; padding: 0 12px; }
.bubble { position: relative; padding: 7px 12px; border-radius: 14px; font-size: 13px; line-height: 1.4; word-wrap: break-word; overflow-wrap: anywhere; background: #fff; border: 1px solid rgba(0,0,0,0.08); }
.msg-group.mine .bubble { background: var(--accent); color: #fff; border-color: var(--accent); }
.bubble a { color: #2563eb; text-decoration: underline; word-break: break-all; }
.msg-group.mine .bubble a { color: #cfe0ff; }
.bubble-meta { display: block; font-size: 9px; opacity: 0.5; text-align: right; margin-top: 2px; }
.msg-group.mine .bubble-meta { opacity: 0.6; }
.bubble-tick { margin-left: 4px; }
.bubble-tick.read { color: #4eb3ff; opacity: 1; }
/* действие над сообщением (⋯) — слева ОТ пузыря, светлый кружок (виден и на
   тёмных «своих» сообщениях, не налезает на текст). Появляется при наведении. */
.bubble-act { position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); background: var(--card); color: var(--muted); opacity: 0; cursor: pointer; font-size: 13px; line-height: 1; padding: 0; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.15); transition: opacity .12s; }
/* Кнопка — со стороны, ПРОТИВОПОЛОЖНОЙ аватару: у своих (справа) — слева пузыря,
   у входящих (аватар слева) — справа пузыря, чтобы не налезать на аватар. */
.msg-group.mine .bubble-act { left: -30px; right: auto; }
.msg-group:not(.mine) .bubble-act { right: -30px; left: auto; }
.bubble:hover .bubble-act { opacity: 1; }
.bubble-act:hover { background: var(--hl-soft); color: var(--text); }
/* плавающее меню сообщения */
.msg-menu { position: fixed; z-index: 210; background: var(--card); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.16); padding: 4px; min-width: 160px; display: flex; flex-direction: column; }
.msg-menu button { display: flex; align-items: center; text-align: left; border: none; background: none; padding: 8px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.msg-menu button:hover { background: rgba(0,0,0,0.05); }
.msg-menu button.active { font-weight: 600; }
.menu-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px; flex: none; }
.menu-check { margin-left: auto; padding-left: 10px; color: var(--ok, #16a34a); }
/* эмодзи-палитра */
.emoji-pop { position: absolute; bottom: 56px; left: 14px; width: 280px; max-height: 200px; overflow-y: auto; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.16); padding: 8px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; z-index: 50; }
.emoji-cell { border: none; background: none; font-size: 20px; line-height: 1; padding: 4px; border-radius: 6px; cursor: pointer; }
.emoji-cell:hover { background: var(--hl-soft); }
/* модалка пересылки */
.fwd-preview { background: var(--hl-soft); border-radius: 8px; padding: 8px 12px; font-size: 13px; margin-bottom: 10px; max-height: 120px; overflow-y: auto; }
.fwd-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--faint); font-weight: 700; margin: 10px 0 4px; }

/* --- статус-бар (мой статус) --- */
.my-status { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 12px; font-weight: 600; }
.my-status:hover { background: var(--hl-soft); }
.my-status-caret { margin-left: auto; color: var(--faint); }

/* --- групповой аватар --- */
.chat-avatar.group { background: #4f46e5; color: #fff; }

/* --- поиск по сообщениям в списке --- */
.conv-search-section { font-size: 10px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--faint); font-weight: 700; padding: 8px 14px 2px; }
.conv-row.search-hit .conv-last { white-space: normal; }

/* --- шапка беседы: кнопки (файлы/настройки группы) --- */
.msg-head-info { flex: 1; min-width: 0; }
.msg-head-actions { display: flex; gap: 4px; flex: none; }
.msg-head-btn { border: none; background: none; font-size: 17px; cursor: pointer; padding: 4px 6px; border-radius: 7px; opacity: 0.7; }
.msg-head-btn:hover { background: rgba(0,0,0,0.06); opacity: 1; }

/* --- вложения в сообщении --- */
.att-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; }
.att-img { display: block; max-width: 240px; }
.att-img img { max-width: 240px; max-height: 240px; border-radius: 8px; display: block; }
.att-file { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(0,0,0,0.05); text-decoration: none; color: inherit; max-width: 260px; }
.msg-group.mine .att-file { background: rgba(255,255,255,0.15); }
.att-ico { font-size: 20px; flex: none; }
.att-info { min-width: 0; display: flex; flex-direction: column; }
.att-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-size { font-size: 10px; opacity: 0.7; }

/* --- панель файлов / сетка фото --- */
.files-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.files-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; cursor: pointer; }

/* --- участники группы / управление --- */
.member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.member-row .pick-info { flex: 1; min-width: 0; }
.employee-pick-row.pickable { cursor: pointer; }
.employee-pick-row.pickable input[type="checkbox"] { width: 18px; height: 18px; }
.modal-foot { margin-top: 12px; display: flex; justify-content: flex-end; gap: 8px; }

/* --- композер --- */
.compose { position: relative; padding: 12px 14px; border-top: 1px solid var(--line); display: flex; align-items: flex-end; gap: 8px; flex: none; }
.emoji-btn { width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(0,0,0,0.05); font-size: 18px; cursor: pointer; flex: none; }
.emoji-btn:hover { background: rgba(0,0,0,0.10); }
.compose-input { flex: 1; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: 18px; font: inherit; font-size: 13px; resize: none; min-height: 40px; max-height: 140px; line-height: 1.4; }
.compose-input:focus { outline: 2px solid var(--focus); border-color: transparent; }
.send-btn { width: 40px; height: 40px; border: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: 16px; cursor: pointer; flex: none; }
.send-btn:hover { background: #333; }

/* --- модалка «Новая беседа» --- */
/* Чат-модалки — простой вертикальный контент (глобальный .modal стал большим
   flex-layout 860×600 для редактора; здесь это ломало бы вёрстку списков). */
.chat-modal { width: 460px; height: auto; max-height: 85vh; }
.chat-modal .modal-body { display: block; flex: none; overflow-y: auto; padding: 14px 18px; }
.employee-pick-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; border-radius: 8px; }
.employee-pick-row:hover { background: rgba(255,224,116,0.15); }
.pick-name { font-weight: 600; font-size: 13px; }
.pick-role { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.3px; }

/* --- тост --- */
.chat-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 13px; z-index: 200; box-shadow: 0 6px 20px rgba(0,0,0,0.25); }

@media (max-width: 800px) {
  .chat-wrap { flex-direction: column; }
  .conv-pane { width: auto; max-height: 250px; }
}