/* Refunds Panel — main screen styles */

:root {
  --bg: #FAFAF9;
  --surface: #FFFFFF;
  --border: #E7E5E4;
  --border-strong: #D6D3D1;
  --text: #1C1917;
  --text-2: #57534E;
  --text-3: #A8A29E;
  --hover: #F5F5F4;
  --primary: #1C1917;
  --primary-hover: #0C0A09;

  --st-new: #9CA3AF;
  --st-progress: #3B82F6;
  --st-receipt: #F59E0B;
  --st-done: #10B981;
  --st-error: #EF4444;
  --st-cancel: #78716C;

  --st-new-bg: #F3F4F6;
  --st-progress-bg: #EFF6FF;
  --st-receipt-bg: #FFFBEB;
  --st-done-bg: #ECFDF5;
  --st-error-bg: #FEF2F2;
  --st-cancel-bg: #F5F5F4;

  --pay-cp: #3B82F6;
  --pay-yk: #7B1FA2;
  --pay-tb: #FBBF24;
  --pay-gc: #27272A;

  --shadow-card: 0 1px 0 0 rgba(28, 25, 23, 0.04), 0 1px 2px 0 rgba(28, 25, 23, 0.04);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
}
button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; padding: 0; }
input { font: inherit; color: inherit; }

/* ───────── Layout ───────── */

.app {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

/* ───────── Sidebar ───────── */

.sidebar {
  border-right: 1px solid var(--border);
  background: var(--bg);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 0;
}
.brand-mark {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: -0.02em;
}
.brand-name {
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: -0.01em;
}
.brand-domain {
  font-size: 11.5px;
  color: var(--text-3);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0 10px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-2);
  text-align: left;
  width: 100%;
}
.nav-item:hover { background: var(--hover); color: var(--text); }
.nav-item.active { background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); }
.nav-item svg { width: 15px; height: 15px; flex-shrink: 0; opacity: 0.7; }
.nav-item.active svg { opacity: 1; }
.nav-count {
  margin-left: auto;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  background: var(--hover);
  padding: 1px 6px;
  border-radius: 4px;
}
.nav-item.active .nav-count { background: var(--bg); }

.sidebar-foot {
  margin-top: auto;
  padding: 10px;
  font-size: 11.5px;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.dot-live { width: 6px; height: 6px; border-radius: 50%; background: var(--st-done); }
.dot-live.ok { background: var(--st-done); }
.dot-live.warn { background: #F59E0B; }
.dot-live.err { background: var(--st-error); }

.services-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-3);
  width: 100%;
  text-align: left;
}
.services-trigger:hover { color: var(--text-2); }
.services-popover {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  width: 248px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px -8px rgba(28,25,23,0.2);
  padding: 10px;
  z-index: 40;
}
.services-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}
.services-overall.ok { color: var(--st-done); }
.services-overall.warn, .services-overall.err { color: var(--st-error); }
.services-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 4px;
  font-size: 12.5px;
}
.services-name { flex: 0 0 96px; color: var(--text); }
.services-detail { flex: 1; color: var(--text-3); font-size: 11.5px; }
.services-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.services-dot.ok { background: var(--st-done); }
.services-dot.warn { background: #F59E0B; }
.services-dot.err { background: var(--st-error); }

/* ───────── Topbar ───────── */

.topbar {
  height: 52px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.search {
  flex: 1;
  max-width: 520px;
  margin: 0 auto;
  position: relative;
}
.search input {
  width: 100%;
  height: 32px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0 12px 0 32px;
  font-size: 13px;
  outline: none;
  transition: border-color 0.1s;
}
.search input:focus { border-color: var(--text-3); }
.search input::placeholder { color: var(--text-3); }
.search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--text-3);
}
.search kbd {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 1px 5px;
  border-radius: 3px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #FCA5A5, #F472B6);
  color: white;
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 600;
}

/* ───────── Page ───────── */

.page {
  padding: 24px 32px 64px;
  max-width: 1400px;
}

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
}
.page-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.page-sub {
  font-size: 13px;
  color: var(--text-2);
}
.page-sub strong { color: var(--text); font-weight: 600; }

/* ───────── Buttons ───────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary {
  background: var(--primary);
  color: white;
}
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  box-shadow: 0 1px 0 0 rgba(28, 25, 23, 0.02);
}
.btn-secondary:hover { background: var(--hover); border-color: var(--border-strong); }
.btn-danger {
  background: var(--surface);
  color: var(--st-error);
  border-color: var(--border);
}
.btn-danger:hover { background: var(--st-error-bg); border-color: #FCA5A5; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }

/* ───────── Filters ───────── */

.filters {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 12px;
  padding: 8px 0;
}
.chips {
  display: flex;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 3px;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-2);
  transition: background 0.08s;
  white-space: nowrap;
}
.chip:hover { background: var(--hover); color: var(--text); }
.chip.active {
  background: var(--text);
  color: white;
}
.chip.active:hover { background: var(--primary-hover); }
.chip-count {
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  opacity: 0.6;
}
.chip.active .chip-count { opacity: 0.7; }
.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.chip-dot.new { background: var(--st-new); }
.chip-dot.in_progress { background: var(--st-progress); }
.chip-dot.done { background: var(--st-done); }
.chip-dot.error { background: var(--st-error); }

.filter-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  font-size: 12.5px;
  color: var(--text-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
}
.filter-btn:hover { background: var(--hover); color: var(--text); }
.filter-btn svg { width: 12px; height: 12px; opacity: 0.6; }
.filter-btn .pill {
  background: var(--text);
  color: white;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 2px;
}

.filter-clear {
  font-size: 12px;
  color: var(--text-3);
  padding: 0 6px;
}
.filter-clear:hover { color: var(--text); }

/* ───────── Table ───────── */

.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

table.refunds {
  width: 100%;
  border-collapse: collapse;
}

.refunds thead th {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 10px 14px;
  background: #FAFAF9;
  border-bottom: 1px solid var(--border);
  height: 36px;
}
.refunds thead th.num { text-align: right; }
.refunds thead th.act { text-align: right; }

.refunds tbody tr {
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  position: relative;
}
.refunds tbody tr:last-child { border-bottom: none; }
.refunds tbody tr:hover { background: var(--hover); }
.refunds tbody tr.selected { background: #FAFAF9; }

.refunds td {
  padding: 12px 14px;
  vertical-align: middle;
  height: 56px;
}
.refunds td.col-date { width: 130px; }
.refunds td.col-client { min-width: 220px; }
.refunds td.col-payment { width: 200px; }
.refunds td.col-amount { width: 130px; text-align: right; }
.refunds td.col-status { width: 130px; }
.refunds td.col-action { width: 200px; text-align: right; padding-right: 16px; }

.cell-date {
  font-size: 13px;
  color: var(--text);
}
.cell-date small { display: block; color: var(--text-3); font-size: 11.5px; margin-top: 1px; }

.cell-client-name { font-weight: 500; font-size: 13.5px; }
.cell-client-phone {
  font-size: 12px;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}

/* Компактный статус доставки SMS под телефоном (вкладка «Ждут подписи»). */
.sms-mini {
  font-size: 11px;
  font-weight: 500;
  margin-top: 3px;
  white-space: nowrap;
}

.cell-payment {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cell-pay-text { display: flex; flex-direction: column; gap: 0; }
.cell-pay-label {
  font-size: 13px;
  color: var(--text);
}
.cell-pay-id {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}

.pay-icon {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  color: white;
  letter-spacing: -0.02em;
  flex-shrink: 0;
}
.pay-icon.CP { background: var(--pay-cp); }
.pay-icon.YK { background: var(--pay-yk); }
.pay-icon.TB { background: var(--pay-tb); color: #1C1917; }
.pay-icon.GC { background: var(--pay-gc); }

.cell-amount {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px 0 7px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
}
.badge .badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.badge.new { background: var(--st-new-bg); color: #4B5563; }
.badge.new .badge-dot { background: var(--st-new); }
.badge.in_progress { background: var(--st-progress-bg); color: #1E40AF; }
.badge.in_progress .badge-dot { background: var(--st-progress); }
.badge.awaiting_receipt { background: var(--st-receipt-bg); color: #92400E; }
.badge.awaiting_receipt .badge-dot { background: var(--st-receipt); }
.badge.done { background: var(--st-done-bg); color: #065F46; }
.badge.done .badge-dot { background: var(--st-done); }
.badge.error { background: var(--st-error-bg); color: #991B1B; }
.badge.error .badge-dot { background: var(--st-error); }
.badge.cancelled { background: var(--st-cancel-bg); color: #57534E; }
.badge.cancelled .badge-dot { background: var(--st-cancel); }
/* Phase-STATUS: статусы возврата-кейса (Case). «Подписано» — зелёно-нейтральный (подписан, но
   деньги ещё не проводятся); «На подписи» / «В работе» — как progress. */
.badge.signed { background: #D1FAE5; color: #065F46; }
.badge.signed .badge-dot { background: #10B981; }
.badge.awaiting_sign { background: var(--st-progress-bg); color: #1E40AF; }
.badge.awaiting_sign .badge-dot { background: var(--st-progress); }
.badge.processing { background: var(--st-progress-bg); color: #1E40AF; }
.badge.processing .badge-dot { background: var(--st-progress); }

.chip-dot.awaiting_receipt { background: var(--st-receipt); }
.chip-dot.cancelled { background: var(--st-cancel); }

/* Spinner inline in action cell for status "waiting" */
.waiting-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
}
.spin {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--border-strong);
  border-top-color: var(--st-progress);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.receipt-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  color: var(--text-2);
  text-decoration: none;
}
.receipt-link:hover { color: var(--text); text-decoration: underline; }
.receipt-link svg { width: 12px; height: 12px; }

/* Group bracket — left edge for paired rows */
.refunds td.col-date { position: relative; }
.refunds tr.group-row td.col-date::before {
  content: "";
  position: absolute;
  left: 0;
  width: 3px;
  background: var(--border-strong);
}
.refunds tr.group-top td.col-date::before { top: 8px; bottom: 0; }
.refunds tr.group-mid td.col-date::before { top: 0; bottom: 0; }
.refunds tr.group-bot td.col-date::before { top: 0; bottom: 8px; }

/* ───────── Table foot — TXT batch ───────── */

.table-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  background: #FAFAF9;
}
.table-foot-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-2);
}
.table-foot-info svg { width: 14px; height: 14px; color: var(--text-3); }

/* ───────── Empty / no results ───────── */

.empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--text-2);
  font-size: 13.5px;
}
.empty-title { font-size: 14.5px; font-weight: 500; color: var(--text); margin-bottom: 6px; }

/* ───────── Drawer (карточка-заглушка) ───────── */

.drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.32);
  z-index: 50;
}
.drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 32px -8px rgba(28, 25, 23, 0.12);
  z-index: 51;
  display: flex;
  flex-direction: column;
}
.drawer-head {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.drawer-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.drawer-sub { font-size: 12.5px; color: var(--text-3); }
.drawer-close {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-3);
}
.drawer-close:hover { background: var(--hover); color: var(--text); }
.drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.drawer-foot {
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
}
.drawer-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 500;
  margin-bottom: 8px;
}
.drawer-stub {
  padding: 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  font-size: 12.5px;
  color: var(--text-3);
  text-align: center;
}

.kv {
  display: grid;
  grid-template-columns: 130px 1fr;
  row-gap: 6px;
  font-size: 13px;
}
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; color: var(--text); }
.kv dd.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; }

/* ───────── Modal (create заявка) ───────── */

.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.40);
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 40px 20px;
  overflow-y: auto;
}
.modal {
  background: var(--surface);
  border-radius: 10px;
  box-shadow: 0 24px 64px -12px rgba(28,25,23,0.28), 0 0 0 1px var(--border);
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 80px);
}
.modal-head {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.modal-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 3px;
  letter-spacing: -0.01em;
}
.modal-sub {
  font-size: 12.5px;
  color: var(--text-3);
}
.modal-close {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-3);
  flex-shrink: 0;
}
.modal-close:hover { background: var(--hover); color: var(--text); }
.modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.modal-foot-left { margin-right: auto; font-size: 12px; color: var(--text-3); }

.field-label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.field-hint {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 5px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.input-text {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  outline: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--surface);
  transition: border-color 0.1s;
}
.input-text:focus { border-color: var(--text-3); }
.input-text:disabled { background: var(--hover); color: var(--text-2); }
.input-text::placeholder { color: var(--text-3); font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }

.loading-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0 0;
  font-size: 13px;
  color: var(--text-2);
}

.order-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #FAFAF9;
}
.order-chip-icon {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--text);
  color: white;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 700;
}
.order-chip-text { flex: 1; font-size: 13px; }
.order-chip-text strong { font-weight: 600; }
.order-chip-text small { color: var(--text-3); margin-left: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.order-chip-change {
  font-size: 12px;
  color: var(--text-2);
  text-decoration: none;
}
.order-chip-change:hover { color: var(--text); text-decoration: underline; }

.payments-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.payments-list-head {
  display: grid;
  grid-template-columns: 28px 1fr 110px 130px;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #FAFAF9;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.payments-list-head .ph-amount { text-align: right; }
.payments-list-head .ph-refund { text-align: left; }
.payment-row {
  display: grid;
  grid-template-columns: 28px 1fr 110px 130px;
  align-items: center;
  gap: 12px;
  padding: 12px;
}
.payment-row + .payment-row { border-top: 1px solid var(--border); }
.payment-row.checked { background: #FFFFFE; }
.payment-row.disabled { opacity: 0.55; }
.checkbox {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.checkbox:hover { border-color: var(--text-3); }
.checkbox:checked {
  background: var(--text);
  border-color: var(--text);
}
.checkbox:checked::after {
  content: '';
  width: 8px; height: 5px;
  border-left: 1.5px solid white;
  border-bottom: 1.5px solid white;
  transform: rotate(-45deg) translate(1px, -1px);
}

.payment-row-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.payment-row-text { display: flex; flex-direction: column; min-width: 0; }
.payment-row-label { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.payment-row-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-3);
  margin-top: 1px;
}

.payment-row-amount {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-align: right;
  color: var(--text-2);
}

.refund-input-wrap {
  position: relative;
}
.refund-input {
  width: 100%;
  height: 32px;
  padding: 0 24px 0 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  text-align: right;
  outline: none;
  background: var(--surface);
}
.refund-input:focus { border-color: var(--text-3); }
.refund-input:disabled { background: var(--bg); color: var(--text-3); }
.refund-input.error { border-color: var(--st-error); }
.refund-input-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--text-3);
  pointer-events: none;
}

.manual-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 500;
  background: #F5F5F4;
  color: var(--text-2);
  border-radius: 3px;
  letter-spacing: 0.02em;
}

.manual-hint {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 6px;
  display: flex;
  gap: 6px;
}
.manual-hint svg { width: 12px; height: 12px; flex-shrink: 0; margin-top: 1px; opacity: 0.7; }

.refund-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: #FAFAF9;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
}
.refund-summary-label { color: var(--text-2); }
.refund-summary-value {
  font-family: 'JetBrains Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px;
  font-weight: 600;
}

.duplicate-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid #FECACA;
  background: #FEF2F2;
  border-radius: 8px;
}
.duplicate-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #991B1B;
  display: flex;
  align-items: center;
  gap: 8px;
}
.duplicate-card-title svg { width: 14px; height: 14px; }
.duplicate-card-body { font-size: 13px; color: #7F1D1D; }
.duplicate-card-link {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
}
.duplicate-card-link:hover { text-decoration: underline; }

.btn[disabled] { opacity: 0.4; pointer-events: none; }

.demo-hint {
  font-size: 11.5px;
  color: var(--text-3);
  background: #FAFAF9;
  border: 1px dashed var(--border-strong);
  border-radius: 6px;
  padding: 8px 10px;
  line-height: 1.5;
}
.demo-hint code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 1px 4px;
  border-radius: 3px;
}
.demo-hint a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
}
.demo-hint a:hover { text-decoration: underline; }

/* ───────── Row card (карточка строки) ───────── */

.card-scrim {
  position: fixed;
  inset: 0;
  background: rgba(28, 25, 23, 0.32);
  z-index: 50;
}
.card-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 620px;
  max-width: 100vw;
  background: var(--surface);
  border-left: 1px solid var(--border);
  box-shadow: -16px 0 40px -12px rgba(28, 25, 23, 0.18);
  z-index: 51;
  display: flex;
  flex-direction: column;
}
.card-topbar {
  padding: 12px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FAFAF9;
  flex-shrink: 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-2);
  font-weight: 500;
}
.back-link svg { width: 13px; height: 13px; }
.back-link:hover { color: var(--text); }
.card-topbar-actions { display: flex; gap: 6px; align-items: center; }
.card-iconbtn {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-3);
}
.card-iconbtn:hover { background: var(--hover); color: var(--text); }
.card-iconbtn svg { width: 14px; height: 14px; }

.card-head {
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.card-head-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.card-head-sub {
  font-size: 13.5px;
  color: var(--text-2);
}
.card-head-sub .phone {
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  margin-left: 8px;
}

.card-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 24px 24px;
}
.card-section { padding: 18px 0; }
.card-section + .card-section { border-top: 1px solid var(--border); }

.section-label {
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  margin-bottom: 12px;
}

.card-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  row-gap: 8px;
  font-size: 13.5px;
}
.card-row dt { color: var(--text-3); font-weight: 400; }
.card-row dd { margin: 0; color: var(--text); }
.card-row dd.mono { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.card-row dd.amount { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 500; }
.card-row dd .commission-note { color: var(--text-3); font-size: 11.5px; margin-left: 8px; font-family: inherit; font-weight: 400; }

.card-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-bottom: 1px solid transparent;
}
.card-link:hover { border-bottom-color: currentColor; }
.card-link svg { width: 12px; height: 12px; }

.payment-block {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #FAFAF9;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
}
.payment-block .pay-icon { width: 32px; height: 32px; font-size: 12px; border-radius: 6px; }
.payment-block-text { flex: 1; }
.payment-block-name { font-size: 14px; font-weight: 600; }
.payment-block-id {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 2px;
}

.banner {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13.5px;
}
.banner-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: white;
}
.banner-icon svg { width: 14px; height: 14px; }
.banner-text { flex: 1; }
.banner-title { font-weight: 600; margin-bottom: 2px; }
.banner-sub { font-size: 12.5px; opacity: 0.85; }
.banner.done {
  background: var(--st-done-bg);
  color: #064E3B;
  border: 1px solid #A7F3D0;
}
.banner.done .banner-icon { background: var(--st-done); }
.banner.error {
  background: var(--st-error-bg);
  color: #7F1D1D;
  border: 1px solid #FECACA;
}
.banner.error .banner-icon { background: var(--st-error); }
.banner.waiting {
  background: var(--st-progress-bg);
  color: #1E3A8A;
  border: 1px solid #BFDBFE;
}
.banner.waiting .banner-icon { background: var(--st-progress); }
.banner.receipt {
  background: var(--st-receipt-bg);
  color: #78350F;
  border: 1px solid #FDE68A;
}
.banner.receipt .banner-icon { background: var(--st-receipt); }
.banner.cancelled {
  background: var(--st-cancel-bg);
  color: #44403C;
  border: 1px solid var(--border-strong);
}
.banner.cancelled .banner-icon { background: var(--st-cancel); }
.banner.warning {
  background: #FFFBEB;
  color: #78350F;
  border: 1px solid #FDE68A;
}
.banner.warning .banner-icon { background: #F59E0B; }
.banner-actions { margin-top: 10px; display: flex; gap: 8px; }
.btn-banner {
  background: var(--surface);
  border: 1px solid currentColor;
  padding: 0 12px;
  height: 28px;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-banner:hover { background: rgba(255,255,255,0.7); }
.btn-banner svg { width: 12px; height: 12px; }

.action-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.btn-block {
  height: 40px;
  font-size: 14px;
  width: 100%;
  justify-content: center;
}
.action-row-secondary {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.action-row-secondary .btn { flex: 1; min-width: 140px; justify-content: center; }

.timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline-item {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  padding: 8px 0;
  font-size: 13px;
  position: relative;
}
.timeline-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--border-strong);
  margin-top: 7px;
  margin-left: 3px;
  position: relative;
  z-index: 1;
}
.timeline-item.event-success .timeline-dot { background: var(--st-done); }
.timeline-item.event-error .timeline-dot { background: var(--st-error); }
.timeline-item.event-current .timeline-dot { background: var(--st-progress); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15); }
.timeline-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 6.5px;
  top: 18px;
  bottom: -4px;
  width: 1px;
  background: var(--border);
}
.timeline-event-text { color: var(--text); }
.timeline-event-text .ts {
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  margin-left: 6px;
  font-size: 12.5px;
}
.timeline-event-text .actor { font-weight: 500; }
.timeline-event-text a {
  color: var(--text);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--border-strong);
  margin-left: 4px;
}
.timeline-event-text a:hover { border-bottom-color: var(--text); }

/* ───────── Page chrome (для не-таблиц) ───────── */

.page-with-tabs {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: flex-start;
}

.subnav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-right: 1px solid var(--border);
  padding-right: 24px;
  padding-top: 8px;
  position: sticky;
  top: 76px;
}
.subnav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--text-2);
  font-weight: 500;
  text-align: left;
}
.subnav-item:hover { background: var(--hover); color: var(--text); }
.subnav-item.active { background: var(--text); color: white; }
.subnav-item .subnav-status {
  margin-left: auto;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.tab-panel { max-width: 720px; }
.tab-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
}
.tab-panel-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.tab-panel-sub {
  font-size: 13px;
  color: var(--text-2);
}

/* ───────── Forms ───────── */

.form-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 0;
}
.form-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  padding: 16px 20px;
  align-items: flex-start;
}
.form-row + .form-row { border-top: 1px solid var(--border); }
.form-row-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  padding-top: 8px;
}
.form-row-hint {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 4px;
  font-weight: 400;
  line-height: 1.4;
}
.form-row-control { min-width: 0; }
.form-row-control-flex {
  display: flex;
  gap: 8px;
  align-items: center;
}
.form-input {
  width: 100%;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  outline: none;
  font-family: inherit;
}
.form-input.mono { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; }
.form-input:focus { border-color: var(--text-3); }
.form-input:disabled { background: var(--bg); color: var(--text-2); }
.form-input.short { max-width: 200px; }
.form-textarea {
  min-height: 80px;
  padding: 8px 10px;
  resize: vertical;
}

.field-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 500;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  margin-top: 8px;
}
.field-status .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
}
.field-status.ok { background: var(--st-done-bg); color: #065F46; }
.field-status.ok .dot { background: var(--st-done); }
.field-status.warn { background: #FFFBEB; color: #92400E; }
.field-status.warn .dot { background: #F59E0B; }
.field-status.err { background: var(--st-error-bg); color: #991B1B; }
.field-status.err .dot { background: var(--st-error); }

.form-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 0;
}
.form-foot-info { font-size: 12px; color: var(--text-3); margin-right: auto; }

.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--border-strong);
  border-radius: 10px;
  flex-shrink: 0;
  transition: background 0.15s;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: white;
  border-radius: 50%;
  transition: transform 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.toggle-switch.on { background: var(--text); }
.toggle-switch.on::after { transform: translateX(16px); }

/* ───────── Audit table ───────── */

.audit-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.audit-filters .filter-btn { background: var(--surface); }

.audit-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
table.audit { width: 100%; border-collapse: collapse; }
.audit thead th {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: left;
  padding: 10px 14px;
  background: #FAFAF9;
  border-bottom: 1px solid var(--border);
}
.audit tbody tr { border-bottom: 1px solid var(--border); }
.audit tbody tr:last-child { border-bottom: none; }
.audit tbody tr:hover { background: var(--hover); }
.audit tbody td {
  padding: 10px 14px;
  font-size: 13px;
  vertical-align: top;
  height: 44px;
}
.audit td.col-ts { width: 150px; color: var(--text-2); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.audit td.col-user { width: 160px; }
.audit td.col-action { width: 220px; }
.audit td.col-object { color: var(--text-2); }
.audit-action-tag {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 3px;
  background: var(--hover);
  color: var(--text-2);
}
.audit-action-tag.create { background: #EFF6FF; color: #1E40AF; }
.audit-action-tag.run { background: #ECFDF5; color: #065F46; }
.audit-action-tag.update { background: #FFFBEB; color: #92400E; }
.audit-action-tag.error { background: var(--st-error-bg); color: #991B1B; }

/* ───────── Batches archive ───────── */

.batch-archive-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.batch-archive-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: 40px 1fr auto auto auto;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
}
.batch-archive-card:hover { background: #FFFFFE; border-color: var(--border-strong); }
.batch-archive-card.active {
  border-color: #FDE68A;
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
}
.batch-archive-num {
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--pay-tb);
  color: #1C1917;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.02em;
}
.batch-archive-card.active .batch-archive-num {
  outline: 2px solid #F59E0B;
  outline-offset: -2px;
}
.batch-archive-meta { display: flex; flex-direction: column; }
.batch-archive-metrics { display: flex; gap: 14px; white-space: nowrap; font-size: 12px;
  color: var(--text-2); font-variant-numeric: tabular-nums; }
.batch-archive-title { font-size: 14px; font-weight: 600; }
.batch-archive-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; font-variant-numeric: tabular-nums; }
.batch-archive-stat {
  font-size: 12px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.batch-archive-stat strong { font-weight: 600; font-size: 13.5px; display: block; color: var(--text); }
.batch-archive-status {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11.5px;
  font-weight: 500;
}
.batch-archive-status.ok { background: var(--st-done-bg); color: #065F46; }
.batch-archive-status.partial { background: #FFFBEB; color: #92400E; }
.batch-archive-status.rejected { background: var(--st-error-bg); color: #991B1B; }
.batch-archive-status.active { background: #FEF3C7; color: #92400E; }

/* ───────── Operations tray (плавающие операции внизу справа) ───────── */
.ops-tray {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  width: 360px;
  pointer-events: none;
}
.ops-card {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 32px -8px rgba(28,25,23,0.18), 0 0 0 1px rgba(28,25,23,0.04);
  padding: 14px 16px;
  animation: opsSlideIn 0.22s ease-out;
}
@keyframes opsSlideIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.ops-card.done { border-color: #A7F3D0; background: linear-gradient(0deg, #FFFFFF 0%, #F0FDF4 100%); }
.ops-card.error { border-color: #FECACA; background: linear-gradient(0deg, #FFFFFF 0%, #FEF2F2 100%); }
.ops-card.warning { border-color: #FDE68A; background: linear-gradient(0deg, #FFFFFF 0%, #FFFBEB 100%); }
.ops-head { display: flex; align-items: flex-start; gap: 10px; }
.ops-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0; color: white; }
.ops-icon.active { background: var(--st-progress); }
.ops-icon.done { background: var(--st-done); }
.ops-icon.warning { background: var(--st-receipt); }
.ops-icon.error { background: var(--st-error); }
.ops-icon svg { width: 13px; height: 13px; }
.ops-title { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ops-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.ops-close { width: 22px; height: 22px; border-radius: 4px; display: grid; place-items: center; color: var(--text-3); margin-left: auto; cursor: pointer; }
.ops-close:hover { background: var(--hover); color: var(--text); }
.ops-close svg { width: 12px; height: 12px; }
.ops-steps { margin-top: 10px; display: flex; flex-direction: column; }
.ops-step { display: grid; grid-template-columns: 16px 1fr; gap: 8px; padding: 5px 0; font-size: 12.5px; align-items: center; }
.ops-step.pending { opacity: 0.4; }
.ops-step-icon { width: 14px; height: 14px; display: grid; place-items: center; }
.ops-step-icon .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.ops-step.done .ops-step-icon { color: var(--st-done); }
.ops-step.error .ops-step-icon { color: var(--st-receipt); }
.ops-foot { margin-top: 10px; display: flex; gap: 6px; }
.ops-foot .btn-banner { background: var(--surface); }

/* Inline-вариант: лента прогресса под строкой таблицы */
.refunds tr.op-strip td {
  padding: 0;
  height: auto;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(0deg, #F0FDF4 0%, #FFFFFF 100%);
}
.refunds tr.op-strip.warning td {
  background: linear-gradient(0deg, #FFFBEB 0%, #FFFFFF 100%);
}
.refunds tr.op-strip.error td {
  background: linear-gradient(0deg, #FEF2F2 0%, #FFFFFF 100%);
}
.refunds tr.op-strip.active td {
  background: linear-gradient(0deg, #EFF6FF 0%, #FFFFFF 100%);
}
.op-strip-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  border-left: 3px solid var(--st-progress);
}
.op-strip.done .op-strip-inner { border-left-color: var(--st-done); }
.op-strip.warning .op-strip-inner { border-left-color: var(--st-receipt); }
.op-strip.error .op-strip-inner { border-left-color: var(--st-error); }
.op-strip-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: white;
  background: var(--st-progress);
}
.op-strip.done .op-strip-icon { background: var(--st-done); }
.op-strip.warning .op-strip-icon { background: var(--st-receipt); }
.op-strip.error .op-strip-icon { background: var(--st-error); }
.op-strip-title { font-size: 13.5px; font-weight: 600; }
.op-strip-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.op-strip-steps {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.op-strip-step {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text);
}
.op-strip-step.pending { color: var(--text-3); opacity: 0.6; }
.op-strip-step.done { color: #065F46; }
.op-strip-step.error { color: #92400E; }
.op-strip-step .ic {
  width: 14px; height: 14px;
  display: grid; place-items: center;
}
.op-strip-step.pending .ic .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-strong);
}
.op-strip-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

/* Batch detail */
.batch-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.batch-detail-head-left { display: flex; align-items: center; gap: 14px; }
.batch-detail-meta {
  display: flex;
  gap: 24px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
}
.batch-detail-meta-item { display: flex; flex-direction: column; }
.batch-detail-meta-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; }
.batch-detail-meta-val { font-size: 13.5px; font-weight: 500; margin-top: 2px; }
.batch-detail-meta-val.mono { font-family: 'JetBrains Mono', monospace; font-size: 12.5px; font-weight: 400; }

.batch-detail-rows {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.batch-detail-row {
  display: grid;
  grid-template-columns: 28px 1fr 140px 140px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  font-size: 13.5px;
}
.batch-detail-row + .batch-detail-row { border-top: 1px solid var(--border); }
.batch-detail-row.head {
  background: #FAFAF9;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 16px;
}
.batch-detail-mark {
  width: 18px; height: 18px;
  border-radius: 4px;
  display: grid; place-items: center;
  font-size: 11px;
  color: white;
}
.batch-detail-mark.passed { background: var(--st-done); }
.batch-detail-mark.declined { background: var(--st-error); }
.batch-detail-cell-id { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--text-3); }
.batch-detail-cell-amount { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 500; }
.batch-detail-cell-reason { color: var(--text-2); font-size: 12.5px; }

/* ───────── Empty states ───────── */

.empty-state {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 80px 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
}
.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: var(--bg);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  color: var(--text-3);
}
.empty-state-icon svg { width: 24px; height: 24px; }
.empty-state-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px;
}
.empty-state-text {
  font-size: 13.5px;
  color: var(--text-2);
  max-width: 360px;
  margin: 0 auto 16px;
  line-height: 1.5;
}

/* ───────── Users table (Settings → Пользователи) ───────── */

.users-table {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.users-table-row {
  display: grid;
  grid-template-columns: 1fr 1fr 140px 100px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 13.5px;
}
.users-table-row + .users-table-row { border-top: 1px solid var(--border); }
.users-table-row.head {
  background: #FAFAF9;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 9px 16px;
}
.users-table-row .role-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 4px;
  background: var(--hover);
  color: var(--text-2);
}
/* Phase-ROLES-V2: operator/head_manager/admin (manager/cashier — легаси для истории). */
.users-table-row .role-pill.operator { background: #EFF6FF; color: #1E40AF; }
.users-table-row .role-pill.head_manager { background: #ECFDF5; color: #065F46; }
.users-table-row .role-pill.cashier { background: #FFFBEB; color: #92400E; }
.users-table-row .role-pill.manager { background: #EFF6FF; color: #1E40AF; }
.users-table-row .role-pill.admin { background: #FAF5FF; color: #6B21A8; }
.user-row-actions { display: flex; gap: 4px; justify-content: flex-end; }
.user-row-icon {
  width: 26px; height: 26px;
  border-radius: 5px;
  display: grid; place-items: center;
  color: var(--text-3);
}
.user-row-icon:hover { background: var(--hover); color: var(--text); }
.user-row-icon svg { width: 13px; height: 13px; }

/* ───────── Quiet inline state (e.g. "В очереди") ───────── */

.muted-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-3);
  font-style: normal;
}
.muted-inline svg { width: 12px; height: 12px; opacity: 0.7; }

/* ───────── Batch panel (партия TXT) ───────── */

.batch-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.batch-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #FFFBEB 0%, #FFFFFF 100%);
}
.batch-head-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--pay-tb);
  color: #1C1917;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.batch-head-text { flex: 1; }
.batch-head-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 2px;
}
.batch-head-sub {
  font-size: 12.5px;
  color: var(--text-2);
}
.batch-head-sub .sep { color: var(--text-3); margin: 0 6px; }
.batch-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.batch-toggle {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  color: var(--text-3);
}
.batch-toggle:hover { background: var(--hover); color: var(--text); }
.batch-toggle svg { width: 14px; height: 14px; transition: transform 0.15s; }
.batch-toggle.collapsed svg { transform: rotate(-90deg); }

.batch-body { padding: 4px 8px 12px; }
.batch-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 8px 6px;
  font-size: 12px;
  color: var(--text-2);
}
.batch-progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.batch-progress-bar-fill {
  height: 100%;
  background: var(--st-done);
  transition: width 0.2s;
}

.batch-rows { display: flex; flex-direction: column; }
.batch-row {
  display: grid;
  /* 3 ячейки: имя (растягивается) | сумма | действия. Раньше было 4 колонки (с ведущей
     24px-меткой, которой в разметке нет) -> имя сжималось в 24px и рвалось, кнопки наезжали. */
  grid-template-columns: minmax(0, 1fr) 110px auto;
  align-items: center;
  gap: 12px;
  padding: 10px 8px;
  border-radius: 6px;
}
.batch-row + .batch-row { border-top: 1px solid var(--border); border-radius: 0; }
.batch-row.marked { opacity: 0.55; }

.batch-row-mark {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1.5px solid var(--border-strong);
  display: grid;
  place-items: center;
  background: var(--surface);
  font-size: 11px;
}
.batch-row-mark.passed { background: var(--st-done); border-color: var(--st-done); color: white; }
.batch-row-mark.declined { background: var(--st-error); border-color: var(--st-error); color: white; }
.batch-row-mark.deferred { background: var(--text-3); border-color: var(--text-3); color: white; }

.batch-row-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.batch-row-name { font-size: 13.5px; font-weight: 500; }
.batch-row-meta {
  font-size: 11.5px;
  color: var(--text-3);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  margin-top: 1px;
}
.batch-row-amount {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  font-weight: 500;
  text-align: right;
}

.batch-row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.btn-mark {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text-2);
  white-space: nowrap;
}
.btn-mark svg { width: 12px; height: 12px; }
.btn-mark:hover { background: var(--hover); color: var(--text); }
.btn-mark.passed:hover { background: var(--st-done-bg); color: #065F46; border-color: #A7F3D0; }
.btn-mark.declined:hover { background: var(--st-error-bg); color: #991B1B; border-color: #FECACA; }
.btn-mark.applied {
  background: var(--st-done-bg);
  color: #065F46;
  border-color: #A7F3D0;
}
.btn-mark.applied.declined { background: var(--st-error-bg); color: #991B1B; border-color: #FECACA; }
.btn-mark.applied.deferred { background: #F5F5F4; color: var(--text-2); border-color: var(--border-strong); }

.batch-row-marked-note {
  font-size: 12px;
  color: var(--text-3);
  font-style: normal;
  text-align: right;
}

.batch-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: #FAFAF9;
}
.batch-foot-left { font-size: 12px; color: var(--text-3); }
.batch-foot-actions { display: flex; gap: 8px; }

/* Decline reason popover */
.reason-popover {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 12px 32px -8px rgba(28,25,23,0.18);
  width: 320px;
  padding: 12px;
}
.reason-popover-title {
  font-size: 12px;
  color: var(--text-2);
  margin-bottom: 8px;
}
.reason-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.reason-option {
  text-align: left;
  padding: 7px 8px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--text);
}
.reason-option:hover { background: var(--hover); }
.reason-textarea {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 12.5px;
  resize: vertical;
  min-height: 60px;
  outline: none;
}
.reason-textarea:focus { border-color: var(--text-3); }
.reason-popover-foot {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 8px;
}

/* Collapsed batch banner */
.batch-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(180deg, #FFFBEB 0%, #FFF7E0 100%);
  border: 1px solid #FDE68A;
  border-radius: 8px;
  margin-bottom: 14px;
  cursor: pointer;
}
.batch-banner:hover { background: #FEF3C7; }
.batch-banner-icon {
  width: 24px; height: 24px;
  border-radius: 4px;
  background: var(--pay-tb);
  color: #1C1917;
  display: grid; place-items: center;
  font-weight: 700; font-size: 10px;
}
.batch-banner-text { font-size: 13px; flex: 1; }
.batch-banner-text strong { font-weight: 600; }
.batch-banner-cta {
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.batch-banner-cta svg { width: 12px; height: 12px; }


/* ===== Glue для server-rendered (Jinja+htmx+Alpine): логин, x-cloak, утилиты ===== */
[x-cloak] { display: none !important; }
.guest { max-width: 380px; margin: 12vh auto; padding: 28px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-card); }
.guest h1 { font-size: 18px; margin: 0 0 4px; }
.guest h2 { font-size: 15px; margin: 16px 0 8px; }
.guest label { display: block; margin-bottom: 12px; font-size: 12px; font-weight: 500; color: var(--text-2); }
.guest label.inline { display: flex; align-items: center; gap: 6px; }
.guest input { width: 100%; padding: 8px 11px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; margin-top: 4px; }
.msg { padding: 10px 12px; border-radius: 6px; margin: 10px 0; font-size: 13px; display: none; }
.msg.show { display: block; }
.msg.ok { background: var(--st-done-bg); color: #065f46; }
.msg.warn { background: var(--st-receipt-bg); color: #92400e; }
.msg.err { background: var(--st-error-bg); color: #991b1b; }
code { font-family: var(--mono, monospace); background: var(--bg); padding: 2px 5px; border-radius: 4px; }
/* htmx: контейнер strip под строкой наследует строку таблицы */
tr.strip-row > td { padding: 0; border: 0; }
/* тосты */
#toast { position: fixed; bottom: 20px; right: 20px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast { padding: 10px 14px; border-radius: 8px; font-size: 13px; color: #fff; box-shadow: var(--shadow-card); }
.toast.ok { background: var(--st-done); } .toast.err { background: var(--st-error); }

/* Wave F: детальный экран партии + мелочи карточки */
.batch-meta-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; }
.bm-cell { background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:12px 14px; }
.bm-label { font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
.bm-val { font-size:18px; font-weight:600; margin-top:4px; }
.radio-row { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:400; margin:4px 0; color:var(--text); }
.card-comment { margin-top:14px; padding:10px 12px; border-left:2px solid var(--border-strong);
  background:#FAFAF9; border-radius:0 4px 4px 0; }
.card-comment-label { font-size:11px; color:var(--text-3); text-transform:uppercase;
  letter-spacing:.06em; font-weight:500; margin-bottom:4px; }
.card-comment-text { font-size:12.5px; color:var(--text-2); line-height:1.5; font-style:italic; }
.batch-archive-list { display:flex; flex-direction:column; gap:8px; }

/* Wave F fixes: dropdown типа платежа, прочее */
.pay-dropdown { position:absolute; top:calc(100% + 4px); left:0; min-width:180px; background:var(--surface);
  border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 32px -8px rgba(28,25,23,.18);
  padding:6px; z-index:30; display:flex; flex-direction:column; }
.pay-dropdown .dd-item { padding:7px 10px; border-radius:6px; font-size:13px; color:var(--text); cursor:pointer; white-space:nowrap; }
.pay-dropdown .dd-item:hover { background:var(--hover); }
.pay-dropdown .dd-item.active { background:var(--hover); font-weight:600; }
.card-comm { color:var(--text-3); font-size:11px; }
.card-action-row { display:flex; gap:8px; margin-top:10px; }
.card-action-row .btn { flex:1; justify-content:center; }
.user-avatar { width:30px; height:30px; border-radius:50%; display:inline-grid; place-items:center;
  font-size:11px; font-weight:600; color:#fff; flex-shrink:0; }
.user-cell { display:flex; align-items:center; gap:10px; }

/* Wave F fix: роль-карточки в модалках пользователя */
.role-card { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--border);
  border-radius:8px; cursor:pointer; margin-bottom:8px; }
.role-card.sel { border-color:var(--text); background:#FAFAF9; }
.role-card input { accent-color:var(--text); margin-top:2px; }
.role-card .rc-title { display:block; font-weight:600; font-size:13.5px; }
.role-card .rc-desc { display:block; font-size:12px; color:var(--text-3); margin-top:2px; line-height:1.4; }
/* Phase-2FA-FLAG: тумблер «Требовать 2FA» в модалках пользователя */
.twofa-toggle { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid var(--border);
  border-radius:8px; cursor:pointer; }
.twofa-toggle input { accent-color:var(--text); margin-top:2px; }
.twofa-toggle .rc-title { display:block; font-weight:600; font-size:13.5px; }
.twofa-toggle .rc-desc { display:block; font-size:12px; color:var(--text-3); margin-top:2px; line-height:1.4; }
/* htmx-индикатор процесса (фискализация и пр.): скрыт, виден во время запроса */
.htmx-indicator { display: none !important; }
.htmx-request.htmx-indicator, .htmx-request .htmx-indicator { display: flex !important; }

/* Карточка-дровер: классы, бывшие инлайн-стилями в прототипе row_card.jsx */
.section-edit-link { font-size:11.5px; color:var(--text-2); font-weight:500; padding:0;
  display:inline-flex; align-items:center; gap:4px; background:none; border:0; cursor:pointer; }
.pay-via-badge { margin-left:8px; font-size:10.5px; font-weight:500; padding:1px 6px;
  border-radius:3px; background:#EFF6FF; color:#1E40AF; }
.tb-statement { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#FAFAF9;
  border:1px solid var(--border); border-radius:8px; margin-bottom:12px; }
.tb-statement-title { font-size:13px; font-weight:500; }
.tb-statement-sub { font-size:11.5px; color:var(--text-3); margin-top:2px; }
.requisites-toggle { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text-2);
  font-weight:500; padding:0; background:none; border:0; cursor:pointer; }
/* Подтверждение возврата клиенту — сворачиваемое превью текста + копирование */
.reply-box { margin-top:14px; }
.reply-toggle { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500;
  color:var(--text-2); padding:0; background:none; border:0; cursor:pointer; }
.reply-toggle:hover { color:var(--text); }
.reply-chev { width:11px; height:11px; flex:none; transition:transform .15s; }
.reply-chev.is-open { transform:rotate(90deg); }
.reply-body { margin-top:10px; }
.reply-text { margin:0 0 10px; padding:12px 14px; border:1px solid var(--border); border-radius:8px;
  background:#FAFAF9; font:inherit; font-size:12.5px; line-height:1.55; color:var(--text);
  white-space:pre-wrap; word-break:break-word; max-height:280px; overflow:auto; }
.manual-box { margin-top:10px; padding:14px; border:1px solid var(--border); border-radius:8px; background:#FAFAF9; }
.manual-box-title { font-size:13px; font-weight:600; margin-bottom:4px; }
.manual-box-sub { font-size:12.5px; color:var(--text-2); margin-bottom:12px; line-height:1.5; }
.manual-box-label { font-size:11.5px; color:var(--text-3); text-transform:uppercase;
  letter-spacing:.06em; font-weight:500; margin-bottom:6px; }
.rollback-box { margin-top:10px; padding:14px; border:1px solid #FECACA; border-radius:8px; background:#FEF2F2; }
.rollback-box-title { font-size:13px; font-weight:600; margin-bottom:6px; color:#7F1D1D; }
.rollback-box-sub { font-size:12.5px; color:#7F1D1D; margin-bottom:12px; line-height:1.5; }
.card-iconbtn:disabled { opacity:.35; cursor:default; }