/* «История площадок v2» — стили модуля (ТЗ docs/ТЗ_ИСТОРИЯ_ПЛОЩАДОК_V2.md).
   Модал деталей временно живёт на классах старого history.css (modal/od-*),
   его правила переедут сюда на этапе сноса. */

/* Первое правило страницы: hidden обязан побеждать любой display —
   грид-ловушка из памятки проекта, дважды ловленная. */
.phistory-page [hidden] { display: none !important; }

.phistory-page {
  position: relative; /* якорь для пилюли «новых: N» */
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  --ph-border: color-mix(in srgb, var(--text) 10%, transparent);
  --ph-mut: color-mix(in srgb, var(--text) 55%, transparent);
  --ph-panel: color-mix(in srgb, var(--text) 3%, transparent);
  /* Свой зелёный: --primary (#2bd576) — другой оттенок, подменять нельзя. */
  --ph-acc: #22c55e;
}

/* ---------- шапка (липкая, неподвижная) ---------- */
.phistory-page .ph-header,
.phistory-page .ph-panelHost,
.phistory-page .ph-tableHost,
.phistory-page .ph-empty,
.phistory-page .ph-error {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.phistory-page .ph-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  background: var(--page-bg);
  border-bottom: 1px solid var(--ph-border);
}
.phistory-page .ph-header__row { display: flex; align-items: center; gap: 10px; }
.phistory-page .ph-title { display: flex; align-items: center; gap: 10px; }
.phistory-page .ph-title h1 { font-size: 18px; margin: 0; }

/* Индикатор синка: фиксированная ширина, состояние — цветом (закон №2). */
.phistory-page .ph-ind {
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  background: var(--ph-mut);
}
.phistory-page .ph-ind[data-state="busy"] { background: var(--ph-acc); animation: phPulse 1.2s ease-in-out infinite; }
.phistory-page .ph-ind[data-state="error"] { background: #e5484d; }
@keyframes phPulse { 50% { opacity: 0.45; } }

/* Счётчик: фиксированная зона + табличные цифры — шапка не шевелится. */
.phistory-page .ph-counter {
  margin-left: auto;
  min-width: 200px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--ph-mut);
  font-size: 12.5px;
}

.phistory-page .ph-search {
  position: relative;
  flex: 1 1 320px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--ph-border);
  border-radius: 10px;
  background: var(--ph-panel);
}
.phistory-page .ph-search__ico { color: var(--ph-mut); }
.phistory-page .ph-search__input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); outline: none; font-size: 13px; }
.phistory-page .ph-search__kind {
  font-size: 11px;
  color: var(--ph-acc);
  border: 1px solid color-mix(in srgb, var(--ph-acc) 40%, transparent);
  border-radius: 12px;
  padding: 1px 8px;
  white-space: nowrap;
}
.phistory-page .ph-search__clear { border: 0; background: transparent; color: var(--ph-mut); cursor: pointer; font-size: 13px; }

.phistory-page .ph-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--ph-border);
  background: var(--ph-panel);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
/* Цвет ТЕКСТА на зелёной заливке — литерал, а не --page-bg: в светлой теме
   он дал бы молочные буквы на зелёном. */
.phistory-page .ph-btn--primary { background: var(--ph-acc); border-color: var(--ph-acc); color: #0b0f0d; font-weight: 600; }
.phistory-page .ph-btn__count {
  font-size: 10.5px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--ph-acc) 25%, transparent);
}
.phistory-page .ph-btn--appeal.is-active {
  color: var(--text);
  border-color: color-mix(in srgb, var(--ph-acc) 45%, transparent);
  background: color-mix(in srgb, var(--ph-acc) 14%, transparent);
}

/* ---------- чипы применённых фильтров ---------- */
.phistory-page .ph-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.phistory-page .ph-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 10px;
  border: 1px solid var(--ph-border);
  border-radius: 14px;
  font-size: 12px;
  color: var(--ph-mut);
  background: var(--ph-panel);
}
.phistory-page .ph-chip__x,
.phistory-page .ph-chip--clear { border: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; }
.phistory-page .ph-chip--clear:hover { color: var(--text); }

/* ---------- панель фильтров (десктоп: раскрыта по умолчанию) ---------- */
.phistory-page .ph-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  padding: 14px;
  margin: 10px 14px 0;
  border: 1px solid var(--ph-border);
  border-radius: 13px;
  background: var(--ph-panel);
}
/* Раскрытие/сворачивание панели по кнопке «Фильтры» — плавно, грид-приёмом
   1fr→0fr: высота анимируется без замеров в JS, display не трогается
   (display:none мгновенен и не анимируется в принципе). */
.phistory-page .ph-panelHost {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.28s ease, opacity 0.2s ease;
}
.phistory-page .ph-panelHost > .ph-panel {
  overflow: hidden;
  min-height: 0;
}
.phistory-page .ph-panelHost.is-collapsed {
  grid-template-rows: 0fr;
  opacity: 0;
}
.phistory-page .ph-field { display: grid; gap: 5px; font-size: 12px; color: var(--ph-mut); }
.phistory-page .ph-field__row { display: flex; gap: 6px; }
.phistory-page .ph-field--reset { align-self: end; }
.phistory-page .ph-inp,
.phistory-page .ph-sel {
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--ph-border);
  border-radius: 9px;
  background: var(--page-bg);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  min-width: 0;
  width: 100%;
}
.phistory-page .ph-sheetFoot { display: none; }

/* ---------- пилюля «новых: N» ----------
   Поверх ленты absolute'ом: sticky здесь мёртв (прокручивается только
   .ph-scroller, а не предки пилюли), а участие в потоке двигало ленту
   при каждом показе/скрытии. */
.phistory-page .ph-pill {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  height: 30px;
  padding: 0 14px;
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--ph-acc) 45%, transparent);
  background: color-mix(in srgb, var(--ph-acc) 16%, var(--page-bg));
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
}

/* ---------- лента ---------- */
.phistory-page .ph-tableHost { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 10px 14px 14px; }
.phistory-page .ph-head,
.phistory-page .ph-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 130px minmax(120px, 0.9fr) 110px minmax(160px, 1.2fr) 120px 84px;
  gap: 10px;
  align-items: center;
  padding: 0 10px;
}
.phistory-page .ph-head {
  height: 30px;
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ph-mut);
  border-bottom: 1px solid var(--ph-border);
}
.phistory-page .ph-scroller { flex: 1; min-height: 0; overflow-y: auto; position: relative; }

/* Скроллбар под наш дизайн — тонкий, из токенов темы (образец — .by-col). */
.phistory-page .ph-scroller,
.phistory-page .ph-panelHost--sheet {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--text) 18%, transparent) transparent;
}
.phistory-page .ph-scroller::-webkit-scrollbar,
.phistory-page .ph-panelHost--sheet::-webkit-scrollbar { width: 8px; }
.phistory-page .ph-scroller::-webkit-scrollbar-track,
.phistory-page .ph-panelHost--sheet::-webkit-scrollbar-track { background: transparent; }
.phistory-page .ph-scroller::-webkit-scrollbar-thumb,
.phistory-page .ph-panelHost--sheet::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--text) 14%, transparent);
  border-radius: 4px;
}
.phistory-page .ph-scroller::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ph-acc) 45%, transparent);
}

/* «Наверх»: поверх ленты, появляется прозрачностью — раскладку не трогает. */
.phistory-page .ph-tableHost { position: relative; }
.phistory-page .ph-toTop {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 6;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--ph-border);
  background: color-mix(in srgb, var(--text) 6%, var(--page-bg));
  color: var(--ph-mut);
  font-size: 17px;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.phistory-page .ph-toTop.is-shown { opacity: 1; visibility: visible; }
.phistory-page .ph-toTop:hover { color: var(--text); border-color: color-mix(in srgb, var(--ph-acc) 45%, transparent); }
.phistory-page .ph-row {
  box-sizing: border-box;
  cursor: pointer;
  overflow: hidden;
}
.phistory-page .ph-row:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }

/* Каждая вторая строка чуть отличается фоном — глазу проще держать строку. */
.phistory-page .ph-row--alt { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.phistory-page .ph-row--alt:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }

/* Маркер статуса слева — как в старой версии: не на всю высоту, со
   скруглением наружу (::before, отступы сверху/снизу). Цвета — палитра
   старой страницы, взгляд группирует строки до чтения. */
.phistory-page .ph-row { position: relative; }
.phistory-page .ph-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}
.phistory-page .ph-row--st-completed::before { background: color-mix(in srgb, #22c55e 70%, transparent); }
.phistory-page .ph-row--st-cancelled::before { background: color-mix(in srgb, #ef4444 60%, transparent); }
.phistory-page .ph-row--st-active::before { background: color-mix(in srgb, #eab308 75%, transparent); }
.phistory-page .ph-row--st-appeal_completed::before { background: color-mix(in srgb, #a855f7 75%, transparent); }
.phistory-page .ph-row--arrived { animation: phArrive 1.8s ease-out; }
@keyframes phArrive { 0% { background: color-mix(in srgb, var(--ph-acc) 22%, transparent); } 100% { background: transparent; } }

.phistory-page .ph-c { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.phistory-page .ph-oid,
.phistory-page .ph-rub,
.phistory-page .ph-fio { font-weight: 600; }
.phistory-page .ph-sub { font-size: 11px; color: var(--ph-mut); overflow: hidden; text-overflow: ellipsis; }
.phistory-page .ph-oid { border: 0; background: transparent; color: var(--text); font-size: 13px; padding: 0; cursor: copy; }
.phistory-page .ph-oid.is-copied { color: var(--ph-acc); }

/* Наведение на копируемые номера (площадки и бб): подчёркивание, акцент и
   значок копирования — сразу видно, что сюда можно нажать. */
.phistory-page .ph-oid,
.phistory-page .ph-sub--copy {
  transition: color 0.15s ease;
}
.phistory-page .ph-oid::after,
.phistory-page .ph-sub--copy::after {
  content: "⧉";
  margin-left: 5px;
  font-size: 0.85em;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.phistory-page .ph-oid:hover,
.phistory-page .ph-sub--copy:hover {
  color: var(--ph-acc);
}
.phistory-page .ph-oid:hover::after,
.phistory-page .ph-sub--copy:hover::after { opacity: 1; }
.phistory-page .ph-sub--copy {
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: copy;
}
.phistory-page .ph-sub--copy.is-copied { color: var(--ph-acc); }
/* Флаг апелляции — фиолетовый, как спор в старой версии; вариационный
   селектор в разметке заставляет глиф быть текстом, а не эмодзи. */
.phistory-page .ph-flag { margin-left: 6px; color: #a855f7; }
/* Значок банка в ленте. 16px вместо прежних 14: под плашкой и отступом самой
   картинке остаётся 12px, при 14 логотип превращался в точку. Плашку носят не
   все — только те, кто без неё пропадает (Уралсиб, ЦУПИС и прочие тёмные на
   прозрачном фоне); список в js/ui/bankIcons.js. */
.phistory-page .ph-bankIco {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  border-radius: 4px;
  object-fit: contain;
}
/* Плашка — точечно (список в js/ui/bankIcons.js) и всегда у монограммы. */
.phistory-page .ph-bankIco--plate,
.phistory-page .ph-bankIco--mono {
  background: var(--bank-plate);
  border: 1px solid var(--bank-plate-edge);
  padding: 1px;
}
.phistory-page .ph-bankIco--mono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 800 9px/1 var(--font-ui);
  color: var(--bank-c, var(--bank-ink));
  text-transform: uppercase;
  user-select: none;
  padding: 0;
}
/* Глиф маской — БЕЗ плашки: маска отрезала бы её вместе с фоном. */
.phistory-page .ph-bankIco--glyph {
  display: inline-block;
  background: var(--ph-mut);
  border: 0;
  padding: 0;
  -webkit-mask: url("../../img/bank/logo-bank.svg") center / 100% no-repeat;
  mask: url("../../img/bank/logo-bank.svg") center / 100% no-repeat;
}
.phistory-page .ph-act {
  width: 30px;
  height: 30px;
  border: 1px solid var(--ph-border);
  border-radius: 8px;
  background: transparent;
  color: var(--ph-mut);
  cursor: pointer;
}
.phistory-page .ph-act:hover { color: var(--text); border-color: color-mix(in srgb, var(--ph-acc) 40%, transparent); }

.phistory-page .ph-empty { padding: 30px; text-align: center; color: var(--ph-mut); }
.phistory-page .ph-error { padding: 20px; display: flex; gap: 12px; align-items: center; justify-content: center; color: var(--ph-mut); }

.phistory-page .ph-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  padding: 10px 16px;
  border-radius: 10px;
  border: 1px solid var(--ph-border);
  background: var(--page-bg);
  color: var(--text);
  font-size: 13px;
  z-index: 50;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

/* Уважение к «меньше движения»: подсветки и пульс гаснут. */
@media (prefers-reduced-motion: reduce) {
  .phistory-page .ph-row--arrived,
  .phistory-page .ph-ind[data-state="busy"] { animation: none; }
  .phistory-page .ph-panelHost { transition: none; }
}

/* ---------- мобильная раскладка (один брейкпоинт, ТЗ раздел 9) ---------- */
@media (max-width: 720px) {
  .phistory-page .ph-header { padding: 10px; gap: 8px; }
  .phistory-page .ph-header__row--controls { flex-wrap: wrap; }
  .phistory-page .ph-counter { min-width: 132px; font-size: 11.5px; }
  .phistory-page .ph-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .phistory-page .ph-btn { min-height: 44px; }

  /* Панель → нижняя шторка на весь экран; закрыта, пока не открыли кнопкой. */
  .phistory-page .ph-panelHost--sheet {
    display: block; /* шторка анимируется transform'ом, грид-приём — десктопу */
    grid-template-rows: none;
    opacity: 1;
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    max-height: 92dvh;
    overflow-y: auto;
    background: var(--page-bg);
    border-top: 1px solid var(--ph-border);
    border-radius: 16px 16px 0 0;
    transform: translateY(105%);
    transition: transform 0.25s ease;
  }
  .phistory-page .ph-panelHost--sheet.is-open { transform: translateY(0); }
  .phistory-page .ph-panelHost--sheet .ph-panel { display: grid; grid-template-columns: 1fr 1fr; margin: 10px; }
  .phistory-page .ph-panelHost--sheet .ph-sheetFoot {
    display: block;
    position: sticky;
    bottom: 0;
    padding: 10px;
    background: var(--page-bg);
    border-top: 1px solid var(--ph-border);
  }
  .phistory-page .ph-panelHost--sheet .ph-sheetFoot .ph-btn { width: 100%; min-height: 48px; justify-content: center; }
  .phistory-page .ph-inp,
  .phistory-page .ph-sel { min-height: 44px; }

  /* Строка → карточка (высота ROW_H_MOBILE в table.js). Ряды сетки заданы
     ЯВНО и в сумме равны высоте строки ленты — авторяды при фиксированной
     высоте сжимались, и текст наезжал друг на друга (найдено прогоном
     19.08.2026). Подстрока «бб …» спрятана: номер Bybit есть в деталях. */
  .phistory-page .ph-head { display: none; }
  .phistory-page .ph-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: 24px 22px 34px 24px;
    grid-template-areas:
      "order status"
      "amount amount"
      "cp cp"
      "dates acts";
    gap: 4px 10px;
    padding: 10px;
    align-items: start;
  }
  .phistory-page .ph-c--order { grid-area: order; }
  .phistory-page .ph-c--order .ph-sub { display: none; }
  .phistory-page .ph-c--amount { display: flex; gap: 10px; align-items: baseline; }
  .phistory-page .ph-c--acts { align-self: end; }
  .phistory-page .ph-c--status { grid-area: status; justify-self: end; }
  .phistory-page .ph-c--amount { grid-area: amount; }
  .phistory-page .ph-c--cp { grid-area: cp; }
  .phistory-page .ph-c--dates { grid-area: dates; display: flex; gap: 8px; align-items: baseline; }
  .phistory-page .ph-c--account { display: none; }
  .phistory-page .ph-c--acts { grid-area: acts; justify-self: end; display: flex; gap: 8px; }
  .phistory-page .ph-act { width: 44px; height: 44px; }
  .phistory-page .ph-toTop { width: 48px; height: 48px; right: 12px; bottom: 12px; }
}


/* ==================================================================
   Перенесено из history.css при сносе старой страницы (этап 8 ТЗ,
   19.08.2026): модал деталей, заметки, вложения, иконки действий.
   Классы намеренно прежние — к ним привыкли операторы, разметку
   рисует details-render.js.
   ================================================================== */

.hint{ font-size: 12px; opacity:.75; }

.hint.ok{ color: rgba(34,197,94,.95); opacity:1; }

.hint.bad{ color: rgba(239,68,68,.95); opacity:1; }

.icon--details{
  -webkit-mask: url("../../img/book-text.svg") center/contain no-repeat;
  mask: url("../../img/book-text.svg") center/contain no-repeat;
}

.icon--clip{
  -webkit-mask: url("../../img/paperclip.svg") center/contain no-repeat;
  mask: url("../../img/paperclip.svg") center/contain no-repeat;
}

/* Модал деталей ордера. Имена классов намеренно прежние — к ним привыкли
   операторы (перенос со старой страницы, этап 8 ТЗ 19.08.2026). А вот три слоя
   `!important` поверх друг друга ушли 28.08.2026: здесь сразу итоговые
   значения, и правило читается там же, где написано. */
.modal{
  position: fixed;
  inset: 0;
  display:none;
  z-index: 999999;
}

.modal.open{ display:block; }

.modal-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  z-index: 999998;
}

.modal-card{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(860px, calc(100vw - 24px));
  /* flex-layout fixes cases when long content had no scroll */
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 820px);
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid var(--border);
  background: var(--page-bg-2);
  box-shadow: var(--shadow);
  z-index: 999999;
}

.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}

.modal-title .m1{ font-weight: 800; font-size: 14px; color: var(--text); }

.modal-title .m2{ font-size: 12px; margin-top:2px; color: var(--muted); }

.icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  cursor:pointer;
}

.icon-btn:hover{ background: rgba(255,255,255,.04); }

.modal-body{
  padding: 12px;
  flex: 1 1 auto;
  overflow: auto;
  max-height: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* hide scrollbar, but keep scroll (as requested) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* old Edge */
}

.modal-body::-webkit-scrollbar{
  width: 0;
  height: 0;
}

.file-item{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  margin-bottom: 8px;
}

.file-item a{ color: inherit; opacity:.9; }

/* ===== вложения спора: список слева, просмотр справа =====
   Файл показывается ВНУТРИ окна, а не ссылкой наружу: маршрут вложений требует
   заголовок Authorization, которого <a href> не носит, — до 24.08.2026 каждая
   ссылка отдавала 401, и вложения по апелляции не открывались вовсе.

   Высота строки задана явно: у грида она по умолчанию по содержимому, и
   длинный скан вытянул бы окно на несколько экранов. */
.ph-docs{
  display:grid;
  grid-template-columns: minmax(160px, 240px) minmax(0, 1fr);
  grid-template-rows: min(62vh, 560px);
  gap: 12px;
}
/* Обеим колонкам min-height: 0 — без него ребёнок грида не может быть ниже
   своего содержимого, и внутренняя прокрутка не включается вовсе. */
.ph-docs > *{ min-height: 0; }
.ph-docs__list{ overflow:auto; overscroll-behavior: contain; }
.ph-docs__list .file-item{
  width:100%;
  text-align:left;
  cursor:pointer;
  color: inherit;
  font: inherit;
}
.ph-docs__list .file-item.is-current{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.06);
}
.ph-docs__name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.ph-docs__view{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:12px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.ph-docs__view img{ max-width:100%; max-height:100%; object-fit:contain; }
.ph-docs__view iframe{ width:100%; height:100%; border:none; background:#fff; }
.ph-docs__act{ padding: 8px; }
.ph-docs__open{ color: inherit; opacity:.9; }

/* Третья колонка — разбор чека (`ui/detecto/docCheckPanel`), та же панель, что
   в «Приёме v2», в просмотрщике вложений Bybit и в окне под лупой.

   Появляется ТОЛЬКО у PDF: картинку источник не читает, а отнимать под пустую
   колонку треть окна незачем. Вместе с ней расширяется и само окно — 860px на
   три колонки мало, а держать окно широким всегда значит сжимать просмотр у
   спора с одними скриншотами. */
.ph-docs--split{
  grid-template-columns: minmax(150px, 210px) minmax(0, 1fr) minmax(300px, 400px);
}
.ph-docs__side{
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: 12px;
}
.ph-modal--wide .modal-card{ width: min(1560px, calc(100vw - 24px)); }

@media (max-width: 860px){
  /* Список сверху, просмотр под ним: две колонки на телефоне нечитаемы. */
  .ph-docs{ grid-template-columns: 1fr; grid-template-rows: auto min(50vh, 420px); }
  .ph-docs__list{ max-height: 30vh; }
  /* На телефоне разбор идёт ПОД файлом и во всю ширину: PDF в iframe там почти
     бесполезен, а читают именно разбор. Высота своя — панель длинная, и с
     фиксированной строкой она не прокручивалась бы вовсе. */
  .ph-docs--split{ grid-template-columns: 1fr; grid-template-rows: auto min(40vh, 340px) auto; }
  .ph-docs__side{ max-height: min(60vh, 520px); }
  .ph-modal--wide .modal-card{ width: calc(100vw - 24px); }
}

/* ===== Bank icons =====
   Сами классы (.bank-ico-wrap / .bank-ico-img / .bank-mono / .bank-glyph)
   переехали в components.css: их делит с «Историей» ещё и «Приём», а держать
   общий значок в файле одной из страниц уже приводило к классу-призраку. */

.h-events-loading{opacity:.7;font-size:12px;padding:8px 0;}

/* ===== Order Details (Variant A) ===== */
    .od-wrap{
      display:flex;
      flex-direction:column;
      gap:14px;
    }

.od-block{
      border:1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.18);
      border-radius:14px;
      padding:14px 14px 12px;
    }

.od-h{
      font-weight:700;
      font-size:14px;
      margin-bottom:10px;
      color: rgba(255,255,255,0.92);
    }

.od-row{
      display:grid;
      grid-template-columns: 120px 1fr;
      gap:10px;
      align-items:center;
      padding:6px 0;
      border-bottom:1px solid rgba(255,255,255,0.06);
    }

.od-row:last-child{ border-bottom:none; }

.od-k{
      font-size:12px;
      color: rgba(255,255,255,0.55);
    }

.od-v{
      font-size:13px;
      color: rgba(255,255,255,0.9);
      min-width:0;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

.od-mono{ font-variant-numeric: tabular-nums; }

.od-muted{ color: rgba(255,255,255,0.65); }

.od-table{
      display:block;
    }

.od-th{
      display:grid;
      grid-template-columns: 170px 1fr 140px;
      gap:10px;
      padding:8px 10px;
      border-radius:12px;
      background: rgba(255,255,255,0.04);
      border:1px solid rgba(255,255,255,0.06);
      font-size:12px;
      color: rgba(255,255,255,0.65);
    }

.od-tr{
      display:grid;
      grid-template-columns: 170px 1fr 140px;
      gap:10px;
      padding:10px 10px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
      margin-top:8px;
    }

.od-td{
      font-size:13px;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

.od-loading{
      font-size:12px;
      color: rgba(255,255,255,0.6);
      padding:10px 2px;
    }

.od-empty{
      font-size:12px;
      color: rgba(255,255,255,0.6);
      padding:10px 2px;
    }

.od-notes-list{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

.od-note{
      border:1px solid rgba(255,255,255,0.06);
      background: rgba(255,255,255,0.02);
      border-radius:12px;
      padding:10px 12px;
    }

.od-note-meta{
      font-size:12px;
      color: rgba(255,255,255,0.6);
      margin-bottom:6px;
    }

.od-note-text{
      font-size:13px;
      color: rgba(255,255,255,0.9);
      white-space:pre-wrap;
      word-break:break-word;
    }

.od-note-form{
      margin-top:12px;
      display:grid;
      grid-template-columns: 1fr auto;
      gap:10px;
      align-items:start;
    }

.od-note-input{
      min-height:74px;
      resize:vertical;
    }

.od-note-btn{
      height:36px;
      padding:0 14px;
      border-radius:10px;
      white-space:nowrap;
    }

.od-note-hint{
      grid-column:1 / -1;
      font-size:12px;
      color: rgba(255,255,255,0.6);
      margin-top:-4px;
    }



    @media (min-width: 980px){

      .od-wrap{ gap:16px; }

      .od-block.od-info{
        display:grid;
        grid-template-columns: 1fr 1fr;
        column-gap:18px;
      }

      .od-block.od-info .od-h{ grid-column:1 / -1; }

      .od-block.od-info .od-row.od-wide{ grid-column: 1 / -1; }

      .od-block.od-info .od-row{ border-bottom:1px solid rgba(255,255,255,0.06); }

      .od-block.od-info .od-row:nth-last-child(1){ border-bottom:none; }
}

/* modal inner sections (information/history/notes blocks) */
.modal-body .section,
.modal-body .card,
.modal-body .box,
.modal-body .panel,
.modal-body .block{
  background: var(--card-bg) !important;
  border: 1px solid var(--border) !important;
}

/* key-value grid */
.modal-body .kv .k{ color: var(--muted) !important; opacity: 1 !important; }

.modal-body .kv .v{ color: var(--text) !important; }

/* notes textarea */
.modal-body textarea,
.modal-body input{
  color: var(--text) !important;
  background: var(--input-bg) !important;
  border: 1px solid var(--border) !important;
}

.modal-body textarea::placeholder,
.modal-body input::placeholder{
  color: var(--muted) !important;
}

/* buttons inside modal */
.modal-body button,
.modal-body .btn{
  color: var(--text);
}

.od-bank-name { margin-left: 8px; }

/* Icon buttons (paperclip / details) */
:root[data-theme="light"] .icon-btn{
  background: rgba(255,255,255,1) !important;
  border-color: rgba(17,24,39,.14) !important;
  color: rgba(17,24,39,.88) !important; /* makes masked SVG icon dark */
}

:root[data-theme="light"] .icon-btn:hover{
  background: rgba(17,24,39,.04) !important;
}

/* ===========================
   Light theme details content
   =========================== */

/* Light theme: order details blocks were authored for dark (white text) */
:root[data-theme="light"] .od-block{
  background: rgba(17,24,39,.03) !important;
  border-color: rgba(17,24,39,.10) !important;
}

:root[data-theme="light"] .od-h{
  color: rgba(17,24,39,.90) !important;
}

:root[data-theme="light"] .od-k,
:root[data-theme="light"] .od-muted,
:root[data-theme="light"] .od-loading,
:root[data-theme="light"] .od-empty,
:root[data-theme="light"] .od-note-meta,
:root[data-theme="light"] .od-note-hint{
  color: rgba(17,24,39,.60) !important;
}

:root[data-theme="light"] .od-v,
:root[data-theme="light"] .od-td,
:root[data-theme="light"] .od-note-text{
  color: rgba(17,24,39,.88) !important;
}

:root[data-theme="light"] .od-th{
  background: rgba(17,24,39,.04) !important;
  border-color: rgba(17,24,39,.10) !important;
  color: rgba(17,24,39,.60) !important;
}

:root[data-theme="light"] .od-tr,
:root[data-theme="light"] .od-note{
  background: rgba(255,255,255,.90) !important;
  border-color: rgba(17,24,39,.10) !important;
}