/* Stage 4 · Траты на компьютере, направление Б «Мозаика Q1» — как Обзор компьютера (desktop.css).
   Эталон: preview zt-trail-desktop-pick-20261014, вариант Б (Траты). Только тон, пробел и вес:
   без полосок, ::before-палочек, линий 1 px, градиентов, неона и ступенчатого появления.
   Телефонные правила остаются в transactions.css; этот файл действует от 1024 px. */
@media (min-width: 1024px) {

  /* Как на Обзоре компьютера: салатовой «+Трата» в верхней строке нет —
     трату добавляет капсула «Добавить трату» среди действий экрана. */
  body:has(#page-transactions.active) .shell-expense { display: none; }

  /* Страница — мозаика из 12 колонок. Панель «Лимиты сегодня» — плитка этой же сетки, не сайдбар. */
  #page-transactions .page-inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-content: start;
    width: 100%;
    min-width: 0;
  }
  #page-transactions .page-inner > * { min-width: 0; margin: 0; }
  #page-transactions #receiptScanHost:empty { display: none; }

  #page-transactions .page-head .shell-section-nav { order: 3; width: auto; }
  #page-transactions .page-header-leading > .page-actions { width: auto; }

  /* Сканирование уже живёт в карточке поиска — капсулу-дубль из шапки прячем. */
  #page-transactions .page-actions [data-receipt-scan] { display: none; }
  /* «Добавить доход» — такая же вторичная капсула, как «Импорт CSV» и «Добавить трату»:
     та же высота 44, радиус капсулы и кегль, без тяжёлой заливки. */
  #page-transactions .page-actions :is(.btn-brand, .btn-key, .btn-dark) {
    min-height: 44px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--well);
    color: var(--ink);
    font: 500 13px/1 var(--sans);
  }
  /* Пустой счётчик правил не занимает места: без пилюли остаётся чёрточка (запрет полосок). */
  #page-transactions .page-actions .cnt:empty { display: none; }

  /* Ряд плиток: главная салатовая плитка месяца (число сверху, подпись снизу)
     и одна плитка поиска на весь остаток ряда — «Фильтры» и «⋯» стоят в ней же,
     справа от поля, отдельной почти пустой плитки нет. */
  #page-transactions .tx-sticky {
    display: contents;
    position: static;
    z-index: auto;
    background: transparent;
    margin: 0;
    padding: 0;
  }
  #page-transactions .tx-top {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
    margin: 0;
  }
  #page-transactions .tx-top > * { min-width: 0; grid-row: 1; }
  #page-transactions .tx-top .ops-month-anchor {
    grid-column: 1 / 5;
    display: flex;
    align-items: flex-end;
  }
  #page-transactions .tx-top .ops-month-anchor .ops-total > span {
    font: 400 13px/20px var(--sans);
  }
  #page-transactions .tx-top .ops-search {
    grid-column: 5 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    /* справа внутри плитки пришвартованы «Фильтры» и «⋯» — поле до них не дотягивается */
    padding: 20px 184px 20px 20px;
    border-radius: 24px;
    background: var(--panel);
  }
  #page-transactions .tx-top .ops-search label.search { background: var(--well); }
  /* «Фильтры» и «⋯» — та же строка, что и поиск: без собственной плитки,
     кнопки лежат над правым краем плитки поиска (перекрытие в общей строке сетки). */
  #page-transactions .tx-top #opChips {
    grid-column: 10 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 20px;
  }

  /* Подсказка о перерасходе — строка на всю ширину между плитками и списком. */
  #page-transactions #opNudge { grid-column: 1 / -1; }
  #page-transactions .op-nudge { margin: 0; }
  #page-transactions .op-nudge-row { flex-wrap: wrap; gap: 8px 12px; }

  /* Список — широкая плитка, «Лимиты сегодня» — узкая: одна строка мозаики, без пустых половин. */
  #page-transactions .tx-layout {
    grid-column: 1 / 8;
    max-width: none;
    max-height: min(640px, calc(100dvh - 180px));
    overflow: auto;
  }
  #page-transactions .tx-list { margin: 0; }

  /* «Покрыть перерасход» — вторичная капсула в строке статуса, не чёрная кнопка. */
  #page-transactions .sum-row .ops-cover { background: var(--well); color: var(--ink); }

  /* Плитки списков крупнее телефонных: метка магазина 40 px. Логотипы уже цветные. */
  #page-transactions .txt .ops-merchant { width: 40px; height: 40px; border-radius: 14px; }

  /* «Лимиты сегодня»: плитка подпись/число/«из …»/капсула. Число и «из» в разных
     ячейках сетки — пробел между «912,49 $» и «из 400,00 $» не схлопнется никогда. */
  #page-transactions #r8Panel {
    grid-column: 8 / 13;
    align-self: start;
    position: sticky;
    top: 16px;
    max-height: calc(100dvh - 112px);
    overflow: auto;
    padding: 20px;
    border-radius: 24px;
    background: var(--panel);
    color: var(--ink);
  }
  #page-transactions #r8Panel .r8-panel-in { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
  #page-transactions #r8Panel .r8-panel-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
  #page-transactions #r8Panel .r8-panel-h h2 { margin: 0; font: 500 16px/24px var(--sans); color: var(--ink); }
  #page-transactions #r8Panel .r8-panel-open {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: -10px -4px;
    padding: 0 4px;
    font: 400 13px/24px var(--sans);
    color: var(--ink-2);
    text-decoration: none;
  }
  #page-transactions #r8Panel .r8-panel-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0;
    font: 400 13px/20px var(--sans);
    color: var(--ink-2);
  }
  #page-transactions #r8Panel .r8-panel-sum b {
    font: 500 24px/32px var(--sans);
    letter-spacing: -0.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--ink);
  }
  #page-transactions #r8Panel .r8-tiles { display: flex; flex-direction: column; gap: 8px; }
  #page-transactions #r8Panel .r8-tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "n v" "l c";
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
    min-width: 0;
    margin: 0;
    min-height: 56px;
    padding: 12px 16px;
    border: 0;
    border-radius: 16px;
    background: var(--well);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    font: 500 13px/1.3 var(--sans);
  }
  #page-transactions #r8Panel .r8-tn { grid-area: n; font: 500 13px/20px var(--sans); color: var(--ink); overflow-wrap: anywhere; }
  #page-transactions #r8Panel .r8-tv { grid-area: v; justify-self: end; font: 500 18px/24px var(--sans); letter-spacing: -0.3px; font-variant-numeric: tabular-nums; white-space: nowrap; }
  #page-transactions #r8Panel .r8-tl { grid-area: l; font: 400 12px/16px var(--sans); color: var(--ink-2); white-space: nowrap; }
  /* Пилюля состояния — тихая, с цветной точкой, как на Лимитах (Q1): без тяжёлой
     чёрной (светлая) / белой (тёмная) заливки. Сверх — красная, близко — янтарная,
     в лимите — зелёная; токены --st-* общие с Лимитами. */
  #page-transactions #r8Panel .r8-tile { --sem: var(--st-ok); }
  #page-transactions #r8Panel .r8-tile[data-state="over"] { --sem: var(--st-over); }
  #page-transactions #r8Panel .r8-tile[data-state="near"] { --sem: var(--st-close); }
  #page-transactions #r8Panel .r8-tc {
    grid-area: c;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sem) 12%, var(--panel));
    color: var(--sem);
    font: 500 11px/1.2 var(--sans);
    overflow-wrap: anywhere;
  }
  #page-transactions #r8Panel .r8-tc::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
  }
  @media (hover: hover) {
    #page-transactions #r8Panel .r8-tile:hover { filter: brightness(0.97); }
  }

  /* 1280: список шире, панель уже. */
  @media (min-width: 1280px) {
    #page-transactions .tx-layout { grid-column: 1 / 9; }
    #page-transactions #r8Panel { grid-column: 9 / 13; }
  }

  /* 1440: главная плитка не растёт — шире становится поиск. */
  @media (min-width: 1440px) {
    #page-transactions .tx-top .ops-month-anchor { grid-column: 1 / 4; }
    #page-transactions .tx-top .ops-search { grid-column: 4 / -1; }
  }

  /* 1920: перестройка — интервалы крупнее, список занимает 9 колонок. */
  @media (min-width: 1920px) {
    #page-transactions .page-inner,
    #page-transactions .tx-top { gap: 20px; }
    #page-transactions .tx-top .ops-month-anchor { grid-column: 1 / 4; }
    #page-transactions .tx-top .ops-search { grid-column: 4 / -1; }
    #page-transactions .tx-layout { grid-column: 1 / 10; }
    #page-transactions #r8Panel { grid-column: 10 / 13; }
  }

  /* Режим поиска из верхней строки: заголовок и главная плитка скрыты —
     поиск встаёт на её место и занимает весь ряд, «Фильтры» и «⋯» справа в нём же.
     Телефонная раскладка «1fr auto» (zt-search-mode) здесь не действует: мозаика
     остаётся 12-колоночной, иначе плитка поиска сжимается до узкой полосы. */
  html.zt-search-mode #page-transactions .tx-top { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  html.zt-search-mode #page-transactions .tx-top .ops-search { grid-column: 1 / -1; }

  /* Пока окно «Фото чека» открыто, страница за ним гаснет сильнее одной вуали:
     списки под полупрозрачным слоем перестают спорить с бумагой окна. */
  body:has(.r8-scanwin:not([hidden])) #page-transactions { opacity: 0.29; }
}