/* public/css/accounting.css — клиентские веб-панели премиум-модулей
   (изначально только бухгалтерия, public/js/accounting/panel.js, 15 сен
   2026; с 16 сен 2026 те же классы (.acct-tabs/.acct-panel-icon/
   .admin-table и т.п.) переиспользует и public/js/translationDocs/panel.js
   — общего вида "панель платного клиента" достаточно на оба модуля, заводить
   вторую почти идентичную таблицу стилей не стали). НЕ линкует
   /admin/accounting.css и /admin/admin.css напрямую в index.html — у
   admin.css есть `.tagline{...}`, который переопределил бы стиль тега сайта
   (та же строка, где site's own tagline уже стилизован в styles.css).
   Вместо этого сюда скопированы только безопасные, префиксованные правила
   (acct-*, нужные admin-* утилиты для таблиц/ошибок), без риска столкновения
   с существующими селекторами сайта. Источник — public/admin/accounting.css
   + выборка из public/admin/admin.css, держать в синхроне вручную, если
   общий вид review-экрана поменяется. */

:root{ --acct-ok:#2E7D46; --acct-ok-tint:#E8F3EB; }

/* --- табы "Распознавание" / "Бухгалтерия" (16 сен 2026) --- */
.acct-tabs{
  display:flex; gap:4px; padding:4px; margin:-8px 0 20px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface);
  width:fit-content; max-width:100%;
}
.acct-tab{
  border:0; background:transparent; padding:8px 16px; border-radius:7px;
  font-family:inherit; font-size:0.88rem; font-weight:500; color:var(--ink-soft);
  cursor:pointer; transition:background .15s, color .15s; white-space:nowrap;
}
.acct-tab:hover{ color:var(--ink); }
.acct-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.acct-tab-active{ background:var(--ink); color:#fff; }
.acct-tab-active:hover{ color:#fff; }

/* --- шапка панели (иконка + заголовок), тот же язык, что translation-header --- */
.acct-panel-header-title{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.acct-panel-header-title h2{ font-size:1.12rem; margin:0; }
.acct-panel-icon{
  width:30px; height:30px; border-radius:8px; background:var(--accent-tint);
  color:var(--accent-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.acct-wrap .dropzone{ margin-bottom:4px; }
.acct-original-file-area{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding:12px;
}
.acct-original-file-area>.step-label{width:100%;margin:0}
.acct-original-preview{width:132px;min-height:70px}
.acct-original-preview .acct-preview{max-height:120px;object-fit:contain}
.acct-original-preview a{display:inline-flex;align-items:center;min-height:36px}
.acct-original-download{display:inline-flex;align-items:center;gap:7px}
.acct-original-download svg{width:16px;height:16px}
.acct-accounting-wrap .acct-accounting-workspace{ display:grid; grid-template-columns:minmax(0, 1fr) 132px; gap:14px; align-items:start; }
.acct-accounting-wrap .acct-file-list{ margin-top:0; }
.acct-accounting-wrap .acct-col-original{ min-width:0; padding:12px; }
.acct-accounting-wrap .acct-col-original .step-label{ margin-bottom:10px; }
.acct-accounting-wrap .acct-preview{ max-height:96px; object-fit:contain; }
.acct-accounting-wrap .acct-recognize-btn{ margin:20px 0; }
.acct-accounting-wrap > .acct-col-fields{ width:100%; box-sizing:border-box; }

/* --- панель "Перевод" (public/js/translationDocs/panel.js, 16 сен 2026) --- */
.acct-export-toolbar{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
#translationDocsPanel .acct-columns{ align-items:start; }
#translationDocsPanel .acct-col-fields{ min-width:0; overflow:hidden; }
#translationDocsPanel .acct-header-table{ table-layout:fixed; }
#translationDocsPanel .acct-header-table th,
#translationDocsPanel .acct-header-table td{ overflow-wrap:anywhere; word-break:break-word; }
#translationDocsPanel .acct-header-table th:first-child,
#translationDocsPanel .acct-header-table td:first-child{ width:28%; }
#translationDocsPanel .acct-header-table th:nth-child(2),
#translationDocsPanel .acct-header-table td:nth-child(2),
#translationDocsPanel .acct-header-table th:nth-child(3),
#translationDocsPanel .acct-header-table td:nth-child(3){ width:28%; }
#translationDocsPanel .acct-header-table th:last-child,
#translationDocsPanel .acct-header-table td:last-child{ width:16%; }
.translation-status-badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:3px 8px;border-radius:999px;color:#fff;font-size:11px;
  line-height:1.2;white-space:nowrap;
}

.translation-compare-modal{
  position:fixed;inset:0;z-index:1000;background:rgba(20,20,19,.48);
  display:flex;align-items:center;justify-content:center;padding:20px;
}
.translation-compare-dialog{
  width:min(1180px,100%);max-height:calc(100vh - 40px);overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:20px;box-shadow:0 16px 50px rgba(0,0,0,.22);
}
.translation-compare-header,.translation-compare-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  flex-wrap:wrap;margin-bottom:14px;
}
.translation-compare-header{
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.translation-compare-toolbar-bottom{
  position:sticky;bottom:-20px;z-index:2;
  margin:18px -20px -20px;padding:14px 20px;
  background:var(--surface);border-top:1px solid var(--line);
}
.translation-compare-toolbar-bottom .btn-primary{min-width:190px;}
.translation-compare-save-status{
  flex:1 1 220px;text-align:right;color:#177245;font-size:.88rem;
}
.translation-compare-save-status.is-error{color:#a33b2b;}
.translation-compare-header h3{margin:0;font-size:1.05rem}
.translation-compare-table{table-layout:fixed}
.translation-compare-table th:first-child,.translation-compare-table td:first-child{width:23%}
.translation-compare-table th:nth-child(2),.translation-compare-table td:nth-child(2),
.translation-compare-table th:nth-child(3),.translation-compare-table td:nth-child(3){width:30%}
.translation-compare-table th:last-child,.translation-compare-table td:last-child{width:17%}
.translation-compare-table textarea,.translation-compare-table input,.translation-compare-table select{
  width:100%;min-height:72px;resize:vertical;margin-bottom:8px;
}
.translation-compare-table input,.translation-compare-table select{min-height:40px}
.translation-compare-table textarea{display:block}
.translation-compare-table .compare-type-cell{vertical-align:top}
.translation-compare-table .compare-delete{min-height:34px;padding:6px 10px}
.translation-compare-table input[type="checkbox"]{
  width:20px;min-height:20px;height:20px;margin:0;flex:none;resize:none;
}
.translation-compare-table .compare-type-cell label{
  display:flex;align-items:center;gap:8px;min-height:44px;
}

/* --- admin-* утилиты (только используемые здесь, скопированы из admin.css) --- */
.admin-note{ font-size:0.8rem; color:var(--ink-soft); margin-top:6px; line-height:1.45; }
.admin-section-title{ font-family:'Space Grotesk', sans-serif; font-size:1rem; font-weight:600; margin:28px 0 14px; padding-top:18px; border-top:1px solid var(--line); }
.admin-section-title:first-of-type{ border-top:none; padding-top:0; margin-top:22px; }
.admin-error{ color:var(--danger); font-size:0.85rem; margin-top:10px; }
.admin-table{ width:100%; border-collapse:collapse; font-size:0.88rem; }
.admin-table th{ text-align:left; font-weight:500; color:var(--ink-soft); font-size:0.78rem; text-transform:none; padding:0 10px 8px; border-bottom:1.5px solid var(--line); }
.admin-table td{ padding:12px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
.admin-table tr:last-child td{ border-bottom:none; }

/* --- acct-* (копия public/admin/accounting.css) --- */
.acct-wrap{ overflow-x:hidden; }
.acct-columns{ display:flex; gap:20px; align-items:flex-start; }
.acct-col-original{ flex:0 0 38%; position:sticky; top:20px; }
.acct-col-fields{ flex:1; min-width:0; }
.acct-preview{ width:100%; border-radius:6px; border:1px solid var(--line); display:block; }
.acct-file-input{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.acct-file-label{ display:inline-block; cursor:pointer; }
.acct-file-label:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.acct-file-list{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.acct-file-item{
  display:flex; flex-direction:column; gap:4px;
  padding:8px 12px; border:1px solid var(--line); border-radius:6px;
  cursor:pointer; font-size:0.85rem; background:var(--surface);
}
.acct-file-item.acct-file-active{ border-color:var(--accent); }
.acct-file-main{ display:flex; align-items:center; justify-content:space-between; gap:10px; min-width:0; }
.acct-file-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0; }
.acct-file-status{ flex-shrink:0; font-size:0.75rem; font-weight:600; padding:2px 8px; border-radius:20px; }
.acct-file-meta{ display:flex; align-items:center; gap:8px; flex-shrink:0; }
.acct-file-remove{
  flex-shrink:0; width:22px; height:22px; line-height:1; border:none; border-radius:50%;
  background:transparent; color:var(--ink-soft); font-size:1.05rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
}
.acct-file-remove:hover{ background:var(--danger-tint); color:var(--danger); }
.acct-file-remove:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.acct-file-error{ color:var(--danger); font-size:0.78rem; line-height:1.35; overflow-wrap:anywhere; }
.acct-file-status-pending{ color:var(--ink-soft); background:var(--line); }
.acct-file-status-recognizing{ color:var(--accent); background:var(--line); }
.acct-file-status-done{ color:var(--acct-ok); background:var(--acct-ok-tint); }
.acct-file-status-error{ color:var(--danger); background:var(--danger-tint); }
.acct-status-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.acct-badge{ font-size:0.78rem; font-weight:600; padding:4px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:0.02em; }
.acct-badge-PASS{ color:var(--acct-ok); background:var(--acct-ok-tint); }
.acct-badge-FAILED{ color:var(--danger); background:var(--danger-tint); }
.acct-badge-WARNING{ color:var(--warn); background:var(--warn-tint); }
.acct-badge-INSUFFICIENT_DATA{ color:var(--ink-soft); background:var(--line); }
.acct-badge-NOT_APPLICABLE{ color:var(--ink-soft); background:var(--line); }
.acct-header-table td{ font-size:0.9rem; }
.acct-header-table td.acct-field-name{ color:var(--ink-soft); white-space:nowrap; padding-right:16px; }
.acct-header-table td.acct-low-confidence{ color:var(--warn); }
.acct-rules-list{ display:flex; flex-direction:column; gap:6px; }
.acct-rule{ font-size:0.85rem; border-radius:6px; padding:8px 12px; line-height:1.4; display:flex; flex-direction:column; gap:2px;
  overflow-wrap:anywhere; word-break:break-word; }
.acct-rule-FAILED{ color:var(--danger); background:var(--danger-tint); }
.acct-rule-WARNING{ color:var(--warn); background:var(--warn-tint); }
.acct-rule-PASS{ color:var(--acct-ok); background:var(--acct-ok-tint); }
.acct-rule-INSUFFICIENT_DATA{ color:var(--ink-soft); background:var(--surface); border:1px solid var(--line); }
.acct-rule-id{ font-weight:600; }
.acct-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.acct-table-scroll table{ min-width:650px; }
.acct-table-scroll th,
.acct-table-scroll td{ white-space:nowrap; }
.acct-table-scroll th:first-child,
.acct-table-scroll td:first-child{ min-width:190px; white-space:normal; }
/* Таблица "Члены семьи" (public/js/translationDocs/panel.js:renderFamilyMembers)
   переиспользует .acct-table-scroll, но её первая колонка — номер по
   порядку ("№"), а не длинное наименование, как у строк накладной/УПД —
   190px под одну цифру выглядел бы пустой полосой. Выше по specificity
   (два класса) — побеждает правило .acct-table-scroll вне зависимости от
   порядка в файле. */
.acct-table-scroll.family-members-scroll th:first-child,
.acct-table-scroll.family-members-scroll td:first-child{ min-width:32px; white-space:nowrap; }

@media (max-width: 760px){
  .acct-accounting-wrap .acct-accounting-workspace{ grid-template-columns:1fr; }
  .acct-accounting-wrap .acct-col-original{ width:fit-content; }
  .acct-columns{ flex-direction:column; }
  .acct-col-original{ position:static; flex:none; width:100%; }
  .acct-table-scroll{ margin-right:-4px; padding-bottom:6px; }
  .translation-compare-modal{padding:8px}
  .translation-compare-dialog{padding:12px}
  .translation-compare-table th,.translation-compare-table td{padding:8px 6px}
  .acct-table-scroll table{ min-width:650px; }
  .acct-table-scroll th,
  .acct-table-scroll td{ padding-left:10px; padding-right:10px; }
  .acct-table-scroll th:first-child,
  .acct-table-scroll td:first-child{ min-width:180px; }
}

/* Translation keeps full-width, labelled values on phones instead of four
   squeezed columns. Scoped here so accounting tables and exports stay intact. */
@media (max-width: 760px){
  #translationDocsPanel{padding:14px;}
  #translationDocsPanel .acct-columns,
  #translationDocsPanel .acct-col-fields{width:100%;min-width:0;box-sizing:border-box;}
  #translationDocsPanel .acct-col-fields{padding:12px;overflow:visible;}
  #translationDocsPanel .translation-field{min-width:0;}
  #translationDocsPanel button,
  #translationDocsPanel select{min-height:44px;max-width:100%;white-space:normal;}
  #translationDocsPanel .translation-field select{width:100%;font-size:16px;}
  #translationDocsPanel .acct-export-toolbar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  #translationDocsPanel .acct-export-toolbar button{width:100%;padding:10px 8px;line-height:1.35;}
  #translationDocsPanel .acct-export-toolbar button:nth-child(n+3){grid-column:1 / -1;}
  #translationDocsPanel .acct-header-table thead,
  #translationDocsPanel .translation-compare-table thead{display:none;}
  #translationDocsPanel .acct-header-table,
  #translationDocsPanel .acct-header-table tbody,
  #translationDocsPanel .translation-compare-table,
  #translationDocsPanel .translation-compare-table tbody{display:block;width:100%;min-width:0;}
  #translationDocsPanel .acct-header-table tr{
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 8px;
    border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;
    background:var(--surface);box-sizing:border-box;
  }
  #translationDocsPanel .acct-header-table td:nth-child(n){
    display:block;width:auto;min-width:0;padding:0;border:0;font-size:16px;
    line-height:1.5;word-break:normal;overflow-wrap:anywhere;white-space:pre-wrap;
  }
  #translationDocsPanel .acct-header-table td:first-child{grid-column:1;grid-row:1;font-weight:600;}
  #translationDocsPanel .acct-header-table td:nth-child(2),
  #translationDocsPanel .acct-header-table td:nth-child(3){grid-column:1 / -1;}
  #translationDocsPanel .acct-header-table td:last-child{grid-column:2;grid-row:1;align-self:start;max-width:130px;}
  #translationDocsPanel .acct-header-table td:nth-child(2)::before,
  #translationDocsPanel .acct-header-table td:nth-child(3)::before,
  #translationDocsPanel .translation-compare-table td::before{
    content:attr(data-label);display:block;color:var(--ink-soft);font-size:12px;
    font-weight:500;line-height:1.4;margin-bottom:4px;
  }
  #translationDocsPanel .translation-status-badge{white-space:normal;text-align:center;max-width:100%;box-sizing:border-box;font-size:11px;padding:5px 8px;}
  #translationDocsPanel .translation-compare-modal{padding:8px;box-sizing:border-box;}
  #translationDocsPanel .translation-compare-dialog{
    width:100%;min-width:0;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);
    padding:12px;box-sizing:border-box;overscroll-behavior:contain;
  }
  #translationDocsPanel .translation-compare-header{
    position:sticky;top:-12px;z-index:1;background:var(--surface);padding:10px 0;
  }
  #translationDocsPanel .translation-compare-header h3{flex:1;min-width:0;overflow-wrap:anywhere;}
  #translationDocsPanel .translation-compare-toolbar{display:grid;grid-template-columns:1fr;}
  #translationDocsPanel .translation-compare-toolbar-bottom .translation-compare-save-status{text-align:left;}
  #translationDocsPanel .translation-compare-table tr{
    display:block;border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:12px;
  }
  #translationDocsPanel .translation-compare-table td{
    display:block;width:100%;padding:0;margin-bottom:12px;border:0;box-sizing:border-box;
  }
  #translationDocsPanel .translation-compare-table td:last-child{margin-bottom:0;}
  #translationDocsPanel .translation-compare-table textarea,
  #translationDocsPanel .translation-compare-table input:not([type="checkbox"]),
  #translationDocsPanel .translation-compare-table select{
    width:100%;min-width:0;box-sizing:border-box;font:inherit;font-size:16px;padding:10px;
  }
  #translationDocsPanel .translation-compare-table textarea{min-height:96px;line-height:1.5;}
}