/* «Результаты бумаг» и исключения: общий блок кабинета и «Моей торговли».
   Токены берутся из app.css — блок одинаково выглядит на обеих страницах. */
.xv { display: grid; gap: 14px; }
.xv-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 20px; }
.xv-head h2 { margin: 0; font: 650 var(--fs-l) var(--sans); }
.xv-head p { margin: 4px 0 0; max-width: 720px; color: var(--muted); font-size: var(--fs-s); }
.xv-totals { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 14px; color: var(--muted); font: var(--fs-s) var(--mono); }
.xv-card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel); }
.xv-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.xv-toolbar label { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: var(--fs-s); white-space: nowrap; }
.xv-toolbar select { min-width: 130px; }
.xv-toolbar input[type="search"] { flex: 1 1 200px; min-width: 160px; }
.xv-toolbar button { flex: 0 0 auto; }
.xv-check { user-select: none; }
.xv-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.xv-group { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-deep); font-size: var(--fs-s); }
.xv-group b { font-weight: 600; white-space: nowrap; }
.xv-group small { color: var(--muted); font: 500 var(--fs-xs) var(--mono); white-space: nowrap; }
.xv-group.is-loss { border-color: var(--short-line); }
.xv-group.is-loss small { color: var(--short); }
.xv-group button { min-height: 24px; padding: 2px 10px; border-radius: 999px; font-size: var(--fs-xs); }
/* Таблица занимает ровно ширину карточки: раньше min-width: 1040px выносил
   колонки за правый край на узком десктопе (~944 CSS px). Текст переносится,
   неразрывными остаются только числа. */
.xv-table { width: 100%; min-width: 0; border-collapse: collapse; table-layout: auto; }
.xv-table th { padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); font: 650 var(--fs-micro) var(--mono); text-align: left; text-transform: uppercase; letter-spacing: var(--caps); vertical-align: bottom; white-space: normal; }
.xv-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; font-size: var(--fs-s); white-space: normal; overflow-wrap: break-word; }
.xv-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-xs); }
/* Числовые колонки: Сделок, +/−, PnL, ΣR, ср.R, Открыта — не рвём по строкам. */
.xv-table th:is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9)),
.xv-table td:is(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9)) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.xv-table tbody tr:last-child td { border-bottom: 0; }
.xv-table tr.is-loss td { background: var(--short-bg); }
.xv-table tr.is-excluded td { opacity: .7; }
.xv-up { color: var(--long); }
.xv-down { color: var(--short); }
.xv-exclude { min-height: 28px; padding: 3px 10px; font-size: var(--fs-xs); white-space: nowrap; }
.xv-empty, .xv-muted { color: var(--muted); text-align: center; font-size: var(--fs-s); }
.xv-hint { margin: 0; color: var(--muted); font-size: var(--fs-s); }
/* Старый вывод списка систем внутри ячейки «Бумага» (маленькая строка) —
   это именно small, чтобы не путать с контейнером фильтра ниже. */
small.xv-systems { color: var(--muted); }
/* Фильтр «Системы»: чипы-переключатели, снимаемые кликом (JS ставит
   aria-pressed=false и class is-off). Стиль — как у чипов групп: пилюля,
   фон bg-deep, только токены. is-loss — система в минусе, is-current — система
   текущего кабинета. */
.xv-system-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line); }
.xv-filter-title { flex: none; color: var(--muted); font: 700 var(--fs-micro) var(--mono); letter-spacing: var(--caps); text-transform: uppercase; }
.xv-system-row .xv-systems { display: flex; flex: 1 1 auto; flex-wrap: wrap; align-items: center; gap: var(--sp-2); min-width: 0; }
.xv-system { display: inline-flex; align-items: center; gap: var(--sp-2); max-width: 100%; min-height: 32px; padding: 4px 6px 4px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-deep); color: var(--text); font-size: var(--fs-s); text-align: left; }
.xv-system b { overflow: hidden; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.xv-system small { color: var(--muted); font: 500 var(--fs-xs) var(--mono); white-space: nowrap; }
.xv-system.is-loss { border-color: var(--short-line); }
.xv-system.is-loss small { color: var(--short); }
.xv-system.is-current { border-color: var(--accent-line); background: var(--accent-bg); }
.xv-system[aria-pressed="false"], .xv-system.is-off { border-style: dashed; border-color: var(--line); background: transparent; color: var(--muted); }
.xv-system[aria-pressed="false"] small, .xv-system.is-off small { color: var(--muted); }
.xv-system-x { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 999px; color: var(--muted); font-size: var(--fs-s); line-height: 1; }
.xv-system:hover .xv-system-x { background: var(--panel-2); color: var(--text); }
.xv-system:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.xv-systems-all { flex: none; min-height: 30px; padding: 3px 12px; border-radius: 999px; font-size: var(--fs-xs); }
.xv-badge { display: inline-block; padding: 2px 8px; border: 1px solid var(--warn-line); border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: var(--fs-xs); white-space: nowrap; }
.xv-badge.is-cabinet { border-color: var(--accent-line); background: var(--accent-bg); color: var(--accent-lite); }
.xv-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.xv-card-head h3 { margin: 0; font: 650 var(--fs-s) var(--sans); }
.xv-card-head p { margin: 2px 0 0; color: var(--muted); font-size: var(--fs-xs); }
.xv-rule { display: flex; align-items: center; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); }
.xv-rule:first-child { border-top: 0; }
.xv-rule-text { display: grid; gap: 2px; margin-right: auto; min-width: 0; }
.xv-rule-text b { font-weight: 600; }
.xv-rule-text small { color: var(--muted); font-size: var(--fs-xs); }
.xv-rule button { min-height: 30px; }
.xv-dialog { width: min(600px, calc(100% - 28px)); border: 1px solid var(--line); border-radius: var(--r-m); background: var(--panel); color: var(--text); }
.xv-dialog::backdrop { background: rgb(0 0 0 / .55); }
.xv-dialog form { display: grid; gap: 14px; padding: 18px; }
.xv-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.xv-dialog-head h2 { margin: 0; font: 650 var(--fs-l) var(--sans); }
.xv-dialog-head p { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-s); }
.xv-dialog-head button { border: 0; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; }
.xv-options { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.xv-options legend { padding: 0; color: var(--muted); font: 700 var(--fs-xs) var(--sans); letter-spacing: var(--caps); text-transform: uppercase; }
.xv-options label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--bg-deep); }
.xv-options label[hidden] { display: none; }
.xv-options label:has(input:checked) { border-color: var(--accent-line); background: var(--accent-bg); }
.xv-options label:has(input:disabled) { opacity: .5; }
.xv-options input { margin-top: 2px; }
.xv-options small { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-xs); }
.xv-reason { display: grid; gap: 6px; font-size: var(--fs-s); }
.xv-reason input { width: 100%; }
.xv-alert { margin: 0; padding: 10px 12px; border: 1px solid var(--short-line); border-radius: var(--r-m); background: var(--short-bg); color: var(--text); font-size: var(--fs-s); }
.xv-alert[hidden] { display: none; }
.xv-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }
/* Узкий десктоп и планшет (снимок с багом — 944 CSS px): убираем две
   низкоприоритетные колонки и поджимаем отступы, чтобы таблица влезала без
   горизонтальной прокрутки. На <=760px они вернутся подписями в карточках. */
@media (max-width: 1240px) {
  .xv-table th, .xv-table td { padding: var(--sp-2) var(--sp-3); }
  .xv-table :is(.xv-col-type, .xv-col-avg) { display: none; }
  .xv-table .xv-badge { white-space: normal; }
  .xv-exclude { padding: 3px 8px; }
}
@media (max-width: 1100px) {
  .xv-table .xv-col-group { display: none; }
}
@media (max-width: 900px) {
  /* На самом узком табличном экране (761–900px) поджимаем ещё: длинный тикер
     в первой колонке иначе добавлял таблице 10px и давал прокрутку. */
  .xv-table th, .xv-table td { padding: var(--sp-1) var(--sp-2); }
  .xv-table td:first-child { overflow-wrap: anywhere; }
  .xv-toolbar { display: grid; grid-template-columns: 1fr 1fr; }
  .xv-toolbar input[type="search"] { grid-column: 1 / -1; }
  .xv-toolbar > button { grid-column: 1 / -1; }
  .xv-totals { justify-content: flex-start; }
}
/* Телефон: строка таблицы — карточка с подписями из data-mobile-label, как в
   radar-mobile.css. Thead прячем визуально (clip), а не display:none — иначе
   пропадают заголовки для скринридеров. Скрытые на планшете колонки здесь
   снова видны: на карточке места хватает. */
@media (max-width: 760px) {
  .xv-table { display: block; width: 100%; min-width: 0; }
  .xv-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .xv-table > tbody { display: block; width: 100%; }
  .xv-table > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-1) var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); }
  .xv-table > tbody > tr > td { min-width: 0; width: auto; max-width: 100%; padding: 0; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .xv-table > tbody > tr > td > * { max-width: 100%; }
  .xv-table .xv-badge { max-width: 100%; overflow-wrap: anywhere; }
  .xv-table > tbody > tr > td[data-mobile-label]::before { content: attr(data-mobile-label); display: block; margin-bottom: 2px; color: var(--muted); font-size: var(--fs-micro); font-weight: 400; line-height: 1.4; }
  .xv-table > tbody > tr > td:first-child { grid-column: 1 / -1; font-size: var(--fs-m); }
  .xv-table > tbody > tr > td:first-child::before { display: none; }
  .xv-table > tbody > tr > td:last-child { grid-column: 1 / -1; }
  .xv-table > tbody > tr > td:last-child .xv-exclude { width: 100%; min-height: 44px; }
  .xv-table > tbody > tr > td:is(.xv-col-type, .xv-col-group, .xv-col-avg) { display: block; }
  /* Подсветка убыточной строки переносится с ячеек на карточку, иначе
     заливка рвётся на сетке промежутками. */
  .xv-table > tbody > tr.is-loss { background: var(--short-bg); }
  .xv-table > tbody > tr.is-loss > td { background: transparent; }
  /* Пустая/ошибочная строка остаётся одной строкой на всю ширину. */
  .xv-table > tbody > tr > td[colspan] { display: block; grid-column: 1 / -1; width: 100%; padding: var(--sp-4) var(--sp-5); }
  .xv-table > tbody > tr:has(> td[colspan]) { display: block; padding: 0; border-bottom: 0; }
  .xv-system-row { padding: var(--sp-2) var(--sp-3); }
  .xv-system-row .xv-systems { flex-basis: 100%; }
  .xv-systems-all { width: 100%; min-height: 40px; }
}
@media (max-width: 600px) {
  /* Один столбец: в две колонки чекбокс «Только убыточные» вылезал за край. */
  .xv-toolbar { grid-template-columns: minmax(0, 1fr); }
  .xv-groups { padding: 10px 12px; }
  /* Чип группы на телефоне — две строки: название с итогом, под ним кнопка
     во всю ширину. В одну строку он шире карточки и кнопка обрезалась
     `.xv-card { overflow: hidden }`. Итоговая строка (PnL) остаётся целой. */
  .xv-group { width: 100%; flex-wrap: wrap; justify-content: space-between; row-gap: var(--sp-1); }
  .xv-group b { white-space: normal; overflow-wrap: anywhere; }
  .xv-group small { white-space: nowrap; }
  .xv-group button { flex: 1 1 100%; }
  .xv-system { width: 100%; justify-content: space-between; }
  .xv-rule { flex-wrap: wrap; }
  .xv-rule-text { flex: 1 1 100%; }
  .xv-dialog-actions > button { flex: 1 1 auto; }
}