/* =============================================================================
 * report.css — PAGE-LEVEL LAYOUT ONLY for the "Отчёт по прибыли и убыткам" screen
 * (run PL_Report).
 *
 * Composes prepared pieces — header-shell, .umag-tree-view-item, .umag-summary-row,
 * the CONSUMED umag-select (styled by ds.css) — plus a filters bar. Those bring their
 * OWN CSS (linked separately); this file styles ONLY the page chrome + the select/
 * period/calendar LAYOUT glue (positioning, fixed trigger width, menu overlay, z-index,
 * calendar grid) that is NOT in ds.css. It does NOT re-style .umag-tree-view-item /
 * .umag-summary-row beyond the divider row.
 *
 * BOUNDARIES: Layer-2 tokens ONLY (DesignSystem/assets/styles/tokens.css). NO raw hex,
 * NO rgb(), NO Layer-1 primitive. Layout-only bare px (widths, icon 16/20, calendar
 * cell sizing, etc.) OK.
 * ========================================================================== */

/* ---- Native reset + font (page shell) ------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--bg-secondary-default);   /* grey page bg */
  color: var(--text-primary-default);
}

/* ---- A1: 32px gap between the header bar and the page content -------------- */
.umag-header { margin-bottom: var(--space-8x); }   /* 32px */

/* ---- Centered content column ---------------------------------------------- */
/* A2: no margin-top on the page — top spacing now comes from .umag-header (A1).
 * Horizontal page padding only; vertical bottom padding so the card doesn't touch
 * the viewport edge. */
.report-page {
  min-height: 100vh;
  padding: 0 var(--space-4x) var(--space-6x);   /* top 0 (A1 carries the gap) / 16 sides / 24 bottom */
}
.report-column {
  max-width: 1067px;
  margin: 0 auto;
}

/* ---- Title ----------------------------------------------------------------- */
/* ds.css ships no heading class → style the title via tokens here. */
.report-title {
  margin: 0 0 var(--space-6x) 0;              /* ~24px below */
  font-size: var(--font-size-xl);             /* 20 */
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-xl);    /* 24 */
  color: var(--text-primary-default);
}

/* ---- Card (white panel holding filters + body) ---------------------------- */
/* A3: no border — the white-on-grey contrast carries the panel. */
.report-card {
  background: var(--bg-surface-sf-0);         /* white */
  border-radius: var(--radius-2x);
  padding: var(--space-5x);                   /* 20 */
}

/* ---- Filters bar ----------------------------------------------------------- */
.report-filters {
  display: flex;
  align-items: center;
  gap: var(--space-4x);                       /* 16 */
  margin-bottom: var(--space-4x);             /* ~16px gap before the body */
}
.report-filters__left {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--space-3x);                       /* 12 — between the two selects */
}

/* Export button leading icon sizing (real umag-button styled by ds.css). */
.report-export .ds-ico { display: block; width: 20px; height: 20px; }
.report-export umag-icon { display: block; }

/* ---- #1+#2: SELECT PREFIX ICON sizing -------------------------------------
 * ds.css positions .select__prefix (absolute) and sets its `left:` per size, but
 * never sizes the inner <svg class="umag-icon-svg"> — so the shop/calendar prefix
 * glyphs collapsed to width:0 (invisible). Size them to 20×20 so both prefixes show. */
umag-select .select__prefix {
  width: 20px; height: 20px; flex: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--icon-secondary-default);
}
umag-select .select__prefix .umag-icon-svg,
umag-select .select__prefix svg { width: 20px; height: 20px; display: block; }
/* keep the trailing chevron at 20px too (ds.css size-s only sets its top offset) */
umag-select.size-s .select__icon .umag-icon-svg,
umag-select.size-s .select__icon svg { width: 20px; height: 20px; display: block; }

/* =============================================================================
 * CONSUMED umag-select LAYOUT GLUE (lifted from app.css). The REAL umag-select DOM
 * is emitted by report.js (selectComponent) and styled by ds.css (umag-select.size-m
 * → 40px .select__input-wrapper, .select__menu, .select__item). report.css adds ONLY:
 *   · positioning hooks so the .select__menu anchors under the trigger (real menu was
 *     a CDK overlay; here it's an absolute child — top/z only),
 *   · the click-away host classes (.shop-select / .period-select),
 *   · a FIXED trigger width so it doesn't grow with the selection,
 *   · the prototype-only «Выбрать все» select-all row (umag-select has NO native
 *     select-all — flagged; built as a real .select__item.multiple check-icon row).
 * No component internals here — geometry/look come from ds.css.
 * ------------------------------------------------------------------------- */
/* #3: filters are size-s (32px). ds.css `umag-select.size-s { --control-h:32px }`
 * + `.select__input-wrapper { height: var(--control-h) }` gives the 32px trigger
 * natively — no height override needed here, only the inline-block display hook. */
umag-select.size-s { display: inline-block; }
umag-select.period-select { min-width: 220px; }
/* the shop trigger is FIXED width — must NOT grow with the number of selected ТТ.
 * The .select__input clips the long label with ellipsis; the JS appends the «… + N»
 * overflow so the count stays visible inside the fixed box. */
umag-select.shop-select { width: 280px; }
umag-select.shop-select .select__input-wrapper { width: 100%; }
/* host position:relative so the absolutely-positioned .select__menu anchors to the
 * trigger; lift the OPEN select above siblings. */
umag-select .select { position: relative; }
umag-select.is-open { position: relative; z-index: var(--z-popover); }
umag-select.is-open .select__menu { z-index: var(--z-popover); }
/* prototype-only «Выбрать все» row — a real .select__item.multiple check-icon row
 * (no checkbox, no badge). Only addition: a hairline UNDER it separating the
 * select-all control from the option list (structural, not a per-row divider). */
.select__item.shop-select__all {
  border-bottom: 1px solid var(--border-primary-soft);
  border-radius: 0; margin-bottom: var(--space-1x); padding-bottom: var(--space-2x);
}
/* the multiple item reserves the check-icon gutter on EVERY row so labels don't shift
 * when checked; unselected → keep the icon element (holding the gutter) but hide its glyph. */
.select__item.multiple > umag-icon .umag-icon-svg { width: 16px; height: 16px; }
.select__item.multiple .select__check--empty { visibility: hidden; }

/* =============================================================================
 * PROTOTYPE-ONLY: range calendar for «Свой период» (lifted from app.css). The real
 * custom-range picker is umag-date-picker's inner PrimeNG p-datepicker (CDK overlay) —
 * its day-grid <table> is NOT in ds.css. Reconstructed here on the REAL umag-date-picker
 * tokens (size-m): panel surface, header (32x32 round nav + month/year), weekday row,
 * day grid (32px round days, square --bg-accent-soft range band, --bg-accent-default
 * round edges, --bg-tertiary today), footer (Reset/Apply). Layer-2 tokens only; layout-only
 * bare px (cell sizing) allowed. Dev-handoff: real umag-select-date-picker.
 * ------------------------------------------------------------------------- */
.period-anchor { position: relative; display: inline-block; }
.umag-date-panel.calendar-pop {
  position: absolute; top: calc(100% + var(--space-2x)); left: 0; z-index: var(--z-popover);
  width: 248px;
  background: var(--bg-surface-sf-0);
  border-radius: var(--radius-1x);
  box-shadow: var(--shadow-pt-8);
  padding: var(--space-3x);
}
.cal__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-1x) 0; margin-bottom: var(--space-1x); }
.cal__nav {
  width: 32px; height: 32px; border-radius: var(--radius-1x);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--icon-primary-default);
  border: 0; background: none; cursor: pointer;
}
.cal__nav:hover { background: var(--bg-secondary-hover); }
.cal__nav-icon .umag-icon-svg { width: 20px; height: 20px; }
.cal__nav-icon--prev { transform: rotate(90deg); }    /* chevron-down → points left */
.cal__nav-icon--next { transform: rotate(-90deg); }   /* chevron-down → points right */
.cal__title { display: inline-flex; align-items: baseline; gap: var(--space-1x); }
.cal__month {
  color: var(--text-primary-default); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-l); line-height: var(--font-line-height-l);
}
.cal__year {
  color: var(--text-secondary-default); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-l); line-height: var(--font-line-height-l);
}
.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__dow { margin-bottom: var(--space-1x); }
.cal__dow-cell {
  text-align: center; color: var(--text-secondary-default);
  height: 32px; display: flex; align-items: center; justify-content: center;
}
.cal__days { row-gap: var(--space-2x); }
.cal__day {
  height: 32px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.cal__day-num {
  width: 32px; height: 32px; border-radius: var(--radius-4x);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-m); line-height: var(--font-line-height-m);
  color: var(--text-primary-default);
}
.cal__day:not(.cal__day--blank):hover .cal__day-num { background: var(--bg-primary-hover); }
.cal__day--blank { cursor: default; }
.cal__day--today .cal__day-num { background: var(--bg-tertiary-default); }
.cal__day--in { background: var(--bg-accent-soft); }
.cal__day--in .cal__day-num { background: transparent; border-radius: 0; }
.cal__day--edge .cal__day-num { background: var(--bg-accent-default); color: var(--text-primary-inverse); }
.cal__day--edge-first { background: linear-gradient(to right, transparent 50%, var(--bg-accent-soft) 50%); }
.cal__day--edge-last { background: linear-gradient(to right, var(--bg-accent-soft) 50%, transparent 50%); }
.cal__range-text { color: var(--text-secondary-default); flex: 1 1 auto; }
.umag-date-panel.calendar-pop .umag-date-footer {
  display: flex; flex-direction: column; gap: var(--space-2x);
  margin-top: var(--space-3x); padding-top: var(--space-3x);
  border-top: 1px solid var(--border-primary-soft);
}
.umag-date-panel.calendar-pop .umag-date-footer__times { display: flex; gap: var(--space-2x); }
.cal__time-field {
  flex: 1 1 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2x);
  height: 32px; padding: 0 var(--space-2x); box-sizing: border-box;
  border: 1px solid var(--border-primary-soft); border-radius: var(--radius-0-5x);
}
.cal__time-label { color: var(--text-secondary-default); }
.cal__time-value { color: var(--text-primary-default); }
.umag-date-panel.calendar-pop .umag-date-footer__actions { display: flex; gap: var(--space-2x); }
.umag-date-panel.calendar-pop .umag-date-footer__actions button[umag-button] { flex: 1 1 0; }

/* =============================================================================
 * Body — the row stack: tree rows + summary rows + dividers.
 * ------------------------------------------------------------------------- */
.report-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1x);                       /* 4 */
}

/* Divider row — 24px tall, a 1px line with ~8px side insets. */
.report-divider {
  height: 24px;
  display: flex;
  align-items: center;
  padding: 0 var(--space-2x);                 /* ~8px side insets */
}
.report-divider::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: var(--border-primary-soft);
}

/* =============================================================================
 * #9 — MULTI-ТТ MATRIX (LIFTED from app.css). Shown when 2+ ТТ are selected.
 * The grid mirrors the REAL umag-table cell DOM/styles (Layer-2 token roles); the
 * FROZEN first column + synchronous grouped expand are the genuine DS gaps (umag-table
 * is a PrimeNG <p-table>, not in ds.css) → prototype-only. Layer-2 tokens only; layout
 * bare px (column tracks, 16px chevron) allowed.
 * ------------------------------------------------------------------------- */
.matrix-wrap {
  border: 1px solid var(--border-primary-soft);
  border-radius: var(--radius-1x);
  overflow: hidden;
  background: var(--bg-primary-default);
}
.matrix-scroll { overflow-x: auto; overflow-y: visible; }
.matrix { display: grid; min-width: max-content; }      /* columns set inline by JS */

.matrix__cell {
  padding: 15px var(--space-3x);
  display: flex; align-items: flex-start;
  background: var(--bg-primary-default);
  color: var(--text-primary-default);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-m);
  line-height: var(--font-line-height-m);
}
.matrix__cell.num { justify-content: flex-end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.matrix__cell.zero { color: var(--text-tertiary-default); }

.matrix__head {
  min-height: 40px;
  padding: var(--space-2x) var(--space-3x);
  background: var(--bg-secondary-default);
  color: var(--text-secondary-default);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-s);
  line-height: var(--font-line-height-s);
  align-items: center;
  position: sticky; top: 0; z-index: var(--z-sticky);
  overflow: hidden;
}
.matrix__head.num { justify-content: flex-end; }

/* sticky FIRST column (статьи) — fixed 240px, clips long names with ellipsis. */
.matrix__cell.col-articles {
  position: sticky; left: 0; z-index: var(--z-sticky);
  color: var(--text-primary-default);
  border-right: 1px solid var(--border-primary-soft);
  width: 240px; min-width: 240px; max-width: 240px;
  justify-content: flex-start; overflow: hidden;
}
.matrix__head.col-articles { z-index: calc(var(--z-sticky) + 1); }
.matrix__article-label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}

/* «Итого» column — emphasis via WEIGHT (P-005), DS border token. */
.matrix__cell.col-total { font-weight: var(--font-weight-bold); border-left: 1px solid var(--border-primary-soft); }
.matrix__head.col-total { font-weight: var(--font-weight-bold); }

/* group toggle in the articles column — chevron + label; the DS chevron glyph (#8)
 * rotates by .is-open (closed → right via the glyph itself; open → down). */
.matrix__group-toggle { display: flex; align-items: center; gap: var(--space-2x); cursor: pointer; user-select: none; width: 100%; min-width: 0; }
.matrix__group-toggle:hover { background: var(--bg-primary-hover); }
.matrix__chevron {
  flex: none; width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--icon-secondary-default);
}
.matrix__chevron svg { width: 16px; height: 16px; display: block; }
.matrix__cell.is-group { font-weight: var(--font-weight-bold); }
.matrix__cell.is-subgroup .matrix__group-toggle { padding-left: var(--space-4x); }
.matrix__cell.is-child.col-articles { padding-left: var(--space-8x); }
.matrix__cell.is-subchild.col-articles { padding-left: var(--space-10x); }

/* total lines (Валовая/Чистая) — emphasis by WEIGHT + ONE plate colour (P-004). */
.matrix__cell.is-totalline { font-weight: var(--font-weight-bold); background: var(--bg-secondary-default); }
.matrix__cell.is-totalline.col-articles { background: var(--bg-secondary-default); }
.matrix__cell.is-totalline.col-total { background: var(--bg-secondary-default); }
.matrix__cell.is-totalline.has-subtotal-divider { border-bottom: 1px solid var(--border-primary-soft); }
.matrix__cell.is-grandtotal { border-top: 1px solid var(--border-primary-soft); }

/* row hover band across all columns (synchronous). */
.matrix__cell.is-hover { background: var(--bg-primary-hover); }
.matrix__cell.is-hover.col-articles { background: var(--bg-primary-hover); }
.matrix__cell.is-hover.col-total { background: var(--bg-primary-hover); }

.matrix__head-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }