/* Reports (Raporty) screen, 1:1 with Stock Pulse Raporty.dc.html. Tokens only (styles/tokens.css);
   the rep- prefix keeps it from colliding with other screens. */

/* ---------- Report card ---------- */
.rep-card { margin-top: 20px; min-width: 0; border: 1px solid var(--border-subtle); border-radius: var(--r-md); background: var(--bg-card); }
.rep-card__head { padding: 20px 22px 0; }
.rep-top { position: relative; z-index: var(--z-header-menu); display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.rep-top__text { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.rep-title { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.rep-desc { color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; text-wrap: pretty; }
.rep-actions { display: flex; align-items: center; gap: 8px; }
.rep .btn.rep-csv { padding: 0 14px; }
.rep .btn--secondary.rep-csv:hover:not(:disabled) { border-color: var(--border-default); }
.rep .dd--picker .dd__btn { color: var(--text-primary); }
/* Prototype menu items are regular weight (the kit renders chip/picker items at 450). */
.rep .dd--chip .dd__item, .rep .dd--picker .dd__item { font-weight: 400; }

/* ---------- Filters ---------- */
.rep-filters { position: relative; z-index: var(--z-toolbar); display: flex; align-items: center; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.rep-filters .dd--chip .dd__btn { color: var(--text-primary); }
.rep-clear {
  height: 32px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--accent-text); font: inherit; font-size: var(--fs-meta); cursor: pointer;
}
.rep-clear:hover { background: var(--bg-input); }

/* ---------- KPI tiles ---------- */
.rep-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 16px; }
.rep-kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg-raised); }
.rep-kpi__label { color: var(--text-secondary); font-size: var(--fs-caption); }
.rep-kpi__value { font-family: var(--font-mono); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fin-lock.rep-kpi__lock { gap: 6px; min-height: 21px; font-size: var(--fs-small); }

/* ---------- Table ---------- */
.rep-table { margin-top: 16px; }
.rep .tbl th { padding: 10px 8px; }
.rep .tbl td { padding: 11px 8px; }
.rep .tbl th:first-child, .rep .tbl td:first-child { padding-left: 22px; }
.rep .tbl th:last-child, .rep .tbl td:last-child { padding-right: 22px; }
/* Pills sit in the 40 px prototype row (the prototype shows the status as coloured text). */
.rep .tbl td .pill { margin: -2px 0; white-space: nowrap; }
.rep .tbl__empty { padding: 36px 22px !important; }
.rep-tone { font-weight: 500; }
.rep-sub { margin-left: 8px; color: var(--text-tertiary); font-size: var(--fs-small); }
.rep-foot { margin: 0; padding: 14px 22px; border-top: 1px solid var(--border-subtle); color: var(--text-tertiary); font-size: var(--fs-small); }

/* ---------- Finance lock (report about money the user may not see) ---------- */
.rep-lock {
  display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; padding: 40px 22px 44px;
  border-top: 1px solid var(--border-subtle); text-align: center;
}
.rep-lock__icon { margin-bottom: 4px; color: var(--text-tertiary); }
.rep-lock__title { margin: 0; font-size: var(--fs-nav); font-weight: 500; }
.rep-lock__text { max-width: 460px; margin: 0; color: var(--text-secondary); font-size: var(--fs-meta); line-height: 1.5; }